:root{
  --bg:#ffffff;
  --text:#0a0a0a;
  --muted:#6b7280;
  --error:#B42318;
  --ok:#16a34a;
  --brand:#1748ff;
  --border:#111111;
  --input-bg:#fff;
  --focus:#0c35ff;
  --container-w:400px;
  --container-w-desktop:480px;
  --container-w-desktop-wide:760px;
  --container-w-desktop-large:1024px;
  --gap:16px;
  --pad:20px;
  --radius:0;
  --ring:3px;
  --color-white:#ffffff;
  --color-black:#0a0a0a;
  --font-root:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-synthesis-weight:none;
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== Header ===== */
.auth-header{
  position:fixed;
  inset:0 0 auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  background:var(--color-white);
  z-index:10;
  max-width:1320px;
  margin:0 auto;
}
.brand-link{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{height:20px;width:auto;display:block}

.lang-switch{position:relative}
.lang-btn{
  height:36px;
  padding:0 12px;
  background:var(--color-white);
  color:var(--color-black);
  border:none;
  border-radius:0;
  font-weight:400;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.lang-btn .chev{width:16px;height:16px;transition:transform .2s ease}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);
  border:1px solid var(--border);background:#fff;min-width:140px;
  list-style:none;margin:0;display:none;z-index:20
}
.lang-btn[aria-expanded="true"] + .lang-menu{display:block}
.lang-menu li{padding:8px 12px;cursor:pointer}
.lang-menu li:hover{background:#f5f5f5}

/* ===== Shell / Card ===== */
.auth-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:50px 20px;
}
.auth-card{
  width:100%;
  max-width:var(--container-w);
  display:flex;
  flex-direction:column;
  gap:24px;
}
@media (min-width:1024px){ 
  .auth-card{
    max-width:var(--container-w-desktop-wide)
  }
  .auth-card.wide-card{
    max-width:var(--container-w-desktop-wide)
  }
  .auth-card.large-card{
    max-width:var(--container-w-desktop-large)
  }
}

@media (max-width:1200px){
  .auth-header{
    padding:10px 20px;
  }
}

.auth-title{
  margin:0 0 20px 0;
  font-size:clamp(36px,4vw,44px);
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:500;
  font-family:var(--font-root);
}

.user-thumb{width:58px}
.auth-sub{color:var(--color-black);margin:0;font-weight:500}

.auth-shell a,
.auth-shell a:active,
.auth-shell a:visited{color:var(--color-black);font-weight:400}
.auth-shell a:hover{text-decoration:none}

/* ===== Form Elements ===== */
.auth-form{display:flex;flex-direction:column;gap:12px}
.stack-12{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.label{font-size:16px;color:var(--color-black)}

/* ===== Contact page styling (exact copy from sample) ===== */

.contact-hero {
	max-width: var(--max-width);
	margin: 0 auto;
}
.breadcrumbs {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 8px;
}
.page-title {
	font-size: clamp(32px, 4vw, 40px);
	font-weight: 600;
	margin: 50px 0 0px;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: var(--max-width);
	margin: 0 auto;
}

@media (max-width: 900px) {
	.contact-hero {
		margin: 0 20px;
	}
}

.method-card {
	background: #fff;
	display: grid;
	gap: 20px;
}
.method-title {
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -1px;
    font-weight: bold;
}
.method-meta {
	font-size: 16px;
	line-height: 1.4;
}

.btn-wa,
.btn-call {
	height: 48px;
	border: 1px solid var(--color-primary);
	background: #fff;
	color: var(--color-primary);
	font-weight: 500 !important;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-wa img,
.btn-call img {
	width: 22px;
	height: 22px;
}
.btn-call:hover,
.btn-wa:hover {
	background: #f5f5f5;
}

.hours {
	padding: 44px;
	background: var(--brand);
	color: #fff;
}
.hours .hours-title {
	font-size: 23px;
	margin-bottom: 24px;
	font-weight: 500;
	margin-top: 0;
    font-weight: bold;
}
.hours .row {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 24px;
	--gutter-x: 0;
}

.contact-card.auth-card.large-card {
	gap: 16px;
}
.section-kicker {
	font-size: 48px;
	font-weight: 500;
	margin: 8px 0;
}

/* Help box (blue area) */
.help-box {
	background: var(--brand);
	color: #fff;
	padding: 30px;
}
.help-box .title {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 6px;
}
.help-card {
	background: #fff;
	color: #000;
	border: 1px solid var(--border);
	padding: 16px;
	margin-top: 10px;
}
.help-card .title {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 6px;
}
.help-card .more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	margin-top: 20px;
	text-decoration: none;
}

/* Contact page layout */
.methods {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin: 32px auto;
	max-width: 1320px;
}

@media (min-width: 768px) {
	.methods {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.help-box {
		padding: 20px;
	}
}

@media (min-width: 1200px) {
	.methods {
		grid-template-columns: repeat(4, 1fr);
	}
}

.contact-form-wrapper {
	display: flex;
	justify-content: center;
	margin: 40px auto;
}

.contact-card.auth-card {
	max-width: 600px;
	width: 100%;
}

/* Return details (blue block) */
.return-box {
	background: var(--brand);
	color: #fff;
	padding: 30px;
}

.return-title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 500;
}

.return-box .label {
	color: #fff;
}
.return-box .hint-error {
	color: #fff;
}
.return-box .hint-error::before {
	filter: invert(1) brightness(2);
}

.return-box .input,
.return-box .select {
	background: #fff;
	color: #000;
	border-color: #000;
}

.return-box .stack-12 {
	margin: 20px 0;
	gap: 20px;
}

.return-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}
.return-link img {
	width: 18px;
	height: 18px;
}

@media (min-width: 700px) {
	.field--zip {
		max-width: 260px;
	}
}

/* Additional contact page styling to match sample exactly */
.method-icon {
	width: 48px;
	height: 48px;
	display: block;
}
.method-meta {
	color: #6b7280;
	margin: 0;
}
.select-card.topic-option {
	cursor: pointer;
}

/* ==== Topic radios — sabit boy, kalın siyah halka, içi beyaz ==== */

.topic-option.select-card {
	background: #fff;
	border-color: #111;
}
.topic-option.select-card:is(.is-selected, :has(input[type='radio']:checked)) {
	background: #fff;
	border-color: #111;
}

.topic-option .select-card__check::before,
.topic-option .select-card__check::after {
	content: none !important;
}

.topic-option .select-card__check {
	width: 20px;
	height: 20px;
	aspect-ratio: 1 / 1; /* daima tam daire */
	flex: 0 0 18px; /* flex esnemesin */
	border: none !important; /* border yerine shadow kullanıyoruz */
	border-radius: 50%;
	background: #fff !important;
	box-shadow: inset 0 0 0 1px #000; /* seçili değilken ince halka */
}

/* Seçiliyken: kalın siyah halka + içi beyaz (boyut sabit) */
.topic-option.select-card:is(.is-selected, :has(input[type='radio']:checked)) .select-card__check {
	/* ilk inset siyah halkayı kalınlaştırır, ikincisi ortayı beyaz bırakır */
	box-shadow: inset 0 0 0 6px #000, inset 0 0 0 9px #fff !important;
}

/* Metin ile ikon arası */
.topic-option .clickable-area {
	gap: 12px;
}

/* ==== Checkrow checkbox styling ==== */
.checkrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.checkrow input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.checkrow .select-card__check {
	width: 20px;
	height: 20px;
	border: 1px solid var(--border);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	position: relative;
	transition: all 0.2s ease;
}

.checkrow:has(input[type='checkbox']:checked) .select-card__check {
	background: var(--brand);
	border-color: var(--brand);
}

.checkrow:has(input[type='checkbox']:checked) .select-card__check::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	top: 2px;
	left: 6px;
}

/* ==== Textarea styling ==== */
textarea.input {
	resize: vertical;
	min-height: 80px;
	padding: 10px 14px;
	font-family: inherit;
}

/* ==== Cookie Banner (Popup) Styling ==== */
.cb {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9999;
	display: none !important; /* hidden */
	align-items: center;
	gap: 16px;
	max-width: 960px;
	width: calc(100% - 32px);
	padding: 16px 56px 16px 16px;
	background: #111;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.cb__text {
	margin: 0;
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.6;
	color: #e9eaed;
}

.cb__link {
	color: #fff;
	text-decoration: underline;
}

.cb__actions {
	margin-left: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cb__btn {
	appearance: none;
	border: 1px solid transparent;
	padding: 10px 16px;
	min-height: 40px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.cb__btn--accept {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.cb__btn--accept:hover { background: #0c35ff; border-color: #0c35ff; }

.cb__btn--decline {
	background: #1b1b1b;
	border-color: #303030;
	color: #fff;
}

.cb__btn--decline:hover { background: #252525; }

.cb__pref {
	background: transparent;
	border: none;
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.cb__pref:hover { opacity: .9; }

.cb__close {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid #2a2a2a;
	background: #1a1a1a;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cb__close:hover { background: #222; }

@media (max-width: 680px) {
	.cb {
		flex-direction: column;
		align-items: flex-start;
		padding-right: 16px; /* close button still fits */
	}
	.cb__actions { width: 100%; justify-content: flex-start; }
}

/* ==== Cookie Preferences Modal (cbm) ==== */
.cbm {
	position: fixed;
	inset: 0;
	display: none; /* toggled via JS */
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.5);
	z-index: 10000;
}

.cbm__wrap {
	background: #fff;
	color: #111;
	max-width: 760px;
	width: calc(100% - 32px);
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 20px 50px rgba(0,0,0,.3);
	position: relative;
}

.cbm__close {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cbm__title { margin: 0 0 8px 0; font-size: 22px; font-weight: 700; }
.cbm__desc { margin: 0 0 16px 0; color: var(--muted); line-height: 1.6; }
.cbm__row { display: flex; gap: 10px; margin: 8px 0 16px; }
.cbm__divider { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.cbm__sub { font-size: 16px; margin: 0 0 12px; color: #111; }

.cbm__cat { border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.cbm__catHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cbm__catTitle { font-weight: 600; }
.cbm__always { color: var(--muted); font-size: 13px; }
.cbm__catDesc { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

.cbm__footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

.cb-btn { padding: 10px 16px; border-radius: 8px; font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.cb-btn--black { background: #111; color: #fff; border-color: #111; }
.cb-btn--black:hover { background: #000; }
.cb-btn--outline { background: #fff; color: #111; border-color: var(--border); }
.cb-btn--outline:hover { background: #f6f6f6; }

/* switches inside modal */
.cb-switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.cb-switch input { opacity: 0; width: 0; height: 0; }
.cb-slider { position: absolute; inset: 0; background: #e2e2e2; border-radius: 999px; transition: .2s; }
.cb-slider:before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.cb-switch input:checked + .cb-slider { background: var(--brand); }
.cb-switch input:checked + .cb-slider:before { transform: translateX(22px); }

/* ==== Hide Odoo default cookie bar to avoid duplicate banners ==== */
#wrapwrap > section.o_cc.o_cc1:has(#cookies-consent-all),
section.o_cc.o_cc1:has(#cookies-consent-all) {
	display: none !important;
}

/* ==== Cookie Page Styling ==== */
.cookie-page-hero {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
}

.cookie-page-content {
	background: #fff;
	border-radius: 8px;
	padding: 40px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cookie-intro h2 {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 16px 0;
	color: #111;
}

.cookie-description {
	font-size: 16px;
	line-height: 1.6;
	color: #666;
	margin: 0 0 32px 0;
}

.cookie-actions {
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
}

.cookie-btn {
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.cookie-btn--primary {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}

.cookie-btn--primary:hover {
	background: #0c35ff;
	border-color: #0c35ff;
}

.cookie-btn--outline {
	background: #fff;
	color: #111;
	border-color: #ddd;
}

.cookie-btn--outline:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

.cookie-divider {
	border: none;
	border-top: 1px solid #e5e5e5;
	margin: 32px 0;
}

.cookie-subtitle {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 24px 0;
	color: #111;
}

.cookie-categories {
	margin-bottom: 32px;
}

.cookie-category {
	margin-bottom: 24px;
	padding: 20px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fafafa;
}

.cookie-category-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.cookie-category-title h4 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: #111;
}

.cookie-always-active {
	font-size: 14px;
	color: #666;
	font-weight: 400;
}

.cookie-category-description {
	font-size: 14px;
	line-height: 1.5;
	color: #666;
	margin: 0;
}

.cookie-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
}

.cookie-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.cookie-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.2s;
	border-radius: 24px;
}

.cookie-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.2s;
	border-radius: 50%;
}

.cookie-switch input:checked + .cookie-slider {
	background-color: var(--brand);
}

.cookie-switch input:checked + .cookie-slider:before {
	transform: translateX(26px);
}

.cookie-footer-actions {
	display: flex;
	gap: 16px;
	justify-content: flex-end;
}

@media (max-width: 768px) {
	.cookie-page-content {
		padding: 24px;
	}
	
	.cookie-actions {
		flex-direction: column;
	}
	
	.cookie-footer-actions {
		flex-direction: column;
	}
}

/* ===== Contact page styling ===== */

.contact-hero {
	max-width: var(--max-width);
	margin: 0 auto;
}
.breadcrumbs {
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 8px;
}
.page-title {
	font-size: clamp(32px, 4vw, 40px);
	font-weight: 600;
	margin: 50px 0 2px;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: var(--max-width);
	margin: 0 auto;
}

@media (max-width: 900px) {
	.contact-hero {
		margin: 0 20px;
	}
}

.method-card {
	background: #fff;
	display: grid;
	gap: 20px;
}
.method-meta {
	font-size: 16px;
	line-height: 1.4;
}

.btn-wa,
.btn-call {
	height: 48px;
	border: 1px solid var(--color-primary);
	background: #fff;
	color: var(--color-primary);
	font-weight: 500 !important;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-wa img,
.btn-call img {
	width: 22px;
	height: 22px;
}
.btn-call:hover,
.btn-wa:hover {
	background: #f5f5f5;
}

.topic-option .select-card__check {
	width: 20px;
	height: 20px;
	aspect-ratio: 1 / 1; /* daima tam daire */
	flex: 0 0 18px; /* flex esnemesin */
	border: none !important; /* border yerine shadow kullanıyoruz */
	border-radius: 50%;
	background: #fff !important;
	box-shadow: inset 0 0 0 1px #000; /* seçili değilken ince halka */
}

/* Seçiliyken: kalın siyah halka + içi beyaz (boyut sabit) */
.topic-option.select-card:is(.is-selected, :has(input[type='radio']:checked)) .select-card__check {
	/* ilk inset siyah halkayı kalınlaştırır, ikincisi ortayı beyaz bırakır */
	box-shadow: inset 0 0 0 6px #000, inset 0 0 0 9px #fff !important;
}

/* Metin ile ikon arası */
.topic-option .clickable-area {
	gap: 12px;
}
.req{color:var(--color-black);font-size:14px}

.input,.select,.otp-box input,.btn{
  border:1.25px solid var(--border);
  background:var(--input-bg);
  border-radius:var(--radius);
  height:48px;
  padding:0 14px;
  outline:none;
  font:inherit;
}
.input::placeholder{color:#9ca3af}
.input:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 var(--ring) color-mix(in oklab,var(--focus) 15%,transparent);
}

.inline{display:grid;grid-template-columns:140px 1fr;gap:12px}
.inline-phone{display:grid;grid-template-columns:140px 1fr;gap:0}

.error-block{
  padding:12px 14px;border:1px solid var(--error);
  background:#fff5f5;color:var(--error);font-size:14px
}

/* Inline error (single source of truth) */
.hint-error{
  display:flex;align-items:center;gap:8px;
  color:var(--error);font-size:14px
}
.hint-error[hidden]{display:none}
.hint-error::before{
  content:"";width:20px;height:20px;flex:0 0 18px;
  background:no-repeat center/contain url("../icons/error-circle.svg")
}
.input.is-error{border-color:var(--error)}

/* OTP layout + timer */
.otp-box{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;width:100%
}
.otp-box input{
  width:100%;text-align:center;padding:0;height:70px;font-size:22px
}
.timer{font-weight:600}
.label--row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:12px;width:100%;margin-bottom:20px
}
.label--row .timer{justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Lock state (if ever needed again) */
.is-otp-locked .otp-box,
.is-otp-locked .label--row,
.is-otp-locked .label,
.is-otp-locked button[type="submit"]{display:none !important}

/* Password strength */
.pw-strength{display:flex;align-items:center;gap:10px;height:10px}
.pw-strength .bars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1;max-width:410px}
.pw-strength .bar{height:6px;background:#D9D9D9}
.pw-strength .label{min-width:64px;text-align:right;font-size:12px;color:#111}
.pw-strength[data-level="1"] .bar:nth-child(-n+1),
.pw-strength[data-level="2"] .bar:nth-child(-n+2),
.pw-strength[data-level="3"] .bar:nth-child(-n+3),
.pw-strength[data-level="4"] .bar:nth-child(-n+4){background:#027A48}

/* Error summary (top) */
.form-errors{
  padding:18px 20px;background:#fdecec;color:var(--error);
  border-left:4px solid var(--error);margin-bottom:16px
}
.form-errors strong{display:block;margin-bottom:8px;font-weight:600}
.form-errors ul{margin:0;padding-left:18px}
.form-errors li{margin:6px 0}
.form-errors a{color:var(--error);text-decoration:underline}

.form-success{
  padding:18px 20px;background:#d1fae5;color:#065f46;
  border-left:4px solid #10b981;margin-bottom:16px
}
.form-success .successTitle{display:block;margin-bottom:8px;font-weight:600}
.form-success p{margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;user-select:none}
.btn-primary{background:var(--brand);color:#fff;border-color:#0c2ee8}
.btn-primary:active{transform:translateY(1px);background:var(--brand);border-color:var(--brand)}
.btn-primary:focus{outline:none;background:var(--brand);border-color:var(--brand)}
.btn-muted{background:#fff;color:#111}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn-other{padding:0 12px}
.btn-other:hover{background:#f5f5f5}

#phone::placeholder,
#phone::-webkit-input-placeholder,
#phone::-moz-placeholder,
#phone:-ms-input-placeholder{color:#000;opacity:1}

.select{
  appearance:none;background-color:#fff;padding-right:40px;
  background-image:url("../icons/chevron.svg");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px 20px
}
.select::-ms-expand{display:none}

.alt-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.alt-row a{color:inherit}

.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.center{text-align:center}

/* Footer */
.site-footer{
  position:fixed;inset:auto 0 0 0;
  padding:10px 0 20px 0;text-align:center;
  color:var(--color-black);font-size:14px;pointer-events:none;background:var(--color-white)
}

/* Auth Footer */
.auth-footer{
  margin-top: 20px;
  text-align: center;
}

.auth-footer p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-link{
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}

.auth-link:hover{
  text-decoration: underline;
}

/* Select Card Styles */
.select-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.select-card.noborder {
    padding: 4px 0;
    border: none;
}

.select-card *:not(input) {
    cursor: pointer;
}

.select-card__left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.select-card__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.select-card input[type='radio'] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.select-card input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.select-card__check {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    position: relative;
    transition: all 0.2s ease;
    border-radius: 0px;
}
.clickable-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.select-card.is-selected .select-card__check,
.select-card:has(input[type='radio']:checked) .select-card__check {
    background: var(--brand);
    border-color: var(--brand);
}

.select-card.is-selected .select-card__check::after,
.select-card:has(input[type='radio']:checked) .select-card__check::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    top: 1px;
    left: 6px;
}

.select-card.is-selected,
.select-card:has(input[type='radio']:checked) {
    border-color: var(--brand);
    background: var(--input-bg);
}

.select-card:has(input[type='checkbox']:checked) .select-card__check {
    background: var(--brand);
    border-color: var(--brand);
}

.select-card:has(input[type='checkbox']:checked) .select-card__check::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    top: 2px;
    left: 6px;
}

.select-card:has(input[type='checkbox']:checked) {
    border-color: var(--brand);
    background: var(--input-bg);
}

.select-card__title {
    font-weight: 500;
    margin-bottom: 4px;
}

.select-card__meta {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.4;
}

.select-card__green {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.4;
    color: #027a48;
    font-weight: 500;
}

.select-card__muted {
    font-size: 14px;
    margin-bottom: 4px;
}

.select-card__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: currentColor;
}

.btn-ghost {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.select-card .btn-ghost {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.btn-ghost:hover {
    background: #eee;
}

.continue-btn {
    width: 100%;
    padding: 16px;
    background: var(--brand);
    color: #fff;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
    opacity: 1;
    transition: all var(--transition-fast) ease;
}

.continue-btn:hover {
    opacity: 0.9;
}

/* ===== Header Spacing ===== */
/*.auth-header-space {
    margin-top: calc(var(--header-height) + var(--nav-height));
}*/

/* ===== Checkout Shell Styles ===== */
.checkout-shell {
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.checkout-shell .totals {
    margin-top: 6px;
}
.checkout-shell .trow {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.checkout-shell .trow:last-child {
    border-bottom: none;
}
.checkout-shell .t-label {
    color: #444;
}
.checkout-shell .t-value {
    font-weight: 500;
}
.checkout-shell .t-grand .t-value {
    font-weight: 500;
}

.checkout-shell .continue-btn {
    margin-top: 20px;
}

#removeAll {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 8px 0;
    flex-direction: column-reverse;
}
#removeAll:hover {
    color: #333;
}

/* ===== Checkout Review Styles ===== */
.order-summary {
    margin-bottom: 30px;
}

.order-summary h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-black);
}

.shipping-info,
.payment-info {
    margin-bottom: 30px;
}

.shipping-info h5,
.payment-info h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-black);
}

.info-block {
    padding: 14px 0;
    border-bottom: 1px solid #d9d9d9;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    align-items: start;
}

.info-label {
    font-weight: 500;
    color: #666;
}

.info-value {
    text-align: right;
    font-weight: 500;
}

.info-actions {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.edit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    color: #666;
}

.edit-link:hover,
.edit-link:hover svg {
    color: var(--color-primary);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.action-buttons {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 30px;
}

.btn-secondary {
    background: #f5f5f5;
    color: var(--color-black);
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: var(--radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #e5e5e5;
    color: var(--color-black);
}

.prod-qty {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.item-total {
    font-weight: 600;
    color: var(--color-black);
    text-align: right;
    padding: 20px 0;
}

/* ===== Delivery Options Styles ===== */
.delivery-options,
.addresses-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.add-address-btn {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all var(--transition-fast) ease;
}

.add-address-btn:hover,
.btn-ghost:hover {
    background: #eee;
}

.continue-btn {
    width: 100%;
    padding: 16px;
    background: var(--brand);
    color: #fff;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
    opacity: 1;
    transition: all var(--transition-fast) ease;
}

.continue-btn:hover {
    opacity: 0.9;
}

.clickable-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* ===== Checkout Header/Topbar Styles ===== */
.checkout-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    margin-top: 15px;
}

.checkout-header {
    display: flex;
    max-width: var(--max-width);
    align-items: center;
    padding: 16px 0;
    background: var(--color-white);
    z-index: 10;
    margin: 0 auto;
}

.checkout-nav {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.checkout-title {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-root);
    text-align: center;
}

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #fff;
}

.step-progress {
    height: 4px;
    width: calc(100% / 3);
    background: #e5e5e5;
}

.step-progress.active {
    background: var(--brand);
}

.order-summary {
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.order-summary .label {
    display: block;
    margin-bottom: 2px;
}

.order-summary .amount {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.currency-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
}

.summary-right {
    text-align: right;
    text-decoration: underline;
}

/* Mobile styles for checkout topbar */
@media (max-width: 768px) {
    .checkout-topbar {
        padding-left: 0;
        padding-right: 0;
    }
    
    .checkout-header {
        padding: 16px 20px;
    }
    
    .checkout-nav {
        padding: 0;
    }
    
    .step-indicator {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 16px;
    }
    
    .order-summary {
        padding: 12px 20px;
        font-size: 13px;
    }
    
    .step-text {
        font-size: 13px;
    }
    
    .mode-badge {
        display: none !important;
    }
    
    .checkout-title {
        font-size: 16px;
    }
}