/* TNC Wedding Suite -- shared brand tokens + core styles, ported from
   the finalized Top Notch Celebrations couple-dashboard design so the
   WordPress version matches it exactly. */
.tnc-app, .tnc-marketplace, .tnc-auth-wrap, .tnc-become-wrap {
	--tnc-oxblood:#3A1A17;
	--tnc-dark:#1F0E0C;
	--tnc-soft:#5C2B24;
	--tnc-gold:#C6A15B;
	--tnc-light-gold:#E5CF9A;
	--tnc-ivory:#FBF8F1;
	--tnc-cream:#F3EBDD;
	--tnc-rose:#E9D8D4;
	--tnc-text:#383334;
	--tnc-muted:#756D6D;
	--tnc-border:#E5DED3;
	--tnc-white:#FFFFFF;
	--tnc-green:#5F7A63;
	--tnc-rose-dark:#9B6F68;
	--tnc-blue:#4C6779;
	font-family:Arial,Helvetica,sans-serif;
	color:var(--tnc-text);
	box-sizing:border-box;
}
.tnc-app *, .tnc-marketplace *, .tnc-auth-wrap *, .tnc-become-wrap * { box-sizing:border-box; }
.tnc-app h1, .tnc-app h2, .tnc-app h3, .tnc-app h4, .tnc-app h5,
.tnc-marketplace h1, .tnc-marketplace h2, .tnc-marketplace h3,
.tnc-become-wrap h1, .tnc-become-wrap h2, .tnc-become-wrap h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; color:var(--tnc-dark); margin:0; }

/* FIELDS */
.tnc-field{ min-width:0; margin-bottom:14px; }
.tnc-field.full{ grid-column:1/-1; }
.tnc-field label{ display:block; margin:0 0 8px; color:var(--tnc-text); font-size:12px; font-weight:700; letter-spacing:.2px; }
.tnc-field input:not([type="radio"]):not([type="checkbox"]),.tnc-field select,.tnc-field textarea{
	width:100%; border:1px solid var(--tnc-border) !important; border-radius:0 !important;
	background:#fff !important; color:var(--tnc-text) !important; font-family:Arial,Helvetica,sans-serif !important; box-shadow:none !important;
}
.tnc-field input:not([type="radio"]):not([type="checkbox"]),.tnc-field select{ height:48px !important; min-height:48px !important; font-size:14px !important; padding:0 14px !important; }
.tnc-field select{
	cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
	background-image:linear-gradient(45deg,transparent 50%,var(--tnc-oxblood) 50%),linear-gradient(135deg,var(--tnc-oxblood) 50%,transparent 50%) !important;
	background-position:calc(100% - 20px) 20px, calc(100% - 14px) 20px !important;
	background-size:6px 6px,6px 6px !important; background-repeat:no-repeat !important;
}
.tnc-field textarea{ min-height:90px; padding:12px 14px !important; font-size:13px !important; line-height:1.6; resize:vertical; }
.tnc-field input:not([type="radio"]):not([type="checkbox"]):focus,.tnc-field select:focus,.tnc-field textarea:focus{ outline:none !important; border-color:var(--tnc-gold) !important; box-shadow:0 0 0 3px rgba(198,161,91,.10) !important; }

.tnc-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
@media(max-width:640px){ .tnc-form-grid{ grid-template-columns:1fr; } .tnc-field.full{ grid-column:auto; } }

/* PASSWORD FIELDS WITH SHOW/HIDE TOGGLE -- wraps a .tnc-field's input so a
   "Show"/"Hide" button can sit inside it without disturbing the field's
   own border/height rules above; see tnc-account-widget.js-style inline
   script in auth-shell.php / vendor-auth-shell.php for the toggle logic. */
.tnc-pw-wrap{ position:relative; }
.tnc-pw-wrap input{ padding-right:56px !important; }
.tnc-pw-toggle{
	position:absolute; top:0; right:0; bottom:0; width:52px;
	display:flex; align-items:center; justify-content:center;
	background:transparent; border:0; cursor:pointer; padding:0;
	color:var(--tnc-muted); font-size:11px; font-weight:700; letter-spacing:.2px;
	touch-action:manipulation;
}
.tnc-pw-toggle:hover{ color:var(--tnc-oxblood); }
.tnc-pw-toggle svg{ width:18px; height:18px; }
.tnc-pw-toggle .tnc-pw-icon-off{ display:none; }
.tnc-pw-toggle.is-visible .tnc-pw-icon-on{ display:none; }
.tnc-pw-toggle.is-visible .tnc-pw-icon-off{ display:block; }
.tnc-field-error{ color:#B3372C; font-size:11.5px; margin:6px 0 0; display:none; }
.tnc-field-error.is-visible{ display:block; }

/* BUTTONS */
.tnc-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	min-height:46px; padding:0 22px; border:1px solid var(--tnc-oxblood);
	background:var(--tnc-oxblood); color:#fff !important; font-size:12px; font-weight:700;
	letter-spacing:.3px; text-decoration:none !important; cursor:pointer; transition:.2s ease;
	/* Without this, iPad/tablet Safari can treat a single tap as the start
	   of a double-tap-to-zoom gesture and swallow the click instead of
	   firing it -- the classic "button doesn't respond on tablet" bug.
	   This tells the browser a tap here is always a single action. */
	touch-action:manipulation;
}
.tnc-btn:hover{ background:var(--tnc-dark); border-color:var(--tnc-dark); color:#fff; }
.tnc-btn.tnc-btn-gold{ background:var(--tnc-gold); border-color:var(--tnc-gold); }
.tnc-btn.tnc-btn-gold:hover{ background:#AE8B4B; border-color:#AE8B4B; }
.tnc-btn.tnc-btn-outline{ background:#fff; color:var(--tnc-oxblood) !important; }
.tnc-btn.tnc-btn-outline:hover{ background:var(--tnc-ivory); }
/* Block / Delete -- a deliberately different color from the outline
   button so a destructive action doesn't blend in with "Edit"/"View"
   next to it, without resorting to a harsh red outside the palette. */
.tnc-btn.tnc-btn-danger{ background:#fff; border-color:var(--tnc-rose-dark); color:var(--tnc-rose-dark) !important; }
.tnc-btn.tnc-btn-danger:hover{ background:var(--tnc-rose-dark); border-color:var(--tnc-rose-dark); color:#fff !important; }
.tnc-btn.tnc-btn-small{ min-height:36px; padding:0 14px; font-size:10px; }
.tnc-btn.tnc-btn-danger{ background:#fff; border-color:var(--tnc-rose-dark); color:var(--tnc-rose-dark) !important; }
.tnc-btn.tnc-btn-danger:hover{ background:var(--tnc-rose); }

/* TAGS */
.tnc-tag{ display:inline-block; padding:4px 9px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border:1px solid var(--tnc-border); color:var(--tnc-muted); margin-right:6px; margin-bottom:4px; }
.tnc-tag.event-tag{ border-color:var(--tnc-oxblood); color:var(--tnc-oxblood); }
.tnc-tag.type-advance{ border-color:var(--tnc-gold); color:#93732F; }
.tnc-tag.type-midway{ border-color:var(--tnc-blue); color:var(--tnc-blue); }
.tnc-tag.type-final{ border-color:var(--tnc-rose-dark); color:var(--tnc-rose-dark); }
.tnc-tag.type-full{ border-color:var(--tnc-oxblood); color:var(--tnc-oxblood); }

.tnc-status-flag{ display:inline-block; margin-top:10px; padding:6px 16px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:20px; }
.tnc-status-flag.within{ background:#E8EFE9; color:var(--tnc-green); }
.tnc-status-flag.over{ background:var(--tnc-rose); color:var(--tnc-rose-dark); }

.tnc-empty-note{ color:var(--tnc-muted); font-size:12px; padding:10px 0; }
.tnc-remove-link{ border:0; background:none; color:var(--tnc-rose-dark); font-size:11px; cursor:pointer; opacity:.7; padding:0; touch-action:manipulation; }
.tnc-remove-link:hover{ opacity:1; text-decoration:underline; }

/* Login / Register -- two-column "professional SaaS login" shell: a
   branded panel on the left (hidden on narrow screens) and the actual
   Log In / Create Account forms on the right, sharing the same .tnc-field
   input styling used throughout the rest of the app. */
.tnc-auth-wrap{ padding:48px 20px; }
/* Defensive override -- the Flatsome theme (or a per-page theme option
   outside this plugin's own files) was painting a dark green background
   behind this card on the live site. None of our own CSS sets one here,
   so rather than keep chasing exactly which theme setting does, force
   every Flatsome wrapper that contains this login/register card back to
   plain white -- scoped with :has() so it only applies on a page that
   actually has .tnc-auth-wrap in it, never site-wide. */
#wrapper:has( .tnc-auth-wrap ),
#main:has( .tnc-auth-wrap ),
#content:has( .tnc-auth-wrap ),
.content-area:has( .tnc-auth-wrap ) {
	background:var(--tnc-ivory, #FBF8F1) !important;
	background-image:none !important;
}
/* Match the warm ivory the "Become a Member" page already uses
   (.tnc-become-wrap, below) so the two Log In / Create Account
   entry points look like one consistent design instead of two. */
.tnc-auth-wrap{ background:var(--tnc-ivory, #FBF8F1); }
.tnc-auth-shell{
	max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
	background:#fff; border:1px solid var(--tnc-border); box-shadow:0 22px 60px rgba(31,14,12,.10);
	overflow:hidden; min-height:0;
}

.tnc-auth-brand{
	position:relative; overflow:hidden; padding:48px 42px;
	display:flex; align-items:center;
	background:linear-gradient(160deg, var(--tnc-oxblood), var(--tnc-dark));
	color:#fff;
}
.tnc-auth-brand::before,.tnc-auth-brand::after{ content:""; position:absolute; border:1px solid rgba(255,255,255,.10); border-radius:50%; }
.tnc-auth-brand::before{ width:200px; height:200px; left:-70px; top:-70px; }
.tnc-auth-brand::after{ width:240px; height:240px; right:-70px; bottom:-90px; border-color:rgba(255,255,255,.08); }
.tnc-auth-brand-inner{ position:relative; z-index:1; }
.tnc-auth-brand-mark{ width:44px; height:44px; border:1px solid var(--tnc-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--tnc-gold); font-size:17px; margin-bottom:22px; }
.tnc-auth-brand-label{ text-transform:uppercase; letter-spacing:2px; font-size:10px; font-weight:700; color:var(--tnc-light-gold); margin-bottom:10px; }
.tnc-auth-brand-name{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:29px; line-height:1.28; color:#fff; margin:0 0 16px; }
.tnc-auth-brand-tag{ font-size:13px; line-height:1.7; color:#d7e3df; margin:0 0 28px; max-width:300px; }
.tnc-auth-brand-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:300px; }
.tnc-auth-brand-list li{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.6; color:#eef2ef; }
.tnc-auth-brand-check{ flex-shrink:0; width:19px; height:19px; border-radius:50%; background:rgba(198,161,91,.20); color:var(--tnc-gold); display:flex; align-items:center; justify-content:center; font-size:10px; margin-top:1px; }

.tnc-auth-panel{ padding:48px 42px; display:flex; flex-direction:column; justify-content:center; }
.tnc-auth-tabs{ display:flex; gap:22px; border-bottom:1px solid var(--tnc-border); margin-bottom:24px; }
.tnc-auth-tab{ background:none; border:0; padding:0 0 12px; font-size:13px; font-weight:700; color:var(--tnc-muted); cursor:pointer; border-bottom:2px solid transparent; letter-spacing:.2px; }
.tnc-auth-tab.active{ color:var(--tnc-oxblood); border-bottom-color:var(--tnc-gold); }
.tnc-auth-form-title{ font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:21px; margin:0 0 6px; color:var(--tnc-dark); }
.tnc-auth-form-sub{ font-size:12.5px; color:var(--tnc-muted); margin:0 0 22px; line-height:1.6; }
.tnc-auth-submit{ width:100%; margin-top:10px; height:48px; }
.tnc-auth-error{ background:var(--tnc-rose); border-left:3px solid var(--tnc-rose-dark); color:var(--tnc-rose-dark); padding:10px 13px; font-size:12px; margin-bottom:20px; }
/* "Request Review" button under a blocked-account error, and the
   confirmation once that request is sent -- kept in tnc-base.css (unlike
   .tnc-lead-success in tnc-marketplace.css) since both auth-shell.php and
   vendor-auth-shell.php render on pages that don't always load
   tnc-marketplace.css (e.g. the "Become a Member" landing page). */
.tnc-auth-review-form{ margin:-10px 0 20px; }
.tnc-auth-success{ background:#E8EFE9; border-left:3px solid var(--tnc-green); color:var(--tnc-green); padding:10px 13px; font-size:12px; margin-bottom:20px; }
.tnc-optional-tag{ color:var(--tnc-muted); font-weight:400; text-transform:none; letter-spacing:0; }

@media(max-width:820px){
	/* Matches .tnc-become-wrap-solo's own mobile padding exactly (see
	   its @media(max-width:640px) rule below), so the Login page and
	   the Become a Member page keep identical spacing around the card
	   on phones -- both templates that reach .tnc-auth-wrap use the
	   single-column "solo" shell, so there's no edge-to-edge two-column
	   variant left here to preserve. */
	.tnc-auth-wrap{ padding:40px 16px; }
	.tnc-auth-shell{ grid-template-columns:1fr; box-shadow:none; border:0; max-width:none; }
	.tnc-auth-brand{ padding:34px 26px; }
	.tnc-auth-brand-tag,.tnc-auth-brand-list{ max-width:none; }
	.tnc-auth-panel{ padding:34px 26px; }
}

/* Single-column "elegant card" variant -- no branded sales panel. A plain
   centred header (crest + name + tagline, sitting on the page background,
   not inside the card) above the Log In / Create Account card
   (templates/auth-shell.php, the couple's Log In / Create Account screen).
   Square corners throughout (card, crest mark, inputs, button) are
   deliberate -- that's the "elegant" look the owner asked for, not a
   default left unstyled. */
.tnc-auth-solo-wrap{ max-width:460px; margin:0 auto; }
.tnc-auth-solo-head{ text-align:center; margin-bottom:28px; }
.tnc-auth-crest{
	width:46px; height:46px; border-radius:50%; border:1px solid var(--tnc-gold);
	display:flex; align-items:center; justify-content:center; color:var(--tnc-gold);
	font-size:18px; margin:0 auto 18px;
}
.tnc-auth-brandname{
	font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:27px;
	color:var(--tnc-oxblood); margin:0 0 10px;
}
.tnc-auth-tagline{ font-size:13px; color:var(--tnc-muted); margin:0; line-height:1.6; }
.tnc-auth-shell-solo{
	grid-template-columns:1fr; max-width:460px; border:1px solid var(--tnc-border);
	box-shadow:0 30px 70px rgba(18,61,54,.10), 0 2px 8px rgba(18,61,54,.04);
	border-radius:0; position:relative; overflow:hidden;
}
.tnc-auth-shell-solo::before{
	content:""; position:absolute; top:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg, var(--tnc-gold), var(--tnc-light-gold), var(--tnc-gold));
}
.tnc-auth-shell-solo .tnc-auth-panel{ padding:44px 40px 40px; }
.tnc-auth-shell-solo .tnc-auth-tabs{ justify-content:center; }
.tnc-auth-shell-solo .tnc-auth-form-title,.tnc-auth-shell-solo .tnc-auth-form-sub{ text-align:center; }
.tnc-auth-shell-solo .tnc-field input:not([type="radio"]):not([type="checkbox"]),
.tnc-auth-shell-solo .tnc-field select{ border-radius:0 !important; background:#FCFBF8 !important; }
.tnc-auth-shell-solo .tnc-field input:focus,.tnc-auth-shell-solo .tnc-field select:focus{ background:#fff !important; }
.tnc-auth-shell-solo .tnc-auth-submit{
	border-radius:0; background:linear-gradient(180deg, #D3B171, var(--tnc-gold));
	color:#1B2621; border:0; box-shadow:0 10px 22px rgba(198,161,91,.35);
}
.tnc-auth-shell-solo .tnc-auth-submit:hover{ background:linear-gradient(180deg, #D3B171, var(--tnc-gold)); }
@media(max-width:480px){
	.tnc-auth-shell-solo{ box-shadow:none; border-left:0; border-right:0; }
	.tnc-auth-shell-solo .tnc-auth-panel{ padding:34px 22px; }
}

/* BECOME A VENDOR -- logged-in member's "Create Your Vendor Profile" /
   "Edit Your Vendor Profile" upgrade form (templates/vendor-upgrade-form.php).
   Scoped to this page's own wrapper class rather than touching the shared
   .tnc-vd-form-section / .tnc-vd-field-grid rules directly, since those
   are also used on the My Profile edit page and shouldn't change there. */
.tnc-vu-upgrade-form .tnc-become-join-head{ padding:56px 20px 0; max-width:520px; margin:0 auto; }
.tnc-vu-upgrade-form .tnc-vd-form-section{ margin-bottom:30px; }
.tnc-vu-upgrade-form .tnc-vd-form-section-title{ letter-spacing:1px; }
.tnc-vu-upgrade-form .tnc-vd-field-grid{ grid-template-columns:repeat(3, 1fr); gap:0 20px; }
@media(max-width:680px){ .tnc-vu-upgrade-form .tnc-vd-field-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .tnc-vu-upgrade-form .tnc-vd-field-grid{ grid-template-columns:1fr; } }
.tnc-vu-upgrade-form .tnc-auth-form-sub{ max-width:520px; }
/* No brand panel on this page (removed -- the vendor is already logged
   in and knows whose site this is), so the shell is a single column
   instead of the usual brand+form grid. */
.tnc-vu-upgrade-form .tnc-auth-shell-solo{ grid-template-columns:1fr; }
.tnc-vu-upgrade-form .tnc-auth-shell-solo .tnc-auth-panel{ padding:44px 48px; }
/* Category picker -- 4 per row instead of 2 (this page only, via its own
   wrapper class; the shared .tnc-vu-cat-grid/.tnc-vu-cat-card rules stay
   as they are everywhere else -- My Profile, the admin modals, etc.) so
   the 12 categories take 3 rows instead of 6, shortening the page. */
.tnc-vu-upgrade-form .tnc-vu-cat-grid{ grid-template-columns:repeat(4, 1fr); gap:10px; }
.tnc-vu-upgrade-form .tnc-vu-cat-card{ padding:13px 10px 11px; }
.tnc-vu-upgrade-form .tnc-vu-cat-card-icon{ width:32px; height:32px; margin-bottom:8px; font-size:14px; }
.tnc-vu-upgrade-form .tnc-vu-cat-card-title{ font-size:12px; }
@media(max-width:680px){
	.tnc-vu-upgrade-form .tnc-vu-cat-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media(max-width:480px){
	.tnc-vu-upgrade-form .tnc-vu-cat-grid{ grid-template-columns:repeat(2, 1fr); }
	.tnc-vu-upgrade-form .tnc-auth-shell-solo .tnc-auth-panel{ padding:30px 22px; }
}

/* Two-step wizard indicator (Choose Category / Business Details) above
   the form shell -- see templates/vendor-upgrade-form.php. Purely
   visual; which step is active is toggled by that template's own
   inline script via the is-active class. */
.tnc-vu-steps{ display:flex; justify-content:center; gap:28px; max-width:820px; margin:30px auto 0; padding:0 20px; }
.tnc-vu-steps-item{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tnc-muted); font-weight:600; }
.tnc-vu-steps-item.is-active{ color:var(--tnc-dark); }
.tnc-vu-steps-num{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--tnc-border); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.tnc-vu-steps-item.is-active .tnc-vu-steps-num{ border-color:var(--tnc-gold); background:var(--tnc-gold); color:#fff; }
@media(max-width:480px){
	.tnc-vu-steps{ gap:16px; }
}

/* Multi-select "type" picker, used across every step-2 category section
   (Venue Type, Catering Type, Services For, Jewellery Type, Performance
   Type, and any added after) -- ONE shared, fixed layout so every
   category looks identical and a future addition (any label length,
   any list length) never needs its own spacing fix. A plain
   checkbox-and-label ROW with a constant gap (checkbox fixed-size,
   label flex:1) -- never go back to centered text with an
   absolutely-positioned corner badge; that layout's gap depended on
   label length and kept crowding long labels like "Real Gold &
   Diamond" or "Qawwali / Sufi Night" no matter how much padding or
   column-width tweaking was applied. Visual style: soft ivory card,
   round gold check (not a square checkbox) on the left, warm gold
   tint + border when selected -- matches the gold/oxblood/ivory
   palette used everywhere else (see the --tnc-* tokens above) instead
   of the plain white-box-with-square-tick look this used before.
   The layout properties below carry !important: the live theme has
   its own generic label/form CSS that loads after this file and was
   overriding plain `display:flex` on `.tnc-vt-card`, which silently
   turned this row back into a stacked checkbox-then-label layout
   even though this stylesheet was correctly updated and cached
   correctly -- keep the !important here so a theme change can't
   quietly reintroduce that again. */
.tnc-vt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-top:6px; }
@media(max-width:480px){ .tnc-vt-grid{ grid-template-columns:1fr; } }
.tnc-vt-card{
	position:relative !important; display:flex !important; flex-direction:row !important; align-items:center !important;
	gap:12px; padding:14px 16px; text-align:left; cursor:pointer;
	background:var(--tnc-ivory); border:1px solid var(--tnc-border); border-radius:4px;
	-webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tnc-vt-card:hover{ border-color:var(--tnc-gold); box-shadow:0 2px 10px rgba(31,14,12,.07); transform:translateY(-1px); }
.tnc-vt-card-input{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none; }
.tnc-vt-card-check{
	flex:0 0 auto !important; width:19px !important; height:19px !important; border-radius:50% !important;
	border:1.5px solid var(--tnc-muted); background:var(--tnc-white);
	display:flex !important; align-items:center !important; justify-content:center !important; color:transparent; font-size:10px;
	transition:all .18s ease; margin:0 !important;
}
.tnc-vt-card-title{ font-size:12.5px; font-weight:700; color:var(--tnc-dark); flex:1 1 auto !important; min-width:0; letter-spacing:.1px; display:inline; }
.tnc-vt-card-input:checked ~ .tnc-vt-card-check{ background:var(--tnc-gold); border-color:var(--tnc-gold); color:#fff; }
.tnc-vt-card-input:checked ~ .tnc-vt-card-title{ color:var(--tnc-oxblood); }
.tnc-vt-card-input:focus-visible ~ .tnc-vt-card-check{ outline:2px solid var(--tnc-gold); outline-offset:2px; }
.tnc-vt-card:has(.tnc-vt-card-input:checked){
	border-color:var(--tnc-gold); background:linear-gradient(0deg, rgba(198,161,91,.09), rgba(198,161,91,.09)), var(--tnc-white);
	box-shadow:0 0 0 1px var(--tnc-gold) inset;
}

.tnc-notice{ background:var(--tnc-cream); border:1px solid var(--tnc-border); padding:16px; font-size:13px; }

/* BECOME A MEMBER -- public, shareable landing page (hero + features +
   how-it-works, ending in the same auth-shell "Join" card used on the
   Dashboard page's logged-out state). */
.tnc-become-wrap{ background:var(--tnc-ivory); }

.tnc-btn.tnc-btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff !important; }
.tnc-btn.tnc-btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
/* Solid oxblood (the site's main color) secondary button for a dark hero
   -- a gold border keeps it visible against the oxblood background it
   otherwise matches. */
.tnc-btn.tnc-btn-oxblood{ background:var(--tnc-oxblood); border-color:var(--tnc-gold); color:#fff !important; }
.tnc-btn.tnc-btn-oxblood:hover{ background:var(--tnc-dark); border-color:var(--tnc-light-gold); }

.tnc-become-hero{
	position:relative; overflow:hidden; text-align:center;
	padding:96px 24px 84px; color:#fff;
	background:linear-gradient(160deg, var(--tnc-oxblood), var(--tnc-dark));
}
.tnc-become-hero::before,.tnc-become-hero::after{ content:""; position:absolute; border:1px solid rgba(255,255,255,.10); border-radius:50%; }
.tnc-become-hero::before{ width:300px; height:300px; left:-110px; top:-120px; }
.tnc-become-hero::after{ width:380px; height:380px; right:-140px; bottom:-170px; border-color:rgba(255,255,255,.08); }
/* A third, smaller ring plus a soft radial glow behind the headline --
   keeps the same restrained "rings on oxblood" motif as the two corner
   ones above but gives the hero a bit more depth than two circles alone. */
.tnc-become-hero-glow{ position:absolute; top:50%; left:50%; width:640px; height:640px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(198,161,91,.14), transparent 68%); pointer-events:none; }
.tnc-become-hero-ring{ position:absolute; width:150px; height:150px; border:1px solid rgba(229,207,154,.18); border-radius:50%; left:50%; top:14px; transform:translateX(-50%); }
.tnc-become-hero-inner{ position:relative; z-index:1; max-width:660px; margin:0 auto; }
.tnc-become-eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:700; color:var(--tnc-light-gold); margin-bottom:20px; }
.tnc-become-eyebrow::before,.tnc-become-eyebrow::after{ content:""; width:26px; height:1px; background:rgba(229,207,154,.5); }
.tnc-become-hero h1{ font-size:40px; line-height:1.24; color:#fff; margin:0 0 20px; }
.tnc-become-hero h1 em{ font-style:italic; color:var(--tnc-light-gold); }
.tnc-become-hero p{ font-size:14.5px; line-height:1.8; color:#d7e3df; margin:0 0 36px; max-width:560px; margin-left:auto; margin-right:auto; }
.tnc-become-hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.tnc-become-hero-actions .tnc-btn{ padding:0 28px; min-height:50px; }

/* Small reassurance strip under the buttons -- three short facts already
   said in the copy below, repeated here as a quick scannable row rather
   than a wall of stats, since there's no invented "10,000 vendors" style
   number to show off yet. */
.tnc-become-hero-trust{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); }
.tnc-become-hero-trust-item{ display:flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.2px; color:#cfe0da; }
.tnc-become-hero-trust-item svg{ width:14px; height:14px; flex-shrink:0; color:var(--tnc-light-gold); }

/* Category chip strip -- sits right under the hero, on the ivory
   background, so the page moves straight from "here's the pitch" to
   "here's exactly where you'd show up", using the real taxonomy terms
   rather than a generic illustration. */
.tnc-become-categories{ max-width:900px; margin:0 auto; padding:52px 24px 30px; text-align:center; }
.tnc-become-categories-label{ text-transform:uppercase; letter-spacing:1.6px; font-size:10.5px; font-weight:700; color:var(--tnc-muted); margin-bottom:18px; }
.tnc-become-category-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tnc-become-category-chip{ display:inline-block; padding:9px 20px; font-size:12px; color:var(--tnc-oxblood); border:1px solid var(--tnc-border); border-radius:999px; background:#fff; letter-spacing:.2px; transition:.2s ease; }
.tnc-become-category-chip:hover{ border-color:var(--tnc-gold); background:var(--tnc-cream); }

.tnc-become-section{ max-width:1080px; margin:0 auto; padding:70px 24px; }
.tnc-become-section-title{ text-align:center; font-size:28px; margin:0 0 10px; }
.tnc-become-section-title-rule{ width:44px; height:2px; background:var(--tnc-gold); margin:0 auto 18px; }
.tnc-become-section-sub{ text-align:center; color:var(--tnc-muted); font-size:13px; margin:0 0 44px; }

.tnc-become-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tnc-become-feature{ position:relative; background:#fff; border:1px solid var(--tnc-border); padding:30px 26px 28px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tnc-become-feature::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--tnc-gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.tnc-become-feature:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(31,14,12,.10); border-color:transparent; }
.tnc-become-feature:hover::before{ transform:scaleX(1); }
.tnc-become-feature-icon{ width:48px; height:48px; border-radius:50%; background:var(--tnc-ivory); border:1px solid var(--tnc-gold); color:var(--tnc-oxblood); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:17px; }
.tnc-become-feature h3{ font-size:15.5px; margin:0 0 9px; }
.tnc-become-feature p{ font-size:12.5px; color:var(--tnc-muted); line-height:1.7; margin:0; }

.tnc-become-steps-section{ padding-top:0; background:var(--tnc-cream); }
.tnc-become-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
/* A thin dashed line strung between the three numbered circles -- only
   meaningful once there's more than one column, so it's dropped at the
   same breakpoint the grid itself drops to one column below. */
.tnc-become-steps::before{ content:""; position:absolute; top:22px; left:16.5%; right:16.5%; border-top:1px dashed var(--tnc-gold); opacity:.45; }
.tnc-become-step{ position:relative; text-align:center; padding:0 20px; }
.tnc-become-step-num{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:var(--tnc-oxblood); border:1px solid var(--tnc-gold); color:var(--tnc-light-gold); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-family:Georgia,"Times New Roman",serif; font-size:16px; }
.tnc-become-step h3{ font-size:14.5px; margin:0 0 8px; }
.tnc-become-step p{ font-size:12px; color:var(--tnc-muted); line-height:1.7; margin:0; max-width:230px; margin-left:auto; margin-right:auto; }

.tnc-become-join{ padding:76px 24px 84px; }
.tnc-become-join-head{ text-align:center; max-width:520px; margin:0 auto 36px; }
.tnc-become-join-head h2{ font-size:26px; margin:0 0 10px; }
.tnc-become-join-head p{ font-size:13px; color:var(--tnc-muted); line-height:1.7; margin:0; }
.tnc-become-join .tnc-auth-shell{ max-width:920px; margin:0 auto; box-shadow:0 24px 48px rgba(31,14,12,.08); }
/* ...but the single-column "elegant card" variant (no branded side panel,
   see .tnc-auth-shell-solo above) stays at its own narrower width even
   inside this wider .tnc-become-join wrapper -- otherwise it would
   inherit the 920px meant for the old two-column brand+panel layout and
   look like a narrow card lost in a huge box. */
.tnc-become-join .tnc-auth-shell-solo{ max-width:460px; }

/* Solo "Become a Member" page -- just the Join card, centered in the
   viewport with nothing above or below it. See templates/become-member.php. */
.tnc-become-wrap-solo{ min-height:calc(100vh - 40px); display:flex; align-items:center; justify-content:center; padding:56px 20px; }
.tnc-become-join-solo{ padding:0; width:100%; }
.tnc-become-join-mark{ width:46px; height:46px; margin:0 auto 18px; border:1px solid var(--tnc-gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--tnc-gold); font-size:18px; }
@media (max-width:640px){
	.tnc-become-wrap-solo{ min-height:0; padding:40px 16px; }
}

.tnc-become-already{ max-width:480px; margin:0 auto; padding:90px 24px; text-align:center; }
.tnc-become-already-mark{ width:52px; height:52px; margin:0 auto 20px; border-color:var(--tnc-oxblood); color:var(--tnc-oxblood); font-size:20px; }
.tnc-become-already h2{ font-size:22px; margin:0 0 10px; }
.tnc-become-already p{ font-size:13px; color:var(--tnc-muted); line-height:1.7; margin:0 0 26px; }

@media(max-width:820px){
	.tnc-become-hero{ padding:64px 22px 56px; }
	.tnc-become-hero h1{ font-size:29px; }
	.tnc-become-hero-trust{ gap:14px 20px; }
	.tnc-become-features{ grid-template-columns:1fr 1fr; }
	.tnc-become-steps{ grid-template-columns:1fr; gap:30px; }
	.tnc-become-steps::before{ display:none; }
}
@media(max-width:560px){
	.tnc-become-features{ grid-template-columns:1fr; }
	.tnc-become-hero-trust-item{ font-size:11px; }
}