/* Offer Survey — front-end styles (RTL, self-contained, professional redesign) */

/* Neutralize theme/page-builder default chrome on native form elements
   (many WordPress themes and Elementor global button styles apply a brand
   color to every <button> on the site — sometimes with !important — which
   otherwise bleeds into this widget). Kept deliberately narrow (no layout
   properties) so it can never fight the component rules below; every
   color/background/border property those rules set is marked !important
   and uses class selectors, which already outrank a bare "button" rule. */
#osv-survey-root button,
#osv-survey-root input,
#osv-survey-root select,
#osv-survey-root textarea {
	background: none;
	border: none;
	box-shadow: none;
	outline: none;
	margin: 0;
	color: inherit;
	font: inherit;
}
#osv-survey-root button { cursor: pointer; text-align: inherit; }

#osv-survey-root, #osv-survey-root * {
	box-sizing: border-box;
}

#osv-survey-root {
	/* Neutral scale */
	--osv-stone-50: #f8fafc;
	--osv-stone-100: #f1f5f9;
	--osv-stone-200: #e2e8f0;
	--osv-stone-300: #cbd5e1;
	--osv-stone-400: #94a3b8;
	--osv-stone-500: #64748b;
	--osv-stone-600: #475569;
	--osv-stone-700: #334155;
	--osv-stone-800: #1e293b;
	--osv-stone-900: #0f172a;

	/* Brand — used for chrome, primary actions & focus states */
	--osv-primary-50: #eef2ff;
	--osv-primary-100: #e0e7ff;
	--osv-primary-200: #c7d2fe;
	--osv-primary-500: #6366f1;
	--osv-primary-600: #4f46e5;
	--osv-primary-700: #4338ca;
	--osv-primary-800: #3730a3;
	--osv-accent-600: #9333ea;
	--osv-gradient: linear-gradient(135deg, var(--osv-primary-600), var(--osv-accent-600));

	/* Semantic rating colors (kept meaningful: green / amber / red) */
	--osv-emerald-50: #ecfdf5;
	--osv-emerald-100: #d1fae5;
	--osv-emerald-200: #a7f3d0;
	--osv-emerald-500: #10b981;
	--osv-emerald-600: #059669;
	--osv-emerald-700: #047857;
	--osv-emerald-800: #065f46;
	--osv-emerald-950: #022c22;
	--osv-amber-50: #fffbeb;
	--osv-amber-100: #fef3c7;
	--osv-amber-200: #fde68a;
	--osv-amber-400: #fbbf24;
	--osv-amber-500: #f59e0b;
	--osv-amber-600: #d97706;
	--osv-amber-700: #b45309;
	--osv-amber-800: #92400e;
	--osv-rose-50: #fff1f2;
	--osv-rose-100: #ffe4e6;
	--osv-rose-200: #fecdd3;
	--osv-rose-500: #f43f5e;
	--osv-rose-600: #e11d48;
	--osv-rose-700: #be123c;
	--osv-rose-800: #9f1239;
	--osv-rose-950: #4c0519;
	--osv-blue-50: #eff6ff;
	--osv-blue-200: #bfdbfe;
	--osv-blue-700: #1d4ed8;

	--osv-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
	--osv-shadow-md: 0 4px 16px -4px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.06);
	--osv-shadow-lg: 0 20px 45px -12px rgba(67,56,202,.18), 0 8px 20px -8px rgba(15,23,42,.08);

	font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
	background:var(--osv-stone-100) !important;
	color:var(--osv-stone-800) !important;
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.osv-root a { text-decoration: none; }

/* ============ Hero (full-bleed) ============ */
.osv-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background:var(--osv-gradient) !important;
	padding: 2.75rem 1.25rem 5rem;
	text-align: center;
	isolation: isolate;
}
.osv-hero-glow {
	position: absolute;
	border-radius: 999px;
	filter: blur(50px);
	opacity: .55;
	z-index: 0;
	pointer-events: none;
}
.osv-hero-glow-1 { width: 18rem; height: 18rem; background:#fff !important; opacity: .12; top: -6rem; right: -4rem; }
.osv-hero-glow-2 { width: 14rem; height: 14rem; background:#fff !important; opacity: .10; bottom: -6rem; left: -3rem; }
.osv-hero-inner { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; }
.osv-hero-icon {
	width: 3.75rem; height: 3.75rem; border-radius: 1.1rem;
	background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.3) !important;
	backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.7rem; margin: 0 auto 1rem;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.osv-hero-eyebrow {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .82rem; font-weight: 700; color:#fff !important;
	background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.28) !important;
	padding: .35rem .85rem; border-radius: 999px; margin-bottom: .9rem;
}
.osv-hero-title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; color:#fff !important; margin: 0 0 .5rem; letter-spacing: -0.01em; }
.osv-hero-sub { font-size: 1.05rem; color:rgba(255,255,255,.88) !important; margin: 0; }

/* ============ Main ============ */
.osv-main {
	flex: 1; max-width: 46rem; width: 100%; margin: -3rem auto 0; padding: 0 1.25rem 3rem;
	min-width: 0; overflow-x: hidden; position: relative; z-index: 2;
}

.osv-intro-card {
	background:#fff !important; border:1px solid var(--osv-stone-200) !important; border-radius:1.25rem !important;
	box-shadow:var(--osv-shadow-lg) !important; padding: 1.75rem 1.75rem 1.6rem; margin-bottom: 1.75rem;
}
.osv-intro-top {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: .75rem; border-bottom: 1px solid var(--osv-stone-100); padding-bottom: 1.1rem; margin-bottom: 1.1rem;
}
.osv-eyebrow {
	display: inline-block; padding: .3rem .7rem; background:var(--osv-primary-50) !important;
	border-radius:999px !important; font-size: .8rem; font-weight: 700; color:var(--osv-primary-700) !important; margin-bottom: .55rem;
}
.osv-h2 { font-size: 1.6rem; font-weight: 800; color:var(--osv-stone-900) !important; margin: 0; letter-spacing: -0.01em; }
.osv-intro-text { color:var(--osv-stone-600) !important; font-size: 1.05rem; line-height: 1.75; }
.osv-intro-text p { margin: 0 0 .65rem; }
.osv-intro-text p:last-child { margin-bottom: 0; }
.osv-intro-text-secondary { color:var(--osv-stone-500) !important; font-size: .96rem; }

.osv-badge {
	display: inline-flex; align-items: center; gap: .25rem;
	font-size: .8rem; font-weight: 700; padding: .35rem .75rem;
	border-radius:999px !important; white-space: nowrap;
}
.osv-badge-primary { background:var(--osv-primary-50) !important; color:var(--osv-primary-700) !important; border:1px solid var(--osv-primary-200) !important; }

.osv-question-row { display: flex; align-items: center; justify-content: space-between; padding: 0 .15rem; margin-bottom: 1.1rem; gap: .75rem; }
.osv-question-label { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 800; color:var(--osv-stone-900) !important; }
.osv-question-num {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 1.7rem; height: 1.7rem; border-radius: 999px; font-size: .92rem; font-weight: 800;
	background:var(--osv-gradient) !important; color:#fff !important; box-shadow: 0 4px 10px -2px rgba(79,70,229,.45);
}
.osv-hint { font-size: .82rem; color:var(--osv-stone-500) !important; font-weight: 600; }

/* ============ Rating cards ============ */
.osv-card {
	position: relative;
	border-radius:1.25rem !important; border:2px solid var(--osv-stone-200) !important; background:#fff !important;
	overflow: hidden; margin-bottom: 1rem; box-shadow: var(--osv-shadow-sm);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.osv-card:hover { border-color:var(--osv-stone-300) !important; box-shadow: var(--osv-shadow-md); transform: translateY(-1px); }
.osv-card.osv-card-perfect.osv-selected { border-color:var(--osv-emerald-600) !important; box-shadow:0 0 0 4px var(--osv-emerald-100), var(--osv-shadow-md) !important; }
.osv-card.osv-card-somewhat.osv-selected { border-color:var(--osv-amber-500) !important; box-shadow:0 0 0 4px var(--osv-amber-100), var(--osv-shadow-md) !important; }
.osv-card.osv-card-not-suitable.osv-selected { border-color:var(--osv-rose-500) !important; box-shadow:0 0 0 4px var(--osv-rose-100), var(--osv-shadow-md) !important; }

.osv-card-header {
	width: 100%; padding: 1.15rem 1.3rem; background:transparent !important; border:none !important; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right; font-family: inherit;
	transition: background .15s;
}
.osv-card-header:hover { background:var(--osv-stone-50) !important; }
.osv-card-perfect.osv-selected > .osv-card-header { background:rgba(236,253,245,.7) !important; }
.osv-card-somewhat.osv-selected > .osv-card-header { background:rgba(255,251,235,.7) !important; }
.osv-card-not-suitable.osv-selected > .osv-card-header { background:rgba(255,241,242,.7) !important; }

.osv-card-header-left { display: flex; align-items: center; gap: .95rem; min-width: 0; }
.osv-dot { width: 1.3rem; height: 1.3rem; border-radius:999px !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(0,0,0,.03); }
.osv-dot i { width: .5rem; height: .5rem; border-radius:999px !important; background:#fff !important; display: block; }
.osv-dot-emerald { background:var(--osv-emerald-500) !important; }
.osv-dot-amber { background:var(--osv-amber-500) !important; }
.osv-dot-rose { background:var(--osv-rose-500) !important; }

.osv-card-title-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.osv-card-title { font-size: 1.15rem; font-weight: 800; color:var(--osv-stone-900) !important; margin: 0; }
.osv-chip { font-size: .72rem; font-weight: 700; padding: .18rem .55rem; border-radius:999px !important; }
.osv-chip-emerald { background:var(--osv-emerald-100) !important; color:var(--osv-emerald-800) !important; }
.osv-chip-amber { background:var(--osv-amber-100) !important; color:var(--osv-amber-800) !important; }
.osv-chip-rose { background:var(--osv-rose-100) !important; color:var(--osv-rose-800) !important; }
.osv-card-desc { font-size: .92rem; color:var(--osv-stone-500) !important; margin: .25rem 0 0; }

.osv-card-header-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.osv-radio {
	width: 1.55rem; height: 1.55rem; border-radius:999px !important; border:2px solid var(--osv-stone-300) !important;
	display: flex; align-items: center; justify-content: center; color:transparent !important; transition: all .15s;
}
.osv-check-icon { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.osv-selected .osv-radio-emerald { border-color:var(--osv-emerald-600) !important; background:var(--osv-emerald-600) !important; color:#fff !important; }
.osv-selected .osv-radio-amber { border-color:var(--osv-amber-500) !important; background:var(--osv-amber-500) !important; color:#fff !important; }
.osv-selected .osv-radio-rose { border-color:var(--osv-rose-500) !important; background:var(--osv-rose-500) !important; color:#fff !important; }
.osv-chevron { color: var(--osv-stone-400); transition: transform .25s ease; display: inline-block; }
.osv-selected .osv-chevron { transform: rotate(180deg); color:var(--osv-stone-600) !important; }

.osv-card-body {
	max-height: 0; opacity: 0; overflow: hidden; min-width: 0;
	border-top: 0 solid var(--osv-stone-200);
	background:rgba(248,250,252,.7) !important;
	padding: 0 1.4rem;
	transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
}
.osv-selected > .osv-card-body {
	max-height: 2600px; opacity: 1; border-top-width: 1px;
	padding: 1.5rem 1.4rem 1.7rem;
}

.osv-note {
	padding: 1rem; border-radius: .9rem; font-size: .98rem; margin-bottom: 1.35rem;
	background: #fff; border: 1px solid var(--osv-stone-200); color: var(--osv-stone-700);
}
.osv-note p { margin: 0; color: var(--osv-stone-600); line-height: 1.65; }
.osv-note-title { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--osv-stone-900); margin-bottom: .3rem; }
.osv-note-emerald { background: var(--osv-emerald-50); border-color: var(--osv-emerald-200); color: var(--osv-emerald-950); display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.osv-note-emerald .osv-check-icon { color: var(--osv-emerald-700); flex-shrink: 0; }
.osv-note-stone { background: var(--osv-stone-100); border: none; }
.osv-note-stone p:first-child { font-weight: 800; color: var(--osv-stone-900); }

.osv-field { margin-bottom: 1.35rem; }
.osv-field:last-of-type { margin-bottom: 0; }
.osv-field-bordered { padding-top: .8rem; border-top: 1px solid var(--osv-stone-200); }
.osv-label { display: block; font-size: 1.02rem; font-weight: 800; color:var(--osv-stone-900) !important; margin-bottom: .55rem; }
.osv-label-sm { font-size: .92rem; font-weight: 700; color:var(--osv-stone-800) !important; }
.osv-req { color:var(--osv-rose-500) !important; }

.osv-input, .osv-textarea, .osv-select {
	width: 100%; padding: .7rem .95rem; font-size: .98rem; border:1.5px solid var(--osv-stone-200) !important;
	border-radius:.85rem !important; background:var(--osv-stone-50) !important; font-family: inherit; color:var(--osv-stone-800) !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.osv-input::placeholder, .osv-textarea::placeholder { color: var(--osv-stone-400); }
.osv-input:hover, .osv-textarea:hover, .osv-select:hover { border-color:var(--osv-stone-300) !important; }
.osv-input:focus, .osv-textarea:focus, .osv-select:focus {
	outline:none !important; background:#fff !important;
	box-shadow:0 0 0 3px var(--osv-primary-100) !important; border-color:var(--osv-primary-500) !important;
}
.osv-textarea { resize: none; }
.osv-custom-method-input { margin-top: .5rem; }

.osv-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-left: 2.4rem !important;
	background-repeat: no-repeat !important;
	background-position: left .9rem center !important;
	background-size: 1rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

.osv-method-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: .6rem; min-width: 0; align-items: stretch; }
.osv-method-grid > .osv-method-btn { min-width: 0; }
.osv-method-grid-2 { }
/* Capped at 2 columns everywhere (not 3) so Arabic labels always have room to
   show in full — a 3-up grid was forcing long labels to truncate with "…". */
@media (min-width: 480px) { .osv-method-grid { grid-template-columns: repeat(2, 1fr); } }

.osv-method-btn {
	padding: .7rem .85rem; border-radius: .85rem; border:1.5px solid var(--osv-stone-200) !important; background:#fff !important;
	text-align: right; font-size: .95rem; display: flex; align-items: center; gap: .65rem; cursor: pointer;
	color:var(--osv-stone-700) !important; font-family: inherit; transition: all .15s ease; min-height: 3.1rem;
}
.osv-method-btn:hover { border-color:var(--osv-stone-300) !important; transform: translateY(-1px); box-shadow: var(--osv-shadow-sm); }
.osv-method-btn.osv-selected { border-color:var(--osv-primary-600) !important; background:var(--osv-primary-50) !important; color:var(--osv-primary-800) !important; font-weight: 800; box-shadow: 0 2px 10px -3px rgba(79,70,229,.35); }
.osv-method-icon {
	width: 1.85rem; height: 1.85rem; border-radius: .6rem; background:var(--osv-stone-100) !important; color:var(--osv-stone-600) !important;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem;
}
.osv-method-btn.osv-selected .osv-method-icon { background:var(--osv-gradient) !important; color:#fff !important; }
.osv-method-label { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.35; word-break: break-word; }

.osv-contact-block { padding-top: .95rem; border-top: 1px solid var(--osv-stone-200); }
.osv-contact-label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 800; color:var(--osv-stone-700) !important; margin-bottom: .65rem; }
.osv-contact-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .65rem; }
.osv-contact-label-row .osv-contact-label { margin-bottom: 0; }
.osv-required-badge {
	font-size: .72rem; font-weight: 700; color:var(--osv-rose-700) !important; background:var(--osv-rose-50) !important;
	border:1px solid var(--osv-rose-200) !important; padding: .2rem .55rem; border-radius:999px !important; white-space: nowrap;
}
.osv-contact-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; min-width: 0; }
.osv-contact-grid > input { min-width: 0; }
@media (min-width: 640px) { .osv-contact-grid { grid-template-columns: 1fr 1fr; } }

.osv-submit-row { padding-top: .8rem; display: flex; justify-content: flex-end; }
.osv-btn {
	padding: .85rem 1.75rem; border-radius: .9rem; border: none; color:#fff !important; font-weight: 800;
	font-size: 1.02rem; cursor: pointer; font-family: inherit; box-shadow: var(--osv-shadow-md);
	display: inline-flex; align-items: center; gap: .45rem; width: 100%; justify-content: center;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
@media (min-width: 640px) { .osv-btn { width: auto; } }
.osv-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.osv-btn:active { transform: translateY(0); }
.osv-btn-emerald { background:var(--osv-emerald-600) !important; }
.osv-btn-amber { background:var(--osv-amber-600) !important; }
.osv-btn-dark { background:var(--osv-gradient) !important; }
.osv-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Yes/No grid */
.osv-yesno-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; min-width: 0; }
.osv-yesno-grid > .osv-yesno-btn { min-width: 0; }
@media (min-width: 640px) { .osv-yesno-grid { grid-template-columns: 1fr 1fr; } }
.osv-yesno-btn {
	padding: .9rem; border-radius: .9rem; border:1.5px solid var(--osv-stone-200) !important; background:#fff !important;
	text-align: right; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
	font-family: inherit; color:var(--osv-stone-700) !important; transition: all .15s ease;
}
.osv-yesno-btn:hover { border-color:var(--osv-stone-300) !important; transform: translateY(-1px); box-shadow: var(--osv-shadow-sm); }
.osv-yesno-btn-compact { padding: .9rem; font-size: .95rem; }
.osv-yesno-left { display: flex; align-items: center; gap: .5rem; }
.osv-yesno-icon {
	width: 1.85rem; height: 1.85rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
	font-weight: 800; flex-shrink: 0;
}
.osv-yesno-icon-yes { background:var(--osv-emerald-100) !important; color:var(--osv-emerald-700) !important; }
.osv-yesno-icon-no { background:var(--osv-stone-200) !important; color:var(--osv-stone-600) !important; }
.osv-yesno-main { display: block; font-size: .98rem; }
.osv-yesno-sub { display: block; font-size: .76rem; font-weight: 400; color:var(--osv-stone-500) !important; }
.osv-radio-sm { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid var(--osv-stone-300); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.osv-yesno-btn.osv-selected-yes { border-color:var(--osv-emerald-600) !important; background:var(--osv-emerald-50) !important; color:var(--osv-emerald-950) !important; font-weight: 800; }
.osv-yesno-btn.osv-selected-yes .osv-radio-sm { border-color:var(--osv-emerald-600) !important; background:var(--osv-emerald-600) !important; }
.osv-yesno-btn.osv-selected-no { border-color:var(--osv-stone-600) !important; background:var(--osv-stone-100) !important; color:var(--osv-stone-900) !important; font-weight: 800; }
.osv-yesno-btn.osv-selected-no .osv-radio-sm { border-color:var(--osv-stone-600) !important; background:var(--osv-stone-600) !important; }

/* Extend-offer question */
.osv-extend-card {
	border:1.5px solid var(--osv-primary-200) !important; background:var(--osv-primary-50) !important;
	border-radius:1rem !important; padding: 1.1rem 1.1rem 1.2rem; margin-bottom: 1.35rem;
}
.osv-extend-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem; }
.osv-extend-icon {
	width: 1.9rem; height: 1.9rem; border-radius: .6rem; background:#fff !important; color:var(--osv-primary-700) !important;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; box-shadow: var(--osv-shadow-sm);
}
.osv-extend-label { margin-bottom: 0 !important; }

/* Reasons */
.osv-reason-grid { display: grid; grid-template-columns: 1fr; gap: .55rem; min-width: 0; }
.osv-reason-grid > .osv-reason-btn { min-width: 0; }
@media (min-width: 640px) { .osv-reason-grid { grid-template-columns: 1fr 1fr; } }
.osv-reason-btn {
	padding: .75rem; border-radius: .85rem; border:1.5px solid var(--osv-stone-200) !important; background:#fff !important;
	text-align: right; font-size: .95rem; display: flex; align-items: center; justify-content: space-between;
	cursor: pointer; color:var(--osv-stone-700) !important; font-family: inherit; transition: all .15s ease;
}
.osv-reason-btn:hover { border-color:var(--osv-stone-300) !important; transform: translateY(-1px); box-shadow: var(--osv-shadow-sm); }
.osv-reason-btn.osv-selected { border-color:var(--osv-rose-600) !important; background:var(--osv-rose-50) !important; color:var(--osv-rose-950) !important; font-weight: 800; }
.osv-reason-btn.osv-selected .osv-radio-sm { border-color:var(--osv-rose-600) !important; background:var(--osv-rose-600) !important; }

/* Date/time picker */
.osv-datetime-box { border-radius: 1.1rem; border:2px solid var(--osv-primary-500) !important; background:#fff !important; padding: 1.2rem; box-shadow: var(--osv-shadow-sm); }
.osv-datetime-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid var(--osv-stone-100); margin-bottom: 1.05rem; }
.osv-datetime-top-left { display: flex; align-items: center; gap: .6rem; }
.osv-datetime-icon { width: 2.1rem; height: 2.1rem; border-radius: .8rem; background:var(--osv-primary-50) !important; color:var(--osv-primary-700) !important; display: flex; align-items: center; justify-content: center; }
.osv-datetime-title { font-size: 1.02rem; font-weight: 800; color:var(--osv-stone-900) !important; display: block; }
.osv-datetime-sub { font-size: .8rem; color:var(--osv-stone-500) !important; }
.osv-datetime-check { width: 1.3rem; height: 1.3rem; border-radius:999px !important; background:var(--osv-gradient) !important; color:#fff !important; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.osv-datetime-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; min-width: 0; }
.osv-datetime-grid > div { min-width: 0; }
@media (min-width: 640px) { .osv-datetime-grid { grid-template-columns: 1fr 1fr; } }
.osv-date-input-wrap {
	display: flex; align-items: center; background:var(--osv-stone-50) !important; border:1.5px solid var(--osv-stone-200) !important;
	border-radius:.85rem !important; padding: .65rem .95rem; cursor: pointer; min-width: 0; max-width: 100%;
	transition: all .15s ease;
}
.osv-date-input-wrap:hover { border-color:var(--osv-primary-500) !important; background:var(--osv-primary-50) !important; }
.osv-input-icon { margin-left: .6rem; font-size: 1rem; flex-shrink: 0; }
.osv-date-input, .osv-time-input {
	border:none !important; background:transparent !important; width: 100%; min-width: 0; flex: 1 1 auto;
	font-size: .98rem; font-weight: 800; color:var(--osv-stone-800) !important; font-family: inherit;
}
.osv-date-input:focus, .osv-time-input:focus { outline:none !important; }
.osv-datetime-confirm {
	margin-top: 1rem; padding: .8rem; background:var(--osv-primary-50) !important; border:1px solid var(--osv-primary-200) !important;
	border-radius: .85rem; display: flex; align-items: center; justify-content: space-between; font-size: .95rem;
	color:var(--osv-primary-800) !important; font-weight: 600; gap: .5rem; flex-wrap: wrap;
}
.osv-datetime-confirm-badge { font-size: .76rem; font-weight: 800; background:var(--osv-gradient) !important; color:#fff !important; padding: .18rem .6rem; border-radius: .5rem; }

/* Validation banner */
.osv-validation-banner {
	padding: .85rem 1rem; background:var(--osv-rose-50) !important; border:1px solid var(--osv-rose-200) !important; border-radius: .9rem;
	color:var(--osv-rose-800) !important; font-size: .98rem; font-weight: 700; display: flex; align-items: center;
	justify-content: space-between; gap: .5rem; margin-top: 1rem; box-shadow: var(--osv-shadow-sm);
}
.osv-validation-banner button { background: none; border: none; color:var(--osv-rose-500) !important; cursor: pointer; font-size: 1rem; }

/* Footer */
.osv-footer { width: 100%; padding: 1.5rem 1.25rem 2rem; text-align: center; font-size: .85rem; color:var(--osv-stone-500) !important; }
.osv-footer { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.osv-footer span:first-child { font-weight: 700; color:var(--osv-stone-600) !important; }

/* Thank you screen */
.osv-thankyou-card { background:#fff !important; border-radius: 1.25rem; border:1px solid var(--osv-stone-200) !important; box-shadow: var(--osv-shadow-lg); padding: 2.2rem 1.6rem; }
.osv-ty-icon-wrap { text-align: center; margin-bottom: 1rem; }
.osv-ty-icon { width: 4.25rem; height: 4.25rem; border-radius: 1.1rem; background:var(--osv-emerald-50) !important; border:1px solid var(--osv-emerald-200) !important; color:var(--osv-emerald-600) !important; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 2.1rem; box-shadow: var(--osv-shadow-sm); }
.osv-ty-title { font-size: 1.7rem; font-weight: 900; color:var(--osv-stone-900) !important; text-align: center; margin: .85rem 0 .35rem; }
.osv-ty-sub { text-align: center; color:var(--osv-stone-600) !important; font-size: 1.02rem; max-width: 28rem; margin: 0 auto; }

.osv-summary-card { background:var(--osv-stone-50) !important; border:1px solid var(--osv-stone-200) !important; border-radius: 1rem; padding: 1.4rem; margin-top: 1.85rem; }
.osv-summary-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--osv-stone-200); padding-bottom: .8rem; margin-bottom: .95rem; }
.osv-summary-title { font-size: .98rem; font-weight: 800; color:var(--osv-stone-800) !important; }
.osv-summary-time { font-size: .8rem; color:var(--osv-stone-500) !important; }
.osv-summary-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; font-size: .98rem; min-width: 0; }
.osv-summary-grid > div { min-width: 0; overflow-wrap: break-word; }
@media (min-width: 640px) { .osv-summary-grid { grid-template-columns: 1fr 1fr; } }
.osv-summary-item-label { font-size: .8rem; color:var(--osv-stone-500) !important; display: block; margin-bottom: .2rem; }
.osv-summary-item-value { font-weight: 800; color:var(--osv-stone-900) !important; display: inline-flex; align-items: center; gap: .35rem; }
.osv-summary-notes { border-top: 1px solid var(--osv-stone-200); padding-top: .8rem; margin-top: .5rem; font-size: .88rem; color:var(--osv-stone-700) !important; }
.osv-summary-notes-text { background:#fff !important; padding: .65rem; border-radius: .65rem; border:1px solid var(--osv-stone-200) !important; font-style: italic; margin-top: .35rem; }

.osv-ty-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding-top: 1.6rem; }
@media (min-width: 640px) { .osv-ty-actions { flex-direction: row; } }
.osv-ty-btn {
	padding: .75rem 1.4rem; border-radius: .85rem; border:1.5px solid var(--osv-stone-200) !important; background:#fff !important;
	color:var(--osv-stone-700) !important; font-weight: 700; font-size: .98rem; cursor: pointer; font-family: inherit;
	width: 100%; transition: all .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	text-decoration: none !important; box-sizing: border-box;
}
@media (min-width: 640px) { .osv-ty-btn { width: auto; } }
.osv-ty-btn:hover { transform: translateY(-1px); box-shadow: var(--osv-shadow-sm); }
.osv-ty-btn-dark { background:var(--osv-gradient) !important; color:#fff !important; border: none !important; }

/* Loading overlay */
.osv-loading-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 50; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.osv-spinner { width: 2.6rem; height: 2.6rem; border: 3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius: 999px; animation: osv-spin .7s linear infinite; }
@keyframes osv-spin { to { transform: rotate(360deg); } }

/* ============ Mobile: edge-to-edge, Google-Forms-like ============ */
@media (max-width: 640px) {
	.osv-hero { padding: 2.25rem 1rem 4rem; }
	.osv-main { margin-top: -2.25rem; padding: 0 .75rem 2.25rem; }
	.osv-intro-card, .osv-card, .osv-thankyou-card { border-radius: 1rem !important; }
	.osv-intro-card { padding: 1.35rem 1.25rem 1.2rem; }
	.osv-card-header { padding: 1rem 1.1rem; }
	.osv-selected > .osv-card-body { padding: 1.25rem 1.1rem 1.4rem; }
	.osv-thankyou-card { padding: 1.75rem 1.15rem; }
}

@media (max-width: 400px) {
	.osv-main { padding-left: .5rem; padding-right: .5rem; }
}