/* Veton Quote Flow — styles matching Drive mockup 1a */

/* ============== Configure page ============== */

.vqf-configure-header {
  border-bottom: 1px solid #ececec;
  padding: 30px 0;
  background: #fff;
}
.vqf-configure-header .title {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0;
}
.vqf-configure-header .vqf-link {
  color: #b08d57;
  text-decoration: none;
  font-size: 14px;
}
.vqf-configure-header .vqf-link:hover { text-decoration: underline; }

.vqf-configure {
  background: #fff;
  padding: 50px 0 110px;
  position: relative;
}
.vqf-configure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 991px) {
  .vqf-configure-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ----- Image column ----- */
.vqf-image-col { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
.vqf-image-main {
  display: block;
  background: #f4f4f4;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
  max-height: 60vh;
  text-decoration: none;
}
.vqf-image-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vqf-image-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vqf-image-thumb {
  display: block;
  background: #f4f4f4;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
}
.vqf-image-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 991px) {
  .vqf-image-main { max-height: 50vh; }
}

/* ----- Form column ----- */
.vqf-form-col { display: flex; flex-direction: column; }

.vqf-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 14px;
}
.vqf-hero-title {
  font-size: 38px;
  font-weight: 300;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  color: #1a1a1a;
}
.vqf-hero-tagline {
  font-size: 18px;
  font-weight: 300;
  color: #1a1a1a;
  margin: 0 0 14px;
}
.vqf-hero-from { font-size: 14px; color: #888; margin: 0; }
.vqf-hero-from #vqf-from-price { color: #1a1a1a; font-weight: 500; }

.vqf-vat-toggle {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 6px 0;
  font-family: inherit;
}
.vqf-vat-label { color: #888; transition: color 0.15s ease; line-height: 1; }
.vqf-vat-toggle[data-mode="excl"] .vqf-vat-excl { color: #1a1a1a; font-weight: 600; }
.vqf-vat-toggle[data-mode="incl"] .vqf-vat-incl { color: #1a1a1a; font-weight: 600; }
.vqf-vat-switch {
  display: inline-block;
  width: 36px; height: 20px;
  background: #1a1a1a;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
.vqf-vat-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
  display: block;
}
.vqf-vat-toggle[data-mode="incl"] .vqf-vat-knob { transform: translateX(16px); }

/* ----- Cards ----- */
.vqf-card {
  border: 1px solid #ececec;
  border-radius: 4px;
  padding: 24px 28px;
  margin: 0 0 18px 0;
  display: block;
}
.vqf-card legend {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  display: block;
  width: 100%;
}
.vqf-card-desc {
  font-size: 13px;
  color: #888;
  margin: 0 0 14px 0;
  line-height: 1.5;
}

/* Radios + checkboxes — fully replace native control */
.vqf-radio, .vqf-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 15px;
  color: #1a1a1a;
  position: relative;
  margin: 0;
}
.vqf-radio input, .vqf-check input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  appearance: none !important; -webkit-appearance: none !important;
  opacity: 0 !important; pointer-events: none !important;
}
.vqf-radio-box, .vqf-check-box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid #cfcfcf;
  background: #fff;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  box-sizing: border-box;
}
.vqf-check-box { border-radius: 3px; }
.vqf-radio input:checked + .vqf-radio-box { border-color: #b08d57; }
.vqf-radio input:checked + .vqf-radio-box::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #b08d57;
}
.vqf-check input:checked + .vqf-check-box { background: #b08d57; border-color: #b08d57; }
.vqf-check input:checked + .vqf-check-box::after {
  content: '';
  position: absolute;
  top: 2px; left: 6px;
  width: 4px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vqf-radio-label, .vqf-check-label { flex: 1; }
.vqf-extra-tag { color: #888; font-size: 14px; margin-left: 4px; }
.vqf-info {
  color: #b08d57;
  font-size: 14px;
  cursor: help;
  margin-left: 4px;
}

.vqf-help-text {
  font-size: 13px;
  color: #888;
  margin: 18px 0 0;
}
.vqf-help-text .vqf-link { color: #b08d57; }

/* ----- Sticky footer ----- */
.vqf-current-state {
  position: sticky;
  bottom: 0;
  background: #faf6ee;
  border-top: 1px solid #ece4d3;
  z-index: 50;
  margin-top: 30px;
  backdrop-filter: blur(6px);
}
.vqf-state-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
}
.vqf-selection-text { font-size: 14px; color: #1a1a1a; }
.vqf-selection-text strong { font-weight: 700; }
.vqf-estimated-text { font-size: 14px; color: #1a1a1a; flex: 1; text-align: right; }
.vqf-estimated-text .vqf-estimated-label { color: #555; }
.vqf-estimated-text .vqf-estimated-price { margin-left: 6px; font-weight: 700; }
.vqf-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #c9b287;
  color: #1a1a1a !important;
  text-decoration: none;
  padding: 14px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 0;
  transition: background-color 0.15s ease;
  min-width: 220px;
}
.vqf-add-btn:hover { background: #b8a276; }
.vqf-add-btn .vqf-arrow { font-size: 18px; }

@media (max-width: 767px) {
  .vqf-state-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .vqf-estimated-text { text-align: left; }
  .vqf-add-btn { width: 100%; justify-content: center; gap: 10px; }
}

/* ============== /inquiry/ wizard ============== */
#vqf-inquiry-app { max-width: 720px; margin: 80px auto; padding: 0 24px; font-size: 16px; line-height: 1.6; }
#vqf-inquiry-app h2 { font-weight: 300; font-size: 30px; margin: 0 0 14px; }
#vqf-inquiry-app h3 { font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin-top: 26px; margin-bottom: 8px; }
#vqf-inquiry-app label { display: block; font-size: 13px; color: #555; margin-bottom: 12px; }
#vqf-inquiry-app input[type="text"], #vqf-inquiry-app input[type="email"], #vqf-inquiry-app input[type="number"], #vqf-inquiry-app input:not([type]), #vqf-inquiry-app select {
  display: block; width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; margin-top: 4px;
}
#vqf-inquiry-app .vqf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#vqf-inquiry-app .vqf-cart { list-style: none; padding: 0; margin: 0; }
#vqf-inquiry-app .vqf-cart-item { display: grid; grid-template-columns: 1fr auto 30px; align-items: center; padding: 14px 0; border-bottom: 1px solid #eee; gap: 12px; }
#vqf-inquiry-app .vqf-cart-item small { display: block; color: #777; font-size: 12px; }
#vqf-inquiry-app .vqf-rm { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #999; }
#vqf-inquiry-app .vqf-rm:hover { color: #c00; }
#vqf-inquiry-app .vqf-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
#vqf-inquiry-app .vqf-totals { background: #f7f7f7; border-radius: 8px; padding: 16px 20px; margin-top: 18px; }
#vqf-inquiry-app .vqf-totals > div { display: flex; justify-content: space-between; padding: 6px 0; }
#vqf-inquiry-app .vqf-grand { font-size: 20px; font-weight: 600; border-top: 2px solid #1a1a1a; margin-top: 8px; padding-top: 12px; }
#vqf-inquiry-app .vqf-actions { display: flex; justify-content: space-between; margin-top: 30px; }
#vqf-inquiry-app .vqf-install-row { border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
#vqf-inquiry-app .vqf-install-row legend { font-size: 13px; color: #555; }
#vqf-inquiry-app .vqf-empty { text-align: center; padding: 40px 0; color: #777; }
#vqf-inquiry-app .vqf-thanks { text-align: center; padding: 60px 0; }
#vqf-inquiry-app .vqf-note { font-size: 13px; color: #777; margin-top: 12px; }
#vqf-inquiry-app .vqf-btn-primary { background: #c9b287; color: #1a1a1a; border: 0; padding: 12px 22px; font-size: 13px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; cursor: pointer; }
#vqf-inquiry-app .vqf-btn-primary:hover { background: #b8a276; }
#vqf-inquiry-app .vqf-btn-secondary { background: transparent; border: 1px solid #1a1a1a; color: #1a1a1a; padding: 11px 21px; font-size: 13px; cursor: pointer; text-decoration: none; }

@media (max-width: 600px) {
  #vqf-inquiry-app .vqf-grid-2 { grid-template-columns: 1fr; }
}