/**
 * Shiprocket Shipping Calculator — unified single-page design system.
 *
 * ONE cohesive language: every component (tabs, inputs, input groups, buttons,
 * segmented control, badges, cards, result rows) is built from the same design
 * tokens below — spacing, type scale, radii, colours, shadows, motion. No
 * component styles itself ad-hoc.
 *
 * Ancestor-independent: the plugin base `.calcComponentStyle input|button`
 * (0,1,1) is beaten with repeated-class selectors (.srInput.srInput → 0,2,0) so
 * the system looks identical inside or outside .calcComponentStyle (standalone
 * Bulk/Quick). Shared by the Vue calculator and the jQuery Bulk/Quick forms.
 *
 * @package Sr_shc
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
.srCalc, .srCard, .srInlineResult {
	/* colour — muted/faint/ok/err retuned in v0.4.2 to pass WCAG AA (4.5:1) at
	   their actual usage size against their actual background; see the audit.
	   --muted 8b90a8→6b7086 (3.16:1→4.90:1 on white), --faint 2.94:1 on white
	   (placeholder-only, exempt from AA but improved for readability), --err
	   e5484d→d1373c (3.91:1→4.86:1 on white), --ok 16a06a→0c7a4f (3.02:1→4.84:1
	   on --ok-bg, where the CHEAPEST chip text actually sits). */
	--brand: #6f57e9; --brand-2: #5b45d6; --brand-soft: #f5f3fe; --brand-line: #e3dffa;
	--ink: #0b0757; --ink-2: #3a3d5c; --muted: #6b7086; --faint: #9096ad;
	--line: #ecebf5; --field-line: #e3e1f0; --tint: #f4f3fb; --surface: #faf9ff;
	--ok: #0c7a4f; --ok-bg: #e7f7ef; --info: #4457d6; --info-bg: #eef0ff; --err: #d1373c;
	/* radius */
	--r-sm: 8px; --r: 12px; --r-lg: 16px; --r-card: 20px;
	/* type scale */
	--fs-xs: 11.5px; --fs-sm: 12.5px; --fs-cap: 13.5px; --fs: 14.5px; --fs-in: 15px; --fs-h: 18px; --fs-title: 22px;
	/* shadow */
	--sh-card: 0 20px 50px rgba(11, 7, 87, 0.07); --sh-btn: 0 8px 20px rgba(111, 87, 233, 0.28);
	--sh-row: 0 4px 16px rgba(11, 7, 87, 0.06);
	/* motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.22s;
	box-sizing: border-box;
}
.srCalc *, .srCalc *::before, .srCalc *::after,
.srCard *, .srCard *::before, .srCard *::after,
.srInlineResult *, .srInlineResult *::before, .srInlineResult *::after { box-sizing: border-box; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.srCalc, .srCard, .srInlineResult {
	width: 100%; max-width: 860px; margin: 0 auto;
	background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-card);
	box-shadow: var(--sh-card);
}
/* !important: legacy `.calcComponentStyle .domesticForm, .intForm { padding:
   40px 0 }` (0,2,0) outranks a plain `.srCalc` (0,1,0) on the single-page
   (non-tabbed) forms, which carry both classes on the same element. */
.srCalc, .srCard { padding: 30px 32px !important; }
.srInlineResult { margin-top: 20px; padding: 0; overflow: hidden; animation: srRise var(--dur) var(--ease); }
.srCalc .srCard, .srCalc .srCalc, .srCard .srCard { border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; background: transparent; }
@keyframes srRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.srTabs { display: flex; gap: 2px; margin: 2px 0 26px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.srTabs::-webkit-scrollbar { display: none; }
.srTabs .srTab {
	appearance: none; -webkit-appearance: none; flex: 0 0 auto; border: 0; background: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 18px 15px; margin: 0; width: auto; min-height: 44px;
	font-size: var(--fs-in); font-weight: 600; line-height: 1; color: var(--muted);
	border-bottom: 3px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.srTabs .srTab:hover { color: var(--ink-2); }
.srTabs .srTab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
/* Service icon — subtle, same size/weight everywhere, dims when inactive so
   it reads as identity, not decoration competing with the active-tab colour. */
.srTabIcon { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.55; transition: opacity var(--dur) var(--ease); }
.srTabs .srTab.is-active .srTabIcon, .srTabs .srTab:hover .srTabIcon { opacity: 1; }

/* ── Field grid ─────────────────────────────────────────────────────────── */
.srCalcGrid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.srField { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 !important; }
.srField--full { grid-column: 1 / -1; }
.srCalc > div:first-child:not(.srTabs) { display: block; } /* neutralise base flex on the form body */
/* !important: legacy `.calcComponentStyle .domesticForm label, .intForm label`
   (color:black; font-size:14px) is a same-or-higher-specificity type+class
   selector that would otherwise win and silently override this. */
.srFieldLabel {
	font-size: var(--fs-cap) !important; font-weight: 600 !important; color: var(--ink-2) !important;
	letter-spacing: 0; padding-left: 0 !important; margin-bottom: 0 !important;
}
.srReq { color: var(--brand); }
.srHint { color: var(--muted); font-weight: 500; }
/* Grouped controls (Dimensions, Payment Mode) use <fieldset>/<legend> for real
   group semantics — reset the browser's default fieldset chrome so it's
   visually identical to the plain .srField it replaces. */
fieldset.srField { border: 0; padding: 0; margin: 0 !important; min-width: 0; }
fieldset.srField legend.srFieldLabel { padding: 0; float: none; width: auto; }

/* Field-level success (valid, well-formed pincode). Additive signal only —
   doesn't change any validation logic, just reflects the SAME error state
   already tracked (well-formed + no current error message). */
.srField.is-valid .srInput.srInput { border-color: var(--ok); padding-right: 38px; }
.srField.is-valid .srControl { position: relative; }
.srField.is-valid .srControl::after {
	content: "\2713"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	color: var(--ok); font-weight: 700; font-size: 14px; pointer-events: none;
}
.srField.is-valid .srControl--suffix::after { right: 62px; } /* clear the kg/₹ pill */

/* ── Inputs / selects (one control style) ───────────────────────────────── */
.srInput.srInput, .srField select.srInput {
	width: 100%; height: 50px; padding: 0 15px; margin: 0;
	border: 1.5px solid var(--field-line); border-radius: var(--r);
	background: #ffffff; font-size: var(--fs-in); color: var(--ink); font-family: inherit;
	box-shadow: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.srInput.srInput::placeholder { color: var(--faint); opacity: 1; }
.srInput.srInput:hover { border-color: #d3cfee; }
.srInput.srInput:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(111, 87, 233, 0.13); outline: none; }
.srInput.srInput:disabled, .srInput.srInput[readonly] { background: var(--tint); color: var(--muted); cursor: not-allowed; }
.srInput.srInput[type="number"]::-webkit-outer-spin-button,
.srInput.srInput[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.srInput.srInput[type="number"] { -moz-appearance: textfield; }
select.srInput {
	appearance: none; -webkit-appearance: none; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236b7086' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center;
}

/* ── Attached unit suffix (kg / rupee) — ONE style, defeats base dark pill ── */
.srControl { display: flex; align-items: stretch; }
.srControl--suffix .srInput.srInput { flex: 1 1 auto; width: auto; min-width: 0; border-radius: var(--r) 0 0 var(--r); border-right: none; }
/* One suffix pill for kg / rupee. !important + static defeat the base
   `.domesticWeight > div span` (dark, 0,2,2) and `.shipmentValue span`
   (position:absolute) so every unit badge is an identical light attached pill. */
.srControl .srSuffix, .srSuffix.srSuffix {
	position: static !important; inset: auto !important; margin: 0 !important;
	display: flex !important; align-items: center; justify-content: center;
	flex: 0 0 auto; min-width: 48px; width: auto !important; height: auto !important;
	padding: 0 14px !important; line-height: 1;
	border: 1.5px solid var(--field-line) !important; border-left: none !important;
	border-radius: 0 var(--r) var(--r) 0 !important;
	background: var(--tint) !important; color: var(--muted) !important;
	font-size: var(--fs); font-weight: 600;
}

/* ── Dimensions — same control + same unit pill (cm) ────────────────────── */
.srDims { display: flex; align-items: center; gap: 8px; }
.srDims .srInput.srInput { text-align: center; padding: 0 8px; }
.srDims .srX { color: var(--faint); font-weight: 700; flex: 0 0 auto; }
.srDims .srUnit {
	flex: 0 0 auto; min-width: 52px; height: 50px; display: flex; align-items: center; justify-content: center;
	background: var(--tint); color: var(--muted); border: 1.5px solid var(--field-line); border-radius: var(--r);
	font-weight: 600; font-size: var(--fs);
}

/* ── Validation ─────────────────────────────────────────────────────────── */
/* !important: the legacy `.calcComponentStyle small { font-size:14px;
   padding-left:20px; color:red }` rule ties or beats this on specificity and
   would otherwise leak a 20px indent and the wrong red into every message. */
.srErr, .srBulkError {
	font-size: var(--fs-sm) !important; font-weight: 500; color: var(--err) !important;
	margin: 4px 0 0 !important; padding-left: 0 !important; line-height: 1.35;
}
.srField.has-error .srInput.srInput { border-color: var(--err); }
.srField.has-error .srInput.srInput:focus { box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.14); }

/* ── Segmented control (Payment Mode) ─────────────────────────────────────
   Built from real radio inputs (native keyboard/arrow-key behaviour + correct
   "N of M" screen-reader announcement) with the input visually hidden and its
   sibling <span> styled as the pill — the same accessible pattern already used
   by the Quick calculator's vehicle-type picker (.vehicleOption). */
.srSeg {
	display: flex; align-items: center; gap: 4px; width: 100%;
	background: var(--tint); border: 1.5px solid var(--field-line); border-radius: var(--r); padding: 4px; min-height: 50px;
}
.srSegOption {
	position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center;
	min-height: 44px; border-radius: var(--r-sm); cursor: pointer;
	font-size: var(--fs); font-weight: 600; color: var(--ink-2);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.srSegOption input[type="radio"] {
	position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
/* Same technique as .vehicleOption input:checked + .vehicleBox elsewhere in
   this codebase — checked-sibling selector, not :has(), for broad support. */
.srSegOption input[type="radio"]:checked + span,
.srSegOption.is-active {
	background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(11, 7, 87, 0.09); border-radius: var(--r-sm);
}
.srSegOption span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 16px; border-radius: var(--r-sm); text-align: center; }
.srSegOption input[type="radio"]:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Buttons (one hierarchy: primary / ghost / link) ────────────────────── */
.srCalcActions { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.srBtn.srBtn {
	appearance: none; -webkit-appearance: none; border: 1.5px solid transparent; cursor: pointer; margin: 0; width: auto;
	min-height: 44px; font-family: inherit; font-size: var(--fs-in); font-weight: 700; line-height: 1; border-radius: var(--r);
	text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform 0.06s var(--ease);
}
.srBtn.srBtn:active { transform: translateY(1px); }
.srBtn-primary.srBtn-primary { padding: 14px 30px; color: #fff; background: linear-gradient(180deg, #7a63f0, #6a51e6); box-shadow: var(--sh-btn); }
.srBtn-primary.srBtn-primary:hover { background: linear-gradient(180deg, #7057ef, #5f47e0); box-shadow: 0 10px 26px rgba(111, 87, 233, 0.38); }
.srBtn-primary.srBtn-primary:disabled { background: #cfcae8; color: #fff; box-shadow: none; cursor: not-allowed; }
.srBtn-ghost.srBtn-ghost { padding: 14px 22px; background: none; color: var(--muted); font-weight: 600; }
.srBtn-ghost.srBtn-ghost:hover { color: var(--ink-2); }
.srBtnSpacer { margin-left: auto; }
.srBtnSpin, .srBulkSpinner {
	display: inline-block; width: 22px; height: 22px; box-sizing: border-box;
	border: 3px solid rgba(111, 87, 233, 0.22); border-top-color: var(--brand);
	border-radius: 50%; animation: srSpin 0.7s linear infinite;
}
@keyframes srSpin { to { transform: rotate(360deg); } }

/* ── Results ────────────────────────────────────────────────────────────── */
.srInlineResultHead {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 18px 24px; background: linear-gradient(180deg, #faf9ff, #f6f5fe); border-bottom: 1px solid var(--line);
}
.srInlineResultTitle { font-size: var(--fs-h); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.srInlineResultNote { font-size: var(--fs-sm); color: var(--muted); }
.srBackLink.srBackLink {
	appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; margin: 0; width: auto;
	display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0;
	color: var(--brand); font-size: var(--fs-cap); font-weight: 600; font-family: inherit;
	transition: color var(--dur) var(--ease);
}
.srBackLink.srBackLink::before { content: "\2190"; margin-right: 6px; }
.srBackLink.srBackLink:hover { color: var(--brand-2); }

/* Mode tabs (All / Air / Surface) — ONE size everywhere, ≥44px tap target */
.srModeTabs { display: flex; gap: 8px; list-style: none; margin: 0; padding: 18px 24px 4px; }
.srModeTabs li { list-style: none; margin: 0; }
.srModeTabs a {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	padding: 8px 20px; border-radius: 999px; font-size: var(--fs-cap); font-weight: 600;
	color: var(--muted); text-decoration: none; border: 1.5px solid var(--field-line); text-transform: capitalize;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.srModeTabs a:hover { border-color: var(--brand-line); color: var(--ink-2); }
.srModeTabs a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Result rows rendered as cards (table markup kept, styled as separated cards) */
.srResultScroll { max-height: 460px; overflow-y: auto; padding: 6px 20px 8px; }
.srInlineResult table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.srInlineResult thead th {
	text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--muted); padding: 10px 16px 6px; background: transparent;
}
.srInlineResult thead th:last-child, .srInlineResult tbody td:last-child { text-align: right; }
.srInlineResult tbody td {
	background: #fff; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
	padding: 16px; font-size: var(--fs); color: var(--ink-2); font-variant-numeric: tabular-nums;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.srInlineResult tbody td:first-child { border-left: 1.5px solid var(--line); border-radius: var(--r) 0 0 var(--r); font-weight: 600; color: var(--ink); }
.srInlineResult tbody td:last-child { border-right: 1.5px solid var(--line); border-radius: 0 var(--r) var(--r) 0; }
.srInlineResult tbody tr:hover td { border-color: var(--brand-line); background: var(--surface); }
.srInlineResult tbody tr.srBest td { border-color: #cdbff5; background: var(--brand-soft); }
.srInlineResult .srRate { font-weight: 800; color: var(--ink); font-size: var(--fs-in); }
.srInlineResult .srChip {
	display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 3px 9px; border-radius: 999px; vertical-align: middle;
}
.srInlineResult .srChip--cheap { background: var(--ok-bg); color: var(--ok); }
.srInlineResult .srChip--fast { background: var(--info-bg); color: var(--info); }

.srResultFoot { padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.srResultFoot a, .srResultFoot .srBtn-primary, .srResultFoot .js-srOpenSignup {
	display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border: 0; border-radius: var(--r);
	text-decoration: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: var(--fs);
	color: #fff; background: linear-gradient(180deg, #7a63f0, #6a51e6); box-shadow: var(--sh-btn);
	transition: box-shadow var(--dur) var(--ease), transform 0.06s var(--ease);
}
.srResultFoot a:hover, .srResultFoot .js-srOpenSignup:hover { box-shadow: 0 10px 26px rgba(111, 87, 233, 0.38); }
.srResultFoot a:active { transform: translateY(1px); }
.srNoData { display: block; padding: 44px 24px; text-align: center; color: var(--muted); font-size: var(--fs-in); }

/* ── Empty state ────────────────────────────────────────────────────────────
   Richer "no options" state: icon + heading + the API's own message + concrete
   next steps, instead of one flat line of text. Sits where the results table
   would otherwise render (same card, same padding rhythm). */
.srEmptyState { padding: 40px 24px 36px; text-align: center; }
.srEmptyIcon {
	width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
	background: var(--tint); display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.srEmptyIcon svg { width: 26px; height: 26px; }
.srEmptyTitle { font-size: var(--fs-h); font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.srEmptyMsg { font-size: var(--fs); color: var(--muted); margin: 0 0 18px; max-width: 420px; margin-left: auto; margin-right: auto; }
.srEmptyList { list-style: none; margin: 0 auto; padding: 0; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; }
.srEmptyList li { font-size: var(--fs-cap); color: var(--ink-2); padding-left: 20px; position: relative; }
.srEmptyList li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* ── Skeleton loader ─────────────────────────────────────────────────────────
   Shown in place of the result card while a request is in flight, sized to
   match real result rows so the real results replace it with no layout shift.
   Respects prefers-reduced-motion (see below) by falling back to a static tint. */
.srSkeletonCard { padding: 20px 24px 24px; }
.srSkelHead { height: 20px; width: 140px; border-radius: 6px; margin-bottom: 18px; }
.srSkelRow { height: 58px; border-radius: var(--r); margin-bottom: 10px; }
.srSkelHead, .srSkelRow {
	background: linear-gradient(100deg, var(--tint) 30%, #eceaf9 45%, var(--tint) 60%);
	background-size: 200% 100%; animation: srShimmer 1.4s ease-in-out infinite;
}
@keyframes srShimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* ── Tablet (768–1024px) ────────────────────────────────────────────────────
   The 2-column grid, tabs, and result rows are unchanged from desktop at this
   width, but the card gets a touch less padding and the mode-tab row wraps
   cleanly so nothing crowds the edges on an iPad-portrait viewport. */
@media (max-width: 1024px) and (min-width: 641px) {
	.srCalc, .srCard { padding: 26px 24px !important; }
	.srCalcGrid { gap: 20px; }
	.srModeTabs { flex-wrap: wrap; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.srCalc, .srCard { padding: 22px 18px !important; border-radius: var(--r-lg); }
	.srCalcGrid { grid-template-columns: 1fr; gap: 18px; }
	.srCalcActions { flex-wrap: wrap; }
	.srBtn-primary.srBtn-primary { flex: 1 1 auto; }
	.srInlineResultHead, .srModeTabs, .srResultFoot { padding-left: 16px; padding-right: 16px; }
	.srResultScroll { padding-left: 12px; padding-right: 12px; }
	.srInlineResult tbody td { padding: 13px; }
	.srModeTabs { flex-wrap: wrap; }
	.srSkeletonCard { padding: 16px 16px 20px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.srInlineResult, .srBtn, .srBtnSpin, .srBulkSpinner, .srInput.srInput, .srTab, .srModeTabs a, .srSegOption,
	.srSkelHead, .srSkelRow { animation: none !important; transition: none !important; }
	.srSkelHead, .srSkelRow { background: var(--tint); }
}