:root {
  --bg: #111211;
  --panel: #1a1c1a;
  --cream: #e9e2d5;
  --muted: #96958e;
  --orange: #f2c230;
  --line: rgba(233, 226, 213, .16);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
}

/* Header */
.header {
  position: fixed;
  z-index: 40;
  top: 0;
  width: 100%;
  padding: 24px 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(17, 18, 17, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.logo {
  color: white;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.05em;
}

.logo span {
  color: var(--orange);
}

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
  color: white;
  font-size: 12px;
}

.nav a {
  opacity: .7;
  transition: opacity .25s;
}

.nav a:hover {
  opacity: 1;
}

.header-phone {
  color: white;
  font-size: 12px;
  transition: opacity .25s;
}

.header-phone:hover {
  opacity: .7;
}

/* Calculator Page */
.calculator-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 150px 8vw 80px;
}

.calculator-header {
  grid-column: 1 / -1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.eyebrow:before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--orange);
}

.calculator-header h1 {
  font-size: clamp(42px, 6vw, 68px);
  line-height: .95;
  letter-spacing: -.06em;
  margin-bottom: 20px;
}

.calculator-header p {
  color: var(--muted);
  font-size: 16px;
  max-width: 600px;
}

/* Form Steps */
.calculator-form {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 50px;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-step h2 {
  font-size: 32px;
  margin-bottom: 30px;
  letter-spacing: -.04em;
}

/* Options Grid */
.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

/* Последний материал располагается по центру нижнего ряда */
.options-grid .option-card-last {
  grid-column: 1 / -1;
  width: calc(50% - 10px);
  justify-self: center;
}

.option-card {
  position: relative;
  cursor: pointer;
}

.option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.option-content {
  padding: 30px;
  background: var(--bg);
  border: 2px solid var(--line);
  transition: all .3s;
  min-height: 180px;
}

.option-card input:checked + .option-content {
  border-color: var(--orange);
  background: rgba(228, 119, 78, 0.05);
}

.option-card:hover .option-content {
  border-color: var(--orange);
}

.option-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.option-content h3 {
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -.03em;
}

.option-content p {
  color: var(--muted);
  font-size: 13px;
}

.price-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  background: var(--orange);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}

/* Size Inputs */
.size-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.input-group input,
.input-group textarea {
  padding: 15px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 16px;
  transition: border-color .3s;
}

.input-group input:focus,
.input-group textarea:focus {
  outline: none;
  border-color: var(--orange);
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

.checkbox-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .3s;
}

.checkbox-card:hover {
  border-color: var(--orange);
}

.checkbox-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--orange);
  cursor: pointer;
}

.checkbox-card input:checked ~ .checkbox-content {
  color: var(--cream);
}

.checkbox-content h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.checkbox-content p {
  color: var(--muted);
  font-size: 13px;
}

/* Contact Inputs */
.contact-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.full-width {
  grid-column: 1 / -1;
}

/* Result Box */
.result-box {
  padding: 30px;
  background: rgba(228, 119, 78, 0.1);
  border: 2px solid var(--orange);
  text-align: center;
  margin-bottom: 30px;
}

.result-box h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--muted);
}

.result-price {
  font-size: 48px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -.05em;
  margin-bottom: 10px;
}

.result-box p {
  color: var(--muted);
  font-size: 13px;
}

/* Privacy Checkbox */
.privacy-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  cursor: pointer;
}

.privacy-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}

.privacy-checkbox a {
  color: var(--orange);
  text-decoration: underline;
}

/* Buttons */
.step-buttons {
  display: flex;
  gap: 15px;
}

.btn-next,
.btn-prev,
.btn-submit {
  padding: 17px 30px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
}

.btn-next,
.btn-submit {
  background: var(--orange);
  color: var(--bg);
  border: 1px solid var(--orange);
}

.btn-next:hover,
.btn-submit:hover {
  background: transparent;
  color: var(--orange);
}

.btn-prev {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line);
}

.btn-prev:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.btn-submit {
  flex: 1;
}

/* Sidebar */
.calculator-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.progress-indicator {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  position: sticky;
  top: 120px;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0.4;
  transition: opacity .3s;
}

.progress-step.active {
  opacity: 1;
}

.progress-step.completed {
  opacity: 0.7;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.progress-step.active .step-number {
  border-color: var(--orange);
  color: var(--orange);
}

.step-label {
  font-size: 13px;
}

.help-box {
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.help-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.help-box p {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.help-phone {
  display: inline-block;
  padding: 12px 20px;
  background: var(--orange);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
  transition: all .3s;
}

.help-phone:hover {
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
}

/* Footer */
.footer {
  padding: 50px 8vw;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-logo {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.04em;
}

.footer-logo span {
  color: var(--orange);
}

.footer-links {
  display: flex;
  gap: 24px;
  font-size: 13px;
  flex-wrap: wrap;
}

.footer-links a {
  opacity: .7;
  transition: opacity .25s;
}

.footer-links a:hover {
  opacity: 1;
}

.footer-copy {
  color: var(--muted);
  font-size: 12px;
}


/* Step 3: одинаковый размер плашек материалов */
.form-step[data-step="3"] .material-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(112px, 1fr);
  align-items: stretch;
  gap: 16px;
}
.form-step[data-step="3"] .material-options > .option-card {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
}
.form-step[data-step="3"] .material-options > .option-card > .option-content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 112px;
  padding: 18px 14px;
  text-align: center;
}
.form-step[data-step="3"] .material-options .option-content h3 {
  margin: 0;
  line-height: 1.4;
}
.form-step[data-step="3"] .material-options .material-last {
  grid-column: auto;
  width: 100%;
  justify-self: stretch;
}

/* Step 4: grouped furniture options */
.option-sections { display:flex; flex-direction:column; gap:18px; margin-bottom:36px; }
.option-section { padding:22px; background:var(--bg); border:1px solid var(--line); }
.section-heading { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.section-index { color:var(--orange); font-size:13px; font-weight:700; letter-spacing:.08em; }
.section-heading h3 { font-size:19px; margin:0 0 3px; }
.section-heading p { color:var(--muted); font-size:12px; margin:0; }
.suboptions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.suboption-card { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px; min-height:52px; background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:border-color .2s,background .2s; }
.suboption-card input { accent-color:var(--orange); width:16px; height:16px; flex:0 0 auto; }
.suboption-card span { font-size:14px; }
.suboption-card small { width:100%; padding-left:24px; color:var(--muted); font-size:12px; }
.suboption-card:has(input:checked) { border-color:var(--orange); background:rgba(242,194,48,.07); }
.compact-section { padding:0; }
.single-option { display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer; }
.single-option input { width:18px; height:18px; accent-color:var(--orange); }
.single-option span { display:flex; flex-direction:column; gap:2px; }
.single-option strong { font-size:16px; }
.single-option small { color:var(--muted); font-size:12px; }
.countertop-grid { grid-template-columns:1fr; }
.hardware-groups { display:flex; flex-direction:column; gap:18px; }
.hardware-label { margin-bottom:10px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.premium-group { padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:768px) {
  .suboptions-grid { grid-template-columns:1fr; }
  .form-step[data-step="3"] .material-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-section { padding:16px; }
}
@media (max-width:480px) {
  .form-step[data-step="3"] .material-options { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 1200px) {
  .calculator-page {
    grid-template-columns: 1fr;
  }
  
  .calculator-sidebar {
    flex-direction: row;
  }
  
  .progress-indicator {
    position: static;
    flex: 1;
  }
  
  .help-box {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .calculator-page {
    padding: 120px 18px 60px;
  }
  
  .calculator-form {
    padding: 30px 20px;
  }
  
  .options-grid {
    grid-template-columns: 1fr;
  }
  .options-grid .option-card-last {
    grid-column: auto;
    width: 100%;
  }
  
  .size-inputs {
    grid-template-columns: 1fr;
  }
  
  .contact-inputs {
    grid-template-columns: 1fr;
  }
  
  .calculator-sidebar {
    flex-direction: column;
  }
  
  .nav {
    display: none;
  }
  
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 12px;
  }
}

/* Step 4 redesign: compact, balanced option cards */
.form-step[data-step="4"] .option-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  align-items: stretch;
}
.form-step[data-step="4"] .option-section {
  min-width: 0;
  padding: 16px;
  border-radius: 14px;
  background: var(--panel, #fff);
  box-shadow: 0 4px 18px rgba(0,0,0,.035);
}
.form-step[data-step="4"] .section-heading {
  gap: 10px;
  margin-bottom: 12px;
}
.form-step[data-step="4"] .section-index {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  border-radius: 9px;
  color: #242424;
  background: #f2c230;
  font-size: 11px;
}
.form-step[data-step="4"] .section-heading h3 { font-size: 16px; line-height: 1.25; }
.form-step[data-step="4"] .section-heading p { font-size: 11px; }
.form-step[data-step="4"] .suboptions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.form-step[data-step="4"] .suboption-card {
  position: relative;
  min-height: 46px;
  padding: 10px;
  gap: 7px;
  border-radius: 10px;
  align-content: center;
}
.form-step[data-step="4"] .suboption-card span { font-size: 12px; line-height: 1.3; }
.form-step[data-step="4"] .suboption-card small { width: auto; padding-left: 0; font-size: 11px; }
.form-step[data-step="4"] .suboption-card input { width: 14px; height: 14px; margin: 0; accent-color: #f2c230; }
.form-step[data-step="4"] .suboption-card:has(input:checked) { border-color: #e3b31d; background: rgba(242,194,48,.12); }
.form-step[data-step="4"] .compact-section { padding: 0; }
.form-step[data-step="4"] .single-option { min-height: 100%; padding: 16px; gap: 12px; }
.form-step[data-step="4"] .single-option input { accent-color: #f2c230; }
.form-step[data-step="4"] .single-option strong { font-size: 15px; }
.form-step[data-step="4"] .single-option small { font-size: 11px; }
.form-step[data-step="4"] .countertop-grid { grid-template-columns: 1fr; }
.form-step[data-step="4"] .hardware-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-step[data-step="4"] .hardware-label { margin-bottom: 8px; font-size: 10px; letter-spacing: .06em; }
.form-step[data-step="4"] .premium-group { padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 12px; }
.form-step[data-step="4"] .hardware-group .suboptions-grid { grid-template-columns: 1fr; }
.form-step[data-step="4"] .step-buttons { margin-top: 4px; }
@media (max-width: 700px) {
  .form-step[data-step="4"] .option-sections { grid-template-columns: 1fr; gap: 10px; }
  .form-step[data-step="4"] .option-section { padding: 14px; }
  .form-step[data-step="4"] .suboptions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-step[data-step="4"] .hardware-groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .form-step[data-step="4"] .suboptions-grid { grid-template-columns: 1fr; }
  .form-step[data-step="4"] .hardware-groups { grid-template-columns: 1fr; }
  .form-step[data-step="4"] .premium-group { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
}


/* Step 2: product-specific choices */
.type-specific-options { margin: 0 0 28px; }
.type-specific-options[hidden] { display: none !important; }
.choice-title { margin: 0 0 14px; font-size: 16px; color: var(--cream); }
.shape-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shape-card { position: relative; display: flex; min-height: 112px; padding: 15px 12px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.shape-card:hover { border-color: #e3b31d; transform: translateY(-2px); }
.shape-card input { position: absolute; top: 10px; left: 10px; accent-color: #f2c230; }
.shape-card:has(input:checked) { border-color: #e3b31d; background: rgba(242,194,48,.10); box-shadow: inset 0 0 0 1px #e3b31d; }
.shape-card strong { font-size: 13px; font-weight: 650; }
.shape-symbol { display: flex; align-items: center; justify-content: center; min-height: 38px; color: #f2c230; font-size: 36px; line-height: 1; font-weight: 500; }
.shape-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.other-furniture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.other-furniture-grid .other-last { grid-column: 2; }
.island-option { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 16px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.island-option input { width: 18px; height: 18px; accent-color: #f2c230; }
.island-option span { display: flex; flex-direction: column; gap: 3px; }
.island-option strong { font-size: 14px; }
.island-option small { color: var(--muted); font-size: 12px; }
@media (max-width: 768px) { .shape-grid, .other-furniture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .other-furniture-grid .other-last { grid-column: auto; } .shape-card { min-height: 100px; } }
@media (max-width: 420px) { .shape-grid { gap: 8px; } .shape-card { padding: 12px 8px; } .shape-card strong { font-size: 12px; } }

/* Обновлённые элементы калькулятора */
.material-consultation h3 { font-size: 14px; line-height: 1.35; }
.shape-symbol.icon-svg { display:flex; align-items:center; justify-content:center; }
.shape-symbol.icon-svg svg { width: 38px; height: 38px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* Mobile header and navigation */
@media (max-width: 900px) {
  .header { position: sticky; top: 0; z-index: 1200; min-height: 68px; padding: 12px 5vw; gap: 16px; background: rgba(17,18,17,.97); backdrop-filter: blur(14px); }
  .header .logo { font-size: 17px; line-height: 1.1; }
  .header .menu { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(242,194,48,.55); border-radius: 10px; color: #f2c230; background: rgba(242,194,48,.08); font-size: 25px; }
  .header .nav, .header .nav.is-open { position: absolute; top: calc(100% + 8px); right: 5vw; left: 5vw; transform: none; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px; border: 1px solid rgba(242,194,48,.25); border-radius: 14px; background: #191b19; box-shadow: 0 18px 44px rgba(0,0,0,.38); }
  .header .nav.is-open { display: flex; }
  .header .nav a { padding: 15px 3px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 15px; }
  .header .nav a:last-child { border-bottom: 0; }
}
@media (max-width: 600px) { .calculator-page { padding-left: 5vw; padding-right: 5vw; } .calculator-header h1 { font-size: clamp(30px, 8vw, 42px); } }