/* =========================================================================
   GLOBAL DARK / LIGHT THEME  (public site shell)
   Native look of the public shell (header4/footer4 pages) is DARK.
   Light mode = html[data-gp-invert]; set by partials/global-theme.blade.php.
   Seller / buyer portals keep their own theme CSS (seller_theme.blade.php)
   and share the same localStorage key: seller-dashboard-theme.
   ========================================================================= */

html[data-gp-invert]{filter:invert(1) hue-rotate(180deg);color-scheme:light}
html[data-gp-native="dark"]:not([data-gp-invert]){color-scheme:dark}

/* Media keeps original colours (double inversion) */
html[data-gp-invert] :is(img,video,picture,iframe,canvas,embed,object,svg image,[style*="background-image"],.gp-keep-colors){
  filter:invert(1) hue-rotate(180deg);
}
/* Never double-invert nested media inside a re-inverted block */
html[data-gp-invert] :is([style*="background-image"],.gp-keep-colors) :is(img,video,picture,iframe,canvas){filter:none}

/* Logos: use the dark-text logo on light surfaces */
html[data-gp-invert][data-gp-native="dark"] :is(.brand,.footer-brand,.gp-logo) img{
  content:url('../img/logos/GFEPLUSE.png');
}

/* Public toggle button (placed in header4 .nav-actions) */
.gp-pub-theme{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;padding:0!important;cursor:pointer;flex:0 0 auto}
.gp-pub-theme svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gp-pub-theme .gp-ico-moon{display:none}
/* effective dark -> show sun (click = go light); effective light -> show moon */
html[data-theme="light"] .gp-pub-theme .gp-ico-sun{display:none}
html[data-theme="light"] .gp-pub-theme .gp-ico-moon{display:block}
@media(max-width:900px){.gp-pub-theme{width:38px;height:38px}}

/* Smooth switch (skipped for reduced motion) */
@media (prefers-reduced-motion:no-preference){
  html.gp-theme-anim,html.gp-theme-anim *{transition:background-color .25s ease,color .25s ease,border-color .25s ease!important}
}

/* Re-inverted accent elements must not animate their filter (Livewire re-renders would flicker them) */
html[data-gp-invert] .gp-keep-colors{transition:none!important}

/* Membership plan CTA buttons: readable label on the bright plan colours */
.pc-cta{color:#07121f!important;text-shadow:none!important;font-weight:800}
.pc-cta:disabled{opacity:.7}

/* =========================================================================
   MEMBERSHIP / PLAN PAGES  (subpackages, gsp-plan)  — layout + type polish
   Applies in both themes.
   ========================================================================= */

/* 1. Clear the fixed header exactly (value measured by partials/global-theme) */
.gp-h4 .gp-hero{padding-top:calc(var(--gp-nav-bottom,150px) + 20px)!important;padding-bottom:30px!important}
.gp-h4 .gsp-hero-grid{padding-top:calc(var(--gp-nav-bottom,150px) + 20px)!important;padding-bottom:44px!important}
.gp-h4 .special-plans-flow{padding-top:calc(var(--gp-nav-bottom,150px) + 24px)!important;padding-bottom:44px!important}
.gp-h4 .special-new-heading{margin-bottom:22px!important}
.gp-h4 .vt-wrap{padding:18px 16px 0!important}
.gp-h4 .plans-outer{padding:20px 16px 28px!important}
@media(max-width:720px){
  .gp-h4 .gp-hero{padding-bottom:22px!important}
  .gp-h4 .special-plans-flow{padding-top:calc(var(--gp-nav-bottom,130px) + 18px)!important}
}

/* 2. Readable type (nothing below ~11.5px) */
.gp-h4 .gp-eyebrow{font-size:.72rem}
.gp-h4 .gp-sub{font-size:1rem}
.gp-h4 .gp-pill{font-size:.76rem;padding:5px 13px}
.gp-h4 .pc-badge{font-size:.66rem}
.gp-h4 .pc-plan-tag{font-size:.68rem}
.gp-h4 .pc-title{font-size:1.12rem}
.gp-h4 .pc-sub{font-size:.8rem}
.gp-h4 .pc-price-lbl,.gp-h4 .pc-best-lbl{font-size:.62rem}
.gp-h4 .pc-price-yr{font-size:.74rem}
.gp-h4 .pc-price-mrp{font-size:.8rem}
.gp-h4 .pc-price-save{font-size:.66rem}
.gp-h4 .pc-best-txt{font-size:.8rem}
.gp-h4 .pc-divider{font-size:.64rem}
.gp-h4 .pc-feat{padding:8px 0}
.gp-h4 .pc-feat-lbl{font-size:.8rem;line-height:1.25}
.gp-h4 .pc-feat-val{font-size:.76rem}
.gp-h4 .pc-cta{font-size:.88rem;padding:13px 14px}

.gp-h4 .special-new-eyebrow{font-size:.72rem}
.gp-h4 .special-new-intro{font-size:1rem}
.gp-h4 .special-new-tag{font-size:.68rem}
.gp-h4 .special-new-sub{font-size:.84rem}
.gp-h4 .special-new-price-label{font-size:.64rem}
.gp-h4 .special-new-divider{font-size:.64rem}
.gp-h4 .special-new-card li{font-size:.8rem}
.gp-h4 .special-new-card li strong{font-size:.82rem}
.gp-h4 .special-new-feature-copy>span{font-size:.76rem}
.gp-h4 .special-new-action{font-size:.84rem;min-height:46px}

/* =========================================================================
   LIGHT MODE for plan pages.
   Colours below are written in the *source* (pre-inversion) domain:
   black  => renders white,  rgba(255,255,255,x) => renders soft dark shadow.
   ========================================================================= */
html[data-gp-invert] .gp-h4 .pc,
html[data-gp-invert] .gp-h4 .special-new-card,
html[data-gp-invert] .gp-h4 .special-plans-flow .sp-card,
html[data-gp-invert] .gp-h4 .gsp-pcard,
html[data-gp-invert] .gp-h4 .gsp-feat-card,
html[data-gp-invert] .gp-h4 .gsp-cta-strip{
  background:#000!important;
  box-shadow:0 10px 30px rgba(255,255,255,.13)!important;
}
html[data-gp-invert] .gp-h4 .pc:hover,
html[data-gp-invert] .gp-h4 .special-new-card:hover,
html[data-gp-invert] .gp-h4 .gsp-feat-card:hover{box-shadow:0 18px 44px rgba(255,255,255,.22)!important}
html[data-gp-invert] .gp-h4 .pc:not(.featured){border-color:rgba(255,255,255,.14)}
html[data-gp-invert] .gp-h4 .special-new-card ul{scrollbar-color:var(--plan-color) #000}
html[data-gp-invert] .gp-h4 .special-new-card ul::-webkit-scrollbar-track{background:#000}

/* hero bands blend into the page instead of forming a hard strip */
html[data-gp-invert] .gp-h4 .gp-hero,
html[data-gp-invert] .gp-h4 .gsp-hero{
  background:radial-gradient(820px 380px at 12% -10%,rgba(81,192,66,.10),transparent 60%),
             radial-gradient(900px 420px at 92% 10%,rgba(38,104,255,.10),transparent 60%)!important;
}

/* compare table + modals */
html[data-gp-invert] .gp-h4 .cmp-table,
html[data-gp-invert] .gp-h4 .cmp-table tbody tr.cmp-row td,
html[data-gp-invert] .gp-h4 .cmp-th-label-wrap{background:#000!important}
html[data-gp-invert] .gp-h4 .cmp-table tbody tr.cmp-row:nth-child(even) td,
html[data-gp-invert] .gp-h4 .cmp-table tfoot td{background:#07090d!important}
html[data-gp-invert] .gp-h4 .cmp-table tr.cmp-section td{background:#0b0f16!important}
html[data-gp-invert] .gp-h4 .cmp-table{box-shadow:0 18px 50px rgba(255,255,255,.14)!important}
html[data-gp-invert] .gp-h4 .apv-modal,
html[data-gp-invert] .gp-h4 .auth-modal,
html[data-gp-invert] .gp-h4 .pm-modal,
html[data-gp-invert] .gp-h4 .gpm-modal,
html[data-gp-invert] .gp-h4 .gapv-modal,
html[data-gp-invert] .gp-h4 .gauth-modal,
html[data-gp-invert] .gp-h4 .gmn-modal{background:#000!important}
html[data-gp-invert] .gp-h4 .pm-opt{background:#05070a!important}

/* "Special Plans" heading had no colour (dark-on-dark) */
.gp-h4 .special-new h1{color:#f8fafc!important}

/* =========================================================================
   LIGHT MODE — card surfaces on header4 pages (source-domain: #000 renders white)
   ========================================================================= */
html[data-gp-invert] :is(.about-mission-card,.about-timeline-card,.about-team-card,.about-cert-card,.about-checklist li,.about-cta-inner,.challenge-card,.event-card,.cat,.toolkit-col){
  background:#000!important;
  box-shadow:0 8px 26px rgba(255,255,255,.10)!important;
}