/* ==================================================================
   ThriftWorks App — shared design system
   ------------------------------------------------------------------
   Single source of truth for the visual vocabulary shared across
   every _test.php page. Page-specific styling (invoice-table,
   order-card internals, product swatches, etc.) stays inline on the
   page. If a pattern is added here, it should be genuinely reusable
   — not a one-off dressed up as canonical.

   Sections in order:
     1. Reset + variables
     2. Layout container
     3. Site header (brand + main-nav + bell + avatar + dropdown)
     4. Sub-header (pill tabs)
     5. Page header (page-title + page-sub)
     6. Section tabs (in-page pill button strip)
     7. Card system (help-card + modifiers + card-title)
     8. Callout (support-intro)
     9. Contact card ("Need help?" pattern)
    10. Buttons
    11. Form inputs
    12. Empty state
    13. Responsive
    14. Print
   ================================================================== */

:root {
	/* Non-green tokens (stay constant across themes). */
	--blue: #427c83;
	--lightblue: #4a6568;
	--lighterblue: #f2f5f8;
	--ink: #0f172a;
	--ink-soft: #334155;
	--muted: #98a1af;
	--line: #e8e9e4;
	--bg-soft: #f6f7f3;
	--bg-card: #f6f7f3;
	--red: #c1402d;
	--red-dark: #8a2419;
	--info: #2c5aa0;
	--black: #3f3736;
	--black-dark: #222222;
	--header: #fefdfd;
	--background: #f9fafb;
	--ship-bg: #eaf1f8;
	--ship-border: #c9d9ee;
}

/* ===== Theme E · OLIVE + SLATE (Theme D olive greens with a dark slate-teal sub-header) ===== */
:root {
	--green: #53703c;
	--green-dark: #4b7135;
	--green-soft: #f2f5f7;
	--green-border: #c9d1b3;
	--subheader: #3b4547;
	--darkgreen: #3b4547;
	--btn-gradient-top: #6f8a47;
	--btn-gradient-bottom: #536a36;
	--btn-gradient-border: #3f4d24;
	--btn-gradient-hover-top: #7d9853;
	--btn-gradient-hover-bottom: #5f7940;
	--info: #194283;
}

.green-bg { background:#eceee7; }
.blue-bg { background:#e3eaf1; }
.white-bg { background: white; }
.lightgreen-bg {background: var(--green-soft); }
.lightblue-bg {background: #edf2f7;}
.babyblue-bg { background: var(--ship-bg); }

.blue-border { border:1px solid #cfdbed; border-radius: 12px; }
.grey-border { border:1px solid #e0e0df; border-radius: 12px; }
.green-border { border:1px solid #d8e3cc; border-radius: 12px; }
.babyblue-border { border: 1px solid var(--ship-border); border-radius: 12px; }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* iOS Safari: lock font size against auto-boost on rotation.
   DO NOT add overflow-x:hidden here — it disables position:sticky on every
   descendant (any non-visible overflow on an ancestor kills sticky). */
html { -webkit-text-size-adjust: 100%; }
html, body {
	background: var(--background); color: var(--ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.5;
}
body { overflow-anchor: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ============ LAYOUT ============ */
.container { max-width: 1320px; margin: 0 auto; padding: 0 22px; }
.site-header .container, .sub-header .container { padding: 0 17px; }

/* ============ SITE HEADER ============ */
.site-header {
	//background: var(--header);
	//border-bottom: 1px solid var(--subheader);
	position: sticky; top: 0; z-index: 50;
	transition: box-shadow 0.15s ease-out;
	
	background: rgba(255, 255, 255, 0.82);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
}
.site-header.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.site-header-sentinel {
    position: absolute;
    top: 0; left: 0;
    height: 1px; width: 1px;
    pointer-events: none;
}
.header-row {
	display: flex; align-items: center;
	min-height: 65px;
	gap: 10px;
}

/* Brand */
.brand { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.brand-logo { width: 46px; }
.brand-name {
	font-size: 17px; font-weight: 900;
	letter-spacing: -.005em; color: var(--ink);
	white-space: nowrap;
	padding-right: 12px;
	position: relative; top: 1px;
}
.brand-name .accent { color: var(--green); }

/* Main nav — centered, underline-active */
.main-nav {
	display: flex; align-items: center;
	justify-content: center;
	flex: 1;
	gap: 4px;
}
.main-nav a, .main-nav button {
	display: inline-flex; align-items: center;
	padding: 20px 18px;
	font-size: 15px; font-weight: 600;
	color: var(--ink-soft);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.main-nav a:hover, .main-nav button:hover { color: var(--green-dark); }
.main-nav a.current, .main-nav button.current {
	color: var(--green-dark);
	border-bottom-color: var(--green-dark);
}

/* Header right — hamburger + bell + avatar */
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bell-btn, .hamburger-btn {
	position: relative;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: white;
	display: grid; place-items: center;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}
.bell-btn:hover, .hamburger-btn:hover { border-color: var(--ink-soft); }
.bell-btn svg, .hamburger-btn svg { width: 20px; height: 20px; color: var(--ink-soft); }
.bell-btn .badge {
	position: absolute;
	top: -2px; right: -2px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	background: var(--green);
	color: white;
	font-size: 11px; font-weight: 700;
	border-radius: 999px;
	display: grid; place-items: center;
	border: 2px solid white;
}
.hamburger-btn { display: none; }
.avatar-btn {
	display: flex; align-items: center; gap: 6px;
	padding: 2px 12px 2px 4px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: white;
	cursor: pointer;
	transition: border-color .12s;
}
.avatar-btn:hover { border-color: var(--ink-soft); }
.avatar-circle {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: #d4d4d4;
	display: grid; place-items: center;
	color: #6b6b6b;
}
.avatar-circle svg { width: 22px; height: 22px; }
.avatar-btn .caret {
	width: 12px; height: 12px; color: var(--muted);
	transition: transform .15s ease;
}
.avatar-btn.open .caret { transform: rotate(180deg); }
.hamburger-btn.open, .avatar-btn.open {
	background: var(--green-soft);
	border-color: var(--green);
}
.hamburger-btn.open svg { color: var(--green-dark); }
.avatar-btn.open .avatar-circle {
	background: var(--green);
	color: white;
}
.avatar-btn.open .caret { color: var(--green-dark); }

/* ============ DROPDOWN ============ */
.dropdown-anchor { position: relative; }
.dropdown {
	position: absolute;
	top: calc(100% + 10px); right: 0;
	min-width: min(220px, calc(100vw - 16px));
	max-width: calc(100vw - 16px);
	background: white;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px 6px 6px 6px;
	box-shadow: 0 16px 36px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
	z-index: 60;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.dropdown.open { opacity: 1; transform: none; pointer-events: auto; }
.dropdown a, .dropdown button {
	display: flex; align-items: center;
	width: 100%; padding: 10px 14px;
	border-radius: 8px;
	font-size: 15px; font-weight: 600;
	color: var(--ink);
	background: transparent; border: none;
	text-align: left; cursor: pointer;
	font-family: inherit; text-decoration: none;
	transition: background .12s, color .12s;
}
.dropdown a:hover, .dropdown button:hover { background: var(--bg-soft); color: var(--green-dark); }
.dropdown a.current, .dropdown button.current { background: var(--green-soft); color: var(--green-dark); }
.dropdown .divider { height: 1px; background: var(--line); margin: 6px 4px; }
.dropdown .label {
	padding: 8px 14px 4px;
	font-size: 12px; font-weight: 800;
	color: var(--muted);
	text-transform: uppercase; letter-spacing: .08em;
	padding-right: 36px;
}
.dropdown .dropdown-close {
	position: absolute; top: 6px; right: 6px;
	width: 38px; height: 38px; min-width: 0;
	padding: 0; margin: 0;
	border-radius: 50%;
	background: var(--bg-soft); 
	cursor: pointer;
	display: grid; place-items: center;
	color: var(--muted);
	font-size: 28px; line-height: 1;
	font-family: inherit;
	z-index: 1;
}
.dropdown .dropdown-close:hover { background: var(--bg-soft); color: var(--ink); }
.dropdown .dropdown-close svg { width: 14px; height: 14px; }
.dropdown > .dropdown-close + a, .dropdown > .dropdown-close + button { margin-top: 4px; }

/* ============ SUB-HEADER (pill tab strip) ============ */
.sub-header {
	background: var(--subheader);
	border-bottom: 1px solid var(--subheader);
	padding: 14px 0;
}
.sub-header-row {
	display: flex; align-items: center;
	flex-wrap: wrap;
	gap: 8px 8px;
}
.sub-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 15px; font-weight: 600;
	color: var(--ink);
	background: #e9edf1;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .12s, background .12s, color .12s;
}
.sub-tab:hover { color: var(--green-dark); }
.sub-tab.current {
	background: linear-gradient(to bottom, var(--btn-gradient-top), var(--btn-gradient-bottom));
	color: white;
	border-color: var(--green);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
	            0 1px 2px rgba(0,0,0,0.08);
}
.sub-tab.current:hover {
	background: linear-gradient(to bottom, var(--btn-gradient-hover-top), var(--btn-gradient-hover-bottom));
	border-color: var(--btn-gradient-border);
}
.sub-tab svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============ PAGE HEADER ============ */
.page-title {
	font-size: 28px; font-weight: 900;
	color: var(--ink);
	letter-spacing: -.02em;
	line-height: 1.15;
	margin-bottom: 6px;
}
.page-sub {
	font-size: 15px;
	color: var(--muted);
	margin-bottom: 22px;
}

/* ============ SECTION TABS (in-page pill button strip) ============ */
.section-tabs {
	display: flex; flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}
.section-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px;
	border-radius: 12px;
	font-size: 15px; font-weight: 700;
	color: var(--ink);
	background: white;
	border: 1.5px solid var(--line);
	cursor: pointer;
	text-decoration: none;
	transition: border-color .12s, background .12s, color .12s;
}

.btn-blue {
	border-color: var(--blue);
	color: white;
	background: var(--blue);
}
.btn-blue:hover { background: var(--lightblue); border-color: var(--lightblue); color: white; }
.section-tab:hover { border-color: var(--blue); color: var(--blue); }
.section-tab.current { background: var(--blue); color: white; border-color: var(--green); }
.section-tab.current:hover { background: var(--lightblue); border-color: var(--lightblue); color: white; }
.section-tab svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============ CARD SYSTEM ============ */
.help-card {
	//border: 1px solid var(--line);
	border-radius: 18px;
	//background: var(--green-soft);
	padding: 22px;
	//margin-bottom: 10px;
}
.help-card--flush { padding: 0; overflow: hidden; }
//.help-card--soft  { background: var(--bg-card); padding: 26px; border: 1px solid var(--green-border);}
//.help-card--white  { background: white; padding: 26px; border: 1px solid var(--line); border-radius: 18px;margin-bottom: 24px;}

.card-title {
	display: flex; align-items: center; gap: 10px;
	font-size: 16px; font-weight: 800;
	color: var(--ink);
	letter-spacing: -.01em;
	margin-bottom: 16px;
	line-height: 1.15;
}
.card-title svg { width: 22px; height: 22px; color: var(--green); flex-shrink: 0; }

/* ============ CALLOUT (green tinted info banner) ============ */
.support-intro {
	display: flex; align-items: flex-start; gap: 14px;
	//background: var(--green-soft);
	//border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 26px;
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.5;
}
.support-intro strong { color: var(--green-dark); }
.support-intro .info-icon {
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--green);
	color: white;
	display: grid; place-items: center;
}
.support-intro .info-icon svg { width: 14px; height: 14px; }

/* ============ CONTACT CARD ("Need help?" pattern) ============ */
.contact-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 22px;
	align-items: center;
	padding: 22px 26px;
	//border: 1px solid var(--line);
	border-radius: 18px;
	//background: var(--bg-card);
}
.contact-card-icon {
	flex-shrink: 0;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dark);
	display: grid; place-items: center;
}
.contact-card-icon svg { width: 26px; height: 26px; }
.contact-card-body strong {
	display: block;
	font-size: 16px; font-weight: 800;
	color: var(--ink);
	margin-bottom: 4px;
}
.contact-card-body span {
	font-size: 15px;
	color: var(--muted);
	line-height: 1.5;
}
.contact-card-body a { color: var(--info); font-weight: 700; text-decoration: underline; }

/* Shipping card (blue-tinted) */
.shipping-card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px 28px;
	padding: 22px 26px;
	border-radius: 16px;
	margin-bottom: 24px;
}
.shipping-row {
	display: flex; align-items: center; gap: 14px;
}
.shipping-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: #d7e5ee;
	color: var(--info);
	display: grid; place-items: center;
}
.shipping-icon svg { width: 20px; height: 20px; }
.shipping-label { font-size: 15px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.shipping-select {
	flex: 1;
	padding: 10px 14px;
	font-size: 16px; font-weight: 600;  /* 16px min to prevent iOS Safari auto-zoom on focus */
	font-family: inherit;
	color: var(--ink);
	background: white;
	border: 1px solid var(--ship-border);
	border-radius: 10px;
	cursor: pointer;
	min-height: 44px;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 36px;
}
.shipping-select:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 3px rgba(44,90,160,.12); }

/* ============ BUTTONS ============ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
	border: 1.5px solid var(--line);
	background: white;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .12s, background .12s, color .12s;
	font-family: inherit;
	text-decoration: none;
	white-space: nowrap;
}
//.btn:hover { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
	background: var(--green); color: white; border-color: var(--green);
}
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: white; }
.btn-outline-green {
	border-color: var(--line);
	color: var(--green-dark);
	background: white;
}
.btn-blue {
	border-color: var(--blue);
	color: white;
	background: var(--blue);
}
.btn-blue:hover { background: var(--lightblue); border-color: var(--lightblue); color: white; }
.btn-outline-green:hover { background: var(--green-soft); border-color: var(--green-dark); color: var(--green-dark); }
.btn-remove { color: var(--red); border-color: #e6c6c1; }
.btn-remove:hover { background: #fbeeeb; border-color: var(--red); color: var(--red-dark); }

/* Reusable olive-green gradient variant — apply to any button or anchor for
   the "primary selected" look (gradient fill, dark border, subtle inset
   highlight along the top edge, soft drop shadow). Uses the same tokens as
   .sub-tab.current so the two stay in sync visually. */
.btn-gradient {
	background: linear-gradient(to bottom, var(--btn-gradient-top), var(--btn-gradient-bottom));
	color: white;
	border: 1px solid var(--btn-gradient-border);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
	            0 1px 2px rgba(0,0,0,0.08);
}
.btn-gradient:hover {
	background: linear-gradient(to bottom, var(--btn-gradient-hover-top), var(--btn-gradient-hover-bottom));
	color: white;
	border-color: var(--btn-gradient-border);
}

/* ============ FORM INPUTS ============ */
.text-input {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--ink);
	background: white;
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color .15s, box-shadow .15s;
	min-height: 46px;
}
.text-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(65,123,48,.12); }
.field-label {
	font-size: 15px; font-weight: 700;
	color: var(--muted);
	margin-bottom: 8px;
	display: block;
}

/* ============ EMPTY STATE ============ */
.empty-card {
	display: flex; flex-direction: column; align-items: center;
	padding: 60px 30px;
	text-align: center;
	gap: 12px;
}
.empty-card .empty-icon {
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dark);
	display: grid; place-items: center;
}
.empty-card .empty-icon svg { width: 30px; height: 30px; }
.empty-card h2 { font-size: 18px; font-weight: 800; color: var(--ink); }
.empty-card p { font-size: 15px; color: var(--muted); max-width: 380px; line-height: 1.5; }

/* ============ RESPONSIVE ============ */
@media (max-width: 760px) {
	
	//.site-header { padding: 3px 0; }
	
	.main-nav { display: none; }
	//.main-nav a { display: none; }
	
	.hamburger-btn { display: grid; }
	.sub-header { padding: 18px 0; }
	.page-title { font-size: 24px; }
	//.brand-logo { width:42px; }
	
	.sub-header-row {
		gap: 14px 8px;
	}
	
	:root {
		--subheader: #3e4a4c;
	}

}
@media (max-width: 480px) {
	//.brand-logo { margin-right: 2px; }
	//.brand-name { display: none; }
	.bell-btn, .hamburger-btn, .avatar-btn { border: 3px solid #eee; }
	.dropdown-anchor { position: static; }
	.dropdown {
		left: 8px; right: 8px;
		width: auto; max-width: none; min-width: 0;
	}
}

/* ============ PRINT ============ */
@media print {
	.noprint { display: none !important; }
	.site-header, .sub-header { display: none !important; }
	body { background: white; }
}