/* SearchEV On-Road Pricing — frontend styles */

.sevop-widget {
	/* --sevop-accent is injected on :root via wp_head and inherits in here.
	   Soft/border tints are derived from it (with rgba fallbacks for older
	   browsers). Do NOT redeclare --sevop-accent here — a self-reference
	   makes the custom property invalid and breaks all accent colouring. */
	--sevop-accent-soft: rgba(22, 163, 74, .08);
	--sevop-accent-soft: color-mix(in srgb, var(--sevop-accent, #16a34a) 10%, transparent);
	--sevop-accent-border: rgba(22, 163, 74, .25);
	--sevop-accent-border: color-mix(in srgb, var(--sevop-accent, #16a34a) 30%, transparent);
	--sevop-ink: #0f172a;
	--sevop-muted: #64748b;
	--sevop-line: #e8edf2;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--sevop-ink);
}
.sevop-widget *,
.sevop-widget *::before,
.sevop-widget *::after { box-sizing: border-box; }

.sevop-widget.sevop-loading { opacity: .55; transition: opacity .15s ease; pointer-events: none; }

/* ---------- City selector ----------
   These widgets get dropped into arbitrary themes (Elementor here), whose
   global button/input rules love to add borders, backgrounds and uppercase
   text. The resets below use !important on exactly those properties so the
   selector always looks right regardless of the surrounding theme. */
.sevop-city-selector { position: relative; display: inline-block; font-family: inherit; }

/* Shared reset for the interactive elements inside the selector. */
.sevop-city-selector .sevop-cs-trigger,
.sevop-city-selector .sevop-cs-option,
.sevop-city-selector .sevop-cs-search {
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
}

.sevop-city-selector .sevop-cs-trigger {
	display: inline-flex !important; align-items: center; gap: 8px;
	width: auto !important;
	border: 1px solid var(--sevop-accent-border) !important;
	background: var(--sevop-accent-soft) !important;
	color: var(--sevop-accent, #16a34a) !important;
	border-radius: 999px !important;
	padding: 9px 16px !important;
	font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
	cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.sevop-city-selector .sevop-cs-trigger:hover { filter: brightness(.97); }
.sevop-city-selector .sevop-cs-trigger .sevop-cs-label { color: var(--sevop-muted); font-weight: 600; }
.sevop-city-selector .sevop-cs-trigger .sevop-cs-name { color: inherit; font-weight: 700; }
.sevop-city-selector .sevop-cs-trigger .sevop-ico-pin,
.sevop-city-selector .sevop-cs-trigger .sevop-ico-chev { color: inherit; }
.sevop-cs-trigger .sevop-ico-chev { transition: transform .2s ease; opacity: .8; }
.sevop-city-selector.is-open .sevop-ico-chev { transform: rotate(180deg); }

/* Header pill variant — filled accent. */
.sevop-cs-style-pill .sevop-cs-trigger {
	background: var(--sevop-accent, #16a34a) !important;
	color: #fff !important;
	border-color: var(--sevop-accent, #16a34a) !important;
}
.sevop-cs-style-pill .sevop-cs-trigger .sevop-cs-label,
.sevop-cs-style-pill .sevop-cs-trigger .sevop-cs-name { color: #fff !important; }

/* Plain variant — text only. */
.sevop-cs-style-plain .sevop-cs-trigger {
	background: transparent !important; border-color: transparent !important; padding: 6px 8px !important;
}

/* Inline variant — compact, used inside the price/breakup/variant widgets. */
.sevop-cs-style-inline .sevop-cs-trigger {
	background: var(--sevop-accent-soft) !important;
	border-color: var(--sevop-accent-border) !important;
	color: var(--sevop-accent, #16a34a) !important;
	padding: 8px 14px !important;
}

.sevop-cs-pop {
	position: absolute; z-index: 99999; top: calc(100% + 8px); min-width: 280px; max-width: 340px;
	background: #fff; border: 1px solid var(--sevop-line); border-radius: 14px;
	box-shadow: 0 18px 50px rgba(15,23,42,.16); padding: 12px; left: 0;
	text-align: left;
}
.sevop-cs-align-right .sevop-cs-pop { left: auto; right: 0; }
.sevop-cs-pop[hidden] { display: none !important; }

.sevop-cs-search-wrap {
	display: flex !important; align-items: center; gap: 8px;
	border: 2px solid var(--sevop-accent-border) !important; border-radius: 10px;
	padding: 10px 12px; color: var(--sevop-muted); background: #fff !important;
}
.sevop-cs-search-wrap:focus-within { border-color: var(--sevop-accent, #16a34a) !important; }
.sevop-city-selector .sevop-cs-search {
	border: 0 !important; flex: 1; width: auto !important;
	/* 16px (not 14px) prevents iOS Safari from auto-zooming when the field
	   is focused on iPhone/iPad. */
	font-size: 16px !important; background: transparent !important; color: var(--sevop-ink) !important;
	padding: 0 !important; line-height: 1.4 !important;
}

.sevop-cs-list { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; max-height: 300px; overflow-y: auto; }
.sevop-cs-list li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; background: none !important; }
.sevop-cs-list li::before { content: none !important; }
.sevop-city-selector .sevop-cs-option {
	display: flex !important; align-items: center; gap: 10px; width: 100% !important; text-align: left !important;
	background: transparent !important; border: 0 !important; border-radius: 8px !important; cursor: pointer;
	padding: 10px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--sevop-ink) !important;
}
.sevop-city-selector .sevop-cs-option:hover { background: #f1f5f9 !important; }
.sevop-cs-option svg { color: var(--sevop-muted); flex: 0 0 auto; }
.sevop-city-selector .sevop-cs-option.is-active { color: var(--sevop-accent, #16a34a) !important; font-weight: 700 !important; background: var(--sevop-accent-soft) !important; }
.sevop-cs-option.is-active svg { color: var(--sevop-accent, #16a34a); }
.sevop-cs-empty { padding: 14px 10px; color: var(--sevop-muted); font-size: 14px; }

/* ---------- Price summary (screenshot 1) ---------- */
.sevop-price { display: block; }
.sevop-price-cityrow { margin-bottom: 14px; }
.sevop-price-label {
	font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sevop-muted);
	margin-bottom: 6px;
}
.sevop-price-value { font-size: clamp(34px, 6vw, 56px); font-weight: 800; color: var(--sevop-accent, #16a34a); line-height: 1.05; }
.sevop-price-value.sevop-price-na { color: var(--sevop-muted); font-size: clamp(22px,4vw,30px); }
.sevop-price-note { margin-top: 8px; font-size: 15px; color: var(--sevop-muted); }

/* ---------- Breakup (screenshot 3) ---------- */
.sevop-breakup { max-width: 980px; }
.sevop-bk-title { font-size: clamp(26px,4vw,34px); font-weight: 800; margin: 0 0 6px; color: var(--sevop-ink); }
.sevop-bk-sub { color: var(--sevop-muted); font-size: 16px; margin: 0 0 20px; }

.sevop-bk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sevop-bk-updated {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--sevop-accent-soft); color: var(--sevop-accent, #16a34a);
	border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
}

.sevop-bk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.sevop-bk-card {
	border: 1px solid var(--sevop-line); border-radius: 16px; padding: 22px 24px; background: #fff;
}
.sevop-bk-card-accent { border-color: var(--sevop-accent-border); background: linear-gradient(180deg, var(--sevop-accent-soft), rgba(22,163,74,0)); }
.sevop-bk-card-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sevop-muted); }
.sevop-bk-card-value { font-size: clamp(26px,4vw,38px); font-weight: 800; margin: 8px 0 4px; }
.sevop-bk-card-accent .sevop-bk-card-value { color: var(--sevop-accent, #16a34a); }
.sevop-bk-card-note { color: var(--sevop-muted); font-size: 14px; }

.sevop-bk-table { border: 1px solid var(--sevop-line); border-radius: 16px; overflow: hidden; }
.sevop-bk-table-head {
	background: #f6f8fa; padding: 14px 22px; font-size: 12px; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--sevop-muted);
}
.sevop-bk-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 22px; border-top: 1px solid var(--sevop-line); font-size: 16px;
}
.sevop-bk-row-label { color: var(--sevop-ink); }
.sevop-bk-row-amount { font-weight: 700; }
.sevop-bk-row.is-deduction .sevop-bk-row-amount { color: var(--sevop-accent, #16a34a); }
.sevop-bk-total {
	background: var(--sevop-accent-soft); border-top: 2px solid var(--sevop-accent-border);
}
.sevop-bk-total .sevop-bk-row-label,
.sevop-bk-total .sevop-bk-row-amount { color: var(--sevop-accent, #16a34a); font-weight: 800; font-size: 17px; }

.sevop-bk-cta { margin-top: 18px; }
.sevop-btn {
	display: inline-flex; align-items: center; gap: 8px; justify-content: center;
	padding: 16px 26px; border-radius: 14px; font-weight: 700; font-size: 16px;
	text-decoration: none; cursor: pointer; border: 0;
}
.sevop-btn-primary { background: var(--sevop-accent, #16a34a); color: #fff; width: 100%; }
.sevop-btn-primary:hover { filter: brightness(.96); }
.sevop-bk-empty { color: var(--sevop-muted); }

/* ---------- Variant table (CarDekho style) ---------- */
.sevop-variants { max-width: 980px; }
.sevop-vt-title { font-size: clamp(22px,3vw,28px); font-weight: 800; margin: 0 0 14px; }
.sevop-vt-topbar { margin-bottom: 14px; }
.sevop-vt-table { border: 1px solid var(--sevop-line); border-radius: 16px; overflow: hidden; }
.sevop-vt-head, .sevop-vt-row {
	display: grid; grid-template-columns: 2fr 1.3fr 1.6fr; align-items: center; gap: 10px; padding: 16px 20px;
}
.sevop-vt-head {
	background: #f6f8fa; font-size: 12px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--sevop-muted);
}
.sevop-vt-item { border-top: 1px solid var(--sevop-line); }
.sevop-vt-row { cursor: pointer; transition: background .15s ease; }
.sevop-vt-row:hover { background: #f6faf7; }
.sevop-vt-item.is-open > .sevop-vt-row { background: #f1f7f3; }
.sevop-vt-row:focus-visible { outline: 2px solid var(--sevop-accent, #16a34a); outline-offset: -2px; }
.sevop-vt-c-name { font-weight: 700; color: var(--sevop-ink); }
.sevop-vt-c-ex { color: var(--sevop-muted); }
.sevop-vt-c-onroad { font-weight: 800; color: var(--sevop-accent, #16a34a); }

.sevop-vt-detail { background: #fafcfb; padding: 6px 20px 16px; }
.sevop-vt-detail-row {
	display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--sevop-line); font-size: 15px;
}
.sevop-vt-detail-row:last-child { border-bottom: 0; }
.sevop-vt-detail-row.is-deduction span:last-child { color: var(--sevop-accent, #16a34a); }
.sevop-vt-detail-total { font-weight: 800; color: var(--sevop-accent, #16a34a); border-bottom: 0; }
.sevop-vt-empty { color: var(--sevop-muted); }
.sevop-vt-empty code { background: #f1f5f9; padding: 2px 6px; border-radius: 5px; }

/* ---------- Price link + popover ---------- */
.sevop-pl { position: relative; display: inline-block; font-family: inherit; }

.sevop-pl .sevop-pl-trigger {
	display: inline-flex !important; align-items: center; gap: 7px;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	padding: 2px 0 !important; margin: 0 !important; cursor: pointer; width: auto !important; min-height: 0 !important;
	font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important;
	text-transform: none !important; letter-spacing: normal !important; color: var(--sevop-accent, #16a34a) !important;
	-webkit-appearance: none !important; appearance: none !important; outline: none !important;
}
.sevop-pl .sevop-pl-trigger:hover .sevop-pl-text { text-decoration: underline; text-underline-offset: 3px; }
.sevop-pl .sevop-pl-trigger[disabled] { opacity: .55; cursor: default; }
.sevop-pl-city { font-weight: 700; }
.sevop-pl-pin, .sevop-pl-chev { flex: 0 0 auto; }
.sevop-pl-chev { transition: transform .2s ease; opacity: .85; }
.sevop-pl.is-open .sevop-pl-chev { transform: rotate(180deg); }

.sevop-pl-pop {
	display: block; position: absolute; z-index: 99999; top: calc(100% + 8px); left: 0;
	min-width: 300px; max-width: min(360px, calc(100vw - 32px));
	background: #fff; border: 1px solid var(--sevop-line); border-radius: 14px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, .16); padding: 14px 16px; text-align: left;
}
.sevop-pl-align-right .sevop-pl-pop { left: auto; right: 0; }
.sevop-pl-pop[hidden] { display: none !important; }

.sevop-pl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--sevop-line); }
.sevop-pl-head-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sevop-muted); }
.sevop-pl-head-price { font-size: 18px; font-weight: 800; color: var(--sevop-accent, #16a34a); white-space: nowrap; }

.sevop-pl-table { display: block; }
.sevop-pl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; color: var(--sevop-ink); }
.sevop-pl-row + .sevop-pl-row { border-top: 1px dashed var(--sevop-line); }
.sevop-pl-row-label { color: #334155; }
.sevop-pl-row-amount { font-weight: 700; white-space: nowrap; }
.sevop-pl-row.is-deduction .sevop-pl-row-amount { color: var(--sevop-accent, #16a34a); }
.sevop-pl-total { margin-top: 4px; border-top: 2px solid var(--sevop-line); padding-top: 10px; }
.sevop-pl-total .sevop-pl-row-label { font-weight: 800; }
.sevop-pl-total .sevop-pl-row-amount { font-weight: 800; color: var(--sevop-accent, #16a34a); font-size: 15px; }
.sevop-pl-note { display: block; margin-top: 10px; font-size: 12px; color: var(--sevop-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.sevop-bk-cards { grid-template-columns: 1fr; }
	.sevop-vt-head, .sevop-vt-row { grid-template-columns: 1.6fr 1fr 1.4fr; padding: 14px; gap: 6px; font-size: 13px; }
	.sevop-vt-c-ex { display: none; }
	.sevop-vt-head .sevop-vt-c-ex { display: none; }
	.sevop-pl-pop { min-width: 0; width: max-content; max-width: calc(100vw - 24px); }
}