.gas-form{max-width:480px;font-size:16px;}
.gas-form label{font-weight:600;}
.gas-input{width:100%;padding:.6em .7em;margin-top:.3em;border:1.5px solid var(--gas-accent-border,#CFE3D2);border-radius:4px;font-size:1em;box-sizing:border-box;}
.gas-button{background:var(--gas-accent,#3F8353);color:#fff;border:none;padding:.7em 1.4em;border-radius:4px;font-size:1em;cursor:pointer;}
.gas-button:hover{background:var(--gas-accent-dark,#193421);}
.gas-fineprint{font-size:.85em;opacity:.75;}
.gas-notice{background:var(--gas-accent-tint,#F7FBF7);border-radius:6px;padding:1em 1.2em;margin-bottom:1.2em;}
.gas-notice-success{background:#E4F6E2;}
.gas-notice-error{background:#fbeaea;color:#7a1f1f;}

/* Sponsor-attribution banner on the signup page (2026-09-12, restyled
   same day) — lets a visitor confirm who they'll be credited to before
   submitting, so a direct/bookmarked visit doesn't silently break the
   referral chain the real inviter was expecting credit for. Matches the
   dashboard's own admin-preview banner (see the "Previewing X's
   dashboard" notice in GAS_Frontend::render_dashboard()) — light-yellow
   callout, amber left border, one short line — rather than a full-bleed
   warning block, so it reads as a helpful heads-up, not an alarm. */
.gas-invited-by-notice{max-width:480px;border-left:4px solid #d98500;padding:8px 12px;background:#fff8e5;margin-bottom:1.2em;font-size:.95em;}
.gas-dashboard h2{margin-top:1.6em;}
.gas-code-card{border:1.5px solid var(--gas-accent-border,#CFE3D2);border-radius:6px;padding:1em 1.2em;margin-bottom:1em;}
.gas-stat-row{display:flex;gap:1.5em;margin-top:.6em;flex-wrap:wrap;}
.gas-stat-num{display:block;font-weight:700;font-size:1.4em;color:var(--gas-accent,#3F8353);}
.gas-stat-label{display:block;font-size:.8em;opacity:.75;}

/* Section panels + real data-table styling — added 2026-09-10, replacing
   dashboard tables that were rendering as bare/unstyled because they used
   `widefat striped`, a WP-admin-only class with zero CSS on the front
   end. Visual language deliberately adapted (not copy-pasted, since these
   are real multi-column <table> markup rather than Home's 2-column grid
   rows) from Home's own proven .thb-panel/.thb-spec-table/.thb-stat-row
   patterns (homes.gemzonline.com/content/style.css) — reusing the
   existing --gas-accent/--gas-accent-tint variables throughout so this
   stays theme-agnostic rather than hardcoding either site's palette. */
.gas-panel{background:var(--gas-accent-tint,#F7FBF7);border-radius:10px;padding:1.4em 1.6em;margin:1.6em 0;}
.gas-panel h2,.gas-panel h3{margin-top:0;padding-bottom:.5em;border-bottom:2px solid var(--gas-accent,#3F8353);}
.gas-panel:first-child{margin-top:0;}
.gas-table-wrap{border:1.5px solid var(--gas-accent,#3F8353);border-radius:8px;overflow:hidden;margin:1em 0;background:#fff;}
.gas-table{width:100%;border-collapse:collapse;font-size:.95em;}
.gas-table th{background:var(--gas-accent,#3F8353);color:#fff;text-align:left;padding:.8em 1em;font-weight:700;}
.gas-table td{padding:.8em 1em;border-bottom:1px solid var(--gas-accent-tint,#F7FBF7);}
.gas-table tbody tr:last-child td{border-bottom:0;}
.gas-table tbody tr:nth-child(odd){background:var(--gas-accent-tint,#F7FBF7);}
@media (max-width:600px){
	.gas-panel{padding:1.1em 1.2em;}
	.gas-table{font-size:.85em;}
	.gas-table th,.gas-table td{padding:.6em .7em;}
}

/* Signup/refer toggle (merged page) — --gas-accent lets each site theme
   this to its own palette (e.g. via that page's Elementor custom CSS)
   instead of hardcoding one site's color into this shared plugin file. */
.gas-signup-toggle{display:flex;gap:.6em;margin-bottom:1.3em;}
.gas-toggle-btn{flex:1;padding:.8em 1em;border:1.5px solid var(--gas-accent,#3F8353);border-radius:8px;background:#fff;color:var(--gas-accent,#3F8353);font-weight:700;cursor:pointer;font-size:1em;transition:background .15s ease,color .15s ease;}
.gas-toggle-btn:hover{opacity:.85;}
.gas-toggle-btn.gas-toggle-active{background:var(--gas-accent,#3F8353);color:#fff;}
.gas-payout-range{background:var(--gas-accent-tint,#F7FBF7);border-radius:10px;padding:1em 1.3em;margin-bottom:1.3em;font-size:1.05em;}
.gas-referral-fields{border-top:1.5px dashed var(--gas-accent-border,#CFE3D2);margin-top:1em;padding-top:1em;}
.gas-referral-fields h3{margin-top:0;}

/* Blurb/capability tap-to-reveal icons on each per-link dashboard card —
   no persistent legend, the label only shows on hover/focus/tap. */
.gas-capability-icons{margin:.4em 0;}
.gas-popover-icon{position:relative;display:inline-block;cursor:pointer;color:var(--gas-accent,#3F8353);margin-right:.4em;vertical-align:middle;}
.gas-popover-icon.dashicons{font-size:20px;width:20px;height:20px;line-height:20px;}
.gas-popover{display:none;position:absolute;bottom:135%;left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;padding:.35em .7em;border-radius:4px;font-size:.75rem;font-weight:400;white-space:nowrap;max-width:220px;white-space:normal;z-index:20;}
.gas-popover-icon:hover .gas-popover,
.gas-popover-icon:focus .gas-popover,
.gas-popover-icon.gas-open .gas-popover{display:block;}

/* Dashboard restructure (2026-09-10) — subnav tying the 4
   dashboard-family pages together, the Overview hero stat strip, share
   buttons, and downline-tree indentation. */
.gas-dashboard-nav{display:flex;gap:.3em;flex-wrap:wrap;margin-bottom:1.4em;border-bottom:1.5px solid var(--gas-accent-border,#CFE3D2);}
.gas-dashboard-nav-link{padding:.7em 1em;font-weight:600;color:var(--gas-accent,#3F8353);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1.5px;}
.gas-dashboard-nav-link:hover{background:var(--gas-accent-tint,#F7FBF7);}
.gas-dashboard-nav-active{border-bottom-color:var(--gas-accent,#3F8353);}

.gas-hero{border:2px solid var(--gas-accent,#3F8353);}
.gas-hero .gas-stat-num{font-size:1.8em;}

.gas-share-row{display:flex;gap:.6em;flex-wrap:wrap;margin:.8em 0 1.2em;}
.gas-share-btn{display:inline-flex;align-items:center;gap:.4em;background:var(--gas-accent,#3F8353);color:#fff;border:none;border-radius:999px;padding:.55em 1.2em;font-size:.9em;font-weight:600;cursor:pointer;text-decoration:none;}
.gas-share-btn:hover{background:var(--gas-accent-dark,#193421);color:#fff;}
.gas-share-btn .dashicons{width:18px;height:18px;font-size:18px;line-height:18px;}
.gas-share-label{color:#fff;}

.gas-team-indent td:first-child{padding-left:2.4em;color:inherit;opacity:.9;}

/* Rolled-up "+" disclosure (2026-09-10) — native <details>/<summary>,
   used for "Add a referral"/"Add a team member" so both forms stay out
   of the way until someone actually wants them. */
.gas-disclosure{border:1.5px solid var(--gas-accent-border,#CFE3D2);border-radius:8px;background:#fff;}
.gas-disclosure summary{list-style:none;cursor:pointer;padding:.8em 1.1em;font-weight:700;color:var(--gas-accent,#3F8353);display:flex;align-items:center;gap:.5em;}
.gas-disclosure summary::-webkit-details-marker{display:none;}
.gas-disclosure summary .gas-fineprint{font-weight:400;}
.gas-disclosure-plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gas-accent,#3F8353);color:#fff;font-size:1.1em;line-height:1;flex-shrink:0;}
.gas-disclosure[open] .gas-disclosure-plus{background:var(--gas-accent-dark,#193421);}
.gas-disclosure[open] summary{border-bottom:1.5px solid var(--gas-accent-border,#CFE3D2);}
.gas-disclosure-body{padding:.2em 1.1em 1.1em;}

@media (max-width:600px){
	.gas-dashboard-nav-link{padding:.6em .7em;font-size:.9em;}
	.gas-share-btn{padding:.5em .8em;font-size:.85em;}
}

/* Get a Quote (2026-09-11) — this shortcode was silently missing from
   STYLED_SHORTCODES (see class-gas-frontend.php's note) so none of this
   ever loaded before; centers the whole card at a comfortable reading
   width instead of letting the tinted panel stretch full-width while
   the 480px form floats inside it looking off-balance. */
.gas-quote-panel{max-width:560px;margin:1.6em auto;}
.gas-quote-panel .gas-form{max-width:none;}
.gas-lead-intro p{font-size:1.05em;opacity:.85;margin-top:0;}

/* Team-building payout example (2026-09-12) — live-computed dollar figures
   (see GAS_Frontend::render_team_payout_example()), styled as a small
   callout card so it reads as "the current rate" rather than plain body
   copy. */
.gas-team-payout-example{max-width:560px;margin:1.2em auto;padding:1em 1.4em;background:var(--gas-accent-bg,#EEF6F0);border:1.5px solid var(--gas-accent-border,#CFE3D2);border-radius:8px;text-align:center;font-size:1.05em;}

/* Build a Team page (2026-09-12) — hook-banner cards, CTA buttons, and
   readable section width. Reuses the site's --gas-accent theme variables
   so it matches whichever color theme is active, same as everything else
   in this file. */
.gas-team-section{max-width:720px;margin:0 auto 2.4em;padding:0 1em;}
.gas-team-section h2{font-size:1.5em;margin-bottom:.5em;}
.gas-team-section p{line-height:1.6;}
.gas-hook-grid{display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;max-width:960px;margin:1.4em auto;padding:0 1em;}
.gas-hook-card{flex:1 1 260px;max-width:320px;background:var(--gas-accent-bg,#EEF6F0);border:1.5px solid var(--gas-accent-border,#CFE3D2);border-radius:12px;padding:1.4em;}
.gas-hook-icon{font-size:1.8em;margin-bottom:.4em;}
.gas-hook-card h3{margin:0 0 .5em;font-size:1.1em;}
.gas-hook-card p{margin:0;font-size:.95em;color:#444;}
.gas-cta-btn{display:inline-block;background:var(--gas-accent,#3F8353);color:#fff !important;font-weight:700;font-size:.95em;padding:.7em 1.5em;border-radius:999px;text-decoration:none;text-align:center;}
.gas-cta-btn:hover{background:var(--gas-accent-dark,#193421);color:#fff !important;}
.gas-cta-row{text-align:center;margin:1.6em 0;}
.gas-cta-row .gas-cta-btn{margin:.3em .5em;}
.gas-cta-btn-small{display:inline-block;background:var(--gas-accent,#3F8353);color:#fff !important;font-weight:700;font-size:.8em;padding:.4em 1em;border-radius:999px;text-decoration:none;}
.gas-cta-btn-small:hover{background:var(--gas-accent-dark,#193421);color:#fff !important;}