/* ShohNaat Shipping Calculator — front-end styles.
   All colours come from CSS custom properties injected by SSC_Settings::css_vars(). */

.ssc-app {
	/* The two logo colours. Everything else on this page is derived from them,
	   so there is no third hue anywhere in the UI — no pinks, no stock greys.
	   SSC_Settings::css_vars() recomputes every token below from the brand
	   colours saved in the admin and prints them after this file. */
	--ssc-primary: #F26F21;        /* logo orange */
	--ssc-primary-dark: #D95B12;
	--ssc-secondary: #4B1E90;      /* logo purple */
	--ssc-secondary-dk: #361567;

	/* Orange tints — every hover, active card and accent chip. */
	--ssc-primary-soft: rgba(242, 111, 33, .06);
	--ssc-primary-soft-2: rgba(242, 111, 33, .11);
	--ssc-decor: rgba(46, 33, 96, .05);

	/* Purple tints — lines, ghost buttons, panel fills, shadows. */
	--ssc-secondary-soft: rgba(46, 33, 96, .08);
	--ssc-line: rgba(46, 33, 96, .13);
	--ssc-ghost: rgba(46, 33, 96, .07);
	--ssc-ghost-strong: rgba(46, 33, 96, .12);
	--ssc-surface-alt: rgba(46, 33, 96, .03);
	--ssc-shadow-color: rgba(46, 33, 96, .08);
	--ssc-shadow-color-lg: rgba(46, 33, 96, .14);

	/* The single non-brand hue: form errors, which must not read as an accent. */
	--ssc-danger: #C0392B;
	--ssc-danger-dark: #96271C;
	--ssc-danger-soft: rgba(192, 57, 43, .10);

	--ssc-bg: #F6F5FA;
	--ssc-surface: #FFFFFF;
	--ssc-text: #241A3F;
	--ssc-muted: #7C7794;
	--ssc-radius: 16px;
	--ssc-shadow: 0 10px 30px var(--ssc-shadow-color);
	--ssc-shadow-lg: 0 18px 50px var(--ssc-shadow-color-lg);

	/* Hero band. Overridden by the inline block SSC_Settings::css_vars() prints,
	   which is emitted after this file and so wins at equal specificity.
	   These must live here, not on .ssc-hero — a local redeclaration there would
	   shadow the admin's values instead of inheriting them. */
	--ssc-hero-image: none;
	--ssc-hero-overlay: linear-gradient(120deg, var(--ssc-secondary) 0%, var(--ssc-secondary-dk) 42%, var(--ssc-primary) 100%);
	--ssc-hero-height: 470px;
	--ssc-content-max: 1060px;
	--ssc-gutter: 20px;

	box-sizing: border-box;
	color: var(--ssc-text);
	background: var(--ssc-bg);
	font-family: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.ssc-app[dir="rtl"] {
	font-family: "Tajawal", "Cairo", "Segoe UI", system-ui, Arial, sans-serif;
}

.ssc-app *,
.ssc-app *::before,
.ssc-app *::after { box-sizing: inherit; }

.ssc-app img { max-width: 100%; height: auto; }

/* ---------- Theme isolation ----------
   Themes and page builders style bare button/input/select elements, and that
   used to paint over the calculator — a theme's pink button background showing
   through the INTERNATIONAL / DOMESTIC cards, for example. Every selector in
   this file is scoped under .ssc-app so it outranks a plain `button` rule, and
   this reset clears what a theme may have inherited onto our controls. The
   component rules further down share the same specificity and come later, so
   they still win. */
.ssc-app button,
.ssc-app input,
.ssc-app select,
.ssc-app textarea {
	margin: 0;
	background-image: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	max-width: none;
	float: none;
}
.ssc-app button {
	background-color: transparent;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	padding: 0;
	text-align: inherit;
	text-shadow: none;
	text-decoration: none;
	transform: none;
	line-height: 1.55;
	width: auto;
}
.ssc-app button::before,
.ssc-app button::after { content: none; display: none; }
.ssc-app a { box-shadow: none; }
.ssc-app ul, .ssc-app ol { list-style: none; margin: 0; padding: 0; }
.ssc-app li::before, .ssc-app li::marker { content: none; }
.ssc-app h2, .ssc-app h3, .ssc-app h4 { text-transform: none; letter-spacing: normal; }
.ssc-app table { border-collapse: collapse; width: 100%; }
.ssc-app label { display: block; margin: 0; font-weight: inherit; }


/* Inline SVGs carry no intrinsic size, so every icon context sets its own.
   Keep this list in sync when adding a new icon slot. */
.ssc-app .ssc-signin svg,
.ssc-app .ssc-lang svg,
.ssc-app .ssc-saved-btn svg,
.ssc-app .ssc-select-clear svg,
.ssc-app .ssc-select-caret svg,
.ssc-app .ssc-map-tool svg,
.ssc-app .ssc-row-remove svg,
.ssc-app .ssc-alert svg { width: 17px; height: 17px; flex: none; }
.ssc-app .ssc-swap svg { width: 22px; height: 22px; flex: none; }
.ssc-app .ssc-share svg { width: 19px; height: 19px; flex: none; }
.ssc-app .ssc-step-dot svg { width: 20px; height: 20px; }

.ssc-app .ssc-wrap {
	max-width: var(--ssc-content-max, 1060px);
	margin: 0 auto;
	padding: 0 var(--ssc-gutter, 20px) 56px;
}

/* ---------- Loading skeleton ---------- */
.ssc-app .ssc-boot-skeleton { max-width: var(--ssc-content-max, 1060px); margin: 0 auto; padding: 40px var(--ssc-gutter, 20px); }
.ssc-app .ssc-skel { background: linear-gradient(90deg, var(--ssc-ghost-strong) 25%, var(--ssc-ghost) 37%, var(--ssc-ghost-strong) 63%); background-size: 400% 100%; animation: ssc-shimmer 1.4s ease infinite; border-radius: 12px; }
.ssc-app .ssc-skel-bar { height: 52px; margin-bottom: 22px; }
.ssc-app .ssc-skel-card { height: 220px; margin-bottom: 20px; border-radius: var(--ssc-radius); }
@keyframes ssc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Top bar ---------- */
.ssc-app {
	/* The topbar is fixed (see below) and removed from flow, so the app root
	   pads its own top by the topbar's real measured height — kept in sync by
	   ssc-app.js — instead of the fixed element's height being guessed here. */
	padding-top: var(--ssc-topbar-h, 0px);
}
.ssc-app .ssc-topbar {
	background: var(--ssc-secondary);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	/* `position: sticky` looked right in isolation but silently does nothing on
	   several real hosting setups: many WordPress themes (Hello/Elementor's
	   Canvas template among them) set `overflow-x: hidden` on <html> to kill
	   horizontal scrollbars from full-width sections, and that alone disables
	   sticky positioning for every descendant in every major browser. `fixed`
	   isn't affected by an ancestor's overflow — only by transform/filter/
	   will-change on an ancestor, none of which this markup or a normal theme
	   sets on the chain up to <body>. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 40;
}
body.admin-bar .ssc-app .ssc-topbar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ssc-app .ssc-topbar { top: 46px; }
}
.ssc-app .ssc-topbar-inner {
	max-width: var(--ssc-content-max, 1060px);
	margin: 0 auto;
	padding: 12px var(--ssc-gutter, 20px);
	display: flex;
	align-items: center;
	gap: 14px;
	/* One row, as in the reference: the links take the middle and the actions
	   stay pinned to the end rather than wrapping onto a second line. */
	flex-wrap: nowrap;
}
.ssc-app .ssc-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ssc-app .ssc-logo-svg { height: 40px; width: auto; display: block; }
.ssc-app .ssc-nav {
	display: flex; align-items: center; gap: 2px;
	/* flex-basis auto with no shrink: the links keep their full width, so they
	   can never be overlapped by the actions. Below 1150px they move into the
	   drawer instead. */
	flex: 0 0 auto; flex-wrap: nowrap;
}
.ssc-app .ssc-nav-spacer { flex: 1 1 auto; }
.ssc-app .ssc-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px;
	border-radius: 10px;
	/* White by default for the inline topbar (purple bg). Below 1150px this
	   class is reused for links inside the white slide-out drawer instead, so
	   the max-width:1150px block further down restores the dark text there. */
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.ssc-app .ssc-nav-link:hover { background: var(--ssc-primary-soft); color: var(--ssc-primary-dark); }
.ssc-app .ssc-nav-link.is-active { color: var(--ssc-primary); font-weight: 600; }
.ssc-app .ssc-nav-link svg { width: 17px; height: 17px; flex: none; }
.ssc-app .ssc-topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ssc-app .ssc-signin {
	display: inline-flex; align-items: center; gap: 7px;
	/* Orange, not the topbar's own purple — a same-colour button would
	   disappear against the now-solid-purple bar. */
	background: var(--ssc-primary); color: #fff;
	border: 0; border-radius: 10px; padding: 9px 16px;
	font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
	white-space: nowrap;
}
.ssc-app .ssc-signin:hover { background: var(--ssc-primary-dark); color: #fff; }
.ssc-app .ssc-lang, .ssc-app .ssc-currency {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--ssc-line); color: var(--ssc-secondary);
	border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ssc-app .ssc-lang:hover, .ssc-app .ssc-currency:hover { border-color: var(--ssc-primary); color: var(--ssc-primary); }
.ssc-app .ssc-currency select { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; outline: none; }

/* ---------- Hero + tracking ---------- */
/* The hero band: the admin-uploaded photo with the brand gradient over it.
   Both layers are driven by custom properties written by SSC_Settings::css_vars(). */
.ssc-app .ssc-hero {
	position: relative;
	padding: 34px 0 0;
	background-color: var(--ssc-bg);
}
/* The band is its own layer so the photo can use `cover` without stretching
   down the whole page. */
.ssc-app .ssc-hero::before {
	content: "";
	position: absolute;
	top: 0; inset-inline: 0;
	height: var(--ssc-hero-height);
	background-image: var(--ssc-hero-overlay), var(--ssc-hero-image);
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	background-position: center, center;
	z-index: 0;
	pointer-events: none;
}
.ssc-app .ssc-hero > * { position: relative; z-index: 1; }
.ssc-app .ssc-track {
	position: relative; z-index: 2;
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto 26px;
	padding-inline: var(--ssc-gutter, 20px);
}
.ssc-app .ssc-track-box {
	display: flex; align-items: stretch;
	background: #fff; border-radius: 8px; overflow: hidden;
	box-shadow: var(--ssc-shadow-lg);
	width: 100%;
}
.ssc-app .ssc-track-box input {
	flex: 1 1 auto; border: 0; outline: none; padding: 15px 18px;
	font: inherit; font-size: 15px; color: var(--ssc-text); background: #fff; min-width: 0;
}
.ssc-app .ssc-track-box button {
	flex: none; border: 0; cursor: pointer;
	background: var(--ssc-primary); color: #fff;
	padding: 0 34px; font: inherit; font-weight: 600; font-size: 15px;
	transition: background .15s ease;
}
.ssc-app .ssc-track-box button:hover { background: var(--ssc-primary-dark); }
.ssc-app .ssc-track-result {
	position: relative; z-index: 2;
	max-width: var(--ssc-content-max, 1060px); margin: -14px auto 20px;
	background: #fff; border-radius: 12px; padding: 16px 20px;
	box-shadow: var(--ssc-shadow); font-size: 14px;
}
.ssc-app .ssc-track-result.is-error { color: var(--ssc-danger-dark); }
.ssc-app .ssc-track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; }
.ssc-app .ssc-track-grid dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ssc-muted); }
.ssc-app .ssc-track-grid dd { margin: 2px 0 0; font-weight: 600; color: var(--ssc-secondary); }

/* ---------- Cards ---------- */
.ssc-app .ssc-card {
	position: relative; z-index: 2;
	background: var(--ssc-surface);
	border-radius: var(--ssc-radius);
	box-shadow: var(--ssc-shadow);
	padding: 30px;
	margin: 0 auto 22px;
	max-width: var(--ssc-content-max, 1060px);
}
.ssc-app .ssc-card-title {
	text-align: center;
	font-size: 24px; font-weight: 700; color: var(--ssc-primary);
	margin: 4px 0 22px;
}
.ssc-app .ssc-section-title {
	text-align: center; font-size: 26px; font-weight: 700;
	color: var(--ssc-primary); margin: 30px 0 22px;
}

/* ---------- Scope tabs ---------- */
.ssc-app .ssc-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.ssc-app .ssc-scope-btn {
	color: var(--ssc-secondary);
	background: #fff; border: 2px solid var(--ssc-line); border-radius: var(--ssc-radius);
	padding: 22px 16px; cursor: pointer; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ssc-app .ssc-scope-btn:hover { border-color: var(--ssc-primary); transform: translateY(-2px); }
.ssc-app .ssc-scope-btn.is-active { border-color: var(--ssc-primary); background: var(--ssc-primary-soft); }
.ssc-app .ssc-scope-btn svg { width: 74px; height: 74px; }
.ssc-app .ssc-scope-label { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ssc-secondary); }
.ssc-app .ssc-scope-btn.is-active .ssc-scope-label { color: var(--ssc-primary); }

/* ---------- Country row ---------- */
.ssc-app .ssc-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }
.ssc-app .ssc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ssc-app .ssc-label { font-size: 13px; color: var(--ssc-muted); font-weight: 500; }
.ssc-app .ssc-label .ssc-req { color: var(--ssc-primary); }
.ssc-app .ssc-select {
	position: relative;
	display: flex; align-items: center; gap: 10px;
	border: 2px solid var(--ssc-primary); border-radius: 10px;
	background: #fff; padding: 0 10px 0 0; cursor: pointer; min-height: 50px;
}
.ssc-app .ssc-select.is-plain { border-color: var(--ssc-line); }
.ssc-app .ssc-select-flag {
	width: 56px; height: 46px; margin: 1px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ssc-secondary-soft); border-radius: 8px; font-size: 22px; flex: none;
}
.ssc-app .ssc-select-value { flex: 1 1 auto; padding: 12px 0; font-size: 15px; color: var(--ssc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssc-app .ssc-select-value.is-empty { color: var(--ssc-muted); }
.ssc-app .ssc-select-clear, .ssc-app .ssc-select-caret {
	background: none; border: 0; cursor: pointer; color: var(--ssc-muted);
	display: inline-flex; align-items: center; padding: 4px; flex: none;
}
.ssc-app .ssc-select-clear:hover { color: var(--ssc-primary); }
.ssc-app .ssc-swap {
	align-self: center; margin-bottom: 4px;
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--ssc-line); background: #fff; color: var(--ssc-primary);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}
.ssc-app .ssc-swap:hover { background: var(--ssc-primary-soft); transform: rotate(180deg); }

/* Dropdown */
.ssc-app .ssc-dropdown {
	background: var(--ssc-surface);
	position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: 100%;
	background: #fff; border: 1px solid var(--ssc-line); border-radius: 12px;
	box-shadow: var(--ssc-shadow-lg); z-index: 60; max-height: 320px; overflow: hidden;
	display: flex; flex-direction: column;
}
.ssc-app .ssc-dropdown-search { padding: 10px; border-bottom: 1px solid var(--ssc-line); }
.ssc-app .ssc-dropdown-search input {
	width: 100%; border: 1px solid var(--ssc-line); border-radius: 8px;
	padding: 9px 12px; font: inherit; outline: none;
}
.ssc-app .ssc-dropdown-search input:focus { border-color: var(--ssc-primary); }
.ssc-app .ssc-dropdown-list { overflow-y: auto; padding: 6px; }
.ssc-app .ssc-dropdown-item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 9px 10px; border: 0; background: none; cursor: pointer;
	border-radius: 8px; font: inherit; text-align: start; color: var(--ssc-text);
}
.ssc-app .ssc-dropdown-item:hover, .ssc-app .ssc-dropdown-item.is-active { background: var(--ssc-primary-soft); color: var(--ssc-primary-dark); }
.ssc-app .ssc-dropdown-empty { padding: 18px; text-align: center; color: var(--ssc-muted); font-size: 14px; }

/* ---------- Package types ---------- */
.ssc-app .ssc-pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.ssc-app .ssc-pkg {
	color: var(--ssc-secondary);
	background: #fff; border: 2px solid var(--ssc-line); border-radius: var(--ssc-radius);
	padding: 18px 10px; cursor: pointer; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ssc-app .ssc-pkg:hover { border-color: var(--ssc-primary); transform: translateY(-2px); }
.ssc-app .ssc-pkg.is-active { border-color: var(--ssc-primary); background: var(--ssc-primary-soft); color: var(--ssc-primary); }
.ssc-app .ssc-pkg svg { width: 58px; height: 58px; }
.ssc-app .ssc-pkg-label { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--ssc-muted); }
.ssc-app .ssc-pkg.is-active .ssc-pkg-label { color: var(--ssc-primary); }

/* ---------- Inputs ---------- */
.ssc-app .ssc-input, .ssc-app .ssc-textarea, .ssc-app .ssc-native-select {
	width: 100%; border: 1px solid var(--ssc-line); border-radius: 10px;
	padding: 13px 14px; font: inherit; font-size: 15px; color: var(--ssc-text);
	background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.ssc-app .ssc-input:focus, .ssc-app .ssc-textarea:focus, .ssc-app .ssc-native-select:focus {
	border-color: var(--ssc-primary); box-shadow: 0 0 0 3px var(--ssc-primary-soft);
}
.ssc-app .ssc-input.is-error, .ssc-app .ssc-textarea.is-error, .ssc-app .ssc-native-select.is-error { border-color: var(--ssc-danger); background: var(--ssc-danger-soft); }
.ssc-app .ssc-textarea { min-height: 96px; resize: vertical; }
.ssc-app .ssc-field-error { font-size: 12px; color: var(--ssc-danger); }
.ssc-app .ssc-hint { font-size: 12px; color: var(--ssc-muted); }
.ssc-app .ssc-caps-label {
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ssc-primary); margin-bottom: 7px; display: block;
}
.ssc-app .ssc-caps-label .ssc-opt { color: var(--ssc-muted); font-weight: 500; }
.ssc-app .ssc-soft-label { font-size: 13px; color: var(--ssc-muted); margin-bottom: 6px; display: block; }

/* Dimensions row */
.ssc-app .ssc-dims { display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr auto; gap: 14px; align-items: start; margin-top: 14px; }
.ssc-app .ssc-dim { display: flex; flex-direction: column; gap: 6px; }
.ssc-app .ssc-dim input { text-align: center; }
.ssc-app .ssc-dim-label { font-size: 12px; color: var(--ssc-muted); text-align: center; }
.ssc-app .ssc-qty {
	display: flex; align-items: center; justify-content: space-between;
	border: 1px solid var(--ssc-line); border-radius: 10px; overflow: hidden; background: #fff;
}
.ssc-app .ssc-qty button {
	width: 42px; height: 46px; border: 0; background: none; cursor: pointer;
	color: var(--ssc-primary); font-size: 20px; line-height: 1;
}
.ssc-app .ssc-qty button:hover { background: var(--ssc-primary-soft); }
.ssc-app .ssc-qty input { width: 100%; border: 0; text-align: center; font: inherit; outline: none; padding: 0; }
.ssc-app .ssc-row-remove {
	border: 0; background: none; color: var(--ssc-muted); cursor: pointer;
	width: 42px; height: 46px; border-radius: 10px; align-self: start;
}
.ssc-app .ssc-row-remove:hover { color: var(--ssc-danger); background: var(--ssc-danger-soft); }

.ssc-app .ssc-add-items {
	margin-top: 18px; background: #fff; color: var(--ssc-primary);
	border: 1px solid var(--ssc-primary); border-radius: 10px;
	padding: 13px 22px; font: inherit; font-weight: 600; font-size: 13px;
	letter-spacing: .05em; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.ssc-app .ssc-add-items:hover { background: var(--ssc-primary); color: #fff; }
.ssc-app .ssc-item-head { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.ssc-app .ssc-item-head span { font-size: 12px; font-weight: 700; color: var(--ssc-muted); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Buttons ---------- */
.ssc-app .ssc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 0; border-radius: 10px; cursor: pointer;
	font: inherit; font-weight: 600; padding: 15px 28px;
	text-decoration: none; /* the same class is used on <a> elements */
	transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ssc-app .ssc-btn:hover { text-decoration: none; }
.ssc-app .ssc-btn:disabled { opacity: .6; cursor: not-allowed; }
.ssc-app .ssc-btn-primary { background: var(--ssc-primary); color: #fff; }
.ssc-app .ssc-btn-primary:hover:not(:disabled) { background: var(--ssc-primary-dark); }
.ssc-app .ssc-btn-secondary { background: var(--ssc-secondary); color: #fff; }
.ssc-app .ssc-btn-secondary:hover:not(:disabled) { background: var(--ssc-secondary-dk); }
.ssc-app .ssc-btn-ghost { background: var(--ssc-ghost); color: var(--ssc-secondary); }
.ssc-app .ssc-btn-ghost:hover:not(:disabled) { background: var(--ssc-ghost-strong); }
.ssc-app .ssc-btn-outline { background: #fff; color: var(--ssc-primary); border: 1px solid var(--ssc-primary); }
.ssc-app .ssc-btn-outline:hover:not(:disabled) { background: var(--ssc-primary-soft); }
.ssc-app .ssc-btn-block { width: 100%; }
.ssc-app .ssc-calculate {
	display: block; width: 100%; max-width: var(--ssc-content-max, 1060px); margin: 0 auto 22px;
	background: var(--ssc-primary); color: #fff;
	border: 0; border-radius: var(--ssc-radius); padding: 19px;
	font: inherit; font-size: 18px; font-weight: 600; cursor: pointer;
	box-shadow: var(--ssc-shadow); position: relative; z-index: 2;
}
.ssc-app .ssc-calculate:hover:not(:disabled) { background: var(--ssc-primary-dark); }
.ssc-app .ssc-calculate:disabled { opacity: .7; cursor: progress; }

/* ---------- Empty state ---------- */
.ssc-app .ssc-empty { text-align: center; padding: 46px 20px; }
.ssc-app .ssc-empty svg { width: 62px; height: 62px; color: var(--ssc-primary); opacity: .45; }
.ssc-app .ssc-empty h3 { margin: 16px 0 8px; font-size: 21px; font-weight: 700; color: var(--ssc-primary); }
.ssc-app .ssc-empty p { margin: 0 auto; max-width: 460px; color: var(--ssc-muted); font-size: 15px; }

/* ---------- Results ---------- */
.ssc-app .ssc-results-head { max-width: var(--ssc-content-max, 1060px); margin: 0 auto 18px; }
.ssc-app .ssc-filter { max-width: 230px; }
.ssc-app .ssc-offer {
	display: grid; grid-template-columns: 240px 1fr 300px;
	background: #fff; border: 1px solid var(--ssc-line); border-radius: var(--ssc-radius);
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto 16px; overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.ssc-app .ssc-offer:hover { box-shadow: var(--ssc-shadow-lg); transform: translateY(-2px); border-color: var(--ssc-primary); }
.ssc-app .ssc-offer-brand {
	padding: 26px 22px; display: flex; flex-direction: column; gap: 10px;
	align-items: flex-start; justify-content: center;
	border-inline-end: 1px solid var(--ssc-line);
}
.ssc-app .ssc-offer-logo {
	width: 46px; height: 46px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 18px; color: #fff;
}
.ssc-app .ssc-offer-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.ssc-app .ssc-offer-name { font-size: 17px; font-weight: 600; color: var(--ssc-secondary); }
.ssc-app .ssc-offer-tag {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--ssc-secondary-soft); color: var(--ssc-secondary);
	border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600;
}
.ssc-app .ssc-offer-tag svg { width: 14px; height: 14px; }
.ssc-app .ssc-offer-timeline {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	padding: 24px 20px; flex-wrap: wrap;
}
.ssc-app .ssc-tl-node { display: flex; align-items: center; gap: 12px; }
.ssc-app .ssc-tl-icon {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--ssc-primary-soft); color: var(--ssc-primary);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.ssc-app .ssc-tl-icon svg { width: 22px; height: 22px; }
.ssc-app .ssc-tl-label { font-size: 13px; color: var(--ssc-muted); }
.ssc-app .ssc-tl-date { font-size: 15px; font-weight: 700; color: var(--ssc-text); }
.ssc-app .ssc-tl-sub { font-size: 13px; color: var(--ssc-muted); }
.ssc-app .ssc-tl-line { flex: 1 1 40px; min-width: 40px; border-top: 2px dashed var(--ssc-line); }
.ssc-app .ssc-tl-days {
	background: var(--ssc-primary); color: #fff; border-radius: 12px;
	padding: 9px 14px; text-align: center; line-height: 1.1; flex: none;
}
.ssc-app .ssc-tl-days b { display: block; font-size: 20px; font-weight: 700; }
.ssc-app .ssc-tl-days span { font-size: 11px; opacity: .9; }
.ssc-app .ssc-offer-price {
	background: var(--ssc-surface-alt); border-inline-start: 1px solid var(--ssc-line);
	padding: 24px; display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 14px;
}
.ssc-app .ssc-price { font-size: 30px; font-weight: 700; color: var(--ssc-primary); white-space: nowrap; }
.ssc-app .ssc-price small { font-size: 16px; font-weight: 600; }
.ssc-app .ssc-book {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--ssc-primary); color: #fff; border: 0;
	border-radius: 999px; padding: 14px 32px;
	font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
	transition: background .16s ease, transform .16s ease;
}
.ssc-app .ssc-book:hover { background: var(--ssc-primary-dark); transform: translateX(-2px); }
.ssc-app[dir="rtl"] .ssc-book:hover { transform: translateX(2px); }
.ssc-app .ssc-book svg { width: 18px; height: 18px; }
.ssc-app[dir="rtl"] .ssc-book svg { transform: scaleX(-1); }
.ssc-app .ssc-weight-note { text-align: center; color: var(--ssc-muted); font-size: 13px; margin: 0 auto 18px; }

/* ---------- Partners ---------- */
.ssc-app .ssc-partners { max-width: var(--ssc-content-max, 1060px); margin: 0 auto; background: #fff; border-radius: var(--ssc-radius); box-shadow: var(--ssc-shadow); padding: 26px; }
.ssc-app .ssc-partners h3 { text-align: center; font-size: 21px; font-weight: 700; color: var(--ssc-secondary); margin: 0 0 22px; }
.ssc-app .ssc-partner-row { display: flex; align-items: center; justify-content: space-around; gap: 24px; flex-wrap: wrap; }
.ssc-app .ssc-partner {
	display: flex; align-items: center; gap: 10px;
	filter: grayscale(1); opacity: .65; transition: filter .2s ease, opacity .2s ease;
}
.ssc-app .ssc-partner:hover { filter: none; opacity: 1; }
.ssc-app .ssc-partner-mark {
	width: 40px; height: 40px; border-radius: 10px; color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.ssc-app .ssc-partner-name { font-weight: 700; color: var(--ssc-secondary); font-size: 15px; }

/* ---------- Wizard ---------- */
.ssc-app .ssc-steps { display: flex; align-items: flex-start; max-width: var(--ssc-content-max, 1060px); margin: 26px auto 30px; }
.ssc-app .ssc-step { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; width: 130px; text-align: center; }
.ssc-app .ssc-step-dot {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--ssc-ghost-strong); color: var(--ssc-muted);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 16px; transition: background .2s ease, color .2s ease;
}
.ssc-app .ssc-step.is-active .ssc-step-dot { background: var(--ssc-primary); color: #fff; }
.ssc-app .ssc-step.is-done .ssc-step-dot { background: var(--ssc-secondary); color: #fff; }
.ssc-app .ssc-step-label { font-size: 13px; font-weight: 600; color: var(--ssc-muted); }
.ssc-app .ssc-step.is-active .ssc-step-label { color: var(--ssc-primary); }
.ssc-app .ssc-step.is-done .ssc-step-label { color: var(--ssc-secondary); }
.ssc-app .ssc-step-sub { font-size: 11px; color: var(--ssc-muted); }
.ssc-app .ssc-step-line { flex: 1 1 auto; height: 2px; background: var(--ssc-line); margin-top: 22px; }
.ssc-app .ssc-step-line.is-done { background: var(--ssc-secondary); }

.ssc-app .ssc-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--ssc-content-max, 1060px); margin: 0 auto; }
.ssc-app .ssc-panel {
	background: #fff; border-radius: var(--ssc-radius); box-shadow: var(--ssc-shadow); padding: 24px;
}
.ssc-app .ssc-panel-title { font-size: 20px; font-weight: 700; color: var(--ssc-primary); margin: 0 0 16px; }
.ssc-app .ssc-saved-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	background: var(--ssc-primary-soft); color: var(--ssc-primary);
	border: 0; border-radius: 10px; padding: 12px; font: inherit; font-size: 14px; cursor: pointer;
	margin-bottom: 18px;
}
.ssc-app .ssc-saved-btn:hover { background: var(--ssc-primary-soft-2); }
.ssc-app .ssc-form-row { margin-bottom: 16px; }
.ssc-app .ssc-form-grid { display: grid; grid-template-columns: 1fr 130px; gap: 12px; }
.ssc-app .ssc-phone { display: flex; align-items: stretch; border: 1px solid var(--ssc-primary); border-radius: 10px; overflow: hidden; background: #fff; }
.ssc-app .ssc-phone.is-error { border-color: var(--ssc-danger); }
.ssc-app .ssc-phone-dial {
	display: flex; align-items: center; gap: 7px; padding: 0 12px;
	background: var(--ssc-secondary-soft); color: var(--ssc-secondary); font-weight: 600; font-size: 14px; flex: none;
}
.ssc-app .ssc-phone input { flex: 1 1 auto; border: 0; outline: none; padding: 13px 12px; font: inherit; min-width: 0; }

/* Map */
.ssc-app .ssc-map {
	position: relative; height: 210px; border-radius: 12px; overflow: hidden;
	border: 1px solid var(--ssc-line); margin-bottom: 16px;
	background:
		.ssc-app repeating-linear-gradient(0deg, .ssc-app var(--ssc-line) 0 1px, .ssc-app transparent 1px 34px),
		.ssc-app repeating-linear-gradient(90deg, .ssc-app var(--ssc-line) 0 1px, .ssc-app transparent 1px 34px),
		var(--ssc-surface-alt);
	cursor: crosshair;
}
.ssc-app .ssc-map-canvas { position: absolute; inset: 0; }
.ssc-app .ssc-map-hint {
	position: absolute; inset-inline-start: 10px; bottom: 10px;
	background: rgba(255, 255, 255, .94); border-radius: 8px;
	padding: 7px 12px; font-size: 12px; color: var(--ssc-secondary); pointer-events: none;
}
.ssc-app .ssc-map-pin { position: absolute; transform: translate(-50%, -100%); color: var(--ssc-primary); pointer-events: none; }
.ssc-app .ssc-map-pin svg { width: 28px; height: 28px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.ssc-app .ssc-map-tools { position: absolute; inset-inline-end: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ssc-app .ssc-map-tool {
	width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ssc-line);
	background: #fff; color: var(--ssc-secondary); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.ssc-app .ssc-map-tool:hover { color: var(--ssc-primary); border-color: var(--ssc-primary); }

/* Wizard footer */
.ssc-app .ssc-wizard-nav {
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
	max-width: var(--ssc-content-max, 1060px); margin: 24px auto 0;
}
.ssc-app .ssc-share {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ssc-line);
	background: #fff; color: var(--ssc-secondary); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.ssc-app .ssc-share:hover { color: var(--ssc-primary); border-color: var(--ssc-primary); }

/* Review */
.ssc-app .ssc-review-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; max-width: var(--ssc-content-max, 1060px); margin: 0 auto; align-items: start; }
.ssc-app .ssc-review-block { border: 1px solid var(--ssc-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.ssc-app .ssc-review-block h4 {
	margin: 0 0 10px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
	color: var(--ssc-primary); display: flex; align-items: center; justify-content: space-between;
}
.ssc-app .ssc-review-block h4 button { background: none; border: 0; color: var(--ssc-secondary); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.ssc-app .ssc-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 14px; }
.ssc-app .ssc-kv dt { color: var(--ssc-muted); }
.ssc-app .ssc-kv dd { margin: 0; font-weight: 600; color: var(--ssc-text); }
.ssc-app .ssc-summary { position: sticky; top: 90px; }
.ssc-app .ssc-summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; border-bottom: 1px dashed var(--ssc-line); }
.ssc-app .ssc-summary-line:last-of-type { border-bottom: 0; }
.ssc-app .ssc-summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ssc-line); }
.ssc-app .ssc-summary-total span { font-size: 15px; font-weight: 600; color: var(--ssc-secondary); }
.ssc-app .ssc-summary-total b { font-size: 26px; color: var(--ssc-primary); }
.ssc-app .ssc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin: 16px 0; cursor: pointer; }
.ssc-app .ssc-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ssc-primary); flex: none; }
.ssc-app .ssc-check a { color: var(--ssc-primary); }

/* Success */
.ssc-app .ssc-success { max-width: 620px; margin: 40px auto; background: #fff; border-radius: var(--ssc-radius); box-shadow: var(--ssc-shadow); padding: 40px 30px; text-align: center; }
.ssc-app .ssc-success-icon {
	width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 18px;
	background: var(--ssc-primary-soft); color: var(--ssc-primary);
	display: flex; align-items: center; justify-content: center;
}
.ssc-app .ssc-success-icon svg { width: 38px; height: 38px; }
.ssc-app .ssc-success h2 { margin: 0 0 8px; font-size: 25px; color: var(--ssc-secondary); }
.ssc-app .ssc-success p { color: var(--ssc-muted); margin: 0 0 22px; }
.ssc-app .ssc-success-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.ssc-app .ssc-success-code { background: var(--ssc-bg); border-radius: 12px; padding: 14px; }
.ssc-app .ssc-success-code span { display: block; font-size: 12px; color: var(--ssc-muted); margin-bottom: 4px; }
.ssc-app .ssc-success-code b { font-size: 16px; color: var(--ssc-secondary); letter-spacing: .02em; }
.ssc-app .ssc-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Alerts */
.ssc-app .ssc-alert {
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto 16px; border-radius: 12px; padding: 13px 18px;
	font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.ssc-app .ssc-alert-error { background: var(--ssc-danger-soft); color: var(--ssc-danger-dark); }
.ssc-app .ssc-alert-info { background: var(--ssc-primary-soft); color: var(--ssc-primary-dark); }
.ssc-toast {
	position: fixed; inset-block-end: 26px; inset-inline-end: 26px; z-index: 200;
	background: var(--ssc-secondary); color: #fff; border-radius: 12px;
	padding: 13px 20px; font-size: 14px; box-shadow: var(--ssc-shadow-lg);
	animation: ssc-rise .25s ease;
}
@keyframes ssc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Full-width breakout ----------
   Lets the app span the viewport even when the theme wraps the content in a
   narrow container, while the cards stay in a centred column. */
.ssc-app.ssc-fullwidth {
	width: 100vw;
	max-width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
}
.ssc-app .ssc-hero > .ssc-card,
.ssc-app .ssc-hero > .ssc-calculate,
.ssc-app .ssc-hero > .ssc-partners,
.ssc-app .ssc-hero > .ssc-offer,
.ssc-app .ssc-hero > .ssc-alert,
.ssc-app .ssc-hero > .ssc-results-head,
.ssc-app .ssc-hero > .ssc-section-title,
.ssc-app .ssc-hero > .ssc-weight-note,
.ssc-app .ssc-hero > .ssc-track-result {
	margin-inline: auto;
	width: calc(100% - (var(--ssc-gutter, 20px) * 2));
}
.ssc-app .ssc-page > .ssc-panel-card,
.ssc-app .ssc-page > .ssc-faq-grid { width: calc(100% - (var(--ssc-gutter, 20px) * 2)); margin-inline: auto; }

.ssc-app .ssc-track,
.ssc-app .ssc-card,
.ssc-app .ssc-calculate,
.ssc-app .ssc-offer,
.ssc-app .ssc-results-head,
.ssc-app .ssc-partners,
.ssc-app .ssc-alert,
.ssc-app .ssc-track-result,
.ssc-app .ssc-steps,
.ssc-app .ssc-panels,
.ssc-app .ssc-review-grid,
.ssc-app .ssc-wizard-nav {
	max-width: var(--ssc-content-max, 1060px);
}
.ssc-app .ssc-panels-wide { max-width: var(--ssc-content-max, 1060px); margin-inline: auto; }
.ssc-app .ssc-hero-short { padding-top: 26px; }
.ssc-app .ssc-hero-short::before { height: 260px; }

/* ---------- Tracking page ---------- */
.ssc-app .ssc-track-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ssc-app .ssc-track-head .ssc-tl-label { display: block; margin-bottom: 4px; }
.ssc-app .ssc-track-code { display: block; font-size: 20px; font-weight: 700; color: var(--ssc-secondary); letter-spacing: .02em; }
.ssc-app .ssc-status-pill {
	display: inline-flex; align-items: center;
	background: var(--ssc-primary-soft); color: var(--ssc-primary-dark);
	border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ssc-app .ssc-status-pill.is-cancelled { background: var(--ssc-danger-soft); color: var(--ssc-danger-dark); }

.ssc-app .ssc-progress { margin-top: 8px; }
.ssc-app .ssc-progress-title {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ssc-muted); margin-bottom: 16px;
}
.ssc-app .ssc-progress-track { display: flex; align-items: flex-start; }
.ssc-app .ssc-progress-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; flex: none; text-align: center; }
.ssc-app .ssc-progress-dot {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--ssc-ghost-strong); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.ssc-app .ssc-progress-dot svg { width: 17px; height: 17px; }
.ssc-app .ssc-progress-step.is-done .ssc-progress-dot { background: var(--ssc-secondary); }
.ssc-app .ssc-progress-step.is-now .ssc-progress-dot { background: var(--ssc-primary); box-shadow: 0 0 0 5px var(--ssc-primary-soft); }
.ssc-app .ssc-progress-label { font-size: 12px; color: var(--ssc-muted); line-height: 1.3; }
.ssc-app .ssc-progress-step.is-done .ssc-progress-label { color: var(--ssc-secondary); font-weight: 600; }
.ssc-app .ssc-progress-step.is-now .ssc-progress-label { color: var(--ssc-primary); font-weight: 600; }
.ssc-app .ssc-progress-line { flex: 1 1 auto; height: 3px; background: var(--ssc-ghost-strong); margin-top: 16px; border-radius: 2px; min-width: 12px; }
.ssc-app .ssc-progress-line.is-done { background: var(--ssc-secondary); }

/* ---------- Tables (My orders) ---------- */
.ssc-app .ssc-table-scroll { overflow-x: auto; }
.ssc-app .ssc-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
.ssc-app .ssc-table th {
	text-align: start; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ssc-muted); padding: 10px 12px; border-bottom: 2px solid var(--ssc-line); white-space: nowrap;
}
.ssc-app .ssc-table td { padding: 13px 12px; border-bottom: 1px solid var(--ssc-line); }
.ssc-app .ssc-table tr:last-child td { border-bottom: 0; }
.ssc-app .ssc-table tr:hover td { background: var(--ssc-surface-alt); }
.ssc-app .ssc-btn-sm { padding: 7px 14px; font-size: 13px; }

/* ---------- FAQ ---------- */
.ssc-app .ssc-faq { border: 1px solid var(--ssc-line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.ssc-app .ssc-faq.is-open { border-color: var(--ssc-primary); }
.ssc-app .ssc-faq-q {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
	background: #fff; border: 0; cursor: pointer; padding: 16px 18px;
	font: inherit; font-size: 15px; font-weight: 600; color: var(--ssc-secondary); text-align: start;
}
.ssc-app .ssc-faq-q:hover { background: var(--ssc-primary-soft); }
.ssc-app .ssc-faq-q svg { width: 18px; height: 18px; flex: none; color: var(--ssc-primary); transition: transform .2s ease; }
.ssc-app .ssc-faq.is-open .ssc-faq-q { background: var(--ssc-primary-soft); color: var(--ssc-primary-dark); }
.ssc-app .ssc-faq.is-open .ssc-faq-q svg { transform: rotate(180deg); }
.ssc-app .ssc-faq-a { padding: 4px 18px 18px; color: var(--ssc-muted); font-size: 14.5px; line-height: 1.7; }

/* ---------- Merchant ---------- */
.ssc-app .ssc-benefits { align-self: start; }
.ssc-app .ssc-benefit-list { list-style: none; margin: 0; padding: 0; }
.ssc-app .ssc-benefit-list li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px dashed var(--ssc-line); font-size: 15px; }
.ssc-app .ssc-benefit-list li:last-child { border-bottom: 0; }
.ssc-app .ssc-benefit-list svg { width: 19px; height: 19px; flex: none; color: var(--ssc-primary); margin-top: 2px; }

/* ---------- Footer ---------- */
.ssc-app .ssc-footer { background: var(--ssc-secondary); color: rgba(255, 255, 255, .82); margin-top: 40px; }
.ssc-app .ssc-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.ssc-app .ssc-footer a:hover { color: #fff; }
.ssc-app .ssc-footer-inner {
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto; padding: 46px var(--ssc-gutter, 20px) 34px;
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 30px;
}
.ssc-app .ssc-foot-brand .ssc-logo-svg { height: 52px; width: auto; }
.ssc-app .ssc-foot-brand .ssc-logo-svg text tspan:last-child,
.ssc-app .ssc-foot-brand .ssc-logo-svg circle { fill: #fff; }
.ssc-app .ssc-foot-brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.75; max-width: 330px; }
.ssc-app .ssc-foot-col h4 { margin: 6px 0 16px; font-size: 17px; font-weight: 700; color: #fff; }
.ssc-app .ssc-foot-col ul { list-style: none; margin: 0; padding: 0; }
.ssc-app .ssc-foot-col li { margin-bottom: 11px; font-size: 14.5px; }
.ssc-app .ssc-foot-col li a { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.ssc-app .ssc-foot-contacts { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.ssc-app .ssc-foot-contact { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.ssc-app .ssc-foot-contact svg { width: 18px; height: 18px; flex: none; }
.ssc-app .ssc-foot-social { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.ssc-app .ssc-foot-social svg { width: 18px; height: 18px; }
.ssc-app .ssc-foot-social span { font-size: 14px; }
.ssc-app .ssc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.ssc-app .ssc-footer-bottom-inner {
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto; padding: 18px var(--ssc-gutter, 20px) 26px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ssc-app .ssc-foot-legal { font-size: 12.5px; color: rgba(255, 255, 255, .70); }
.ssc-app .ssc-foot-legal b { color: #fff; font-weight: 600; }
.ssc-app .ssc-foot-sep { margin: 0 10px; opacity: .45; }
.ssc-app .ssc-foot-copy { margin-top: 8px; opacity: .7; }
.ssc-app .ssc-foot-social { flex-wrap: wrap; gap: 16px; }
.ssc-app .ssc-foot-social a { display: inline-flex; opacity: .85; transition: opacity .15s ease, transform .15s ease; }
.ssc-app .ssc-foot-social a:hover { opacity: 1; transform: translateY(-2px); }

/* Bordered native selects (domestic emirate / region pickers) */
.ssc-app .ssc-select-bordered {
	border: 2px solid var(--ssc-primary); border-radius: 10px; min-height: 50px; background: #fff;
}
.ssc-app .ssc-select-bordered:disabled { border-color: var(--ssc-line); background: var(--ssc-surface-alt); color: var(--ssc-muted); cursor: not-allowed; }
.ssc-app .ssc-route-4 { grid-template-columns: 1fr 1fr auto 1fr 1fr; }

/* White text for headings that sit on the brand hero band. */
.ssc-app .ssc-on-hero { color: #fff; }

/* ---------- Standalone pages (orders / merchant / FAQ / sign in) ---------- */
.ssc-app .ssc-page {
	min-height: 62vh;
	padding: 40px 20px 60px;
	background: var(--ssc-bg);
}
.ssc-app .ssc-page-title {
	text-align: center;
	font-size: 34px; font-weight: 700; color: var(--ssc-primary);
	margin: 0 0 30px;
}
.ssc-app .ssc-panel-card {
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto;
	background: var(--ssc-surface); border: 1px solid var(--ssc-line);
	border-radius: var(--ssc-radius); box-shadow: var(--ssc-shadow); overflow: hidden;
}
.ssc-app .ssc-panel-toolbar {
	display: flex; align-items: center; justify-content: flex-end; gap: 14px;
	padding: 16px 20px; border-bottom: 1px solid var(--ssc-line);
}
.ssc-app .ssc-search {
	position: relative; display: flex; align-items: center;
	border: 1px solid var(--ssc-line); border-radius: 10px;
	background: var(--ssc-surface); padding: 0 12px; min-width: 240px;
}
.ssc-app .ssc-search:focus-within { border-color: var(--ssc-primary); box-shadow: 0 0 0 3px var(--ssc-primary-soft); }
.ssc-app .ssc-search svg { width: 18px; height: 18px; color: var(--ssc-muted); flex: none; }
.ssc-app .ssc-search input { border: 0; outline: none; background: none; font: inherit; padding: 11px 10px; width: 100%; min-width: 0; }
.ssc-app .ssc-filter-chip {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
	color: var(--ssc-muted); border: 1px solid transparent;
}
.ssc-app .ssc-filter-chip:hover { color: var(--ssc-primary); border-color: var(--ssc-line); }
.ssc-app .ssc-filter-chip svg { width: 20px; height: 20px; }
.ssc-app .ssc-filter-chip select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ssc-app .ssc-filter-count {
	position: absolute; top: -4px; inset-inline-end: -4px;
	min-width: 19px; height: 19px; border-radius: 999px;
	background: var(--ssc-ghost-strong); color: var(--ssc-secondary);
	font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.ssc-app .ssc-empty-lg { padding: 74px 20px; }
.ssc-app .ssc-empty-badge {
	width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px;
	background: var(--ssc-ghost); color: var(--ssc-muted);
	display: flex; align-items: center; justify-content: center;
}
.ssc-app .ssc-empty-badge svg { width: 26px; height: 26px; opacity: 1; }
.ssc-app .ssc-empty-lg h3 { color: var(--ssc-text); font-size: 22px; margin: 0; }
.ssc-app .ssc-empty-lg p { margin-top: 10px; }

/* ---------- Auth / merchant card ---------- */
.ssc-app .ssc-auth-card {
	position: relative; overflow: hidden;
	max-width: 620px; margin: 0 auto;
	background: var(--ssc-surface); border-radius: 26px;
	box-shadow: var(--ssc-shadow-lg); padding: 46px 44px 44px;
}
/* Soft brand blobs in the corners, as on the reference cards. */
.ssc-app .ssc-auth-card::before,
.ssc-app .ssc-auth-card::after {
	content: ""; position: absolute; border-radius: 50%;
	background: var(--ssc-decor); pointer-events: none;
}
.ssc-app .ssc-auth-card::before { width: 190px; height: 190px; top: -70px; inset-inline-end: -60px; }
.ssc-app .ssc-auth-card::after { width: 150px; height: 150px; bottom: -60px; inset-inline-start: -50px; }
.ssc-app .ssc-auth-card > * { position: relative; z-index: 1; }
.ssc-app .ssc-auth-title {
	text-align: center; font-size: 44px; line-height: 1.15; font-weight: 700;
	color: var(--ssc-primary); margin: 0 0 14px;
}
.ssc-app .ssc-auth-sub { text-align: center; color: var(--ssc-muted); font-size: 15px; margin: 0 0 26px; }
.ssc-app .ssc-auth-tabs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; }
.ssc-app .ssc-auth-tab {
	background: none; border: 0; cursor: pointer; font: inherit; font-size: 16px;
	color: var(--ssc-muted); padding: 4px 2px; border-bottom: 2px solid transparent;
}
.ssc-app .ssc-auth-tab.is-active { color: var(--ssc-primary); font-weight: 600; border-bottom-color: var(--ssc-primary); }
.ssc-app .ssc-auth-dot { color: var(--ssc-muted); opacity: .6; }
.ssc-app .ssc-legal-line { text-align: center; font-size: 13px; color: var(--ssc-muted); margin: 22px 0 18px; }
.ssc-app .ssc-legal-line a { color: var(--ssc-primary); text-decoration: none; }
.ssc-app .ssc-legal-line a:hover { text-decoration: underline; }
.ssc-app .ssc-btn-pill { border-radius: 999px; }
.ssc-app .ssc-link { color: var(--ssc-primary); font-size: 14px; text-decoration: none; }
.ssc-app .ssc-link:hover { text-decoration: underline; }
.ssc-app .ssc-auth-card .ssc-input { border-color: var(--ssc-primary); border-width: 1px; }
.ssc-app .ssc-auth-card .ssc-caps-label,
.ssc-app .ssc-auth-card .ssc-soft-label { color: var(--ssc-primary); }

/* ---------- FAQ grid ---------- */
.ssc-app .ssc-faq-grid {
	max-width: var(--ssc-content-max, 1060px); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px;
}
.ssc-app .ssc-faq-item { display: flex; gap: 16px; align-items: flex-start; }
.ssc-app .ssc-faq-num {
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--ssc-primary-soft); color: var(--ssc-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 600;
}
.ssc-app .ssc-faq-body h3 { margin: 3px 0 10px; font-size: 17px; font-weight: 600; color: var(--ssc-primary); line-height: 1.4; }
.ssc-app .ssc-faq-body p { margin: 0; color: var(--ssc-muted); font-size: 15px; line-height: 1.75; }

/* Standalone / no theme chrome */
.ssc-app.ssc-standalone { min-height: 100vh; }
.ssc-app.ssc-tracking-only { background: none; padding: 0; }
.ssc-app.ssc-tracking-only .ssc-hero { background: none; padding: 0; }
.ssc-app.ssc-tracking-only .ssc-hero::after { display: none; }
.ssc-app.ssc-tracking-only .ssc-track-box { box-shadow: var(--ssc-shadow); border: 1px solid var(--ssc-line); }

/* RTL nudges */
.ssc-app[dir="rtl"] .ssc-kv { grid-template-columns: 140px 1fr; }
.ssc-app[dir="rtl"] .ssc-tl-days,
.ssc-app[dir="rtl"] .ssc-price { direction: ltr; unicode-bidi: isolate; }

/* Responsive */
@media (max-width: 1250px) and (min-width: 1151px) {
	.ssc-app .ssc-nav-link { padding: 8px 7px; font-size: 13px; }
	.ssc-app .ssc-nav-link svg { display: none; }
	.ssc-app .ssc-topbar-inner { gap: 10px; }
}

@media (max-width: 1050px) {
	.ssc-app .ssc-route-4 { grid-template-columns: 1fr 1fr; }
	.ssc-app .ssc-route-4 .ssc-swap { grid-column: 1 / -1; justify-self: center; }
	.ssc-app .ssc-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.ssc-app .ssc-offer { grid-template-columns: 1fr; }
	.ssc-app .ssc-progress-track { flex-direction: column; align-items: flex-start; gap: 0; }
	.ssc-app .ssc-progress-step { flex-direction: row; width: 100%; text-align: start; gap: 12px; }
	.ssc-app .ssc-progress-line { width: 3px; height: 18px; flex: none; margin: 0 0 0 16px; }
	.ssc-app[dir="rtl"] .ssc-progress-line { margin: 0 16px 0 0; }
	.ssc-app .ssc-offer-brand { border-inline-end: 0; border-bottom: 1px solid var(--ssc-line); flex-direction: row; align-items: center; gap: 14px; }
	.ssc-app .ssc-offer-price { border-inline-start: 0; border-top: 1px solid var(--ssc-line); flex-direction: row; justify-content: space-between; }
	.ssc-app .ssc-panels, .ssc-app .ssc-review-grid { grid-template-columns: 1fr; }
	.ssc-app .ssc-summary { position: static; }
	.ssc-app .ssc-pkg-grid { grid-template-columns: repeat(2, 1fr); }
	.ssc-app .ssc-dims { grid-template-columns: repeat(2, 1fr); }
	.ssc-app .ssc-steps { overflow-x: auto; padding-bottom: 8px; }
	.ssc-app .ssc-step { width: 108px; }
}
@media (max-width: 900px) {
	.ssc-app .ssc-faq-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
	.ssc-app .ssc-route { grid-template-columns: 1fr; }
	.ssc-app .ssc-route-4 { grid-template-columns: 1fr; }
	.ssc-app .ssc-auth-card { padding: 32px 22px 30px; border-radius: 20px; }
	.ssc-app .ssc-auth-title { font-size: 32px; }
	.ssc-app .ssc-page-title { font-size: 26px; }
	.ssc-app .ssc-panel-toolbar { flex-wrap: wrap; }
	.ssc-app .ssc-search { min-width: 0; flex: 1 1 auto; }
	.ssc-app .ssc-swap { justify-self: center; margin: 4px 0; }
	.ssc-app .ssc-scope { grid-template-columns: 1fr; }
	.ssc-app .ssc-card { padding: 18px; }
	.ssc-app .ssc-card-title, .ssc-app .ssc-section-title { font-size: 20px; }
	.ssc-app .ssc-success-codes { grid-template-columns: 1fr; }
	.ssc-app .ssc-wizard-nav { grid-template-columns: 1fr; }
	.ssc-app .ssc-topbar-inner { gap: 10px; }
	.ssc-app .ssc-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}

/* Print (booking confirmation) */
@media print {
	.ssc-app .ssc-topbar, .ssc-app .ssc-hero, .ssc-app .ssc-partners, .ssc-app .ssc-success-actions, .ssc-app .ssc-wizard-nav { display: none !important; }
	.ssc-app { background: #fff; }
	.ssc-app .ssc-card, .ssc-app .ssc-panel, .ssc-app .ssc-success { box-shadow: none; border: 1px solid var(--ssc-line); }
}

/* ---------- Mobile navigation ----------
   Under 900px the links collapse behind a hamburger, matching the phone layout:
   logo on the left, currency and the toggle on the right. */
.ssc-app .ssc-burger {
	display: none;
	width: 44px; height: 44px; border-radius: 10px;
	border: 1px solid var(--ssc-line); background: var(--ssc-surface);
	color: var(--ssc-secondary); cursor: pointer;
	align-items: center; justify-content: center; flex: none;
}
.ssc-app .ssc-burger svg { width: 22px; height: 22px; }
.ssc-app .ssc-burger:hover { border-color: var(--ssc-primary); color: var(--ssc-primary); }
.ssc-app .ssc-nav-backdrop { display: none; }

@media (max-width: 1150px) {
	/* Keep the bar above the drawer so the burger stays tappable to close it. */
	.ssc-app .ssc-topbar { z-index: 70; }
	.ssc-app .ssc-topbar-inner { flex-wrap: nowrap; gap: 10px; padding: 10px var(--ssc-gutter, 16px); }
	.ssc-app .ssc-burger { display: inline-flex; order: 3; }
	.ssc-app .ssc-logo { order: 1; flex: 1 1 auto; }
	.ssc-app .ssc-logo-svg, .ssc-app .ssc-logo-img { height: 34px; }
	.ssc-app .ssc-topbar-actions { order: 2; gap: 8px; }
	.ssc-app .ssc-signin span { display: none; }
	.ssc-app .ssc-signin { padding: 10px 12px; }

	.ssc-app .ssc-nav {
		position: fixed; inset-block: 0; inset-inline-end: 0;
		width: min(82vw, 320px);
		background: var(--ssc-surface);
		box-shadow: var(--ssc-shadow-lg);
		flex-direction: column; align-items: stretch; gap: 2px;
		padding: 84px 16px 24px;
		transform: translateX(110%);
		transition: transform .25s ease;
		z-index: 60; overflow-y: auto;
	}
	.ssc-app[dir="rtl"] .ssc-nav { transform: translateX(-110%); }
	.ssc-app .ssc-nav.is-open { transform: none; }
	/* The drawer itself stays white regardless of the topbar colour, so its
	   links need their dark text back — the base rule above is for the
	   purple topbar's inline links only. */
	.ssc-app .ssc-nav-link { padding: 14px 12px; font-size: 15px; border-radius: 12px; color: var(--ssc-secondary); }
	.ssc-app .ssc-nav-link.is-active { background: var(--ssc-primary-soft); }

	.ssc-app .ssc-nav-backdrop {
		display: block; position: fixed; inset: 0;
		background: rgba(0, 0, 0, .35); z-index: 55;
		opacity: 0; pointer-events: none; transition: opacity .25s ease;
	}
	.ssc-app .ssc-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

	.ssc-app .ssc-hero { padding-top: 18px; }
	.ssc-app .ssc-card { padding: 18px; }
	.ssc-app .ssc-page { padding: 24px 0 40px; }
	.ssc-app .ssc-page-title { font-size: 24px; }
}

@media (max-width: 560px) {
	.ssc-app { --ssc-gutter: 14px; }

	/* Compact the bar so the logo, the actions and the burger all fit on a
	   375px screen without the burger being pushed off the edge. */
	.ssc-app .ssc-topbar-inner { gap: 8px; }
	.ssc-app .ssc-topbar-actions { gap: 6px; }
	.ssc-app .ssc-logo-svg, .ssc-app .ssc-logo-img { height: 28px; }
	.ssc-app .ssc-lang, .ssc-app .ssc-currency { padding: 8px; font-size: 13px; }
	.ssc-app .ssc-lang svg { display: none; }
	.ssc-app .ssc-signin { padding: 9px 11px; }
	.ssc-app .ssc-burger { width: 40px; height: 40px; }
	.ssc-app .ssc-dims { grid-template-columns: 1fr 1fr; }
	.ssc-app .ssc-track-box button { padding: 0 20px; }
	.ssc-app .ssc-scope-btn { padding: 16px 10px; }
	.ssc-app .ssc-scope-btn svg { width: 56px; height: 56px; }
	.ssc-app .ssc-pkg svg { width: 46px; height: 46px; }
	.ssc-app .ssc-card-title { font-size: 19px; }
	.ssc-app .ssc-price { font-size: 25px; }
	.ssc-app .ssc-footer-inner { grid-template-columns: 1fr; gap: 26px; }
	.ssc-app .ssc-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Control colour guard ----------
   Page-builder kits ship rules like `.elementor-kit-7 button { background: … }`
   at (0,1,1), which outranks a plain component class. Doubling the root class
   lifts these to (0,3,0), and the declarations are marked !important so that a
   kit using !important itself still cannot repaint a brand control. Apart from
   the print rules, this is the only place in the file that uses !important, and
   it is limited to background and text colour on the interactive controls. */
.ssc-app.ssc-app .ssc-scope-btn,
.ssc-app.ssc-app .ssc-pkg,
.ssc-app.ssc-app .ssc-lang,
.ssc-app.ssc-app .ssc-currency,
.ssc-app.ssc-app .ssc-burger,
.ssc-app.ssc-app .ssc-add-items,
.ssc-app.ssc-app .ssc-btn-outline,
.ssc-app.ssc-app .ssc-swap,
.ssc-app.ssc-app .ssc-share,
.ssc-app.ssc-app .ssc-map-tool { background: var(--ssc-surface) !important; }

.ssc-app.ssc-app .ssc-scope-btn.is-active,
.ssc-app.ssc-app .ssc-pkg.is-active,
.ssc-app.ssc-app .ssc-saved-btn { background: var(--ssc-primary-soft) !important; }

.ssc-app.ssc-app .ssc-calculate,
.ssc-app.ssc-app .ssc-book,
.ssc-app.ssc-app .ssc-btn-primary,
.ssc-app.ssc-app .ssc-track-box button { background: var(--ssc-primary) !important; color: #fff !important; }

.ssc-app.ssc-app .ssc-calculate:hover,
.ssc-app.ssc-app .ssc-book:hover,
.ssc-app.ssc-app .ssc-btn-primary:hover,
.ssc-app.ssc-app .ssc-track-box button:hover { background: var(--ssc-primary-dark) !important; }

.ssc-app.ssc-app .ssc-btn-secondary { background: var(--ssc-secondary) !important; color: #fff !important; }
.ssc-app.ssc-app .ssc-signin { background: var(--ssc-primary) !important; color: #fff !important; }

.ssc-app.ssc-app .ssc-btn-ghost { background: var(--ssc-ghost) !important; color: var(--ssc-secondary) !important; }
/* White for the purple topbar; restored to dark for the white drawer just below. */
.ssc-app.ssc-app .ssc-nav-link { background: none !important; color: #fff !important; }
.ssc-app.ssc-app .ssc-nav-link:hover { background: var(--ssc-primary-soft) !important; color: var(--ssc-primary-dark) !important; }
.ssc-app.ssc-app .ssc-nav-link.is-active { color: var(--ssc-primary) !important; }
.ssc-app.ssc-app .ssc-qty button,
.ssc-app.ssc-app .ssc-row-remove,
.ssc-app.ssc-app .ssc-select-clear,
.ssc-app.ssc-app .ssc-select-caret,
.ssc-app.ssc-app .ssc-faq-q,
.ssc-app.ssc-app .ssc-auth-tab { background: none !important; }
.ssc-app.ssc-app .ssc-faq-q { background: var(--ssc-surface) !important; }
.ssc-app.ssc-app .ssc-input,
.ssc-app.ssc-app .ssc-textarea,
.ssc-app.ssc-app .ssc-native-select { background: var(--ssc-surface) !important; color: var(--ssc-text) !important; }

/* The guard above assumes the inline topbar (purple bg, white links); below
   1150px .ssc-nav-link is reused inside the white slide-out drawer instead,
   so this has to win back the dark text there — same specificity and
   !important, later in source order, scoped to the drawer's own breakpoint. */
@media (max-width: 1150px) {
	.ssc-app.ssc-app .ssc-nav-link { color: var(--ssc-secondary) !important; }
}

/* ---------- Dropdown stacking ----------
   A card with its own z-index becomes a stacking context, so a dropdown inside
   it would paint under the following card. The JS lifts the host card while a
   dropdown is open; :has() does the same in browsers that support it, so the
   fix applies even before scripts settle. */
.ssc-app .ssc-card:has(.ssc-dropdown),
.ssc-app .ssc-panel:has(.ssc-dropdown),
.ssc-app .ssc-panel-card:has(.ssc-dropdown),
.ssc-app .ssc-auth-card:has(.ssc-dropdown) {
	z-index: 90;
	overflow: visible;
}
.ssc-app .ssc-dropdown { z-index: 95; }

/* The auth card clips its decorative blobs, which would also clip a dropdown. */
.ssc-app .ssc-auth-card { overflow: clip; }

/* ---------- Domestic country row ---------- */
.ssc-app .ssc-domestic-country { max-width: 340px; margin-bottom: 18px; }
.ssc-app .ssc-country-chip {
	display: flex; align-items: center; gap: 10px;
	border: 2px solid var(--ssc-primary); border-radius: 10px;
	background: var(--ssc-surface); min-height: 50px; padding-inline-end: 12px;
	font-size: 15px; color: var(--ssc-text); font-weight: 600;
}
.ssc-app[dir="rtl"] .ssc-domestic-country { margin-inline-start: auto; }