/* === Tooltip v10 (robust bubble inside modal) === */
#calc.modal .tip::before{
  content: "i";
  display:inline-block;
  font-weight:700;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1;
}
#calc.modal .tip::after{ display:none !important; }

#calc.modal #calcTipBubble{
  position:absolute;
  left: 0;
  top: 0;
  max-width: min(340px, 86vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8f8f8;
  border: 1px solid rgba(0,0,0,.08);
  color: #222;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,6px,0);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 999999;
  pointer-events: none;
  text-align: justify;
  hyphens: auto;
  overflow-wrap: anywhere;
}
#calc.modal #calcTipBubble.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
}

.progress {
	width: 100%;
	max-width: 100%;
	color:#aaa;
}
.progress span {
	display: inline-block;
	padding: 0 5px;
	color:#aaa;
}
.progress span.active {
	color:#000;
}
.prog-bar {
	width: 100%;
	height: 10px;
	border:1px solid #ccc;
	border-radius: 4px;
	background-color: #f0f0f0;
	position: relative;
}
.prog-bar .bar-val {
    transition: all .3s ease;
    width: 0%;
    height: 10px;
    background-color: #C02122;
    border: 1px solid #600a0b;
    position: relative;
    left: -1px;
    top: -1px;
    border-radius: 4px;
    box-shadow:0px 1px 0px rgb(255 255 255 / 30%) inset;
}

.p1 .prog-bar .bar-val {width: 25%;}
.p2 .prog-bar .bar-val {width: 50%;}
.p3 .prog-bar .bar-val {width: 75%;}
.p4 .prog-bar .bar-val {width: 100%;}
.p7 .prog-bar .bar-val {width: 100%;}

.form-area {
    position: relative;
    display: flex;
    padding: 45px 0;
    align-items: center;
    height: max-content;
    min-height: 100%;
}
.calc-text {
	padding: 10px 0;
	font-size: 20px;
	text-transform: uppercase;
}

.form-area > * {
	padding: 30px 0;
	transition: all .4s ease;
	position: absolute;
	top: 0;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	transform: translate3d(0,-50px,0);
	flex: 0 0 100%;
	width: 100%;
}

.form-area > * p {
	margin: 0;
    font-weight: bold;
    padding: 15px 0;
}

.p1 .form-area > .p1,
.p2 .form-area > .p2,
.p3 .form-area > .p3,
.p4 .form-area > .p4,
.p5 .form-area > .p5,
.p6 .form-area > .p6,
.p7 .form-area > .p7 {
	visibility: visible;
	transform: translate3d(0px,0px,0);
	opacity: 1;
	z-index: 1;
}
.p7 .form-area > .p7 {
    width: 100%;
    text-align: center;
        background: #f5f5f5;
}
.p7 .form-area > .p7  h2 {
    margin-bottom: 0px;
    padding-bottom: 0px;
}


form .buts {
padding-top: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
form .buts > .next,form .buts > [type=submit]{
	margin-left: auto;
}
form .buts > * {
	transition: all .3s ease;
	display: inline-block;	
	padding: 0 45px;
	line-height: 45px;
	color:#C02122;
	border-radius: 30px;
	background-color: transparent!important;
	border:1px solid #C02122;
	    font-family: calibri;
	        font-size: 15px;
    letter-spacing: 0px;
}
form .buts > *:hover {
	background-color: #C02122!important;
	color:#fff;
	cursor: pointer;
}
form .buts > *:focus,.form-control input:focus {
	outline: none;
}

/* --- Compact modal UX overrides (v1) --- */
#calc.modal{
  width: min(640px, calc(100% - 32px));
  max-height: none;
  overflow: hidden;
  padding: 18px 18px 14px;
  border-radius: 16px;
  box-sizing: border-box;
  --calc-scale: 1;
}
#calc.modal .title{
  margin: 0 0 14px 0;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
#calc.modal .progress{
  margin: 0 0 12px 0;
}
#calc.modal .calc-text{
  padding: 0 0 10px 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
}
#calc.modal .prog-bar{
  height: 8px;
  border-radius: 999px;
}
#calc.modal .prog-bar .bar-val{
  height: 8px;
  border-radius: 999px;
  box-shadow: none;
}
#calc.modal .form-area{
  position: relative;
  min-height: 280px;
}
#calc.modal .form-area > *{
  padding: 10px 0 0 0;
  transform: translate3d(0,-14px,0);
}
#calc.modal p.text{
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: #222;
}
#calc.modal .label-control{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-height: 44px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fafafa;
  margin: 6px 0;
}
#calc.modal .label-control:hover{

  border-color: #d7d7d7;
  background: #f7f7f7;
}
#calc.modal .label-control input[type="radio"]{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
}
#calc.modal .label-control label{
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
}
#calc.modal .buts{
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
#calc.modal .buts > *{
  padding: 0 22px;
  line-height: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 16px;
}
#calc.modal .buts > *.prev{
  opacity: 0.9;
}
#calc.modal .buts > *.next{
  font-weight: 700;
}
#calc.modal .buts > *:active{
  transform: translateY(1px);
}
@media (max-width: 520px){
  #calc.modal{
    padding: 18px 16px 14px;
  }
  #calc.modal .title{
    font-size: 26px;
  }
  #calc.modal .form-area{
    min-height: 300px;
  }
  #calc.modal .buts{
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #calc.modal .buts > *{
    width: 100%;
    text-align: center;
  }
}


/* --- Quiz layout v2 (4 steps + price block) --- */
#calc.modal .q-block{ margin: 0 0 10px 0; }
#calc.modal .q-title{ font-size: 12.5px; line-height: 1.2; color: #666; margin: 0 0 6px 0; font-weight: 600; }
#calc.modal .q-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#calc.modal .q-grid .label-control{ margin: 0; }
#calc.modal .price-box{ border: 1px solid #e9e9e9; border-radius: 14px; padding: 14px; background: #fcfcfc; margin: 0 0 14px 0; }
#calc.modal .price-title{ font-size: 13px; color: #666; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
#calc.modal .price-val{ margin-top: 6px; font-size: 30px; line-height: 1.05; font-weight: 800; color: #111; }
#calc.modal .price-suf{ font-size: 14px; font-weight: 700; color: #444; }
#calc.modal .price-note{ margin-top: 10px; font-size: 13px; line-height: 1.35; color: #666; }
#calc.modal .price-breakdown{ margin-top: 12px; padding-top: 10px; border-top: 1px solid #efefef; }
#calc.modal .bd-title{ font-size: 13px; font-weight: 700; margin: 0 0 6px 0; color: #222; }
#calc.modal .bd-list{ margin: 0; padding-left: 18px; }
#calc.modal .bd-list li{ margin: 4px 0; font-size: 13px; line-height: 1.3; color: #444; }

/* fail-safe: if step class missing, show first step */
#calc .calc-area:not(.p1):not(.p2):not(.p3):not(.p4):not(.p7) .form-area > .p1{ visibility: visible; transform: translate3d(0px,0px,0); opacity: 1; z-index: 1; }
#calc .calc-area:not(.p1):not(.p2):not(.p3):not(.p4):not(.p7) .prog-bar .bar-val{ width: 25%; }

@media (max-width: 520px){
  #calc.modal .q-grid{ grid-template-columns: 1fr; }
  #calc.modal .label-control{ padding: 8px 10px; }
}


/* step5 additions */
#calc.modal .progress{display:flex;flex-direction:column;gap:6px;}
#calc.modal .calc-live-price{font-size:14px;line-height:1.2;color:#444;}
#calc.modal .calc-live-price .cap{color:#888;}
#calc.modal .calc-live-price .val{font-weight:700;color:#111;}
#calc.modal .q-hint{margin-top:6px;margin-bottom:6px;font-size:13px;line-height:1.25;color:#888;}
#calc.modal .label-control.is-check{background:#fff;}

/* === STEP VISIBILITY HARD FIX (v6) ===
   Ensure ONLY one step is visible at a time.
   This prevents "all steps on one screen" if step-class logic breaks.
*/
#calc .calc-area .form-area .p1,
#calc .calc-area .form-area .p2,
#calc .calc-area .form-area .p3,
#calc .calc-area .form-area .p4,
#calc .calc-area .form-area .p5,
#calc .calc-area .form-area .p6,
#calc .calc-area .form-area .p7 { display:none !important; }

/* show current step by parent class */
#calc .calc-area.p1 .form-area .p1 { display:block !important; }
#calc .calc-area.p2 .form-area .p2 { display:block !important; }
#calc .calc-area.p3 .form-area .p3 { display:block !important; }
#calc .calc-area.p4 .form-area .p4 { display:block !important; }
#calc .calc-area.p5 .form-area .p5 { display:block !important; }
#calc .calc-area.p6 .form-area .p6 { display:block !important; }
#calc .calc-area.p7 .form-area .p7 { display:block !important; }

/* fail-safe: if no pX class, show step 1 */
#calc .calc-area:not(.p1):not(.p2):not(.p3):not(.p4):not(.p5):not(.p6):not(.p7) .form-area .p1 {
  display:block !important;
}


/* --- QUIZ stepper + compact hints --- */
.stepper{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:10px;}
.stepper .step-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.15);background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;user-select:none;}
.stepper .step-btn:disabled{opacity:.4;cursor:not-allowed;}
.stepper .step-val{min-width:64px;text-align:center;font-size: 15px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.stepper .unit{font-size:14px;opacity:.7;margin-left:4px;}
.calc-hint{font-size:13px;line-height:1.35;opacity:.75;margin-top:8px;}
.calc-hint ul{margin:6px 0 0 18px;padding:0;}
.calc-hint li{margin:2px 0;}
.task-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:640px){.task-grid{grid-template-columns:1fr 1fr;}}


/* STEP VISIBILITY GUARD */
.calc-area .p1, .calc-area .p2, .calc-area .p3, .calc-area .p4, .calc-area .p7{display:none;}
.calc-area.p1 .p1{display:block;}
.calc-area.p2 .p2{display:block;}
.calc-area.p3 .p3{display:block;}
.calc-area.p4 .p4{display:block;}
.calc-area.p7 .p7{display:block;}


#calc.modal .calc-scale{
  transform: scale(var(--calc-scale));
  transform-origin: top center;
}

#calc.modal .q-err{
  box-shadow: 0 0 0 2px rgba(192,33,34,.35);
  border-radius: 12px;
  padding: 8px;
}


/* UX_TIPS_AND_CLICK_V3 */
#calc.modal .q-grid,
#calc.modal .q-grid > *,
#calc.modal .calc-area,
#calc.modal .form-area{
  overflow: visible !important;
}

#calc.modal .label-control{cursor:pointer; overflow:visible; position:relative;}
#calc.modal .label-control.is-check{position:relative; z-index:1;}
#calc.modal .label-control.is-check:hover{z-index:6000;}

#calc.modal .label-control label{display:flex;align-items:center;gap:8px;width:100%;}

#calc.modal .tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  border-radius:999px;
  border:1px solid rgba(192,33,34,.5);
  color:#C02122;
  font-size:12px;
  line-height:1;
  position:relative;
  flex:0 0 18px;
  cursor:pointer;
  user-select:none;
  z-index: 7000;
}
#calc.modal .tip::after{
  content: attr(data-tip);
  position:absolute;
  left: 0;
  top: 26px;
  width: 320px;
  max-width: min(320px, 86vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.25;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index: 999999;
}
#calc.modal .tip:hover::after,
#calc.modal .tip.is-open::after{
  opacity:1;
  visibility:visible;
}
/* =========================================================
   Mobile UX polish (iOS + Android, Telegram WebView safe)
   - Prevent iOS zoom on input focus (>=16px)
   - Better viewport stability with modern svh units
   - Safer tap targets and focus visuals
   ========================================================= */

html, body {
  height: 100%;
}

body {
  min-height: 100svh;
  overscroll-behavior: contain;
  -webkit-text-size-adjust: 100%;
}

/* iOS zoom fix + comfortable tap targets inside calculator/quiz */
#calc input,
#calc textarea,
#calc select {
  font-size: 16px !important;
  line-height: 1.4;
  min-height: 44px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#calc button {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

#calc button:active {
  transform: scale(0.98);
}

/* Autofill color normalization */
#calc input:-webkit-autofill,
#calc textarea:-webkit-autofill,
#calc select:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #fff inset;
  -webkit-text-fill-color: #000;
}

/* Softer focus ring (keeps accessibility, looks modern) */
#calc input:focus,
#calc textarea:focus,
#calc select:focus {
  box-shadow: 0 0 0 1px rgba(229,57,53,0.30);
}

/* Reduce click delay / prevent double-tap zoom quirks in some WebViews */
#calc * {
  touch-action: manipulation;
}

/* Safe-area padding for iPhone home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
  #calc {
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* === TOOLTIP OVERRIDE (v7) ===
   Fix: background height not matching multiline text (seen as "pill + text below")
   Root cause: another rule sets a fixed height / overflow visible on tooltip bubble.
   This block forces the bubble to size to content and uses a solid, readable background.
*/
#calc.modal .tip[data-tip]::after{
  display:block !important;
  height:auto !important;
  min-height:unset !important;
  max-height:none !important;
  overflow:visible !important;

  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  hyphens:auto !important;
  text-align:justify !important;

  padding:12px 14px !important;
  border-radius:12px !important;

  background: #f8f8f8 !important;
  color:#222 !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#calc.modal .tip:hover::after,
#calc.modal .tip.is-open::after{
  opacity:1 !important;
  visibility:visible !important;
}

/* Ensure the icon itself is neutral "i" and not too loud */
#calc.modal .tip{
  border-color: rgba(0,0,0,.18) !important;
  color: #444 !important;
  background: #fff !important;
}

/* === TOOLTIP SMART POSITION (v9) ===
   Fixes:
   - tooltip never leaves calc modal on desktop/mobile
   - no "jumping" left/right (pixel-clamped)
   - background always matches multiline text height
   Implementation:
   - tooltip bubble is ::after with position:fixed
   - JS sets --tip-left/--tip-top/--tip-maxw per open/hover
*/
#calc.modal .tip{
  --tip-left: -9999px;
  --tip-top: -9999px;
  --tip-maxw: 320px;
}

#calc.modal .tip::after{
  position: fixed !important;
  left: var(--tip-left) !important;
  top: var(--tip-top) !important;
  width: var(--tip-maxw) !important;
  max-width: calc(100vw - 24px) !important;

  transform: none !important;

  padding: 12px 14px !important;
  border-radius: 12px !important;

  background: #f8f8f8 !important;
  color: #222 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  text-align: justify !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 999999 !important;
}

#calc.modal .tip.is-open::after,
#calc.modal .tip.is-hover::after{
  opacity: 1 !important;
  visibility: visible !important;
}

/* neutral icon */
#calc.modal .tip{
  border-color: rgba(0,0,0,.18) !important;
  color: #444 !important;
  background: #fff !important;
}

/* draw "i" even if span is empty */
#calc.modal .tip::before{
  content: "i";
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}

#calc.modal .tip:hover::after{opacity:0 !important; visibility:hidden !important;}

#calc.modal{ position: relative; }


/* === RECOVERY_V13 ===
   Disable experimental tooltip systems to avoid blocking quiz navigation.
   Tooltips will be reintroduced after core "Next" flow is confirmed stable.
*/
#calc.modal #calcTipBubble{ display:none !important; }
#calc.modal .tip::after{ display:none !important; }

/* === TOOLTIP_REENABLE_V1 ===
   Re-enable tooltips safely via a single JS bubble.
   Keeps quiz navigation intact (no overlays, pointer-events none on bubble).
*/
#calc.modal .tip::after{ display:none !important; }
#calc.modal #calcTipBubble{ display:block !important; }

#calc.modal #calcTipBubble{
  position: absolute;
  left: 0; top: 0;
  max-width: min(340px, 86vw);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248,248,248,0.98);
  border: 1px solid rgba(0,0,0,.10);
  color: #222;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,6px,0);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 999999;
  pointer-events: none;
  text-align: justify;
  hyphens: auto;
  overflow-wrap: anywhere;
}
#calc.modal #calcTipBubble.is-open{
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
}
/* === FIX_STEP3_SOTR_EXPLAIN_LAYOUT_V2_COMPACT (desktop only) === */
@media (min-width: 768px){
  #calc.modal .p3 .q-block .q-row{
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  #calc.modal .p3 .q-block .q-row .stepper[data-stepper="sotr"]{
    margin-top: 0;
    flex: 0 0 auto;
  }
  #calc.modal .p3 .q-block .q-row #sotr_explain{
    flex: 1 1 auto;
    margin: 0 !important;
    width: auto !important;
    max-width: none;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: justify;
    text-justify: inter-word;
    text-align-last: left;
    hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* === Success screen mobile UX polish (no icon), p7-only === */
@media (max-width: 640px){
  /* Success state detection relies on :has (supported in modern iOS Safari / Chromium). */
  #calc.modal:has(.calc-area.p7){
    padding: 14px 14px 12px;
  }
  #calc.modal:has(.calc-area.p7) .title{
    font-size: 28px;
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 0 0 10px 0;
    text-align: center;
  }
  /* Progress/step header are not useful on success; remove extra vertical noise */
  #calc.modal:has(.calc-area.p7) .progress,
  #calc.modal:has(.calc-area.p7) .calc-text,
  #calc.modal:has(.calc-area.p7) .prog-bar{
    display: none !important;
  }

  /* Let the success step define its own natural height */
  #calc.modal:has(.calc-area.p7) .calc-area{
    height: auto !important;
    padding: 0 0 12px 0 !important;
  }
  #calc.modal:has(.calc-area.p7) .form-area{
    padding: 18px 0 14px !important;
    align-items: center;
  }

  /* Success content card */
  #calc.modal:has(.calc-area.p7) .form-area > .p7{
    position: relative !important;
    top: auto !important;
    background: #f5f5f5 !important;
    border-radius: 18px;
    padding: 26px 18px !important;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
  }
  #calc.modal:has(.calc-area.p7) .form-area > .p7 h2{
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 12px 0;
    padding: 0;
  }
  #calc.modal:has(.calc-area.p7) .form-area > .p7 p{
    font-size: 20px;
    line-height: 1.35;
    margin: 0;
    color: #444;
  }
}