/* ═══════════════════════════════════════════════════════════════════════════
   AYLECALLS — pink · bubbly · glassmorphic theme
   Loaded AFTER custom.css. Only restyles; no layout logic lives here.
   Note: never put backdrop-filter / z-index on a container that holds a
   modal or a custom-select dropdown — both create stacking contexts and
   would trap or cover them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ay-pink: #ff4fa3;
  --ay-pink-2: #ff7ac0;
  --ay-pink-3: #ffb3d9;
  --ay-pink-deep: #d81b78;
  --ay-glass: rgba(255, 255, 255, .07);
  --ay-glass-2: rgba(255, 255, 255, .11);
  --ay-glass-border: rgba(255, 179, 217, .22);
  --ay-blur: blur(18px) saturate(150%);
  --ay-radius: 22px;
  --ay-radius-sm: 14px;
  --ay-shadow: 0 12px 40px rgba(10, 0, 8, .45);
  --ay-glow: 0 10px 34px rgba(255, 79, 163, .28);
  --ay-grad: linear-gradient(135deg, #ff4fa3 0%, #ff8fcb 100%);
  --ay-grad-strong: linear-gradient(135deg, #ff3d9a 0%, #d81b78 100%);
  --ay-font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --ay-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-link-color: #ff7ac0;
  --bs-link-hover-color: #ffb3d9;
}

/* ── Canvas: deep berry night with soft pink light blooms ─────────────────── */
html body,
html body.bg-dark2 {
  background:
    radial-gradient(1100px 650px at 8% -8%, rgba(255, 79, 163, .30), transparent 60%),
    radial-gradient(900px 600px at 108% 12%, rgba(255, 122, 192, .20), transparent 62%),
    radial-gradient(900px 900px at 50% 118%, rgba(190, 60, 255, .16), transparent 60%),
    linear-gradient(165deg, #1c0718 0%, #2a0a24 48%, #170514 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--ay-font-body);
}
/* Animated 3D scene — WebGL in /js/scene3d.js, 2D fallback in /js/ambient.js */
#ayScene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: ayFadeIn 1.2s ease .1s forwards;
}
@keyframes ayFadeIn { to { opacity: 1; } }

::selection { background: rgba(255, 79, 163, .45); color: #fff; }
* ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff7ac0, #d81b78) !important; border-radius: 999px !important; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .modal-title, .ay-word {
  font-family: var(--ay-font-display);
}
.products-area h4 { font-weight: 600; letter-spacing: .3px; }

/* ── Navbar: floating glass capsule ───────────────────────────────────────── */
body > .container-md > .navbar {
  position: relative;
  z-index: 100;                       /* keeps the account dropdown above page content */
  margin-top: 14px;
  padding: 8px 14px !important;
  background: var(--ay-glass) !important;
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border);
  border-radius: 28px !important;
  box-shadow: var(--ay-shadow);
}
/* The wordmark is text now, not a bottom-heavy image — centre everything */
.navbar,
.navbar .navbar-collapse,
.navbar .navbar-nav,
.navbar-brand { align-items: center !important; }
body > .container-md > .navbar .nav-link { transform: none !important; }
.navbar .nav-link.cart-count > svg { transform: none !important; }

.ay-brand { display: flex !important; align-items: center !important; gap: 10px; text-decoration: none; }
.navbar-brand > img.ay-logo {
  width: auto !important;
  height: 62px !important;
  max-height: 62px;
  margin: -8px 0 -8px 4px;
  filter: drop-shadow(0 4px 14px rgba(255, 79, 163, .45));
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.navbar-brand:hover > img.ay-logo { transform: scale(1.06) rotate(-2deg); }
.ay-word {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .6px;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffd6ea 45%, #ff7ac0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(216, 27, 120, .6)) drop-shadow(0 0 14px rgba(255, 79, 163, .45));
}

.navbar .nav-link {
  font-family: var(--ay-font-body);
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .7px !important;
  padding: 9px 14px !important;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.navbar-dark .navbar-nav .nav-link:not(.btn):not(.cart-count):hover {
  background: rgba(255, 255, 255, .07);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:not(.btn):not(.cart-count).active {
  color: #fff !important;
  background: rgba(255, 79, 163, .24);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .45), 0 0 16px rgba(255, 79, 163, .25);
}
.navbar .nav-link.cart-count { padding: 6px 10px !important; }
.navbar .nav-link.cart-count svg { filter: drop-shadow(0 0 8px rgba(255, 79, 163, .55)); }
.cart-count > span { top: -2px !important; font-weight: 800 !important; font-size: 10px !important; color: #fff !important;
  background: var(--ay-grad-strong); border-radius: 999px !important; padding: 1px 6px !important; transform: translateX(10%) !important; left: 55% !important; }

/* Account dropdown — frosted */
.dropdown-menu {
  background: rgba(40, 11, 35, .88) !important;
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border-radius: 20px !important;
  box-shadow: var(--ay-shadow), 0 0 0 1px var(--ay-glass-border) !important;
}
.dropdown-item { border-radius: 12px; }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(255, 79, 163, .18) !important; }

@media (max-width: 991.98px) {
  body > .container-md > .navbar { border-radius: 24px !important; }
  .navbar .dropdown-menu.account-dropdown { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
  .ay-word { font-size: 23px; }
}

/* ── Buttons: bubbly pills ────────────────────────────────────────────────── */
.btn {
  border-radius: 999px !important;
  font-family: var(--ay-font-body);
  font-weight: 800 !important;
  letter-spacing: .3px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease !important;
}
/* Primary actions — glossy pink gradient */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-gradient,
.navbar .nav-link.btn,
.items > .item .btn,
#btn-back-to-top {
  background-color: transparent !important;
  background-image: var(--ay-grad-strong) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(255, 79, 163, .38), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  text-shadow: 0 1px 1px rgba(120, 0, 50, .35);
}
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-gradient:hover,
.navbar .nav-link.btn:hover,
.items > .item .btn:hover,
#btn-back-to-top:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255, 79, 163, .5), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
/* Secondary actions — frosted glass pill */
.btn.btn-secondary,
.btn-secondary {
  --bs-btn-bg: transparent;
  background-color: rgba(255, 255, 255, .08) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--ay-glass-border) !important;
}
.btn.btn-secondary:hover,
.btn-secondary:hover {
  background-color: rgba(255, 79, 163, .22) !important;
  border-color: rgba(255, 122, 192, .55) !important;
  color: #fff !important;
}
.items > .item .btn { border-color: transparent !important; }
.btn:disabled, .btn.disabled { filter: saturate(.4) brightness(.8); }

/* ── Form fields: frosted, rounded ────────────────────────────────────────── */
input.form-control,
textarea.form-control,
.form-control {
  background-color: rgba(255, 255, 255, .06) !important;
  border: 1.5px solid rgba(255, 179, 217, .18) !important;
  border-radius: var(--ay-radius-sm) !important;
  color: #fff !important;
}
input.form-control:focus,
textarea.form-control:focus,
.form-control:focus {
  background-color: rgba(255, 255, 255, .09) !important;
  border-color: var(--ay-pink-2) !important;
  box-shadow: 0 0 0 4px rgba(255, 79, 163, .18) !important;
}
.form-control::placeholder { color: rgba(255, 214, 234, .45) !important; }

/* Input groups: one rounded pill made of joined segments */
.input-group { background: transparent !important; }
.input-group > input.form-control,
.input-group .input-group-text,
.input-group > .custom-select-wrapper {
  background-color: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 179, 217, .18) !important;
}
.input-group > :first-child { border-top-left-radius: var(--ay-radius-sm) !important; border-bottom-left-radius: var(--ay-radius-sm) !important; }
.input-group > :last-child  { border-top-right-radius: var(--ay-radius-sm) !important; border-bottom-right-radius: var(--ay-radius-sm) !important; }
.input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > :not(:last-child)  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .input-group-text { color: var(--ay-pink-3) !important; font-weight: 800; }
.input-group .input-group-text.text-primary:hover { background-color: rgba(255, 79, 163, .22) !important; }
.input-group > .custom-select-wrapper.no-input-group-text { border: 1.5px solid rgba(255, 179, 217, .18) !important; }
.form-check-input[type="checkbox"] { border-radius: 7px; border-color: var(--ay-pink) !important; }

/* Custom select dropdown list */
.custom-select-wrapper .custom-options {
  background: rgba(40, 11, 35, .97) !important;
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ay-shadow);
  padding: 4px;
}
.custom-options .custom-option { border-radius: 10px; }
.custom-options .custom-option:hover { background-color: rgba(255, 79, 163, .2) !important; }

/* ── Search + category bar ────────────────────────────────────────────────── */
.products-title-category { position: relative; z-index: 30; }   /* dropdown stays above cards */
.border-box {
  background: var(--ay-glass);
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: 18px !important;
  padding: 6px 14px !important;
  box-shadow: 0 6px 22px rgba(10, 0, 8, .25);
}
.border-box .form-control { background-color: transparent !important; border: none !important; }
.border-box svg { color: var(--ay-pink-2); }

/* ── Hero banner ──────────────────────────────────────────────────────────── */
.hero-section img {
  border-radius: 28px !important;
  box-shadow: 0 22px 60px rgba(255, 79, 163, .28), 0 0 0 1px rgba(255, 179, 217, .3);
}

/* ── Country bubbles ──────────────────────────────────────────────────────── */
.countries .country img {
  box-shadow: 0 0 0 2px rgba(255, 179, 217, .25), 0 6px 16px rgba(0, 0, 0, .35);
  transition: box-shadow .18s ease;
}
.countries .country.active img,
.countries .country:hover img {
  box-shadow: 0 0 0 3px var(--ay-pink), 0 0 20px rgba(255, 79, 163, .6);
}
.countries .country h5 { font-weight: 600; margin-top: 6px !important; }
.countries .country:hover h5,
.countries .country.active h5 { color: var(--ay-pink-2) !important; }

/* ── Product cards: glass bubbles ─────────────────────────────────────────── */
.items > .item {
  background: var(--ay-glass) !important;
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: var(--ay-radius) !important;
  box-shadow: var(--ay-shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.items > .item:hover {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  border-color: rgba(255, 122, 192, .5) !important;
  box-shadow: var(--ay-glow), var(--ay-shadow);
}
/* entrance: cards pop up in a short stagger whenever the grid re-renders */
.items > .item { position: relative; animation: ayCardIn .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.items > .item:nth-child(2) { animation-delay: .05s; }
.items > .item:nth-child(3) { animation-delay: .1s; }
.items > .item:nth-child(4) { animation-delay: .15s; }
.items > .item:nth-child(5) { animation-delay: .2s; }
.items > .item:nth-child(6) { animation-delay: .25s; }
.items > .item:nth-child(7) { animation-delay: .3s; }
.items > .item:nth-child(n+8) { animation-delay: .35s; }
@keyframes ayCardIn {
  from { opacity: 0; transform: perspective(800px) translateY(26px) rotateX(14deg) scale(.96); }
}
/* glossy sheen that follows the cursor */
.items > .item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 214, 234, .18), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
.items > .item:hover::after { opacity: 1; }
.items > .item .img-top { border-radius: 0 !important; background: rgba(255, 255, 255, .03) !important; }
.items > .item .content { padding: .7rem .75rem .8rem !important; }
.items > .item .content .title { font-family: var(--ay-font-display); font-weight: 600 !important; letter-spacing: .2px; }
.items > .item .content .body h5 { font-weight: 600; color: #fff; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
html body footer.bg-dark {
  background: var(--ay-glass) !important;
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border);
  border-radius: var(--ay-radius);
  box-shadow: var(--ay-shadow);
  margin-top: 28px !important;
}

/* ── Glass surfaces used across pages ─────────────────────────────────────── */
.setting-hint,
.carts-area > .item,
.paymentProcessor,
.faq-item,
.main-content.auth {
  background: var(--ay-glass) !important;
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: var(--ay-radius) !important;
}
.main-content.auth { padding: 30px 32px !important; box-shadow: var(--ay-shadow); }
.main-content.auth input.form-control {
  background-color: rgba(255, 255, 255, .07) !important;
  border: 1.5px solid rgba(255, 179, 217, .2) !important;
  height: 42px;
}
.main-content.auth input.form-control:focus { border-color: var(--ay-pink-2) !important; }
.main-content.auth h5 { font-family: var(--ay-font-display); font-weight: 600; font-size: 1.5rem; }
.main-content.auth .btn-success { height: 42px; }
body:not(.admin) .bordered-box {
  background: var(--ay-glass);
  border: 1px solid var(--ay-glass-border);
  border-radius: 18px;
}
.paymentProcessor:hover { background: rgba(255, 79, 163, .14) !important; }
.paymentProcessor.selected { border: 2px solid var(--ay-pink) !important; box-shadow: var(--ay-glow); }
.faq-item.open { background: rgba(255, 79, 163, .08) !important; border-color: rgba(255, 122, 192, .45) !important; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-responsive {
  border-radius: 18px;
  overflow: auto;            /* still clips the rounded corners, keeps mobile scroll */
  border: 1px solid var(--ay-glass-border);
  background: var(--ay-glass);
}
.table > thead > tr > th { background-color: rgba(255, 79, 163, .16) !important; color: #ffd6ea !important; }
.table > tbody > tr > td { background-color: rgba(255, 255, 255, .04) !important; }
.table > tbody > tr:hover > td { background-color: rgba(255, 79, 163, .1) !important; }

/* ── Tabs: pill toggles ───────────────────────────────────────────────────── */
.nav-tabs { border-bottom: none !important; gap: 6px; }
.nav-tabs .nav-link { border-radius: 999px !important; padding: 7px 18px !important; }
.nav-tabs .nav-link.active {
  border-bottom: none !important;
  color: #fff !important;
  background: rgba(255, 79, 163, .24) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .45);
}

/* ── Pagination & status badges ───────────────────────────────────────────── */
.pagination > .page-item { border-radius: 999px !important; }
.badge-status { background: rgba(255, 255, 255, .06); padding: 3px 10px !important; }

/* ── Modals: frosted panel ────────────────────────────────────────────────── */
.modal-content,
.modal-content.bg-dark2 {
  background: linear-gradient(160deg, rgba(52, 14, 45, .94) 0%, rgba(28, 7, 24, .96) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: 28px !important;
}
.modal-body.bg-dark2 { background-color: transparent !important; }
.modal-backdrop.show { opacity: .65; }
.btn-close-modal { border-radius: 999px !important; }

/* ── Page loader ──────────────────────────────────────────────────────────── */
#pageLoader { background: linear-gradient(165deg, #1c0718 0%, #2a0a24 50%, #170514 100%) !important; }
#pageLoader .loader-card {
  background: var(--ay-glass) !important;
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--ay-glow) !important;
}
#pageLoader .loader-logo { border-radius: 16px !important; opacity: 1 !important; }
#pageLoader .loader-spinner { border-top-color: var(--ay-pink) !important; }

/* ── Admin: same canvas, glass sidebar ────────────────────────────────────── */
body.admin .admin-sidebar {
  background: rgba(28, 7, 24, .62) !important;
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border-right: 1px solid var(--ay-glass-border) !important;
}
body.admin .admin-sidebar-brand img { border-radius: 12px !important; }
body.admin .admin-sidebar-brand .brand-text { font-family: var(--ay-font-display); font-weight: 700; letter-spacing: .5px; }
body.admin .admin-sidebar-nav a { border-radius: 12px; }
body.admin .admin-sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(255, 79, 163, .26), rgba(255, 122, 192, .06)) !important;
}
body.admin .bordered-box {
  background: var(--ay-glass) !important;
  border: 1px solid var(--ay-glass-border) !important;
  border-radius: 18px !important;
}
body.admin .admin-pageheader h1 { font-family: var(--ay-font-display); }

/* ═══════════════════════════════════════════════════════════════════════════
   Premium layer — depth, light and motion
   ═══════════════════════════════════════════════════════════════════════════ */
@property --ay-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes aySpin { to { --ay-angle: 360deg; } }

/* Navbar: glossy top edge, like light catching a glass rim */
body > .container-md > .navbar::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), rgba(255, 179, 217, .7), rgba(255, 255, 255, .55), transparent);
  pointer-events: none;
}

/* Hero: floating 3D glass frame — cursor tilt, glossy sweep, pink under-glow */
.hero-section { perspective: 1400px; }
.ay-hero-frame {
  position: relative;
  width: 100%;
  border-radius: 28px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  animation: ayHeroFloat 7s ease-in-out infinite;
}
@keyframes ayHeroFloat { 50% { translate: 0 -8px; } }
.ay-hero-frame img { display: block; width: 100%; height: auto; }
.ay-hero-frame::before {
  content: "";
  position: absolute;
  inset: 18% 6% -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 79, 163, .55), rgba(199, 125, 255, .18) 60%, transparent);
  filter: blur(34px);
  pointer-events: none;
}
.ay-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .06) 54%, transparent 62%),
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .14), transparent 60%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: aySweep 7s ease-in-out infinite;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 214, 234, .22);
}
@keyframes aySweep {
  0%, 55% { background-position: 130% 0, 0 0; }
  100% { background-position: -30% 0, 0 0; }
}

/* Product cards: spinning neon border + image zoom + deeper glow on hover */
.items > .item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ay-angle), #ff4fa3, #ffd6ea, #c77dff, #ff7ac0, #ff4fa3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  animation: aySpin 3.5s linear infinite paused;
  pointer-events: none;
}
.items > .item:hover::before { opacity: 1; animation-play-state: running; }
.items > .item:hover {
  box-shadow: 0 22px 50px rgba(255, 79, 163, .32), 0 0 0 1px rgba(255, 179, 217, .25), var(--ay-shadow) !important;
}
.items > .item .img-top img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.items > .item:hover .img-top img { transform: scale(1.07); }

/* Primary buttons: light sweep on hover */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-gradient,
.navbar .nav-link.btn,
#btn-back-to-top {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%), var(--ay-grad-strong) !important;
  background-size: 250% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 140% 0, 0 0 !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease, background-position .8s ease !important;
}
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-gradient:hover,
.navbar .nav-link.btn:hover,
#btn-back-to-top:hover { background-position: -40% 0, 0 0 !important; }

/* Headline counters: glossy gradient text */
.products-area h4 {
  background: linear-gradient(180deg, #fff 0%, #ffd6ea 55%, #ff9ccf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.products-area h4 #searchBarFound { color: transparent; }

/* Country flags: springy 3D lift */
.countries .country img { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease; }
.countries .country:hover img { transform: perspective(300px) translateY(-4px) rotateY(16deg) scale(1.07); }
.countries .country.active img { transform: translateY(-2px) scale(1.04); }

/* Scroll reveal (class added by ambient.js) */
.ay-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.ay-reveal.ay-in { opacity: 1; transform: none; }

@media (max-width: 767.98px) {
  .ay-hero-frame, .ay-hero-frame::after { border-radius: 20px; }
  .hero-section img { border-radius: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .items > .item, .ay-hero-frame, .ay-hero-frame::after, #ayScene { animation: none !important; opacity: 1; }
  .ay-reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium components — page heroes, panels, checkout, perks, footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* Soft vignette over the 3D scene keeps the centre column calm and readable */
body:not(.admin)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 75% at 50% 45%, rgba(24, 5, 20, .42), transparent 75%);
}

/* Shared bits */
.ay-label {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 214, 234, .62);
}
.ay-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #ffd6ea;
  background: rgba(255, 79, 163, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .35);
  white-space: nowrap;
}
.ay-count span { color: #fff; }
.ay-btn-lg { height: 50px; font-size: 15px !important; letter-spacing: .5px; }
.ay-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255, 214, 234, .55);
}

/* Page hero: glass title card for inner pages */
.ay-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 6px 0 18px;
  padding: 22px 26px;
  border-radius: 26px;
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(255, 79, 163, .22), transparent 70%),
    var(--ay-glass);
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border);
  box-shadow: var(--ay-shadow);
  overflow: hidden;
  animation: ayRise .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.ay-page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
}
.ay-page-hero-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: #fff;
  background: var(--ay-grad-strong);
  box-shadow: 0 10px 26px rgba(255, 79, 163, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ay-page-hero-text h1 {
  margin: 0;
  font-family: var(--ay-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  background: linear-gradient(180deg, #fff 0%, #ffd6ea 60%, #ff9ccf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ay-page-hero-text p { margin: 4px 0 0; font-size: 13.5px; color: rgba(255, 214, 234, .66); }
@keyframes ayRise { from { opacity: 0; transform: translateY(16px); } }

/* Panels: the glass container every inner page sits in */
.ay-panel {
  position: relative;
  padding: 20px 22px;
  border-radius: var(--ay-radius);
  background: var(--ay-glass);
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border);
  box-shadow: var(--ay-shadow);
  animation: ayRise .7s cubic-bezier(.22, 1, .36, 1) .08s backwards;
}
.ay-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ay-panel-head h2 {
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-family: var(--ay-font-display);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}
.ay-panel-head h2::before {
  content: "";
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 4px;
  border-radius: 4px;
  background: var(--ay-grad);
  box-shadow: 0 0 10px rgba(255, 79, 163, .7);
}

/* Checkout: items + payment on the left, summary card on the right */
.ay-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
  width: 100%;
}
.ay-checkout-main { display: grid; gap: 16px; min-width: 0; }
.ay-summary { position: sticky; top: 16px; }
.ay-sum-rows { margin: 18px 0 16px; }
.ay-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  border-bottom: 1px dashed rgba(255, 179, 217, .16);
}
.ay-sum-row > span:last-child { color: #fff; font-weight: 700; }
.ay-sum-total { border-bottom: 0; padding-top: 14px; font-size: 16px; color: #fff; font-weight: 800; }
.ay-sum-total > span:last-child {
  font-family: var(--ay-font-display);
  font-size: 26px;
  background: linear-gradient(180deg, #fff, #ff9ccf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ay-panel .carts-area { margin: 0 !important; }
.ay-panel .carts-area > .item {
  background: rgba(255, 255, 255, .045) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 16px !important;
}
.ay-panel .paymentProcessors { margin: 0 !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.paymentProcessor {
  justify-content: flex-start !important;
  gap: 4px;
  height: 66px !important;
  min-width: 0 !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  letter-spacing: .2px !important;
  position: relative;
}
.paymentProcessor > span { display: flex; flex-direction: column; line-height: 1.25; }
.paymentProcessor > span b { font-size: 14px; color: #fff; }
.paymentProcessor > span small { font-size: 11px; color: rgba(255, 214, 234, .6); }
.paymentProcessor.selected::after {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--ay-grad-strong);
  box-shadow: 0 0 12px rgba(255, 79, 163, .6);
}

/* Empty states */
.ay-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 38px 16px 30px;
  color: rgba(255, 214, 234, .7);
}
.ay-empty-ic {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 8px 18px rgba(255, 79, 163, .45));
  animation: ayBob 3.2s ease-in-out infinite;
}
.ay-empty h3 { font-family: var(--ay-font-display); font-weight: 600; font-size: 20px; color: #fff; margin: 0 0 6px; }
.ay-empty p { font-size: 13.5px; margin: 0 0 16px; }
@keyframes ayBob { 50% { transform: translateY(-7px); } }

/* Balance: wallet card + quick amounts */
.ay-balance-now {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 20px 22px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff3d9a 0%, #c2187a 55%, #8a2be2 130%);
  box-shadow: 0 16px 36px rgba(255, 79, 163, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ay-balance-now::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%);
  pointer-events: none;
}
.ay-balance-now span { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.ay-balance-now strong { font-family: var(--ay-font-display); font-size: 32px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(90, 0, 40, .35); }
.ay-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ay-chip-btn {
  flex: 1 1 64px;
  padding: 10px 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 179, 217, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ay-chip-btn:hover { transform: translateY(-2px); border-color: rgba(255, 122, 192, .55); background: rgba(255, 79, 163, .14); }
.ay-chip-btn.active {
  border-color: transparent;
  background: var(--ay-grad-strong);
  box-shadow: 0 8px 20px rgba(255, 79, 163, .4);
}

/* Orders / support / static pages inside panels */
#ordersHistory.ay-panel { padding-bottom: 14px; }
#ordersHistory .table-responsive { border-radius: 16px; }
.ay-form-panel { width: 100%; }
.ay-form-panel > label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: rgba(255, 214, 234, .65) !important; margin-bottom: 6px; }
.ay-form-panel label.text-uppercase { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: rgba(255, 214, 234, .65) !important; margin-bottom: 6px; }
.static-page.ay-panel { padding: 26px 30px; }

/* Auth: logo on top of the card */
.ay-auth-head { text-align: center; margin-bottom: 18px; }
.ay-auth-logo { height: 96px; width: auto; filter: drop-shadow(0 8px 20px rgba(255, 79, 163, .45)); animation: ayBob 4s ease-in-out infinite; }
.ay-auth-head h5 { margin: 10px 0 2px; }
.ay-auth-head p { margin: 0; font-size: 13px; color: rgba(255, 214, 234, .62); }

/* Store: perks strip under the banner */
.ay-perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 22px;
}
.ay-perk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--ay-glass);
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border);
  box-shadow: 0 8px 24px rgba(10, 0, 8, .3);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease;
  animation: ayRise .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.ay-perk:nth-child(2) { animation-delay: .07s; }
.ay-perk:nth-child(3) { animation-delay: .14s; }
.ay-perk:nth-child(4) { animation-delay: .21s; }
.ay-perk:hover { transform: translateY(-3px); border-color: rgba(255, 122, 192, .5); }
.ay-perk-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #fff;
  background: var(--ay-grad-strong);
  box-shadow: 0 6px 16px rgba(255, 79, 163, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ay-perk b { display: block; font-size: 13.5px; color: #fff; line-height: 1.2; }
.ay-perk small { display: block; font-size: 11.5px; color: rgba(255, 214, 234, .6); line-height: 1.3; margin-top: 2px; }

/* Store: section header above the grid */
.ay-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 2px 14px;
}
.ay-section-head h2 {
  margin: 0;
  font-family: var(--ay-font-display);
  font-weight: 700;
  font-size: 24px;
  background: linear-gradient(180deg, #fff 0%, #ffd6ea 60%, #ff9ccf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Store: card details */
.ay-card-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #ffd6ea;
  background: rgba(30, 6, 26, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .4);
}
.ay-card-chip svg { color: #ff7ac0; }
.ay-price { display: flex; align-items: baseline; gap: 5px; }
.ay-price small { font-size: 10.5px; font-weight: 700; color: rgba(255, 214, 234, .55); text-transform: uppercase; letter-spacing: .5px; }
.ay-price h5 { font-family: var(--ay-font-display); font-size: 18px !important; }
.items > .item .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; }

/* Footer: brand + link columns */
.ay-footer {
  margin: 40px 0 18px;
  padding: 32px 34px 18px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(520px 200px at 0% 0%, rgba(255, 79, 163, .16), transparent 70%),
    var(--ay-glass);
  -webkit-backdrop-filter: var(--ay-blur);
  backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border);
  box-shadow: var(--ay-shadow);
}
.ay-footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 28px;
}
.ay-footer-brand img { height: 84px; width: auto; filter: drop-shadow(0 6px 16px rgba(255, 79, 163, .4)); }
.ay-footer-brand p { margin: 12px 0 14px; max-width: 320px; font-size: 13px; line-height: 1.55; color: rgba(255, 214, 234, .66); }
.ay-footer-tg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff !important;
  text-decoration: none;
  background: rgba(255, 79, 163, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .4);
  transition: background .2s ease, transform .2s ease;
}
.ay-footer-tg:hover { background: rgba(255, 79, 163, .32); transform: translateY(-1px); }
.ay-footer-col h6 {
  margin: 6px 0 12px;
  font-family: var(--ay-font-body);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ff9ccf;
}
.ay-footer-col a,
.ay-footer-col span {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.ay-footer-col a:hover { color: #fff; transform: translateX(3px); }
.ay-footer-trust i { font-style: normal; margin-right: 6px; }
.ay-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 179, 217, .14);
  font-size: 12px;
  color: rgba(255, 214, 234, .5);
}
.ay-footer-made b { color: #ff4fa3; display: inline-block; animation: ayBeat 1.6s ease-in-out infinite; }
@keyframes ayBeat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.3); } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .ay-checkout { grid-template-columns: 1fr; }
  .ay-summary { position: static; }
  .ay-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ay-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ay-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .ay-page-hero { padding: 16px 18px; gap: 14px; border-radius: 22px; }
  .ay-page-hero-icon { width: 46px; height: 46px; border-radius: 15px; }
  .ay-page-hero-text h1 { font-size: 22px; }
  .ay-page-hero-text p { font-size: 12.5px; }
  .ay-panel { padding: 16px; }
  .ay-perks { gap: 8px; }
  .ay-perk { padding: 10px; gap: 9px; border-radius: 16px; }
  .ay-perk-ic { width: 34px; height: 34px; border-radius: 11px; }
  .ay-perk-ic svg { width: 17px; height: 17px; }
  .ay-perk b { font-size: 12.5px; }
  .ay-perk small { font-size: 10.5px; }
  .ay-section-head h2 { font-size: 20px; }
  .ay-footer { padding: 24px 20px 16px; border-radius: 24px; }
  .ay-footer-bottom { justify-content: center; text-align: center; }
  .ay-footer-top { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ay-footer-trust { grid-column: 1 / -1; }
  .ay-balance-now strong { font-size: 26px; }
  .static-page.ay-panel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ay-page-hero, .ay-panel, .ay-perk, .ay-empty-ic, .ay-auth-logo, .ay-footer-made b { animation: none !important; }
}
.ay-sum-total { align-items: center; }
#btnApplyCoupon {
  background-image: var(--ay-grad-strong) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 18px;
  letter-spacing: .8px;
  transition: filter .15s ease;
}
#btnApplyCoupon:hover { filter: brightness(1.1); }
.ay-balance .paymentProcessors { margin-bottom: 18px !important; }
/* File upload: frosted pill with a gradient button */
.file-upload {
  background: rgba(255, 255, 255, .06) !important;
  border: 1.5px solid rgba(255, 179, 217, .18) !important;
  border-radius: var(--ay-radius-sm) !important;
  min-height: 44px;
}
.file-upload-btn { background: var(--ay-grad-strong) !important; color: #fff !important; font-weight: 800; }
.file-upload-btn:hover { filter: brightness(1.1); }
.file-upload-status { background: transparent !important; }
.file-upload[data-disabled="true"] .file-upload-btn { background: rgba(255, 79, 163, .25) !important; color: rgba(255, 255, 255, .5) !important; }

/* Menu pills: symmetric padding so the label sits dead-centre in the pill.
   (custom.css zeroes padding-bottom on desktop for the old Admire wordmark
   baseline alignment, which pushed the text to the bottom of the pill.) */
body > .container-md > .navbar .navbar-nav .nav-link:not(.btn):not(.cart-count) {
  padding: 9px 14px !important;
  line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AYLECALLS components
   ═══════════════════════════════════════════════════════════════════════════ */
.ay-muted { color: rgba(255, 214, 234, .62) !important; }
.ay-small { font-size: 12.5px; }
.ay-btn-link { border: 0; cursor: pointer; text-decoration: none; }
.ay-btn-link:hover { background: rgba(255, 79, 163, .28); }

/* Brand: app-icon tile + glossy wordmark */
.navbar-brand > img.ay-brand-icon,
.ay-brand > img.ay-brand-icon {
  width: 40px; height: 40px; border-radius: 12px; object-fit: cover;
  box-shadow: 0 4px 16px rgba(255, 79, 163, .45), 0 0 0 1.5px rgba(255, 179, 217, .45);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.navbar-brand:hover > img.ay-brand-icon { transform: rotate(-6deg) scale(1.06); }
.ay-footer-logo { display: inline-flex !important; align-items: center; gap: 12px; text-decoration: none; }
.ay-footer-logo .ay-brand-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
.ay-footer-logo .ay-word { font-size: 24px; }

/* Navbar balance pill */
.ay-balance-pill { display: inline-flex !important; align-items: center; gap: 7px; }
.ay-balance-pill b { color: #fff; font-weight: 900; }
.ay-balance-pill .ay-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 8px #3ee08f; }
.ay-balance-pill.low .ay-dot { background: #ffb02e; box-shadow: 0 0 8px #ffb02e; }

/* Landing */
.ay-cta-row { display: flex; gap: 12px; justify-content: center; margin: -4px 0 20px; flex-wrap: wrap; }
.ay-cta-row .btn { min-width: 200px; }
.ay-input-icon { position: relative; display: flex; align-items: center; }
.ay-input-icon > svg { position: absolute; left: 14px; color: var(--ay-pink-2); pointer-events: none; }
.ay-input-icon > .form-control { padding-left: 42px; height: 48px; }
.ay-ratecheck-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: stretch; }
.ay-ratecheck-result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 79, 163, .22), rgba(199, 125, 255, .14));
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .35);
}
.ay-ratecheck-result b { font-family: var(--ay-font-display); font-size: 26px; color: #fff; }
.ay-ratecheck-result small { color: rgba(255, 214, 234, .7); }
.ay-ratecheck-result > span:last-child { flex-basis: 100%; font-size: 12px; color: rgba(255, 214, 234, .7); }
.ay-ratecheck-result .ay-muted { align-self: center; font-size: 13px; }
.ay-dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.ay-dest {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 10px 12px;
  border: 1px solid rgba(255, 179, 217, .16); border-radius: 14px; background: rgba(255, 255, 255, .045);
  color: #fff; text-align: left; transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.ay-dest:hover { transform: translateY(-2px); border-color: rgba(255, 122, 192, .5); background: rgba(255, 79, 163, .12); }
.ay-dest-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ay-dest-rate { font-weight: 900; color: #ff9ccf; white-space: nowrap; }
.ay-dest-rate small { font-weight: 600; color: rgba(255, 214, 234, .55); }
.ay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ay-step {
  position: relative; padding: 22px 20px 18px; border-radius: var(--ay-radius);
  background: var(--ay-glass); -webkit-backdrop-filter: var(--ay-blur); backdrop-filter: var(--ay-blur);
  border: 1px solid var(--ay-glass-border); box-shadow: var(--ay-shadow);
}
.ay-step-n {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 12px;
  font-family: var(--ay-font-display); font-weight: 700; font-size: 18px; color: #fff;
  background: var(--ay-grad-strong); box-shadow: 0 6px 16px rgba(255, 79, 163, .45);
}
.ay-step h3 { font-family: var(--ay-font-display); font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.ay-step p { margin: 0; font-size: 13px; color: rgba(255, 214, 234, .66); }
.ay-app-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ay-app-chips span {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #ffd6ea;
  background: rgba(255, 79, 163, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .3);
}
.ay-sip-sample { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ay-sip-sample > div { padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); }
.ay-sip-sample small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 214, 234, .55); }
.ay-sip-sample code { color: #fff; font-size: 13px; }
.ay-final-cta {
  margin: 28px 0 0; padding: 34px 24px; text-align: center; border-radius: 28px;
  background: radial-gradient(500px 200px at 50% 0%, rgba(255, 79, 163, .35), transparent 70%), var(--ay-glass);
  border: 1px solid var(--ay-glass-border); box-shadow: var(--ay-shadow);
}
.ay-final-cta h2 { font-family: var(--ay-font-display); font-weight: 700; font-size: 26px; color: #fff; margin: 0 0 6px; }
.ay-final-cta p { color: rgba(255, 214, 234, .7); margin: 0 0 18px; }

/* Dashboard */
.ay-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; color: #ffd6ea; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 217, .25);
}
.ay-status .ay-dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.ay-status.ok { color: #b6ffd6; background: rgba(62, 224, 143, .12); box-shadow: inset 0 0 0 1px rgba(62, 224, 143, .4); }
.ay-status.ok .ay-dot { background: #3ee08f; box-shadow: 0 0 10px #3ee08f; animation: ayPulse 1.8s ease-in-out infinite; }
.ay-status.off .ay-dot { background: #ffb02e; box-shadow: 0 0 8px #ffb02e; }
@keyframes ayPulse { 50% { opacity: .45; } }
.ay-note {
  margin-bottom: 16px; padding: 14px 18px; border-radius: 18px; color: #fff; font-size: 14px;
  background: linear-gradient(135deg, rgba(255, 79, 163, .3), rgba(199, 125, 255, .2));
  box-shadow: inset 0 0 0 1px rgba(255, 122, 192, .45);
}
.ay-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ay-dash .ay-sip, .ay-dash .ay-guide { grid-column: 1 / -1; }
.ay-kv { display: grid; gap: 8px; }
.ay-kv-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .2);
}
.ay-kv-row > span { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 214, 234, .6); }
.ay-kv-row > code { color: #fff; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ay-kv-row > code:only-of-type { grid-column: 2 / span 2; }
.ay-copy {
  width: 32px; height: 32px; border: 0; border-radius: 10px; color: #ffd6ea; font-size: 14px;
  background: rgba(255, 79, 163, .16); transition: background .15s ease, transform .15s ease;
}
.ay-copy:hover { background: rgba(255, 79, 163, .34); transform: translateY(-1px); }
.ay-row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ay-toggle-row { display: flex; align-items: center; gap: 12px; }
.ay-toggle-row b { color: #fff; font-size: 13.5px; }
.ay-threshold { width: 110px; flex: 0 0 auto; }
.ay-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0; }
.ay-switch input { opacity: 0; width: 0; height: 0; }
.ay-switch span {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: rgba(255, 255, 255, .14); transition: background .2s ease;
}
.ay-switch span::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ay-switch input:checked + span { background: var(--ay-grad-strong); }
.ay-switch input:checked + span::before { transform: translateX(18px); }
.ay-route-now { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .2); }
.ay-route-now b { font-family: var(--ay-font-display); font-size: 18px; color: #fff; }
.ay-route-list { display: grid; gap: 8px; margin-top: 12px; max-height: 380px; overflow-y: auto; padding-right: 2px; }
.ay-route-opt {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; text-align: left; color: #fff;
  border: 1px solid rgba(255, 179, 217, .16); border-radius: 14px; background: rgba(255, 255, 255, .045);
  transition: border-color .15s ease, background .15s ease;
}
.ay-route-opt:hover { border-color: rgba(255, 122, 192, .55); background: rgba(255, 79, 163, .12); }
.ay-route-opt.current { border-color: var(--ay-pink); background: rgba(255, 79, 163, .16); cursor: default; }
.ay-route-name { font-weight: 800; }
.ay-route-name em { font-style: normal; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px;
  padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: var(--ay-grad-strong); }
.ay-route-meta, .ay-route-hl { font-size: 12px; color: rgba(255, 214, 234, .62); }
.ay-route-hl b { color: #ff9ccf; }
.ay-guide ol { margin: 0; padding-left: 20px; color: rgba(255, 255, 255, .82); font-size: 14px; }
.ay-guide li { margin-bottom: 6px; }
.ay-guide code { color: #ff9ccf; }
.ay-empty-panel { margin-bottom: 16px; }

/* Tabs, tables, pills */
.ay-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.ay-tabs button {
  border: 0; padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 13px;
  color: rgba(255, 214, 234, .7); background: transparent; transition: background .2s ease, color .2s ease;
}
.ay-tabs button.active { color: #fff; background: var(--ay-grad-strong); box-shadow: 0 4px 14px rgba(255, 79, 163, .4); }
.ay-tabs-lg { display: flex; width: max-content; max-width: 100%; }
.ay-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; font-size: 10.5px; background: #fff; color: #d81b78; }
.ay-table { margin: 0; --bs-table-bg: transparent; }
.ay-table th { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 214, 234, .6) !important; }
.ay-table td { vertical-align: middle; font-size: 13.5px; }
.ay-table code { color: #ffd6ea; }
.ay-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.ay-pill.ok { color: #b6ffd6; background: rgba(62, 224, 143, .14); }
.ay-pill.warn { color: #ffe0a6; background: rgba(255, 176, 46, .16); }
.ay-pill.bad { color: #ffc2c2; background: rgba(255, 80, 80, .18); }
.ay-pill.muted { color: rgba(255, 214, 234, .6); background: rgba(255, 255, 255, .07); }

/* Rates page */
.ay-rates-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.ay-rates-controls > .custom-select-wrapper { min-width: 240px; flex: 0 0 auto; height: 48px; border-radius: var(--ay-radius-sm) !important;
  border: 1.5px solid rgba(255, 179, 217, .18) !important; background: rgba(255, 255, 255, .06) !important; }
.ay-rate-number { margin-top: 12px; padding: 12px 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, rgba(255, 79, 163, .22), rgba(199, 125, 255, .14)); }

/* Top-ups */
.ay-pay-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px dashed rgba(255, 179, 217, .14); }
.ay-pay-row:last-child { border-bottom: 0; }
.ay-pay-row > div:first-child { display: flex; flex-direction: column; flex: 1 1 auto; }
.ay-pay-row b { color: #fff; font-size: 15px; }
.ay-pay-row small { color: rgba(255, 214, 234, .55); font-size: 12px; }
.ay-pay-actions { display: flex; gap: 8px; flex-basis: 100%; }

/* Support */
.ay-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ay-thumb { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 179, 217, .3); }
.ay-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ay-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; font-size: 11px;
  color: #fff; background: rgba(0, 0, 0, .6); }
.ay-ticket-row {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px; text-align: left;
  border: 0; border-bottom: 1px dashed rgba(255, 179, 217, .14); background: transparent; color: #fff; border-radius: 12px;
}
.ay-ticket-row:hover { background: rgba(255, 79, 163, .1); }
.ay-ticket-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ay-ticket-row small { color: rgba(255, 214, 234, .55); font-size: 12px; }
.ay-thread-title { font-family: var(--ay-font-display); font-size: 20px; color: #fff; display: flex; align-items: center; gap: 10px; }
.ay-thread { display: flex; flex-direction: column; gap: 10px; }
.ay-msg { max-width: 85%; padding: 12px 14px; border-radius: 18px; }
.ay-msg.me { align-self: flex-end; background: linear-gradient(135deg, rgba(255, 79, 163, .35), rgba(216, 27, 120, .3)); border-bottom-right-radius: 6px; }
.ay-msg.admin { align-self: flex-start; background: rgba(255, 255, 255, .08); border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 179, 217, .2); }
.ay-msg-who { font-size: 11px; font-weight: 800; color: rgba(255, 214, 234, .65); margin-bottom: 4px; }
.ay-msg-body { font-size: 14px; color: #fff; word-wrap: break-word; }

@media (max-width: 767.98px) {
  .ay-ratecheck-row { grid-template-columns: 1fr; }
  .ay-steps { grid-template-columns: 1fr; }
  .ay-sip-sample { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ay-dash { grid-template-columns: 1fr; }
  .ay-kv-row { grid-template-columns: 80px minmax(0, 1fr) auto auto; padding: 9px 10px; }
  .ay-cta-row .btn { min-width: 0; flex: 1 1 0; }
  .ay-page-hero { flex-wrap: wrap; }
  .ay-page-hero .ay-status { margin-left: 0 !important; }
  .ay-rates-controls > .custom-select-wrapper { min-width: 0; flex: 1 1 100%; }
  .ay-msg { max-width: 95%; }
}
.ay-auth-logo.ay-auth-icon { width: 92px; height: 92px; border-radius: 26px; object-fit: cover;
  box-shadow: 0 10px 30px rgba(255, 79, 163, .5), 0 0 0 2px rgba(255, 179, 217, .5); filter: none; }