/* =====================================================================
   TrueTiesDating — GLOSSY DARK-RED DESIGN SYSTEM  (site-wide)
   Loaded LAST (after colors.css) so it wins the cascade.

   Strategy: the template is Bootstrap-based on a `--ttd-*` variable
   namespace, and .card / components derive their surface from
   --ttd-body-bg / --ttd-body-color. Remapping those core variables to a
   dark-red palette re-skins EVERY component at once (public + member
   area), then we layer glossy flourishes and explicit component fixes.

   Sections:
     0  Palette tokens
     1  Core --ttd-* variable remap (light + dark themes)
     2  Global canvas (fixed glossy gradient)
     3  Typography / links
     4  Buttons (glossy)
     5  Cards / glass panels
     6  Forms & inputs
     7  Tables / list-group / dropdown / modal / offcanvas / alert / badge
     8  Nav / tabs / pagination / accordion
     9  Header (public + member)
     10 Footer
     11 Dashboard shell / sidebar / left menu
     12 Chat / messages
     13 Landing (body.home) hero + sections + VIDEO features
     14 Owl carousel / misc
     15 Scrollbar / selection
     16 Responsive + reduced motion
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0 · Palette tokens                                                  */
/* ------------------------------------------------------------------ */
:root {
  --gr-red:            #e11534;
  --gr-red-rgb:        225, 21, 52;
  --gr-red-light:      #ff3b57;
  --gr-red-deep:       #b00d27;

  --gr-bg-1:           #26000a;   /* darkest canvas */
  --gr-bg-2:           #45001a;   /* mid glow */
  --gr-bg-3:           #6b0020;   /* highlight */

  --gr-surface:        #360712;   /* opaque component surface */
  --gr-surface-2:      #431019;   /* raised surface */
  --gr-glass:          rgba(58, 8, 22, 0.55);
  --gr-glass-strong:   rgba(40, 5, 15, 0.86);
  --gr-glass-border:   rgba(255, 120, 140, 0.20);
  --gr-glass-hi:       rgba(255, 255, 255, 0.10);

  --gr-text:           #f4e6e9;
  --gr-text-dim:       #d7b3bc;
  --gr-text-mut:       rgba(244, 230, 233, 0.60);
}

/* ------------------------------------------------------------------ */
/* 1 · Core --ttd-* remap → re-themes all Bootstrap components         */
/*     Applied to :root and both explicit theme roots so the look is   */
/*     identical whether the user's toggle is light, dark or auto.     */
/* ------------------------------------------------------------------ */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
  /* brand */
  --ttd-primary:            #e11534;
  --ttd-primary-rgb:        225, 21, 52;
  --bs-primary:             #e11534;
  --bs-primary-rgb:         225, 21, 52;

  /* surfaces & text */
  --ttd-body-bg:            #26000a;
  --ttd-body-bg-rgb:        38, 0, 10;
  --ttd-body-color:         #f4e6e9;
  --ttd-body-color-rgb:     244, 230, 233;
  --ttd-emphasis-color:     #ffffff;
  --ttd-emphasis-color-rgb: 255, 255, 255;
  --ttd-secondary-color:    rgba(244, 230, 233, 0.66);
  --ttd-secondary-color-rgb:244, 230, 233;
  --ttd-secondary-bg:       #431019;
  --ttd-secondary-bg-rgb:   67, 16, 25;
  --ttd-tertiary-color:     rgba(244, 230, 233, 0.50);
  --ttd-tertiary-bg:        #300610;
  --ttd-tertiary-bg-rgb:    48, 6, 16;
  --ttd-heading-color:      #ffffff;

  /* links */
  --ttd-link-color:         #ff5c72;
  --ttd-link-color-rgb:     255, 92, 114;
  --ttd-link-hover-color:   #ff8497;
  --ttd-link-hover-color-rgb:255, 132, 151;
  --bs-link-color:          #ff5c72;
  --bs-link-hover-color:    #ff8497;

  /* borders */
  --ttd-border-color:            rgba(255, 120, 140, 0.18);
  --ttd-border-color-translucent:rgba(255, 120, 140, 0.18);

  /* emphasis / subtle helpers pulled toward the red canvas */
  --ttd-primary-bg-subtle:      rgba(225, 21, 52, 0.16);
  --ttd-primary-border-subtle:  rgba(225, 21, 52, 0.40);
  --ttd-primary-text-emphasis:  #ff8497;
  --ttd-secondary-bg-subtle:    rgba(255, 120, 140, 0.10);
  /* colored subtle backgrounds -> dark-tinted so no light boxes on the dark UI */
  --ttd-success-bg-subtle:      rgba(61, 220, 132, 0.15);
  --ttd-info-bg-subtle:         rgba(56, 189, 248, 0.15);
  --ttd-warning-bg-subtle:      rgba(255, 193, 7, 0.15);
  --ttd-danger-bg-subtle:       rgba(255, 80, 110, 0.15);
  --ttd-light-bg-subtle:        rgba(255, 255, 255, 0.06);
  --ttd-dark-bg-subtle:         rgba(255, 255, 255, 0.03);
  --ttd-dark:                   #1a0207;
  --ttd-light:                  #431019;
  --ttd-light-rgb:              67, 16, 25;

  /* shadows a touch deeper for glossy depth */
  --ttd-box-shadow:     0 12px 34px rgba(0, 0, 0, 0.45);
  --ttd-box-shadow-sm:  0 4px 14px rgba(0, 0, 0, 0.35);
  --ttd-box-shadow-lg:  0 22px 60px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* 2 · Global glossy canvas                                           */
/* ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
html, body { background-color: var(--gr-bg-1) !important; }

body {
  color: var(--gr-text);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--gr-bg-1);
  background-image:
    radial-gradient(1200px 620px at 12% -8%,  rgba(var(--gr-red-rgb), 0.34), transparent 60%),
    radial-gradient(1050px 720px at 100% 2%,  rgba(107, 0, 32, 0.55),        transparent 55%),
    radial-gradient(900px 900px  at 50% 118%, rgba(120, 0, 30, 0.42),        transparent 60%),
    linear-gradient(160deg, var(--gr-bg-1) 0%, var(--gr-bg-2) 46%, var(--gr-bg-1) 100%);
  background-repeat: no-repeat;
}
#wrapper { background: transparent !important; }

/* ------------------------------------------------------------------ */
/* 3 · Typography / links                                             */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ttd-heading-color); }
.text-muted, .text-secondary { color: var(--gr-text-mut) !important; }
.text-dark { color: var(--gr-text) !important; }
.text-primary { color: var(--gr-red-light) !important; }
a { color: var(--ttd-link-color); }
.text-black, .text-body { color: var(--gr-text) !important; }
hr { border-color: var(--gr-glass-border); opacity: .5; }
.divider-2:after, .divider-3:after { background: linear-gradient(90deg, var(--gr-red-light), var(--gr-red-deep)) !important; }

/* ------------------------------------------------------------------ */
/* 4 · Buttons — glossy                                               */
/* ------------------------------------------------------------------ */
.btn-primary,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--gr-red-light) 0%, var(--gr-red) 45%, var(--gr-red-deep) 100%);
  border: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(var(--gr-red-rgb), 0.42), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--gr-red) 0%, var(--gr-red-deep) 100%);
  box-shadow: 0 12px 30px rgba(var(--gr-red-rgb), 0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: translateY(-2px);
  color: #fff;
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  color: var(--gr-red-light);
  border-color: rgba(var(--gr-red-rgb), 0.6);
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  border-color: transparent; color: #fff;
}
.btn-light, .btn-outline-light {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--gr-glass-border);
  color: var(--gr-text);
}
.btn-light:hover, .btn-outline-light:hover {
  background: rgba(255,255,255,0.16); color: #fff;
}
.btn-secondary { background: var(--gr-surface-2); border-color: var(--gr-glass-border); color: var(--gr-text); }
.btn-link { color: var(--gr-red-light); }

/* ------------------------------------------------------------------ */
/* 5 · Cards / glass panels                                           */
/* ------------------------------------------------------------------ */
.card {
  --ttd-card-bg: var(--gr-glass);
  --ttd-card-color: var(--gr-text);
  --ttd-card-border-color: var(--gr-glass-border);
  --ttd-card-cap-bg: rgba(255,255,255,0.04);
  background: var(--gr-glass);
  border: 1px solid var(--gr-glass-border);
  color: var(--gr-text);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.42), inset 0 1px 0 var(--gr-glass-hi);
  border-radius: 16px;
}
.card .card-header, .card .card-footer {
  background: rgba(255,255,255,0.03);
  border-color: var(--gr-glass-border);
  color: var(--gr-text);
}
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card .card-title { color: #fff; }
.card p, .card .card-text, .card small, .card label { color: var(--gr-text-dim); }

/* ------------------------------------------------------------------ */
/* 6 · Forms & inputs                                                 */
/* ------------------------------------------------------------------ */
.form-control, .form-select,
.select2-container--default .select2-selection,
.input-group-text {
  background-color: rgba(255,255,255,0.06);
  border: 1px solid var(--gr-glass-border);
  color: var(--gr-text);
}
.form-control::placeholder { color: var(--gr-text-mut); }
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,0.10);
  border-color: rgba(var(--gr-red-rgb), 0.6);
  box-shadow: 0 0 0 0.25rem rgba(var(--gr-red-rgb), 0.20);
  color: #fff;
}
.form-control:disabled, .form-control[readonly] { background-color: rgba(255,255,255,0.03); }
.form-label, .col-form-label, .form-check-label { color: var(--gr-text); }
.form-floating > label { color: var(--gr-text-mut); }
.form-select option { background: var(--gr-surface); color: var(--gr-text); }
.form-check-input {
  background-color: rgba(255,255,255,0.10);
  border: 1px solid var(--gr-glass-border);
}
.form-check-input:checked {
  background-color: var(--gr-red);
  border-color: var(--gr-red);
}
.form-switch .form-check-input:checked { background-color: var(--gr-red); }
.input-group-text { color: var(--gr-text-dim); }

/* Public sign-up / login panels prefer bright inputs for legibility */
body.home .registration .form-control,
body.home .registration .form-floating > .form-control {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.35);
  color: #2a0009;
}
body.home .registration .form-floating > label { color: #7a4750; }

/* ------------------------------------------------------------------ */
/* 7 · Tables / list-group / dropdown / modal / offcanvas / alert     */
/* ------------------------------------------------------------------ */
.table {
  --ttd-table-color: var(--gr-text);
  --ttd-table-bg: transparent;
  --ttd-table-border-color: var(--gr-glass-border);
  --ttd-table-striped-color: var(--gr-text);
  --ttd-table-striped-bg: rgba(255,255,255,0.03);
  --ttd-table-hover-color: #fff;
  --ttd-table-hover-bg: rgba(var(--gr-red-rgb), 0.12);
  color: var(--gr-text);
}
.table > :not(caption) > * > * { border-color: var(--gr-glass-border); }
.table thead th { color: #fff; border-color: var(--gr-glass-border); }

.list-group {
  --ttd-list-group-bg: var(--gr-glass);
  --ttd-list-group-color: var(--gr-text);
  --ttd-list-group-border-color: var(--gr-glass-border);
  --ttd-list-group-action-color: var(--gr-text);
  --ttd-list-group-action-hover-bg: rgba(var(--gr-red-rgb),0.12);
  --ttd-list-group-action-hover-color: #fff;
  --ttd-list-group-active-bg: var(--gr-red);
  --ttd-list-group-active-border-color: var(--gr-red);
}

.dropdown-menu {
  --ttd-dropdown-bg: var(--gr-glass-strong);
  --ttd-dropdown-color: var(--gr-text);
  --ttd-dropdown-border-color: var(--gr-glass-border);
  --ttd-dropdown-link-color: var(--gr-text);
  --ttd-dropdown-link-hover-bg: rgba(var(--gr-red-rgb),0.16);
  --ttd-dropdown-link-hover-color: #fff;
  --ttd-dropdown-link-active-bg: var(--gr-red);
  background: var(--gr-glass-strong);
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}
.dropdown-item { color: var(--gr-text); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--gr-red-rgb),0.16); color: #fff; }
.dropdown-divider { border-color: var(--gr-glass-border); }

.modal-content {
  background: var(--gr-glass-strong);
  border: 1px solid var(--gr-glass-border);
  color: var(--gr-text);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  border-radius: 18px;
}
.modal-header, .modal-footer { border-color: var(--gr-glass-border); }
.modal-title { color: #fff; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.offcanvas { background: var(--gr-glass-strong); color: var(--gr-text); border-color: var(--gr-glass-border); }

.alert { border-color: var(--gr-glass-border); }
.alert-success { background: rgba(40,167,69,0.14); color: #b8f0c6; }
.alert-danger  { background: rgba(var(--gr-red-rgb),0.16); color: #ffc2cc; }
.alert-warning { background: rgba(255,193,7,0.14); color: #ffe39a; }
.alert-info    { background: rgba(13,202,240,0.12); color: #b9ecf9; }

.badge.text-bg-warning { color: #3a0512 !important; }
.badge.bg-light, .badge.text-bg-light { color: #3a0512 !important; }

/* ------------------------------------------------------------------ */
/* 8 · Nav / tabs / pagination / accordion                            */
/* ------------------------------------------------------------------ */
.nav-tabs {
  --ttd-nav-tabs-border-color: var(--gr-glass-border);
  --ttd-nav-tabs-link-hover-border-color: var(--gr-glass-border);
  --ttd-nav-tabs-link-active-color: #fff;
  --ttd-nav-tabs-link-active-bg: var(--gr-glass);
  --ttd-nav-tabs-link-active-border-color: var(--gr-glass-border);
}
.nav-link { color: var(--gr-text-dim); }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-underline .nav-link.active { border-bottom-color: var(--gr-red-light); }
.nav-pills { --ttd-nav-pills-link-active-bg: var(--gr-red); }

.pagination {
  --ttd-pagination-bg: var(--gr-glass);
  --ttd-pagination-color: var(--gr-text);
  --ttd-pagination-border-color: var(--gr-glass-border);
  --ttd-pagination-hover-bg: rgba(var(--gr-red-rgb),0.16);
  --ttd-pagination-hover-color: #fff;
  --ttd-pagination-active-bg: var(--gr-red);
  --ttd-pagination-active-border-color: var(--gr-red);
  --ttd-pagination-disabled-bg: transparent;
}

.accordion {
  --ttd-accordion-bg: var(--gr-glass);
  --ttd-accordion-color: var(--gr-text);
  --ttd-accordion-border-color: var(--gr-glass-border);
  --ttd-accordion-button-bg: transparent;
  --ttd-accordion-button-color: var(--gr-text);
  --ttd-accordion-active-bg: rgba(var(--gr-red-rgb),0.12);
  --ttd-accordion-active-color: #fff;
}
.accordion-button::after { filter: invert(1) brightness(1.5); }

.breadcrumb { --ttd-breadcrumb-divider-color: var(--gr-text-mut); color: var(--gr-text-dim); }

/* ------------------------------------------------------------------ */
/* 9 · Header (public transparent + member bar)                       */
/* ------------------------------------------------------------------ */
body.home #header-container.before-login,
body.home #header-container.before-login #header { background: transparent; }
body.home .before-login.sticky #header,
body.home #header-container.before-login.header-scrolled {
  background: linear-gradient(180deg, rgba(38,0,10,0.96), rgba(38,0,10,0.82));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gr-glass-border);
}

/* Logged-in header bar */
#header-container:not(.before-login),
#header-container:not(.before-login) #header {
  background: linear-gradient(180deg, rgba(38,0,10,0.97), rgba(30,2,10,0.90));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gr-glass-border);
}
#header-container #navigation > ul > li > a { color: var(--gr-text); }
#header-container #navigation > ul > li > a:hover { color: #fff; }
#header-container #navigation ul ul.dropdown-nav {
  background: var(--gr-glass-strong);
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(16px);
}
.header-notifications-dropdown { background: var(--gr-glass-strong) !important; border: 1px solid var(--gr-glass-border); }
.header-notifications-dropdown h4, .header-notifications-dropdown .notification-text strong { color: #fff; }
.user-menu-small-nav li a, .user-status .user-name { color: var(--gr-text); }
.user-menu-small-nav li a:hover { color: var(--gr-red-light); background: rgba(var(--gr-red-rgb),0.12); }

/* ------------------------------------------------------------------ */
/* 10 · Footer                                                        */
/* ------------------------------------------------------------------ */
footer {
  background: linear-gradient(180deg, rgba(30,2,10,0.55), rgba(18,1,6,0.94)) !important;
  color: var(--gr-text) !important;
  border-top: 1px solid var(--gr-glass-border);
}
footer h3, footer h4, footer h5 { color: #fff !important; }
footer p, footer address, footer li, footer a { color: var(--gr-text-dim) !important; }
footer ul.foot-nav li > a:hover { color: var(--gr-red-light) !important; }
footer .copyright { border-top-color: var(--gr-glass-border); }
footer ul.social-icon > li > a {
  color: #fff;
  background: rgba(var(--gr-red-rgb), 0.22);
  border: 1px solid var(--gr-glass-border);
}
footer ul.social-icon > li > a:hover { background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep)); color: #fff; }
footer .form-control { background: rgba(255,255,255,0.08); border: 1px solid var(--gr-glass-border); color: var(--gr-text); }
.small-footer { background: rgba(18,1,6,0.9) !important; color: var(--gr-text-dim); border-top: 1px solid var(--gr-glass-border); }

/* ------------------------------------------------------------------ */
/* 11 · Dashboard shell / sidebar / left menu                         */
/* ------------------------------------------------------------------ */
.dashboard-container { background: transparent; }
/* Sidebar keeps a subtle panel; the CONTENT wrapper is transparent so its
   border doesn't stack with the inner cards' borders (avoids double "join"
   lines the cards already provide their own separation). */
.dashboard-sidebar {
  background: var(--gr-glass);
  border: 1px solid var(--gr-glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Breathing room below the header so the panel's rounded top reads as
   intentional instead of a doubled line under the header border. */
.dashboard-container { padding-top: 1.25rem; }
.dashboard-content-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Recolor leftover magenta (#AA0142) accents to the red theme, and keep the
   avatar filling its frame (base theme leaves img width unset, so it overflows
   the 48px box when the sidebar is collapsed). */
.profilePic > img, .profilePic > video {
  border-color: var(--gr-red) !important;
  width: 100% !important; height: 100% !important; object-fit: cover;
}
.editInfo { color: var(--gr-red-light) !important; }
.list-group-item.active { background-color: var(--gr-red) !important; border-color: var(--gr-red) !important; }
.file-with-border .custom-file-label { border-color: rgba(var(--gr-red-rgb),0.5) !important; }
.dashboard-nav { background: transparent; }
.dashboard-nav ul li a { color: var(--gr-text-dim); }
.dashboard-nav ul li a:hover,
.dashboard-nav ul li.active > a {
  color: #fff;
  background: rgba(var(--gr-red-rgb), 0.14);
}
.dashboard-nav ul li a i { color: var(--gr-red-light); }

/* ------------------------------------------------------------------ */
/* 12 · Chat / messages                                               */
/* ------------------------------------------------------------------ */
.messages-inbox, .message-content, .messages-headline, .chat-box, .message-box {
  background: var(--gr-glass);
  color: var(--gr-text);
  border-color: var(--gr-glass-border);
}
.messages-inbox ul li { border-color: var(--gr-glass-border); }
.messages-inbox ul li:hover, .messages-inbox ul li.active-message { background: rgba(var(--gr-red-rgb),0.12); }
.message-bubble .message-text { background: var(--gr-surface-2); color: var(--gr-text); border-radius: 14px; }
.message-bubble.me .message-text { background: linear-gradient(135deg, var(--gr-red), var(--gr-red-deep)); color: #fff; }

/* ------------------------------------------------------------------ */
/* 13 · Landing (body.home) hero + sections + VIDEO features          */
/* ------------------------------------------------------------------ */
body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6,
body.home .title { color: #fff; }
body.home p, body.home li, body.home address { color: var(--gr-text-dim); }
body.home .subtitle { color: var(--gr-red-light) !important; }

/* Hero */
.banner.intro-banner { position: relative; }
.banner.intro-banner .background-image-container { filter: saturate(1.05) contrast(1.02); }
.banner.intro-banner::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 11;
  background: linear-gradient(180deg, rgba(38,0,10,0.55) 0%, rgba(38,0,10,0.30) 40%, rgba(38,0,10,0.92) 100%);
}
/* background-image-container sits at z-index:10 in the base theme, so lift
   the hero content above both the image and the darkening overlay. */
.banner.intro-banner .container { position: relative; z-index: 12; }
.banner_caption { text-shadow: 0 6px 30px rgba(0,0,0,0.55); }

/* Hero pill CTAs (added in markup) */
.hero-cta-row { position: relative; z-index: 2; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--gr-glass-strong);
  border: 1px solid var(--gr-glass-border);
  color: var(--gr-text); font-weight: 600; font-size: .9rem;
  backdrop-filter: blur(10px);
}
.hero-chip i { color: var(--gr-red-light); }

/* ---- NEW split hero + live-call mockup ---- */
.gr-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 8rem) 0 clamp(3rem, 6vw, 6rem);
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.gr-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  pointer-events: none; z-index: 0;
}
.gr-orb-1 { width: 520px; height: 520px; top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(var(--gr-red-rgb),0.75), transparent 70%); }
.gr-orb-2 { width: 460px; height: 460px; bottom: -160px; right: -100px;
  background: radial-gradient(circle, rgba(120,0,30,0.85), transparent 70%); animation: grFloat 9s ease-in-out infinite; }
.gr-orb-3 { width: 300px; height: 300px; top: 30%; right: 30%;
  background: radial-gradient(circle, rgba(255,80,110,0.35), transparent 70%); animation: grFloat 12s ease-in-out infinite reverse; }
.gr-hero .container { position: relative; z-index: 2; }

.gr-hero-copy { color: var(--gr-text); }
.gr-hero-title {
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.05;
  color: #fff;
  margin-bottom: 1.25rem;
  letter-spacing: -0.5px;
}
.gr-grad-text {
  background: linear-gradient(120deg, var(--gr-red-light) 10%, #ff8aa0 50%, var(--gr-red) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gr-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--gr-text-dim);
  max-width: 540px; margin-bottom: 2rem;
}
.gr-hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: .5rem; }
.gr-stat { display: flex; flex-direction: column; }
.gr-stat-num {
  font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1;
  display: inline-flex; align-items: center; gap: .25rem;
}
.gr-stat-num i { color: #ffc93c; font-size: 1.2rem; }
.gr-stat-num.gr-online { color: #58e08a; }
.gr-stat-label { font-size: .85rem; color: var(--gr-text-mut); margin-top: .35rem; }

/* Live-call mockup */
.gr-callmock {
  position: relative;
  width: min(420px, 100%);
  margin-inline: auto;
  aspect-ratio: 3 / 3.5;
}
.gr-callmock-main {
  position: relative; height: 100%; width: 100%;
  border-radius: 28px; overflow: hidden;
  border: 1px solid var(--gr-glass-border);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.14);
  background: var(--gr-surface);
}
.gr-callmock-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.02); }
.gr-callmock-main::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38,0,10,0.15) 0%, rgba(38,0,10,0.05) 45%, rgba(20,0,6,0.85) 100%);
}
.gr-live-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(20,0,6,0.55); border: 1px solid var(--gr-glass-border);
  color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.gr-call-meta {
  position: absolute; left: 1rem; bottom: 5.2rem; z-index: 3; color: #fff;
}
.gr-call-name { display: block; font-weight: 700; font-size: 1.15rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.gr-call-timer { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--gr-text-dim); }
.gr-call-controls {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 4;
  display: flex; justify-content: center; gap: 1rem;
}
.gr-cc {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .25s ease;
}
.gr-cc:hover { transform: translateY(-3px); }
.gr-cc-end {
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  border-color: transparent; transform: rotate(135deg);
  box-shadow: 0 8px 22px rgba(var(--gr-red-rgb),0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-cc-end:hover { transform: rotate(135deg) translateY(-3px); }

/* Floating cards */
.gr-float { position: absolute; z-index: 5; }
.gr-float-self {
  top: 1rem; right: -1.2rem; width: 108px; height: 138px;
  border-radius: 18px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  animation: grFloat 6s ease-in-out infinite;
}
.gr-float-self img { width: 100%; height: 100%; object-fit: cover; }
.gr-float-tag {
  position: absolute; bottom: .35rem; left: .35rem;
  font-size: .62rem; font-weight: 700; color: #fff;
  background: rgba(20,0,6,0.6); padding: .15rem .5rem; border-radius: 999px;
}
.gr-float-pill {
  left: -1.5rem; bottom: 4.5rem;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-radius: 16px;
  background: var(--gr-glass-strong); border: 1px solid var(--gr-glass-border);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  backdrop-filter: blur(14px);
  animation: grFloat 7.5s ease-in-out infinite reverse;
}
.gr-float-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--gr-surface-2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.gr-float-ava img { width: 100%; height: 100%; object-fit: cover; }
.gr-float-txt { font-size: .74rem; color: var(--gr-text-dim); line-height: 1.2; }
.gr-float-txt strong { color: #fff; font-size: .82rem; }
.gr-float-heart {
  top: 42%; left: -1rem;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 12px 28px rgba(var(--gr-red-rgb),0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: grHeart 3s ease-in-out infinite;
}
@keyframes grFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes grHeart { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.12) translateY(-6px); } }

@media (max-width: 991.98px) {
  .gr-hero { min-height: auto; text-align: center; padding-top: 6rem; }
  .gr-hero-lead { margin-inline: auto; }
  .gr-hero-stats { justify-content: center; }
  .gr-hero-copy .hero-chip { margin-inline: auto; }
  .gr-callmock { margin-top: 1rem; }
}
@media (max-width: 420px) {
  .gr-callmock { width: 300px; }
  .gr-float-self { width: 84px; height: 108px; right: -.4rem; }
  .gr-float-pill { left: -.4rem; }
}

/* Trust strip */
.bg-primary, body.home .bg-primary {
  background: linear-gradient(135deg, var(--gr-red) 0%, var(--gr-red-deep) 60%, #7a0016 100%) !important;
  position: relative; overflow: hidden;
}
.bg-primary::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)); pointer-events: none;
}
.bg-primary-dark, .web-info.bg-primary-dark { background: linear-gradient(135deg, #7a0016 0%, #45001a 100%) !important; }
.web-info, .web-info h3, .web-info p { color: #fff !important; }

/* ---- Trust bar (glossy glass items) ---- */
.gr-trust-item {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  padding: 1.15rem 1.35rem; border-radius: 16px;
  background: var(--gr-glass);
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4), inset 0 1px 0 var(--gr-glass-hi);
  transition: transform .3s ease, border-color .3s ease;
}
.gr-trust-item:hover { transform: translateY(-4px); border-color: rgba(var(--gr-red-rgb),0.5); }
.gr-trust-ico {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 8px 20px rgba(var(--gr-red-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-trust-txt h4 { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; line-height: 1.25; }
.gr-trust-txt p { color: var(--gr-text-mut); font-size: .82rem; margin: 0; }

/* ---- About section (media stack + checklist) ---- */
.gr-about-media { position: relative; padding: 1rem 2rem 2rem 1rem; min-height: 380px; }
.gr-about-img { position: absolute; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--gr-glass-border); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.gr-about-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gr-about-img-1 { width: 62%; top: 0; left: 0; z-index: 1; aspect-ratio: 4/5; }
.gr-about-img-2 { width: 52%; right: 1rem; bottom: 0; z-index: 2; aspect-ratio: 4/5;
  border: 3px solid rgba(255,255,255,0.15); }
.gr-about-badge {
  position: absolute; left: 0; bottom: 2.5rem; z-index: 3;
  display: flex; flex-direction: column; padding: .8rem 1.1rem; border-radius: 16px;
  background: var(--gr-glass-strong); border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.gr-about-badge-num { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1;
  background: linear-gradient(120deg,#fff,#ffb3c0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gr-about-badge-lbl { font-size: .78rem; color: var(--gr-text-dim); margin-top: .2rem; }
.gr-about-chip {
  position: absolute; top: 1.5rem; right: 0; z-index: 4;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff;
  background: var(--gr-glass-strong); border: 1px solid var(--gr-glass-border); backdrop-filter: blur(10px);
}
.gr-check-list { margin: 1.25rem 0 1.75rem; padding: 0; }
.gr-check-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  color: var(--gr-text); font-size: 1rem; margin-bottom: .8rem; line-height: 1.4;
}
.gr-check-list li i { color: var(--gr-red-light); font-size: 1.25rem; flex: 0 0 auto; margin-top: .1rem; }

/* ---- How it works — numbered stepper ---- */
.gr-steps-row { position: relative; }
.gr-steps-row::before {
  content: ""; position: absolute; top: 60px; left: 16%; right: 16%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--gr-red-rgb),0.5), transparent);
}
.gr-step {
  position: relative; z-index: 1; height: 100%; text-align: center;
  padding: 2.5rem 1.5rem 2rem; border-radius: 20px;
  background: var(--gr-glass); border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.42), inset 0 1px 0 var(--gr-glass-hi);
  transition: transform .3s ease, border-color .3s ease;
}
.gr-step:hover { transform: translateY(-8px); border-color: rgba(var(--gr-red-rgb),0.55); }
.gr-step-num {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: .95rem; font-weight: 800; letter-spacing: .05em; color: #fff;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  border: 3px solid var(--gr-bg-1);
  box-shadow: 0 8px 20px rgba(var(--gr-red-rgb),0.55);
}
.gr-step-ico {
  width: 76px; height: 76px; margin: 1rem auto 1.1rem; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 2.1rem; color: #fff;
  background: linear-gradient(135deg, rgba(var(--gr-red-rgb),0.28), rgba(var(--gr-red-rgb),0.10));
  border: 1px solid var(--gr-glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.gr-step-ico i { background: linear-gradient(120deg,#ff8aa0,var(--gr-red-light)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gr-step h4 { color: #fff; font-weight: 700; margin-bottom: .5rem; }
.gr-step p { color: var(--gr-text-dim); margin: 0; }
@media (max-width: 767.98px) { .gr-steps-row::before { display: none; } .gr-about-media { min-height: 320px; } }

/* ---- Success stories — glossy testimonials ---- */
.gr-story-card {
  position: relative; height: 100%;
  margin: 10px; padding: 2.25rem 1.75rem 1.75rem; border-radius: 20px;
  background: linear-gradient(160deg, var(--gr-glass-strong), rgba(60,4,20,0.5));
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi);
  transition: transform .3s ease, border-color .3s ease;
}
.gr-story-card:hover { transform: translateY(-6px); border-color: rgba(var(--gr-red-rgb),0.5); }
.gr-story-quote {
  position: absolute; top: 1.1rem; right: 1.35rem; font-size: 2.4rem; line-height: 1;
  color: var(--gr-red); opacity: .35;
}
.gr-story-stars { color: #ffc93c; font-size: .95rem; letter-spacing: 2px; margin-bottom: .85rem; }
.gr-story-text { color: var(--gr-text); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; min-height: 84px; }
.gr-story-foot { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--gr-glass-border); padding-top: 1rem; }
.gr-story-ava {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.18); background: var(--gr-surface-2);
}
.gr-story-ava img { width: 100%; height: 100%; object-fit: cover; }
.gr-story-meta h5 { color: #fff; font-weight: 700; margin: 0 0 .15rem; font-size: 1rem; }
.gr-story-meta span { color: var(--gr-text-mut); font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; }
.gr-story-meta span i { color: var(--gr-red-light); }

/* ---- Facts — glossy stats band ---- */
.gr-facts-band {
  display: flex; flex-wrap: wrap; margin-top: 2rem; border-radius: 22px;
  background: var(--gr-glass);
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi);
  overflow: hidden;
}
.gr-fact {
  flex: 1 1 25%; min-width: 160px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.25rem 1rem;
  border-inline-start: 1px solid var(--gr-glass-border);
}
.gr-fact:first-child { border-inline-start: 0; }
.gr-fact-ico {
  width: 58px; height: 58px; border-radius: 16px; margin-bottom: .9rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 8px 20px rgba(var(--gr-red-rgb),0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-fact-ico-live { background: linear-gradient(135deg,#4be08a,#1f9d5b); box-shadow: 0 8px 20px rgba(40,180,110,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.gr-fact-num {
  font-size: 2.1rem; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(120deg,#fff,#ffb3c0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gr-fact-lbl { color: var(--gr-text-dim); font-size: .88rem; margin-top: .5rem; }
@media (max-width: 575.98px) {
  .gr-fact { flex-basis: 50%; }
  .gr-fact:nth-child(3) { border-inline-start: 0; }
  .gr-fact:nth-child(odd) { border-inline-start: 0; }
}

/* Home glass cards */
body.home .card, body.home .registration, body.home .card-profile, body.home .card-blog, .gr-glass-card {
  background: var(--gr-glass);
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi);
  border-radius: 18px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.home .card:hover, body.home .card-profile:hover, .gr-glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--gr-red-rgb), 0.55);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--gr-red-rgb),0.35), inset 0 1px 0 rgba(255,255,255,0.14);
}
body.home .card-profile .card-body h5 a { color: #fff; }
body.home .card-profile .card-body h5 a:hover { color: var(--gr-red-light); }

body.home .registration { background: var(--gr-glass-strong); padding: 1.75rem; }
body.home .registration h3, body.home .registration p, body.home .registration h6, body.home .registration label { color: var(--gr-text); }
body.home .registration h6 a { color: var(--gr-red-light); }
body.home .reg-form-sec { background: transparent !important; }
body.home .reg-form-sec::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(600px 400px at 10% 50%, rgba(var(--gr-red-rgb),0.18), transparent 70%);
}
body.home .reg-form-sec .container { position: relative; z-index: 1; }
body.home .registration .btn-check:checked + .btn-light {
  background: linear-gradient(135deg, var(--gr-red), var(--gr-red-deep)); color: #fff; border-color: transparent;
}

/* Sign-up section left copy column (balances the form) */
.gr-reg-copy { color: var(--gr-text); }
.gr-reg-copy .gr-check-list { margin: 1.25rem 0 1.5rem; }
.gr-reg-proof { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.gr-reg-avatars { display: flex; }
.gr-reg-ava {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gr-bg-2); background: var(--gr-surface-2);
  margin-inline-start: -12px; box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.gr-reg-ava:first-child { margin-inline-start: 0; }
.gr-reg-ava img { width: 100%; height: 100%; object-fit: cover; }
.gr-reg-proof-txt { color: var(--gr-text-dim); font-size: .92rem; }
.gr-reg-proof-txt strong { color: #fff; }

/* How it works */
body.home .works .widget {
  background: var(--gr-glass);
  border: 1px solid var(--gr-glass-border);
  border-radius: 18px; padding: 2rem 1.25rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 var(--gr-glass-hi);
  height: 100%; transition: transform .3s ease;
}
body.home .works .widget:hover { transform: translateY(-6px); }
body.home .works .widget img { filter: brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,0.45)); opacity: .92; }
body.home .works .widget h4 { color: #fff; }

/* Counters */
body.home .facts .counter h2 { color: #fff; }
body.home .counter .icon {
  background: linear-gradient(135deg, rgba(var(--gr-red-rgb),0.28), rgba(var(--gr-red-rgb),0.10)) !important;
  border: 1px solid var(--gr-glass-border);
}
body.home .counter .icon i { color: var(--gr-red-light) !important; }

/* Section headline eyebrow */
.section-headline .subtitle { letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gr-red-light) !important; }

/* Neutralise the template's light-pink Profiles background + heart pattern */
section.profiles,
[data-bs-theme=light] .profiles,
[data-bs-theme=dark] .profiles,
body.home .profiles {
  background-color: transparent !important;
  background-image: none !important;
}
body.home .profiles .balloon { display: none !important; }

/* ---- VIDEO FEATURES ---- */
.video-features { position: relative; overflow: hidden; }
.video-features::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 380px at 85% 10%, rgba(var(--gr-red-rgb),0.30), transparent 65%),
    radial-gradient(600px 360px at 0% 90%, rgba(120,0,30,0.45), transparent 65%);
}
.video-features .container { position: relative; z-index: 1; }
.video-feature-card {
  position: relative; height: 100%;
  padding: 2.5rem 1.75rem; border-radius: 22px;
  background: linear-gradient(160deg, var(--gr-glass-strong), rgba(60,4,20,0.55));
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 16px 44px rgba(0,0,0,0.5), inset 0 1px 0 var(--gr-glass-hi);
  overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.video-feature-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)); pointer-events: none;
}
.video-feature-card:hover {
  transform: translateY(-10px); border-color: rgba(var(--gr-red-rgb), 0.6);
  box-shadow: 0 26px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--gr-red-rgb),0.4), inset 0 1px 0 rgba(255,255,255,0.18);
}
.video-feature-card .vf-icon {
  width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 22px; font-size: 2.4rem; color: #fff; margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 10px 24px rgba(var(--gr-red-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.4); position: relative;
}
.video-feature-card .vf-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%);
}
.video-feature-card h3 { color: #fff; font-weight: 700; margin-bottom: .6rem; }
.video-feature-card p { color: var(--gr-text-dim); margin-bottom: 0; }
.video-feature-card .vf-badge {
  position: absolute; top: 1rem; right: 1rem; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; color: #fff;
  background: rgba(var(--gr-red-rgb),0.35); border: 1px solid var(--gr-glass-border);
}
.vf-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #ff546b; margin-inline-end: 5px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255,84,107,0.7); animation: vfPulse 1.8s infinite;
}
@keyframes vfPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,84,107,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255,84,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,84,107,0); }
}

/* ------------------------------------------------------------------ */
/* 14 · Owl carousel / misc                                           */
/* ------------------------------------------------------------------ */
body.home .owl-nav button.owl-prev, body.home .owl-nav button.owl-next {
  background: rgba(var(--gr-red-rgb), 0.3) !important; color: #fff !important; border: 1px solid var(--gr-glass-border) !important;
}
body.home .owl-dots .owl-dot.active span { background: var(--gr-red-light) !important; }
.spinner-border.text-primary { color: var(--gr-red-light) !important; }

/* ------------------------------------------------------------------ */
/* 15 · Scrollbar / selection                                         */
/* ------------------------------------------------------------------ */
::selection { background: var(--gr-red); color: #fff; }
::-moz-selection { background: var(--gr-red); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gr-bg-1); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gr-red), var(--gr-red-deep)); border-radius: 10px; }

/* ------------------------------------------------------------------ */
/* 16 · Responsive + reduced motion                                   */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .video-feature-card { padding: 2rem 1.4rem; }
  .video-feature-card .vf-icon { width: 68px; height: 68px; font-size: 2rem; }
  body.home .registration { padding: 1.4rem; }
}
@media (max-width: 575.98px) {
  .banner.intro-banner .banner_caption { font-size: 1.7rem; }
  .video-feature-card { padding: 1.6rem 1.2rem; border-radius: 18px; }
  .video-features::before { opacity: .8; }
  body.home h2.title { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  body.home .card, body.home .works .widget, .video-feature-card,
  .card, .dropdown-menu, .modal-content { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video-feature-card, .card, .btn-primary { transition: none; }
  .vf-live-dot { animation: none; }
}

/* =====================================================================
   INNER PAGES — Blog, About (CMS), Contact
   ===================================================================== */

/* Shared glossy page hero */
.gr-page-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.25rem, 4vw, 3.25rem);
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--gr-glass-border);
}
.gr-page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 320px at 20% -20%, rgba(var(--gr-red-rgb),0.34), transparent 65%),
    radial-gradient(600px 320px at 100% 0%, rgba(120,0,30,0.5), transparent 60%);
}
.gr-page-hero .container { position: relative; z-index: 1; }
.gr-page-hero .gr-eyebrow {
  display: inline-block; color: var(--gr-red-light); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; margin-bottom: .6rem;
}
.gr-page-hero h1, .gr-page-hero h2 {
  color: #fff; font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -.5px; margin: 0;
}
.gr-page-hero .gr-lead { color: var(--gr-text-dim); max-width: 620px; margin: 1rem auto 0; }
.gr-page-hero .gr-crumb { margin-top: 1rem; font-size: .85rem; color: var(--gr-text-mut); }
.gr-page-hero .gr-crumb a { color: var(--gr-red-light); }

/* Neutralise old plain title/banner wrappers so the new hero reads clean */
.page-title, .sub-banner .dark-wrapper > h2.center { display: none; }
.dark-wrapper { background: transparent !important; }

/* ---- Blog listing ---- */
.blog .container { max-width: 900px; }
.blog .card.horizontal {
  display: flex; flex-direction: row; gap: 0; margin-bottom: 1.5rem; overflow: hidden;
  background: var(--gr-glass); border: 1px solid var(--gr-glass-border); border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 var(--gr-glass-hi);
  transition: transform .3s ease, border-color .3s ease;
}
.blog .card.horizontal:hover { transform: translateY(-5px); border-color: rgba(var(--gr-red-rgb),0.5); }
.blog .card.horizontal .card-image { flex: 0 0 40%; max-width: 40%; position: relative; }
.blog .card.horizontal .card-image figure { margin: 0; height: 100%; }
.blog .card.horizontal .card-image img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.blog .card.horizontal .text-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(38,0,10,0.55); opacity: 0; transition: opacity .3s ease;
}
.blog .card.horizontal:hover .text-overlay { opacity: 1; }
.blog .card.horizontal .text-overlay .info span {
  color: #fff; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
}
.blog .card.horizontal .card-stacked { flex: 1 1 60%; display: flex; flex-direction: column; }
.blog .card.horizontal .card-content { padding: 1.5rem 1.5rem .5rem; }
.blog .card.horizontal .card-content h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.blog .card.horizontal .card-content h3 a { color: #fff; }
.blog .card.horizontal .card-content h3 a:hover { color: var(--gr-red-light); }
.blog .card.horizontal .card-content p { color: var(--gr-text-dim); }
.blog .card.horizontal .card-content p.meta { color: var(--gr-text-mut); font-size: .82rem; }
.blog .card.horizontal .card-content p.meta .date::before { content: "\2022  "; }
.blog .card.horizontal .card-action { padding: .5rem 1.5rem 1.5rem; margin-top: auto; }
.blog .card.horizontal .card-action a {
  display: inline-flex; align-items: center; gap: .35rem; color: var(--gr-red-light); font-weight: 600;
}
.blog .card.horizontal .card-action a:hover { color: #fff; }
.blog .pagination { justify-content: center; margin-top: 1rem; }
.gr-empty {
  text-align: center; padding: 3rem 1.5rem; border-radius: 20px;
  background: var(--gr-glass); border: 1px dashed var(--gr-glass-border); color: var(--gr-text-dim);
}
.gr-empty > i { font-size: 2.6rem; color: var(--gr-red-light); display: block; margin-bottom: .75rem; }
.gr-empty .btn i { font-size: inherit; display: inline; margin: 0; color: inherit; } /* keep button icons inline */
.gr-empty h4 { color: #fff; margin-bottom: .35rem; }
@media (max-width: 575.98px) {
  .blog .card.horizontal { flex-direction: column; }
  .blog .card.horizontal .card-image, .blog .card.horizontal .card-stacked { max-width: 100%; flex-basis: auto; }
}

/* ---- CMS content (About, Terms, Privacy…) ---- */
.gr-cms { max-width: 820px; margin-inline: auto; }
.gr-cms h1, .gr-cms h2, .gr-cms h3, .gr-cms h4 { color: #fff; margin: 1.75rem 0 .75rem; }
.gr-cms h2, .gr-cms h3 {
  position: relative; padding-inline-start: .9rem;
}
.gr-cms h2::before, .gr-cms h3::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 3px;
  background: linear-gradient(var(--gr-red-light), var(--gr-red-deep));
}
.gr-cms h1:empty, .gr-cms h2:empty, .gr-cms h3:empty, .gr-cms h4:empty { display: none; }
.gr-cms p, .gr-cms li { color: var(--gr-text-dim); line-height: 1.75; }
.gr-cms p:empty { display: none; }
.gr-cms ul, .gr-cms ol { padding-inline-start: 1.25rem; margin-bottom: 1rem; }
.gr-cms ul li { list-style: none; position: relative; padding-inline-start: 1.5rem; margin-bottom: .5rem; }
.gr-cms ul li::before { content: "\2665"; position: absolute; left: 0; color: var(--gr-red-light); }
.gr-cms a { color: var(--gr-red-light); text-decoration: underline; }
.gr-cms strong, .gr-cms b { color: #fff; }
.gr-cms img { max-width: 100%; border-radius: 14px; }

/* ---- Contact ---- */
.gr-contact .address-item {
  text-align: center; height: 100%;
  background: var(--gr-glass) !important; border: 1px solid var(--gr-glass-border) !important;
  border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.4), inset 0 1px 0 var(--gr-glass-hi) !important;
  transition: transform .3s ease, border-color .3s ease;
}
.gr-contact .address-item:hover { transform: translateY(-5px); border-color: rgba(var(--gr-red-rgb),0.5) !important; }
.gr-contact .address-item .card-body { padding: 2rem 1.25rem; }
.gr-contact .address-item i.material-icons {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px; margin-bottom: 1rem; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 8px 20px rgba(var(--gr-red-rgb),0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-contact .address-item p, .gr-contact .address-item a { color: var(--gr-text-dim) !important; margin: 0; }
.gr-contact .form-card { border-radius: 20px; }
.gr-contact .form-card .card-body { padding: 2rem; }
.gr-contact iframe { border-radius: 18px; border: 1px solid var(--gr-glass-border) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.45); }
.gr-contact textarea.form-control { min-height: 130px; }

/* =====================================================================
   MEMBER PROFILE CARDS (dashboard / search / lists) — photo-overlay style
   Only targets .card-profile.user (member cards), not the home grid.
   ===================================================================== */
.card.card-profile.user {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--gr-glass-border);
  background: var(--gr-surface);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card.card-profile.user:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--gr-red-rgb),0.55);
  box-shadow: 0 26px 56px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--gr-red-rgb),0.4);
}
.card.card-profile.user .card-image {
  position: relative; display: block; margin: 0; border-radius: 0; overflow: hidden;
  aspect-ratio: 1 / 1;
}
.card.card-profile.user .card-image img,
.card.card-profile.user .card-image video {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;
}
.card.card-profile.user:hover .card-image img,
.card.card-profile.user:hover .card-image video { transform: scale(1.06); }
.card.card-profile.user .card-image::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(12,0,4,0.6), transparent);
}

/* Top badges (over image) */
.card.card-profile.user .total-pic {
  position: absolute; top: .6rem; left: .6rem; z-index: 4; margin: 0;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff;
  background: rgba(12,0,4,0.55); border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(6px);
}
/* swap the broken square camera image for a crisp icon */
.card.card-profile.user .total-pic img { display: none !important; }
.card.card-profile.user .total-pic::before {
  font-family: "remixicon"; content: "\ee4a"; font-size: .85rem; line-height: 1; color: #fff;
}

/* Match-% ring — glossy dark disc + red arc (class becomes progress-batch-N after JS) */
.card.card-profile.user .progress-bar {
  position: absolute; top: .55rem; right: .55rem; z-index: 4;
  width: 46px !important; height: 46px !important; padding: 3px;
  border-radius: 50%;
  background: rgba(12,0,4,0.6) !important;
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 14px rgba(var(--gr-red-rgb),0.35), inset 0 1px 0 rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.card.card-profile.user .progress-bar svg { width: 100%; height: 100%; display: block; }
.card.card-profile.user .progress-bar svg circle:nth-of-type(1) { stroke: rgba(255,255,255,0.16) !important; }
.card.card-profile.user .progress-bar svg circle:nth-of-type(2) { stroke: var(--gr-red-light) !important; filter: drop-shadow(0 0 3px rgba(var(--gr-red-rgb),0.6)); }
.card.card-profile.user .progress-bar svg text { fill: #fff !important; font-weight: 800 !important; }

/* Glossy glass footer (name / location / actions) */
.card.card-profile.user .card-body {
  position: relative; z-index: 3;
  padding: .8rem .8rem .85rem;
  background: linear-gradient(180deg, rgba(43,7,16,0.9), rgba(24,3,10,0.96));
  border-top: 1px solid var(--gr-glass-border);
}
.card.card-profile.user .card-body h4 { margin-bottom: .2rem; font-size: 1rem; display: flex; align-items: center; }
.card.card-profile.user .card-body h4 a { color: #fff; font-weight: 700; }
.card.card-profile.user .card-body p { color: var(--gr-text-dim) !important; font-size: .8rem; margin: 0; }
.card.card-profile.user .card-body p i { color: var(--gr-red-light); }
.card.card-profile.user .km {
  background: rgba(255,255,255,0.14) !important; color: #fff !important; font-size: .68rem; padding: .1rem .5rem;
}
.card.card-profile.user .online-badge { background: #3ddc84 !important; box-shadow: 0 0 0 3px rgba(61,220,132,.25); }
.card.card-profile.user .offline-badge { background: rgba(255,255,255,.4) !important; }

/* Action bar — glossy Remix-icon buttons */
.card.card-profile.user ul.action {
  position: static !important; /* base theme hangs it at bottom:-20px */
  bottom: auto !important; inset: auto !important;
  display: flex; gap: .45rem; margin: .7rem 0 0; padding: 0; list-style: none;
}
.card.card-profile.user ul.action li { flex: 1; margin: 0; }
.card.card-profile.user ul.action li a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 40px; border-radius: 13px; padding: 0;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.card.card-profile.user ul.action li a:hover { transform: translateY(-3px); }
.card.card-profile.user ul.action li a img { display: none !important; }
.card.card-profile.user ul.action li a::before {
  font-family: "remixicon"; font-style: normal; font-weight: normal;
  font-size: 1.25rem; line-height: 1; color: #fff; content: "\eb50"; /* fallback */
}
/* Icons + colours keyed off the button's onclick action, so they work
   consistently across the dashboard AND every list view (interests,
   favourites, profile-views, matches…) whose CSS classes differ. */
.card.card-profile.user ul.action li a[onclick*="block_skip"] { background: rgba(255,255,255,0.1) !important; }
.card.card-profile.user ul.action li a[onclick*="block_skip"]::before { content: "\eb98"; color: rgba(255,255,255,.85); }
.card.card-profile.user ul.action li a[onclick*="block_skip"]:hover { background: linear-gradient(135deg,#ff7a7a,#c0392b) !important; border-color: transparent; }
/* Interest / thumbs-up (amber) — `active` = already sent */
.card.card-profile.user ul.action li a[onclick*="send_interest"],
.card.card-profile.user ul.action li a[onclick*="remove_interest"] { background: rgba(255,193,7,0.2) !important; }
.card.card-profile.user ul.action li a[onclick*="send_interest"]::before,
.card.card-profile.user ul.action li a[onclick*="remove_interest"]::before { content: "\f206"; color: #ffcf5a; }
.card.card-profile.user ul.action li a[onclick*="remove_interest"],
.card.card-profile.user ul.action li a[onclick*="send_interest"]:hover { background: linear-gradient(135deg,#ffb43b,#e08a00) !important; border-color: transparent; }
.card.card-profile.user ul.action li a[onclick*="remove_interest"]::before,
.card.card-profile.user ul.action li a[onclick*="send_interest"]:hover::before { color: #fff; }
/* Favourite — INACTIVE (add_favourite) = outline heart on a soft tint;
   ACTIVE (remove_favourite / .active) = filled white heart on solid red. */
.card.card-profile.user ul.action li a[onclick*="add_favourite"] { background: rgba(255,60,90,0.18) !important; }
.card.card-profile.user ul.action li a[onclick*="add_favourite"]::before { content: "\ee0b"; color: #ff8098; }
.card.card-profile.user ul.action li a[onclick*="remove_favourite"],
.card.card-profile.user ul.action li a.favorite.active { background: linear-gradient(135deg,#ff3b57,#b00d27) !important; border-color: transparent; }
.card.card-profile.user ul.action li a[onclick*="remove_favourite"]::before,
.card.card-profile.user ul.action li a.favorite.active::before { content: "\ee0a"; color: #fff; }
.card.card-profile.user ul.action li a[onclick*="add_favourite"]:hover { background: linear-gradient(135deg,#ff3b57,#b00d27) !important; border-color: transparent; }
.card.card-profile.user ul.action li a[onclick*="add_favourite"]:hover::before { content: "\ee0a"; color: #fff; }
/* Chat (purple) */
.card.card-profile.user ul.action li a[onclick*="openQuickChat"],
.card.card-profile.user ul.action li a[onclick*="send_quick_message"] { background: rgba(168,85,247,0.22) !important; }
.card.card-profile.user ul.action li a[onclick*="openQuickChat"]::before,
.card.card-profile.user ul.action li a[onclick*="send_quick_message"]::before { content: "\eb50"; color: #d8b4fe; }
.card.card-profile.user ul.action li a[onclick*="openQuickChat"]:hover,
.card.card-profile.user ul.action li a[onclick*="send_quick_message"]:hover { background: linear-gradient(135deg,#c084fc,#7c3aed) !important; border-color: transparent; }
.card.card-profile.user ul.action li a[onclick*="openQuickChat"]:hover::before,
.card.card-profile.user ul.action li a[onclick*="send_quick_message"]:hover::before { color: #fff; }
/* Video (green) */
.card.card-profile.user ul.action li a[onclick*="quick_video"] { background: rgba(61,220,132,0.22) !important; }
.card.card-profile.user ul.action li a[onclick*="quick_video"]::before { content: "\f287"; color: #7ef0ad; }
.card.card-profile.user ul.action li a[onclick*="quick_video"]:hover { background: linear-gradient(135deg,#4be08a,#1f9d5b) !important; border-color: transparent; }
.card.card-profile.user ul.action li a[onclick*="quick_video"]:hover::before { color: #fff; }

/* ---- Public profile match ring (#myPie) — same glossy treatment ---- */
.myPieContainer { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.myPieContainer #myPie,
.myPieContainer .pie {
  position: relative; border-radius: 50%; padding: 6px;
  background: radial-gradient(circle at 50% 42%, rgba(48,7,18,0.85), rgba(12,0,4,0.92));
  border: 1px solid var(--gr-glass-border);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 24px rgba(var(--gr-red-rgb),0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.myPieContainer #myPie svg circle:nth-of-type(1) { stroke: rgba(255,255,255,0.16) !important; }
.myPieContainer #myPie svg .pie-circle-1 { filter: drop-shadow(0 0 3px rgba(235,40,61,0.55)); }
.myPieContainer #myPie svg text,
.myPieContainer #myPie svg tspan { fill: #fff !important; font-weight: 800 !important; }
.myPieContainer .title {
  color: #fff !important; font-weight: 700; letter-spacing: .02em;
}

/* Gallery/photo count badge on the public profile, if present */
.public-profile .total-pic, .profile-header .total-pic {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff;
  background: rgba(12,0,4,0.55); border: 1px solid var(--gr-glass-border); backdrop-filter: blur(6px);
}
.public-profile .total-pic img, .profile-header .total-pic img { display: none !important; }
.public-profile .total-pic::before, .profile-header .total-pic::before {
  font-family: "remixicon"; content: "\ee4a"; font-size: .85rem; color: #fff;
}

/* ---- Coin / message plan cards ---- */
.card-plan {
  border: 1px solid var(--gr-glass-border) !important; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.42) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card-plan:hover { transform: translateY(-6px); border-color: rgba(var(--gr-red-rgb),0.5) !important; box-shadow: 0 20px 44px rgba(0,0,0,0.55) !important; }
.card-plan .card-header {
  background: linear-gradient(135deg, rgba(var(--gr-red-rgb),0.24), rgba(var(--gr-red-rgb),0.06)) !important;
  border-bottom: 1px solid var(--gr-glass-border) !important; padding: 1.1rem;
}
.card-plan .card-header h4 { color: #fff !important; letter-spacing: .06em; font-weight: 700; }
.card-plan .card-body { padding: 1.5rem; }
.card-plan .card-body .btn-primary { width: 100%; }

/* ---- Gift cards ---- */
.card-gift { background: var(--gr-glass) !important; border: 1px solid var(--gr-glass-border) !important; border-radius: 16px; overflow: hidden; transition: transform .3s ease, border-color .3s ease; }
.card-gift:hover { transform: translateY(-5px); border-color: rgba(var(--gr-red-rgb),0.5) !important; }
.card-gift .card-image {
  position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(var(--gr-red-rgb),0.06)) !important;
  min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
}
.card-gift .card-image img.gr-gift-img { max-height: 130px; width: auto; object-fit: contain; }
/* gift-type tag pill (top-left) */
.card-gift .card-image p {
  position: absolute !important; top: .6rem; left: .6rem; margin: 0 !important; z-index: 3;
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(12,0,4,0.6) !important; color: #fff !important;
  border: 1px solid var(--gr-glass-border); border-radius: 999px !important;
  padding: .2rem .65rem !important; font-size: .72rem !important; font-weight: 600;
  backdrop-filter: blur(6px); text-transform: capitalize;
}
/* graceful fallback when the gift image is missing */
.card-gift .card-image.gr-gift-empty::before {
  font-family: "remixicon"; content: "\edba"; font-size: 3.2rem; line-height: 1;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
.card-gift .card-body { padding: .8rem; }
.card-gift .card-body .avatar { width: 40px !important; height: 40px !important; object-fit: cover; }
.card-gift .card-body h5 a { color: #fff; }
.card-gift .card-body p { color: var(--gr-text-dim) !important; font-size: .8rem; }
.card-gift .card-body p i { color: var(--gr-red-light); }

/* Dashboard grid breathing room */
.dashboard-content-inner .allUser { row-gap: 1.1rem; }
@media (max-width: 575.98px) {
  .card.card-profile.user .card-body h4 { font-size: .92rem; }
  .card.card-profile.user ul.action li a { height: 36px; }
  .card.card-profile.user ul.action li a::before { font-size: 1.1rem; }
}

/* =====================================================================
   MOBILE — off-canvas menu (mmenu) + header logo dedup
   ===================================================================== */
/* mmenu panel was white with faint text — theme it dark-red & readable */
.mm-menu,
.mm-panels,
.mm-panels > .mm-panel,
.mm-panel {
  background: linear-gradient(180deg, #2b0710 0%, #16040a 100%) !important;
  color: var(--gr-text) !important;
}
.mm-navbar,
.mm-navbar__title,
.mm-navbar .mm-title,
.mm-panel__title { color: #fff !important; }
.mm-navbar { border-bottom: 1px solid var(--gr-glass-border) !important; }
.mm-listview, .mm-listview > li, .mm-listitem { border-color: var(--gr-glass-border) !important; }
.mm-listitem:after, .mm-listview > li:after { border-color: var(--gr-glass-border) !important; }
.mm-listitem__text,
.mm-listitem > a,
.mm-listitem > span,
.mm-listview a,
.mm-listview span,
.mm-menu a,
.mm-menu li > a,
.mm-menu li > span { color: var(--gr-text) !important; }
.mm-listitem > a:hover,
.mm-listitem_selected > a,
.mm-listview > li > a:hover { background: rgba(var(--gr-red-rgb),0.16) !important; color: #fff !important; }
/* chevron / open-submenu arrows */
.mm-btn:after, .mm-btn:before,
.mm-next:after, .mm-prev:before,
.mm-listitem__btn:after { border-color: var(--gr-text-dim) !important; }
.mm-listitem__btn { border-color: var(--gr-glass-border) !important; }
/* mmenu counters / badges */
.mm-counter { color: var(--gr-text-dim) !important; }
/* search field inside mmenu, if any */
.mm-search input, .mm-search { background: rgba(255,255,255,0.06) !important; color: var(--gr-text) !important; }

/* Header logo: on phones two logo-sm images showed (mobile + collapse) —
   hide the collapse variant so only one logo renders. */
@media (max-width: 575.98px) {
  #logo a.logo-collapse { display: none !important; }
}

/* =====================================================================
   MESSAGE / COIN PLANS — premium pricing layout
   ===================================================================== */
.gr-plan-head { margin-bottom: 2.5rem; }
.gr-plan-head .subtitle { color: var(--gr-red-light) !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.gr-plan-head .title { color: #fff; }
.gr-plan-head p { color: var(--gr-text-dim); }
.gr-balance {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  padding: .5rem 1.1rem; border-radius: 999px; color: var(--gr-text);
  background: var(--gr-glass); border: 1px solid var(--gr-glass-border); backdrop-filter: blur(8px);
}
.gr-balance i { color: #ffcf5a; font-size: 1.1rem; }
.gr-balance strong { color: #fff; }

.gr-plan-row { align-items: stretch; }
.gr-plan-card {
  position: relative; height: 100%; text-align: center;
  padding: 2.5rem 1.75rem 2rem; border-radius: 22px;
  background: linear-gradient(170deg, var(--gr-glass-strong), rgba(60,4,20,0.5));
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex; flex-direction: column;
}
.gr-plan-card:hover { transform: translateY(-8px); border-color: rgba(var(--gr-red-rgb),0.55); box-shadow: 0 26px 56px rgba(0,0,0,0.6); }
.gr-plan-popular {
  border-color: rgba(var(--gr-red-rgb),0.6);
  box-shadow: 0 22px 52px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--gr-red-rgb),0.4), 0 0 34px rgba(var(--gr-red-rgb),0.25);
}
@media (min-width: 992px){ .gr-plan-popular { transform: scale(1.04); } .gr-plan-popular:hover { transform: scale(1.04) translateY(-8px); } }
.gr-plan-badge {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 6px 16px rgba(var(--gr-red-rgb),0.5);
}
.gr-plan-badge i { color: #ffd76b; }
.gr-plan-icon {
  width: 68px; height: 68px; margin: 0 auto 1rem; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 10px 24px rgba(var(--gr-red-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-plan-name { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.gr-plan-price {
  font-size: 3rem; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(120deg,#fff,#ffb3c0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gr-plan-price .gr-cur { font-size: 1.5rem; vertical-align: super; margin-inline-end: 2px; }
.gr-plan-per { color: var(--gr-text-mut); font-size: .8rem; margin-top: .35rem; }
.gr-plan-credit {
  display: inline-flex; align-items: center; gap: .4rem; margin: 1.1rem auto;
  padding: .4rem .9rem; border-radius: 999px; color: var(--gr-text);
  background: rgba(var(--gr-red-rgb),0.14); border: 1px solid var(--gr-glass-border);
}
.gr-plan-credit i { color: #ffcf5a; }
.gr-plan-credit strong { color: #fff; }
.gr-plan-feats { list-style: none; padding: 0; margin: 0 0 1.5rem; text-align: start; }
.gr-plan-feats li { display: flex; align-items: center; gap: .55rem; color: var(--gr-text-dim); padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: .9rem; }
.gr-plan-feats li:last-child { border-bottom: 0; }
.gr-plan-feats li i { color: #4be08a; font-size: 1.05rem; flex: 0 0 auto; }
.gr-plan-card .d-grid { margin-top: auto; }

/* =====================================================================
   CHECKOUT — plan payment / select payment option
   ===================================================================== */
.gr-checkout-card {
  padding: 2rem 1.75rem; border-radius: 22px;
  background: linear-gradient(170deg, var(--gr-glass-strong), rgba(60,4,20,0.5));
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi);
}
.gr-checkout-title { color: #fff; font-weight: 700; font-size: 1.2rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.gr-checkout-title i { color: var(--gr-red-light); }

.gr-order-plan {
  display: flex; align-items: center; gap: .9rem; padding: 1rem;
  border-radius: 16px; background: rgba(var(--gr-red-rgb),0.10); border: 1px solid var(--gr-glass-border);
  margin-bottom: 1.25rem;
}
.gr-order-ico {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 8px 18px rgba(var(--gr-red-rgb),0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-order-plan-txt { flex: 1 1 auto; }
.gr-order-plan-txt h4 { color: #fff; margin: 0; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gr-order-plan-txt span { color: var(--gr-text-dim); font-size: .85rem; }
.gr-order-amt { color: #fff; font-weight: 800; font-size: 1.5rem; }

.gr-coupon .form-control { border-radius: 999px 0 0 999px; }
.gr-coupon .btn-warning { border-radius: 0 999px 999px 0; background: linear-gradient(135deg,#ffc93c,#e08a00); border: none; color: #3a0512; font-weight: 700; }

.gr-summary { margin-bottom: 1.5rem; }
.gr-summary-row { display: flex; justify-content: space-between; padding: .55rem 0; color: var(--gr-text-dim); border-bottom: 1px solid rgba(255,255,255,0.05); }
.gr-summary-row span:last-child { color: #fff; font-weight: 600; }
.gr-summary-total { border-top: 1px solid var(--gr-glass-border); border-bottom: 0; margin-top: .25rem; padding-top: .85rem; }
.gr-summary-total span { font-size: 1.15rem; }
.gr-summary-total span:last-child { color: var(--gr-red-light) !important; font-weight: 800; }
.discount .discount, .gr-summary-row .discount { color: #4be08a !important; }

.gr-pay-label { color: #fff; font-weight: 700; margin-bottom: .75rem; font-size: 1rem; }
.gr-paymethods { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.gr-paytile {
  position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  padding: 1.1rem .75rem; border-radius: 16px; min-height: 92px;
  background: rgba(255,255,255,0.05); border: 1.5px solid var(--gr-glass-border);
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.gr-paytile:hover { transform: translateY(-2px); border-color: rgba(var(--gr-red-rgb),0.5); }
.gr-paytile img { max-height: 30px; max-width: 90px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.gr-paytile span { color: var(--gr-text); font-size: .82rem; font-weight: 600; }
.gr-paytile .gr-check { position: absolute; top: .5rem; right: .5rem; color: var(--gr-red-light); font-size: 1.1rem; opacity: 0; transition: opacity .2s ease; }
.btn-check:checked + .gr-paytile {
  border-color: var(--gr-red); background: rgba(var(--gr-red-rgb),0.16);
  box-shadow: 0 0 0 1px rgba(var(--gr-red-rgb),0.5), 0 8px 20px rgba(var(--gr-red-rgb),0.2);
}
.btn-check:checked + .gr-paytile .gr-check { opacity: 1; }

.gr-secure-note { text-align: center; color: var(--gr-text-mut); font-size: .82rem; margin-bottom: .75rem; }
.gr-secure-note i { color: #4be08a; }
.gr-cards { text-align: center; }
.gr-cards img { max-width: 220px; opacity: .9; }

/* Gift checkout extras */
.gr-paymethods-3 { grid-template-columns: repeat(3, 1fr); }
.gr-paymethods-3 .gr-paytile { min-height: 84px; padding: .9rem .4rem; }
.gr-order-gift { background: rgba(255,255,255,0.06) !important; padding: 5px; overflow: hidden; }
.gr-order-gift img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.gr-order-ico.gr-gift-fallback::before {
  font-family: "remixicon"; content: "\edba"; font-size: 1.8rem; line-height: 1;
  background: linear-gradient(135deg,#fff,#ffb3c0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gr-summary-row .text-red, .price_container.text-red { color: #ff8098 !important; }
.gr-summary-row .text-green, .price_container.text-green { color: #4be08a !important; }
.gr-paytile-disabled { opacity: .7; }
@media (max-width: 400px){ .gr-paymethods-3 .gr-paytile span { font-size: .72rem; } }

/* =====================================================================
   PAYMENT RESULT — success / failed pages
   ===================================================================== */
.gr-result {
  max-width: 560px; margin: 2rem auto; text-align: center;
  padding: 3rem 2rem 2.5rem; border-radius: 24px;
  background: linear-gradient(170deg, var(--gr-glass-strong), rgba(60,4,20,0.5));
  border: 1px solid var(--gr-glass-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 22px 54px rgba(0,0,0,0.5), inset 0 1px 0 var(--gr-glass-hi);
}
.gr-result-icon {
  width: 96px; height: 96px; margin: 0 auto 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 3rem; color: #fff; position: relative;
}
.gr-result-icon::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; z-index: -1;
  animation: grResultPulse 2s ease-out infinite;
}
.gr-result-success .gr-result-icon {
  background: linear-gradient(135deg, #4be08a, #1f9d5b);
  box-shadow: 0 12px 30px rgba(40,180,110,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-result-success .gr-result-icon::after { box-shadow: 0 0 0 0 rgba(75,224,138,0.5); }
.gr-result-failed .gr-result-icon {
  background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 12px 30px rgba(var(--gr-red-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gr-result-failed .gr-result-icon::after { box-shadow: 0 0 0 0 rgba(var(--gr-red-rgb),0.5); }
@keyframes grResultPulse { 0% { box-shadow: 0 0 0 0 rgba(75,224,138,0.45); } 70% { box-shadow: 0 0 0 24px rgba(75,224,138,0); } 100% { box-shadow: 0 0 0 0 rgba(75,224,138,0); } }
.gr-result-failed .gr-result-icon::after { animation-name: grResultPulseRed; }
@keyframes grResultPulseRed { 0% { box-shadow: 0 0 0 0 rgba(225,21,52,0.45); } 70% { box-shadow: 0 0 0 24px rgba(225,21,52,0); } 100% { box-shadow: 0 0 0 0 rgba(225,21,52,0); } }
.gr-result h2 { color: #fff; font-weight: 800; margin-bottom: .75rem; }
.gr-result p { color: var(--gr-text-dim); max-width: 440px; margin: 0 auto 1.75rem; line-height: 1.6; }
.gr-result-badge {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.25rem;
  padding: .4rem .9rem; border-radius: 999px; font-weight: 700; color: #fff;
  background: rgba(var(--gr-red-rgb),0.14); border: 1px solid var(--gr-glass-border);
}
.gr-result-badge i { color: #ffcf5a; }
.gr-result-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.gr-result-actions .btn { min-width: 180px; }
@media (prefers-reduced-motion: reduce){ .gr-result-icon::after { animation: none; } }

/* =====================================================================
   LIGHT MODE  —  header toggle sets html[data-bs-theme="light"].
   The default (unscoped) styles above are the DARK glossy-red theme;
   this block re-tints the shared surfaces/text to a clean light look
   while keeping the red brand accents.
   ===================================================================== */
:root[data-bs-theme="light"] {
  --gr-bg-1:  #fdf2f4;
  --gr-bg-2:  #ffe6ea;
  --gr-bg-3:  #ffd4dc;
  --gr-surface:      #ffffff;
  --gr-surface-2:    #fff1f3;
  --gr-glass:        rgba(255,255,255,0.74);
  --gr-glass-strong: rgba(255,255,255,0.92);
  --gr-glass-border: rgba(176,13,39,0.16);
  --gr-glass-hi:     rgba(255,255,255,0.75);
  --gr-text:     #2a0910;
  --gr-text-dim: #7a505a;
  --gr-text-mut: rgba(42,9,16,0.55);

  --ttd-body-bg: #fdf2f4; --ttd-body-bg-rgb: 253,242,244;
  --ttd-body-color: #2a0910; --ttd-body-color-rgb: 42,9,16;
  --ttd-emphasis-color: #1a0207; --ttd-emphasis-color-rgb: 26,2,7;
  --ttd-secondary-color: rgba(42,9,16,0.68);
  --ttd-secondary-bg: #ffffff;
  --ttd-tertiary-color: rgba(42,9,16,0.5);
  --ttd-tertiary-bg: #fff1f3;
  --ttd-heading-color: #2a0910;
  --ttd-border-color: rgba(176,13,39,0.16);
  --ttd-border-color-translucent: rgba(176,13,39,0.16);
  --ttd-light-bg-subtle: #fff1f3;
  --ttd-dark-bg-subtle: #fbe9ec;
  color-scheme: light;
}

/* Canvas */
:root[data-bs-theme="light"] body::before {
  background-color: var(--gr-bg-1);
  background-image:
    radial-gradient(1200px 620px at 12% -8%,  rgba(var(--gr-red-rgb),0.10), transparent 60%),
    radial-gradient(1050px 720px at 100% 2%,  rgba(255,150,170,0.20),        transparent 55%),
    linear-gradient(160deg, #fdf2f4 0%, #ffe9ed 46%, #fdf2f4 100%);
}

/* Text / headings that were forced white on dark -> dark on light */
:root[data-bs-theme="light"] h1, :root[data-bs-theme="light"] h2, :root[data-bs-theme="light"] h3,
:root[data-bs-theme="light"] h4, :root[data-bs-theme="light"] h5, :root[data-bs-theme="light"] h6,
:root[data-bs-theme="light"] .title, :root[data-bs-theme="light"] .card-title,
:root[data-bs-theme="light"] .card h1, :root[data-bs-theme="light"] .card h2, :root[data-bs-theme="light"] .card h3,
:root[data-bs-theme="light"] .card h4, :root[data-bs-theme="light"] .card h5,
:root[data-bs-theme="light"] .gr-stat-num, :root[data-bs-theme="light"] .gr-plan-name,
:root[data-bs-theme="light"] .gr-fact-num, :root[data-bs-theme="light"] .gr-checkout-title,
:root[data-bs-theme="light"] .video-feature-card h3, :root[data-bs-theme="light"] .gr-step h4,
:root[data-bs-theme="light"] .gr-trust-txt h4, :root[data-bs-theme="light"] .gr-story-meta h5,
:root[data-bs-theme="light"] .gr-order-plan-txt h4, :root[data-bs-theme="light"] .gr-order-amt,
:root[data-bs-theme="light"] .gr-result h2, :root[data-bs-theme="light"] .gr-plan-head .title,
:root[data-bs-theme="light"] .gr-summary-row span:last-child,
:root[data-bs-theme="light"] .card.card-profile.user .card-body h4 a,
:root[data-bs-theme="light"] .gr-balance strong, :root[data-bs-theme="light"] .gr-plan-credit strong,
:root[data-bs-theme="light"] .mm-navbar, :root[data-bs-theme="light"] .mm-navbar__title,
:root[data-bs-theme="light"] .mm-menu a, :root[data-bs-theme="light"] .mm-listitem__text {
  color: #2a0910 !important;
}
:root[data-bs-theme="light"] p, :root[data-bs-theme="light"] li,
:root[data-bs-theme="light"] .gr-hero-lead, :root[data-bs-theme="light"] .gr-stat-label,
:root[data-bs-theme="light"] .video-feature-card p, :root[data-bs-theme="light"] .gr-step p,
:root[data-bs-theme="light"] .card .card-body p, :root[data-bs-theme="light"] .gr-plan-feats li,
:root[data-bs-theme="light"] .card.card-profile.user .card-body p { color: var(--gr-text-dim) !important; }
:root[data-bs-theme="light"] .gr-price-per, :root[data-bs-theme="light"] .gr-plan-per,
:root[data-bs-theme="light"] .gr-secure-note, :root[data-bs-theme="light"] .gr-story-meta span { color: var(--gr-text-mut) !important; }

/* Gradient number text: swap the white->pink gradient for a red one */
:root[data-bs-theme="light"] .gr-plan-price, :root[data-bs-theme="light"] .gr-fact-num,
:root[data-bs-theme="light"] .gr-about-badge-num {
  background-image: linear-gradient(120deg, var(--gr-red-deep), var(--gr-red)) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
:root[data-bs-theme="light"] .gr-grad-text { background-image: linear-gradient(120deg,var(--gr-red),var(--gr-red-deep)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }

/* Header / footer / nav on light */
:root[data-bs-theme="light"] #header-container:not(.before-login),
:root[data-bs-theme="light"] #header-container:not(.before-login) #header {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,241,243,0.92));
  border-bottom: 1px solid var(--gr-glass-border);
}
:root[data-bs-theme="light"] #header-container #navigation > ul > li > a { color: #2a0910; }
:root[data-bs-theme="light"] footer {
  background: linear-gradient(180deg, #fff5f6, #ffe9ed) !important; color: #2a0910 !important;
  border-top: 1px solid var(--gr-glass-border);
}
:root[data-bs-theme="light"] footer p, :root[data-bs-theme="light"] footer li,
:root[data-bs-theme="light"] footer a, :root[data-bs-theme="light"] footer address { color: var(--gr-text-dim) !important; }
:root[data-bs-theme="light"] footer h3, :root[data-bs-theme="light"] footer h4, :root[data-bs-theme="light"] footer h5 { color: #2a0910 !important; }

/* Member profile card footer + gift-card footer on light */
:root[data-bs-theme="light"] .card.card-profile.user .card-body {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), #fff);
  border-top: 1px solid var(--gr-glass-border);
}
:root[data-bs-theme="light"] .card.card-profile.user { background: #fff; }

/* mmenu light */
:root[data-bs-theme="light"] .mm-menu, :root[data-bs-theme="light"] .mm-panels,
:root[data-bs-theme="light"] .mm-panel { background: linear-gradient(180deg,#ffffff,#fff1f3) !important; color:#2a0910 !important; }

/* Chat SPA stays on its own retint (dark) — leave as-is for now */

/* Inputs on light */
:root[data-bs-theme="light"] .form-control, :root[data-bs-theme="light"] .form-select {
  background-color: #ffffff; border: 1px solid var(--gr-glass-border); color: #2a0910;
}
:root[data-bs-theme="light"] .form-control::placeholder { color: var(--gr-text-mut); }

/* Hero: darken caption text handled by dark bg photo; keep readable */
:root[data-bs-theme="light"] .gr-hero-title { color: #2a0910 !important; }
:root[data-bs-theme="light"] .hero-chip { background: rgba(255,255,255,0.8); color:#2a0910; }

/* Light mode: profile-card action icons were light-on-light (invisible).
   Give the buttons subtle contrast and colour the icons for a light bg. */
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a { border-color: rgba(0,0,0,0.08); box-shadow: none; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="block_skip"] { background: rgba(0,0,0,0.05) !important; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="block_skip"]::before { color: #8a5560 !important; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="add_favourite"]::before { color: #e11534 !important; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="remove_favourite"]::before,
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a.favorite.active::before { color: #fff !important; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="send_interest"]::before,
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="remove_interest"]::before { color: #d98a00 !important; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="openQuickChat"]::before,
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="send_quick_message"]::before { color: #9333ea !important; }
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a[onclick*="quick_video"]::before { color: #1f9d5b !important; }
/* keep hover fills white-iconed */
:root[data-bs-theme="light"] .card.card-profile.user ul.action li a:hover::before { color: #fff !important; }
/* Photo-badge + match ring text stay light over the photo (unchanged), but the
   card total-pic camera icon should remain white on its dark pill */
:root[data-bs-theme="light"] .card.card-profile.user .total-pic { background: rgba(20,0,6,0.55); color:#fff; }
:root[data-bs-theme="light"] .card.card-profile.user .total-pic::before { color:#fff; }

/* Header user-menu / notification dropdown hover — was leftover magenta.
   Use a subtle red tint + proper brand-red text, readable in both modes. */
.user-menu-small-nav li > a,
.header-notifications-dropdown .user-menu-small-nav li > a { border-radius: 10px; transition: background .2s ease, color .2s ease; }
.user-menu-small-nav li > a:hover,
.user-menu-small-nav li > a:focus,
.header-notifications-content ul li a:hover,
.header-notifications-dropdown a:hover {
  color: var(--gr-red-light) !important;
  background: rgba(var(--gr-red-rgb), 0.16) !important;
}
:root[data-bs-theme="light"] .user-menu-small-nav li > a:hover,
:root[data-bs-theme="light"] .user-menu-small-nav li > a:focus,
:root[data-bs-theme="light"] .header-notifications-content ul li a:hover,
:root[data-bs-theme="light"] .header-notifications-dropdown a:hover {
  color: var(--gr-red-deep) !important;
  background: rgba(var(--gr-red-rgb), 0.10) !important;
}

/* Light mode: images that were inverted to white for the dark UI need to
   show dark again so they're visible on light surfaces. */
:root[data-bs-theme="light"] .gr-paytile img { filter: brightness(0) !important; opacity: .82; }
:root[data-bs-theme="light"] .gr-paytile .gr-check { color: var(--gr-red) !important; }
:root[data-bs-theme="light"] body.home .works .widget img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.15)) !important; opacity: 1; }
:root[data-bs-theme="light"] .btn-check:checked + .gr-paytile { background: rgba(var(--gr-red-rgb),0.10); box-shadow: 0 0 0 1px rgba(var(--gr-red-rgb),0.5), 0 8px 20px rgba(var(--gr-red-rgb),0.12); }
/* Card Details sandbox panel + summary rows readable on light */
:root[data-bs-theme="light"] .gr-order-plan { background: rgba(var(--gr-red-rgb),0.06); }

/* Header user-menu items: add horizontal padding so the rounded hover
   background doesn't clip/overlap the leading icon, and space icon<->text. */
.user-menu-small-nav li > a {
  padding: .5rem .85rem !important;
  display: flex; align-items: center;
}
.user-menu-small-nav li > a img { margin-right: 10px !important; }
.user-menu-small-nav { padding-inline: 4px; }

/* =====================================================================
   LIVE BROADCAST SHOWCASE  (home) — real playing videos in device frames
   ===================================================================== */
.gr-live { position: relative; overflow: hidden; }
.gr-live::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 400px at 85% 12%, rgba(var(--gr-red-rgb),0.28), transparent 65%),
    radial-gradient(640px 380px at 5% 92%, rgba(120,0,30,0.42), transparent 65%);
}
.gr-live .container { position: relative; z-index: 1; }
.gr-live-stage { position: relative; max-width: 940px; margin: 2.5rem auto 0; padding-right: 40px; }

/* Desktop browser-style frame */
.gr-live-window {
  border-radius: 18px; overflow: hidden;
  background: var(--gr-glass-strong); border: 1px solid var(--gr-glass-border);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--gr-red-rgb),0.12), inset 0 1px 0 var(--gr-glass-hi);
}
.gr-live-bar {
  display: flex; align-items: center; gap: .45rem; padding: .6rem .9rem;
  background: rgba(20,0,6,0.55); border-bottom: 1px solid var(--gr-glass-border);
}
.gr-live-bar span[class^="gr-live-dot-"] { width: 11px; height: 11px; border-radius: 50%; }
.gr-live-dot-r { background: #ff5f57; } .gr-live-dot-y { background: #febc2e; } .gr-live-dot-g { background: #28c840; }
.gr-live-url {
  margin-left: .8rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; color: var(--gr-text-dim); padding: .18rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--gr-glass-border);
}
.gr-live-main { position: relative; background: #000; line-height: 0; }
.gr-live-main .gr-live-vid { width: 100%; height: auto; display: block; }

/* Floating phone */
.gr-live-phone {
  position: absolute; top: 8%; right: -14px; z-index: 4;
  width: 200px; border-radius: 26px; overflow: hidden; background: #000; line-height: 0;
  border: 4px solid rgba(30,4,12,0.9);
  box-shadow: 0 34px 80px rgba(0,0,0,0.62), 0 0 0 1px rgba(var(--gr-red-rgb),0.3);
}
.gr-live-phone .gr-live-vid { width: 100%; height: auto; display: block; }
.gr-live-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 62px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.35); }

/* Feature chips under the showcase */
.gr-live-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }
.gr-live-feat {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px;
  color: var(--gr-text); font-weight: 600; font-size: .9rem;
  background: var(--gr-glass); border: 1px solid var(--gr-glass-border); backdrop-filter: blur(8px);
}
.gr-live-feat-ico {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep));
  box-shadow: 0 6px 14px rgba(var(--gr-red-rgb),0.45);
}

@media (max-width: 991.98px) {
  .gr-live-stage { padding-right: 0; max-width: 620px; }
  .gr-live-phone { position: static; width: 180px; margin: -70px auto 0; }
}
@media (max-width: 480px) {
  .gr-live-feat { font-size: .82rem; padding: .5rem .9rem; }
}

/* =====================================================================
   LIVE STREAMING FEATURE — room, chat, gifts, list cards
   ===================================================================== */
.gr-liveroom-sec { padding-top: 1.25rem; }
.gr-liveroom { display: flex; gap: 1rem; max-width: 1100px; margin: 0 auto; height: min(78vh, 760px); }
.gr-lr-stage {
  position: relative; flex: 1 1 auto; min-width: 0; border-radius: 20px; overflow: hidden;
  background: #0a0004; border: 1px solid var(--gr-glass-border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.gr-lr-video { width: 100%; height: 100%; object-fit: cover; background:#000; display:block; }
.gr-lr-stage::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(12,0,4,0.55) 0%, transparent 20%, transparent 72%, rgba(12,0,4,0.6) 100%); }
.gr-lr-top { position: absolute; top: .9rem; left: .9rem; right: .9rem; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; }
.gr-lr-host { display: flex; align-items: center; gap: .55rem; }
.gr-lr-host-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.25); }
.gr-lr-host-ava img { width: 100%; height: 100%; object-fit: cover; }
.gr-lr-host strong { color: #fff; display: block; font-size: .92rem; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.gr-lr-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: #fff;
  background: linear-gradient(135deg,#ff3b57,#b00d27); padding: .1rem .5rem; border-radius: 999px; }
.gr-lr-top-right { display: flex; align-items: center; gap: .5rem; }
.gr-lr-count { display: inline-flex; align-items: center; gap: .3rem; color: #fff; font-size: .78rem; font-weight: 700;
  background: rgba(20,0,6,0.5); border: 1px solid var(--gr-glass-border); padding: .28rem .65rem; border-radius: 999px; backdrop-filter: blur(6px); }
.gr-lr-elapsed { font-variant-numeric: tabular-nums; }
.gr-lr-elapsed i { color: var(--gr-red); }

/* Post-stream summary (ended screen) */
.gr-lr-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; max-width: 520px; margin: 1.25rem auto 1.5rem; }
.gr-lr-stat { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .85rem .5rem;
  background: var(--gr-glass); border: 1px solid var(--gr-glass-border); border-radius: 14px; }
.gr-lr-stat i { font-size: 1.25rem; color: var(--gr-red); }
.gr-lr-stat strong { font-size: 1.15rem; line-height: 1; }
.gr-lr-stat span { font-size: .72rem; opacity: .7; }
@media (max-width: 520px){ .gr-lr-summary { grid-template-columns: repeat(2, 1fr); } }
.gr-lr-leave { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color:#fff;
  background: rgba(20,0,6,0.5); border: 1px solid var(--gr-glass-border); }
.gr-lr-title { position: absolute; left: .9rem; bottom: 1rem; z-index: 3; color: #fff; font-weight: 600; max-width: 70%; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.gr-lr-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; color: var(--gr-text-dim); font-size: .95rem; }
.gr-lr-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.gr-lr-heart { position: absolute; bottom: 8%; color: #ff546b; font-size: 1.5rem; animation: grLrHeart 3s ease-out forwards; }
@keyframes grLrHeart { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px) scale(1.2); opacity: 0; } }
.gr-lr-gifttoast { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -10px); z-index: 5; opacity: 0; transition: all .3s ease;
  padding: .5rem 1rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, rgba(225,21,52,.9), rgba(176,13,39,.9)); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.gr-lr-gifttoast.show { opacity: 1; transform: translate(-50%, 0); }
.gr-lr-gifttoast-emo { font-size: 1.2rem; }

/* Side panel */
.gr-lr-side { flex: 0 0 330px; max-width: 330px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--gr-glass); border: 1px solid var(--gr-glass-border); backdrop-filter: blur(12px); }
.gr-lr-chat { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.gr-lr-msg { display: flex; gap: .55rem; align-items: flex-start; }
.gr-lr-msg-ava { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--gr-surface-2); }
.gr-lr-msg-ava img { width: 100%; height: 100%; object-fit: cover; }
.gr-lr-msg b { color: #fff; font-size: .78rem; display: block; }
.gr-lr-msg p { color: var(--gr-text-dim); font-size: .82rem; margin: 0; }
.gr-lr-msg-gift b { color: var(--gr-red-light); }
.gr-lr-msg-gift div { background: rgba(var(--gr-red-rgb),0.12); border: 1px solid var(--gr-glass-border); padding: .4rem .7rem; border-radius: 12px; color: var(--gr-text); font-size: .82rem; }
.gr-lr-gifts { display: flex; gap: .4rem; padding: .6rem .8rem; border-top: 1px solid var(--gr-glass-border); overflow-x: auto; }
.gr-lr-gift { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1.2rem; padding: .35rem .5rem;
  border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--gr-glass-border); cursor: pointer; transition: transform .2s ease; }
.gr-lr-gift:hover { transform: translateY(-3px); background: rgba(var(--gr-red-rgb),0.16); }
.gr-lr-gift span { font-size: .6rem; color: #ffcf5a; font-weight: 700; }
.gr-lr-composer { display: flex; gap: .45rem; padding: .7rem .8rem 1rem; border-top: 1px solid var(--gr-glass-border); }
.gr-lr-composer input { flex: 1 1 auto; background: rgba(255,255,255,0.06); border: 1px solid var(--gr-glass-border); border-radius: 999px; color: var(--gr-text); padding: .5rem .9rem; font-size: .84rem; }
.gr-lr-heartbtn, .gr-lr-sendbtn { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: none; color: #fff; }
.gr-lr-heartbtn { background: rgba(255,255,255,0.1); border: 1px solid var(--gr-glass-border); }
.gr-lr-heartbtn i { color: #ff546b; }
.gr-lr-sendbtn { background: linear-gradient(135deg, var(--gr-red-light), var(--gr-red-deep)); }

@media (max-width: 767.98px) {
  /* Immersive full-screen live (TikTok/Belloo style): the video fills the
     screen and the chat + gifts + composer float over the bottom. This keeps
     everything on one screen — no more chat/composer falling below the fold. */
  .gr-liveroom-sec { padding: 0; }
  .gr-liveroom-sec > .container { padding: 0; max-width: 100%; }
  .gr-liveroom {
    position: relative;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    height: calc(100vh - 62px);
    height: calc(100dvh - 62px);
    min-height: 460px;
  }
  .gr-lr-stage {
    position: absolute; inset: 0;
    height: 100%; width: 100%;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .gr-lr-stage::after {
    background: linear-gradient(180deg, rgba(12,0,4,.5) 0%, transparent 15%, transparent 45%, rgba(12,0,4,.88) 100%);
  }
  .gr-lr-title { display: none; }               /* host name already shown top-left */
  .gr-lr-top { top: .7rem; left: .7rem; right: .7rem; }
  .gr-lr-host strong { font-size: .9rem; white-space: nowrap; }
  .gr-lr-top-right { gap: .35rem; }
  .gr-lr-count { font-size: .72rem; padding: .24rem .5rem; }
  #grLiveEnd { background: rgba(255,255,255,.92); color: #b00d27; font-weight: 700; border: none; }

  /* side panel -> transparent bottom overlay */
  .gr-lr-side {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    max-width: 100%; height: auto; max-height: 62%;
    background: transparent; border: 0; border-radius: 0;
    backdrop-filter: none; padding-top: 2.5rem;
  }
  .gr-lr-chat {
    max-height: 30vh; padding: .5rem .8rem; gap: .45rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%);
            mask-image: linear-gradient(180deg, transparent 0, #000 20%);
  }
  /* messages readable over any video: white text on a soft dark chip */
  .gr-lr-msg > div { background: rgba(0,0,0,.34); padding: .28rem .55rem; border-radius: 12px; backdrop-filter: blur(2px); }
  .gr-lr-msg b { color: #fff; }
  .gr-lr-msg p { color: rgba(255,255,255,.94); }
  .gr-lr-msg-gift div { color: #fff; background: rgba(var(--gr-red-rgb),.42); }

  .gr-lr-gifts { border-top: 0; padding: .4rem .7rem; gap: .5rem; }
  .gr-lr-gift { background: rgba(0,0,0,.32); border-color: rgba(255,255,255,.2); color: #fff; }
  .gr-lr-composer { border-top: 0; padding: .5rem .8rem calc(.85rem + env(safe-area-inset-bottom)); }
  .gr-lr-composer input { background: rgba(0,0,0,.44); border-color: rgba(255,255,255,.22); color: #fff; }
  .gr-lr-composer input::placeholder { color: rgba(255,255,255,.62); }
}

/* Live list cards */
.gr-livecard { display: block; border-radius: 18px; overflow: hidden; background: var(--gr-glass); border: 1px solid var(--gr-glass-border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4); transition: transform .3s ease, border-color .3s ease; }
.gr-livecard:hover { transform: translateY(-6px); border-color: rgba(var(--gr-red-rgb),0.55); }
.gr-livecard-thumb { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--gr-surface); }
.gr-livecard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gr-livecard-thumb::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,0,4,.4), transparent 40%, rgba(12,0,4,.55)); }
.gr-livecard-badge { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 800;
  letter-spacing: .06em; color: #fff; background: linear-gradient(135deg,#ff3b57,#b00d27); padding: .18rem .55rem; border-radius: 999px; }
.gr-livecard-views { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; color: #fff;
  background: rgba(20,0,6,0.55); border: 1px solid var(--gr-glass-border); padding: .16rem .5rem; border-radius: 999px; backdrop-filter: blur(6px); }
.gr-livecard-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: rgba(var(--gr-red-rgb),0.85); box-shadow: 0 8px 22px rgba(var(--gr-red-rgb),0.5); opacity: 0; transition: opacity .25s ease; }
.gr-livecard:hover .gr-livecard-play { opacity: 1; }
.gr-livecard-body { padding: .7rem .8rem; }
.gr-livecard-body h5 { color: #fff; margin: 0 0 .15rem; font-size: .95rem; }
.gr-livecard-body p { color: var(--gr-text-dim); margin: 0; font-size: .8rem; }

/* Go Live setup card */
.gr-golive { max-width: 560px; margin: 0 auto; }
.gr-golive-card { padding: 1.75rem; border-radius: 20px; background: var(--gr-glass-strong); border: 1px solid var(--gr-glass-border);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 var(--gr-glass-hi); }
.gr-golive-label { color: #fff; font-weight: 600; margin-bottom: .4rem; display: block; }
.gr-golive-tips { list-style: none; padding: 0; margin: 1.25rem 0; }
.gr-golive-tips li { display: flex; align-items: center; gap: .5rem; color: var(--gr-text-dim); padding: .35rem 0; }
.gr-golive-tips li i { color: #4be08a; }

/* =====================================================================
   MEMBERSHIP PLANS PAGE  (.gr-mem) — glossy restyle of the existing markup
   ===================================================================== */
.gr-mem { position: relative; }
.gr-mem-hero { max-width: 640px; margin: 0 auto 2rem; }
.gr-mem-kicker { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gr-red); background:rgba(var(--gr-red-rgb),.10); border:1px solid rgba(var(--gr-red-rgb),.22);
  padding:.3rem .8rem; border-radius:999px; }
.gr-mem-title { font-size:2rem; font-weight:800; margin:.8rem 0 .4rem; }
.gr-mem-sub { color:var(--gr-text-dim); margin:0 auto; max-width:520px; }
.gr-mem-current { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; padding:.5rem 1.1rem; border-radius:999px;
  font-weight:600; color:#0f7b46; background:rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.35); }
.gr-mem-current i { color:#20c46a; }
.gr-mem-h3 { text-align:center; font-weight:700; margin:2.2rem 0 1.2rem; }

/* Tabs → pill segmented control */
.gr-mem-tabs { border:0 !important; gap:.4rem; background:var(--gr-glass); border:1px solid var(--gr-glass-border) !important;
  padding:.35rem; border-radius:999px; width:max-content; margin-inline:auto; }
.gr-mem-tabs .nav-item { margin:0; }
.gr-mem-tabs .nav-link { border:0 !important; border-radius:999px !important; padding:.5rem 1.4rem; font-weight:700; color:var(--gr-text-dim);
  background:transparent; }
.gr-mem-tabs .nav-link:hover { color:var(--gr-text); }
.gr-mem-tabs .nav-link.active { color:#fff !important; background:linear-gradient(135deg,var(--gr-red-light),var(--gr-red-deep));
  box-shadow:0 8px 20px -8px rgba(var(--gr-red-rgb),.6); }

/* Plan options → glossy cards (markup is a bootstrap .btn-group of radio labels) */
.gr-mem #myTabContent .btn-group { display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:stretch;
  align-content:flex-start; gap:1rem; justify-content:center; width:100%; }
.gr-mem #myTabContent .btn-group > .btn {
  flex:1 1 220px; max-width:300px; margin:0 !important; border-radius:20px !important; padding:1.6rem 1.2rem; height:auto;
  background:var(--gr-glass-strong) !important; border:1.5px solid var(--gr-glass-border) !important; color:var(--gr-text) !important;
  box-shadow:0 14px 34px -22px rgba(0,0,0,.5); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; text-align:center; }
.gr-mem #myTabContent .btn-group > .btn:hover { transform:translateY(-4px); border-color:rgba(var(--gr-red-rgb),.5) !important; }
.gr-mem #myTabContent .btn-group > .btn h4 { font-size:2rem; font-weight:800; margin:0 0 .1rem; color:var(--gr-text); }
.gr-mem #myTabContent .btn-group > .btn h4 .f16 { font-size:1rem; font-weight:700; color:var(--gr-red); }
.gr-mem #myTabContent .btn-group > .btn h3 { font-size:1rem; font-weight:600; margin:.2rem 0; color:var(--gr-text-dim); }
.gr-mem #myTabContent .btn-group > .btn h3 .f16 { color:var(--gr-text-mut); }
.gr-mem #myTabContent .btn-group > .btn p { font-size:.8rem; color:var(--gr-text-mut); margin:.35rem 0 0; }
.gr-mem #myTabContent .btn-check:checked + .btn {
  background:linear-gradient(160deg, rgba(var(--gr-red-rgb),.14), var(--gr-glass-strong)) !important;
  border-color:var(--gr-red) !important; box-shadow:0 18px 40px -20px rgba(var(--gr-red-rgb),.6) !important; position:relative; }
.gr-mem #myTabContent .btn-check:checked + .btn::after { content:"\ea67"; font-family:"remixicon"; position:absolute; top:.6rem; right:.7rem;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(135deg,var(--gr-red-light),var(--gr-red-deep)); color:#fff; font-size:.85rem; }
.gr-mem .expired { display:block; font-size:.72rem; color:var(--gr-red); margin-bottom:.4rem; }

/* Payment method tiles */
.gr-mem-pay .btn-group { display:inline-flex !important; flex-direction:row !important; gap:1rem; }
.gr-mem-pay .btn-group > .btn {
  margin:0 !important; border-radius:18px !important; padding:1.2rem 2rem; min-width:150px;
  background:var(--gr-glass-strong) !important; border:1.5px solid var(--gr-glass-border) !important; color:var(--gr-text) !important; }
.gr-mem-pay .btn-group > .btn i { color:var(--gr-red); }
.gr-mem-pay .btn-group > .btn p { margin:.4rem 0 0; font-weight:600; }
.gr-mem-pay .btn-check:checked + .btn { border-color:var(--gr-red) !important;
  background:linear-gradient(160deg, rgba(var(--gr-red-rgb),.14), var(--gr-glass-strong)) !important; }

/* Compare-features table */
.gr-mem .table-membership { border-collapse:separate; border-spacing:0; border-radius:16px; overflow:hidden;
  background:var(--gr-glass); border:1px solid var(--gr-glass-border); }
.gr-mem .table-membership th, .gr-mem .table-membership td { border-color:var(--gr-glass-border) !important; color:var(--gr-text);
  vertical-align:middle; }
.gr-mem .table-membership thead th { background:rgba(var(--gr-red-rgb),.10); font-weight:800; }
.gr-mem .table-membership tbody tr:nth-child(even) td { background:rgba(var(--gr-glass-hi),.4); }
.gr-mem .table-membership .text-green, .gr-mem .table-membership .bi-check-circle-fill { color:#20c46a !important; }
.gr-mem .table-membership .text-red, .gr-mem .table-membership .bi-x-circle-fill { color:rgba(var(--gr-red-rgb),.55) !important; }

@media (max-width:575.98px){
  .gr-mem-title { font-size:1.55rem; }
  .gr-mem #myTabContent .btn-group > .btn { flex-basis:100%; }
  .gr-mem-pay .btn-group { flex-wrap:wrap; }
}

/* Stripe Elements card-payment modal (membership) */
.gr-paymodal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(10,0,4,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gr-paymodal.show { display: flex; }
.gr-paymodal-card { width: 100%; max-width: 420px; background: #ffffff; color: #2a0910; border-radius: 22px; padding: 1.9rem 1.75rem;
  box-shadow: 0 34px 80px -22px rgba(0,0,0,0.65); position: relative; border: 1px solid rgba(176,13,39,0.14);
  animation: grPayIn .22s ease; }
@keyframes grPayIn { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.gr-paymodal-close { position: absolute; top: .7rem; right: 1rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: #b98b93; cursor: pointer; }
.gr-paymodal-close:hover { color: #e11534; }
.gr-paymodal-head { text-align: center; margin-bottom: 1.3rem; }
.gr-paymodal-ic { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px;
  background: linear-gradient(135deg,#ff4d68,#b00d27); color: #fff; font-size: 1.6rem; margin-bottom: .6rem; box-shadow: 0 10px 24px -10px rgba(225,21,52,.6); }
.gr-paymodal-head h4 { margin: 0; font-weight: 800; color: #1a0207; }
.gr-paymodal-head p { margin: .25rem 0 0; color: #7a505a; font-weight: 700; }
.gr-paymodal-label { display: block; font-size: .82rem; font-weight: 600; color: #7a505a; margin-bottom: .45rem; }
.gr-card-element { padding: .9rem .95rem; border: 1.5px solid rgba(176,13,39,0.18); border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.gr-card-element.StripeElement--focus { border-color: #e11534; box-shadow: 0 0 0 .2rem rgba(225,21,52,.14); }
.gr-card-element.StripeElement--invalid { border-color: #e11534; }
.gr-card-error { color: #e11534; font-size: .82rem; min-height: 1.15rem; margin: .55rem 0 .95rem; }
.gr-paymodal-secure { text-align: center; font-size: .78rem; color: #9a6b74; margin-top: .85rem; }
.gr-paymodal-secure i { color: #20c46a; }

/* =====================================================================
   Home "Profiles" tab section — infinite Owl slider of profile cards
   ===================================================================== */
.tab-content .allUser.owl-carousel { position: relative; }
/* the col cards fill their owl-item (owl controls the item width) */
.tab-content .allUser.owl-carousel .owl-item > * {
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
/* card: consistent portrait ratio + clean corners on every screen */
.tab-content .allUser .card.card-profile { height: auto; overflow: hidden; margin: 0; }
.tab-content .allUser .card.card-profile .card-image { aspect-ratio: 4 / 5; height: auto; }
.tab-content .allUser .card.card-profile .card-image .card-img-top,
.tab-content .allUser .card.card-profile .card-image video {
  width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover;
}
/* match the inner corner radius to the card so the glass bg doesn't peek at corners */
.tab-content .allUser .card.card-profile .card-image,
.tab-content .allUser .card.card-profile .card-image::before { border-radius: inherit; }

/* glossy round nav arrows (loop = always available) */
.tab-content .allUser.owl-carousel .owl-nav { margin: 0; }
.tab-content .allUser.owl-carousel .owl-nav .owl-prev,
.tab-content .allUser.owl-carousel .owl-nav .owl-next {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 6; margin: 0; padding: 0;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gr-glass-border) !important;
  background: var(--gr-glass-strong) !important; color: var(--gr-text) !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.28); transition: background .15s ease, color .15s ease;
}
.tab-content .allUser.owl-carousel .owl-nav .owl-prev { left: -10px; }
.tab-content .allUser.owl-carousel .owl-nav .owl-next { right: -10px; }
.tab-content .allUser.owl-carousel .owl-nav .owl-prev:hover,
.tab-content .allUser.owl-carousel .owl-nav .owl-next:hover { background: var(--gr-red) !important; color: #fff !important; border-color: transparent !important; }
.tab-content .allUser.owl-carousel .owl-nav .disabled { opacity: .35; }
.tab-content .allUser.owl-carousel .owl-nav .owl-prev i,
.tab-content .allUser.owl-carousel .owl-nav .owl-next i { font-size: 1.5rem; line-height: 1; }

/* Membership "Upgrade" pill (replaces the coin balance in the header) */
.ttd-upgrade-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .95rem; border-radius:999px;
  font-weight:700; font-size:.86rem; line-height:1; color:#fff !important; text-decoration:none;
  background:linear-gradient(135deg,#ff4d68,#b00d27); box-shadow:0 8px 20px -8px rgba(225,21,52,.6);
  border:1px solid rgba(255,255,255,.14); transition:transform .15s ease, box-shadow .2s ease; white-space:nowrap; }
.ttd-upgrade-pill:hover { transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(225,21,52,.7); color:#fff !important; }
.ttd-upgrade-pill i { font-size:1rem; }

/* Live nav dot */
.gr-nav-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff3b57; vertical-align:middle; margin-inline-start:2px;
  box-shadow:0 0 0 0 rgba(255,59,87,.7); animation: vfPulse 1.8s infinite; }

/* =====================================================================
   LIGHT MODE  —  LOGIN / REGISTER (auth) pages
   The base theme dresses these pages for the dark photo banner. In light
   mode we turn that heavy photo into an airy, luminous backdrop and give
   the form a crisp solid-white glossy card. Scoped to light only.
   ===================================================================== */
/* Airy backdrop: let the light rose canvas glow through the photo */
:root[data-bs-theme="light"] .banner.intro-banner .background-image-container {
  filter: brightness(1.3) saturate(0.85) contrast(0.95);
  opacity: 0.22;
}
:root[data-bs-theme="light"] .banner.intro-banner::after {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.60) 0%,
    rgba(255,238,242,0.40) 42%,
    rgba(253,242,244,0.94) 100%);
}
:root[data-bs-theme="light"] .banner.intro-banner {
  background:
    radial-gradient(1100px 560px at 8% -10%, rgba(var(--gr-red-rgb),0.12), transparent 60%),
    radial-gradient(900px 620px at 100% 0%, rgba(255,150,170,0.22), transparent 55%),
    linear-gradient(160deg, #fdf2f4 0%, #ffe9ed 50%, #fdf2f4 100%);
}

/* Hero caption: dark & readable on light, with a soft white halo */
:root[data-bs-theme="light"] .banner_caption,
:root[data-bs-theme="light"] .banner_caption.white-text,
:root[data-bs-theme="light"] .banner_caption.text-white {
  color: #2a0910 !important;
  text-shadow: 0 2px 20px rgba(255,255,255,0.85), 0 1px 0 rgba(255,255,255,0.6);
}

/* The card */
:root[data-bs-theme="light"] body.home .registration {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(176,13,39,0.12);
  border-radius: 22px;
  box-shadow:
    0 34px 74px -34px rgba(176,13,39,0.42),
    0 12px 32px -20px rgba(0,0,0,0.14);
  overflow: hidden;
}
:root[data-bs-theme="light"] body.home .registration::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #ff5b74 0%, #e11534 55%, #b00d27 100%);
}
:root[data-bs-theme="light"] body.home .registration h3 { color: #1a0207 !important; font-weight: 700; }
:root[data-bs-theme="light"] body.home .registration > .mb-3 p,
:root[data-bs-theme="light"] body.home .registration > .mb-4 p,
:root[data-bs-theme="light"] body.home .registration h6 { color: var(--gr-text-dim) !important; }
:root[data-bs-theme="light"] body.home .registration a { color: var(--gr-red); font-weight: 600; }
:root[data-bs-theme="light"] body.home .registration a:hover { color: #b00d27; }

/* Inputs */
:root[data-bs-theme="light"] body.home .registration .form-control,
:root[data-bs-theme="light"] body.home .registration .form-floating > .form-control {
  background: #ffffff;
  border: 1px solid rgba(176,13,39,0.18);
  color: #2a0910;
  box-shadow: none;
}
:root[data-bs-theme="light"] body.home .registration .form-control:focus {
  border-color: var(--gr-red);
  box-shadow: 0 0 0 0.22rem rgba(225,21,52,0.16);
}
:root[data-bs-theme="light"] body.home .registration .form-floating > label { color: #9a6b74; }
:root[data-bs-theme="light"] body.home .registration .form-control::placeholder { color: #b98b93; }

/* Segmented gender control */
:root[data-bs-theme="light"] body.home .registration .btn-check + .btn-light {
  background: #ffffff;
  border: 1px solid rgba(176,13,39,0.18);
  color: #5a2630;
  font-weight: 600;
}
:root[data-bs-theme="light"] body.home .registration .btn-check:hover + .btn-light { background: #fff1f3; }
:root[data-bs-theme="light"] body.home .registration .btn-check:checked + .btn-light {
  background: linear-gradient(180deg, #ff4d68 0%, #e11534 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 20px -10px rgba(225,21,52,0.6);
}

/* Forgot / join links row spacing already fine; keep primary button glossy red (inherited) */
:root[data-bs-theme="light"] body.home .registration .btn-primary { color: #fff; }

/* The transparent header on the auth/home pages now sits over a LIGHT banner,
   so the white wordmark disappears — swap it for the colored (dark) logo and
   keep the theme-toggle icon readable. */
:root[data-bs-theme="light"] .transparent-header .logo-light-white,
:root[data-bs-theme="light"] .home .transparent-header .logo-light-white { display: none !important; }
:root[data-bs-theme="light"] .transparent-header .logo-dark { display: block !important; }
:root[data-bs-theme="light"] .transparent-header .theme-icon-active,
:root[data-bs-theme="light"] .transparent-header #logo + * .theme-icon-active { color: #2a0910 !important; }