/* Tarifly Studio – the shared design tokens of every CA Tarifly block (see design-md/tarifly/DESIGN.md).
 * WoodMart is the host: brand colour, link/hover colours and button hover come from the theme; the rest is the Tarifly
 * system (navy ink, quiet #f5f5f7 surfaces, soft shadows, pill actions, 20/28 px radii). Block CSS reads --ca-* (aliases below)
 * or --ts-* directly; offers-sync mirrors the same names in tarifly-offers-sync/assets/apple.css. */
:root{
	--ts-acc:var(--wd-primary-color,#fa7320);
	--ts-acc-hover:var(--btn-default-bgcolor-hover,#0c0625);
	--ts-acc-soft:color-mix(in srgb,var(--ts-acc) 10%,#fff);
	--ts-acc-ink:color-mix(in srgb,var(--ts-acc) 55%,#000);
	--ts-link:color-mix(in srgb,var(--ts-acc) 78%,#000);/* text links: >= 4.5:1 on white */
	--ts-ink:#0d0625;--ts-text:#3a3f4f;--ts-mute:#6a7184;--ts-line:rgba(13,6,37,.09);
	--ts-bg:#fff;--ts-band:#f5f5f7;
	--ts-ring:0 0 0 1px rgba(13,6,37,.07);
	--ts-shadow:0 0 0 1px rgba(13,6,37,.06),0 2px 4px rgba(13,6,37,.03),0 18px 40px -18px rgba(40,30,90,.22);
	--ts-shadow-up:0 0 0 1px rgba(13,6,37,.08),0 4px 8px rgba(13,6,37,.04),0 28px 56px -20px rgba(40,30,90,.32);
	--ts-r-lg:28px;--ts-r-md:20px;--ts-r-sm:14px;--ts-r-field:12px;--ts-r-pill:980px;
	--ts-focus:0 0 0 4px color-mix(in srgb,var(--ts-acc) 22%,transparent);
	--ts-ease:cubic-bezier(.2,.7,.2,1);
	--ts-h2:clamp(26px,2.6vw + 12px,40px);--ts-h3:clamp(19px,.7vw + 16px,24px);--ts-lead:clamp(16px,.4vw + 15px,19px);
}
.ca-tarifly-ui{
	--ca-brand:var(--ts-acc);
	--ca-brand-hover:var(--ts-acc-hover);
	--ca-title:var(--ts-ink);
	--ca-text:var(--ts-text);
	--ca-muted:var(--ts-mute);
	--ca-link:var(--ts-acc);
	--ca-link-hover:var(--ts-acc-hover);
	--ca-surface:var(--ts-bg);
	--ca-soft:var(--ts-band);
	--ca-border:var(--ts-line);
	--ca-border-strong:rgba(13,6,37,.16);
	--ca-form-bg:var(--ts-band);
	--ca-form-color:var(--ts-ink);
	--ca-form-border:transparent;
	--ca-form-border-focus:var(--ts-acc);
	--ca-form-radius:var(--ts-r-field);
	--ca-form-height:48px;
	--ca-radius:var(--ts-r-md);
	--ca-shadow:var(--ts-shadow);
	--ca-focus:var(--ts-focus);
	/* theme buttons (.btn.btn-accent) inside blocks = Studio pill */
	--btn-accented-bgcolor:var(--ts-acc);--btn-accented-bgcolor-hover:var(--ts-acc-hover);
	--btn-accented-color:#fff;--btn-accented-color-hover:#fff;
	--btn-accented-brd-radius:var(--ts-r-pill);--btn-accented-transform:none;
	--btn-accented-font-weight:600;--btn-accented-font-size:15px;--btn-accented-height:48px;--btn-accented-padding:0 26px;
	--btn-accented-box-shadow:none;--btn-accented-box-shadow-hover:none;--btn-accented-box-shadow-active:none;
	/* plain <button>s inside blocks must not inherit the theme's uppercase 42px grey button (WoodMart styles every <button> via --btn-*) */
	--btn-transform:none;--btn-font-weight:inherit;--btn-font-size:inherit;--btn-height:auto;--btn-padding:0;
	--btn-bgcolor:transparent;--btn-bgcolor-hover:transparent;--btn-color:inherit;--btn-color-hover:inherit;
	--btn-brd-width:0;--btn-brd-radius:0;--btn-box-shadow:none;--btn-box-shadow-hover:none;
	box-sizing:border-box;
	color:var(--ca-text);
	font-family:inherit;
	min-width:0;
}
.ca-tarifly-ui,.ca-tarifly-ui *,.ca-tarifly-ui :before,.ca-tarifly-ui :after{box-sizing:border-box}
.ca-tarifly-theme-native :where(input[type=email],input[type=date],input[type=search],input[type=number],input[type=text],input[type=tel],input[type=url],input[type=password],textarea,select){font-family:inherit}
.ca-tarifly-theme-native :where(.ca-theme-cta){--btn-transform:none;--btn-font-weight:700;--btn-accented-transform:none;text-decoration:none!important}
.ca-tarifly-theme-fallback .ca-theme-cta{align-items:center;background:var(--ca-brand);border:0;border-radius:10px;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;justify-content:center;min-height:44px;padding:8px 20px;text-decoration:none;transition:background-color .2s ease,transform .2s ease}
.ca-tarifly-theme-fallback .ca-theme-cta:hover{background:var(--ca-brand-hover);color:#fff;transform:translateY(-1px)}
.ca-tarifly-ui :where(.tarifly-hero-compare__tab,.tarif-provider-button,.tarifly-hero-compare__choice,.ca-toc-toggle,.ca-toc-sublist-toggle,.ca-slider-arrow,.ca-slider-dot,.ca-mobile-tab,.ca-mobile-filter-chip){--btn-transform:none;--btn-padding:0;--btn-height:auto;--btn-font-size:inherit;--btn-font-weight:inherit}
.ca-tarifly-ui :where(a,button,input,select,textarea):focus-visible{outline:none;box-shadow:var(--ca-focus)}

/* Per-block options (spacing, size, position, hover states, visibility) are generated per block by includes/foundation (schema.json); visibility uses the theme's wd-hide-* classes. */
.ca-tarifly-responsive{min-width:0}
.ca-tarifly-notice{margin:12px 0;padding:16px 18px;border:1px solid var(--ca-border,#d7e0ea);border-inline-start:4px solid var(--ca-brand,#fa7320);border-radius:10px;background:var(--ca-surface,#fff);color:var(--ca-title,#0f2438);font-family:inherit;font-size:13px;font-weight:600;line-height:1.55;box-shadow:0 8px 24px rgba(15,23,42,.06)}

/* Elementor flex containers: widgets whose root is a size container (container-type:inline-size) can be laid out at an
 * unstable intermediate width, leaving hundreds of px of blank space on phones. A definite width fixes it; :where()
 * keeps specificity at zero so Elementor's own Advanced > Width setting still wins. */
:where(.elementor-widget-tarifly-compare-hero,.elementor-widget-tarifly-category-cards,.elementor-widget-tarifly-step-process){width:100%}

/* Studio form fields inside blocks (theme sets --wd-form-brd-radius:0): one radius, one focus ring. */
.ca-tarifly-ui select,.ca-tarifly-ui textarea,.ca-tarifly-ui input:is([type=text],[type=search],[type=email],[type=number],[type=tel],[type=url],[type=password]){border-radius:var(--ts-r-field,12px)}
.ca-tarifly-ui select:focus-visible,.ca-tarifly-ui textarea:focus-visible,.ca-tarifly-ui input:focus-visible{border-color:var(--ts-acc,#fa7320);box-shadow:var(--ts-focus,0 0 0 4px rgba(250,115,32,.22));outline:0}