/* CarTotalos Platform – shared design tokens + primitives (RTL, mobile-first). Modules extend in assets/<module>.css */
:root {
	--ctp-bg: #ffffff;
	--ctp-surface: #f5f7fa;
	--ctp-ink: #14202e;
	--ctp-muted: #5b6878;
	--ctp-line: #dde3ea;
	--ctp-brand: #0b5cad;
	--ctp-brand-ink: #ffffff;
	--ctp-accent: #f2a900;
	/* a11y: the accent (#f2a900) is only 2:1 on white, too weak for a focus ring or a control border (WCAG 1.4.11 / 2.4.7 need 3:1) */
	--ctp-focus: #0a4585;           /* 9.5:1 on white */
	--ctp-control-border: #7f8a99;  /* 3.5:1 on white, 3.3:1 on --ctp-surface */
	--ctp-wa: #177a42;              /* white text on it: 5.4:1 (was #1f8f4e = 4.1:1) */
	--ctp-ok: #1e7b3c;
	--ctp-warn: #a15c00;
	--ctp-bad: #b3261e;
	--ctp-radius: 12px;
	--ctp-gap: 16px;
	--ctp-shadow: 0 1px 2px rgba(20, 32, 46, .06), 0 4px 14px rgba(20, 32, 46, .06);
	--ctp-font: "Assistant", "Rubik", "Heebo", Arial, sans-serif;
}

.ctp { direction: rtl; font-family: var(--ctp-font); color: var(--ctp-ink); line-height: 1.55; box-sizing: border-box; }
.ctp *, .ctp *::before, .ctp *::after { box-sizing: inherit; }
.ctp a { color: var(--ctp-brand); }
.ctp h2, .ctp h3 { line-height: 1.25; margin: 0 0 .5em; }

.ctp-card { background: var(--ctp-bg); border: 1px solid var(--ctp-line); border-radius: var(--ctp-radius); box-shadow: var(--ctp-shadow); padding: var(--ctp-gap); }
.ctp-grid { display: grid; gap: var(--ctp-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ctp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ctp-stack > * + * { margin-top: 12px; }
.ctp-muted { color: var(--ctp-muted); font-size: .92em; }
.ctp-small { font-size: .85em; }

.ctp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; background: var(--ctp-brand); color: var(--ctp-brand-ink) !important; font: 600 16px/1.2 var(--ctp-font); cursor: pointer; text-decoration: none !important; }
.ctp-btn:hover { filter: brightness(1.07); }
/* Visible keyboard focus on every interactive element of the plugin UI (outline sits 2px outside, so it also shows on a filled button). */
.ctp-btn:focus-visible, .ctp :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ctp-focus); outline-offset: 2px; }
.ctp-btn[disabled] { opacity: .55; cursor: not-allowed; }
.ctp-btn--ghost { background: transparent; color: var(--ctp-brand) !important; border-color: var(--ctp-brand); }
.ctp-btn--wa { background: var(--ctp-wa); }
.ctp-btn--block { width: 100%; }

.ctp-field { display: block; margin-bottom: 14px; }
.ctp-field > span { display: block; font-weight: 600; margin-bottom: 6px; }
.ctp-field small { display: block; color: var(--ctp-muted); margin-top: 4px; }
/* a label that is a sibling of its control (used where the label must not swallow a button/help text) */
.ctp-field__lbl { display: block; font-weight: 600; margin-bottom: 6px; }
.ctp input[type=text], .ctp input[type=tel], .ctp input[type=email], .ctp input[type=number], .ctp input[type=password], .ctp input[type=date], .ctp input[type=search], .ctp select, .ctp textarea {
	width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ctp-control-border); border-radius: 10px; background: #fff; color: var(--ctp-ink); font: 16px/1.4 var(--ctp-font);
}
.ctp textarea { min-height: 110px; }
/* file pickers (sell photos/video, partner licence documents): a visible 3:1 boundary and a 44px target on every page that has one */
.ctp input[type=file] { width: 100%; min-height: 44px; padding: 8px; border: 1px dashed var(--ctp-control-border); border-radius: 10px; background: var(--ctp-surface); color: var(--ctp-ink); font: 16px/1.4 var(--ctp-font); }
.ctp-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.ctp-choice label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--ctp-line); border-radius: 999px; cursor: pointer; background: #fff; min-height: 44px; }
.ctp-choice input { accent-color: var(--ctp-brand); }
.ctp-choice label:has(input:checked) { border-color: var(--ctp-brand); background: #e9f2fc; }

.ctp-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82em; font-weight: 600; background: var(--ctp-surface); color: var(--ctp-ink); border: 1px solid var(--ctp-line); }
.ctp-badge--ok { background: #e7f5ec; color: var(--ctp-ok); border-color: #bfe3cb; }
.ctp-badge--warn { background: #fff4e0; color: var(--ctp-warn); border-color: #f3d39b; }
.ctp-badge--bad { background: #fdecea; color: var(--ctp-bad); border-color: #f4c2bd; }
.ctp-badge--brand { background: #e9f2fc; color: var(--ctp-brand); border-color: #bcd6f3; }

.ctp-alert { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ctp-line); background: var(--ctp-surface); }
.ctp-alert--ok { border-color: #bfe3cb; background: #e7f5ec; }
.ctp-alert--bad { border-color: #f4c2bd; background: #fdecea; }
.ctp-alert--warn { border-color: #f3d39b; background: #fff4e0; }

.ctp-table { width: 100%; border-collapse: collapse; }
.ctp-table th, .ctp-table td { padding: 8px 10px; border-bottom: 1px solid var(--ctp-line); text-align: right; vertical-align: top; }
.ctp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.ctp-dl dt { color: var(--ctp-muted); }
.ctp-dl dd { margin: 0; font-weight: 600; }

.ctp-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ctp-toast { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 99999; max-width: 520px; margin-inline: auto; padding: 12px 16px; border-radius: 10px; background: var(--ctp-ink); color: #fff; box-shadow: var(--ctp-shadow); }
.ctp-spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ctp-spin .8s linear infinite; }
@keyframes ctp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ctp-spinner { animation: none; } }

/* ---- Accessibility: site header on pages built from plugin UI ------------------------------------------------
   Astra's "transparent header" floats the header over the first screen of every page. That is designed for the
   Elementor pages that open with a dark hero (white menu text). A page made of plugin UI has no hero: the white menu
   text lands on a white page (1:1), the logo overlaps the page title and the mobile menu icon (white fill) vanishes.
   On pages that carry plugin UI, and are not Elementor pages, the header goes back into the flow with the theme's
   own dark text colour. Hero pages (body.elementor-page) are untouched. */
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) #masthead { position: relative; }
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .menu-item > .menu-link,
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .menu-item > .ast-menu-toggle { color: var(--ast-global-color-2, #1e293b); }
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .menu-item:hover > .menu-link,
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .menu-item > .menu-link:focus-visible,
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .ctp-menu-cta > .menu-link { color: var(--ast-global-color-0, var(--ctp-brand)); }
/* the current page is marked by more than colour */
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .current-menu-item > .menu-link,
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .main-header-menu > .current-menu-ancestor > .menu-link { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) .menu-toggle { color: var(--ast-global-color-2, #1e293b); }
body.ast-theme-transparent-header:not(.elementor-page):has(.ctp, .ctp-wrap) [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg { fill: currentColor; }

/* Keyboard focus in the header / mobile menu: two-tone ring (dark blue + white) that reads on light pages and on dark heroes. */
#masthead :is(a, button, summary, input, select, textarea, [role="button"], [tabindex]):focus-visible,
.ast-mobile-popup-drawer :is(a, button, summary, input, select, textarea, [role="button"], [tabindex]):focus-visible { outline: 3px solid var(--ctp-focus); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
/* Astra parks the closed off-canvas mobile menu far outside the viewport (left/right: 1.6 million px) but leaves it visible,
   so on EVERY page 15 invisible stops (close button, the menu again, call-to-action, phone, WhatsApp) sit in the Tab order
   after the page content: keyboard focus vanishes (WCAG 2.4.7) and a screen reader reads the whole menu twice.
   While it is closed it is now also hidden from the Tab order and the accessibility tree; the hide is delayed by the length
   of the theme's own fade-out (.25s) so the closing animation is unchanged, and opening shows it instantly. */
.ast-mobile-popup-drawer:not(.active):not(.show) { visibility: hidden; transition: opacity .25s ease-in, right 0s .25s, left 0s .25s, visibility 0s .25s; }
.ast-mobile-popup-drawer.active, .ast-mobile-popup-drawer.show { visibility: visible; }
/* 44px touch target for the header call-to-action (Growth adds the button at 40px) and 24px minimum for the sub-menu arrows */
a.ctp-header-cta { min-height: 44px; }
#masthead .main-header-menu .ast-header-navigation-arrow { min-width: 24px; justify-content: center; }

/* ---- Accessibility: reduced motion --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ctp *, .ctp *::before, .ctp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}