/* =========================================================
   PARADISE MODELS — homepage rebrand theme (preview)
   Overrides the brand palette for the homepage only.
   Background: solid #70e9ff (bright cyan)
   Elements: indigo #3a4081 + gradients for contrast
   ========================================================= */
:root{
  /* Solid brand colors */
  --purple:#3a4081;          /* primary element / button (indigo) */
  --purple2:#4b52a8;         /* lighter indigo */
  --purple3:#2ec4e6;         /* cyan accent */
  --purple-dark:#2a2f66;     /* deep indigo */
  --bg:#70e9ff;
  --bg2:#5fd8f0;
  --bg-rgb:112,233,255;      /* #70e9ff, for gradients that fade the bg to transparent */

  /* RGB components used across the stylesheet */
  --brand-rgb:58,64,129;         /* #3a4081 indigo */
  --brand2-rgb:46,196,230;       /* cyan */
  --brand-light-rgb:75,82,168;   /* indigo (kept dark for contrast on cyan bg) */
  --brand-dark-rgb:42,47,102;    /* deep indigo */
  --panel-rgb:32,38,92;          /* indigo panels (nav, cart, dropdowns) */
  --panel2-rgb:30,36,82;

  /* Gradient glow (headings) */
  --glow-light:#2a2f66;      /* deep indigo */
  --glow-mid:#3a4081;        /* indigo */

  /* Text */
  --text:#F4F9FC;
  --text-soft:rgba(244,249,252,0.78);
  --text-muted:rgba(244,249,252,0.58);

  /* Full-screen mobile menu sits directly on the bright cyan bg (no dark
     overlay behind it like the hero has), so its text needs to be dark. */
  --menu-link-color:#1a1e42;
  --menu-link-soft:rgba(26,30,66,0.65);
}

/* Solid bright-cyan page background */
body{
  background:#70e9ff;
}

/* NAV — deep indigo so the teal→cyan logo stands out */
nav{
  background:rgba(26,30,66,0.97)!important;
  border-bottom:1px solid rgba(255,255,255,0.12)!important;
}

/* Logo image in nav */
.nav-logo-img{display:inline-flex;align-items:center;margin-right:0.5rem}
.nav-logo-img img{height:40px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35))}

/* Buttons / primary gradients: indigo → cyan for contrast on cyan bg */
.nav-btn,.cart-checkout,.make-booking-btn,.submit-app-btn{
  background:linear-gradient(135deg,var(--purple-dark),var(--purple))!important;
  box-shadow:0 4px 20px rgba(var(--brand-dark-rgb),0.45)!important;
}
/* VIP Models button: light (site bg color) with dark menu-colored text */
.nav-btn-vip{
  background:#70e9ff!important;
  color:#1a1e42!important;
  box-shadow:0 4px 20px rgba(112,233,255,0.4)!important;
}
.nav-btn-vip:hover{box-shadow:0 6px 28px rgba(112,233,255,0.6)!important}

/* Section headings: solid deep indigo for contrast on cyan */
.section-title,.section-title span{
  background:none!important;-webkit-text-fill-color:initial!important;color:#2a2f66!important;
}
/* City section titles: larger, cleaner (no pin icon) for a premium look */
.section-title-city{font-size:clamp(2rem,3vw,2.6rem)!important;letter-spacing:-0.02em}

/* Section subtext readable on cyan */
.section-header .see-all{color:#2a2f66}

/* Model cards: dark menu-colored border + footer, popping off the cyan bg */
.model-card{
  background:#1a1e42!important;
  border:1px solid #1a1e42!important;
  box-shadow:0 8px 30px rgba(20,24,52,0.4)!important;
}
.model-card:hover{border-color:#1a1e42!important}
.model-card-footer{
  background:#1a1e42!important;
  border-top:1px solid rgba(255,255,255,0.08)!important;
}

/* Prices in white */
.model-rate,.model-rate span,.price-main,.price-total-val{
  color:#ffffff!important;
}

/* Hero / footer / mobile-menu buttons: dark like the menu, brand-colored labels */
.hero-btns .btn-tg,.footer-btns .btn-tg,.mobile-menu-tg-btn,
.hero-btns .btn-model-cta,.footer-btns .btn-model-cta,.mobile-menu-model-btn{
  background:#1a1e42!important;
  border:1px solid rgba(255,255,255,0.12)!important;
}
.hero-btns .btn-tg,.footer-btns .btn-tg,.mobile-menu-tg-btn{color:#29B6F6!important}
.hero-btns .btn-model-cta,.footer-btns .btn-model-cta,.mobile-menu-model-btn{color:#ffffff!important}
.hero-btns .btn-tg:hover,.footer-btns .btn-tg:hover,.mobile-menu-tg-btn:hover,
.hero-btns .btn-model-cta:hover,.footer-btns .btn-model-cta:hover,.mobile-menu-model-btn:hover{
  background:#242a54!important;
}

/* Clean, soft downward shadow (the old dark glow muddied the rounded corners) */
.hero{box-shadow:0 24px 60px rgba(42,47,102,0.28)!important}
/* Remove the dark overlay on the hero banner image */
.hero-bg::after{background:none!important}
/* Hero background video (desktop). Image stays as poster/mobile fallback. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  z-index:0;pointer-events:none;
}
/* 20% darkening over the banner — better readability & perceived quality.
   Sits above the video (z0) and below the text (z2); clipped by the hero's
   rounded corners since .hero has overflow:hidden. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,0.35);
}
/* Desktop: underlay the video with its own first frame, so there is no
   flash of the old still image before the video starts playing. */
@media(min-width:769px){
  .hero-bg{
    background-image:url('/images/hero-poster.jpg')!important;
    background-position:top center!important;
  }
}
@media(max-width:768px){
  /* Mobile: swap the desktop bg video for the purpose-shot vertical clip,
     but keep the same "full-bleed background, text overlaid on top"
     treatment as desktop — not a separate block below the text. .hero's
     height now comes from .hero-content (the only flow child left, since
     the video is position:absolute); the video stretches to match via
     inset:0, and .hero's overflow:hidden + border-radius:0 0 100px 100px
     still rounds its bottom corners exactly like the old banner image did. */
  .hero-video{display:none}
  .hero-bg{display:none}
  .hero-video-mobile{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    /* Anchored to the bottom — crop the top rather than the bottom when
       the clip's aspect ratio doesn't match the viewport. */
    object-fit:cover;object-position:center bottom;z-index:0;pointer-events:none;
  }
  /* Top-to-bottom darkening (lighter near the badge, darker by the
     buttons) instead of the desktop's flat 35% tint. */
  .hero::after{
    display:block;
    background:linear-gradient(to bottom,rgba(0,0,0,0.22) 0%,rgba(0,0,0,0.45) 45%,rgba(0,0,0,0.78) 100%)!important;
  }
  .hero-content{margin-top:0!important;background:none!important;padding-top:3rem!important;padding-bottom:4rem!important}
  /* The nav's usual bottom border reads as a stray line now that the hero
     video sits directly beneath it with no gap. */
  nav.nav-on-hero{border-bottom-color:transparent!important}
}
@media(min-width:769px){
  .hero-video-mobile{display:none}
}
/* No text shadows on hero text */
.hero-content h1,.hero-sub{text-shadow:none!important}
/* The intro paragraph's default muted/soft text color reads too low-contrast
   over the busy video banner — white instead. */
.hero-sub{color:#fff!important}
.hero-content h1 span{
  background:linear-gradient(135deg,#1a5f7a,#123a66)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}

/* FAQ section title on cyan */
.faq-section .section-title,.faq-section .section-title span{color:#2a2f66!important}

/* "See all FAQs" as a solid button like Become a Model (dark indigo, white text) */
.faq-see-all .see-all{
  background:#1a1e42!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  color:#ffffff!important;
  padding:0.65rem 1.5rem!important;font-weight:600;
}
.faq-see-all .see-all:hover{background:#242a54!important}

/* Footer: dark like the nav; buttons keep their look but get a cyan (page-bg) outline */
footer{
  background:rgba(26,30,66,0.97)!important;
  border-top:1px solid rgba(255,255,255,0.12)!important;
}
.footer-btns .btn-tg,
.footer-btns .btn-model-cta{
  border:1px solid #70e9ff!important;
}
/* Footer Blog button — dark like the others, cyan outline, white label */
.footer-btns .btn-blog{
  background:#1a1e42!important;
  border:1px solid #70e9ff!important;
  color:#ffffff!important;
}
.footer-btns .btn-blog:hover{background:#242a54!important}

/* =================== MODELS CATALOG =================== */
/* Same problem as the become-a-model form: the filter panel and its labels
   were drawn for the dark base theme and wash out on the bright cyan.
   Solid dark panel for the sidebar; anything sitting directly on the cyan
   (headings, counts, back link) flips to dark ink instead. */
.models-page-header h1{color:#2a2f66}
.models-page-header h1 span{
  background:linear-gradient(135deg,#1a5f7a,#123a66)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.models-page-header p{color:rgba(26,30,66,0.72)}
.models-page .back-btn{color:#2a2f66;border-color:rgba(26,30,66,0.25)}
.results-count{color:#2a2f66!important;font-weight:600}
.filters-sidebar{
  background:#1a1e42!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,0.12)!important;
}
.filter-title{color:#70e9ff!important}
.filter-search{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.18)!important;
}
.sort-select,.mobile-filter-toggle{
  background:#1a1e42!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,0.18)!important;
  color:var(--text)!important;
}
.sort-select option{background:#1a1e42;color:var(--text)}

/* =================== BECOME A MODEL =================== */
/* The form was built for the dark base theme — its translucent panels and
   light labels wash out completely on the bright cyan background. Give the
   panels the same solid dark treatment the model cards get, so the existing
   light-on-dark form styling reads correctly again. */
.become-header h1{color:#2a2f66}
.become-header h1 span{
  background:linear-gradient(135deg,#1a5f7a,#123a66)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.become-header p{color:rgba(26,30,66,0.72)}
.become-page .back-btn{color:#2a2f66;border-color:rgba(26,30,66,0.25)}

/* =================== FAQ =================== */
/* Shared with the homepage's embedded FAQ preview (.faq-item is the same
   class there) — the questions/answers were drawn for the dark base theme
   and wash out on the bright cyan; the heading sits directly on the cyan
   itself, so it flips to dark ink like every other page heading here. */
.faq-page h1{color:#2a2f66}
.faq-page h1 span{
  background:linear-gradient(135deg,#1a5f7a,#123a66)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.faq-page .sub{color:rgba(26,30,66,0.72)}
.faq-item{
  background:#1a1e42!important;
  border:1px solid rgba(255,255,255,0.12)!important;
}
.form-section{
  background:#1a1e42!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,0.12)!important;
}
.form-section-title{color:#70e9ff!important}
.form-field label,.rates-toggle-header{color:var(--text)!important}
.form-input,.form-select,.svc-extra-price{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.18)!important;
}
.form-select option{background:#1a1e42;color:var(--text)}
.photo-upload-area{border-color:rgba(255,255,255,0.28)!important}
.photo-upload-area:hover{border-color:#70e9ff!important}
.submit-app-btn{
  background:linear-gradient(135deg,#2a2f66,#3a4081)!important;
  box-shadow:0 6px 28px rgba(42,47,102,0.45)!important;
}

/* =================== MODEL PROFILE =================== */
/* Same problem again: the translucent info panels (stats, bio, booking
   calculator, services, map frame) were drawn for the dark base theme and
   wash out on the bright cyan. Solid dark panels; anything sitting
   directly on the cyan flips to dark ink. */
.model-detail-name{color:#2a2f66}
/* .model-bio p is NOT in the rule above: the bio sits inside .model-bio,
   which gets a solid dark panel further down, so its text needs to stay
   light (style.css's own color:var(--text-soft) already resolves to this
   theme's light --text-soft value once nothing here overrides it to the
   dark ink meant for text sitting directly on the cyan). */
/* The nationality/station line, the Languages:/Orientation: labels and the
   "Available daily…" footnote all sit directly on the cyan (not inside one
   of the dark panels below), so their inline var(--text-soft)/
   var(--text-muted) need overriding — targeted by the exact inline style JS
   writes them with. Scoped to .model-detail-info specifically. */
.model-detail-info [style*="color:var(--text-soft)"],
.model-detail-info [style*="color:var(--text-muted)"]{color:rgba(26,30,66,0.72)!important}
/* Badges (New/Top Rated/VIP) in the profile header sit directly on the
   cyan too, same as the name — their own pale accent colors (green/red/
   gold) read fine on a dark panel but wash out here, so match the same
   pill treatment as .back-btn instead: light indigo tint, dark ink text
   (cards elsewhere sit on a photo, where the original accent colors
   already have enough contrast, so left untouched there). */
.model-detail-info .badge-new,
.model-detail-info .badge-top,
.model-detail-info .badge-vip{
  background:rgba(58,64,129,0.12)!important;
  border:1px solid rgba(26,30,66,0.25)!important;
  color:#2a2f66!important;
}
.back-btn{color:#2a2f66;border-color:rgba(26,30,66,0.25)}
.stat-box,.price-calc,.model-bio,.model-map-block,
.model-detail-services{
  background:#1a1e42!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,0.12)!important;
}
.service-chip{
  /* Languages/Orientation chips sit directly on the cyan, not on a dark
     panel — same .back-btn pill treatment as the badges above: light
     indigo tint, dark ink text. The "Services Offered" list reuses this
     same class but inside .model-detail-services (a dark panel), so it
     needs the opposite — flipped back below. */
  background:rgba(58,64,129,0.12)!important;
  border:1px solid rgba(26,30,66,0.25)!important;
  color:#2a2f66!important;
}
.model-detail-services .service-chip{
  color:var(--text)!important;
  background:rgba(255,255,255,0.08)!important;
  border:1px solid rgba(255,255,255,0.18)!important;
}
.price-type-btn,.duration-btn,.extra-svc-chk{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.18)!important;
}
.price-type-btn.active,.duration-btn.active{
  background:#70e9ff!important;border-color:#70e9ff!important;color:#1a1e42!important;
}
.rv-type-btn,.bf-method{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.18)!important;
}
.rv-type-btn.active,.bf-method.active{
  background:#70e9ff!important;border-color:#70e9ff!important;color:#1a1e42!important;
}
.star-picker button{color:rgba(255,255,255,0.25)!important}
.star-picker button.active{color:#FFD700!important}
.make-booking-btn{
  background:linear-gradient(135deg,#2a2f66,#3a4081)!important;
  box-shadow:0 6px 28px rgba(42,47,102,0.45)!important;
}

/* =================== VIP PAYWALL =================== */
.vip-teaser-wrap{position:relative;min-height:360px}
.vip-teaser-grid{filter:blur(16px);pointer-events:none;user-select:none;opacity:0.85}
.vip-paywall-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:1.75rem 1.5rem;
}
.vip-paywall-card{
  background:#1a1e42;border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-sm);padding:2rem;max-width:380px;width:100%;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.vip-paywall-card .form-section-title{color:#70e9ff!important;margin-bottom:0.75rem}
.vip-paywall-card p{color:var(--text-soft)}
#vipPriceTag{color:#ffffff}

/* =================== ABOUT PAGE =================== */
/* Desktop: text sits on the left, photo bleeds in from the right, so the
   fade runs left (solid) -> right (transparent) to match. On mobile the
   text column goes full-width above/over the photo instead — flipped to
   bottom (solid) -> top (transparent) per how it actually reads on a
   real device. */
/* var(--bg)-based rather than the old hardcoded #70e9ff, so this reads
   correctly under any theme scoped onto the page (e.g. .page-about's
   deep-azure override below) without needing a separate copy of the rule
   per theme — .about-hero only ever appears on this one page. */
.about-hero{
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 38%,rgba(var(--bg-rgb),0.35) 68%,rgba(var(--bg-rgb),0) 100%),url('/images/PC.jpg') right center/cover no-repeat;
}
@media(max-width:768px){
  .about-hero{
    background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 38%,rgba(var(--bg-rgb),0.35) 68%,rgba(var(--bg-rgb),0) 100%),url('/images/PC.jpg') right center/cover no-repeat;
  }
}

/* =================== ACCOUNT PAGE =================== */
#acctLoading{color:rgba(26,30,66,0.72)!important}

/* =================== DEEP AZURE THEME + SQUARE DESIGN — SITE-WIDE ROLLOUT =================== */
/* Started as a homepage-only trial, then Julia's profile, then FAQ/About —
   now rolled out to every page via a body class set in build.js
   (buildHome/buildModelProfile/buildFaq/buildAbout/buildModels/
   buildVipModels/buildConcierge/buildEvents/buildSinlist/buildBecome/
   buildAccount/buildBlog/buildBlogPost all set one of .page-home/
   .page-model/.page-faq/.page-about/.page-models/.page-vip-models/
   .page-concierge/.page-events/.page-sinlist/.page-become/.page-account/
   .page-blog/.page-blog-post). Every page is converted.

   Everything in this section is written against body[class^="page-"] —
   every page-scoped body's class is exactly one of the names above with
   nothing else mixed in, so a starts-with match is equivalent to listing
   all nine explicitly, without the repetition. Rules for a component that
   doesn't exist on a given page (e.g. .model-card on the FAQ page) simply
   match nothing there — harmless. Genuinely page-specific content (hero,
   stat boxes, filters sidebar, etc.) still lives in each page's own block
   further down. */

/* Brand variables — identical for every page. */
body[class^="page-"]{
  --purple:#85D1EB;
  --purple2:#A3DDF0;
  --purple3:#85D1EB;
  --purple-dark:#1D505F;
  --bg:#08222B;
  --bg2:#0F3441;
  --bg-rgb:8,34,43;

  --brand-rgb:133,209,235;
  --brand2-rgb:163,221,240;
  --brand-light-rgb:133,209,235;
  --brand-dark-rgb:29,80,95;
  --panel-rgb:15,52,65;
  --panel2-rgb:22,66,79;

  --glow-light:#A3DDF0;
  --glow-mid:#85D1EB;

  --text:#E1F4FA;
  --text-soft:#8FA8B2;
  --text-muted:#6E8B96;

  /* --glass/--glass-border/etc. are declared in style.css's :root as
     rgba(var(--brand-rgb),X) — custom properties nested this way do NOT
     re-resolve through a var() redefined further down the tree (a real,
     easy-to-miss CSS quirk: substituting a derived var() uses the
     variable's value as cascaded AT ITS OWN declaring rule, not at the
     element finally consuming it). Redeclaring the derived variables
     here too, computed with literal numbers, is what actually makes every
     var(--glass)/var(--glass-border) border and panel background pick up
     the new palette — without this, they'd silently stay on the old
     violet-theme tint. */
  --glass:rgba(133,209,235,0.08);
  --glass-border:rgba(133,209,235,0.18);
  --glass-hover:rgba(133,209,235,0.15);
  --purple-glow:rgba(133,209,235,0.35);

  /* Dark bg (unlike the old bright-cyan theme), so the full-screen mobile
     menu goes back to its default light-on-dark text. */
  --menu-link-color:var(--text);
  --menu-link-soft:var(--text-soft);

  background:#08222B!important;
}

/* Nav links (Models/Locations/Concierge/Events/About Us/VIP Models): drop
   the pill shape entirely — plain text with an underline on hover instead.
   nav-cart (Booking) is deliberately excluded — it keeps its normal
   rounded-pill look (same fill/hover-outline pattern as the account
   button, which already reads correctly since --brand-rgb etc. are
   redefined above). */
body[class^="page-"] nav .nav-link,
body[class^="page-"] nav .nav-btn-vip{
  background:none!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  position:relative;
}
body[class^="page-"] nav .nav-btn-vip{color:var(--purple3)!important}
/* Underline grows from the center outward on hover, rather than just
   fading in at full width — a scaleX(0)->scaleX(1) transform on a
   full-width ::after does this for free, since the default transform
   origin is the center. */
body[class^="page-"] nav .nav-link::after,
body[class^="page-"] nav .nav-btn-vip::after{
  content:'';
  position:absolute;left:0;right:0;bottom:2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transition:transform 0.3s ease;
}
body[class^="page-"] nav .nav-link:hover::after,
body[class^="page-"] nav .nav-btn-vip:hover::after{
  transform:scaleX(1);
}
body[class^="page-"] nav{
  background:rgba(15,52,65,0.94)!important;
  border-bottom:1px solid rgba(133,209,235,0.18)!important;
}

/* Footer + its buttons, and the same Telegram/Become-a-Model buttons as
   they appear in the hero (homepage only) and the mobile full-screen menu
   (every page) — all three share the same background/border treatment.
   Footer's own .btn-tg/.btn-model-cta get a brighter border afterward,
   since the footer sits directly on the page bg and needs more contrast
   than the hero/mobile-menu variants do. */
body[class^="page-"] footer{
  background:rgba(15,52,65,0.94)!important;
  border-top:1px solid rgba(133,209,235,0.18)!important;
}
body[class^="page-"] .hero-btns .btn-tg,body[class^="page-"] .footer-btns .btn-tg,body[class^="page-"] .mobile-menu-tg-btn,
body[class^="page-"] .hero-btns .btn-model-cta,body[class^="page-"] .footer-btns .btn-model-cta,body[class^="page-"] .mobile-menu-model-btn{
  background:#0F3441!important;
  border:1px solid rgba(133,209,235,0.14)!important;
  border-radius:0!important;
}
body[class^="page-"] .hero-btns .btn-tg:hover,body[class^="page-"] .footer-btns .btn-tg:hover,body[class^="page-"] .mobile-menu-tg-btn:hover,
body[class^="page-"] .hero-btns .btn-model-cta:hover,body[class^="page-"] .footer-btns .btn-model-cta:hover,body[class^="page-"] .mobile-menu-model-btn:hover{
  background:#16424F!important;
}
body[class^="page-"] .footer-btns .btn-tg,
body[class^="page-"] .footer-btns .btn-model-cta{
  border-color:#85D1EB!important;
}
body[class^="page-"] .footer-btns .btn-blog{
  background:#0F3441!important;
  border:1px solid #85D1EB!important;
  border-radius:0!important;
  color:#fff!important;
}
body[class^="page-"] .footer-btns .btn-blog:hover{background:#16424F!important}
body[class^="page-"] .hero-btns .btn-tg:hover,body[class^="page-"] .footer-btns .btn-tg:hover,
body[class^="page-"] .hero-btns .btn-model-cta:hover,body[class^="page-"] .footer-btns .btn-model-cta:hover,
body[class^="page-"] .footer-btns .btn-blog:hover{
  border-color:var(--purple3)!important;
}

/* Back link — appears on every page except the homepage. */
body[class^="page-"] .back-btn{
  color:var(--text-soft)!important;border-color:var(--glass-border)!important;
  border-radius:0!important;
}
body[class^="page-"] .back-btn:hover{border-color:var(--purple3)!important}

/* "See all"-style CTA (About, Concierge, Events, Account, VIP paywall). No
   border at rest (solid gradient fill) — an invisible one to transition
   from is what makes the hover-outline trick work here too. */
body[class^="page-"] .submit-app-btn{
  background:linear-gradient(135deg,var(--purple-dark),var(--purple))!important;
  box-shadow:0 6px 28px rgba(var(--brand-dark-rgb),0.45)!important;
  border:1px solid transparent!important;
  border-radius:0!important;
}
body[class^="page-"] .submit-app-btn:hover{border-color:var(--purple3)!important}

/* Booking cart panel (assets/main.js renderCart) is a persistent overlay
   on every page, not page-scoped content like the rest of the form
   components below — square it universally instead of per-page, so it
   looks the same everywhere it opens. The card it sits inside
   (.booking-summary) keeps its rounded corners on purpose. */
body[class^="page-"] .bf-input,
body[class^="page-"] .bf-method{
  border-radius:0!important;
}
body[class^="page-"] .bf-method:hover{border-color:var(--purple3)!important}

/* Content panels (About, Concierge, Events, Account) — solid dark for the
   old bright-cyan theme's contrast needs; our page is already dark, so
   the default translucent glass reads right instead. */
body[class^="page-"] .form-section{
  background:var(--glass)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  border:1px solid var(--glass-border)!important;
  border-radius:0!important;
}
body[class^="page-"] .form-section-title{color:var(--purple3)!important}

/* FAQ accordion items (homepage preview + the standalone FAQ page). */
body[class^="page-"] .faq-item{
  background:#0F3441!important;
  border:1px solid rgba(133,209,235,0.14)!important;
  border-radius:0!important;
}
body[class^="page-"] .faq-item:hover{border-color:var(--purple3)!important}
body[class^="page-"] .faq-see-all .see-all{
  background:#0F3441!important;
  border:1px solid rgba(133,209,235,0.14)!important;
  border-radius:0!important;
}
body[class^="page-"] .faq-see-all .see-all:hover{
  background:#16424F!important;border-color:var(--purple3)!important;
}

/* Model cards (homepage city rows, /models/ catalog, VIP teaser/unlocked
   grids) + the Info button on them. */
body[class^="page-"] .model-card{
  background:#0F3441!important;
  border:1px solid #0F3441!important;
  box-shadow:0 8px 30px rgba(2,12,16,0.5)!important;
  border-radius:0!important;
}
body[class^="page-"] .model-card:hover{border-color:var(--purple3)!important}
body[class^="page-"] .model-card-footer{
  background:#0F3441!important;
  border-top:1px solid rgba(133,209,235,0.12)!important;
}
body[class^="page-"] .add-to-cart-btn{border:1px solid transparent!important;border-radius:0!important}
body[class^="page-"] .add-to-cart-btn:hover{border-color:var(--purple3)!important}
body[class^="page-"] .see-all{border-radius:0!important}
body[class^="page-"] .see-all:hover{border-color:var(--purple3)!important}
/* Placeholder (no-photo) cards still carried the old purple/indigo
   rebrand gradient, which clashes with the new palette — flat accent tint
   matching the account button's own background instead. */
body[class^="page-"] .model-card-img[style*="linear-gradient(160deg,#242a54"]{
  background:rgba(var(--brand-rgb),0.12)!important;
}

/* Booking-panel toggle buttons (model profile pages, and the Account
   page's Sign In/Create Account tabs, which reuse .bf-method). */
body[class^="page-"] .price-type-btn.active,
body[class^="page-"] .duration-btn.active,
body[class^="page-"] .rv-type-btn.active,
body[class^="page-"] .bf-method.active{
  background:var(--purple3)!important;border-color:var(--purple3)!important;color:#08222B!important;
}
body[class^="page-"] .make-booking-btn{
  background:linear-gradient(135deg,var(--purple-dark),var(--purple))!important;
  box-shadow:0 6px 28px rgba(var(--brand-dark-rgb),0.45)!important;
  border:1px solid transparent!important;
  border-radius:0!important;
}
body[class^="page-"] .make-booking-btn:hover{border-color:var(--purple3)!important}

body[class^="page-"] .age-modal-text,body[class^="page-"] .age-modal-list{color:rgba(225,244,250,0.82)!important}

/* =================== LEXEND FONT ROLLOUT =================== */
/* Approved site-wide (started as a homepage-only trial, then rolled on
   page by page) — every page carries a body[class^="page-"] class (see
   the deep-azure rollout above), so now that every page has Lexend too
   this can just match the same wildcard rather than listing each class.
   A blunt wildcard + !important because most components hardcode
   font-family:'Zalando Sans' directly rather than inheriting from body,
   so a body-level-only override wouldn't reach them. */
body[class^="page-"],body[class^="page-"] *{font-family:'Lexend',sans-serif!important}

/* =================== HOMEPAGE — content unique to this page =================== */
/* Palette/nav/footer/model-card/faq-item/back-btn etc. are all handled by
   the universal body[class^="page-"] rules above. Only the homepage's own
   hero and section-title gradients are specific to .page-home. */
.page-home .hero,.page-home .hero-bg{border-radius:0!important}
.page-home .hero{box-shadow:0 24px 60px rgba(2,12,16,0.5)!important}
.page-home .hero-content h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-home .section-title,
.page-home .section-title span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-home .section-header .see-all{color:var(--purple3)!important}
.page-home .faq-section .section-title,
.page-home .faq-section .section-title span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}

/* =================== MODEL PROFILE TEMPLATE — content unique to this page =================== */
/* Palette/nav/footer/back-btn/model-card etc. are all handled by the
   universal rules above. This page's own content — stats, bio, booking
   calculator, services — still needs its old bright-cyan-theme overrides
   undone: dark-ink text/badges meant to sit on bright cyan (wrong on a
   dark bg), and solid dark panels reverted to translucent glass (which
   only washed out against the OLD bright bg, not this one). */
.page-model .model-detail-name{color:var(--text)!important}

/* Nationality/station line, Languages:/Orientation: labels, the "Available
   24/7" footnote all sit directly on the page bg, not inside one of the
   panels below, so the cyan-theme's dark-ink override (targeted by the
   exact inline style JS writes them with) needs undoing back to the
   (now light) CSS variables. */
.page-model .model-detail-info [style*="color:var(--text-soft)"]{color:var(--text-soft)!important}
.page-model .model-detail-info [style*="color:var(--text-muted)"]{color:var(--text-muted)!important}

/* Badges and the Languages/Orientation chips also sit directly on the page
   bg — restore their natural (semantic / accent) colors instead of the
   dark-ink-on-light-tint pill the cyan theme needed for contrast there. */
.page-model .model-detail-info .badge-new{background:rgba(160,224,128,0.2)!important;border:1px solid rgba(160,224,128,0.4)!important;color:#A0E080!important}
.page-model .model-detail-info .badge-top{background:rgba(255,100,100,0.15)!important;border:1px solid rgba(255,100,100,0.3)!important;color:#FF7070!important}
.page-model .model-detail-info .badge-vip{background:rgba(255,215,0,0.15)!important;border:1px solid rgba(255,215,0,0.35)!important;color:#FFD700!important}
.page-model .service-chip{
  background:rgba(var(--brand-rgb),0.15)!important;
  border:1px solid rgba(var(--brand-light-rgb),0.2)!important;
  color:var(--purple3)!important;
  border-radius:0!important;
}

.page-model .detail-gallery,
.page-model .stat-box,
.page-model .price-calc,
.page-model .model-bio,
.page-model .model-map-block,
.page-model .model-detail-services,
.page-model .price-type-btn,
.page-model .duration-btn,
.page-model .rv-type-btn{
  border-radius:0!important;
}
.page-model .price-type-btn:not(:disabled):hover,
.page-model .duration-btn:hover,
.page-model .rv-type-btn:hover{
  border-color:var(--purple3)!important;
}
.page-model .stat-box,
.page-model .price-calc,
.page-model .model-bio,
.page-model .model-map-block,
.page-model .model-detail-services{
  background:var(--glass)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  border:1px solid var(--glass-border)!important;
}

/* =================== FAQ PAGE — content unique to this page =================== */
/* Palette/nav/footer/back-btn/faq-item etc. are all handled by the
   universal rules above. Only the heading/sub sit directly on the page
   bg (not inside a panel), so they're all that's left here. */
.page-faq h1{color:var(--text)!important}
.page-faq h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-faq .sub{color:var(--text-soft)!important}

/* =================== ABOUT PAGE — content unique to this page =================== */
/* Palette/nav/footer/back-btn/form-section/submit-app-btn etc. are all
   handled by the universal rules above. Only the model teaser grid's
   hover-outline (its own component, not shared with anything else) is
   specific to this page. */
.page-about .about-teaser-grid a{border:1px solid transparent;border-radius:0!important}
.page-about .about-teaser-grid a:hover{border-color:var(--purple3)}

/* =================== MODELS CATALOG PAGE — content unique to this page =================== */
/* Palette/nav/footer/back-btn/model-card/see-all etc. are all handled by
   the universal rules above. The heading, results count, and filters
   sidebar (with its own child components) are unique to this page. */
.page-models .models-page-header h1{color:var(--text)!important}
.page-models .models-page-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-models .models-page-header p{color:var(--text-soft)!important}
.page-models .results-count{color:var(--text-soft)!important}
.page-models .filters-sidebar{
  background:var(--glass)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
  border:1px solid var(--glass-border)!important;
  border-radius:0!important;
}
.page-models .filter-title{color:var(--purple3)!important}
.page-models .filter-chip,
.page-models .sort-select,.page-models .mobile-filter-toggle,.page-models .clear-filters{
  border-radius:0!important;
}
/* The inset scroll area reads better with a touch of rounding — sharp
   corners on a recessed panel looked harsher than intended next to the
   fully square sidebar/chips around it. */
.page-models .filter-list{border-radius:8px!important}
.page-models .sort-select,.page-models .mobile-filter-toggle{
  background:#0F3441!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text)!important;
}
.page-models .sort-select option{background:#0F3441;color:var(--text)}
.page-models .vip-catalog-cta{
  display:block;text-align:center;margin-top:1.75rem;padding:1.5rem;
  background:rgba(var(--brand-rgb),0.08);
  border:1px solid var(--glass-border);
  border-radius:0;
  color:var(--purple3);font-weight:600;font-size:15px;
  text-decoration:none;transition:all 0.25s;
}
.page-models .vip-catalog-cta:hover{background:rgba(var(--brand-rgb),0.18);border-color:var(--purple3)}

/* =================== VIP MODELS PAGE — content unique to this page =================== */
/* Palette/nav/footer/back-btn/model-card/submit-app-btn etc. are all
   handled by the universal rules above. The heading and the paywall card
   over the blurred teaser grid are unique to this page. */
.page-vip-models .models-page-header h1{color:var(--text)!important}
.page-vip-models .models-page-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-vip-models .models-page-header p{color:var(--text-soft)!important}
/* Also applies on .page-model — a VIP model's own profile shows this
   same locked-notice card when the visitor isn't paid. Solid (not
   --glass) on purpose: this sits over the busy blurred teaser photos
   behind it, and --glass's 8% tint left it washed-out and hard to read
   there. */
.page-vip-models .vip-paywall-card,
.page-model .vip-paywall-card{
  background:rgba(var(--panel-rgb),0.97)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  border:1px solid var(--glass-border)!important;
  border-radius:0!important;
}
.page-vip-models .vip-paywall-card .form-section-title,
.page-model .vip-paywall-card .form-section-title{color:var(--purple3)!important}

/* The unlocked catalog's filter sidebar mirrors /models/ exactly (see the
   MODELS CATALOG PAGE block above) — same rules, extended to this page. */
.page-vip-models .results-count{color:var(--text-soft)!important}
.page-vip-models .filters-sidebar{
  background:var(--glass)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
  border:1px solid var(--glass-border)!important;
  border-radius:0!important;
}
.page-vip-models .filter-title{color:var(--purple3)!important}
.page-vip-models .filter-chip,
.page-vip-models .sort-select,.page-vip-models .mobile-filter-toggle,.page-vip-models .clear-filters{
  border-radius:0!important;
}
.page-vip-models .filter-list{border-radius:8px!important}
.page-vip-models .sort-select,.page-vip-models .mobile-filter-toggle{
  background:#0F3441!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid var(--glass-border)!important;
  color:var(--text)!important;
}
.page-vip-models .sort-select option{background:#0F3441;color:var(--text)}

/* =================== CONCIERGE PAGE — content unique to this page =================== */
/* Palette/nav/footer/back-btn/form-section/submit-app-btn etc. are all
   handled by the universal rules above. Only the heading (which sits
   directly on the page bg, not inside a panel) is specific to this page. */
.page-concierge .become-header h1{color:var(--text)!important}
.page-concierge .become-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-concierge .become-header p{color:var(--text-soft)!important}

/* =================== EVENTS PAGE — content unique to this page =================== */
.page-events .become-header h1{color:var(--text)!important}
.page-events .become-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-events .become-header p{color:var(--text-soft)!important}
/* Also covers .page-sinlist — the past-event page reuses the same
   fact-grid component. */
.page-events .stat-box,
.page-sinlist .stat-box{
  border-radius:0!important;
  background:var(--glass)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  border:1px solid var(--glass-border)!important;
}

/* =================== ACCOUNT PAGE — content unique to this page =================== */
.page-account .become-header h1{color:var(--text)!important}
.page-account .become-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-account .become-header p{color:var(--text-soft)!important}
.page-account #acctLoading{color:var(--text-soft)!important}
.page-account .form-input{border-radius:0!important}

/* =================== BECOME A MODEL PAGE — content unique to this page =================== */
/* .become-header/.form-section/.form-input etc. are all shared components
   already themed correctly by the universal rules above and by the base
   (var()-driven) rules in style.css — only the heading colors and corner
   radii need a page-specific push here. */
.page-become .become-header h1{color:var(--text)!important}
.page-become .become-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
.page-become .become-header p{color:var(--text-soft)!important}
.page-become .form-input,
.page-become .form-select,
.page-become .svc-extra-price,
.page-become .btn-option,
.page-become .photo-upload-area{border-radius:0!important}
.page-become .form-select option{background:var(--bg2)!important;color:var(--text)!important}
.page-become .add-lang-btn{border-radius:0!important}
/* Old-theme fallback (line ~275) hardcodes #70e9ff on hover with
   !important, unscoped — beat it here so this page gets the deep-azure
   accent like every other hover-outline element on the site. */
.page-become .photo-upload-area:hover{border-color:var(--purple3)!important}

/* =================== BLOG PAGE — content unique to this page =================== */
/* Same .become-header pattern as Concierge/Events/Become/Account above —
   the old unscoped .become-header rules (dark ink heading, near-invisible
   lead paragraph) need beating page by page since there's no universal
   version of them. */
.page-blog .become-header h1{color:var(--text)!important}
.page-blog .become-header h1 span{
  background:linear-gradient(135deg,var(--glow-light),var(--glow-mid))!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
/* var(--text) (near-white) rather than the --text-soft grey every
   sibling page uses here — asked for specifically. */
.page-blog .become-header p{color:var(--text)!important}