/* Amanova customer portal (website + installable mobile app).
   Colours come from the active Amanova Theme (injected as --q-* variables by the
   page template); the aliases below keep component rules theme-agnostic. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/assets/amanova/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/assets/amanova/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/assets/amanova/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url(/assets/amanova/fonts/inter-tight-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-display: swap; src: url(/assets/amanova/fonts/inter-tight-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url(/assets/amanova/fonts/inter-tight-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(/assets/amanova/fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(/assets/amanova/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 400; font-display: swap; src: url(/assets/amanova/fonts/noto-nastaliq-urdu-arabic-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 600; font-display: swap; src: url(/assets/amanova/fonts/noto-nastaliq-urdu-arabic-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 400; font-display: swap; src: url(/assets/amanova/fonts/noto-naskh-arabic-arabic-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 500; font-display: swap; src: url(/assets/amanova/fonts/noto-naskh-arabic-arabic-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 600; font-display: swap; src: url(/assets/amanova/fonts/noto-naskh-arabic-arabic-600-normal.woff2) format("woff2"); }

:root {
	/* fallbacks if the theme block is missing */
	--q-primary: #242627; --q-on-primary: #fff; --q-accent: #ef5123; --q-btn: #c53d14; --q-btn-hover: #a8330f;
	--q-link: #b93a12; --q-highlight: #fcb913; --q-info: #33a1db; --q-ok: #15803d; --q-warn: #b45309; --q-danger: #b91c1c;
	--q-paper: #f5f5f5; --q-card: #fff; --q-ink: #1a1c1d; --q-muted: #5f6567; --q-line: #dfe2e5; --q-primary-2: #333637;
	--q-display: "Inter Tight", "Inter", system-ui, sans-serif;
	--q-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--q-radius-lg: 20px; --q-radius: 12px; --q-radius-sm: 8px; --q-radius-btn: 999px;
	--q-safe-bottom: env(safe-area-inset-bottom, 0px);
	--q-line-height: 1.55;
	/* soft tints derived from semantic colours */
	--q-tint-info: color-mix(in srgb, var(--q-info) 12%, var(--q-card));
	--q-tint-ok: color-mix(in srgb, var(--q-ok) 12%, var(--q-card));
	--q-tint-warn: color-mix(in srgb, var(--q-warn) 14%, var(--q-card));
	--q-tint-danger: color-mix(in srgb, var(--q-danger) 12%, var(--q-card));
	--q-tint-accent: color-mix(in srgb, var(--q-accent) 12%, var(--q-card));
	/* legacy aliases used by component rules */
	--q-navy: var(--q-primary); --q-navy-2: var(--q-primary-2); --q-teal: var(--q-btn); --q-teal-dark: var(--q-link); --q-gold: var(--q-highlight);
	color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

/* Urdu (Nastaliq needs generous line height) and Arabic */
:root[lang="ur"] { --q-text: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; --q-display: "Noto Nastaliq Urdu", serif; --q-line-height: 2.1; }
:root[lang="ar"] { --q-text: "Noto Naskh Arabic", system-ui, serif; --q-display: "Noto Naskh Arabic", serif; --q-line-height: 1.8; }
:root[lang="bn"] { --q-text: "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", system-ui, sans-serif; --q-line-height: 1.75; }
:root[lang="ur"] .q-num, :root[lang="ar"] .q-num, :root[lang="ur"] input, :root[lang="ar"] input { font-family: "Inter", system-ui, sans-serif; }
:root[lang="ur"] h1, :root[lang="ur"] h2, :root[lang="ur"] h3 { line-height: 1.9; letter-spacing: 0; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.amanova {
	margin: 0;
	background: var(--q-paper);
	color: var(--q-ink);
	font: 16px/var(--q-line-height) var(--q-text);
	min-height: 100vh;
	padding-bottom: calc(72px + var(--q-safe-bottom));
}
@media (min-width: 900px) { body.amanova { padding-bottom: 0; } }

.amanova :where(a) { color: var(--q-teal-dark); }
.amanova h1, .amanova h2, .amanova h3 { font-family: var(--q-display); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
.amanova h1 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); font-weight: 600; }
.amanova h2 { font-size: 1.35rem; font-weight: 600; }
.amanova h3 { font-size: 1.05rem; font-weight: 600; }
.amanova p { margin: 0 0 1em; max-width: 68ch; }
.q-muted { color: var(--q-muted); }
.q-small { font-size: .875rem; }
.q-num { font-family: var(--q-display); font-variant-numeric: tabular-nums; }
.q-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.q-narrow { max-width: 620px; }

:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 2px; }

/* ---------- top bar ---------- */
.q-top {
	background: var(--q-card);
	border-bottom: 1px solid var(--q-line);
	position: sticky; top: 0; z-index: 20;
}
.q-top .q-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.q-top img.q-logo { height: 42px; width: auto; display: block; }
@media (max-width: 560px) { .q-top .q-wrap { height: 66px; } .q-top img.q-logo { height: 34px; } }
.q-top nav { display: none; gap: 24px; align-items: center; }
.q-top nav a:not(.q-btn) { color: var(--q-ink); text-decoration: none; font-weight: 500; }
.q-top nav a[aria-current="page"] { color: var(--q-teal-dark); }
@media (min-width: 900px) { .q-top nav { display: flex; } .q-top .q-top-mobile { display: none; } }

/* ---------- bottom tab bar (phones) ---------- */
.q-tabs {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	background: var(--q-card); border-top: 1px solid var(--q-line);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-bottom: var(--q-safe-bottom);
}
.q-tabs a {
	min-width: 0; text-align: center; overflow-wrap: anywhere;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 9px 0 8px; font-size: .72rem; color: var(--q-muted); text-decoration: none;
}
.q-tabs a svg { width: 22px; height: 22px; }
.q-tabs a[aria-current="page"] { color: var(--q-ink); font-weight: 600; }
.q-tabs a[aria-current="page"] svg { color: var(--q-accent); }
@media (min-width: 900px) { .q-tabs { display: none; } }

/* ---------- buttons & forms ---------- */
.q-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 22px; border-radius: var(--q-radius-btn); border: 0;
	font: 600 1rem var(--q-text); cursor: pointer; text-decoration: none;
	background: var(--q-teal); color: #fff;
	transition: background .15s;
}
.q-btn:hover { background: var(--q-btn-hover); color: #fff; }
.q-btn[disabled] { opacity: .55; cursor: not-allowed; }
.q-btn.q-ghost { background: transparent; color: var(--q-ink); border: 1.5px solid var(--q-line); }
.q-btn.q-ghost:hover { border-color: var(--q-ink); background: transparent; color: var(--q-ink); }
.q-btn.q-light { background: #fff; color: #1a1c1d; }
.q-btn.q-light:hover { background: #eceeef; color: #1a1c1d; }
.q-btn.q-sm { min-height: 38px; padding: 0 16px; font-size: .9rem; }
.q-btn.q-block { width: 100%; }
.q-link-btn { background: none; border: 0; padding: 0; color: var(--q-teal-dark); font: inherit; font-weight: 600; cursor: pointer; }

.q-field { display: block; margin-bottom: 16px; }
.q-field > span { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
.q-field small { display: block; color: var(--q-muted); font-size: .8rem; margin-top: 4px; }
.q-input, .q-select, .q-textarea {
	width: 100%; min-height: 48px; padding: 10px 14px;
	border: 1.5px solid var(--q-line); border-radius: var(--q-radius-sm);
	background: var(--q-card); color: var(--q-ink); font: 1rem var(--q-text);
}
.q-textarea { min-height: 96px; resize: vertical; }
.q-input:focus, .q-select:focus, .q-textarea:focus { border-color: var(--q-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 25%, transparent); }
.q-grid-2 { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .q-grid-2 { grid-template-columns: 1fr 1fr; } }

.q-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--q-line); }
.q-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--q-accent); flex: none; }

.q-alert { padding: 12px 14px; border-radius: var(--q-radius-sm); margin-bottom: 16px; font-size: .95rem; }
.q-alert.q-error { background: var(--q-tint-danger); color: var(--q-danger); border: 1px solid color-mix(in srgb, var(--q-danger) 30%, transparent); }
.q-alert.q-info { background: var(--q-tint-accent); color: var(--q-ink); border: 1px solid color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-alert.q-warn { background: var(--q-tint-warn); color: var(--q-ink); border: 1px solid color-mix(in srgb, var(--q-warn) 35%, transparent); }

/* ---------- surfaces ---------- */
.q-panel { background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--q-radius); padding: 20px; }
.q-section { padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 900px) { .q-section { padding-top: 64px; padding-bottom: 64px; } }

/* ---------- hero: the instalment calculator ---------- */
.q-hero { background: var(--q-primary); color: var(--q-on-primary); padding: 28px 0 36px; }
.q-hero .q-wrap { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .q-hero { padding: 64px 0; } .q-hero .q-wrap { grid-template-columns: 1fr 1.05fr; gap: 56px; } }
.q-hero h1 { color: var(--q-on-primary); }
.q-hero p { color: color-mix(in srgb, var(--q-on-primary) 78%, transparent); font-size: 1.05rem; }
.q-hero .q-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.q-calc { background: var(--q-navy-2); border-radius: var(--q-radius-lg); padding: 22px; }
.q-calc label { display: block; color: color-mix(in srgb, var(--q-on-primary) 78%, transparent); font-size: .9rem; }
.q-calc .q-calc-row { margin-bottom: 18px; }
.q-calc .q-calc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.q-calc .q-calc-head output { font-family: var(--q-display); font-weight: 600; color: #fff; font-size: 1.1rem; }
.q-calc select { width: 100%; min-height: 46px; border-radius: var(--q-radius-sm); border: 0; padding: 0 12px; font: 1rem var(--q-text); background: #fff; color: #1a1c1d; }
.q-calc input[type="range"] { width: 100%; accent-color: var(--q-accent); height: 28px; }
.q-instalment { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; margin-top: 4px; }
.q-instalment .q-amount {
	font-family: var(--q-display); font-weight: 600; color: var(--q-gold);
	font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.q-instalment .q-amount small { font-size: .38em; color: color-mix(in srgb, var(--q-on-primary) 78%, transparent); font-weight: 500; margin-inline-start: 6px; }
.q-instalment dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.q-instalment dt { color: color-mix(in srgb, var(--q-on-primary) 65%, transparent); font-size: .78rem; }
.q-instalment dd { margin: 0; font-family: var(--q-display); font-weight: 500; font-variant-numeric: tabular-nums; }
.q-instalment .q-note { color: color-mix(in srgb, var(--q-on-primary) 65%, transparent); font-size: .78rem; margin-top: 12px; }

/* ---------- product list ---------- */
.q-products { display: grid; gap: 14px; }
@media (min-width: 720px) { .q-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .q-products { grid-template-columns: repeat(3, 1fr); } }
.q-product { background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--q-radius); padding: 20px; display: flex; flex-direction: column; }
.q-product .q-rate { font-family: var(--q-display); font-weight: 600; font-size: 1.6rem; color: var(--q-ink); }
.q-product .q-rate span { font-size: .55em; color: var(--q-muted); font-weight: 500; }
.q-product ul { list-style: none; padding: 0; margin: 12px 0 18px; color: var(--q-muted); font-size: .92rem; }
.q-product ul li { padding: 4px 0; }
.q-product .q-btn { margin-top: auto; }

/* ---------- steps (a real sequence) ---------- */
.q-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 900px) { .q-steps { grid-template-columns: repeat(4, 1fr); } }
.q-steps li { counter-increment: step; position: relative; padding-inline-start: 46px; }
.q-steps li::before {
	content: counter(step); position: absolute; inset-inline-start: 0; top: 0;
	width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	background: var(--q-highlight); color: #1a1c1d; font: 600 .95rem "Inter", sans-serif;
}
.q-steps strong { display: block; font-family: var(--q-display); }

/* ---------- wizard ---------- */
.q-stepper { display: flex; gap: 6px; margin: 20px 0 22px; }
.q-stepper span { flex: 1; height: 5px; border-radius: 3px; background: var(--q-line); }
.q-stepper span.done { background: var(--q-teal); }
.q-stepper span.current { background: var(--q-ink); }
.q-step-title { color: var(--q-muted); font-size: .9rem; margin-bottom: 4px; }
.q-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; flex-wrap: wrap-reverse; }
.q-actions .q-btn { flex: 1 1 160px; }
@media (min-width: 640px) { .q-actions .q-btn { flex: 0 0 auto; } }

.q-summary { width: 100%; border-collapse: collapse; }
.q-summary td { padding: 10px 0; border-bottom: 1px solid var(--q-line); vertical-align: top; }
.q-summary td:last-child { text-align: end; font-weight: 600; }

/* documents */
.q-doc { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--q-line); }
.q-doc .q-doc-text { flex: 1; min-width: 0; }
.q-doc .q-doc-text b { display: block; }
.q-doc .q-doc-file { color: var(--q-ok); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-doc .q-doc-file.missing { color: var(--q-muted); }
.q-doc input[type="file"] { display: none; }

/* ---------- dashboard ---------- */
.q-list { display: grid; gap: 12px; }
.q-item {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--q-radius);
	padding: 16px; text-decoration: none; color: inherit;
}
.q-item:hover { border-color: var(--q-accent); }
.q-item .q-item-amount { font-family: var(--q-display); font-weight: 600; font-size: 1.15rem; }
.q-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--q-muted) 14%, var(--q-card)); color: var(--q-muted); }
.q-badge.s-Submitted, .q-badge.s-Under-Review { background: var(--q-tint-info); color: var(--q-info); }
.q-badge.s-Info-Requested { background: var(--q-tint-warn); color: var(--q-warn); }
.q-badge.s-Approved, .q-badge.s-Active, .q-badge.s-Disbursed, .q-badge.s-Verified, .q-badge.s-Matched { background: var(--q-tint-ok); color: var(--q-ok); }
.q-badge.s-Rejected, .q-badge.s-Mismatch, .q-badge.s-Failed { background: var(--q-tint-danger); color: var(--q-danger); }

.q-kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .q-kv { grid-template-columns: repeat(4, 1fr); } }
.q-kv div span { display: block; color: var(--q-muted); font-size: .8rem; }
.q-kv div b { font-family: var(--q-display); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.q-timeline { list-style: none; margin: 0; padding: 0; }
.q-timeline li { position: relative; padding-block-end: 16px; padding-inline-start: 22px; border-inline-start: 2px solid var(--q-line); margin-inline-start: 6px; }
.q-timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--q-accent); }
.q-timeline li:last-child { border-inline-start-color: transparent; }

.q-table-wrap { overflow-x: auto; }
.q-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.q-table th, .q-table td { padding: 10px 8px; border-bottom: 1px solid var(--q-line); text-align: end; white-space: nowrap; }
.q-table th:first-child, .q-table td:first-child { text-align: start; }
.q-table th { color: var(--q-muted); font-weight: 500; }

.q-empty { text-align: center; padding: 40px 16px; }

/* ---------- footer ---------- */
.q-foot { padding: 28px 0 32px; color: var(--q-muted); font-size: .85rem; border-top: 1px solid var(--q-line); margin-top: 32px; }
.q-foot .q-wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.q-foot img { height: 48px; width: auto; }

.q-spinner { width: 22px; height: 22px; border: 3px solid color-mix(in srgb, currentColor 20%, transparent); border-top-color: currentColor; border-radius: 50%; animation: q-spin .8s linear infinite; }
@keyframes q-spin { to { transform: rotate(360deg); } }
.q-hidden { display: none !important; }

/* install prompt */
.q-install { display: flex; gap: 12px; align-items: center; background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--q-radius); padding: 12px 14px; margin: 16px 0; }
.q-install img { width: 40px; height: 40px; border-radius: 10px; }
.q-install div { flex: 1; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ---------- header tools: language + appearance ---------- */
.q-tools { display: flex; gap: 8px; align-items: center; }
.q-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; border-radius: var(--q-radius-sm);
	border: 1px solid var(--q-line); background: var(--q-card); color: var(--q-ink); font: 500 .85rem "Inter", system-ui, sans-serif; cursor: pointer; }
.q-tool svg { width: 18px; height: 18px; }
.q-tool select { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.q-top { background: var(--q-card); }
.q-top img.q-logo-dark { display: none; }
:root[data-theme="dark"] .q-top img.q-logo-light { display: none; }
:root[data-theme="dark"] .q-top img.q-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .q-top img.q-logo-light { display: none; }
	:root:not([data-theme="light"]) .q-top img.q-logo-dark { display: block; }
}
.q-foot .q-by { display: flex; align-items: center; gap: 10px; color: var(--q-muted); }
.q-foot .q-by img { height: 30px; width: auto; }
.q-foot .q-by img.q-smh { height: 34px; }
/* company logo: transparent artwork, grey version on light pages, light version on dark (as on audithd.com) */
.q-foot img.q-logo-dark, .q-foot img.q-smh-dark { display: none; }
:root[data-theme="dark"] .q-foot img.q-logo-light, :root[data-theme="dark"] .q-foot img.q-smh-light { display: none; }
:root[data-theme="dark"] .q-foot img.q-logo-dark, :root[data-theme="dark"] .q-foot img.q-smh-dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .q-foot img.q-logo-light, :root:not([data-theme="light"]) .q-foot img.q-smh-light { display: none; }
	:root:not([data-theme="light"]) .q-foot img.q-logo-dark, :root:not([data-theme="light"]) .q-foot img.q-smh-dark { display: block; }
}

/* country and language */
.q-flag { font-size: 1.05rem; line-height: 1; }
.q-locale-code { font-weight: 600; letter-spacing: .02em; }
.q-dialog { border: 0; border-radius: var(--q-radius); padding: 0; width: min(420px, calc(100vw - 32px)); background: var(--q-card); color: var(--q-ink);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.q-dialog::backdrop { background: rgba(10, 14, 20, .45); backdrop-filter: blur(2px); }
.q-locale-form { padding: 22px 22px 18px; }
.q-locale-form h2 { margin: 0 0 16px; font-size: 1.15rem; }
.q-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* camera capture */
.q-camera { position: relative; background: #000; border-radius: var(--q-radius); overflow: hidden; aspect-ratio: 3 / 4; max-width: 360px; }
.q-camera video, .q-camera img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.q-camera::after { content: ""; position: absolute; inset: 12% 18%; border: 3px dashed rgba(255, 255, 255, .7); border-radius: 50%; pointer-events: none; }
.q-kfs table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.q-kfs th, .q-kfs td { border: 1px solid var(--q-line); padding: 6px 8px; text-align: start; }

/* RTL details */
[dir="rtl"] .q-calc .q-calc-head output, [dir="rtl"] .q-num { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .q-check { flex-direction: row; }
@media (max-width: 899px) { .q-hide-mobile { display: none !important; } .q-tool select { max-width: 74px; } }
.q-top .q-wrap { gap: 10px; }
.q-top nav { margin-inline-start: auto; margin-inline-end: 8px; }

/* optional fields folded away (sign-up) */
.q-more { margin: 4px 0 18px; }
.q-more summary { cursor: pointer; font-weight: 600; color: var(--q-teal-dark); padding: 8px 0; }
/* log-in method switch */
.q-switch { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--q-line); }
.q-switch button { background: none; border: 0; padding: 10px 4px; margin-right: 14px; font: inherit; font-weight: 600; color: var(--q-muted, #667); cursor: pointer; border-bottom: 3px solid transparent; }
.q-switch button[aria-selected="true"] { color: var(--q-ink); border-bottom-color: var(--q-accent); }
.q-banner-staff { background: var(--q-amber-soft, #fff4d6); border: 1px solid var(--q-line); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; }


/* ---------- assistant chat ---------- */
.q-chat-fab {
	position: fixed; inset-inline-end: 16px; bottom: calc(76px + var(--q-safe-bottom, 0px)); z-index: 40;
	width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--q-accent); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18);
	display: grid; place-items: center;
}
.q-chat-fab svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .q-chat-fab { bottom: 24px; inset-inline-end: 24px; } }
.q-chat {
	position: fixed; inset-inline-end: 16px; bottom: calc(140px + var(--q-safe-bottom, 0px)); z-index: 41;
	width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 180px));
	display: flex; flex-direction: column; background: var(--q-card); color: var(--q-ink);
	border: 1px solid var(--q-line); border-radius: var(--q-radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,.2); overflow: hidden;
}
.q-chat[hidden] { display: none; }
@media (min-width: 900px) { .q-chat { bottom: 92px; inset-inline-end: 24px; } }
.q-chat header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--q-primary); color: var(--q-on-primary); }
.q-chat header button { background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.q-chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.q-chat-msg { margin: 0; padding: 8px 12px; border-radius: 14px; max-width: 85%; white-space: pre-wrap; font-size: .93rem; }
.q-chat-msg.bot { background: var(--q-paper); align-self: flex-start; }
.q-chat-msg.me { background: var(--q-accent); color: #fff; align-self: flex-end; }
.q-chat-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.q-chat-sugg button { border: 1px solid var(--q-line); background: var(--q-card); color: var(--q-ink); border-radius: 999px; padding: 5px 10px; font-size: .8rem; cursor: pointer; }
.q-chat form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--q-line); }
.q-chat form .q-input { flex: 1; margin: 0; }
.q-chat-note { margin: 0; padding: 0 12px 10px; font-size: .72rem; color: var(--q-muted); }

/* small phones: keep the header inside the screen in every language */
@media (max-width: 430px) {
	.q-top .q-wrap { gap: 8px; }
	.q-top img.q-logo { height: 22px; width: auto; max-width: 96px; }
	.q-tools { gap: 4px; min-width: 0; }
	.q-tool { padding: 0 6px; }
	.q-tool svg { display: none; }
	#q-appearance svg { display: block; }
	.q-tool select { max-width: 60px; }
	.q-top .q-btn.q-sm { padding-inline: 10px; font-size: .78rem; white-space: nowrap; }
}

/* public demo: link to the staff login or back to the role switch */
.q-demo-bar { background: #0B2545; color: #E8EEF5; font-size: .88rem; }
.q-demo-bar .q-wrap { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center; padding-block: 8px; text-align: center; }
.q-demo-bar a { color: #F2B134; font-weight: 600; }