/*
Theme Name: FG4UA
Theme URI: https://freegift4ualways.com
Author: FreeGift4UAlways
Description: Custom storefront theme for FreeGift4UAlways.com, built on Easy Digital Downloads. Implements FG4UA_WEBSITE_BUILD_BRIEF_v3.
Version: 1.0.0
Text Domain: fg4ua
*/
:root{
--blue:#0E96E8; --blue-deep:#0B6FB0; --orange:#F0932B; --terracotta:#D96B2C;
--sand:#F7F1E7; --ink:#3A342C; --card:#FFFDF9; --green: rgb(22,198,12); --tocgreen:#00FF00;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--sand);color:var(--ink);font-family:'Nunito Sans',sans-serif;line-height:1.55;}
h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}
.clickable{cursor:pointer;}
a{text-decoration:none;}
/* EDD's own frontend.css applies an unscoped `img{border:none;float:left;margin:0 8px 0 0}`
reset to every ![]()
on the site -- neutralize it everywhere our own layouts rely on
img not floating (grid/flex children ignore float per spec, but plain block containers
like .cat-pod don't, and a stray float silently collapses the parent's height). */
img{float:none;}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
font-size:24px;line-height:1;display:block;}
/* HEADER — sticky. Accounts for the wp-admin-bar when a logged-in admin is viewing the front end. */
header.site-header{position:sticky;top:32px;z-index:50;background:#fff;border-bottom:1px solid #EDE6D6;}
body:not(.admin-bar) header.site-header{top:0;}
.nav-row{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:0 auto;padding:12px 24px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--blue);cursor:pointer;}
.brand img{height:40px;}
/* align-items:center (not the flex default of stretch) -- without it, the tallest nav
item (the 2-line checkout button) stretches every sibling anchor to match its height,
and their single-line text sits pinned to the TOP of that taller box instead of staying
vertically centered like before. */
nav.main-nav{display:flex;gap:8px;align-items:center;}
nav.main-nav .navlink{padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink);transition:background .15s;cursor:pointer;}
/* Darkened 2026-09-26 (was var(--sand), #F7F1E7) to match the same earth-tone beige as the
vertical promo-box sidebar (#EFE9DB) -- the site owner noticed Home/Products shared the
exact same too-light shade that the GiftCard-balance button's hover had, and asked for the
same darkening treatment here for consistency (dark ink text here doesn't have the white-on-
white contrast problem the orange button did, but this keeps both on one intentional shade
instead of the old, lighter default). */
nav.main-nav .navlink:hover{background:#EFE9DB;}
nav.main-nav .balance-btn{background:var(--orange);color:#fff;}
/* Missing its own hover override (2026-09-26 fix) -- every OTHER colored nav pill already had
one (.checkout-cta-btn, .faq-nav-btn, .member-nav-btn below), so this one alone fell through
to the generic .navlink:hover rule above, which sets the near-white --sand background --
nearly invisible white-on-white text, confirmed by the site owner's own RGB readout matching
--sand exactly. Darker than the beige promo-box shade she measured (#EFE9DB), not lighter. */
nav.main-nav .balance-btn:hover{background:#D97D1A;}
/* Sticky, always-visible checkout shortcut -- the green matches the Finance & Budgeting
category icon color per site-owner request. Two lines, same font-size/height as the
balance button so it sits evenly beside it regardless of the longer phrase. */
nav.main-nav .checkout-cta-btn{background:#3F7D5C;color:#fff;text-align:center;line-height:1.15;
display:flex;align-items:center;justify-content:center;padding:5px 16px;}
nav.main-nav .checkout-cta-btn:hover{background:#356b4d;}
nav.main-nav .faq-nav-btn{background:#0B2E5C;color:#fff;display:flex;align-items:center;
justify-content:center;padding:5px 16px;border-radius:6px;font-weight:700;}
nav.main-nav .faq-nav-btn:hover{background:#082246;}
/* Member Login / My Member Area -- added 2026-09-25 alongside the post-checkout membership
feature, the persistent entry point for a RETURNING member (the confirmation-page link only
ever helps once, right after that one checkout). Purple to stay visually distinct from the
other four nav buttons' existing colors. */
nav.main-nav .member-nav-btn{background:#7A4FC9;color:#fff;display:flex;align-items:center;
justify-content:center;padding:5px 16px;border-radius:6px;font-weight:700;
border:none;font-family:inherit;font-size:14px;}
nav.main-nav .member-nav-btn:hover{background:#63409f;}
/* 2026-09-28: toned down from a dashed-border/bold-uppercase "wireframe" look (which read as an
unfinished mockup, alongside the old technical-dimension labels fg4ua_ad() used to print) to a
plain, unobtrusive gray box -- matches how a real unfilled ad slot looks on a live site. */
.fg4ua-promo-box{border:1px solid #e2e2e2;background:#f7f7f7;color:#9a9a9a;display:flex;align-items:center;
justify-content:center;text-align:center;font-weight:400;border-radius:6px;font-size:12px;
letter-spacing:.02em;padding:8px;}
.fg4ua-promo-top{max-width:1240px;margin:14px auto 0;height:80px;}
.hero{max-width:900px;margin:0 auto;padding:30px 24px 14px;text-align:center;}
.hero h1{font-size:34px;font-weight:800;color:var(--blue-deep);margin:0;}
.page-shell{display:grid;grid-template-columns:160px 1fr 160px;gap:10px;max-width:1360px;margin:0 auto;padding:0 10px 40px;align-items:start;}
.side-rail{position:sticky;top:72px;}
.side-rail .fg4ua-promo-slot-tall{height:600px;background:#EFE9DB;border-radius:10px;color:#9a9490;padding:10px;
line-height:1.4;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:400;}
@media (max-width:1200px){.page-shell{grid-template-columns:140px 1fr 140px;}}
@media (max-width:768px){
.page-shell{grid-template-columns:1fr;}
.side-rail{position:relative;top:0;}
.side-rail .fg4ua-promo-slot-tall{height:200px;}
}
.center-col{min-width:0;max-width:1000px;margin:0 auto;}
.quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border-radius:18px;overflow:hidden;}
.quad-grid img{width:100%;display:block;object-fit:cover;}
.quad-grid .tl,.quad-grid .tr{aspect-ratio:400/430;}
.quad-grid .bl,.quad-grid .br{aspect-ratio:400/477;}
.fg4ua-promo-mid{margin-top:20px;height:90px;}
.reveal-section{margin-top:20px;}
.bullet-block{position:relative;border-radius:20px;padding:4px 10px;color:#fff;
max-height:0;opacity:0;overflow:hidden;transition:max-height 4s ease, opacity 3.5s ease;}
.bullet-block.revealed{max-height:900px;opacity:1;}
.bullet-block.blue{background:var(--blue);}
.bullet-block.green{background:var(--green);margin-top:10px;}
.lead-float{float:left;display:flex;align-items:center;gap:8px;margin:4px 10px 4px 0;}
.understand-pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);
padding:6px 12px;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;
border:3px solid transparent;transition:border-color .2s;}
.understand-pill.invalid{border-color:#ff3b3b;}
.understand-pill input[type=checkbox]{width:18px;height:18px;}
.bullet-circle{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;
justify-content:center;font-weight:800;font-size:22px;flex:0 0 40px;}
.bullet-block.blue .bullet-circle{color:var(--blue);}
.bullet-block.green .bullet-circle{color:var(--green);}
.bullet-text{font-weight:800;font-size:20px;line-height:1.45;}
.bullet-text::after{content:"";display:block;clear:both;}
.bullet-block.blue .bullet-text{font-size:16px;}
.bullet-block.green .bullet-text{font-weight:700;font-size:18px;}
/* Accounts for the sticky header when scrolling a section into view via JS. */
.bullet-block{scroll-margin-top:90px;}
/* Invisible scroll-landing points, just below each mid-content banner -- keeps the ad in
view after an auto-scroll (instead of jumping straight to the checkbox, which would
scroll the banner out of view before it's had a chance to earn an impression). */
.fg4ua-scroll-anchor{height:1px;background:transparent;scroll-margin-top:90px;}
.important-heading{text-align:center;font-style:italic;color:var(--orange);font-weight:800;
font-size:30px;margin:3px 0 2px;}
/* Sits just outside/below the green block now (not nested inside it), so the green box
itself can shrink to fit only its text. Gets its own scroll-reveal fade via footer.php's
IntersectionObserver (same .revealed class convention as .bullet-block). */
.post-green-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;
max-height:0;opacity:0;overflow:hidden;transition:max-height 4s ease, opacity 3.5s ease;}
.post-green-actions.revealed{max-height:200px;opacity:1;}
.post-green-actions .navlink{background:#fff;color:var(--blue-deep);padding:10px 18px;border-radius:999px;
font-weight:800;font-size:14px;cursor:pointer;border:2px solid var(--green);}
.section-title{font-size:24px;font-weight:800;color:var(--ink);margin:30px 0 20px;text-align:center;}
.fg4ua-faq{max-width:820px;margin:20px auto 0;}
.fg4ua-faq-item{background:var(--card);border:1px solid #EFE9DB;border-radius:14px;padding:16px 20px;margin-bottom:14px;}
.fg4ua-faq-q{font-weight:800;font-size:15.5px;color:var(--ink);margin-bottom:8px;}
.fg4ua-faq-a{font-size:14px;color:#3A342C;line-height:1.6;}
/* The mid-content banner between FAQ items otherwise inherits .fg4ua-promo-mid's own
margin-top:20px with no margin-bottom, so the gap above it (max of the previous item's
14px margin-bottom and the banner's 20px margin-top) reads larger than the gap below it
(0, since neither the banner nor the next item's top edge has any bottom/top margin there).
Matching both sides to the same 14px the FAQ items already use between each other keeps the
rhythm identical on every side, via ordinary margin collapsing between siblings. */
.fg4ua-faq .fg4ua-promo-mid{margin:14px 0;}
/* Explicit, deterministic 3-column placement -- NOT CSS column-count, which auto-balances
and reorders items unpredictably once real (variable-height) photos are in play. Each
category is hard-assigned to a column server-side (round-robin by index), so order is
always guaranteed regardless of content height. */
.cat-grid{display:flex;gap:10px;align-items:flex-start;}
.cat-grid .cat-col{flex:1 1 0;display:flex;flex-direction:column;min-width:0;}
@media (max-width:820px){
.cat-grid{flex-wrap:wrap;}
.cat-grid .cat-col{flex:1 1 45%;}
}
@media (max-width:560px){
.cat-grid .cat-col{flex:1 1 100%;}
}
.cat-pod{display:block;position:relative;margin-bottom:20px;background:var(--card);border:6px solid var(--orange);
border-radius:18px;overflow:visible;cursor:pointer;transition:transform .15s;}
/* :last-of-type (not :last-child) -- matches the last in a column
regardless of a trailing non- sibling like .fg4ua-cat-scroll-arrows below. Using
:last-child here was a real bug (caught 2026-09-23 from a screenshot): once an arrows
button got appended after the pods in the same column, the pod was no longer the column's
actual last CHILD, so this rule silently stopped matching and that pod kept its normal 20px
margin-bottom -- stacking with the arrows' own top spacing into a visibly larger gap than
every other pod-to-pod gap on the page. :last-of-type is immune to this regardless of what
gets appended after. */
.cat-col .cat-pod:last-of-type{margin-bottom:0;}
/* "Scroll down for more" nudge -- only ever appears directly above wherever a
mid-content banner already appears, same visibility condition, never shown standalone.
Condensed 2026-09-23 (site owner correction) from a 2-line stack (heading text above a
separate row of 3 arrows) into a single row: arrow, text, arrow -- the center/3rd arrow was
redundant with the per-column vertical trails above it and was cut purely to save vertical
height, with the text dropping into the slot it vacated. Restructured 2026-09-26 (site owner
correction) into 3 slots sharing .cat-grid's own flex:1 1 0 ratio and 10px gap, so slot 1's
arrow lands centered directly under column 1's pods and slot 3's arrow under column 3's,
instead of both arrows clustering next to the center text. */
.fg4ua-scroll-more{display:flex;gap:10px;align-items:center;color:var(--blue);margin:18px 0 10px;}
.fg4ua-scroll-more-slot{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;}
.fg4ua-scroll-more-heading{font-weight:800;font-size:15px;letter-spacing:.03em;text-align:center;}
.fg4ua-scroll-more .material-symbols-outlined{color:var(--blue);font-size:28px;}
/* Vertical arrow trail under the center/right category-pod columns (page-categories.php) --
a more visible ADDITION alongside the shared fg4ua-scroll-more strip above (NOT a
replacement -- both stay), added 2026-09-23 after real users twice stopped scrolling right
at this row without noticing there was more below. Clickable (button, not decorative) --
scrolls the next mid-content banner into view just under the sticky header via the same
fg4uaScrollToAnchor() helper the homepage's own section jumps already use (see footer.php).
Appended INSIDE each column's own .cat-col, right after that column's own last pod (NOT a
separate row below the whole grid -- tried that first, but columns can have different pod
counts, so a shared row wouldn't start until the TALLEST column finished, leaving a large,
wrong gap under shorter columns; a real bug caught from a screenshot the same day). Because
it's appended right there, margin-top:20px exactly matches .cat-pod's own 20px pod-to-pod
gap now that the :last-of-type fix above makes the preceding pod's own margin-bottom
reliably 0 -- "snug", not stacked/doubled. */
.fg4ua-cat-scroll-arrows{display:flex;flex-direction:column;align-items:center;gap:2px;
width:100%;margin-top:20px;background:none;border:none;padding:0;cursor:pointer;}
.fg4ua-cat-scroll-arrows .material-symbols-outlined{color:var(--blue);font-size:26px;line-height:1;}
.fg4ua-cat-scroll-arrows:hover .material-symbols-outlined{color:var(--blue-deep);}
/* Shared by every mid-content banner break on this page (there are now 2 -- fgCatMidBanner1
between tier 1/2, fgCatMidBanner2 between tier 2/3 -- and this rule covers any future one
the same way, since it targets the shared class, not a specific id). */
.fg4ua-grid-break{scroll-margin-top:90px;}
/* Matching 20px gap BELOW each mid-content banner too, before the next row of pods starts --
same "quarter inch on every side" spacing the pods already use elsewhere, now applied here
too (was 0 before, pods touched the banner directly). Deliberately margin-TOP on the pods
that follow, not margin-bottom/margin-top on the banner itself -- the banner's own position
must stay untouched since .fg4ua-grid-break's scroll-margin-top above is what the arrow
click's scroll point is measured against. */
.fg4ua-grid-break + .cat-grid{margin-top:20px;}
.cat-pod:hover{transform:translateY(-2px);}
.cat-pod-head{display:flex;align-items:center;gap:10px;padding:10px;}
.cat-icon{flex:0 0 44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;}
.cat-name{font-weight:700;font-size:15px;line-height:1.25;}
.cat-photo{width:100%;display:block;margin:0;border:none;border-radius:0 0 14px 14px;}
.cat-pod-badge{position:absolute;top:-3px;right:-3px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;z-index:2;
box-shadow:0 1px 3px rgba(0,0,0,.3);border:2px solid #fff;}
.toc-btn{display:inline-block;background:#000;color:var(--tocgreen);border:3px solid var(--orange);
border-radius:999px;padding:6px 16px;font-weight:800;font-size:14px;cursor:pointer;text-align:center;}
/* Product pod grid — CSS Grid (not column-count) so an inline ad break can span the full row. */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.prod-grid{grid-template-columns:1fr;}}
.prod-grid .fg4ua-grid-break{grid-column:1 / -1;}
/* 2026-09-26 (site owner correction): the "Scroll down for more products" strip used to be 3
arrows clustered next to the text (a stale pre-fix copy of what the category-list page had
before its own 2026-09-26 fix). Same treatment now: 3 slots sharing THIS grid's own
repeat(3,1fr)/16px-gap ratio (not .cat-grid's flex ratio, since this page uses CSS Grid) so
the left arrow lands under column 1's pods and the right arrow under column 3's. margin:0
because the grid's own 16px row gap already provides the exact "same as pod-to-pod spacing"
the site owner asked for -- the base .fg4ua-scroll-more class's 18px/10px margins would have
stacked on top of that gap and produced the "too much space" the site owner flagged. */
.prod-grid .fg4ua-scroll-more{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;}
@media (max-width:900px){.prod-grid .fg4ua-scroll-more{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.prod-grid .fg4ua-scroll-more{grid-template-columns:1fr;}}
/* Fixed-height pods (aspect-ratio, like the prototype) so the price/button footer always
sits in the same place pod-to-pod, regardless of description length. */
.prod-pod{background:var(--card);border:6px solid var(--orange);border-radius:22px;padding:2px;
display:flex;flex-direction:column;aspect-ratio:1/1;overflow:hidden;}
.prod-pod-top{display:flex;gap:8px;align-items:flex-start;height:70px;flex:0 0 70px;}
.prod-pod img.prod-thumb{width:70px;height:70px;border-radius:8px 0 0 0;object-fit:cover;flex:0 0 70px;margin:0;border:none;}
.prod-title{font-weight:700;font-size:13px;line-height:1.2;padding:4px 8px 0 0;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.prod-desc{font-size:11.5px;color:#3A342C;padding:6px 10px 0;overflow:hidden;flex:1;
display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;}
.expand-link{color:#0E96E8;font-weight:700;cursor:pointer;font-size:14px;padding:0 10px;display:block;}
.pod-footer{flex:0 0 auto;padding:6px 10px 8px;}
.pod-footer .toc-link{font-size:14px;font-weight:700;color:var(--tocgreen);background:#000;
display:inline-block;border:3px solid var(--orange);border-radius:999px;padding:6px 16px;}
/* !important: EDD's own frontend.css ships a same-or-higher-specificity .edd-submit/.button
rule that otherwise wins the cascade and renders this near-white. */
.get-now-btn{background:var(--orange) !important;color:#fff !important;border:none !important;
border-radius:999px;padding:6px 14px;font-weight:700;font-size:12px;cursor:pointer;display:inline-block;}
/* EDD's native "Added to cart" checkmark alert renders inside a fixed-height, overflow:hidden
pod footer and gets clipped out of view. We hide it entirely and show our own fixed-position
toast instead (assets/fg4ua-checkout.js watches for EDD flipping this alert visible). */
.edd-cart-ajax-alert{display:none !important;}
.fg4ua-added-toast{position:fixed;z-index:9999;background:#1a7a0e;color:#fff;font-weight:700;font-size:13px;
padding:10px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;
gap:8px;opacity:0;transform:scale(.9);transition:opacity .2s ease,transform .2s ease;pointer-events:none;
max-width:280px;line-height:1.3;}
.fg4ua-added-toast.show{opacity:1;transform:scale(1);}
.fg4ua-added-toast .fg4ua-added-check{background:#fff;color:#1a7a0e;border-radius:50%;width:18px;height:18px;
flex:0 0 18px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;}
/* Two-tone "Added to Cart" (green) / "Checkout?" (orange) button -- makes the state
change from the orange "Get This Item" button starkly noticeable. */
.edd_go_to_checkout.get-now-btn{background:none !important;padding:0 !important;overflow:hidden;}
.fg4ua-atc-half{display:inline-block;padding:6px 2px;}
.fg4ua-atc-green{background:#3F7D5C;color:#fff;border-radius:999px 0 0 999px;}
.fg4ua-atc-orange{background:var(--orange);color:#fff;border-radius:0 999px 999px 0;}
.pod-price-row{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pod-price{font-weight:800;font-size:13px;}
/* Product description pop-out modal (§1.11 — expand opens this, not an inline push-down) */
.pod-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:300;
justify-content:center;padding:4vh 20px;overflow-y:auto;}
.pod-modal-overlay.show{display:flex;}
.pod-modal{display:none;background:#FFFDF9;border:6px solid var(--orange);border-radius:22px;
width:min(720px,92vw);max-height:88vh;overflow-y:auto;padding:0;position:relative;animation:modalIn .25s ease;}
.pod-modal.show{display:block;}
@keyframes modalIn{from{transform:translateY(-16px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-close{position:sticky;top:0;float:right;margin:10px;background:#fff;border:2px solid var(--orange);
border-radius:50%;width:34px;height:34px;font-weight:800;cursor:pointer;font-size:16px;z-index:2;}
.modal-body{padding:8px 32px 20px;}
.modal-body h2{font-size:22px;margin:0 0 12px;color:var(--ink);font-family:'Poppins',sans-serif;}
.modal-body h3{font-size:18px;margin:20px 0 10px;color:var(--ink);font-family:'Poppins',sans-serif;}
.modal-body ul{padding-left:20px;margin:0;}
.modal-body ul li{margin-bottom:10px;line-height:1.5;}
.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:16px 32px;border-top:2px solid #EFE9DB;position:sticky;bottom:0;background:#FFFDF9;}
.footer-filler-row{display:flex;justify-content:space-evenly;align-items:flex-start;margin:18px 0;}
.footer-filler-row img{width:calc((100% - 20px)/3 * 0.75);aspect-ratio:640/750;object-fit:cover;
border-radius:20px;display:block;}
footer.site-footer{background:#fff;border-top:1px solid #EDE6D6;margin-top:20px;}
.fg4ua-promo-bottom{max-width:1240px;margin:14px auto;height:90px;}
.footer-links{text-align:center;padding:10px 20px 6px;font-size:13px;color:#8a8272;}
.footer-links .contact-link{color:#8a8272;cursor:pointer;}
.footer-legal{text-align:center;padding:0 20px 24px;font-size:12px;}
.footer-legal a{color:#8a8272;margin:0 10px;text-decoration:none;font-weight:700;}
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--green);color:#fff;padding:16px 24px;
display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;z-index:100;font-size:13px;font-weight:600;}
.cookie-banner button{border:none;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer;font-size:13px;}
.cookie-accept{background:var(--orange);color:#fff;}
.cookie-deny{background:#6b6455;color:#fff;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:200;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:16px;padding:28px;max-width:360px;text-align:center;}
.modal-box h3{margin-top:0;color:var(--blue-deep);}
.modal-box button{margin:6px;padding:10px 20px;border-radius:999px;border:none;font-weight:700;cursor:pointer;}
.modal-yes{background:var(--blue);color:#fff;} .modal-no{background:#eee;color:var(--ink);}
/* Legal pages (Privacy, Terms, Affiliate Disclosure) */
.legal-content{max-width:760px;margin:0 auto;font-size:14.5px;line-height:1.7;color:#3A342C;}
.legal-content h2{font-size:20px;margin:28px 0 10px;color:var(--ink);font-family:'Poppins',sans-serif;}
.legal-content h3{font-size:16px;margin:22px 0 8px;color:var(--ink);font-family:'Poppins',sans-serif;}
.legal-content p{margin:0 0 14px;}
.legal-content ul{margin:0 0 14px;padding-left:22px;}
.legal-content li{margin-bottom:8px;}
.legal-content a{color:var(--blue);text-decoration:underline;}
.sales-page-body{text-align:center;}
.sales-page-body p{font-size:16px;max-width:60ch;margin:0 auto 20px;}
.sales-page-image{max-width:320px;width:100%;border-radius:16px;display:block;margin:0 auto;}
/* TOC page */
.toc-back{cursor:pointer;color:var(--blue);font-weight:700;font-size:13px;display:inline-block;margin-bottom:10px;}
.toc-h1{font-size:26px;margin:0 0 18px;color:var(--ink);}
.toc-list{padding-left:20px;}
.toc-list h4{margin:16px 0 6px;}
.toc-list ul{margin:0 0 4px;}
.toc-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:24px;padding-top:16px;border-top:2px solid #EFE9DB;}
.toc-top-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin:14px 0 20px;padding-bottom:16px;border-bottom:2px solid #EFE9DB;}
.toc-price{font-weight:800;font-size:18px;}
/* Cart/checkout line-item "View Expanded Description" link -- opens the same pod-modal
markup/CSS used on category pages, but populated via AJAX and with no purchase button
(item is already in the cart at this point). */
.fg4ua-cart-desc-link{margin-top:4px;}
.fg4ua-cart-desc-link .expand-link{padding:0;font-size:12px;display:inline-block;}
/* Checkout page -- distinct orange-bordered sections (cart / customer info / payment),
matching the site's pod aesthetic instead of EDD's bare unstyled fieldsets.
!important on the border: EDD's own fieldset CSS was winning the cascade on that one
property (background wasn't contested, so it showed -- border was, so it silently didn't). */
/* Padding reduced 20px -> 14px (2026-09-26, site owner request) uniformly across all three
checkout boxes (cart / customer info / payment+card) -- they already share the exact same
parent column width (.page-shell's center 1fr track), so this "utilizes the margin within
the orange borders" the site owner asked for to give the GiftCard fee row more room before
its Change/Remove buttons wrap, WITHOUT touching the outer box width itself (which would
need the same change applied to all three to stay uniform, per the site owner's explicit
fallback condition -- not needed since this alone was enough). */
#edd_checkout_cart, #edd_checkout_user_info{
display:block;background:var(--card);border:6px solid var(--orange) !important;border-radius:22px;
padding:14px;margin-bottom:20px;}
/* Payment Method + Credit Card Info: styled as two halves of ONE visual box, pure CSS --
an earlier version physically moved these into a shared wrapper via JS, which broke
EDD/Stripe's own gateway-switching logic (elements it expects to find under their
original parent). Left/right/top border + background live on the wrap; bottom border +
radius live on cc_fields; zero margin between them so there's no visible seam. */
#edd_payment_mode_select_wrap{background:var(--card);border:6px solid var(--orange) !important;
border-bottom-width:0 !important;border-top-left-radius:22px;border-top-right-radius:22px;
border-bottom-left-radius:0;border-bottom-right-radius:0;padding:14px 14px 0;margin-bottom:0 !important;}
#edd_cc_fields{background:var(--card);border:6px solid var(--orange) !important;border-top-width:0 !important;
border-bottom-left-radius:22px;border-bottom-right-radius:22px;border-top-left-radius:0;border-top-right-radius:0;
padding:14px;margin-top:0 !important;margin-bottom:20px !important;}
#edd_payment_mode_select{border:none !important;margin:0 !important;padding:0 0 20px !important;background:none !important;}
#edd_checkout_user_info legend, #edd_payment_mode_select legend, #edd_cc_fields legend{
font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:var(--ink);margin-bottom:14px;}
/* Customer Info fieldset as a column flex so the no-spam note can sit between the legend
and the email field via `order`, even though it renders after the email field in the DOM
(edd_purchase_form_after_email is the only hook EDD gives us there). */
#edd_checkout_user_info{display:flex !important;flex-direction:column;}
#edd_checkout_user_info legend{order:1;}
.fg4ua-no-spam-note{order:2;color:var(--blue-deep);font-weight:600;font-size:12.5px;margin:0 0 14px;}
.fg4ua-email-reminder-note{border:3px solid var(--tocgreen);border-radius:8px;color:var(--orange);font-weight:600;font-size:14px;line-height:1.5;padding:14px 18px;margin:16px 0;text-align:center;background:var(--card);}
#edd-edd_email-wrap{order:3;}
#edd-edd_first-wrap{order:4;}
#edd-edd_last-wrap{order:5;}
/* Payment method toggle -- "For Credit Card/PayPal Click Here" labels sit above each
button (fg4ua-gateway-label, injected via PHP); the button itself reads "Selected" in
green/reverse-white or "Click To Select" in grey/black, kept in sync by JS on change. */
#edd-payment-mode-wrap{display:flex;gap:16px;flex-wrap:wrap;}
.fg4ua-gateway-col{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;}
.fg4ua-gateway-label{font-weight:700;font-size:13px;color:var(--ink);}
.edd-gateway-option{display:flex;align-items:center;justify-content:center;
padding:14px 20px;border-radius:10px;border:2px solid #EFE9DB;background:#e9e4d8 !important;color:#3A342C !important;
font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
/* !important: EDD Blocks ships a higher-specificity id-scoped selector
(#edd-payment-mode-wrap label.edd-gateway-option.edd-gateway-option-selected) that
otherwise wins and renders this as near-invisible light-grey-on-white. */
.edd-gateway-option-selected{background:#3F7D5C !important;color:#fff !important;border-color:#3F7D5C !important;}
/* Center the Purchase button. */
#edd_purchase_submit{text-align:center;}
.edd_empty_cart{color:var(--orange);font-weight:800;font-size:20px;display:block;}
/* Expiration + CVC (Stripe's real split-element container ids, once stripe_elements_mode
is 'card-elements' with stripe_split_payment_fields on -- see checkout-page-copy.php).
Card Number already gets its own full-width row by default; this just adds matching
bordered-box styling and a real gap between Expiration and CVC underneath it. */
#edd-card-wrap, #edd-card-exp-wrap, #edd-card-cvv-wrap{border:1px solid #EFE9DB;
border-radius:10px;padding:10px 12px;background:#fff;margin-bottom:10px;}
#edd-card-details-wrap{display:flex;gap:16px;flex-wrap:wrap;}
#edd-card-details-wrap #edd-card-exp-wrap, #edd-card-details-wrap #edd-card-cvv-wrap{flex:1 1 140px;margin-bottom:0;}
#edd-card-wrap .edd-label, #edd-card-exp-wrap .edd-label, #edd-card-cvv-wrap .edd-label{
display:block;font-weight:800;color:var(--ink);font-size:13px;margin-bottom:6px;}
/* Billing address fields added for Stripe/Square AVS -- see inc/card-billing-address-fields.php */
#fg4ua-card-billing-address{margin-top:16px;padding-top:16px;border-top:1px solid #EFE9DB;}
#fg4ua-card-billing-address .fg4ua-billing-heading{margin:0 0 10px;font-size:14px;}
#fg4ua-card-billing-address .edd-input-group{margin-bottom:12px;}
#fg4ua-card-billing-address label{display:block;font-weight:800;color:var(--ink);font-size:13px;margin-bottom:6px;}
#fg4ua-card-billing-address .edd-input, #fg4ua-card-billing-address .edd-select{
width:100%;border:1px solid #EFE9DB;border-radius:10px;padding:10px 12px;background:#fff;box-sizing:border-box;}
.fg4ua-billing-row{display:flex;gap:16px;flex-wrap:wrap;}
.fg4ua-billing-row .fg4ua-billing-col{flex:1 1 200px;}
.fg4ua-billing-row .fg4ua-billing-col-narrow{flex:1 1 140px;}
/* Decorative only -- Expiration/CVC are never added to EDD's server-side required-fields
list (see checkout-page-copy.php for why), so this asterisk isn't tied to that check. */
#edd-card-exp-wrap .edd-label::after, #edd-card-cvv-wrap .edd-label::after{
content:" *";color:#c0392b;}
/* Gift-card fee row in the cart -- "#xxx" + a remaining-balance line as a green reverse-text
bubble (same green as the home page Notice 2 block) and the "-$XX.XX" amount as a blue
reverse-text bubble (same blue as Notice 1). Restructured 2026-09-23 to two stacked lines
(was one line, "Gift Card (xxx)") -- no parens around the number ("#" prefix instead), and
a 2nd line showing the card's remaining balance after this transaction. Both lines now the
SAME (reduced, from 20px) font size so the 2nd line's text never wraps; the bubble is no
longer forced to a single-line inline-block, and is explicitly allowed to grow wider than
the checkout's usual left/right content margins (site owner's explicit 2026-09-23 request)
-- .edd_cart_fee's flex-wrap already reflows the action-buttons row under it regardless. */
.edd_cart_fee_label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
background:var(--green);color:#fff;font-weight:800;font-size:15px;line-height:1.25;
padding:8px 10px;border-radius:18px;max-width:none;position:relative;}
.fg4ua-gc-fee-line{white-space:nowrap;}
/* gap reduced from EDD core's own default 16px to 6px (2026-09-26, found via direct
measurement: at a real ~1024px laptop width, the row was 36px short of fitting label +
amount + actions on one line, and two 16px gaps between the 3 items accounted for over half
of that shortfall on their own) -- combined with the tighter bubble/button padding below,
this is what actually stopped the Change/Remove buttons from wrapping onto their own row. */
.edd_cart_fee{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px !important;}
/* Reverted 2026-09-24 per the site owner's explicit correction: an earlier same-session change
forced these onto their own full-width row (flex-basis:100%) under both bubbles -- the site
owner wants the original, weeks-old layout back: both buttons stacked vertically as their own
column, sitting directly to the right of the blue amount bubble (a normal flex item, order 3,
no forced wrap). */
/* flex:0 0 auto (2026-09-26 fix, found via direct measurement) overrides EDD core's own default
flex-grow:1 on this element -- without it, once the row ran out of space and wrapped this
column onto its own line, it stretched to the FULL remaining row width (~600px) instead of
sizing to its own buttons' natural content width, which is what actually made the wrapped
state look broken/oversized rather than just a normal wrap. */
.fg4ua-gc-cart-actions{display:flex;flex-direction:column;gap:6px;order:3;flex:0 0 auto !important;}
.fg4ua-gc-change-btn, .fg4ua-gc-remove-btn{border:none;border-radius:999px;padding:6px 10px;
font-weight:700;font-size:12px;cursor:pointer;color:#fff;}
.fg4ua-gc-change-btn{background:#7A4FC9;}
.fg4ua-gc-remove-btn{background:#000;}
.fg4ua-gc-add-btn{display:inline-block;background:var(--green);color:#fff;font-weight:800;
font-size:16px;padding:8px 18px;border-radius:999px;border:none;cursor:pointer;}
.fg4ua-gc-input-row{display:flex;gap:8px;align-items:center;}
.fg4ua-gc-input-row .fg4ua-gc-input{flex:1;}
.fg4ua-gc-btn-clear{background:#eee;color:var(--ink);border:none;border-radius:999px;
padding:8px 14px;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;}
.edd_cart_fee_amount{display:flex;flex-direction:column;align-items:center;line-height:1.15;background:var(--blue);color:#fff;font-weight:800;
font-size:20px;padding:6px 12px;border-radius:999px;}
/* "Amount applied from GiftCard:" (small) + the dollar figure (kept at the original 20px)
-- injected by JS since EDD only echoes the plain "-$XX.XX" string server-side. */
.fg4ua-fee-label{font-size:10.5px;font-weight:700;}
.fg4ua-fee-amount{font-size:20px;font-weight:800;}
/* Goodwill-adjustment explanation block -- only ever present in the DOM when the store topped
up either the checkout total (grace) or the card's own ending balance, or both (see
fg4ua_render_grace_breakdown() in gift-card-checkout.php). Base text is orange per the site
owner's explicit 2026-09-23 spec; .fg4ua-navy-highlight overrides specific called-out phrases
to navy blue within it, still italic throughout (color is the only thing that changes). */
.fg4ua-grace-breakdown{order:5;flex-basis:100%;color:var(--orange);font-weight:700;
font-size:13px;margin-top:8px;line-height:1.5;}
/* 2026-09-26 (site owner correction): the "Bonus credited..." line used to live as a 4th row
inside .fg4ua-grace-breakdown above, mixed in with the Item Subtotal/Applied/Due figures --
confusing since it visually read like part of that price addition even though it never adds
into the checkout total (it credits the CARD's future balance, not today's charge). Pulled out
into its own 2-line note.
Repositioned again same day (2nd site owner correction, from real screenshots): a full-width
centered block wasn't reliably landing directly under the green bubble specifically. Now moved
via JS (fg4uaAttachBonusNote() in fg4ua-checkout.js) to become an actual CHILD of the green
.edd_cart_fee_label bubble (which is position:relative, see above) -- position:absolute with
left:0;right:0 then naturally matches the green bubble's own rendered width exactly (whatever
it is, since the card number's length varies) and sits snug directly beneath it, instead of a
fragile manually-measured width. */
.fg4ua-bonus-note{position:absolute;top:100%;left:0;right:0;margin-top:6px;color:var(--orange);
font-weight:700;font-size:12.5px;line-height:1.35;text-align:center;}
.fg4ua-bonus-note div{display:block;}
/* Since the note above is position:absolute (taken out of flow so it doesn't affect the green
bubble's own layout), the breakdown block that visually follows it needs its OWN reserved
clearance, or its text would render underneath/overlapping the 2-line note. The JS that moves
the note (fg4uaAttachBonusNote()) adds this class to the row so the extra margin only applies
when a note is actually present. */
.edd_cart_fee.fg4ua-has-bonus-note .fg4ua-grace-breakdown{margin-top:44px;}
.fg4ua-grace-message{order:6;flex-basis:100%;color:var(--orange);font-weight:700;font-style:italic;
font-size:17px;line-height:1.3;text-align:center;margin-top:10px;}
.fg4ua-navy-highlight{color:var(--blue-deep);}
/* EDD cart line-item "Remove" link — native EDD action, just needed visible styling. Scaled
1.5x (transform, not a fixed width/height) so it enlarges correctly regardless of whether
the icon itself is a background-image, SVG, or icon font -- the trash icon was too small
and easy to miss/mis-tap otherwise. Extra margin-left compensates for the larger visual
footprint so it doesn't crowd the price text next to it. */
.edd_cart_remove_item_btn{display:inline-block;background:var(--orange);color:#fff !important;
border-radius:999px;padding:4px 12px;font-weight:700;font-size:12px;text-decoration:none;
margin-left:18px;transform:scale(1.5);transform-origin:center;}
.edd_cart_remove_item_btn:hover{opacity:.85;}
/* Same trash-can SVG EDD's own checkout-page remove link uses (copied from that link's live
computed background-image so the product-pod remove button matches it exactly) -- the
.edd_cart_remove_item_btn class alone only supplies the orange pill/sizing, not the icon,
since on checkout the icon comes from an EDD core stylesheet scoped to the actual cart
block markup, which these pod buttons live outside of. */
.fg4ua-pod-remove-btn{margin-left:14px;vertical-align:middle;width:18px;height:18px;padding:0;
background-color:var(--orange);border-radius:999px;
background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiNmZmYiIGNsYXNzPSJ3LTYgaC02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xNC43NCA5bC0uMzQ2IDltLTQuNzg4IDBMOS4yNiA5bTkuOTY4LTMuMjFjLjM0Mi4wNTIuNjgyLjEwNyAxLjAyMi4xNjZtLTEuMDIyLS4xNjVMMTguMTYgMTkuNjczYTIuMjUgMi4yNSAwIDAxLTIuMjQ0IDIuMDc3SDguMDg0YTIuMjUgMi4yNSAwIDAxLTIuMjQ0LTIuMDc3TDQuNzcyIDUuNzltMTQuNDU2IDBhNDguMTA4IDQ4LjEwOCAwIDAwLTMuNDc4LS4zOTdtLTEyIC41NjJjLjM0LS4wNTkuNjgtLjExNCAxLjAyMi0uMTY1bTAgMGE0OC4xMSA0OC4xMSAwIDAxMy40NzgtLjM5N203LjUgMHYtLjkxNmMwLTEuMTgtLjkxLTIuMTY0LTIuMDktMi4yMDFhNTEuOTY0IDUxLjk2NCAwIDAwLTMuMzIgMGMtMS4xOC4wMzctMi4wOSAxLjAyMi0yLjA5IDIuMjAxdi45MTZtNy41IDBhNDguNjY3IDQ4LjY2NyAwIDAwLTcuNSAwIiAvPgo8L3N2Zz4=");
background-repeat:no-repeat;background-position:center;background-size:11px 11px;}
.fg4ua-pod-remove-btn:hover{opacity:.85;}
/* Balance lookup page — form + gift card visual, ported from giftcards.3z3.me/balance.php */
.balance-lookup{background:var(--card);border:1px solid #EFE9DB;border-radius:14px;padding:22px;margin-bottom:24px;max-width:520px;margin-left:auto;margin-right:auto;}
.balance-lookup label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b6455;margin-bottom:8px;}
.balance-lookup-row{display:flex;gap:10px;}
.balance-lookup input{flex:1;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:16px;padding:12px 14px;border:1px solid #EFE9DB;border-radius:10px;background:var(--sand);color:var(--ink);min-width:0;}
.balance-lookup button{font-weight:700;font-size:15px;padding:12px 20px;border:none;border-radius:10px;background:var(--blue-deep);color:#fff;cursor:pointer;white-space:nowrap;}
.balance-clear-btn{background:#eee !important;color:var(--ink) !important;}
.balance-hint{font-size:12.5px;color:#6b6455;margin:10px 2px 0;}
.giftcard-wrapper{filter:drop-shadow(16px 20px 14px rgba(0,0,0,.4));width:min(92vw,520px);margin:0 auto 28px;}
.giftcard{position:relative;width:100%;aspect-ratio:1050/662;container-type:inline-size;
background:url('assets/giftcard-background.svg') no-repeat center/contain;font-family:Arial,Helvetica,sans-serif;}
.giftcard .field{position:absolute;}
.giftcard .balance-amount{left:5.5%;top:37.8%;width:40%;height:13.6%;font-weight:900;font-size:6.1cqw;
background:linear-gradient(180deg,#F3D77A 0%,#C99A2E 50%,#8A6413 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
display:flex;align-items:flex-end;}
.giftcard .original-balance{left:5.5%;top:52.9%;width:40%;height:10.6%;font-weight:400;font-size:2.3cqw;color:#000;line-height:1.3;}
.giftcard .buyer-name{left:28.6%;top:76.0%;width:64.8%;height:10.6%;font-weight:800;font-size:5.14cqw;letter-spacing:.04em;
background:linear-gradient(180deg,#F5F6F7 0%,#FFFFFF 28%,#9BA0A6 48%,#6E7278 58%,#C9CDD3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:1.5px 2px 0 rgba(58,44,16,.55),-1px -1.2px 0 rgba(255,255,255,.75);display:flex;align-items:center;}
.giftcard .card-number{left:20%;top:87.3%;width:74.3%;height:10.6%;font-weight:800;font-size:5.14cqw;letter-spacing:.04em;
background:linear-gradient(180deg,#F5F6F7 0%,#FFFFFF 28%,#9BA0A6 48%,#6E7278 58%,#C9CDD3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:1.5px 2px 0 rgba(58,44,16,.55),-1px -1.2px 0 rgba(255,255,255,.75);display:flex;align-items:center;}
.giftcard .status-badge{left:76.2%;top:5.1%;width:20%;height:8.5%;border-radius:999px;font-weight:700;font-size:2.85cqw;
display:flex;align-items:center;justify-content:center;}
.giftcard .status-active{background:#DCFCE7;color:#15803D;}
.giftcard .status-expired{background:#FEE2E2;color:#B91C1C;}
.giftcard .status-exhausted{background:#F1F5F9;color:#475569;}
.balance-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;max-width:520px;margin-left:auto;margin-right:auto;}
.balance-meta-box{background:var(--card);border:1px solid #EFE9DB;border-radius:12px;padding:14px 16px;}
.balance-meta-box .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#6b6455;margin-bottom:4px;}
.balance-meta-box .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
.balance-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:10px;
background:#f6ecd9;color:#8A6413;text-decoration:none;border:3px solid #39FF14;}
.balance-section-h{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b6455;margin:0 0 12px;max-width:520px;margin-left:auto;margin-right:auto;}
.balance-history{border:1px solid #EFE9DB;border-radius:14px;overflow:hidden;background:var(--card);margin-bottom:8px;max-width:520px;margin-left:auto;margin-right:auto;}
.balance-hrow{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;font-size:13.5px;border-bottom:1px solid #EFE9DB;}
.balance-hrow:last-child{border-bottom:none;}
.balance-hrow .date{color:#6b6455;font-size:12px;margin-top:2px;}
.balance-hrow .amt{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.balance-hrow .amt.neg{color:#b34a3c;}
.balance-hrow .amt.pos{color:#3f8f5f;}
.balance-empty-history{font-size:13px;color:#6b6455;padding:16px;text-align:center;border:1px dashed #EFE9DB;border-radius:14px;max-width:520px;margin-left:auto;margin-right:auto;}
.balance-notfound{background:#f7e9e6;border:1px solid #b34a3c;border-radius:14px;padding:18px 20px;font-size:14px;line-height:1.5;max-width:520px;margin-left:auto;margin-right:auto;}
.balance-notfound strong{color:#b34a3c;}
.balance-notfound ul{margin:10px 0 0;padding-left:20px;}
.balance-notfound li{margin-bottom:4px;}
/* Gift card checkout modal (v4 Part 2) */
.fg4ua-gc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:400;align-items:center;justify-content:center;padding:20px;}
.fg4ua-gc-modal-overlay.show{display:flex;}
/* Background changed 2026-09-26 (was #FFFDF9, nearly white) to the same earth-tone beige as the
vertical PROMO SPACE / AdSense sidebar box (.fg4ua-promo-slot-tall) -- the site owner found
the previous shade too close to the white input fields to read a clear boundary between them.
Applies to every modal sharing this class (GiftCard lookup, login, trash-confirm, etc.) for
consistency, per the site owner's explicit ask to fix this for both the login AND GiftCard
entry pop-ups. */
.fg4ua-gc-modal{background:#EFE9DB;border:6px solid var(--orange);border-radius:22px;width:min(420px,92vw);
padding:24px;position:relative;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* 2026-09-26 (site owner request): different browsers/zoom levels/laptop or tablet screens all
handle the wide capping-warning modal's height differently -- widening it further wasn't
enough to guarantee the action buttons stay visible everywhere. A capped max-height + internal
scroll (on the shared class, so it's a safety net for every modal, not just this one) means
the modal itself never runs off the top/bottom of the viewport regardless of content length,
browser, zoom, or screen size -- content scrolls, the modal box does not. */
.fg4ua-gc-modal h3{margin:0 0 16px;font-size:18px;color:var(--ink);font-family:'Poppins',sans-serif;}
/* 2026-09-26: the capping-warning step's message (paragraph/bullet restructure below) got tall
enough to run off the top/bottom of the viewport above ~67% browser zoom -- widening JUST this
step (toggled via JS, see ccShowStep()) reflows the same text into fewer lines instead of
growing every modal on the site off this shared class. Widened again same day (site owner
correction, still cut off at 90% zoom on some browsers): +0.75in (72px) on each side, 680px
-> 824px. */
.fg4ua-modal-wide{width:min(824px,95vw);}
.fg4ua-capping-message p{margin:0 0 12px;}
.fg4ua-capping-message p:last-child{margin-bottom:0;}
/* Example #1/#2 each get their own bulleted, indented paragraph, colored solid throughout
(including the word "Example") -- #1 in the site's logo blue, #2 in the Member Login button's
purple -- so the two worked scenarios are easy to tell apart at a glance instead of running
together in one paragraph. */
.fg4ua-notice-example{position:relative;padding-left:15px;font-weight:700;}
.fg4ua-notice-example::before{content:'\2022';position:absolute;left:0;}
.fg4ua-notice-example-blue{color:var(--blue);}
.fg4ua-notice-example-purple{color:#7A4FC9;}
/* The 2 trigger-reason bullets (why the capping-warning fired) -- black bullets, single line
each (site owner's explicit "must not wrap" requirement; the modal-width increase above gives
them enough room), left-justified same as the Example bullets. */
.fg4ua-notice-reason{position:relative;padding-left:15px;font-weight:700;white-space:nowrap;margin:0 0 4px;}
.fg4ua-notice-reason::before{content:'\2022';position:absolute;left:0;color:#000;}
/* "OR" between the 2 reason bullets -- site owner's explicit spec: centered under the AVERAGE
length of the two bullet lines above it (not the modal's own left/right margins, which would
sit too far right relative to two short one-line bullets). Approximated with the CSS `ch` unit
(one bullet is 66 characters, the other 73 -- average ~69.5, halved and offset by half of
"OR"'s own ~2ch width) instead of a fixed px guess, so it scales correctly with font-size. */
.fg4ua-notice-or{font-weight:800;margin:0 0 4px;margin-left:calc(15px + 34ch);}
.fg4ua-notice-orange{color:var(--orange);font-weight:700;}
.fg4ua-gc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.fg4ua-gc-btn-primary{background:var(--orange);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer;}
.fg4ua-gc-btn-secondary{background:#fff;color:var(--blue-deep);border:2px solid var(--blue);border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer;}
.fg4ua-gc-btn-text{background:none;border:none;color:#6b6455;font-weight:700;cursor:pointer;padding:10px;}
.fg4ua-gc-input{width:100%;padding:12px 14px;border:1px solid #EFE9DB;border-radius:10px;font-family:ui-monospace,monospace;font-size:15px;}
/* Prior-purchase modal ("Looks Like You Already Have Some of These!") only -- scoped by ID so
the shared .fg4ua-gc-btn-* classes used elsewhere (the GiftCard lookup modal's Yes/No etc.)
are unaffected. All three buttons must fit on one line without widening the modal box, so
padding/font-size are tightened here rather than reusing the base classes' spacing as-is. */
#fg4uaPriorPurchaseModal .fg4ua-gc-actions{flex-wrap:nowrap;gap:6px;}
#fg4uaPriorPurchaseModal .fg4ua-gc-actions button{padding:9px 10px;font-size:12.5px;white-space:nowrap;flex:1 1 0;text-align:center;}
#fg4uaPriorPurchaseModal .fg4ua-gc-btn-secondary{background:#FFC72C;color:var(--blue);border:none;border-radius:999px;font-weight:700;cursor:pointer;}
#fg4uaPriorPurchaseModal .fg4ua-gc-btn-text{background:var(--blue);color:#fff;border-radius:999px;font-weight:700;cursor:pointer;}
.fg4ua-gc-error{color:#b34a3c;font-size:13px;margin-top:8px;min-height:16px;}
.fg4ua-gc-balance{font-weight:800;font-size:20px;color:var(--green);margin:4px 0;}
.fg4ua-gc-status{font-size:13.5px;color:#3A342C;line-height:1.5;}
.fg4ua-cart-reminder{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid #EFE9DB;
border-radius:12px;padding:12px 16px;margin:14px 0;}
/* Post-checkout membership password-creation interstitial (2026-09-25) -- a card, same visual
family as .balance-lookup/.fg4ua-gc-modal, but a real page section (own header/footer), not
an overlay -- the site owner deliberately wants this to feel like a formal landing place, not
something dismissible.
2026-09-26: no longer centered/full-width -- sits in a 2-column row with the benefits list
(see .fg4ua-onboarding-row below), pinned to the LEFT (10px from the side-rail ad column,
matching the page-shell's own 10px grid gap -- so plain margin:0 already achieves this once
it's no longer auto-centered). Bottom padding cut to 5px (was 28px, matching the top/sides)
per the site owner's explicit "very little space below the button" request -- the visible
whitespace between the button and Benefits-of-Membership heading needed to nearly disappear
so a visitor scrolling to the button doesn't stop there thinking that's the end of the page. */
/* 2026-09-27, widened again same day (2nd site owner correction): 352px made "At least one
symbol (e.g. ! @ # $ % & *)" wrap. Measured live (a temporarily unconstrained clone of that
exact line) at 299px content width + this card's own 26px+26px padding = 353px minimum to fit
it on one line -- 376px gives an ~11px safety margin for other browsers' font rendering
(Firefox/Brave/etc. per the site owner's own multi-browser testing habit) on top of that bare
minimum. The 12px gained from tightening the 3 gaps 24->20px (previous fix) covers most of
the growth from 352; the remaining px come out of .fg4ua-benefits-block's own width, per the
site owner's explicit instruction. flex:0 1 376px (not 0 0) so it can still shrink -- not
just wrap -- on narrower viewports instead of overflowing. */
.fg4ua-password-card{background:var(--card);border:1px solid #EFE9DB;border-radius:14px;
padding:28px 26px 5px;margin:0;flex:0 1 376px;max-width:376px;text-align:center;
box-sizing:border-box;}
.fg4ua-password-intro{font-size:14.5px;color:#3A342C;line-height:1.6;margin:0 0 10px;}
/* "Enter your new password below or generate one." -- 2026-09-28, matches the reset-password
popup's own intro line (same wording/tone), sits above the Create Password label. */
.fg4ua-generate-pw-intro{font-size:14px;color:#3A342C;line-height:1.5;margin:0 0 10px;text-align:left;}
.fg4ua-password-email{font-weight:800;font-size:18px;color:var(--blue-deep);margin:0 0 16px;
word-break:break-all;}
.fg4ua-password-form{display:flex;flex-direction:column;gap:6px;text-align:left;margin-top:16px;}
.fg4ua-password-form label{font-weight:700;font-size:13px;color:var(--ink);margin-top:8px;}
/* Border darkened 2026-09-26 (was #EFE9DB, the site owner found it too faint to see against
the card's own background) to a thin black line, on both password fields. */
.fg4ua-password-input{font-family:'Nunito Sans',sans-serif !important;border:1px solid #1a1a1a !important;}
.fg4ua-password-submit{margin-top:18px;margin-bottom:5px;font-size:15px;padding:12px 20px;}
/* Regular-size red error text on this page specifically (2026-09-27 site owner request) -- the
shared .fg4ua-gc-error class (13px) is used by several small modal contexts elsewhere on the
site that still want it compact, so this is scoped to just the welcome page's own card rather
than changing the shared class everywhere. */
.fg4ua-password-card .fg4ua-gc-error{font-size:15px;}
/* Show/hide toggle for the Create Password field (2026-09-27 site owner request) -- a plain
eyeball glyph rather than an icon font/image, toggles the field's type via a few lines of JS
in fg4ua_render_password_interstitial(). */
.fg4ua-password-field-wrap{position:relative;}
.fg4ua-password-field-wrap input{padding-right:40px;}
.fg4ua-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
background:none;border:none;cursor:pointer;font-size:18px;line-height:1;padding:6px;opacity:.55;}
.fg4ua-password-toggle:hover, .fg4ua-password-toggle-active{opacity:1;}
/* The password card + benefits list side by side (2026-09-26 layout change, uniform-spacing
rework 2026-09-27) -- password card and benefits box, BOTH top-aligned, so a visitor who only
scrolls as far as the orange button is still level with (and likely to notice) the purple
"Benefits of Membership" heading beside it, not below/hidden past it. Wraps to a stacked
layout on narrow/mobile widths via flex-wrap.
2026-09-27 (site owner's explicit uniform-spacing spec): all 3 gaps around these 2 boxes --
left ad rail -> card, card -> benefits, benefits -> right ad rail -- are now the SAME 24px.
The middle one is just this row's own flex `gap`. The outer two need 14px of padding here
(not the full 24px) because .page-shell's own grid `gap:10px` already provides the first
10px between each ad rail and this row -- 10 + 14 = 24, matching. Row width fills the full
center column (.page-shell's 1fr track, 1000px at the page's own 1360px max-width) via
width:100% + box-sizing:border-box so the 14px padding on each side comes OUT of that 1000px
rather than adding to it -- was max-width:1000px + margin:auto before, which only worked
because the row's content happened to equal the column's width; padding is deterministic
regardless of content. */
/* 2026-09-27 (2nd site owner correction): gaps tightened 24px -> 20px on all 3 sides (freeing
12px total, all handed to the password card below, not split) -- the 20% narrower card from
the previous round made "At least one symbol (e.g. ! @ # $ % & *)" wrap, pushing the "No
character is off-limits" line away from being snug underneath it. */
.fg4ua-onboarding-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:20px;
width:100%;box-sizing:border-box;padding:0 10px;margin:20px 0 0;}
/* "Enter Member Area" CTA appended after the confirmation page's own content once the
visitor is logged in (see fg4ua_maybe_add_member_area_link() in membership-onboarding.php). */
.fg4ua-member-area-cta{text-align:center;margin:28px 0;}
.fg4ua-member-area-cta a{display:inline-block;font-size:16px;padding:14px 28px;}
/* Post-checkout membership-onboarding page (2026-09-26 rewrite -- was a bare centered card,
now a full regular page with the welcome banner/copy up top and a benefits list below the
password card, matching the site's normal top/side-rail-banner page structure via
get_header()/get_footer(), same family as the GiftCard-balance page). */
.fg4ua-welcome-heading{text-align:center;font-family:'Poppins',sans-serif;font-weight:800;
color:var(--blue);font-size:40px;margin:10px 0 16px;}
.fg4ua-welcome-copy{max-width:720px;margin:0 auto 24px;font-size:15px;line-height:1.7;
color:#3A342C;text-align:center;}
/* 2026-09-27 site owner request: this closing clause in the site's own purple (matching the
Member Login button / Benefits-of-Membership heading). */
.fg4ua-welcome-copy-purple{color:#7A4FC9;}
/* The three numbered steps below the welcome copy (2026-09-26) -- split out of what was one
paragraph, each with a reverse-white numeral in a blue (same blue as WELCOME!/the logo)
circle badge, sized noticeably larger than a normal bullet per the site owner's explicit
"not too small, not a regular character size" spec. */
.fg4ua-welcome-steps{list-style:none;max-width:640px;margin:0 auto 24px;padding:0;
display:flex;flex-direction:column;gap:12px;}
/* Badge enlarged 42px (was 34px) and vertically centered against its text block (was
align-items:flex-start) -- 2026-09-26 fix: at 34px the badge was shorter than the two-line
text next to it, so the text visibly ran on below the circle's own height. */
.fg4ua-welcome-steps li{display:flex;align-items:center;gap:14px;}
.fg4ua-step-num{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--blue);
color:#fff;font-weight:800;font-size:20px;font-family:'Poppins',sans-serif;
display:flex;align-items:center;justify-content:center;}
.fg4ua-welcome-steps li span:last-child{font-size:15px;line-height:1.45;color:#3A342C;}
.fg4ua-password-match-msg{min-height:18px;font-size:13px;font-weight:700;margin:2px 0 0;}
.fg4ua-password-match-pending{color:#8a6413;}
.fg4ua-password-match-ok{color:#2f7a3d;}
.fg4ua-password-match-bad{color:#b34a3c;}
/* Pulled snug against the checklist above it (was margin-top:4px on its own, plus the
checklist's own 14px bottom margin -- now the checklist's bottom margin is ~0 and this has
none) and indented to line up "No" directly under "At" in "At least one symbol" -- the
checklist marker (16px) + its gap (6px) = 22px, matched here. Both 2026-09-26 fixes. */
.fg4ua-password-requirements{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 0 22px;}
/* Live per-requirement password checklist (2026-09-26, resized/recolored 2026-09-27 -- site
owner found it too small and too dim/grayscale, wanted it matching the normal body text size
used elsewhere on this page). Each line states its own requirement AND doubles as the live
indicator, going from a neutral hollow circle to a green checkmark the instant that ONE
requirement is met, independent of the other (see the inline script in
fg4ua_render_password_interstitial()). */
.fg4ua-password-checklist{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:6px;}
.fg4ua-password-checklist li{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;
transition:color .15s;}
.fg4ua-req-mark{font-size:16px;line-height:1;width:18px;text-align:center;}
.fg4ua-req-pending{color:var(--ink);}
.fg4ua-req-pending .fg4ua-req-mark{color:var(--ink);}
.fg4ua-req-met{color:#2f7a3d;}
.fg4ua-req-met .fg4ua-req-mark{color:#2f7a3d;font-weight:800;}
/* Six tick marks next to "At least 6 characters" (2026-09-26) -- fill in one at a time as the
visitor types, live progress feedback rather than the requirement just silently sitting
there until it's suddenly met (see updateProgressTicks() in inc/membership-onboarding.php).
The SAME tick style is reused as a single mark after the symbol example text (#fg4uaSymbolTick)
-- lights up the instant any one symbol is typed, matching the site owner's explicit ask for
"a box... that will light up... once that has been achieved" there too.
2026-09-27: default (unfilled) color changed from a light neutral tan to red -- site owner's
explicit request so the un-met boxes visibly signal "not done yet" from the very first
keystroke, rather than reading as neutral/inactive until they fill in. */
.fg4ua-req-progress{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle;}
.fg4ua-req-tick{width:10px;height:10px;border-radius:2px;background:#c94f3f;transition:background .15s;
display:inline-block;margin-left:8px;vertical-align:middle;}
.fg4ua-req-progress .fg4ua-req-tick{margin-left:0;}
.fg4ua-req-tick-filled{background:var(--blue);}
/* Benefits-of-membership list -- big (not huge), asymmetric green checkmarks instead of plain
bullets, per the site owner's exact spec: a short straight arm and a longer, thicker, curved
arm (see fg4ua_membership_checkmark_svg() in inc/membership-onboarding.php). A first concept,
explicitly open to the site owner's own sizing tweaks once they see it live. */
/* 2026-09-26: no longer its own full-width, auto-centered block below the password card -- now
the right-hand column of .fg4ua-onboarding-row, top-aligned with the card beside it, margin:0
so there's no gap pushing "Benefits of Membership" down below where a visitor stopped
scrolling at the orange button (the site owner's explicit concern -- several browsers let her
scroll to the button and stop there, oblivious anything else followed). */
/* 2026-09-27 site owner request: a tan background (same shade as the side-rail promo boxes)
behind the whole block -- the blue/orange/red highlighted phrases inside the list didn't have
enough contrast directly against the page's own lighter background. Also capped max-width so
this block stops flex-growing all the way to the right promo sidebar -- previously it had no
cap and always consumed 100% of the row's remaining space, leaving zero gap; capping it here
is what actually creates the >=0.5in gap the site owner asked for (the leftover row space
simply isn't distributed to this item once it hits its own max-width). */
/* 2026-09-27, narrowed again same day (2nd site owner correction): 584px -- exactly whatever's
left in the row (1000px column - 10px left pad - 10px right pad - 20px middle gap - the
password card's own 376px) after the tightened-to-20px gap spec above, so the right edge still
lands exactly 20px from the right ad rail. Explicitly accepted by the site owner as the
necessary tradeoff for widening the password card; offset by shrinking this box's own left/
right padding way down (24px -> 8px, site owner said 3-4px would even be fine) so the
INTERIOR content width barely shrinks at all despite the box itself being narrower -- keeps
the benefit paragraphs from wrapping/growing taller than necessary. flex:0 1 584px (not 0 0)
so it can still shrink on narrower viewports instead of overflowing. */
.fg4ua-benefits-block{flex:0 1 584px;max-width:584px;margin:0;background:#EFE9DB;
border-radius:14px;padding:22px 8px;box-sizing:border-box;}
/* Heading recolored 2026-09-26 to the same purple as the login button (#7A4FC9, was var(--ink)/
black); list text recolored black -> var(--blue) and bumped 15px -> 17px (site owner found it
"a little too thin"); checkmark is now the site owner's own supplied image (see
fg4ua_membership_checkmark_svg() in inc/membership-onboarding.php), not the earlier custom SVG.
All 5 items are now italicized (font-style on the shared span rule, rather than wrapping each
item's text in its own ). */
.fg4ua-benefits-heading{text-align:center;font-size:24px;font-weight:800;color:#7A4FC9;
font-family:'Poppins',sans-serif;margin:0 0 18px;}
.fg4ua-benefits-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.fg4ua-benefits-list li{display:flex;align-items:flex-start;gap:14px;}
.fg4ua-benefit-check{flex:0 0 30px;width:30px;height:30px;margin-top:2px;object-fit:contain;}
.fg4ua-benefits-list span{font-size:17px;line-height:1.6;color:var(--blue);font-style:italic;}
/* Two specific phrases inside the 3rd and 4th benefit items called out in orange, per the site
owner's explicit 2026-09-26 spec -- inherits the italic from the parent span, only the color
changes. Needs the `.fg4ua-benefits-list` ancestor in the selector, not just the class alone:
confirmed live that a bare `.fg4ua-benefit-highlight-orange{color:...}` (1 class, specificity
0,1,0) loses to `.fg4ua-benefits-list span` above (1 class + 1 tag, specificity 0,1,1), which
is HIGHER regardless of source order -- rendered blue instead of orange until this extra
ancestor class was added to outrank it. */
.fg4ua-benefits-list .fg4ua-benefit-highlight-orange{color:var(--orange);}
/* 2026-09-27 site owner request: the $500-bonus-card clause in benefit #4 recolored orange ->
red, same ancestor-scoping requirement as the orange rule above (a bare class alone loses to
`.fg4ua-benefits-list span`'s higher specificity). */
.fg4ua-benefits-list .fg4ua-benefit-highlight-red{color:#c0392b;}
/* Branded login/lost-password/reset-password (2026-09-25) -- reskins EDD's own login block
markup (used both inside the site-wide modal and on the dedicated /member-login/ fallback
page) to the site's own earth-tone/orange/blue palette instead of WordPress's default
blue/black/dashicons look -- no WordPress branding anywhere in this block to begin with
(that only ever came from wp-login.php itself, which this whole feature exists to avoid). */
.fg4ua-login-modal .edd-blocks-form__group{margin-bottom:14px;}
.fg4ua-login-modal .edd-blocks-form__group label{display:block;font-weight:700;font-size:13.5px;
color:var(--blue-deep);margin-bottom:5px;}
.fg4ua-login-modal input[type=text],
.fg4ua-login-modal input[type=email],
.fg4ua-login-modal input[type=password]{width:100%;padding:12px 14px;border:1px solid #EFE9DB;
border-radius:10px;font-size:15px;font-family:'Nunito Sans',sans-serif;background:#fff;color:var(--ink);}
.fg4ua-login-modal .edd-blocks-form__group-remember{display:flex;align-items:center;gap:8px;}
.fg4ua-login-modal .edd-blocks-form__group-remember label{display:inline;margin:0;color:var(--ink);font-weight:600;}
/* !important: EDD's own bundled CSS ships a same-specificity .edd-submit.blue rule (its
default button color) that wins on source order otherwise -- confirmed live 2026-09-25,
the button rendered EDD's blue instead of our orange without this. Recolored 2026-09-26 to
the exact same purple as the header's "Member Login" nav button (#7A4FC9) -- the site owner's
explicit correction: not "purple" generically, the SAME purple, so there's no ambiguity. */
.fg4ua-login-modal input[type=submit],
.fg4ua-login-modal input#wp-submit{background:#7A4FC9 !important;color:#fff !important;border:none !important;
border-radius:999px;padding:11px 22px;font-weight:700;font-size:15px;cursor:pointer;margin:0;}
.fg4ua-login-modal .wp-generate-pw{background:#fff;color:var(--blue-deep);border:2px solid var(--blue);
border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;margin-right:8px;}
.fg4ua-login-modal .edd-blocks-form__group-lost-password a,
.fg4ua-login-modal p.message a{color:var(--blue);font-size:13px;font-weight:700;}
/* Login-step-only layout compaction (2026-09-26): the site owner found the box too tall.
fg4ua-checkout.js moves the Close button (.fg4ua-gc-actions, normally its own row) INSIDE
#edd-blocks-form__login, appended right after the "Lost your password?" paragraph, only when
that specific form is present (i.e. only on the login step -- lost-password/reset-password
keep their own normal layout, untouched). That JS move is what makes this flex-row grouping
possible: Lost-password / Log In / Close all end up as siblings the login form can lay out on
one shared row, positioned left / right-ish / far-right per the site owner's exact spec. */
#edd-blocks-form__login{display:flex;flex-wrap:wrap;}
#edd-blocks-form__login .edd-blocks-form__group-username,
#edd-blocks-form__login .edd-blocks-form__group-password,
#edd-blocks-form__login .edd-blocks-form__group-remember{flex-basis:100%;}
#edd-blocks-form__login .edd-blocks-form__group-remember{margin-bottom:4px;}
#edd-blocks-form__login .edd-blocks-form__group-lost-password{order:1;flex:1 1 auto;margin:0;
display:flex;align-items:center;}
#edd-blocks-form__login .edd-blocks-form__group-submit{order:2;flex:0 0 auto;margin:0 0 0 10px;}
#edd-blocks-form__login .fg4ua-gc-actions{order:3;flex:0 0 auto;margin:0 0 0 10px;}
.fg4ua-login-modal p.message{font-size:13.5px;color:#3A342C;line-height:1.5;margin:0 0 14px;}
.fg4ua-login-modal .description.indicator-hint{font-size:12px;color:#6b6455;margin:6px 0 0;}
.fg4ua-login-modal .edd_errors,
.fg4ua-login-modal .edd-alert-error{color:#b34a3c;font-size:13.5px;font-weight:700;margin:0 0 14px;}
.fg4ua-login-modal .edd_success,
.fg4ua-login-modal .edd-alert-success{color:#2f7a3d;font-size:13.5px;font-weight:700;margin:0 0 14px;}
.fg4ua-login-modal .wp-pwd{position:relative;}
.fg4ua-login-modal .wp-hide-pw{position:absolute;right:6px;top:6px;background:none;border:none;
cursor:pointer;color:#6b6455;}
#pass-strength-result{margin-top:6px;padding:6px 10px;border-radius:8px;font-size:12.5px;font-weight:700;
background:#EFE9DB;color:#6b6455;}
#pass-strength-result.short{background:#f7e9e6;color:#b34a3c;}
#pass-strength-result.bad{background:#f7e9e6;color:#b34a3c;}
#pass-strength-result.good{background:#fdf1d9;color:#8A6413;}
#pass-strength-result.strong{background:#e7f5e9;color:#2f7a3d;}
.fg4ua-login-modal.fg4ua-password-card{padding:28px 26px;}
.fg4ua-cart-reminder img{width:44px;height:auto;flex:0 0 44px;}
.fg4ua-cart-reminder span{font-size:20px;flex:0 0 auto;}
.fg4ua-cart-reminder p{margin:0;font-size:13px;color:#3A342C;line-height:1.4;}
/* Contact page */
.contact-form{max-width:520px;margin:0 auto;}
.contact-form label{display:block;font-weight:700;margin:14px 0 6px;}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:2px solid #EFE9DB;
border-radius:10px;font-family:inherit;font-size:14px;}
.contact-form textarea{min-height:140px;}
.contact-form button{margin-top:18px;background:var(--orange);color:#fff;border:none;border-radius:999px;
padding:12px 28px;font-weight:800;font-size:14px;cursor:pointer;}
.contact-form button:disabled{opacity:.5;cursor:not-allowed;}
.contact-form .fg4ua-spinner{display:inline-block;width:14px;height:14px;margin-right:7px;
vertical-align:-2px;border:2px solid #EFE9DB;border-top-color:var(--orange);border-radius:50%;
animation:fg4ua-spin .7s linear infinite;}
@keyframes fg4ua-spin{to{transform:rotate(360deg);}}
/* Reset-password form (EDD's login block, ?action=rp) -- 2026-09-26 site owner report + direct
DOM inspection confirmed two real bugs in WP core's OWN password-strength/caps-lock widget,
which relies on wp-admin's own CSS (not loaded on our front-end pages) for its default state:
1) The caps-lock warning's inline SVG icon has no width/height in WP's own markup, so with no
admin CSS to constrain it, it rendered at its container's full width (~345x374px on a
normal modal) -- this was the "huge black arrow" the site owner circled.
2) The ".caps-warning" box itself has no default-hidden CSS either -- WP's JS only ever calls
jQuery .show()/.hide() on it (inline style), assuming admin CSS already hides it by
default. Without that base rule it displayed unconditionally on page load regardless of
actual Caps Lock state, which is exactly the false "Caps lock is on" the site owner saw.
Fixed here (not by patching the vendor view file) so it survives EDD updates, matching every
other WP/EDD-rendered widget on this site that gets restyled this way. jQuery's .show()/.hide()
set plain (non-!important) inline styles, so a plain (non-!important) display:none here is
correctly overridden by the real toggle when it fires -- this only supplies the missing
default. */
.edd-blocks-form__reset-password .caps-warning{display:none;margin-top:8px;font-size:12.5px;color:#b34a3c;}
.edd-blocks-form__reset-password .caps-icon{display:inline-block;vertical-align:middle;margin-right:4px;}
.edd-blocks-form__reset-password .caps-icon svg{width:16px;height:17px;display:block;}
.edd-blocks-form__reset-password .caps-warning-text{vertical-align:middle;}
/* WP core's own "Hint: password should be at least twelve characters..." text renders using
wp-admin's default (tiny/thin/illegible outside wp-admin) styling and describes a DIFFERENT
password policy than this site's own (6 characters + 1 symbol) -- hidden in favor of the live
requirement checklist injected by fg4uaEnhanceResetPasswordForm() in fg4ua-checkout.js, which
reuses the exact same classes/look as the welcome/password-creation page's own checklist. */
.edd-blocks-form__reset-password .indicator-hint{display:none;}
.edd-blocks-form__reset-password label{font-weight:700;color:var(--ink);margin-bottom:4px;display:block;}
.edd-blocks-form__reset-password .edd-blocks-form__group{margin-bottom:14px;}
.edd-blocks-form__reset-password .wp-pwd{position:relative;}
.edd-blocks-form__reset-password input[type=password]{width:100%;box-sizing:border-box;
border:1px solid #1a1a1a;border-radius:10px;padding:10px 40px 10px 12px;font-size:15px;}
.edd-blocks-form__reset-password #pass2{padding-right:12px;}
/* 2026-09-28 (site owner report): WP core's native reveal-toggle icon wasn't reliably
correcting itself to the right default state in this custom-rendered context (see
fg4uaEnhanceResetPasswordForm() in fg4ua-checkout.js for the full explanation) -- hidden here,
replaced by .fg4ua-password-toggle, the SAME single-glyph button already used on the welcome
page, for guaranteed-identical behavior between the two. */
/* !important: same as #pass-strength-result/.pw-weak below -- WP core's own JS sets an
explicit inline display style on this button too, which beats a plain rule regardless of
specificity or source order. */
.edd-blocks-form__reset-password .wp-hide-pw{display:none !important;}
.edd-blocks-form__reset-password .fg4ua-password-toggle{position:absolute;right:4px;top:50%;
transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;
line-height:1;padding:6px;opacity:.55;}
.edd-blocks-form__reset-password .fg4ua-password-toggle:hover,
.edd-blocks-form__reset-password .fg4ua-password-toggle-active{opacity:1;}
/* 2026-09-27 (site owner request): the strength meter isn't meaningful for this site (no
financial/shipping data ever entered here, hence only a 6-character floor to begin with), and
the native "weak password" confirmation checkbox only exists to gate submission on THAT meter
-- both removed entirely rather than just restyled. */
/* !important on all 3: confirmed live (2026-09-27) that WP core's own JS sets an explicit
INLINE display style on each of these during its init (display:block / inline-block), which
beats a plain stylesheet rule regardless of specificity or source order -- unlike
.caps-warning elsewhere in this file, there's no legitimate later toggle-back-to-visible
behavior to preserve here (all 3 are being removed from this form entirely), so forcing them
hidden unconditionally is correct, not just a workaround. */
.edd-blocks-form__reset-password #pass-strength-result,
.edd-blocks-form__reset-password .pw-weak{display:none !important;}
/* The native "Generate Password" button stays in the DOM (fg4uaEnhanceResetPasswordForm() in
fg4ua-checkout.js proxies a click to it from the new button below) but is no longer shown --
replaced by .fg4ua-generate-pw-btn, which sits where the old plain-text note used to.
2026-09-28: classes renamed fg4ua-reset-* -> fg4ua-generate-pw-* (shared/generic) since the
SAME button+note markup is now also used on the welcome page's own password card. */
.edd-blocks-form__reset-password .wp-generate-pw{display:none !important;}
.fg4ua-generate-pw-row{margin:6px 0 10px;white-space:nowrap;}
.fg4ua-generate-pw-btn{background:#EAF1FB;color:#1a1a1a;border:1px solid var(--blue);
border-radius:999px;padding:7px 16px;font-weight:700;font-size:13px;cursor:pointer;
line-height:1.3;white-space:nowrap;}
.fg4ua-generate-pw-btn:hover{background:#dbe9fa;}
/* The site owner's explicit copy (2026-09-28, recolored orange -> red, "or ENTER YOUR OWN."
casing): "or" lowercase, "ENTER YOUR OWN" caps, right after the button, inline on the same
row (not its own block line like the original plain-text version this replaced). */
.fg4ua-generate-pw-note{color:#c0392b;font-weight:600;font-size:12.5px;margin-left:6px;}
/* 2026-09-28 (welcome page only, site owner correction): the password card is too narrow for
the button + note to share one line without overflowing the card's right edge -- "or ENTER
YOUR OWN." (no longer preceded by a comma, since it's no longer joined to the button on the
same line) now sits on its own line below the button, left-aligned with everything else.
Explicit compact spacing per the site owner's own measurements, taken live before this change:
the button's own vertical padding was 7px top/bottom -> now 3.5px (exactly half). The gap
between the button's bottom edge and the password field's top edge was 16px, treated as "one
regular space" -- the note's own margin-top/bottom is 8px (exactly half of that), so it reads
as visually tighter/more compact than the page's normal line spacing elsewhere. */
/* 2026-09-28 (2nd site owner correction): all 3 gaps around this block (Create Password label
-> button, button -> note, note -> the password field below) matched exactly to the SAME 6px
the "Confirm Password" label already sits above ITS OWN field -- measured live before this
change (site owner's own reference point), not guessed. That 6px baseline is really this
form's own flex `gap` (.fg4ua-password-form{gap:6px}, shared by every label/field pair in the
form) -- the fix here is removing the EXTRA margins layered on top of that baseline (the base
.fg4ua-generate-pw-row's own 6px/10px top/bottom margin, and the note's old 8px margin),
rather than adding new spacing. */
.fg4ua-generate-pw-row-stacked{white-space:normal;margin:0;}
.fg4ua-generate-pw-row-stacked .fg4ua-generate-pw-btn{padding-top:3.5px;padding-bottom:3.5px;}
.fg4ua-generate-pw-row-stacked .fg4ua-generate-pw-note{display:block;margin:6px 0 0;text-align:left;}
/* Widened just for the reset-password step specifically (site owner's explicit "just a little,
enough so ...ENTER YOUR OWN. can all be on one line" spec) -- :has() targets the inner block
EDD's own login() function classes by action (wp-block-edd-login__rp), so the login/
lost-password steps keep their normal, already-compact 420px width untouched. */
.fg4ua-login-modal:has(.wp-block-edd-login__rp){width:min(460px,92vw);}
/* Save Password + the moved-in Close button side by side (2026-09-27, same "Close next to the
real action button" pattern already used for the login step -- see #edd-blocks-form__login
above). fg4uaEnhanceResetPasswordForm()'s companion code in fg4ua-checkout.js appends
.fg4ua-gc-actions into this exact element, right after Save Password. */
.edd-blocks-form__reset-password .reset-pass-submit{display:flex;flex-wrap:wrap;
align-items:center;gap:10px;}
.edd-blocks-form__reset-password .reset-pass-submit .fg4ua-gc-actions{margin:0;}