/* ─────────────────────────────────────────────────────────────
   Тепавица Рай — Онлайн поръчка · стилове (заключени под #tof-order)
   ───────────────────────────────────────────────────────────── */
#tof-order, #tof-order * { box-sizing: border-box; }
#tof-order {
  --teal-900:#062b3b; --teal-800:#0e4d63; --teal-700:#11627e;
  --mint-500:#00a0d0; --mint-400:#38baea; --mint-50:#e0f4fb;
  --cream:#f7f3ec; --off:#fafbfc; --white:#ffffff;
  --ink:#1a2b33; --ink-2:#38525d; --ink-3:#6a8089;
  --line:#e6ecee; --line-2:#d9e2e5; --danger:#d9534f;
  --fd:"Manrope","Inter",system-ui,sans-serif;
  --fb:"Inter",system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;
  --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --sh-3:0 14px 40px rgba(10,70,92,0.10), 0 4px 12px rgba(10,70,92,0.06);
  font-family: var(--fb); color: var(--ink); line-height: 1.55; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
#tof-order h2, #tof-order h3 { font-family: var(--fd); margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
#tof-order p { margin: 0; }
#tof-order .tof-eyebrow { font-family: var(--fm); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; color: var(--mint-400); }
#tof-order .tof-eyebrow::before { content:""; width:22px; height:1px; background: currentColor; margin-right:10px; }

#tof-order .tof-card { background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; display: grid; grid-template-columns: 1fr 1.4fr; }
@media (max-width: 900px) { #tof-order .tof-card { grid-template-columns: 1fr; } }

#tof-order .tof-aside { background: linear-gradient(170deg, var(--teal-700), var(--teal-900)); color: var(--white); padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; }
#tof-order .tof-aside::after { content:""; position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; background: radial-gradient(circle, rgba(0,160,208,0.35), transparent 65%); }
#tof-order .tof-aside h2 { color: var(--white); font-size: clamp(28px,3vw,40px); font-weight: 800; position: relative; z-index: 1; }
#tof-order .tof-aside p { color: rgba(255,255,255,0.78); position: relative; z-index: 1; }
#tof-order .tof-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
#tof-order .tof-bullets li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 14px; color: rgba(255,255,255,0.92); }
#tof-order .tof-bullets svg { color: var(--mint-400); }
#tof-order .tof-phone { margin-top: auto; padding-top: 28px; position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; }
#tof-order .tof-pico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; flex: none; }
#tof-order .tof-phone small { color: rgba(255,255,255,0.6); font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: block; }
#tof-order .tof-pnum { font-family: var(--fd); font-weight: 700; font-size: 18px; color: #fff; text-decoration: none; }

#tof-order .tof-body { padding: clamp(28px,3vw,44px); }
#tof-order .tof-steps { display: flex; gap: 6px; margin-bottom: 28px; }
#tof-order .tof-dot { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .35s ease; }
#tof-order .tof-dot.done { background: var(--mint-500); }
#tof-order .tof-dot.current { background: var(--teal-800); }
#tof-order .tof-step-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; font-family: var(--fm); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
#tof-order .tof-step-head [data-estimate-badge] { color: var(--teal-800); font-family: var(--fd); font-size: 14px; text-transform: none; letter-spacing: 0; }
#tof-order .tof-body h3 { font-size: clamp(20px,2vw,26px); font-weight: 700; margin-bottom: 18px; }
#tof-order .tof-hint { color: var(--ink-3); font-size: 14px; margin-top: -10px; margin-bottom: 18px; }

#tof-order .tof-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
#tof-order .tof-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
#tof-order .tof-field input, #tof-order .tof-field select, #tof-order .tof-field textarea {
  padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--off); font-family: var(--fb); font-size: 15px; color: var(--ink); width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
#tof-order .tof-field input:focus, #tof-order .tof-field select:focus, #tof-order .tof-field textarea:focus { outline: none; border-color: var(--teal-800); background: var(--white); }
#tof-order .tof-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { #tof-order .tof-field-row { grid-template-columns: 1fr; } }

#tof-order .tof-choice-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { #tof-order .tof-choice-grid { grid-template-columns: 1fr; } }
#tof-order .tof-choice { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; background: var(--white); text-align: left; font-family: var(--fb); color: var(--ink); transition: border-color .2s, background .2s; }
#tof-order .tof-choice:hover, #tof-order .tof-choice:focus, #tof-order .tof-choice.selected { border-color: var(--teal-800); color: var(--ink); }
#tof-order .tof-choice.selected { background: var(--mint-50); }
#tof-order .tof-choice .ico { color: var(--teal-800) !important; }
#tof-order .tof-choice b { font-family: var(--fd); font-size: 14px; color: var(--ink) !important; }
#tof-order .tof-choice span { font-size: 12px; color: var(--ink-3) !important; }
#tof-order .tof-choice:hover b, #tof-order .tof-choice:focus b, #tof-order .tof-choice.selected b { color: var(--teal-800) !important; }

#tof-order .tof-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; }
#tof-order .tof-item b { font-family: var(--fd); font-weight: 600; font-size: 14px; display: block; color: var(--ink) !important; }
#tof-order .tof-success-text b { color: var(--ink) !important; }
#tof-order .tof-item small { font-size: 12px; color: var(--ink-3); }
#tof-order .tof-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
#tof-order .tof-qty button { width: 32px; height: 32px; font-size: 16px; color: var(--ink-2); border: 0; background: transparent; cursor: pointer; line-height: 1; }
#tof-order .tof-qty button:hover { color: var(--teal-800); }
#tof-order .tof-qty input { width: 42px; text-align: center; border: 0; background: transparent; padding: 0; font-family: var(--fd); font-weight: 600; font-size: 15px; -moz-appearance: textfield; }
#tof-order .tof-qty input::-webkit-outer-spin-button, #tof-order .tof-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#tof-order .tof-estimate { margin-top: 18px; padding: 18px 20px; background: var(--cream); border-radius: var(--r-md); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#tof-order .tof-estimate b { font-family: var(--fd); font-size: 24px; font-weight: 800; color: var(--teal-800); }
#tof-order .tof-estimate small { font-size: 12px; color: var(--ink-3); display: block; }
#tof-order .tof-estimate-note { text-align: right; max-width: 170px; }
#tof-order .tof-estimate-full { width: 100%; max-width: 420px; }

#tof-order .tof-note { padding: 14px; background: var(--mint-50); border-radius: 12px; font-size: 13px; color: var(--teal-800); display: flex; gap: 10px; align-items: center; }
#tof-order .tof-error { display: none; margin-top: 14px; padding: 10px 14px; background: rgba(217,83,79,0.08); border-radius: 10px; color: var(--danger); font-size: 13px; }
#tof-order .tof-hp { position: absolute; left: -9999px; }

#tof-order .tof-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
#tof-order .tof-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); padding: 14px 22px; font-family: var(--fd); font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; transition: background .2s, box-shadow .2s, border-color .2s, color .2s; }
#tof-order .tof-primary { background: var(--teal-800); color: #fff; }
#tof-order .tof-primary:hover { background: var(--teal-900); box-shadow: var(--sh-3); }
#tof-order .tof-primary:disabled { opacity: .6; cursor: default; }
#tof-order .tof-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
#tof-order .tof-ghost:hover { border-color: var(--teal-800); color: var(--teal-800); }

#tof-order .tof-success { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 30px 20px; }
#tof-order .tof-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--mint-50); color: var(--mint-500); display: inline-flex; align-items: center; justify-content: center; }
#tof-order .tof-success-text { color: var(--ink-2); max-width: 420px; }
#tof-order .tof-success-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
#tof-order [hidden] { display: none !important; }