@charset "UTF-8";
/*
*
* LOCATION: [core]
* FOLDER: [scss/pages]
* FILE NAME: [quote.scss]
* DESCRIPTION: QUOTE page scss file
*
* NOTE: This file is loaded ALONGSIDE global.css.
*       Only @use basics/tools + modules/font-tools for
*       variables/mixins access (no CSS output).
*       Do NOT @use basics/index, fonts, layout, header,
*       footer, or modules — they produce CSS output that
*       is already compiled in global.css.
*
*/
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [variables.scss]
*
*/
/*******************************************************
VARIABLES
*******************************************************/
/*******************************************************
COLORS
*******************************************************/
/* BASICS */
/* SPECIFIC BRAND */
/****** TITLES & TEXTS ******/
/****** MESSAGES & ALERTS ******/
/****** HEADER & FOOTER ******/
/****** POPUP ******/
/*******************************************************
ADMIN
*******************************************************/
/*******************************************************
Z-INDEX
*******************************************************/
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [mixins.scss]
* DESCRIPTION: css properties reused
*
*/
/*******************************************************
MIXINS -
*******************************************************/
/* DARK AND DEFAULT MODE */
/*
*
* LOCATION: [core]
* FOLDER: [scss]
* FILE NAME: [media-queries.scss]
* DESCRIPTION: media queries
*
*/
/************************************************************
MEDIA QUERIES
************************************************************/
/** Target points **/
/* MOBILE - Targeting iPhone 5s only */
/* TABLET - mobile & up */
/* TABLET - 480px & up */
/* TABLET - 520px & up */
/* TABLET - 620px & up */
/* MOBILE - Only Mobile */
/* TABLET - Tablet & up */
/* TABLET - Targeting only tablet */
/* TABLET - Targeting Mobile & Tablet */
/* DESKTOP - Desktop & Up */
/* DESKTOP - Custom targeting point */
/* DESKTOP -  13 inch Macbook Pro screen */
/*
*
* LOCATION: [modules]
* FOLDER: [assets/scss]
* FILE NAME: [_font-tools.scss]
* DESCRIPTION: Font mixins ONLY — no CSS output.
*              Use this in page-level SCSS files to access
*              font-family and font-style mixins without
*              duplicating the global font/heading/paragraph rules.
*
*/
/*******************************************************
Mixins - Font Families
*******************************************************/
/* =========================================================
   QUOTE PAGE
   ========================================================= */
.quote-page {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .quote-page {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 1140px) {
  .quote-page {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.quote-page .intro {
  margin-bottom: 2rem;
}

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.quote-form__progress {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .quote-form__progress {
    gap: 1.5rem;
    margin-bottom: 4rem;
  }
}

.quote-form__progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
  flex: 1;
  max-width: 160px;
}
.quote-form__progress-step--active .quote-form__progress-number, .quote-form__progress-step--completed .quote-form__progress-number {
  background-color: #00A98F;
  color: white;
  border-color: #00A98F;
}
.quote-form__progress-step--active .quote-form__progress-label {
  color: #181818;
  font-weight: 600;
}
.quote-form__progress-step--completed {
  cursor: pointer;
}
.quote-form__progress-step--completed .quote-form__progress-number {
  background-color: #008c71;
  border-color: #008c71;
}
.quote-form__progress-step--completed .quote-form__progress-label {
  color: #5f6369;
}

.quote-form__progress-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #d3d3d3;
  background-color: white;
  color: #aca9a9;
  font-weight: 700;
  font-size: 0.875rem;
  font-family: "Inter", sans-serif;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .quote-form__progress-number {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
}

.quote-form__progress-label {
  font-size: 0.625rem;
  color: #aca9a9;
  text-align: center;
  font-family: "Inter", sans-serif;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

/* =========================================================
   FORM — General
   ========================================================= */
.quote-form {
  max-width: 640px;
  margin: 0 auto;
}

.quote-form__step {
  display: none;
}
.quote-form__step--active {
  display: block;
}
.quote-form__step h2 {
  margin-bottom: 0.5rem;
}
.quote-form__step .intro {
  margin-bottom: 2rem;
  color: #5f6369;
}

/* =========================================================
   FIELDS
   ========================================================= */
.quote-form__field {
  margin-bottom: 1.5rem;
}

.quote-form__label {
  font-size: 0.9rem;
  color: #181818;
}
.quote-form__label .required {
  color: #ff1540;
}

.quote-form__input--error,
.quote-form__select--error,
.quote-form__textarea--error {
  border-color: #ff1540 !important;
  background-color: #ffdfe6 !important;
}

.quote-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6369' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.quote-form__textarea {
  resize: vertical;
  min-height: 100px;
}

.quote-form__error {
  display: none;
  font-family: "Inter", sans-serif;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #ff1540;
}
.quote-form__error.is-visible {
  display: block;
}

/* =========================================================
   CHECKBOX & RADIO GROUPS
   ========================================================= */
.quote-form__checkbox-group,
.quote-form__radio-group {
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .quote-form__checkbox-group,
  .quote-form__radio-group {
    grid-template-columns: 1fr 1fr;
  }
}

.quote-form__checkbox,
.quote-form__radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #f2f2f2;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.quote-form__checkbox:hover,
.quote-form__radio:hover {
  border-color: #7bcdbd;
}
.quote-form__checkbox input[type=checkbox],
.quote-form__checkbox input[type=radio],
.quote-form__radio input[type=checkbox],
.quote-form__radio input[type=radio] {
  width: 18px;
  height: 18px;
  accent-color: #00A98F;
  cursor: pointer;
  flex-shrink: 0;
}
.quote-form__checkbox span,
.quote-form__radio span {
  font-size: 0.9rem;
  color: #343741;
  line-height: 1.3;
}
.quote-form__checkbox:has(input:checked),
.quote-form__radio:has(input:checked) {
  border-color: #00A98F;
  background-color: #dff3ef;
}

.quote-form__checkbox--highlight {
  background-color: #dff3ef;
  border-color: #7bcdbd;
}
.quote-form__checkbox--highlight span {
  font-weight: 600;
  color: #008c71;
}
.quote-form__checkbox--highlight:has(input:checked) {
  border-color: #00A98F;
  background-color: #dff3ef;
}

/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */
.quote-form__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d3d3d3;
}
.quote-form__nav--submit {
  gap: 1rem;
}

.quote-form__btn-submit {
  min-width: 200px;
}
.quote-form__btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   CONSENT & SUBMIT NOTE
   ========================================================= */
.quote-form__consent {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #5f6369;
  line-height: 1.5;
}

.quote-form__submit-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #aca9a9;
  font-style: italic;
}

.quote-form__submit-error {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #ffdfe6;
  border: 1px solid #f45967;
  border-radius: 8px;
}
.quote-form__submit-error p {
  color: #e4001b;
  font-size: 0.9rem;
  margin: 0;
}

/* =========================================================
   STEP 4 — REVIEW SUMMARY
   ========================================================= */
.quote-form__summary {
  margin-bottom: 1.5rem;
}

.quote-form__summary-section {
  padding: 1.25rem 0;
  border-bottom: 1px solid #d3d3d3;
}
.quote-form__summary-section:first-child {
  padding-top: 0;
}
.quote-form__summary-section:last-child {
  border-bottom: none;
}

.quote-form__summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.quote-form__summary-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #181818;
  margin: 0;
}

.quote-form__summary-edit {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: #00A98F;
  font-weight: 600;
  text-decoration: none;
}
.quote-form__summary-edit:hover {
  text-decoration: underline;
  color: #008c71;
}

.quote-form__summary-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.quote-form__summary-row {
  display: flex;
  gap: 1rem;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}
.quote-form__summary-row dt {
  flex-shrink: 0;
  width: 100px;
  color: #5f6369;
  font-weight: 500;
}
@media (min-width: 768px) {
  .quote-form__summary-row dt {
    width: 120px;
  }
}
.quote-form__summary-row dd {
  margin: 0;
  color: #181818;
}

/* =========================================================
   CONFIRMATION SCREEN
   ========================================================= */
.quote-confirm {
  text-align: center;
  padding: 3rem 0;
}
@media (min-width: 768px) {
  .quote-confirm {
    padding: 4rem 0;
  }
}

.quote-confirm__headline {
  color: #00A98F;
  margin-bottom: 1rem;
}

.quote-confirm__body {
  margin-bottom: 0.5rem;
  color: #343741;
  line-height: 1.6;
}

/* =========================================================
   UTILITY: is-hidden
   ========================================================= */
.is-hidden {
  display: none !important;
}

/*# sourceMappingURL=quote.css.map */