/* ============================
   Purple SaaS Theme (Stripe-ish)
   ============================ */

:root {
  --bg-deep: #0a0318;
  --bg-surface: #15092c;
  --ink: #efeaff;

  /* Purples */
  --violet-1: #a78bfa;   /* light */
  --violet-2: #8b5cf6;   /* mid */
  --violet-3: #6d28d9;   /* deep */
  --violet-4: #4c1d95;   /* darkest */

  /* Accents */
  --pink-1: #f472b6;
  --blue-1: #60a5fa;

  /* UI */
  --card-bg: rgba(255,255,255,0.06);
  --card-stroke: rgba(167,139,250,0.22);
  --muted: #c7bff0;
  --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-2: 0 20px 60px rgba(86, 24, 168, 0.35);
}

/* Global */
.theme-purple {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(167,139,250,0.18), transparent 60%),
    radial-gradient(800px 400px at 88% 10%, rgba(109,40,217,0.22), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(244,114,182,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-surface));
  min-height: 100vh;
  padding-bottom: 4rem;
}

/* Subtle animated aurora */
.theme-purple::before {
  content: "";
  position: fixed; inset: -10% -10% auto -10%;
  height: 60vh;
  pointer-events: none;
  background:
    conic-gradient(from 210deg at 40% 40%, rgba(167,139,250,0.35), rgba(96,165,250,0.0) 40%, rgba(244,114,182,0.35) 60%, rgba(167,139,250,0.0) 80%);
  filter: blur(60px) saturate(140%);
  opacity: .6;
  animation: aurora 14s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes aurora {
  0%   { transform: translateY(-10px) rotate(0deg) scale(1);   opacity:.55; }
  100% { transform: translateY(10px)  rotate(6deg) scale(1.05); opacity:.75; }
}

main.container { position: relative; z-index: 1; }

/* Navbar */
.navbar {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(90deg, rgba(109,40,217,0.35), rgba(10,0,20,0.4));
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  position: relative;
  z-index: 10;
}
.navbar .navbar-brand, .navbar .nav-link { color: var(--ink) !important; }
.navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text {
  text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18);
}
.navbar .navbar-brand {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
}
.navbar .nav-link:hover { color: var(--violet-1) !important; }
/* Make toggler visible on dark background */
.navbar.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.35); }
.navbar.navbar-dark .navbar-toggler-icon { filter: invert(1) brightness(1.4); }
/* Dragon icon as toggler */
.navbar .navbar-toggler .fa-dragon,
.navbar .fa-dragon { color: var(--violet-1); font-size: 1.35rem; line-height: 1; text-shadow: 0 2px 8px rgba(167,139,250,0.16); }
.navbar .navbar-toggler:hover .fa-dragon,
.navbar .fa-dragon:hover { color: #c7bdfd; transform: translateY(-1px); }
/* Improve tap target and centering for toggler */
.navbar .navbar-toggler { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(139,92,246,0.35); }
/* Collapsed menu readability on mobile */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    background: rgba(10, 3, 24, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: .5rem 1rem;
    margin-top: .5rem;
  }
}

/* Headings */
h1, .display-1, .display-2, .display-3 {
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.gradient-text {
  background: linear-gradient(90deg, var(--violet-1), var(--blue-1), var(--pink-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); transition: all .2s ease; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--violet-1); }

/* Product cards: force all text to white/ink */
.card.h-100,
.card.h-100 .card-body,
.card.h-100 .card-title,
.card.h-100 .card-text,
.card.h-100 .small {
  color: var(--ink) !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, var(--violet-2), var(--violet-3));
  border: 0;
  box-shadow: 0 6px 20px rgba(139,92,246,0.35);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-success {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border: 0;
}
.btn-warning {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #1b102f;
  border: 0;
}

/* Themed PayPal button with glow */
.btn-google {
  background: #ffffff;
  color: #1b102f;
  border: 1px solid rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  font-weight: 600;
}
.btn-google:hover { filter: brightness(0.98); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.btn-google span { line-height: 1; }
.btn-outline-light {
  gap: 12px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
}
.btn-google:hover { filter: brightness(0.98); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.btn-google img.google-logo { display: inline-block; width: 20px; height: 20px; }
.btn-google span { line-height: 1; }

/* small favicon on google buttons */
.btn-google img.google-favicon { width: 16px; height: 16px; margin-right: 8px; display: inline-block; vertical-align: middle; }

.btn-outline-light {
  color: var(--ink);
  border-color: rgba(255,255,255,0.4);
}
/* Ensure outline-secondary is visible on dark theme */
.btn-outline-secondary {
  color: var(--ink);
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-secondary:hover {
  color: #1b102f;
  background-color: rgba(255,255,255,0.85);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
}

/* Tables, forms, alerts */
.table-dark {
  --bs-table-bg: rgba(255,255,255,0.04);
  --bs-table-striped-bg: rgba(255,255,255,0.06);
  color: var(--ink);
}
.form-control, .form-select {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.18);
}
.form-control:focus, .form-select:focus {
  border-color: var(--violet-2);
  box-shadow: 0 0 0 0.25rem rgba(139,92,246,0.25);
}

/* Ensure all input/text content is white for readability */
.form-control,
.form-select,
.form-control::placeholder,
.auth-card textarea,
.auth-card .form-control,
.auth-card .form-select {
  color: #fff !important;
}

/* Cart shipping form: ensure inputs stay dark with white text when focused/typing */
.checkout-summary .form-control,
.checkout-summary .form-select,
.checkout-summary input,
.checkout-summary textarea,
#shipping-form .form-control,
#shipping-form .form-select,
#shipping-form input,
#shipping-form select {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  caret-color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Focus states for cart inputs - keep dark background and white text */
.checkout-summary .form-control:focus,
.checkout-summary .form-select:focus,
.checkout-summary input:focus,
.checkout-summary textarea:focus,
#shipping-form .form-control:focus,
#shipping-form .form-select:focus,
#shipping-form input:focus,
#shipping-form select:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: var(--violet-2) !important;
  box-shadow: 0 0 0 0.25rem rgba(139,92,246,0.25) !important;
  caret-color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Active states for cart inputs */
.checkout-summary .form-control:active,
.checkout-summary input:active,
#shipping-form .form-control:active,
#shipping-form input:active {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  caret-color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Placeholder styling for cart inputs */
.checkout-summary .form-control::placeholder,
.checkout-summary input::placeholder,
.checkout-summary textarea::placeholder,
#shipping-form .form-control::placeholder,
#shipping-form input::placeholder,
#shipping-form textarea::placeholder {
  color: rgba(255,255,255,0.68) !important;
  opacity: 1 !important;
}

/* Chrome autofill override for cart inputs */
.checkout-summary input:-webkit-autofill,
.checkout-summary textarea:-webkit-autofill,
.checkout-summary select:-webkit-autofill,
#shipping-form input:-webkit-autofill,
#shipping-form textarea:-webkit-autofill,
#shipping-form select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* Extra high-specificity overrides for shipping form inputs to defeat inline styles/autofill
   Some browsers or third-party scripts may inject inline styles (background: #fff) which
   can still show a white field. These selectors target the exact classes used in the
   template and also include attribute selectors to override inline styles. */
#shipping-form input.form-control.form-control-sm,
#shipping-form textarea.form-control.form-control-sm,
#shipping-form select.form-control.form-control-sm,
#shipping-form input.form-control.form-control-sm:focus,
#shipping-form textarea.form-control.form-control-sm:focus,
#shipping-form select.form-control.form-control-sm:focus,
#shipping-form input.form-control.form-control-sm:-webkit-autofill,
#shipping-form textarea.form-control.form-control-sm:-webkit-autofill,
#shipping-form select.form-control.form-control-sm:-webkit-autofill,
#shipping-form input.form-control.form-control-sm[style],
#shipping-form textarea.form-control.form-control-sm[style],
#shipping-form select.form-control.form-control-sm[style] {
  background-color: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
}

/* Fallback for any focused/active shipping input that still gets a white background via inline style */
#shipping-form input[style]:focus,
#shipping-form textarea[style]:focus,
#shipping-form select[style]:focus {
  background-color: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

/* Additional vendor-specific autofill/focus states to catch Chrome/Edge/Firefox quirks */
#shipping-form input:-webkit-autofill,
#shipping-form input:-webkit-autofill:hover,
#shipping-form input:-webkit-autofill:focus,
#shipping-form textarea:-webkit-autofill,
#shipping-form textarea:-webkit-autofill:hover,
#shipping-form textarea:-webkit-autofill:focus,
#shipping-form select:-webkit-autofill,
#shipping-form select:-webkit-autofill:hover,
#shipping-form select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-image: none !important;
  background-clip: padding-box !important;
}

/* Firefox autofill (experimental) */
input:-moz-autofill, textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset !important;
  -moz-text-fill-color: #fff !important;
  color: #fff !important;
}

/* Very high specificity fallback: target by form id + attribute to override password managers that inject inline styles */
form#shipping-form input[style],
form#shipping-form textarea[style],
form#shipping-form select[style] {
  background-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  background-image: none !important;
}

/* Stronger autofill strategies:
   - Add a long transition on background to prevent the browser from visually flashing the autofill color
   - Use the internal selection pseudo-class some browsers add when autofilling
   - Re-assert background and text color on :-internal-autofill-selected where available
*/
#shipping-form input:-internal-autofill-selected,
#shipping-form textarea:-internal-autofill-selected,
#shipping-form select:-internal-autofill-selected,
#shipping-form input:-webkit-autofill,
#shipping-form textarea:-webkit-autofill,
#shipping-form select:-webkit-autofill {
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-image: none !important;
}

/* Some Chromium variants use a shadow on autofill; re-assert inset box-shadow */
#shipping-form input:-webkit-autofill::first-line,
#shipping-form textarea:-webkit-autofill::first-line,
#shipping-form select:-webkit-autofill::first-line {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* Validation states for shipping form */
#shipping-form .form-control.is-invalid,
#shipping-form .form-control.is-valid,
.checkout-summary .form-control.is-invalid,
.checkout-summary .form-control.is-valid {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* Validation feedback text */
/* Show error prompts in red so "Please provide ..." is obvious. Keep valid feedback a soft green. */
#shipping-form .invalid-feedback,
.checkout-summary .invalid-feedback {
  color: #ff6b6b !important; /* noticeable red */
  opacity: 0.95 !important;
}

#shipping-form .valid-feedback,
.checkout-summary .valid-feedback {
  color: #8bd39b !important; /* soft green for success */
  opacity: 0.95 !important;
}

/* Confirmation page specific color tweaks */
.checkout-confirmation .card-body,
.checkout-confirmation .card {
  color: #ffffff; /* force primary text white inside confirmation card */
}
.checkout-confirmation .text-muted,
.checkout-confirmation small,
.checkout-confirmation .small,
.checkout-confirmation .lead,
.checkout-confirmation .card .small.text-muted {
  color: #ffffff !important; /* make muted/grey copy white for readability */
}
/* Item box (list-group-item) should show dark text on white background for readability */
.checkout-confirmation .list-group-item {
  background: #ffffff !important;
  color: #2b2b2b !important;
  border-radius: 8px;
}
.checkout-confirmation .list-group-item .small,
.checkout-confirmation .list-group-item small {
  color: rgba(43,43,43,0.7) !important;
}

/* Ensure every descendant inside the item box is dark grey for consistent readability */
.checkout-confirmation .list-group-item * {
  color: #2b2b2b !important;
}
.checkout-confirmation .list-group-item a { color: #2b2b2b !important; }
.checkout-confirmation .list-group-item .fw-semibold { color: #2b2b2b !important; }
.checkout-confirmation .list-group-item .text-end { color: #2b2b2b !important; }


/* Placeholder color (so hint text is visible but subtle) */
.form-control::placeholder,
.auth-card .form-control::placeholder {
  color: rgba(255,255,255,0.68) !important;
  opacity: 1;
}

/* Disabled/read-only controls should remain readable */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.75) !important;
}
.alert {
  background: rgba(109,40,217,0.18);
  border-color: rgba(167,139,250,0.35);
  color: var(--ink);
}

/* Hero (used on / if empty product list) */
.hero {
  position: relative;
  border-radius: 18px;
  padding: clamp(2rem, 4vw, 4rem);
  background:
    linear-gradient(180deg, rgba(167,139,250,0.10), rgba(167,139,250,0.04)),
    radial-gradient(600px 200px at 10% 0%, rgba(139,92,246,0.25), transparent 60%),
    radial-gradient(500px 250px at 90% 10%, rgba(96,165,250,0.24), transparent 70%),
    rgba(255,255,255,0.04);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-2);
}
.hero .kicker {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--muted);
}

/* Little sparkles */
.sparkles {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(167,139,250,0.5), transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.22), transparent 60%);
  background-repeat: no-repeat;
  opacity: .9;
}

/* Utility spacing tweaks */
.mt-6 { margin-top: 4rem; }
.mb-6 { margin-bottom: 4rem; }

/* Cart polish */
.table td, .table th { vertical-align: middle; }
.table thead th { color: var(--muted); font-weight: 600; }

/* Cart order summary readability */
.card .text-muted {
  color: var(--ink) !important;  /* full white/purple-ink instead of muted */
  opacity: 0.9;
}
.card .fw-semibold {
  color: var(--ink);
}

.card .border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* Order summary visibility */
.card .order-summary-label,
.card .order-summary-value {
  color: #fff !important; /* force bright white */
}

/* Strong emphasis on TOTAL */
.card .order-summary-total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--violet-1) !important; /* your light purple accent */
}

/* Checkout summary card styling */
.card.checkout-summary {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg,
              rgba(255,255,255,0.08) 0%,
              rgba(255,255,255,0.04) 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}

/* Force order summary text to white for readability */
.checkout-summary .card-body,
.checkout-summary h2,
.checkout-summary .order-summary-label,
.checkout-summary .order-summary-value,
.checkout-summary .order-summary-total {
  color: #fff !important;
}

/* The cart items table */
.cart-items {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg,
              rgba(255,255,255,0.08) 0%,
              rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.cart-items th {
  color: var(--violet-1);
  font-weight: 600;
}
.cart-items td, .cart-items th {
  padding: 1rem;
  vertical-align: middle;
  color: var(--ink);
}

/* Cart items "glass" panel */
.cart-items {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.cart-items th { color: var(--violet-3) !important; font-weight: 600; }
.cart-items td, .cart-items th { padding: 1rem; vertical-align: middle; color: var(--ink); }
/* Make cart header text, product links, and small tags a darker purple for contrast */
.cart-items a,
.cart-items .fw-semibold,
.cart-items .small {
  color: var(--violet-3) !important;
}

/* Extra overrides for any remaining light-purple elements inside the cart */
.cart-items table thead th,
.cart-items table thead th *,
.cart-items .text-muted,
.cart-items small,
.cart-items .small,
.cart-items a.text-reset {
  color: var(--violet-3) !important;
}

/* Target Qty/Unit cells (desktop/table) which use data-label attributes */
.cart-items td[data-label],
.cart-items td[data-label] * {
  color: var(--violet-3) !important;
}

/* Ensure tag badges/small muted text inside cart are dark purple */
.cart-items .small.text-muted,
.cart-items small.text-muted {
  color: var(--violet-3) !important;
  opacity: 0.95 !important;
}

/* Make PayPal fallback button yellow with dark text */
.btn-paypal {
  background: linear-gradient(180deg, #f9d949, #f7c948) !important; /* yellow */
  color: #1b102f !important; /* dark/purple text becomes near-black for contrast */
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 12px 30px rgba(249,217,73,0.12) !important; /* subtle yellow glow */
  position: relative;
  z-index: 1;
}
.btn-paypal:hover { filter: brightness(0.96); }

/* Yellow glow pseudo-element for a soft halo similar to Stripe button */
.btn-paypal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  pointer-events: none;
  border-radius: 14px;
  background: radial-gradient(circle at center, rgba(249,217,73,0.28), rgba(249,217,73,0.10) 30%, rgba(249,217,73,0.02) 60%, transparent 70%);
  filter: blur(10px);
  opacity: 0.95;
  z-index: 0; /* sits behind button content but above background */
}
.btn-paypal:focus::after,
.btn-paypal:hover::after {
  transform: translate(-50%, -50%) scale(1.04);
  filter: blur(14px);
  opacity: 1;
}

/* Make purple-accented text in cart order summary black for better contrast */
.checkout-summary .order-summary-label,
.checkout-summary .order-summary-value,
.checkout-summary .order-summary-total { color: #0b0b0b !important; }

/* Force checkout form and payment fields to show white text and placeholders */
.checkout-summary,
.checkout-summary .card-body,
.checkout-summary input,
.checkout-summary textarea,
.checkout-summary select,
.checkout-summary .form-control,
.checkout-summary .form-select,
.checkout-summary .StripeElement,
.checkout-summary .stripe-element-container {
  color: #fff !important;
}

.checkout-summary input::placeholder,
.checkout-summary textarea::placeholder,
.checkout-summary .form-control::placeholder {
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}

.checkout-summary label,
.checkout-summary .small,
.checkout-summary .text-muted,
.checkout-summary .form-text,
.checkout-summary .help-text {
  color: #fff !important;
  opacity: 0.95 !important;
}

/* Attempt to style Stripe Elements host container (iframe contents must be styled via Stripe options) */
.checkout-summary .StripeElement {
  background: transparent !important;
  color: #fff !important;
}

/* When PayPal in-page checkout bubble opens, force its background to white and text dark for readability */
body.paypal-bubble-open .paypal-button-container,
body.paypal-bubble-open #paypal-buttons,
body.paypal-bubble-open .paypal-checkout-something {
  background: #fff !important;
  color: #111 !important;
}

/* PayPal SDK injects iframes/popups with specific classes; target common container selectors to ensure contrast */
body.paypal-bubble-open iframe,
body.paypal-bubble-open .paypal-button,
body.paypal-bubble-open .paypal-overlay {
  background: #fff !important;
  color: #111 !important;
}

/* Ensure any buttons inside the PayPal bubble have dark text */
body.paypal-bubble-open .paypal-button, body.paypal-bubble-open .paypal-button * {
  color: #111 !important;
}


/* Checkout summary panel */
.card.checkout-summary {
  border-radius: 16px;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
}

/* Make labels & totals obvious */
.card .order-summary-label,
.card .order-summary-value { color: #fff !important; }
.card .order-summary-total { font-size: 1.25rem; font-weight: 700; color: var(--violet-1) !important; }

/* Mobile: allow cart table to scroll instead of trimming */
@media (max-width: 576px) {
  /* Stack cart rows for small screens */
  .cart-items { overflow: visible; }
  .cart-items table { width: 100%; min-width: 0; }
  .cart-items thead { display: none; }
  .cart-items tbody tr { display: block; padding: .75rem 1rem; }
  .cart-items td { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; text-align: left !important; }
  .cart-items td:first-child { display: block; padding-top: 0; }
  .cart-items td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .85rem; margin-right: .75rem; }
  .cart-items img { width: 56px; height: 56px; border-radius: 8px; }
  .cart-items .btn { padding: .25rem .5rem; font-size: .8rem; }
}
/* Footer */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(420px 220px at 15% 40%, rgba(139, 92, 246, 0.28), transparent 70%),
    radial-gradient(360px 180px at 85% 30%, rgba(96, 165, 250, 0.22), transparent 70%),
    linear-gradient(135deg, rgba(28, 7, 54, 0.95), rgba(19, 4, 40, 0.95));
  color: var(--ink);
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: -40% 20% auto;
  height: 140%;
  background: radial-gradient(260px 260px at 50% 0%, rgba(244, 114, 182, 0.18), transparent 70%);
  filter: blur(32px);
  opacity: 0.7;
  pointer-events: none;
}

.site-footer .footer-brand {
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-footer .footer-brand .fa-dragon {
  color: var(--violet-1);
  text-shadow: 0 0 18px rgba(167, 139, 250, 0.6);
}

.site-footer .footer-meta {
  font-size: 0.9rem;
  color: rgba(239, 234, 255, 0.88);
}

.site-footer .footer-copy {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 767.98px) {
  .site-footer {
    text-align: center;
  }

  .site-footer .footer-brand {
    justify-content: center;
  }

  .site-footer .footer-meta {
    text-align: center;
  }
}


.footer-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet-1), var(--pink-1));
  opacity: 0;
  transform: scaleX(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--violet-1);
  transform: translateY(-1px);
}

.footer-link:hover::after,
.footer-link:focus::after {
  opacity: 1;
  transform: scaleX(1);
}


/* Footer layout overrides */
.site-footer .footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(239, 234, 255, 0.88);
}

.footer-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 0;
}

.footer-link {
  color: rgba(239, 234, 255, 0.82);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
}

@media (min-width: 992px) {
  .site-footer .footer-meta {
    align-items: flex-end;
    text-align: right;
  }

  .footer-nav {
    justify-content: flex-end;
  }
}

.footer-nav { order: 0; }

/* Admin area form styling: ensure inputs/textareas are dark with white text while typing */
/* Target common admin pages under /admin by using an .admin-area wrapper if present, else target admin forms specifically */
.admin-area .form-control,
.admin-area textarea,
.admin-area .form-select,
.admin .form-control,
.admin form .form-control,
.admin form textarea,
.admin form .form-select {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Focus/active state keeps dark background and highlights outline */
.admin-area .form-control:focus,
.admin-area textarea:focus,
.admin-area .form-select:focus,
.admin form .form-control:focus,
.admin form textarea:focus,
.admin form .form-select:focus {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border-color: var(--violet-2) !important;
  box-shadow: 0 0 0 0.25rem rgba(139,92,246,0.18) !important;
}

/* Placeholder color for admin inputs */
.admin-area .form-control::placeholder,
.admin form .form-control::placeholder,
.admin-area textarea::placeholder,
.admin form textarea::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* Make sure checkboxes and toggles on admin forms remain visible */
.admin-area .form-check-label,
.admin form .form-check-label {
  color: var(--ink) !important;
}

/* Stronger, high-specificity overrides to handle browser quirks (autofill, caret, inline styles) */
.admin-area input.form-control:not([type=checkbox]),
.admin-area textarea.form-control,
.admin-area select.form-select,
.admin-area .form-control[type="text"],
.admin-area .form-control[type="email"],
.admin-area .form-control[type="number"],
.admin-area .form-control[type="url"] {
  background-color: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  color: var(--ink) !important;
  caret-color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important; /* for Chrome autofill/text rendering */
}

/* Focus states */
.admin-area input.form-control:focus,
.admin-area textarea.form-control:focus,
.admin-area select.form-select:focus,
.admin-area input.form-control:focus-visible,
.admin-area textarea.form-control:focus-visible {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border-color: var(--violet-2) !important;
  box-shadow: 0 0 0 0.28rem rgba(139,92,246,0.18) !important;
}

/* Chrome autofill — force dark background and text color */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.04) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* If any inline style forces background to white, override with !important on the color and background */
.admin-area [style] {
  color: var(--ink) !important;
  background-color: rgba(255,255,255,0.04) !important;
}

/* Some browsers or scripts may apply inline styles or change background on :active - force text visible
   If background ends up white, force text to black for legibility as a fallback */
.admin-area input.form-control:active,
.admin-area textarea.form-control:active,
.admin-area input.form-control:focus,
.admin-area textarea.form-control:focus {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
}

/* Fallback: if any focused/active control still ends up with a computed white background (rare), make its text black so it's readable */
.admin-area input.form-control[style*="background"],
.admin-area textarea.form-control[style*="background"],
.admin-area input.form-control[style*="background-color"],
.admin-area textarea.form-control[style*="background-color"] {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
}

/* Blog comment form: keep inputs and textarea dark and readable while typing */
.blog-comment-form .form-control,
.blog-comment-form textarea.form-control,
.blog-comment-form .form-select {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink) !important;
}
.blog-comment-form .form-control:focus,
.blog-comment-form textarea.form-control:focus {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border-color: var(--violet-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(139,92,246,0.12) !important;
}

/* Ensure comment list text is visible (white) */
.blog-comments .list-group-item,
.blog-comments .list-group-item .small,
.blog-comments .list-group-item p,
.blog-comments .list-group-item strong {
  color: #ffffff !important;
}

/* Ensure any nested elements in comments (links, spans) are white too */
.blog-comments .list-group-item * {
  color: #ffffff !important;
}

/* Ultra-specific selector to override any remaining styles inside comments */
section#comments.blog-comments ul.list-group li.list-group-item, 
section#comments.blog-comments ul.list-group li.list-group-item * {
  color: #ffffff !important;
}

/* Placeholder and autofill handling for blog comment form */
.blog-comment-form .form-control::placeholder {
  color: rgba(255,255,255,0.85) !important;
  opacity: 1 !important;
}

/* Ensure the comment card itself is dark so inputs are readable (overrides any white card defaults) */
.blog-comment-form.card,
.blog-comment-form.card .card-body,
section#comments.blog-comments .card {
  background: linear-gradient(180deg, rgba(10,6,22,0.85), rgba(8,4,20,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55) !important;
  color: var(--ink) !important;
}

/* Stronger contrast for form controls inside the comment card */
.blog-comment-form .form-control,
.blog-comment-form textarea.form-control,
.blog-comment-form .form-select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--ink) !important;
}

/* Dark variant applied via class on the comment form to override any light card styles */
.comment-card--dark {
  background: linear-gradient(180deg, rgba(10,6,22,0.95), rgba(8,4,20,0.95)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6) !important;
}
.comment-card--dark .card-body { background: transparent !important; }
.comment-card--dark .form-control,
.comment-card--dark textarea.form-control { color: #fff !important; background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.12) !important; }
.comment-card--dark .form-control::placeholder,
.comment-card--dark textarea.form-control::placeholder { color: rgba(255,255,255,0.85) !important; }

/* Ultra-specific override to defeat inline/background white styles for the post comment card */
section#comments.blog-comments form#comment-form.comment-card--dark,
section#comments.blog-comments form#comment-form.comment-card--dark .card-body,
section#comments.blog-comments form#comment-form.comment-card--dark .form-control,
section#comments.blog-comments form#comment-form.comment-card--dark textarea.form-control {
  background: linear-gradient(180deg, rgba(10,6,22,0.98), rgba(8,4,20,0.98)) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6) !important;
}

/* If any inline style sets background to #fff, explicitly override it */
section#comments.blog-comments form#comment-form.comment-card--dark[style],
section#comments.blog-comments form#comment-form.comment-card--dark[style] .form-control,
section#comments.blog-comments form#comment-form.comment-card--dark[style] textarea.form-control {
  background-color: rgba(10,6,22,0.98) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Chrome/Edge autofill overrides */
.blog-comment-form input:-webkit-autofill,
.blog-comment-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.04) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.04) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Firefox autofill fallback */
.blog-comment-form input:-moz-autofill,
.blog-comment-form textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.04) inset !important;
  -moz-text-fill-color: var(--ink) !important;
}




/* Sticky footer support */
body.footer-fixed {
  padding-bottom: clamp(14rem, 22vh, 18rem);
}

body.footer-fixed main {
  flex: 1 0 auto;
}

.footer-fixed .site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.35);
}


/* Homepage */
.home-hero {
  position: relative;
  padding: clamp(4rem, 12vw, 6rem) 0 4rem;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 10% 20%, rgba(139, 92, 246, 0.18), transparent 70%),
    radial-gradient(70% 70% at 90% 30%, rgba(96, 165, 250, 0.15), transparent 75%);
  opacity: 0.9;
  z-index: 0;
}

.home-hero .container { position: relative; z-index: 1; }

.home-kicker {
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  color: rgba(239, 234, 255, 0.65);
}

.home-hero-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(15, 5, 40, 0.45);
}

.home-hero-card__badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(15, 5, 40, 0.65);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.home-highlights {
  position: relative;
}

.highlight-card {
  padding: 2.25rem 1.75rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 12px 35px rgba(10, 0, 30, 0.35);
  text-align: left;
  min-height: 100%;
}

.highlight-card i {
  font-size: 1.75rem;
  color: var(--violet-1);
}

.home-preview .card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-preview .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(12, 0, 28, 0.55);
}

.home-preview .alert {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 991.98px) {
  .home-hero {
    text-align: center;
  }

  .home-hero-card { margin-inline: auto; max-width: 420px; }

  .home-hero .btn { width: 100%; }
}
.home-hero-card__frame {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 5, 40, 0.35);
  padding: 0.75rem;
}

.home-hero-card__frame .tiktok-embed,
.home-hero-card__frame iframe {
  width: 100% !important;
  margin: 0 auto !important;
}

.home-hero-card--tiktok {
  padding: 1rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, rgba(10, 3, 24, 0.75), rgba(10, 3, 24, 0.55));
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(15, 5, 40, 0.45);
}

.home-hero-card--tiktok .home-hero-card__badge {
  position: static;
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: rgba(15, 5, 40, 0.7);
}

.home-hero-card--tiktok .home-hero-card__badge i {
  font-size: 1rem;
}
/* Auth cards */
.auth-card {
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.auth-card, .auth-card .card-body, .auth-card .form-label { color: #fff !important; }
.auth-card .form-control, .auth-card .form-select, .auth-card textarea {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.auth-card .form-control::placeholder, .auth-card textarea::placeholder { color: #e0def1; opacity: 0.9; }
.auth-logo {
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Autofill overrides for auth (login/register) cards
   Keep the background dark and text readable when the browser applies autofill styles */
.auth-card input:-webkit-autofill,
.auth-card textarea:-webkit-autofill,
.auth-card select:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card textarea:-webkit-autofill:focus,
.auth-card select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  background-clip: padding-box !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox autofill */
.auth-card input:-moz-autofill,
.auth-card textarea:-moz-autofill,
.auth-card select:-moz-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
  -moz-text-fill-color: #fff !important;
  color: #fff !important;
}

/* High-specificity fallback to override inline styles some password managers inject */
.auth-card .form-control[style],
.auth-card textarea[style],
.auth-card select[style] {
  background-color: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
}

/* Dark modal style to resemble Google's sign-in card */
.auth-card.auth-card--dark-modal {
  background: linear-gradient(180deg, rgba(12,12,12,0.98), rgba(22,22,22,0.96));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}
.auth-card--dark-modal .card-body { padding: 2.5rem; }
.auth-logo { font-size: 1.0rem; color: var(--violet-1); letter-spacing: 0.14em; }

/* Make the auth container vertically centered on larger viewports */
@media (min-height: 720px) {
  .row.justify-content-center { min-height: calc(100vh - 8rem); align-items: center; }
}

/* Slightly more compact Google button to match the modal */
.auth-card { border-radius: 14px; }

/* Force grey/muted text to be bright/white for consistent readability */
.text-muted,
.muted,
.small,
.kicker,
.lead,
.card .text-muted,
.footer-copy,
.footer-meta,
.home-kicker,
.hero .lead,
.card .small,
.footer-link,
.site-footer .footer-meta,
.site-footer .footer-copy {
  color: var(--ink) !important;
  opacity: 0.95 !important;
}

/* Global override: ensure all subtle/auxiliary text appears white on dark backgrounds */
label.form-label,
.text-muted,
.small,
.lead,
.kicker,
.card .text-muted,
.table .text-muted,
.list-group-item .small,
.form-label,
.form-text,
.help-text,
.badge {
  color: var(--ink) !important;
  opacity: 0.95 !important;
}

/* Admin card titles and small headings */
.admin-area .card-body h2,
.admin-area h2,
.admin-area .h5,
.admin-area h3 {
  color: var(--ink) !important;
  opacity: 0.95 !important;
}

/* Table muted headers and cell helper text */
.table th,
.table td,
.table .text-muted {
  color: var(--ink) !important;
  opacity: 0.95 !important;
}

/* Also ensure link-light remains visible on dark backgrounds */
.link-light { color: #fff !important; }

/* Contact page & social-embed overrides: ensure all visible text is white */
.auth-card.card, .auth-card.card .card-body {
  color: var(--ink) !important;
}
.auth-card.card .form-label,
.auth-card.card h1,
.auth-card.card h2,
.auth-card.card h3,
.auth-card.card p,
.auth-card.card label {
  color: var(--ink) !important;
}

/* Social embed cards (TikTok / Instagram / Facebook) */
.card.social-embed,
.card.social-embed .card-body,
.card.social-embed .d-flex,
.card.social-embed h2,
.card.social-embed .btn-outline-light {
  color: var(--ink) !important;
}
.card.social-embed .btn-outline-light {
  border-color: rgba(255,255,255,0.4) !important;
}
.card.social-embed .d-flex a.btn-outline-light { color: var(--ink) !important; }

/* Blockquote and embed fallbacks (these are initial DOM nodes before the embed script replaces them) */
.card.social-embed blockquote,
.card.social-embed .tiktok-embed section,
.card.social-embed .instagram-media p,
.card.social-embed blockquote p,
.card.social-embed blockquote a {
  color: var(--ink) !important;
}

/* Ensure links inside embeds look correct on dark background */
.card.social-embed a,
.card.social-embed a:visited {
  color: var(--ink) !important;
}

/* If embeds create iframes we cannot style their internals; ensure container is transparent */
.card.social-embed iframe {
  background: transparent !important;
  border: none !important;
}

/* Make sure small helper text (muted) in cards is visible */
.card.social-embed .text-muted,
.card.social-embed .small {
  color: var(--ink) !important;
  opacity: 0.95 !important;
}