/* tb-build car-trip-cost-calculator c75c7ec5f8d8 */
/* car-trip-cost-calculator — ToolBoss deployment build. Source of truth: delivery/apps/car-trip-cost-calculator/app.css */
/* Fonts: same-origin WOFF2 uploaded through the WP Font Library (/wp-content/uploads/fonts). */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('/wp-content/uploads/fonts/playfair-display-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('/wp-content/uploads/fonts/playfair-display-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url('/wp-content/uploads/fonts/playfair-display-cyrillic-italic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url('/wp-content/uploads/fonts/playfair-display-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/wp-content/uploads/fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/wp-content/uploads/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

#js-tool-container-car-trip-cost-calculator .cta { --cta-bg:#f6f3ee; --cta-card:#fffdf9; --cta-ink:#221d17; --cta-mute:#7a7268; --cta-soft:#b3ab9e; --cta-line:#e7e0d4; --cta-line2:#d8cfc0; --cta-segbg:#f0e9dc; --cta-terra:#b0562f; --cta-terra-soft:#f6e7dd; --cta-graphite:#5d554a; --cta-roadbg:#e9dfcf; --cta-roadline:#f1ebdf; --cta-bad:#a33524; --cta-badbg:#fbeeea; --cta-serif:'Playfair Display',Georgia,serif; --cta-sans:'Manrope',system-ui,sans-serif; color:var(--cta-ink); font:15px/1.45 var(--cta-sans); font-variant-numeric:tabular-nums; }
#js-tool-container-car-trip-cost-calculator .cta, #js-tool-container-car-trip-cost-calculator .cta *, #js-tool-container-car-trip-cost-calculator .cta *::before, #js-tool-container-car-trip-cost-calculator .cta *::after { box-sizing:border-box; }
html[data-theme="dark"] #js-tool-container-car-trip-cost-calculator .cta { --cta-bg:#171310; --cta-card:#211b15; --cta-ink:#f0eae1; --cta-mute:#a89e91; --cta-soft:#7d7466; --cta-line:#37302a; --cta-line2:#4a4239; --cta-segbg:#2c2620; --cta-terra:#d97b4a; --cta-terra-soft:#3a2a20; --cta-graphite:#c8bfb2; --cta-roadbg:#2f2822; --cta-roadline:#3a322b; --cta-bad:#e08a77; --cta-badbg:#33201b; }
#js-tool-container-car-trip-cost-calculator .cta button { font:inherit; }
#js-tool-container-car-trip-cost-calculator .cta-grid { display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:24px; align-items:stretch; }
#js-tool-container-car-trip-cost-calculator .cta-card { background:var(--cta-card); border:1px solid var(--cta-line); border-radius:22px; box-shadow:0 1px 2px rgba(34,29,23,.04),0 18px 44px -28px rgba(34,29,23,.18); }
#js-tool-container-car-trip-cost-calculator .cta-left { display:flex; flex-direction:column; }
#js-tool-container-car-trip-cost-calculator .cta-head { padding:20px 28px 14px; border-bottom:1px solid var(--cta-line); }
#js-tool-container-car-trip-cost-calculator .cta-head .route { display:flex; align-items:baseline; gap:12px; }
#js-tool-container-car-trip-cost-calculator .cta-head .route b { font:700 26px/1.15 var(--cta-serif); letter-spacing:.01em; }
#js-tool-container-car-trip-cost-calculator .cta-head .route em { font-style:normal; color:var(--cta-terra); }
#js-tool-container-car-trip-cost-calculator .cta-head .route .arr { flex:none; width:34px; height:2px; background:var(--cta-line2); position:relative; top:-6px; }
#js-tool-container-car-trip-cost-calculator .cta-head .route .arr::after { content:""; position:absolute; right:-1px; top:-3px; border-left:7px solid var(--cta-line2); border-top:4px solid transparent; border-bottom:4px solid transparent; }
#js-tool-container-car-trip-cost-calculator .cta-head .rt { margin:8px 0 0; font-size:12.5px; color:var(--cta-mute); }
#js-tool-container-car-trip-cost-calculator .cta-total { display:flex; align-items:baseline; margin-top:10px; }
#js-tool-container-car-trip-cost-calculator .cta-total .lab { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cta-mute); max-width:170px; line-height:1.5; }
#js-tool-container-car-trip-cost-calculator .cta-total .val { margin-left:auto !important; display:flex !important; align-items:baseline !important; gap:8px !important }
#js-tool-container-car-trip-cost-calculator .cta-total .val b { font:700 46px/1 var(--cta-serif) !important; letter-spacing:-.01em !important; white-space:nowrap !important }
#js-tool-container-car-trip-cost-calculator .cta-total .val span { font:600 20px var(--cta-serif) !important; color:var(--cta-mute) !important }
#js-tool-container-car-trip-cost-calculator .cta-road { padding:12px 28px 2px; }
#js-tool-container-car-trip-cost-calculator .cta-road svg { display:block; width:100%; height:auto; }
#js-tool-container-car-trip-cost-calculator .cta-roadcap { margin:2px 8px 0; text-align:center; font:600 12px/1.4 var(--cta-sans); color:var(--cta-mute); }
#js-tool-container-car-trip-cost-calculator .cta-arts { padding:6px 28px 18px; display:flex; flex-direction:column; gap:8px; }
#js-tool-container-car-trip-cost-calculator .cta-art { border:1px solid var(--cta-line); border-radius:14px; padding:9px 14px 8px; background:var(--cta-card); }
#js-tool-container-car-trip-cost-calculator .cta-art .r1 { display:flex; align-items:baseline; gap:8px; }
#js-tool-container-car-trip-cost-calculator .cta-art .r1 .dot { flex:none; width:10px; height:10px; border-radius:3px; margin-right:2px; align-self:center; }
#js-tool-container-car-trip-cost-calculator .cta-art .r1 .n { font-weight:700; font-size:14px; }
#js-tool-container-car-trip-cost-calculator .cta-art .r1 .s { font-size:12px; color:var(--cta-mute); }
#js-tool-container-car-trip-cost-calculator .cta-art .r1 .v { margin-left:auto; font:700 17px var(--cta-sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
#js-tool-container-car-trip-cost-calculator .cta-art .r1 .v.mut { color:var(--cta-soft); }
#js-tool-container-car-trip-cost-calculator .cta-art .bar { margin-top:6px; height:6px; border-radius:99px; background:var(--cta-roadline); overflow:hidden; }
#js-tool-container-car-trip-cost-calculator .cta-art .bar b { display:block; height:100%; border-radius:99px; transition:width .3s; }
#js-tool-container-car-trip-cost-calculator .cta-art .r2 { display:flex; gap:14px; margin-top:5px; font:600 11.5px var(--cta-sans); color:var(--cta-mute); font-variant-numeric:tabular-nums; flex-wrap:wrap; }
#js-tool-container-car-trip-cost-calculator .cta-chips { display:flex; gap:10px; margin:2px 28px 22px; }
#js-tool-container-car-trip-cost-calculator .cta-chip { flex:1; border-radius:14px; padding:10px 14px; background:var(--cta-graphite); color:var(--cta-card); }
#js-tool-container-car-trip-cost-calculator .cta-chip.alt { background:var(--cta-terra); }
#js-tool-container-car-trip-cost-calculator .cta-chip .t { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.75; }
#js-tool-container-car-trip-cost-calculator .cta-chip .v { margin-top:4px; font:700 19px var(--cta-sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
#js-tool-container-car-trip-cost-calculator .cta-ctl { padding:20px 24px 16px; display:flex; flex-direction:column; }
#js-tool-container-car-trip-cost-calculator .cta-cap { margin:0 0 12px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cta-mute); }
#js-tool-container-car-trip-cost-calculator .cta-cap.later { margin-top:13px; }
#js-tool-container-car-trip-cost-calculator .cta-seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:13px; background:var(--cta-segbg); margin-bottom:13px; }
#js-tool-container-car-trip-cost-calculator .cta-segb { padding:9px 6px; border:0; border-radius:9px; text-align:center; font-weight:700; font-size:13px; color:var(--cta-mute); background:transparent; cursor:pointer; }
#js-tool-container-car-trip-cost-calculator .cta-segb small { display:block; font-weight:600; font-size:10.5px; color:inherit; opacity:.65; margin-top:1px; }
#js-tool-container-car-trip-cost-calculator .cta-segb.is-on { background:var(--cta-card); color:var(--cta-ink); box-shadow:0 1px 2px rgba(34,29,23,.12); }
#js-tool-container-car-trip-cost-calculator .cta-f { margin-bottom:10px; min-width:0; }
#js-tool-container-car-trip-cost-calculator .cta-f .lab { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; gap:6px; }
#js-tool-container-car-trip-cost-calculator .cta-f .lab span { font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--cta-mute); }
#js-tool-container-car-trip-cost-calculator .cta-f .lab span label { font:inherit !important; letter-spacing:inherit !important; text-transform:inherit !important; color:inherit !important }
#js-tool-container-car-trip-cost-calculator .cta-f .lab em { font-style:normal; font-size:10.5px; color:var(--cta-soft); white-space:nowrap; }
#js-tool-container-car-trip-cost-calculator .cta-in { height:47px; display:flex; align-items:center; border:1.5px solid var(--cta-line2); border-radius:13px; background:var(--cta-card); transition:border-color .15s, box-shadow .15s; }
#js-tool-container-car-trip-cost-calculator .cta-in:focus-within { border-color:var(--cta-terra); box-shadow:0 0 0 4px rgba(176,86,47,.16); }
#js-tool-container-car-trip-cost-calculator .cta-in input { flex:1 !important; min-width:0 !important; width:100% !important; height:100% !important; padding:0 8px 0 15px !important; border:0 !important; background:transparent !important; color:var(--cta-ink) !important; font:700 20px/1 var(--cta-sans) !important; letter-spacing:-.01em !important; font-variant-numeric:tabular-nums !important; outline:none !important }
#js-tool-container-car-trip-cost-calculator .cta-in input::-webkit-outer-spin-button, #js-tool-container-car-trip-cost-calculator .cta-in input::-webkit-inner-spin-button { -webkit-appearance:none !important; margin:0 !important }
#js-tool-container-car-trip-cost-calculator .cta-in input[type=number] { -moz-appearance:textfield !important; appearance:textfield !important }
#js-tool-container-car-trip-cost-calculator .cta-in i { font-style:normal; color:var(--cta-mute); font-size:12px; font-weight:600; padding-right:14px; white-space:nowrap; }
#js-tool-container-car-trip-cost-calculator .cta-in.is-bad { border-color:var(--cta-bad); box-shadow:0 0 0 4px rgba(163,53,36,.13); }
#js-tool-container-car-trip-cost-calculator .cta-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#js-tool-container-car-trip-cost-calculator .cta-two-end { margin-bottom:0; }
#js-tool-container-car-trip-cost-calculator .cta-note { margin-top:auto; padding-top:14px; border-top:1px dashed var(--cta-line2); font-size:12px; line-height:1.5; color:var(--cta-mute); }
#js-tool-container-car-trip-cost-calculator .cta-errs { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
#js-tool-container-car-trip-cost-calculator .cta-errs p { margin:0; font-size:12.5px; line-height:1.45; font-weight:600; color:var(--cta-bad); }
#js-tool-container-car-trip-cost-calculator .cta-left.is-ghost .cta-arts, #js-tool-container-car-trip-cost-calculator .cta-left.is-ghost .cta-total, #js-tool-container-car-trip-cost-calculator .cta-left.is-ghost .cta-road, #js-tool-container-car-trip-cost-calculator .cta-left.is-ghost .cta-chips { opacity:.5; }
#js-tool-container-car-trip-cost-calculator .cta-ghost-badge { display:inline-block; margin-left:10px; padding:3px 9px; border:1px dashed var(--cta-line2); border-radius:999px; font:600 11px var(--cta-sans); letter-spacing:.04em; color:var(--cta-mute); text-transform:none; vertical-align:6px; white-space:nowrap; }
#js-tool-container-car-trip-cost-calculator .cta-roadsvg .km { font:700 11.5px var(--cta-sans); fill:var(--cta-mute); }
@media (max-width:1020px) {
  #js-tool-container-car-trip-cost-calculator .cta-grid { grid-template-columns:minmax(0,1fr); }
  #js-tool-container-car-trip-cost-calculator .cta-grid > * { min-width:0; }
  #js-tool-container-car-trip-cost-calculator .cta-ctl { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; align-content:start; }
  #js-tool-container-car-trip-cost-calculator .cta-ctl > .cta-cap { grid-column:1 / -1; }
  #js-tool-container-car-trip-cost-calculator .cta-ctl > .cta-seg { grid-column:1 / -1; }
  #js-tool-container-car-trip-cost-calculator .cta-ctl > .cta-note { grid-column:1 / -1; }
  #js-tool-container-car-trip-cost-calculator .cta-ctl > .cta-errs { grid-column:1 / -1; }
}
@media (max-width:640px) {
  #js-tool-container-car-trip-cost-calculator .cta-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  #js-tool-container-car-trip-cost-calculator .cta-head { padding:18px 20px 12px; }
  #js-tool-container-car-trip-cost-calculator .cta-road { padding:10px 16px 0; }
  #js-tool-container-car-trip-cost-calculator .cta-arts { padding:4px 16px 14px; }
  #js-tool-container-car-trip-cost-calculator .cta-chips { margin:2px 16px 16px; flex-direction:column; }
  #js-tool-container-car-trip-cost-calculator .cta-ctl { display:block; padding:18px 20px 14px; }
  #js-tool-container-car-trip-cost-calculator .cta-total .val b { font-size:36px !important }
  #js-tool-container-car-trip-cost-calculator .cta-head .route b { font-size:21px; }
}
@media (max-width:390px) {
  #js-tool-container-car-trip-cost-calculator .cta-two { grid-template-columns:1fr; gap:0; }
  #js-tool-container-car-trip-cost-calculator .cta-chip .v { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) {
  #js-tool-container-car-trip-cost-calculator .cta * { transition:none !important; }
}

/* ===== ToolBoss host integration (id-scoped) ===== */
/* 1. Wrapper neutralised: the block is the tool itself, no theme card around it. Focus mode («На весь экран») keeps its own padding. */
#js-tool-container-car-trip-cost-calculator:not(.tb-focus-mode) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; overflow: visible !important; contain: layout style !important; }
#js-tool-container-car-trip-cost-calculator > .js-premium-app-html-content { display: contents; padding: 0 !important; background: transparent !important; }
/* 1b. Focus mode: core.min.css forces `background:0 0!important` on `:has(.tb-zone)` wrappers — paint the fixed overlay with the page background. */
#js-tool-container-car-trip-cost-calculator.tb-focus-mode { background: var(--bg0, #f4f5f7) !important; }
html[data-theme="dark"] #js-tool-container-car-trip-cost-calculator.tb-focus-mode { background: var(--bg0, #0b0c10) !important; }
/* 2. .tb-zone on the app root switches the wrapper into zone layout (action links become the rounded end); the zone card itself is zeroed. */
#js-tool-container-car-trip-cost-calculator .tb-zone.cta { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; font-size: 1rem; line-height: 1.55; }
/* 3. Theme control resets (tools-engine / semantic-dark force these with !important). Kept at (1,0,x) specificity so app rules win. */
#js-tool-container-car-trip-cost-calculator input:where(:not([type="range"], [type="checkbox"], [type="radio"])), #js-tool-container-car-trip-cost-calculator :where(select, textarea) { height: auto !important; border-radius: 0 !important; padding: 1px 2px !important; font-weight: inherit !important; }
#js-tool-container-car-trip-cost-calculator :where(select) { border-radius: 8px !important; }
#js-tool-container-car-trip-cost-calculator :where(input, select, textarea):focus { background-color: transparent !important; box-shadow: none !important; }
#js-tool-container-car-trip-cost-calculator :where(label) { color: inherit !important; }
#js-tool-container-car-trip-cost-calculator :where(table, thead, tbody, tr, th, td) { color: inherit; background: transparent; }
#js-tool-container-car-trip-cost-calculator :where([class*="val"], [class*="result"], [id*="res"]) { line-height: inherit !important; max-width: none !important; overflow-wrap: normal !important; word-break: normal !important; font-variant-numeric: inherit !important; }