/* ============================================================
   ABC Authentic — Core Styles
   Uncommon UI: glassmorphism, magnetic buttons, spotlight cards,
   aurora backgrounds, smooth page transitions.
   ============================================================ */

* { scrollbar-width: thin; scrollbar-color: #17b88155 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #17b88155; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #17b88199; }

html { scroll-behavior: smooth; }

/* ---------- Glass Card ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(20,26,36,0.9), rgba(10,14,20,0.95));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ---------- Premium hover card: rich rotating border-light + calm shine sweep ----------
   Design reference: studied a well-known BD fintech reseller site's premium
   product-card treatment (rotating conic-gradient ring confined to a thin
   border + a slow diagonal shine pass). Re-implemented here entirely in our
   own brand palette (emerald/teal for user, violet/fuchsia for admin) — no
   colors, markup or code copied. */
@property --card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --glow-o {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
.spot-card {
  position: relative; overflow: hidden; isolation: isolate;
  --card-angle: 0deg;
  --glow-o: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}

/* Layer 1: soft mouse-follow glow (hover-only) + a continuous, very faint
   diagonal shine pass (always animating, low opacity — reads as calm
   "polish", not a distracting wash). Both confined to the card by
   overflow:hidden above. */
.spot-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(62,212,156, var(--glow-o)), transparent 65%),
    linear-gradient(115deg, transparent 44%, rgba(255,255,255,0.05) 50%, transparent 56%);
  background-size: auto, 260% 260%;
  background-position: 0 0, -30% -30%;
  animation: cardShineSweep 7s ease-in-out infinite;
  transition: --glow-o .4s ease;
  pointer-events: none; z-index: 0;
}
.spot-card:hover::before { --glow-o: 1; }
@keyframes cardShineSweep {
  0%, 100% { background-position: 0 0, -30% -30%; }
  50%      { background-position: 0 0, 130% 130%; }
}

/* Layer 2: ambient rotating border light — a richer, multi-stop arc confined
   strictly to the 1.5px card edge (mask-composite: exclude keeps it off the
   interior entirely). Slow (13s) continuous rotation so it reads as light
   gently travelling around the rim, never a busy glow. */
.spot-card::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--card-angle),
    transparent 0deg, transparent 258deg,
    rgba(23,184,129,0.5) 282deg,
    rgba(62,212,156,0.9) 304deg,
    rgba(110,231,183,0.55) 320deg,
    transparent 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.6;
  transition: opacity .4s ease;
  animation: cardBeamSpin 13s linear infinite;
}
@keyframes cardBeamSpin { to { --card-angle: 360deg; } }
.spot-card:hover::after { opacity: 1; }

.spot-card > * { position: relative; z-index: 1; }

/* Gentle lift on hover — tactile without being jarring */
.spot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(23,184,129,0.22), 0 3px 10px -4px rgba(0,0,0,0.35);
  border-color: rgba(62,212,156,0.24);
}
.admin-mode .spot-card:hover {
  box-shadow: 0 10px 28px -10px rgba(139,92,246,0.26), 0 3px 10px -4px rgba(0,0,0,0.35);
  border-color: rgba(167,139,250,0.28);
}
.admin-mode .spot-card::after {
  background: conic-gradient(from var(--card-angle),
    transparent 0deg, transparent 258deg,
    rgba(124,58,237,0.5) 282deg,
    rgba(167,139,250,0.9) 304deg,
    rgba(216,180,254,0.55) 320deg,
    transparent 344deg, transparent 360deg);
}
.admin-mode .spot-card::before {
  background:
    radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(139,92,246, var(--glow-o)), transparent 65%),
    linear-gradient(115deg, transparent 44%, rgba(255,255,255,0.05) 50%, transparent 56%);
  background-size: auto, 260% 260%;
}

@media (prefers-reduced-motion: reduce) {
  .spot-card::after { animation: none; opacity: 0.3; }
  .spot-card::before { animation: none; }
  .spot-card { transition: none; }
  .spot-card:hover { transform: none; }
}

/* ---------- Magnetic / ripple buttons ---------- */
.btn-glow {
  position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .25s ease;
}
.btn-glow:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-glow:active { transform: translateY(0) scale(0.97); }
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  animation: rippleAnim .6s ease-out; background: rgba(255,255,255,0.45); pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(3.5); opacity: 0; } }

/* ---------- Shimmer skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
}

/* ---------- Page transition ---------- */
.page-enter { animation: pageIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Status badge glow ---------- */
.badge-pulse::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  animation: badgePulse 2s ease-out infinite;
}
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: .5; } 100% { box-shadow: 0 0 0 8px currentColor; opacity: 0; } }

/* ---------- Toast ---------- */
.toast-enter { animation: toastIn .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } }

/* ---------- Sidebar link underline glow ---------- */
.nav-link { position: relative; transition: background-color .15s ease; }
.nav-link.active { color: #3ed49c; }
.nav-link.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, #3ed49c, #17b881);
  box-shadow: 0 0 12px #17b881aa;
}

/* ---------- Admin Mode override — violet/fuchsia accent instead of brand green ---------- */
.admin-mode .nav-link.admin-nav-link.active { color: #c4b5fd; }
.admin-mode .nav-link.admin-nav-link.active::before {
  background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
  box-shadow: 0 0 12px #8b5cf6aa;
}
.admin-mode ::selection { background: rgba(139,92,246,0.35); }

/* ---------- Floating orb decoration ---------- */
.orb { border-radius: 999px; filter: blur(60px); position: absolute; pointer-events: none; }

/* ---------- Progress ring ---------- */
.ring-track { stroke: rgba(255,255,255,0.08); }
.ring-progress { stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); }

/* ---------- Number counter ---------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Form input focus glow ---------- */
.input-glow:focus {
  box-shadow: 0 0 0 3px rgba(23,184,129,0.25), 0 0 20px rgba(23,184,129,0.1);
}

/* ---------- Modal backdrop ---------- */
.modal-backdrop { animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-panel { animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- Loading dots ---------- */
.dot-flashing { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #17b881; animation: dotFlash 1s infinite linear alternate; animation-delay: .5s; }
.dot-flashing::before, .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #17b881; }
.dot-flashing::before { left: -14px; animation: dotFlash 1s infinite alternate; animation-delay: 0s; }
.dot-flashing::after { left: 14px; animation: dotFlash 1s infinite alternate; animation-delay: 1s; }
@keyframes dotFlash { 0% { background-color: #17b881; } 50%, 100% { background-color: rgba(23,184,129,0.2); } }

/* ---------- Utility ---------- */
.text-gradient { background: linear-gradient(90deg, #3ed49c, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   Dashboard click comfort — tactile press feedback + tap targets
   Applies globally to every clickable control across dashboard/admin:
   sidebar nav links, list-row links (spot-card, hover:bg-white/5 rows),
   pagination buttons, small icon-only buttons (copy/edit/delete/toggle),
   notif/user-menu/sidebar-toggle icon buttons. Two problems fixed:
   1) No visual "press" acknowledgment on tap — button just re-styles on
      the NEXT frame with no feel of having been pressed.
   2) Mobile browsers paint a gray flash rectangle on tap (default
      -webkit-tap-highlight-color) that looks broken next to our custom
      glass/gradient press effects — disabled in favor of our own scale
      feedback below, which is instant and consistent on every device.
   ============================================================ */
a[data-link], button, .page-btn, .nav-link, #notif-btn, #user-menu-btn,
#sidebar-toggle, #sidebar-close, .copy-account-btn {
  -webkit-tap-highlight-color: transparent;
}
a[data-link]:active, button:not(:disabled):active, .page-btn:not(:disabled):active {
  transform: scale(0.96);
}
.nav-link:active { background-color: rgba(255,255,255,0.09); }
a.spot-card:active { transform: scale(0.985) translateY(0); }
a[data-link].block:active, div[class*="hover:bg-white/5"]:active {
  background-color: rgba(255,255,255,0.09);
}
a[data-link], button, .page-btn {
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), background-color .12s ease;
}
/* Icon-only buttons (notif bell, user avatar toggle, sidebar hamburger,
   copy-account, edit/delete/toggle) — Tailwind sizes some as small as
   28px (w-7 h-7); pad their hit area invisibly up to the ~40px minimum
   comfortable mobile tap target without changing their visual size. */
#notif-btn, #user-menu-btn, #sidebar-toggle, #sidebar-close,
.copy-account-btn, .method-edit-btn, .method-delete-btn, .page-btn {
  position: relative;
}
.copy-account-btn::before, .method-edit-btn::before, .method-delete-btn::before {
  content: ''; position: absolute; inset: -6px;
}
@media (prefers-reduced-motion: reduce) {
  a[data-link]:active, button:active, .page-btn:active, a.spot-card:active { transform: none; }
}

/* ---------- WhatsApp floating contact button — circular, watery/liquid-ripple hover ---------- */
.whatsapp-fab {
  position: fixed;
  background: linear-gradient(145deg, #25d366, #128c7e);
  box-shadow: 0 6px 20px -4px rgba(18,140,126,0.55), 0 2px 8px rgba(0,0,0,0.35);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  isolation: isolate;
  overflow: visible;
}
.whatsapp-fab-core {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #25d366, #128c7e);
}
/* Idle ambient pulse — a slow watery ripple always breathing outward, even without hover */
.whatsapp-fab-ripple {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.55);
  animation: whatsappWaterPulse 2.8s ease-out infinite;
  pointer-events: none;
}
.whatsapp-fab-ripple-delay { animation-delay: 1.4s; }
@keyframes whatsappWaterPulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Hover: liquid swell + extra ripple bloom + gentle wobble like a water droplet */
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 12px 28px -6px rgba(18,140,126,0.7), 0 4px 14px rgba(0,0,0,0.4);
}
.whatsapp-fab:hover .whatsapp-fab-core {
  animation: whatsappJelly .7s ease-in-out;
  border-radius: 46% 54% 52% 48% / 50% 48% 52% 50%;
}
.whatsapp-fab:hover .whatsapp-fab-ripple {
  animation-duration: 1.1s;
  border-color: rgba(37,211,102,0.85);
}
@keyframes whatsappJelly {
  0%   { border-radius: 50%; }
  30%  { border-radius: 44% 56% 60% 40% / 55% 45% 55% 45%; }
  55%  { border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%; }
  80%  { border-radius: 47% 53% 53% 47% / 52% 48% 52% 48%; }
  100% { border-radius: 50%; }
}
@media (max-width: 640px) {
  /* !important is required here: Tailwind's CDN script injects its utility
     stylesheet AFTER this file loads, so the inline w-14/h-14/bottom-6/right-6
     classes on the <a id="whatsapp-float-btn"> element win the cascade on
     equal specificity and silently overrode this smaller mobile size.
     Moved to bottom-LEFT on mobile: every card/list/table action button in
     this app (order buttons, CTA pills, primary actions) is right-aligned,
     so a bottom-right fixed FAB was unavoidably sitting on top of them as
     the user scrolled (confirmed overlap on the Services page order button).
     The bottom-left corner has no competing interactive elements anywhere
     in the app, so this fully removes the overlap. */
  #whatsapp-float-btn.whatsapp-fab {
    bottom: 1.1rem !important;
    right: auto !important;
    left: 1rem !important;
    width: 2.9rem !important;
    height: 2.9rem !important;
  }
  .whatsapp-fab-core { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab-ripple { animation: none; opacity: .35; }
  .whatsapp-fab:hover .whatsapp-fab-core { animation: none; }
  .whatsapp-fab:hover { transform: translateY(-2px); }
}

/* ============================================================
   Live Notice ticker — admin-controlled marquee bar
   Body-level fixed pill at top-center; dark glass base with a warm
   orange "LIVE NOTICE" badge and an infinitely-scrolling message track.
   ============================================================ */
.live-notice-wrap {
  /* Static, full-width banner at the very top of the document flow —
     NOT position:fixed — so it naturally pushes the sticky nav/topbar/
     sidebar down instead of floating over them. It sits as the first
     child of <body>, before #aurora-bg, so every page (landing,
     dashboard, admin) gets it above their own sticky headers for free. */
  position: relative;
  z-index: 90;
  padding: 2px 0;
  background: linear-gradient(90deg, rgba(217,70,239,0.6), rgba(251,146,60,0.6), rgba(56,189,248,0.55), rgba(217,70,239,0.6));
  background-size: 300% 100%;
  animation: liveNoticeBorderFlow 8s linear infinite;
  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.5);
}
@keyframes liveNoticeBorderFlow { to { background-position: 300% 0; } }
.live-notice-inner {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(10,14,22,0.96), rgba(6,9,15,0.98));
  overflow: hidden;
  height: 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.live-notice-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 0.85rem;
  background: linear-gradient(135deg, rgba(120,53,15,0.55), rgba(154,52,18,0.4));
  color: #fb923c;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.live-notice-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fb923c;
  box-shadow: 0 0 8px #fb923c;
  animation: liveNoticeDotBlink 1.4s ease-in-out infinite;
}
@keyframes liveNoticeDotBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.live-notice-track-wrap {
  flex: 1; min-width: 0; height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0 1rem;
  display: flex; align-items: center;
}
.live-notice-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: liveNoticeScroll var(--notice-duration, 22s) linear infinite;
}
.live-notice-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: #f1f5f9;
  padding-right: 3.5rem;
}
@keyframes liveNoticeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .live-notice-inner { height: 2.3rem; }
  .live-notice-badge { padding: 0 0.65rem; font-size: 0.62rem; }
  .live-notice-text { font-size: 0.74rem; padding-right: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .live-notice-wrap { animation: none; }
  .live-notice-track { animation-duration: 40s; }
  .live-notice-dot { animation: none; }
}

/* ============================================================
   Promo / Offer popup card — eye-catching announcement modal
   Neon gradient border + dark glass panel, admin-controlled content.
   ============================================================ */
.promo-modal-backdrop {
  background: rgba(3,5,9,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .3s ease both;
}
.promo-modal-panel {
  animation: promoPopIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes promoPopIn {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.promo-modal-inner {
  border-radius: 1.5rem;
  padding: 1.75rem;
  background: linear-gradient(165deg, rgba(20,16,30,0.97), rgba(8,10,16,0.98));
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 0 0 1px rgba(217,70,239,0.15),
    0 20px 60px -15px rgba(217,70,239,0.35),
    0 25px 70px -20px rgba(0,0,0,0.6);
}
.promo-badge {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(217,70,239,0.22), rgba(251,146,60,0.22));
  color: #f0abfc;
  border: 1px solid rgba(217,70,239,0.35);
}
@media (max-width: 640px) {
  .promo-modal-inner { padding: 1.4rem; border-radius: 1.25rem; }
}