/*
 * Fine calculator pages.
 */

#calc-wrap,
#calc-result-wrap {
  background: var(--bg);
}

#calc-wrap .header,
#calc-result-wrap .header {
  background: transparent;
}

.calc-flow,
.calc-result {
  padding-bottom: clamp(3.2rem, 6.667vw, 4.8rem);
}

.calc-flow .tit-section,
.calc-result .tit-section {
  /* padding-top: clamp(2rem, 4.167vw, 3rem); */
}

.calc-form {
  padding-bottom: clamp(3.2rem, 6.667vw, 4.8rem);
}

/* ---------- Steps ---------- */
.calc-step-section {
  margin-top: clamp(2rem, 4.167vw, 3rem);
}

.calc-step-section:first-child {
  margin-top: 0
}

.calc-step {
  padding: clamp(2rem, 4.444vw, 3.2rem);
}

.calc-step__status,
.calc-selection-summary__step {
  font-size: var(--fz-24);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

.calc-step__question {
  margin-top: clamp(1.2rem, 2.222vw, 1.6rem);
  font-size: var(--fz-28);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.calc-step__options {
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
}

.calc-step__options--vehicle {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.calc-step__options--zone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.calc-option {
  position: relative;
  width: 100%;
  border: var(--border-2) solid var(--line);
  border-radius: var(--radius-15);
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.calc-option.is-selected,
.calc-option[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--surface);
}

.calc-option--vehicle {
  min-height: clamp(11rem, 23.611vw, 17rem);
  padding: clamp(1.6rem, 3.333vw, 2.4rem);
  display: grid;
  grid-template-columns: clamp(8rem, 20.833vw, 15rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3.333vw, 2.4rem);
  text-align: left;
}

.calc-option--zone {
  padding: 1.6rem 1.2rem;
  display: grid;
  grid-template-columns: clamp(4.8rem, 9.722vw, 7rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.222vw, 1.6rem);
  text-align: left;
  padding-right: 3.2rem;
}

.calc-option__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-option__image--vehicle {
  width: clamp(8rem, 20.833vw, 15rem);
  height: clamp(6rem, 13.889vw, 10rem);
}

.calc-option__image--zone {
  width: 3.6rem;
  height: 3.6rem;
}

.calc-option__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.calc-option__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc-option__title {
  font-size: var(--fz-23);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.calc-option__description {
  font-size: var(--fz-20);
  font-weight: var(--fw-regular);
  color: var(--text);
}

.calc-option__check,
.calc-diagnosis-option__check {
  flex: 0 0 clamp(3.2rem, 6.667vw, 4.8rem);
  width: 2.6rem;
  height: 2.6rem;
  border: var(--border-2) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.calc-option.is-selected .calc-option__check,
.calc-option[aria-pressed="true"] .calc-option__check,
.calc-diagnosis-option.is-selected .calc-diagnosis-option__check {
  position: relative;
  border-color: var(--primary);
  background: var(--primary);
}

/* .calc-option.is-selected .calc-option__check::after, */
.calc-option[aria-pressed="true"] .calc-option__check::after,
.calc-diagnosis-option.is-selected .calc-diagnosis-option__check::after {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 42%;
  height: 22%;
  border-bottom: var(--border-2) solid var(--surface);
  border-left: var(--border-2) solid var(--surface);
  content: "";
  transform: translate(-50%, -50%) rotate(-45deg);
}

.calc-option--zone .calc-option__check {
  position: absolute !important;
  right: clamp(1rem, 2.222vw, 1.6rem);
  top: 50%;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  opacity: 0;
}

.calc-option--zone.is-selected .calc-option__check,
.calc-option--zone[aria-pressed="true"] .calc-option__check {
  opacity: 1;
}

/* ---------- Step guide ---------- */
.calc-guide {
  width: 100%;
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
  padding: clamp(1.6rem, 3.333vw, 2.4rem);
  border-radius: var(--radius-15);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  color: var(--text);
  background: var(--primary-soft);
}

.calc-guide__icon {
  flex: 0 0 clamp(2.8rem, 5.556vw, 4rem);
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

.calc-guide__text {
  font-size: var(--fz-20);
  font-weight: var(--fw-regular);
}

/* ---------- Result summary ---------- */
.calc-result-section--summary {
  margin-top: clamp(2rem, 4.167vw, 3rem);
}

.calc-selection-summary {
  padding: clamp(1.6rem, 3.333vw, 2.4rem);
}

.calc-selection-summary__item {
  min-height: clamp(5.6rem, 10vw, 7.2rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(4rem, 8.333vw, 6rem);
  align-items: center;
  gap: clamp(1.2rem, 2.778vw, 2rem);
}

.calc-selection-summary__item + .calc-selection-summary__item {
  border-top: var(--border-1) solid var(--line-strong);
}

.calc-selection-summary__value {
  font-size: var(--fz-24);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.calc-selection-summary__icon {
  width: clamp(4rem, 8.333vw, 6rem);
  height: clamp(3.6rem, 7.5vw, 5.4rem);
}

.calc-selection-summary__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Fine ---------- */
.calc-fine-card {
  padding: clamp(2rem, 4.444vw, 3.2rem);
}

.calc-fine-card__title {
  font-size: var(--fz-28);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.calc-fine-card__description {
  margin-top: var(--space-4);
  font-size: var(--fz-23);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
}

.calc-fine-card__amount {
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--text);
}

.calc-fine-card__amount strong {
  font-size: var(--fz-50);
  font-weight: var(--fw-semibold);
  color: var(--danger);
}

.calc-fine-card__amount span {
  font-size: var(--fz-23);
  font-weight: var(--fw-semibold);
}

.calc-fine-card__discount {
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
  font-size: var(--fz-23);
  font-weight: var(--fw-medium);
  color: var(--primary);
}

.calc-fine-card__discount strong {
  font-weight: var(--fw-semibold);
}

/* ---------- Diagnosis ---------- */
.calc-diagnosis {
  padding: clamp(2rem, 4.444vw, 3.2rem);
}

.calc-diagnosis__heading {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-1) solid var(--line-strong);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.calc-diagnosis__title {
  font-size: var(--fz-23);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.calc-diagnosis__caption {
  font-size: var(--fz-20);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
}

.calc-diagnosis-option {
  min-height: clamp(6rem, 11.111vw, 8rem);
  padding: var(--space-4) 0;
  border-bottom: var(--border-1) solid var(--line-strong);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  cursor: pointer;
}

.calc-diagnosis-option:last-child {
  border-bottom: 0;
}

.calc-diagnosis-option__check {
  flex-basis: clamp(2.8rem, 5.556vw, 4rem);
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

.calc-diagnosis-option__text {
  font-size: var(--fz-20);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
}

/* ---------- Diagnosis guides ---------- */
.calc-diagnosis-guides {
  margin-top: clamp(2rem, 4.444vw, 3.2rem);
}

.calc-diagnosis-guides__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.calc-diagnosis-guide {
  padding: clamp(1.6rem, 3.333vw, 2.4rem);
  border-radius: var(--radius-15);
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 2.778vw, 2rem);
  background: var(--primary-soft);
}

.calc-diagnosis-guide__icon {
  flex: 0 0 clamp(2.8rem, 5.556vw, 4rem);
  width: clamp(2.8rem, 5.556vw, 4rem);
  height: clamp(2.8rem, 5.556vw, 4rem);
}

.calc-diagnosis-guide__title {
  font-size: var(--fz-20);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

.calc-diagnosis-guide__description {
  margin-top: var(--space-3);
  font-size: var(--fz-18);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
}

/* ---------- Result action ---------- */
.calc-result__actions {
  margin-top: clamp(2.4rem, 5.556vw, 4rem);
}

.calc-result__retry-icon {
  width: clamp(2.4rem, 4.444vw, 3.2rem);
  height: clamp(2.4rem, 4.444vw, 3.2rem);
}

@media (max-width: 420px) {
  .calc-option--vehicle {
    grid-template-columns: 8rem minmax(0, 1fr) 3.2rem;
  }

  .calc-option--zone {
    grid-template-columns: 2.8rem minmax(0, 1fr);
  }

  .calc-option__image--zone {
    width: 2.8rem;
    height: 2.8rem
  }

  .calc-step__options--zone {
    /* grid-template-columns: repeat(1, 1fr); */
  }
  .calc-option__title {
    font-size: 1.2rem;
  }
}

@media (max-width: 360px) {
  .calc-option--zone {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }
}