/* ═══════════════════════════════════════════════════════════════════════════
   AYLELOGS — 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;
}