@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=DM+Sans:wght@400;500;600&display=swap');
.dtk-tool{font-family:var(--dtk-fb);color:var(--dtk-txt);background:var(--dtk-bg);border-radius:var(--dtk-r);max-width:640px;margin:0 auto;overflow:hidden}

/* HEADER */
.dtk-head{background:var(--dtk-s);color:#fff;padding:24px 28px;text-align:center}
.dtk-head-icon{font-size:28px;margin-bottom:6px}
.dtk-head h2{font-family:var(--dtk-fh);font-size:var(--dtk-fs-title,22px);font-weight:800;margin:0 0 4px}
.dtk-head p{font-size:var(--dtk-fs-sub,13px);opacity:.8;margin:0}

/* PROGRESS */
.dtk-progress{height:4px;background:var(--dtk-bdr);margin:0}
.dtk-progress-fill{height:100%;background:var(--dtk-p);transition:width .3s ease;width:0}

/* STEPS */
.dtk-body{padding:24px 28px}
.dtk-step-active{animation:dtk-fadeIn .3s ease}
@keyframes dtk-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.dtk-q{font-family:var(--dtk-fh);font-size:var(--dtk-fs-q,17px);font-weight:700;margin-bottom:14px;line-height:1.4;direction:inherit;text-align:inherit}
.dtk-q-hint{font-family:var(--dtk-fb);font-size:var(--dtk-fs-qhint,13px);color:var(--dtk-mut);margin-top:-8px;margin-bottom:14px;line-height:1.4;direction:inherit;text-align:inherit;font-style:italic}
.dtk-opts{display:flex;flex-direction:column;gap:8px}
.dtk-opt{padding:12px 16px;border:2px solid var(--dtk-bdr);border-radius:var(--dtk-r);background:var(--dtk-card);font-family:var(--dtk-fb);font-size:var(--dtk-fs-opt,14px);font-weight:500;cursor:pointer;transition:.2s;text-align:inherit;color:var(--dtk-txt);direction:inherit}
.dtk-opt:hover{border-color:var(--dtk-hvbdr,var(--dtk-p));background:var(--dtk-hvbg,var(--dtk-p));color:var(--dtk-hvtxt,var(--dtk-txt))}
.dtk-opt.has-media{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.dtk-opt-img{width:32px;height:32px;object-fit:cover;border-radius:6px}
.dtk-opt-img.dtk-opt-img-lg{width:60px;height:60px;border-radius:8px}
.dtk-opt.dtk-opt-image{padding:10px;min-height:60px}
.dtk-opt-icon{font-size:22px;line-height:1}
.dtk-q-img{text-align:center;margin-bottom:10px}
.dtk-q-img img{max-width:100%;max-height:160px;border-radius:var(--dtk-r);object-fit:cover}
.dtk-q-icon{text-align:center;font-size:36px;margin-bottom:8px}

/* MULTI-SELECT */
.dtk-opt.dtk-opt-selected{border-color:var(--dtk-p);background:color-mix(in srgb,var(--dtk-p) 10%,var(--dtk-card));box-shadow:0 0 0 2px color-mix(in srgb,var(--dtk-p) 25%,transparent)}
.dtk-multi-hint{font-size:var(--dtk-fs-hint,11px);color:var(--dtk-hint-c,var(--dtk-mut));margin-bottom:8px;font-style:var(--dtk-hint-style,italic)}
.dtk-multi-next{margin-top:12px;padding:10px 24px;background:var(--dtk-p);color:#fff;border:none;border-radius:var(--dtk-r);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--dtk-fb);transition:.2s}
.dtk-multi-next:hover{opacity:.9}

/* RESULT */
.dtk-result{display:none;text-align:center;padding:20px 0}
.dtk-score-circle{width:120px;height:120px;border-radius:50%;margin:0 auto 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--color) calc(var(--pct)*1%),var(--dtk-bdr) 0);position:relative}
.dtk-score-circle::before{content:'';position:absolute;width:96px;height:96px;border-radius:50%;background:var(--dtk-bg)}
.dtk-score-num{position:relative;font-family:var(--dtk-fh);font-size:28px;font-weight:800;line-height:1}
.dtk-score-level{position:relative;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.dtk-cats{text-align:left;margin-top:16px}
.dtk-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dtk-cat-name{font-size:12px;font-weight:600;min-width:100px;text-transform:capitalize}
.dtk-cat-bar{flex:1;height:6px;background:var(--dtk-bdr);border-radius:3px;overflow:hidden}
.dtk-cat-fill{height:100%;border-radius:3px;transition:width .4s ease}
.dtk-cat-pct{font-size:11px;font-weight:700;color:var(--dtk-mut);min-width:35px;text-align:right}
.dtk-rec{font-size:11px;color:var(--dtk-mut);margin:0 0 8px 108px;font-style:italic}

/* FORM */
.dtk-form{display:none;border-top:1px solid var(--dtk-bdr);padding:24px var(--dtk-form-px-d,28px);direction:inherit;text-align:inherit}
.dtk-form h3{font-family:var(--dtk-fh);font-size:16px;font-weight:700;margin:0 0 4px;direction:inherit;text-align:inherit}
.dtk-form p{font-size:12px;color:var(--dtk-mut);margin:0 0 14px;direction:inherit;text-align:inherit}
.dtk-form-fields{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.dtk-form-field{flex:1;min-width:calc(50% - 4px)}
.dtk-form-field.w100{min-width:100%}
.dtk-form-field label{display:block;font-size:var(--dtk-fs-lbl,10px);font-weight:600;color:var(--dtk-mut);margin-bottom:3px;text-transform:uppercase;direction:inherit;text-align:inherit}
.dtk-form-field input,.dtk-form-field select,.dtk-form-field textarea{width:100%;padding:10px 14px;border:1px solid var(--dtk-bdr);border-radius:var(--dtk-r);font-size:var(--dtk-fs-inp,13px);font-family:var(--dtk-fb);background:var(--dtk-card);color:var(--dtk-txt);direction:inherit;text-align:inherit}
.dtk-form-field input:focus,.dtk-form-field select:focus{outline:none;border-color:var(--dtk-p)}
.dtk-form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dtk-submit{padding:12px 28px;border-radius:50px;font-size:var(--dtk-fs-btn,14px);font-weight:700;cursor:pointer;border:none;transition:.2s;font-family:var(--dtk-fb)}
.dtk-skip{background:transparent;border:none;color:var(--dtk-mut);font-size:12px;cursor:pointer;font-family:var(--dtk-fb)}
.dtk-success{text-align:center;padding:24px;font-size:16px;font-weight:600;color:var(--dtk-a)}
/* TERMS CHECKBOX */
.dtk-terms{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;font-size:12px;color:var(--dtk-mut);direction:inherit}
.dtk-terms input[type=checkbox]{width:16px;height:16px;margin-top:1px;flex-shrink:0;accent-color:var(--dtk-p)}
.dtk-terms a{color:var(--dtk-p);text-decoration:underline}

/* CALCULATOR */
.dtk-sliders{padding:4px 0}
.dtk-slider-wrap{margin-bottom:16px}
.dtk-slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dtk-slider-label{font-size:13px;font-weight:600}
.dtk-slider-val{font-family:var(--dtk-fh);font-size:15px;font-weight:800;color:var(--dtk-p)}
.dtk-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--dtk-bdr);outline:none}
.dtk-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--dtk-p);cursor:pointer;border:3px solid var(--dtk-card);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.dtk-calc-output{margin-top:20px}
.dtk-calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.dtk-calc-card{background:var(--dtk-card);border:1px solid var(--dtk-bdr);border-radius:var(--dtk-r);padding:14px;text-align:center}
.dtk-calc-val{font-family:var(--dtk-fh);font-size:22px;font-weight:800;color:var(--dtk-txt)}
.dtk-calc-label{font-size:10px;color:var(--dtk-mut);font-weight:600;text-transform:uppercase;margin-top:2px}
.dtk-highlight{border-color:var(--dtk-a);background:color-mix(in srgb,var(--dtk-a) 5%,var(--dtk-card))}
.dtk-highlight .dtk-calc-val{color:var(--dtk-a)}

/* SCORECARD */
.dtk-scorecard-cats{padding:4px 0}
.dtk-sc-cat{margin-bottom:14px;padding:12px;background:var(--dtk-card);border:1px solid var(--dtk-bdr);border-radius:var(--dtk-r)}
.dtk-sc-cat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.dtk-sc-cat-label{font-size:14px;font-weight:600}
.dtk-sc-cat-desc{font-size:11px;color:var(--dtk-mut)}
.dtk-grade-select{padding:6px 10px;border:1px solid var(--dtk-bdr);border-radius:8px;font-size:12px;font-family:var(--dtk-fb);background:var(--dtk-bg);color:var(--dtk-txt)}

/* RTL */
[dir=rtl] .dtk-opt{text-align:right}
[dir=rtl] .dtk-rec{margin:0 108px 8px 0}
[dir=rtl] .dtk-nav{text-align:right}

/* NAVIGATION */
.dtk-nav{margin-top:12px;text-align:start}
/* Back sits BESIDE the primary action instead of dangling underneath it as a second CTA.
   The nav div always immediately follows the primary button in the DOM, so the adjacent-sibling
   selector puts them on one row; when a step auto-advances (no primary button) it stays a
   normal block on its own line. margin-inline-start keeps RTL correct automatically. */
/* Action footer: primary keeps the leading edge, Back moves to the trailing edge so the row is
   balanced rather than bunched in one corner. `float:inline-end` and the logical margins mirror
   automatically, so LTR gets [Continue ....... Back] and RTL gets [Back ....... Continue]. */
.dtk-tool button + .dtk-nav{display:inline-flex;align-items:center;margin:0;float:inline-end}
.dtk-tool .dtk-step-active::after{content:"";display:table;clear:both}
/* Older engines that don't know the logical keyword */
@supports not (float: inline-end){
  .dtk-tool button + .dtk-nav{float:right}
  [dir=rtl] .dtk-tool button + .dtk-nav{float:left}
}
/* Secondary by design — a quiet text action, not a rival to the primary button. */
.dtk-nav-back{background:var(--dtk-back-bg,transparent);border:var(--dtk-back-bd,none);border-radius:var(--dtk-r);padding:8px 10px;font-size:13px;font-weight:600;color:var(--dtk-back-c,var(--dtk-mut));cursor:pointer;font-family:var(--dtk-fb);transition:.2s;display:inline-flex;align-items:center;gap:4px;min-height:40px;line-height:1}
.dtk-nav-back:hover{color:var(--dtk-p);background:var(--dtk-hvbg,rgba(0,0,0,.04))}
.dtk-nav-back:focus-visible{outline:2px solid var(--dtk-p);outline-offset:2px}

/* RECS CONTAINER (below form in quiz) */
.dtk-recs{padding:0 28px 20px}
.dtk-recs:empty{display:none}

/* FORM VALIDATION ERRORS */
.dtk-field-error{font-size:var(--dtk-fs-err,11px);color:var(--dtk-err-c,#C43B3B);margin-top:2px;font-family:var(--dtk-fb)}
.dtk-error-field{border-color:var(--dtk-err-c,#C43B3B) !important;box-shadow:0 0 0 2px rgba(196,59,59,0.15)}
/* Lead-form header — size + color controlled by branding (form_title_color/fs_form_title etc.) */
.dtk-tool .dtk-form-title{font-family:var(--dtk-fh)!important;font-size:var(--dtk-fs-ftitle,20px)!important;font-weight:700;color:var(--dtk-ftitle-c,var(--dtk-txt))!important;margin:0 0 4px;line-height:1.3;direction:inherit;text-align:inherit}
.dtk-tool .dtk-form-sub{font-family:var(--dtk-fb)!important;font-size:var(--dtk-fs-fsub,13px)!important;color:var(--dtk-fsub-c,var(--dtk-mut))!important;margin:0 0 12px;line-height:1.4;direction:inherit;text-align:inherit}
/* Soft (non-blocking) phone warning used when validation toggle is OFF but the area code looks wrong */
.dtk-field-warn{font-size:var(--dtk-fs-err,11px);color:var(--dtk-warn-c,#B7791F);margin-top:2px;font-family:var(--dtk-fb)}
.dtk-warn-field,.dtk-warn-field.iti{border-color:#D4A843 !important;box-shadow:0 0 0 2px rgba(212,168,67,0.15)}
.dtk-tool .iti.dtk-warn-field{border-color:#D4A843 !important}

/* ANSWER TYPES */
.dtk-dropdown{cursor:pointer;outline:none;transition:.2s}
.dtk-dropdown:focus{border-color:var(--dtk-p)}
.dtk-radio-opt,.dtk-check-opt{transition:.15s;user-select:none}
.dtk-radio-opt:hover,.dtk-check-opt:hover{border-color:var(--dtk-hvbdr,var(--dtk-p));background:var(--dtk-hvbg)}
.dtk-toggle-opt{transition:.15s;user-select:none}
.dtk-toggle-opt:hover{border-color:var(--dtk-p)}
.dtk-rating .dtk-star{cursor:pointer;user-select:none;line-height:1;display:inline-block}
.dtk-rating .dtk-star:hover,.dtk-rating .dtk-star.selected{color:var(--dtk-a)!important}
.dtk-max-err{font-size:12px;color:#C43B3B;margin-top:6px;font-family:var(--dtk-fb)}
[dir=rtl] .dtk-radio-opt,[dir=rtl] .dtk-check-opt,[dir=rtl] .dtk-toggle-opt{direction:rtl}

/* SPECIFICITY OVERRIDES — beat themes like Elementor / Astra / Divi that style h2/h3/p/input globally */
.dtk-tool .dtk-head h2,.dtk-tool .dtk-head h2 *{font-family:var(--dtk-fh)!important}
.dtk-tool .dtk-head p,.dtk-tool .dtk-head p *{font-family:var(--dtk-fb)!important}
.dtk-tool .dtk-q,.dtk-tool .dtk-q *{font-family:var(--dtk-fh)!important}
.dtk-tool .dtk-form h3,.dtk-tool .dtk-form h3 *{font-family:var(--dtk-fh)!important}
.dtk-tool .dtk-score-num,.dtk-tool .dtk-slider-val,.dtk-tool .dtk-calc-val{font-family:var(--dtk-fh)!important}
.dtk-tool,.dtk-tool .dtk-opt,.dtk-tool .dtk-form-field input,.dtk-tool .dtk-form-field select,.dtk-tool .dtk-form-field textarea,.dtk-tool .dtk-submit,.dtk-tool .dtk-skip,.dtk-tool .dtk-nav-back,.dtk-tool .dtk-grade-select{font-family:var(--dtk-fb)!important}
/* Host themes routinely apply `text-transform:uppercase` to every <button>. Answer options and
   the Continue/Submit buttons ARE buttons, so a visitor saw "МАЛО ЗАЯВОК" when the option was
   typed "Мало заявок". Show text exactly as it was written. The plugin's own deliberate cases
   (--dtk-lbl-case on form labels, score level, calc labels, category names) are left untouched
   because those are set by the plugin, not bled in from the theme. */
.dtk-tool .dtk-opt,.dtk-tool .dtk-opt *,
.dtk-tool .dtk-multi-next,.dtk-tool .dtk-flow-next,.dtk-tool .dtk-submit,
.dtk-tool .dtk-skip,.dtk-tool .dtk-nav-back,
.dtk-tool .dtk-q,.dtk-tool .dtk-q-hint,.dtk-tool .dtk-multi-hint,
.dtk-tool .dtk-form-title,.dtk-tool .dtk-form-sub,
.dtk-tool .dtk-head h2,.dtk-tool .dtk-head p,
.dtk-tool .dtk-terms,.dtk-tool .dtk-terms *,
.dtk-tool .dtk-success,.dtk-tool .dtk-field-error,
.dtk-tool .dtk-form-field input,.dtk-tool .dtk-form-field select,.dtk-tool .dtk-form-field textarea,
.dtk-tool .dtk-combo-input,.dtk-tool .dtk-combo-opt,.dtk-tool .dtk-flow-field{
  text-transform:none!important;font-variant-caps:normal!important}
/* Form field labels keep their case as a branding choice (default uppercase, as before). */
.dtk-tool .dtk-form-field label{text-transform:var(--dtk-lbl-case,uppercase)!important}

/* === INTERNATIONAL PHONE INPUT (intl-tel-input v29) === */
/* Layout strategy: turn the .iti wrapper into a flexbox so the flag/dial-code button and the
   number input are siblings laid out left-to-right. This is deterministic — no JS measuring,
   no absolute-position padding guesswork — and works in BOTH form fields (.dtk-form-field)
   and inline flow/qualifier steps (.dtk-flow-field). The whole widget is forced LTR so the
   flag → dial code → number always read correctly even inside an RTL form. */
/* The wrapper carries the field's frame; the country button is ABSOLUTELY positioned
   inside it by the library, which measures the button and sets the input's left
   padding itself. The old flex layout here was written for separateDialCode:true,
   where the dial code was a separate chip — it forced width:auto and flex:1 1 auto
   on the input, which shrank the field well below its sibling fields. */
.dtk-tool .iti{width:100%;direction:ltr!important;position:relative;
    border:2px solid var(--dtk-bdr,#EDE8DD);border-radius:var(--dtk-r,10px);background:var(--dtk-card,#fff)}
.dtk-tool .iti .iti__selected-country{display:flex;align-items:center;height:100%;direction:ltr;background:transparent;border:none}
/* The number input fills the wrapper; no border of its own (the wrapper draws it). */
.dtk-tool .iti input[type=tel],
.dtk-tool .iti .iti__tel-input{direction:ltr!important;text-align:left!important;
    border:none!important;background:transparent!important;border-radius:0!important;
    padding-top:12px!important;padding-bottom:12px!important;padding-right:14px!important;
    margin:0!important;box-shadow:none!important;outline:none!important}
.dtk-tool .iti input[type=tel]:focus{outline:none!important;box-shadow:none!important}

/* Dropdown panel — can render inline OR in a body-level portal (.iti--container).
   Target both so styling + LTR apply everywhere. z-index high to clear Elementor popups. */
.iti--container,.dtk-tool .iti__dropdown-content{direction:ltr!important;z-index:2147483000}
.iti__dropdown-content{font-family:var(--dtk-fb,inherit);border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.16);border:1px solid #e5e5e5;background:#fff;min-width:280px;max-width:340px}

/* Search box at top of dropdown — lay the magnifier icon, input and clear (×) button
   out in a row so they never overlap (iti renders all three inside .iti__search-input-wrapper). */
.iti__search-input-wrapper{display:flex!important;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid #eee;direction:ltr}
.iti__search-input-wrapper .iti__search-icon{flex:0 0 auto;display:flex;align-items:center;color:#999}
.iti__search-input{font-family:var(--dtk-fb,inherit);direction:ltr;text-align:left;padding:4px 2px;font-size:14px;border:none;border-bottom:none;flex:1 1 auto;min-width:0;width:auto;box-sizing:border-box;background:transparent}
.iti__search-input:focus{outline:none}
.iti__search-input-wrapper .iti__search-clear{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;color:#999}

/* Country rows: flag | name | (dial code) | check — left to right */
.iti__country-list{direction:ltr}
.iti__country{display:flex!important;align-items:center;gap:8px;padding:8px 14px!important;text-align:left;direction:ltr}
.iti__country .iti__flag{order:0;margin:0;flex:0 0 auto}
.iti__country .iti__country-name{order:1;flex:1 1 auto;text-align:left}
.iti__country .iti__dial-code{order:2;color:#999;flex:0 0 auto}
.iti__country .iti__country-check{order:3;margin-left:auto;flex:0 0 auto}
.iti__country.iti__highlight{background:#f0f0f0}
.iti__country:hover{background:#f5f5f5;cursor:pointer}

/* Mobile: prevent iOS zoom-on-focus + keep dropdown within viewport */
@media(max-width:480px){
  .dtk-tool .iti input[type=tel]{font-size:16px!important}
  .iti__dropdown-content{min-width:240px;max-width:90vw}
}

/* SEARCHABLE DROPDOWN (combobox) — v12.13 */
.dtk-combo{position:relative;width:100%}
.dtk-combo-input{width:100%;padding:12px 36px 12px 16px;font-size:var(--dtk-fs-inp,14px);border:2px solid var(--dtk-bdr);border-radius:var(--dtk-r);background:var(--dtk-card);color:var(--dtk-txt);font-family:var(--dtk-fb);direction:inherit;box-sizing:border-box;cursor:text}
.dtk-combo-input:focus{outline:none;border-color:var(--dtk-p)}
.dtk-combo-caret{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:14px;color:var(--dtk-mut);font-size:12px;pointer-events:auto;cursor:pointer;transition:transform .15s}
.dtk-combo.is-open .dtk-combo-caret{transform:translateY(-50%) rotate(180deg)}
.dtk-combo-list{position:fixed;z-index:2147483000;max-height:260px;overflow-y:auto;background:var(--dtk-card,#fff);border:2px solid var(--dtk-bdr,#ddd);border-radius:var(--dtk-r,8px);box-shadow:0 8px 24px rgba(0,0,0,.18);direction:inherit}
.dtk-combo-opt{padding:10px 16px;font-size:var(--dtk-fs-inp,14px);font-family:var(--dtk-fb,inherit);color:var(--dtk-txt,#222);cursor:pointer;direction:inherit;text-align:inherit}
.dtk-combo-opt:hover,.dtk-combo-opt.is-hi{background:var(--dtk-hvbg,rgba(0,0,0,.06));color:var(--dtk-hvtxt,var(--dtk-txt,#222))}
.dtk-combo-opt.is-sel{font-weight:700}
.dtk-combo-empty{padding:12px 16px;font-size:var(--dtk-fs-inp,13px);color:var(--dtk-mut,#888);font-style:italic;font-family:var(--dtk-fb,inherit)}

/* TABLET-AND-LOWER option-box optimization (v12.15.4) — raised 520px → 820px */
@media (max-width:820px){
    .dtk-opt{padding:12px 12px;font-size:calc(var(--dtk-fs-opt,14px) * 0.95);line-height:1.25;word-break:break-word;hyphens:auto}
    /* Square boxes: keep text centered + let it wrap onto 2 lines instead of clipping */
    .dtk-opts[style*="grid"] .dtk-opt{min-height:44px;overflow:visible}
}
@media (max-width:380px){
    .dtk-opt{padding:11px 10px}
    /* Square tiles on very small screens: relax the strict 1:1 so labels fit */
    .dtk-opts .dtk-opt[style*="aspect-ratio"]{aspect-ratio:auto !important;min-height:64px}
}

/* TABLET-AND-LOWER form + phone-field optimization (v12.15.4 → v12.16.0)
   Padding is now branding-controlled (--dtk-form-px-d desktop / --dtk-form-px-m mobile).
   The phone field keeps the country CODE visible but compact: small font + narrow country
   column so the number input still stretches to match the other full-width fields. */
@media (max-width:820px){
    /* Branding-controlled mobile side padding (fields get wider as this drops) */
    .dtk-form{padding-left:var(--dtk-form-px-m,16px);padding-right:var(--dtk-form-px-m,16px)}
    /* Stack ALL form fields full-width so each (esp. the phone) gets the whole row */
    .dtk-form-field{min-width:100%!important;flex:1 1 100%!important;max-width:100%}
    /* 16px stops iOS zooming the page when the number field takes focus. */
    .dtk-tool .iti input[type=tel],
    .dtk-tool .iti .iti__tel-input{font-size:16px}
}

/* Grouped step screen — several questions shown together (v12.22) */
.dtk-group .dtk-gq{margin-bottom:18px}
.dtk-group .dtk-gq:last-of-type{margin-bottom:14px}
.dtk-group .dtk-gq .dtk-q{margin-bottom:8px}
.dtk-group .dtk-gq+.dtk-gq{padding-top:16px;border-top:1px solid var(--dtk-bdr)}

/* Back button on small screens: stays on the action row when there's space, otherwise wraps
   to its own full-width line with a comfortable tap target (v12.24). */
@media (max-width:520px){
    .dtk-tool button + .dtk-nav{margin:0}
    .dtk-nav-back{min-height:44px;padding:10px 12px;font-size:13px}
    /* If the primary button is full-width the pair can't share a row — let Back drop below it. */
    .dtk-tool .dtk-flow-next{max-width:100%}
}

/* Auto-submitted form (everything was collected in the steps): the container stays in place so
   the success message / error can render into it, but its inputs are hidden (v12.24.5). */
.dtk-form.dtk-form-auto .dtk-form-fields,
.dtk-form.dtk-form-auto .dtk-terms,
.dtk-form.dtk-form-auto .dtk-form-actions{display:none!important}
.dtk-auto-sending{text-align:center;color:var(--dtk-mut);font-size:13px;font-family:var(--dtk-fb);padding:6px 0}

/* === SMART PHONE FIELD (v12.26) ===========================================
   separateDialCode is now OFF: the code lives inside the input, so the old
   flex/dial-code chip rules no longer apply. The country button is a flag +
   caret only, and the number input owns the rest of the row. */
/* UNSCOPED on purpose: the widget also runs inside Elementor forms, where none
   of the .dtk-* wrappers exist. The library ships `.iti{display:inline-block}`
   with the input at `min-width:100%` — an auto-width parent sized by a child
   asking for 100% of it, which collapses to the content width (a field showing
   just "+9"). JS adoptLayout() copies the input's real margins/flex onto the
   wrapper; these are the baseline so it is never narrower than its row. */
.iti{display:block;width:100%}
/* Deliberately NOT setting width or box-sizing on the input: it must keep the
   box model the surrounding design gave it, or it renders a different size to
   its sibling fields (a content-box theme loses its padding width). The library
   already applies min-width:100%, which fills the wrapper either way. */
.dtk-tool .iti{direction:ltr!important}

/* === Theme-proof widget chrome ===
   `.iti__selected-country` is a real <button>, so ANY host rule along the lines of
   `.elementor-form button{border:2px solid …}` paints a box around the flag — which is
   exactly what "the country code field suddenly has a border" is. A reset for it existed
   but was scoped to `.dtk-tool`, which does not exist inside an Elementor form: the same
   scoping mistake v12.26.1 fixed for the wrapper, on a property that was missed.
   Scope here is `.dtk-iti` — the containerClass this plugin passes to every widget it
   creates — so it covers the plugin's own tools AND Elementor forms, while never touching
   another plugin's intl-tel-input on the same page. Values mirror the library's own
   defaults, so this restores the intended look rather than inventing one. */
.iti.dtk-iti .iti__selected-country,
.iti.dtk-iti button.iti__selected-country{
    background:none!important;border:0!important;box-shadow:none!important;
    border-radius:0!important;margin:0!important;padding:0!important;outline-offset:0!important;
    width:auto!important;height:100%!important;min-width:0!important;min-height:0!important;
    font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;
    line-height:inherit!important;color:inherit!important;text-transform:none!important;
    letter-spacing:normal!important;text-decoration:none!important;transform:none!important}
/* The library puts its hover tint on -primary, so leaving that alone keeps the affordance. */
.iti.dtk-iti .iti__selected-country:hover,
.iti.dtk-iti .iti__selected-country:focus{background:none!important;box-shadow:none!important}
.iti.dtk-iti .iti__selected-country-primary{
    padding:0 var(--iti-arrow-padding,7px) 0 var(--iti-spacer-horizontal,10px)!important}
.iti.dtk-iti .iti__country-container{padding:var(--iti-border-width,1px)!important;margin:0!important}
/* Same problem inside the dropdown, which is often portaled to <body> and so escapes
   .dtk-iti entirely — these two are buttons as well.
   SPECIFICITY MATTERS HERE: between two !important declarations the more specific one
   wins, so a bare `.iti__search-clear` (0,1,0) still loses to a theme's
   `.elementor-form button` (0,1,1). Each selector below is (0,2,0) so it beats the
   single-class-plus-element shape themes actually use. */
.iti .iti__search-clear,.iti--container .iti__search-clear,.iti__search-input-wrapper .iti__search-clear,
.iti .iti__globe,.iti--container .iti__globe,.iti__search-input-wrapper .iti__globe{
    background:transparent!important;border:0!important;box-shadow:none!important;
    min-width:0!important;min-height:0!important;font-weight:inherit!important;
    text-transform:none!important;letter-spacing:normal!important}

/* Country search box. intl-tel-input positions the magnifier and clear button
   with single-class rules, so any theme rule styling every input or every svg
   outranks them — the icon ends up sitting on top of the placeholder text and
   the clear button renders at its intrinsic size. Pinned explicitly so the text
   always starts after the icon. */
.iti__search-input-wrapper{position:relative!important;display:flex!important;align-items:center!important}
.iti__search-icon{position:absolute!important;left:12px!important;right:auto!important;top:50%!important;
  transform:translateY(-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:17px!important;height:17px!important;margin:0!important;padding:0!important;pointer-events:none!important}
.iti__search-icon svg,.iti__search-icon-svg{width:17px!important;height:17px!important;min-width:17px!important;flex:0 0 17px!important;display:block!important}
.iti__search-input{width:100%!important;height:auto!important;min-height:0!important;margin:0!important;
  padding:11px 42px 11px 41px!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;font-size:14px!important;line-height:1.3!important}
.iti__search-clear{position:absolute!important;right:6px!important;left:auto!important;top:50%!important;
  transform:translateY(-50%)!important;width:26px!important;height:26px!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:5px!important;border:0!important;border-radius:6px!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.iti__search-clear:hover,.iti__search-clear:focus-visible{background:rgba(0,0,0,.06)!important;outline:none!important}
.iti__search-clear svg,.iti__search-clear-svg{width:15px!important;height:15px!important;min-width:15px!important;flex:0 0 15px!important;display:block!important}

/* Error state for the Elementor integration (the tools use .dtk-field-error). */
/* Elementor field groups are flex containers, so an appended message would sit
   NEXT TO the field instead of under it. flex-basis forces its own row; the
   colour is inherited from the theme where it defines one. */
.dna-phone-error{display:none;width:100%;flex:0 0 100%;order:99;color:#C43B3B;
  font-size:12px;margin-top:4px;line-height:1.4;text-align:start}
.dna-phone-invalid,.dna-phone-invalid input{border-color:#C43B3B!important}

@media (max-width:520px){
  /* 16px keeps iOS from zooming the page when the search box takes focus. */
  .iti__search-input{min-height:46px!important;padding:13px 46px 13px 44px!important;font-size:16px!important}
  .iti__search-icon{left:14px!important}
  .iti__search-clear{right:8px!important;width:30px!important;height:30px!important}
}

/* One-off notice when a deleted dial code is put back. Deliberately muted, not
   an error colour — nothing went wrong, we are explaining what we did (v12.26.2). */
.dna-phone-hint{display:block;width:100%;flex:0 0 100%;order:98;
  margin-top:4px;font-size:11.5px;line-height:1.4;opacity:.85;
  color:var(--dtk-mut,#8E8EA0);text-align:start}