/* ==========================================================================
   99CentGigs "Liquid Glass" finish, shared by every page.
   Loaded after each page's own styles. It only changes surfaces (fill,
   rim, shine, shadow, corner shape), never layout, so nothing moves.

   Three materials, matching the tab-navigation reference:
     1. Green glass   - main actions (same green as the Search button)
     2. Clear glass   - secondary buttons, option pills, and cards
     3. Black glass   - dark buttons and anything sitting on black
   ========================================================================== */

:root{
  --lg-green: linear-gradient(180deg, #00a63d 0%, #00a63d 45%, #00a63d 100%);
  --lg-green-shadow: inset 0 1.5px 0 rgba(255,255,255,0.55), inset 0 -3px 8px rgba(0,0,0,0.18), 0 10px 22px -10px rgba(0,166,61,0.75);
  --lg-clear: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.70) 100%);
  --lg-clear-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -2px 6px rgba(20,21,26,0.05), 0 8px 20px -12px rgba(20,21,26,0.35), 0 1px 2px rgba(20,21,26,0.06);
  --lg-black: linear-gradient(180deg, #2a2b30 0%, #0d0d10 55%, #000 100%);
  --lg-black-shadow: inset 0 1.5px 0 rgba(255,255,255,0.20), inset 0 -2px 6px rgba(255,255,255,0.04), 0 12px 24px -12px rgba(0,0,0,0.6);
  --lg-card: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.64) 100%);
  --lg-card-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(20,21,26,0.04), 0 1px 2px rgba(20,21,26,0.04), 0 22px 44px -26px rgba(20,21,26,0.30);
}

/* Soft ambient light behind the page so frosted glass has something to catch */
body{
  background-image:
    radial-gradient(900px 520px at 8% -8%, rgba(0,166,61,0.09), transparent 62%),
    radial-gradient(760px 560px at 106% 18%, rgba(0,166,61,0.09), transparent 62%),
    radial-gradient(820px 520px at 50% 112%, rgba(20,21,26,0.05), transparent 62%);
  background-attachment:fixed;
}

/* ---------- 1. Primary actions: clear glass (like the reference lens) ----------
   See-through frosted body, bright white rim, top shine, soft drop shadow.
   Dark text so it always reads on the site's light backgrounds. */
.btn-signin, .continue-btn, .submit-btn, .contact-btn, .checkout-btn, .pay-btn, .apply-btn,
.btn-primary, .signup-btn, .compare-btn, .nav-post, .pay-now, .cta-quote, .load-more-btn,
.listing-actions .pay-now, .checkout-bar .checkout-btn, .seeker-section .hero-actions a{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.35) 100%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  color:#0b0b0d !important;
  font-weight:800 !important;
  border:1.5px solid rgba(255,255,255,0.95) !important;
  border-radius:16px !important;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,1),
    inset 0 -8px 16px rgba(20,21,26,0.07),
    inset 0 0 0 1px rgba(20,21,26,0.07),
    0 16px 30px -14px rgba(20,21,26,0.45),
    0 2px 6px rgba(20,21,26,0.08) !important;
  text-shadow:none !important;
  transition:transform .18s cubic-bezier(.34,1.45,.64,1), box-shadow .18s ease !important;
}
.btn-signin:hover, .continue-btn:hover, .submit-btn:hover, .contact-btn:hover, .checkout-btn:hover,
.pay-btn:hover, .apply-btn:hover, .btn-primary:hover, .signup-btn:hover, .compare-btn:hover,
.nav-post:hover, .pay-now:hover, .cta-quote:hover, .load-more-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,1),
    inset 0 -8px 16px rgba(20,21,26,0.07),
    inset 0 0 0 1px rgba(20,21,26,0.08),
    0 22px 36px -14px rgba(20,21,26,0.5),
    0 2px 6px rgba(20,21,26,0.08) !important;
}
.btn-signin:active, .continue-btn:active, .submit-btn:active, .contact-btn:active, .checkout-btn:active,
.pay-btn:active, .apply-btn:active, .cta-quote:active, .pay-now:active{ transform:translateY(0) scale(.98); }
.btn-signin svg, .nav-post svg, .continue-btn svg, .contact-btn svg, .cta-quote svg, .checkout-btn svg{ stroke:currentColor !important; }
/* ---------- 2. Clear glass: secondary buttons ---------- */
.cancel-btn, .nav-right a.cancel-btn, .btn-secondary, .save-btn, .google-btn, .add-link, .hours-copy-btn,
.day-chip, .report-modal-cancel, .notif-btn, .vh-request-btn, .li-edit-link{
  background:var(--lg-clear) !important;
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(20,21,26,0.12) !important;
  border-radius:16px !important;
  box-shadow:var(--lg-clear-shadow) !important;
  color:#14151a !important;
  transition:transform .18s cubic-bezier(.34,1.45,.64,1), box-shadow .15s ease, background .15s ease !important;
}
.cancel-btn:hover, .btn-secondary:hover, .save-btn:hover, .google-btn:hover, .add-link:hover,
.hours-copy-btn:hover, .day-chip:hover, .report-modal-cancel:hover, .notif-btn:hover,
.vh-request-btn:hover:hover{
  background:#fff !important; transform:translateY(-1px);
}
.add-link svg{ stroke:currentColor !important; }

/* Gold "I'm Interested" in the same glass finish */
.cta-interested{
  background:linear-gradient(180deg, #19c25a 0%, ) !important;
  color:#1a1400 !important;
  border:1px solid rgba(255,255,255,0.40) !important;
  border-radius:16px !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -3px 8px rgba(0,0,0,0.12), 0 10px 22px -10px rgba(0,132,58,0.7) !important;
}
.cta-interested.is-active{ background:var(--lg-black) !important; color:#19c25a !important; box-shadow:var(--lg-black-shadow) !important; }

/* Red glass for "Report" submit */
.report-modal-submit{
  background:linear-gradient(180deg, #e0605f 0%, #c94b4b 50%, #a83838 100%) !important;
  border:1px solid rgba(255,255,255,0.30) !important; border-radius:16px !important; color:#fff !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -3px 8px rgba(0,0,0,0.15), 0 10px 22px -10px rgba(201,75,75,0.65) !important;
}

/* ---------- 3. Black glass: dark buttons / buttons on black ---------- */
.how-cta a{
  background:var(--lg-black) !important;
  border:1.5px solid rgba(255,255,255,0.45) !important;
  border-radius:16px !important;
  box-shadow:var(--lg-black-shadow) !important;
}
/* Home hero buttons sit on black: clear glass tuned for dark backgrounds */
.hero-info .hero-actions a{
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,0.45) !important;
  border-radius:16px !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.35), inset 0 -2px 8px rgba(255,255,255,0.06), 0 12px 24px -12px rgba(0,0,0,0.7) !important;
  color:#fff !important;
}
.hero-info .hero-actions a:hover{ background:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08)) !important; }

/* ---------- Tabs & option pills (forms, filters, dashboard) ---------- */
.dash-tab.active, .tri-opt.active,
.type-opt input:checked + .pill, .chip-opt input:checked + .pill{
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%), var(--lg-black) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.55) !important;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,0.6), 0 10px 20px -10px rgba(0,0,0,0.6) !important;
}
.type-opt .pill, .chip-opt .pill{
  background:var(--lg-clear);
  border-color:rgba(20,21,26,0.12);
  box-shadow:var(--lg-clear-shadow);
}

/* ---------- Cards: frosted clear glass ----------
   No !important on the fill, so cards that deliberately use a color
   (e.g. a Special Offer box set inline) keep it. */
.card, .form-wrap, .listing-card, .service-card, .vol-card, .settings-card, .profile-card,
.signup-card, .confirm-card, .faq-card, .price-card, .lead-card, .applicant-card, .opt-card,
.empty-panel, .report-modal, .notif-panel, .how-step, .listing-row, .filters{
  background:var(--lg-card);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:var(--lg-card-shadow);
}
.card, .form-wrap, .listing-card, .service-card, .vol-card, .settings-card, .profile-card,
.signup-card, .confirm-card, .faq-card, .price-card, .lead-card, .applicant-card, .opt-card, .filters{
  border-radius:26px;
}
.listing-card, .service-card, .vol-card, .opt-card, .applicant-card, .lead-card{
  transition:transform .25s cubic-bezier(.34,1.45,.64,1), box-shadow .2s ease;
}
.listing-card:hover, .service-card:hover, .vol-card:hover, .opt-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95), 0 28px 50px -26px rgba(20,21,26,0.38);
}
/* The home page's step cards were outlined in black; keep them crisp on glass */
.how-step{ border:1px solid rgba(20,21,26,0.10) !important; border-radius:24px !important; }

/* Anything that must stay flat (full-bleed video, media frames) */
#videoCard.card{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#000; }

@media (prefers-reduced-motion: reduce){
  .listing-card, .service-card, .vol-card, .opt-card{ transition:none; }
  .listing-card:hover, .service-card:hover, .vol-card:hover, .opt-card:hover{ transform:none; }
}

/* ---------- Sliding green glass lens (used by tab tracks) ---------- */
.glass-lens{
  position:absolute; top:-5px; bottom:-5px; left:0; width:0; z-index:0; pointer-events:none; border-radius:999px;
  /* Clear glass, like the reference: see-through with a bright rim */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.07) 48%, rgba(255,255,255,0.02) 100%),
    rgba(255,255,255,0.05);
  -webkit-backdrop-filter:blur(2px) saturate(180%) brightness(1.18);
  backdrop-filter:blur(2px) saturate(180%) brightness(1.18);
  border:1.5px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.95),
    inset 0 -6px 12px rgba(255,255,255,0.18),
    inset 0 0 18px rgba(255,255,255,0.10),
    0 14px 28px -10px rgba(0,0,0,0.75);
  transition:left .5s cubic-bezier(.34,1.45,.64,1), width .5s cubic-bezier(.34,1.45,.64,1);
}
@media (prefers-reduced-motion: reduce){ .glass-lens{ transition:none; } }

/* ---------- Sign In / Create Account ---------- */
.auth-wrap .tabs{
  position:relative; display:flex; width:max-content; max-width:100%; margin:0 auto 16px; padding:5px; gap:2px;
  border-radius:999px; background:var(--lg-black); border:1px solid rgba(255,255,255,0.08); box-shadow:var(--lg-black-shadow);
}
.auth-wrap .tab{
  position:relative; z-index:1; background:transparent !important; box-shadow:none !important; opacity:1 !important;
  border-radius:999px !important; color:rgba(255,255,255,0.62) !important; font-weight:700 !important; padding:10px 22px !important;
  transition:color .25s ease !important;
}
.auth-wrap .tab.active{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.45); }
.auth-wrap .panel{
  background:var(--lg-card); border:1px solid rgba(255,255,255,0.75) !important; border-radius:28px !important;
  box-shadow:var(--lg-card-shadow) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
}

/* ---------- Form fields: frosted, with a green focus ring ---------- */
.field-group input:not([type=checkbox]):not([type=radio]):not([type=file]),
.field-group select, .field-group textarea, .link-row input{
  background:rgba(255,255,255,0.78) !important;
  border:1px solid rgba(20,21,26,0.12) !important;
  border-radius:16px !important;
  box-shadow:inset 0 1px 2px rgba(20,21,26,0.06), 0 1px 0 rgba(255,255,255,0.9) !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field-group input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.field-group select:focus, .field-group textarea:focus, .link-row input:focus{
  background:#fff !important;
  border-color:#00a63d !important;
  box-shadow:0 0 0 4px rgba(0,166,61,0.14), inset 0 1px 2px rgba(20,21,26,0.04) !important;
}
/* ---------- Glass pills: switchers, filters, labels ---------- */
/* Jobs & Gigs / Services / Volunteer switcher, dashboard tabs, filter chips:
   clear glass, and black glass (white text) when selected. */
.cat-switch a, .dash-tab, .filter-chip, .clear-all-chip, .tri-opt{
  background:var(--lg-clear) !important;
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(20,21,26,0.10) !important;
  box-shadow:var(--lg-clear-shadow) !important;
  color:#3a3c44 !important;
  transition:transform .18s cubic-bezier(.34,1.45,.64,1), background .2s ease, color .2s ease !important;
}
.cat-switch a:hover, .dash-tab:hover, .filter-chip:hover{ transform:translateY(-1px); color:#0b0b0d !important; }
.cat-switch a.current, .dash-tab.active, .tri-opt.active{
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0) 100%), var(--lg-black) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.55) !important;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,0.65), inset 0 -3px 8px rgba(255,255,255,0.06), 0 10px 20px -10px rgba(0,0,0,0.6) !important;
}

/* Small labels (Job · Full Time, Gig · One Time, categories, credentials):
   keep each label's own tint, add the glass shine, rim and lift. */
.lc-cat, .vc-cat, .vc-freq, .sc-cat, .ph-cat, .cat-pill, .li-info .cat-pill, .cred-chip, .status-pill, .req-pill{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.10) 60%, rgba(255,255,255,0) 100%) !important;
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95), 0 3px 8px -4px rgba(20,21,26,0.25);
}
.sc-catchip{
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:inset 0 1.5px 0 #fff, 0 6px 14px -6px rgba(0,0,0,0.45) !important;
}

/* ---------- Profile page action pair ---------- */
/* Request a Quote: green glass (same green as the Search button) */
.cta-row .cta-quote{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%),
    var(--lg-green) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,0.55) !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.6), inset 0 -6px 12px rgba(0,0,0,0.14), 0 16px 30px -14px rgba(0,166,61,0.65) !important;
  text-shadow:0 1px 1px rgba(0,60,20,0.3) !important;
}
/* I'm Interested: black glass with white text */
.cta-row .cta-interested, .cta-row .cta-interested.is-active{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0) 100%),
    var(--lg-black) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,0.45) !important;
  border-radius:16px !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.55), inset 0 -6px 12px rgba(255,255,255,0.05), 0 16px 30px -14px rgba(0,0,0,0.65) !important;
}
.cta-row .cta-interested svg, .cta-row .cta-quote svg{ stroke:#fff !important; }
/* ---------- Posting step tracker on phones ----------
   Five steps don't fit side by side on a phone, so show every step's number
   and only the current step's name. Nothing runs off the screen. */
@media (max-width:640px){
  .progress-steps{ justify-content:center !important; overflow:visible !important; padding:0 12px 4px !important; gap:6px !important; flex-wrap:nowrap !important; }
  .progress-steps .step:not(.active){ font-size:0 !important; gap:0 !important; }
  .progress-steps .step .num{ font-size:12px !important; flex-shrink:0; }
  .progress-steps .step-line{ width:14px !important; flex-shrink:1 !important; }
}
/* ---------- More glass surfaces (same finish everywhere) ---------- */
/* Black glass: banners, header boxes, the home "Post a Gig" button */
.glass-banner, .how-cta a, .scenario{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%),
    var(--lg-black) !important;
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,0.40) !important;
  border-radius:16px !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.45), inset 0 -6px 12px rgba(255,255,255,0.04), 0 16px 30px -14px rgba(0,0,0,0.6) !important;
}
.scenario{ border-radius:22px !important; }
.scenario::before{ display:none !important; }
.how-cta a:hover{ transform:translateY(-2px); }
.how-cta a:active{ border-color:rgba(255,255,255,0.6) !important; box-shadow:inset 0 2px 1px rgba(255,255,255,0.45), 0 10px 20px -12px rgba(0,0,0,0.6) !important; }
/* Black header boxes on the posting pages: add the glass shine and rim */
.hero-strip{
  background-image:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Green glass: the green panels and highlight cards (same green as the Search button) */
.why-panel, .sc-card.us, .mark.yes{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%),
    var(--lg-green) !important;
  border:1.5px solid rgba(255,255,255,0.55) !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.6), inset 0 -6px 12px rgba(0,0,0,0.14), 0 18px 34px -16px rgba(0,166,61,0.6) !important;
}
.sc-card.us{ border-radius:16px !important; }
.why-panel{ border-radius:28px !important; }
.mark.yes{ border-width:1px !important; box-shadow:inset 0 1.5px 1px rgba(255,255,255,0.7), 0 4px 10px -4px rgba(0,166,61,0.6) !important; }

/* Red glass: "Other Job Sites" card */
.sc-card.them{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #9a2c2c 0%, #7a2020 55%, #5e1616 100%) !important;
  border:1.5px solid rgba(255,255,255,0.35) !important;
  border-radius:16px !important;
  box-shadow:inset 0 2px 1px rgba(255,255,255,0.4), inset 0 -6px 12px rgba(0,0,0,0.18), 0 18px 34px -16px rgba(0,0,0,0.6) !important;
}

/* Clear glass: comparison table, "no" marks, the days field, checkout's day picker */
.comp-table{
  background:var(--lg-card) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.75) !important;
  border-radius:24px !important;
  box-shadow:var(--lg-card-shadow) !important;
}
.mark.no, .stepper{
  background:var(--lg-clear) !important;
  border:1px solid rgba(20,21,26,0.10) !important;
  box-shadow:var(--lg-clear-shadow) !important;
}
.stepper{ border-radius:14px !important; }
.days-input-row input{
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.82)) !important;
  border:1.5px solid rgba(255,255,255,0.9) !important;
  border-radius:12px !important;
  box-shadow:inset 0 2px 1px #fff, inset 0 -3px 6px rgba(20,21,26,0.08), 0 8px 18px -8px rgba(0,0,0,0.6) !important;
  font-weight:800;
}
/* ---------- Segmented choices (same as Sign In / Create Account) ----------
   Black glass track; a clear glass lens (js/segmented.js) slides to the
   chosen option. Options sit on the track with light text. */
.seg-track{
  position:relative !important;
  padding:6px !important;
  gap:4px !important;
  background:var(--lg-black) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:24px !important;
  box-shadow:var(--lg-black-shadow) !important;
}
.type-options.seg-track, .atmosphere-options.seg-track, .tri-toggle.seg-track, .cat-switch.seg-track{ border-radius:999px !important; }
.type-options.seg-track, .cat-switch.seg-track{ display:inline-flex !important; flex-wrap:wrap; max-width:100%; }
.type-options.seg-track{ border-radius:22px !important; }
.seg-track .seg-item{ position:relative; z-index:1; }
.seg-lens{ bottom:auto !important; z-index:0 !important; }

/* Option faces: transparent on the black track, light text */
.seg-track .seg-item .pill, .seg-track .seg-item .card, .seg-track .seg-item.tri-opt, .seg-track a.seg-item{
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:rgba(255,255,255,0.68) !important;
  transform:none !important;
  transition:color .25s ease !important;
}
.seg-track .seg-item .card .title{ color:rgba(255,255,255,0.88) !important; }
.seg-track .seg-item .card .example{ color:rgba(255,255,255,0.55) !important; }
.seg-track .seg-item:hover .pill, .seg-track .seg-item:hover .card, .seg-track .seg-item.tri-opt:hover, .seg-track a.seg-item:hover{ color:#fff !important; }

/* Chosen option: white text under the glass lens */
.seg-track .seg-on .pill, .seg-track .seg-on .card, .seg-track .seg-on.tri-opt, .seg-track a.seg-on{
  color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.45);
}
.seg-track .seg-on .card .title{ color:#fff !important; }
.seg-track .seg-on .card .example{ color:rgba(255,255,255,0.82) !important; }
.seg-track .seg-item input:focus-visible + .pill,
.seg-track .seg-item input:focus-visible + .card{ outline:2px solid rgba(255,255,255,0.85) !important; outline-offset:2px; }
/* ---------- Header: Sign In + Post a Listing as one glass track ---------- */
nav .hdr-seg{
  position:relative !important; display:inline-flex !important; align-items:center; gap:2px !important;
  padding:4px !important; border-radius:999px !important;
  background:var(--lg-black) !important; border:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:var(--lg-black-shadow) !important;
}
nav .hdr-seg .hdr-lens{ bottom:auto !important; z-index:0 !important; border-radius:999px !important; }
nav .hdr-seg > a.hdr-item{
  position:relative; z-index:1;
  background:transparent !important; border:1px solid transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:rgba(255,255,255,0.72) !important; opacity:1 !important;
  padding:7px 14px !important; border-radius:999px !important; margin:0 !important;
  font-size:13.5px !important; line-height:1.2 !important; letter-spacing:-0.01em !important; text-transform:none !important;
  font-weight:600 !important; white-space:nowrap; text-decoration:none !important; text-shadow:none !important;
  transform:none !important; transition:color .25s ease !important;
}
nav .hdr-seg > a.hdr-on{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.45) !important; }
nav .hdr-seg > a svg{ stroke:currentColor !important; }
/* On phones the track spans the row under the logo, items share it evenly */
@media (max-width:640px){
  nav .hdr-seg{ width:100% !important; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.08) !important; padding-top:5px !important; margin-left:0 !important; }
  nav .hdr-seg > a.hdr-item{ flex:1 1 auto; text-align:center; justify-content:center; display:inline-flex; align-items:center; gap:6px; padding:7px 10px !important; font-size:13px !important; }
}
/* ---------- Home hero choices on the same glass track ---------- */
.hero-info .hero-actions.hdr-seg{
  position:relative !important; display:inline-flex !important; gap:4px !important; padding:6px !important;
  border-radius:24px !important; background:var(--lg-black) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.18), 0 18px 36px -16px rgba(0,0,0,0.8) !important;
}
.hero-info .hero-actions.hdr-seg .hdr-lens{ bottom:auto !important; z-index:0 !important; }
.hero-info .hero-actions.hdr-seg > a.hdr-item{
  position:relative; z-index:1;
  background:transparent !important; border:1px solid transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:rgba(255,255,255,0.72) !important; padding:14px 22px !important; border-radius:18px !important;
  font-size:15px !important; font-weight:700 !important; white-space:nowrap; transform:none !important;
  transition:color .25s ease !important;
}
.hero-info .hero-actions.hdr-seg > a.hdr-on{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.5) !important; }
@media (max-width:640px){
  .hero-info .hero-actions.hdr-seg{ display:flex !important; flex-direction:column; width:100%; max-width:360px; margin-left:auto; margin-right:auto; }
  .hero-info .hero-actions.hdr-seg > a.hdr-item{ width:100%; text-align:center; justify-content:center; }
}
/* Header: Sign In / My Account / Sign Out are plain white text (no lens) */
nav .hdr-seg > a.hdr-item:not(.btn-signin):not(.nav-post){ color:#fff !important; }
nav .hdr-seg > a.hdr-item:not(.btn-signin):not(.nav-post):hover{ text-decoration:underline !important; text-underline-offset:4px; }
/* Header Sign In / My Account / Sign Out: plain white text, never a pill
   (ID-level selectors so no older button style can win) */
nav .hdr-seg > a#signinLink, nav .hdr-seg > a#siteSignOutLink{
  background:transparent !important; background-image:none !important;
  border:1px solid transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:#fff !important; opacity:1 !important;
}
nav .hdr-seg > a#signinLink:hover, nav .hdr-seg > a#siteSignOutLink:hover{
  background:transparent !important; text-decoration:underline !important; text-underline-offset:4px;
}
/* ---------- Home page buttons: same as Sign In / Create Account ----------
   Black glass pill track with the clear glass lens bulging past its edges. */
.hero-info .hero-actions.hdr-seg{ border-radius:999px !important; }
.hero-info .hero-actions.hdr-seg > a.hdr-item{ border-radius:999px !important; }
@media (max-width:640px){ .hero-info .hero-actions.hdr-seg{ border-radius:32px !important; } }
.how-cta.hdr-seg, .seeker-section .hero-actions.hdr-seg{
  position:relative !important; display:flex !important; width:max-content; max-width:100%;
  margin-left:auto !important; margin-right:auto !important; padding:6px !important; gap:4px !important;
  border-radius:999px !important; background:var(--lg-black) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.18), 0 18px 36px -16px rgba(0,0,0,0.8) !important;
}
.how-cta.hdr-seg .hdr-lens, .seeker-section .hero-actions.hdr-seg .hdr-lens{ bottom:auto !important; z-index:0 !important; }
.how-cta.hdr-seg > a.hdr-item, .seeker-section .hero-actions.hdr-seg > a.hdr-item{
  position:relative; z-index:1;
  background:transparent !important; border:1px solid transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.5) !important;
  padding:14px 24px !important; border-radius:999px !important; font-size:15px !important; font-weight:700 !important;
  white-space:nowrap; transform:none !important; transition:color .25s ease !important;
}