@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--app-bg)}
body{min-height:100vh;display:flex;flex-direction:column}

:root{
	--brand:#f59e0b;
	--brand2:#dc2626;
	--brand-600:#d97706;
	--accent:#1e40af;
	--accent2:#7c3aed;
	--text:#f8fafc;
	--muted:#94a3b8;
	--border:#334155;
	--surface:#1e293b;
	--surface-2:#0f172a;
	--danger:#ef4444;
	--app-bg:#020617;
	--success:#10b981;
	--success-bg:#064e3b;
	--success-border:#065f46;
	--success-text:#a7f3d0;
	--warning:#f59e0b;
	--warning-bg:#451a03;
	--warning-border:#92400e;
	--warning-text:#fbbf24;
}

.container{max-width:1200px;margin:0 auto;padding:24px}
.section{padding:60px 24px}

/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--surface);position:sticky;top:0;z-index:40;box-shadow:0 4px 20px rgba(245,158,11,.1);margin-bottom:24px;border-radius:12px}
.nav a{color:var(--text);text-decoration:none;font-weight:500;margin:0 12px;transition:color .2s ease}
.nav a:hover{color:var(--brand)}
.nav .btn,.nav .icon-btn{margin-left:8px}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo{width:48px;height:48px;vertical-align:middle}
.brand-name{font-weight:800;letter-spacing:.3px;color:var(--text);font-size:26px;background:linear-gradient(90deg,var(--brand),var(--brand2));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Mobile Navigation Toggle */
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;padding:8px}
.nav-menu{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Responsive Navigation */
@media(max-width:1200px){
	.nav-actions{gap:6px}
	.nav a{margin:0 8px;font-size:14px}
}
@media(max-width:1024px){
	.nav-actions{gap:4px}
	.nav a{margin:0 6px;font-size:13px}
	.nav .btn,.nav .icon-btn{margin-left:4px;padding:8px 12px;font-size:12px}
}
@media(max-width:768px){
	.nav{padding:12px 16px;position:relative}
	.nav-toggle{display:block}
	.nav-actions{display:none}
	.nav-actions.nav-menu{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:2px solid var(--border);border-radius:12px;margin:8px 16px;padding:16px;flex-direction:column;align-items:stretch;gap:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:50}
	.nav-actions.nav-menu a{margin:0;padding:8px 12px;border-radius:6px;text-align:center}
	.nav-actions.nav-menu a:hover{background:var(--brand);color:white}
	.nav-actions.nav-menu .btn{margin:0;justify-content:center}
	.brand-name{font-size:22px}
	.logo{width:40px;height:40px;vertical-align:middle}
	.hero{padding:60px 20px;margin:16px auto;border-radius:16px;max-width:calc(100% - 32px)}
	.hero h1{font-size:36px}
	.hero p{font-size:18px;max-width:100%}
}

/* BULLETPROOF NAVIGATION - CANNOT BE HIDDEN ON DESKTOP */
@media(min-width:769px){
	.nav-actions,
	.nav-actions.nav-menu,
	#navMenu,
	#navMenu.nav-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		position: static !important;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		margin: 0 !important;
		padding: 0 !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		width: auto !important;
		overflow: visible !important;
		transform: none !important;
		transition: none !important;
	}
	
	.nav-actions a,
	.nav-actions button,
	#navMenu a,
	#navMenu button {
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
		transform: none !important;
		transition: none !important;
	}
	
	.nav-toggle{
		display: none !important;
	}
}

/* EXTRA BULLETPROOF - FORCE NAVIGATION TO STAY VISIBLE ON DESKTOP */
@media(min-width:769px){
	.nav a,
	.nav .btn,
	.nav .icon-btn {
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
		transform: none !important;
		transition: none !important;
		pointer-events: auto !important;
	}
	
	/* Override any potential mobile navigation styles on desktop */
	.nav-actions.nav-menu,
	#navMenu.nav-menu {
		display: flex !important;
		flex-direction: row !important;
		position: static !important;
		background: none !important;
		border: none !important;
		box-shadow: none !important;
		margin: 0 !important;
		padding: 0 !important;
		align-items: center !important;
		gap: 8px !important;
	}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;padding:12px 20px;border-radius:8px;text-decoration:none;border:none;font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(245,158,11,.3);transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;font-size:14px}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.4);color:white}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--border);box-shadow:none}
.btn-outline:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.3);color:white !important}
.btn-danger{background:var(--danger)}
.btn-sm{padding:8px 16px;border-radius:6px;font-size:12px}
.btn-lg{padding:16px 24px;border-radius:10px;font-size:16px}
.btn-wide{padding-left:32px;padding-right:32px}

/* Prevent navbar buttons from shifting */
.nav .btn{transform:none !important}
.nav .btn:hover,.nav .btn:active{transform:none !important}
.nav .btn,.nav .btn-sm,.nav .btn-lg{padding:10px 16px;border-radius:6px;font-size:14px}
.nav .btn-outline:hover{color:white !important}

/* Icon button (theme toggle) */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:1px;border-radius:8px;border:2px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;transition:all .2s ease;line-height:0}
.icon-btn:hover{background:var(--brand);border-color:var(--brand);color:white}
.icon-btn svg{width:20px;height:20px;display:block}

/* Hero */
.hero{padding:80px 32px;text-align:center;background:var(--app-bg);border-radius:24px;margin:24px auto;max-width:1200px;box-shadow:0 8px 32px rgba(0,0,0,.1)}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 20px;color:var(--text);font-weight:800;letter-spacing:-.02em;border:none !important;outline:none !important;box-shadow:none !important;padding:0 !important}
.hero p{color:var(--muted);max-width:800px;margin:0 auto 32px;font-size:20px;line-height:1.6}
.hero .cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* Glossy text effect */
.glossy-text{
	background: linear-gradient(135deg, 
		var(--brand) 0%, 
		var(--brand2) 25%, 
		var(--accent) 50%, 
		var(--accent2) 75%, 
		var(--brand) 100%);
	background-size: 300% 300%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: glossy-shift 3s ease-in-out infinite;
	position: relative;
	text-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 20px !important;
}

.glossy-text::before {
	content: 'Compare freight rates across all transportation modes.';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.4) 0%, 
		rgba(255, 255, 255, 0.1) 50%, 
		rgba(255, 255, 255, 0.4) 100%);
	background-size: 200% 200%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: glossy-overlay 2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes glossy-shift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes glossy-overlay {
	0%, 100% { 
		background-position: 0% 50%; 
		opacity: 0.6;
	}
	50% { 
		background-position: 100% 50%; 
		opacity: 0.8;
	}
}

@keyframes success-pulse {
	0%, 100% { 
		transform: scale(1);
		box-shadow: 0 4px 12px rgba(16,185,129,.3);
	}
	50% { 
		transform: scale(1.05);
		box-shadow: 0 6px 20px rgba(16,185,129,.4);
	}
}

@keyframes success-check {
	0% { 
		transform: scale(0) rotate(-45deg);
		opacity: 0;
	}
	50% { 
		transform: scale(1.2) rotate(-45deg);
		opacity: 1;
	}
	100% { 
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}


/* Auth pages */
.auth h1{font-size:48px;line-height:1.1;margin-bottom:16px;font-weight:800;text-align:center}
.auth .form{max-width:480px;margin:0 auto}

/* Signup/Login pages */
.signup-section, .login-section{text-align:center}
.signup-section h1, .login-section h1{text-align:center;margin-bottom:16px}
.signup-section .help, .login-section .help{text-align:center;margin-bottom:24px}
.signup-section .form, .login-section .form{margin:0 auto}
.signup-section .form + div, .login-section .form + div{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}
.signup-section .form + div .help, .login-section .form + div .help{margin:0;display:inline-block;line-height:1.2}
.signup-section .form + div .btn, .login-section .form + div .btn{display:inline-flex;align-items:center;height:auto;padding:8px 16px;line-height:1.2}

/* Large title styling for signup page */
.large-title{font-size:56px;line-height:1.1;font-weight:800;text-align:center;margin-bottom:16px}
.contact-large h1{font-size:48px}
.contact-large .form{max-width:800px}

/* Contact page styling */
.contact-large h1{font-size:52px;line-height:1.1;font-weight:800}
.contact-large .form{max-width:1000px;width:100%;gap:20px;margin:0 auto}
.contact-large .label{font-size:16px;font-weight:600}
.contact-large .input, .contact-large textarea.input{font-size:16px;padding:16px 20px}
.contact-large .btn{padding:16px 24px;border-radius:8px;font-size:16px}
.contact-large #sendBtn.btn-sm{padding:12px 20px;border-radius:8px;font-size:14px}

/* Success/Error messages */
.help.msg-success,.msg-success{display:inline-flex;align-items:center;gap:16px;font-size:16px;color:var(--success-text);background:var(--success-bg);border:2px solid var(--success-border);padding:16px 20px;border-radius:12px;margin-top:12px;font-weight:500;box-shadow:0 4px 16px rgba(16,185,129,.2);transition:all .3s ease}
.help.msg-error,.msg-error{display:inline-flex;align-items:center;gap:16px;font-size:16px;color:#fee2e2;background:#450a0a;border:2px solid #7f1d1d;padding:16px 20px;border-radius:12px;margin-top:12px;font-weight:500;box-shadow:0 4px 16px rgba(239,68,68,.2);transition:all .3s ease}
.error-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.3);flex-shrink:0}
.error-icon svg{width:20px;height:20px}
.contact-large .help{font-size:15px}

/* Form grid */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid .field{display:flex;flex-direction:column;gap:8px}
.form-grid .field.full{grid-column:1 / -1}
@media(max-width:768px){.form-grid{grid-template-columns:1fr}}
.checkbox{display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:15px}
.checkbox input{margin-top:4px}
.consent-row{margin-top:8px}

/* Contact page layout */
.contact-large.container{max-width:1200px}
.contact-large.section{padding-left:20px;padding-right:20px}
.contact-large .form{padding-left:0;padding-right:0;width:100%;margin:0 auto}

/* Plans header */
.plans-header{display:flex;flex-direction:column;align-items:center;text-align:center}
.plans-title{color:var(--text);font-weight:800;font-size:48px;line-height:1.1}
.plans-subtitle{font-size:20px;color:var(--text);font-weight:600}
@supports (background-clip: text){
	.plans-title{background-image:linear-gradient(90deg,var(--brand),var(--brand2));background-clip:text;color:transparent}
}
@supports (-webkit-background-clip: text){
	.plans-title{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.plans-subheader{margin:16px 0 24px 0;text-align:center;font-size:24px;line-height:1.2;color:var(--text);font-weight:700}

/* Layout */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--surface);border:2px solid var(--border);border-radius:24px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.3);display:flex;flex-direction:column;transition:all .3s ease;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(245,158,11,.2);border-color:var(--brand)}
.card h3{margin:0 0 12px;font-size:20px;color:var(--text);font-weight:700}
.card p{color:var(--muted);line-height:1.6}
.card ul{margin:0 0 16px 20px}
.card p:last-child{margin-top:auto}
.card h3{min-height:28px}
.card .price-row{min-height:32px;font-size:18px;font-weight:700;color:var(--brand)}
.card .features{min-height:120px;display:grid;grid-template-rows:repeat(3,1fr);gap:8px}
.card .features li{display:flex;align-items:center;margin:0;color:var(--muted)}

/* Forms */
.form{display:grid;gap:16px;max-width:480px;margin:0 auto}
.input, textarea.input{width:100%;padding:14px 18px;border:2px solid var(--border);border-radius:8px;background:var(--surface-2);transition:all .2s ease;color:var(--text);font-size:16px}
.input::placeholder, textarea.input::placeholder{color:var(--muted)}
.input:focus, textarea.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(245,158,11,.2);background:var(--surface)}
.label{font-weight:600;color:var(--text);font-size:16px}
.help{color:var(--muted);font-size:18px;line-height:1.5}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 12px}
.table td,.table th{padding:16px 18px}
.table tr{background:var(--surface);border:2px solid var(--border);border-radius:8px}
.table th{color:var(--text);text-align:left;font-weight:600}

/* Footer */
.footer{padding:60px 24px;color:var(--muted);text-align:center}
.footer a{color:inherit}

/* Site Footer */
.site-footer{border-top:2px solid var(--border);background:var(--surface);padding:20px 20px;margin-top:auto}
.site-footer .footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
.site-footer .brand{gap:16px}
.site-footer .brand-name{font-size:20px;font-weight:800}
.site-footer .desc{color:var(--muted);margin-top:6px;max-width:480px;font-size:15px;line-height:1.5}
.site-footer .col-title{font-weight:700;color:var(--text);margin-bottom:8px;font-size:16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.site-footer a:hover{color:var(--brand)}
.site-footer .bottom{display:flex;align-items:center;position:relative;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);color:var(--muted)}
.site-footer .bottom > div:first-child{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.site-footer .bottom > div:last-child{margin-left:auto}
.site-footer .social{display:flex;gap:16px}
.site-footer .badge{background:transparent;border-color:var(--border);color:var(--text);border-radius:20px;padding:8px 16px}
#manageCookiesBtn{margin-right:12px}
@media(max-width:1024px){.site-footer .footer-container{grid-template-columns:1fr 1fr}.site-footer .bottom{flex-direction:column;gap:12px;align-items:center}.site-footer .bottom>div:first-child{position:static;transform:none;text-align:center;margin:0 auto}.site-footer .bottom>div:last-child{margin-left:0;width:100%}}
@media(max-width:768px){.site-footer .footer-container{grid-template-columns:1fr}}

/* Footer payment options */
.site-footer .payment-wrap{grid-column:1 / -1;margin-top:8px}
.site-footer .payment-title{font-weight:700;color:var(--text);margin-bottom:8px;font-size:16px}
.site-footer .payment-icons{display:flex;flex-wrap:wrap;gap:12px}
.site-footer .pay-icon{min-width:60px;height:40px;border-radius:8px;border:2px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text);font-weight:700;font-size:12px;padding:0 12px}
.site-footer .payment-note{color:var(--muted);margin-top:8px}

/* Badges */
.badge{display:inline-block;padding:8px 16px;border-radius:20px;border:2px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* Utility */
.center{display:flex;align-items:center;justify-content:center}
.stack{display:grid;gap:16px}

/* Icon badges */
.icon-badge{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 8px 24px rgba(245,158,11,.3), inset 0 0 0 1px rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.icon-badge svg{width:32px;height:32px;color:#fff}

/* Icon card header */
.icon-card{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.icon-card h3{margin:0;font-size:20px;font-weight:700}

/* Subscribe section */
.subscribe-section{margin-top:40px;margin-bottom:40px;padding:32px;border-radius:16px;border:2px solid var(--border);background:linear-gradient(135deg,rgba(245,158,11,.05),rgba(220,38,38,.05)), var(--surface);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.subscribe-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.subscribe-wrap{display:flex;align-items:center;background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:8px 8px;max-width:400px;margin:0 auto}
.subscribe-input{flex:1;border:none;background:transparent;color:var(--text);padding:12px 16px;outline:none;font-size:16px}
.subscribe-button{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(245,158,11,.3);transition:all .2s ease}
.subscribe-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.4)}
.subscribe-button svg{width:22px;height:22px}
@media(max-width:1024px){.subscribe-grid{grid-template-columns:1fr}}
.subscribe-grid #subMsg{grid-column:2}
@media(max-width:1024px){.subscribe-grid #subMsg{grid-column:1}}

/* Turnstile */
.turnstile-wrap{margin-top:16px;display:flex;justify-content:center;margin-left:0}
.turnstile-wrap .cf-challenge, .turnstile-wrap iframe{max-width:none}
@media(max-width:1024px){.turnstile-wrap{justify-content:center;margin-left:0}}

/* Success notice */
.success-wrap{display:flex;align-items:center;gap:16px;background:var(--success-bg);border:2px solid var(--success-border);color:var(--success-text);padding:16px 20px;border-radius:12px;font-weight:500;box-shadow:0 4px 16px rgba(16,185,129,.2);transition:all .3s ease;max-width:100%;word-wrap:break-word}
.success-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--success),#34d399);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(16,185,129,.3);flex-shrink:0;position:relative;overflow:hidden;animation:success-pulse 2s ease-in-out infinite}
.success-icon::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border-radius:50%}
.success-icon svg{width:20px;height:20px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));animation:success-check 0.6s ease-out}

/* Mobile responsive success message */
@media(max-width:768px){
	.success-wrap{flex-direction:column;text-align:center;gap:12px;padding:20px 16px}
	.success-icon{width:48px;height:48px}
	.success-icon svg{width:24px;height:24px}
	.help.msg-success,.msg-success{flex-direction:column;text-align:center;gap:12px;padding:20px 16px}
}

/* Subscribe success state */
.subscribe-wrap.success{background:var(--success-bg);border-color:var(--success-border)}
.subscribe-wrap.success .subscribe-input{color:var(--success-text)}
.subscribe-wrap.success .subscribe-button{background:linear-gradient(135deg,var(--success),#34d399)}

/* Subscribe success message */
.subscribe-success-message{display:flex;align-items:center;gap:16px;background:var(--success-bg);border:2px solid var(--success-border);color:var(--success-text);padding:20px 24px;border-radius:12px;font-weight:500;box-shadow:0 4px 16px rgba(16,185,129,.2);transition:all .3s ease;max-width:100%;word-wrap:break-word;margin:0 auto}
.subscribe-success-message .title{color:var(--success-text);font-weight:600;font-size:16px;line-height:1.4}
.subscribe-success-message .success-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--success),#34d399);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(16,185,129,.3);flex-shrink:0;position:relative;overflow:hidden;animation:success-pulse 2s ease-in-out infinite}
.subscribe-success-message .success-icon::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border-radius:50%}
.subscribe-success-message .success-icon svg{width:20px;height:20px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));animation:success-check 0.6s ease-out}

/* Mobile responsive subscribe success message */
@media(max-width:768px){
	.subscribe-success-message{flex-direction:column;text-align:center;gap:12px;padding:24px 20px}
	.subscribe-success-message .success-icon{width:48px;height:48px}
	.subscribe-success-message .success-icon svg{width:24px;height:24px}
}

/* Success panel */
.success-panel{display:flex;align-items:center;gap:20px;background:var(--success-bg);border:2px solid var(--success-border);border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(16,185,129,.15);transition:all .3s ease}
.success-panel .title{color:var(--success-text);font-weight:700;font-size:18px}
.success-panel .desc{color:var(--success-text);line-height:1.6}

/* Light theme */
html[data-theme="light"]{
	--brand:#f59e0b;
	--brand2:#dc2626;
	--brand-600:#d97706;
	--accent:#1e40af;
	--accent2:#7c3aed;
	--text:#0f172a;
	--muted:#64748b;
	--border:#e2e8f0;
	--surface:#ffffff;
	--surface-2:#f8fafc;
	--app-bg:#f1f5f9;
	--success:#10b981;
	--success-bg:#ecfdf5;
	--success-border:#a7f3d0;
	--success-text:#064e3b;
	--warning:#f59e0b;
	--warning-bg:#fffbeb;
	--warning-border:#fed7aa;
	--warning-text:#92400e;
	color:var(--text)
}

html[data-theme="light"] .nav{background:#ffffff;border-color:#f59e0b;box-shadow:0 4px 20px rgba(245,158,11,.1)}
html[data-theme="light"] .card{box-shadow:0 8px 32px rgba(0,0,0,.08);border-color:#e2e8f0}
html[data-theme="light"] .card:hover{box-shadow:0 16px 48px rgba(245,158,11,.15)}
html[data-theme="light"] .icon-btn{background:var(--surface-2);border-color:var(--border);color:var(--text)}
html[data-theme="light"] .input, html[data-theme="light"] textarea.input{background:#ffffff;border-color:#e2e8f0}
html[data-theme="light"] .badge{background:#f8fafc;border-color:#e2e8f0;color:var(--text)}
html[data-theme="light"] .btn-outline:hover{color:white !important}
html[data-theme="light"] .hero{background:var(--app-bg)}

/* Cookies banner */
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:70;border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.cookie-banner .cookie-text{display:flex;flex-direction:column;gap:6px}
.cookie-banner .cookie-text strong{font-weight:700}
.cookie-banner a{color:var(--brand);text-decoration:underline}
.cookie-banner .cookie-actions{display:flex;gap:12px;flex-shrink:0}
@media(max-width:768px){.cookie-banner{flex-direction:column;align-items:stretch}.cookie-banner .cookie-actions{justify-content:flex-end}}

/* Cookie modal */
.cookie-modal{position:fixed;inset:0;z-index:80}
.cookie-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.7);backdrop-filter:blur(4px)}
.cookie-modal-panel{position:relative;max-width:640px;margin:10vh auto;background:var(--surface);border:2px solid var(--border);border-radius:16px;box-shadow:0 20px 48px rgba(0,0,0,.4);display:flex;flex-direction:column}
.cookie-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:2px solid var(--border)}
.cookie-modal-header h3{margin:0;font-size:20px;font-weight:700}
.cookie-modal-body{display:grid;gap:16px;padding:20px}
.cookie-modal-body .manage-intro{margin:0 0 8px 0;font-size:14px;color:var(--muted);line-height:1.6}
.cookie-option{display:flex;align-items:center;justify-content:space-between;gap:16px;border:2px solid var(--border);border-radius:12px;padding:16px}
.cookie-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:2px solid var(--border)}

/* Toggle */
.toggle{position:relative;width:60px;height:32px;border-radius:20px;border:2px solid var(--border);background:var(--surface-2);cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.toggle[aria-checked="true"]{background:linear-gradient(135deg,var(--brand),var(--brand2));border-color:var(--brand);box-shadow:0 4px 12px rgba(245,158,11,.3)}
.toggle span{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:left .2s ease}
.toggle[aria-checked="true"] span{left:30px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.toggle::after{content:'Off';position:absolute;top:50%;transform:translateY(-50%);right:8px;font-size:10px;font-weight:700;color:var(--muted);pointer-events:none;transition:color .2s ease}
.toggle[aria-checked="true"]::after{content:'';left:8px;right:auto;color:#fff;font-weight:800}
.toggle:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.toggle:hover{filter:brightness(1.05);transform:scale(1.02)}
.toggle[aria-checked="true"]:hover{filter:brightness(1.1);transform:scale(1.02)}
.toggle.disabled{opacity:.6;cursor:default}

/* Always on badge */
.badge.always-on{background:transparent;border-color:var(--border);color:var(--muted);font-weight:600}
html[data-theme="light"] .badge.always-on{background:#f8fafc;color:var(--text)}

/* Light theme overrides for cookies */
html[data-theme="light"] .cookie-banner{box-shadow:0 12px 32px rgba(0,0,0,.1)}
html[data-theme="light"] .cookie-modal-backdrop{background:rgba(2,6,23,.4)}
html[data-theme="light"] .help{color:var(--muted)}
html[data-theme="light"] .site-footer a{color:var(--muted)}
html[data-theme="light"] .site-footer a:hover{color:var(--brand)}
html[data-theme="light"] .cookie-banner a{color:var(--brand)}
html[data-theme="light"] .cookie-modal-body .manage-intro{color:var(--muted)}
html[data-theme="light"] .toggle{background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 4px rgba(0,0,0,.05)}
html[data-theme="light"] .toggle[aria-checked="true"]{background:linear-gradient(135deg,var(--brand),var(--brand2));border-color:var(--brand);box-shadow:0 4px 12px rgba(245,158,11,.2)}
html[data-theme="light"] .toggle[aria-checked="true"] span{box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Hide "On" text in dark mode toggles when enabled */
html[data-theme="dark"] .toggle[aria-checked="true"]::after{content:''}

/* Email address styling for better visibility in dark mode */
a[href^="mailto:"] {
	color: #ff8c00 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

a[href^="mailto:"]:hover {
	color: #ffa500 !important;
	text-decoration: underline;
}

/* Light theme email styling */
html[data-theme="light"] a[href^="mailto:"] {
	color: #d97706 !important;
}

html[data-theme="light"] a[href^="mailto:"]:hover {
	color: #b45309 !important;
}

/* Privacy Policy and Terms of Service links in consent text only */
.consent-row a[href="/privacy.html"], 
.consent-row a[href="/terms.html"] {
	color: #ff8c00 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.consent-row a[href="/privacy.html"]:hover, 
.consent-row a[href="/terms.html"]:hover {
	color: #ffa500 !important;
	text-decoration: underline;
}

/* Light theme Privacy Policy and Terms of Service links in consent text */
html[data-theme="light"] .consent-row a[href="/privacy.html"], 
html[data-theme="light"] .consent-row a[href="/terms.html"] {
	color: #d97706 !important;
}

html[data-theme="light"] .consent-row a[href="/privacy.html"]:hover, 
html[data-theme="light"] .consent-row a[href="/terms.html"]:hover {
	color: #b45309 !important;
}

/* Contact us link in FAQ success panel */
.success-panel .desc a[href="/contact.html"] {
	color: #ff8c00 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.success-panel .desc a[href="/contact.html"]:hover {
	color: #ffa500 !important;
	text-decoration: underline;
}

/* Light theme Contact us link in FAQ success panel */
html[data-theme="light"] .success-panel .desc a[href="/contact.html"] {
	color: #d97706 !important;
}

html[data-theme="light"] .success-panel .desc a[href="/contact.html"]:hover {
	color: #b45309 !important;
}

/* Forgot password link styling */
a[href="/reset.html"] {
	color: #ff8c00 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

a[href="/reset.html"]:hover {
	color: #ffa500 !important;
	text-decoration: underline;
}

/* Light theme Forgot password link */
html[data-theme="light"] a[href="/reset.html"] {
	color: #d97706 !important;
}

html[data-theme="light"] a[href="/reset.html"]:hover {
	color: #b45309 !important;
}

/* Cookie Policy and Privacy Policy links in cookie banner and modal */
.cookie-banner a[href="/cookie-policy.html"], 
.cookie-banner a[href="/privacy.html"],
.cookie-modal a[href="/cookie-policy.html"], 
.cookie-modal a[href="/privacy.html"] {
	color: #ff8c00 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cookie-banner a[href="/cookie-policy.html"]:hover, 
.cookie-banner a[href="/privacy.html"]:hover,
.cookie-modal a[href="/cookie-policy.html"]:hover, 
.cookie-modal a[href="/privacy.html"]:hover {
	color: #ffa500 !important;
	text-decoration: underline;
}

/* Light theme Cookie Policy and Privacy Policy links in cookie banner and modal */
html[data-theme="light"] .cookie-banner a[href="/cookie-policy.html"], 
html[data-theme="light"] .cookie-banner a[href="/privacy.html"],
html[data-theme="light"] .cookie-modal a[href="/cookie-policy.html"], 
html[data-theme="light"] .cookie-modal a[href="/privacy.html"] {
	color: #d97706 !important;
}

html[data-theme="light"] .cookie-banner a[href="/cookie-policy.html"]:hover, 
html[data-theme="light"] .cookie-banner a[href="/privacy.html"]:hover,
html[data-theme="light"] .cookie-modal a[href="/cookie-policy.html"]:hover, 
html[data-theme="light"] .cookie-modal a[href="/privacy.html"]:hover {
	color: #b45309 !important;
}