/* ============================================================
   Alcon Cost Savings Calculator 3.0 — Redesigned CSS
   Matches WaterInnovations Figma layout (Image 2)
   ============================================================ */

/* ---------- Reset & Root ---------- */
.webform-submission-cost-savings-form *,
.top_heading_layout * {
  box-sizing: border-box;
}

/* ---------- Top Heading Banner ---------- */
.top_heading_layout {
  width: 100%;
  background: #F3F7FC;
  margin: 0 auto 30px;
}
.top_text {
  max-width: 1200px !important;
  width: 100%;
  margin: 0 auto;
  padding: 28px 40px 24px;
}
.top_text h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #003595;
  margin: 0 0 10px;
}
.top_text .subtitle p,
.top_text .subtitle {
  color: #003595;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
  padding: 0;
}

/* ---------- Main two-column layout ---------- */
.cost_saving_wrapper.js-webform-flexbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 48px;
  width: 100%;
}

/* Left panel (form) */
.cost_saving_wrapper > .webform-flex:first-child {
  flex: 1 1 520px;
  max-width: 721px;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Right panel (results) */
.cost_saving_wrapper > .webform-flex:last-child {
  flex: 1 1 400px;
  max-width: 480px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: sticky;
  top: 24px;
}

/* ---------- Section headings (bold blue labels) ---------- */
.form-section-label {
  font-size: 16px;
  font-weight: 700;
  color: #003595;
  line-height: 24px;
  margin-bottom: 12px;
  margin-top: 0;
}

.required-star {
  color: red;
}

/*
 * .cs-required — used on section-label <p> tags instead of Drupal's
 * .form-required class, so Drupal's own ::after rule never fires.
 * We append exactly one red asterisk via our own ::after.
 */
.form-section-label.cs-required::after {
  content: " *";
  color: red;
}

/*
 * .reg-mark — inline superscript for the ® symbol inside button labels.
 * The Twig macro splits label strings on the ® character and wraps each
 * occurrence in this span, avoiding any need for |raw or <sup> HTML tags
 * inside Drupal's auto-escaped Twig environment.
 */
.btn-select .reg-mark {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

.eye-type-subheading {
  font-size: 16px;
  color: #003595;
  font-weight: 400;
  margin: 0 0 8px;
}

.eye-type-subheading--second {
  margin-top: 12px;
}

/* Separator between Right Eye and Left Eye sections */
.eye-type-separator {
  border: none;
  border-top: 1px solid #A7A7A7;
  margin: 16px 0 14px;
}

.input-hint {
  font-size: 12px;
  color: #003595;
  line-height: 16px;
  margin-top: 13px;
}

/* ---------- Dividers ---------- */
.form-section-divider {
  border: none;
  border-top: 1px solid #A7A7A7;
  margin: 20px 0 24px;
}

/* ---------- Button-group selectors (lens, supply, eye care) ---------- */
.btn-group-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.btn-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 1000px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.28px;
  cursor: pointer;
  background: #fff;
  color: #4f4f4f;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 20px;
}
.btn-select:hover {
  border-color: #003595;
  color: #003595;
}
.btn-select.selected,
.btn-select.active {
  background: #003595;
  border-color: #003595;
  color: #fff;
}

/* Checkmark icon */
.btn-select .check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Default unselected state — show circle outline, hide checkmark path */
.btn-select .check-icon circle.bg {
  fill: transparent;
  stroke: #A7A7A7;
}

/* Hide checkmark path by default */
.btn-select .check-icon path {
  display: none;
}

/* Selected icon circle */
.btn-select.selected .check-icon circle.bg,
.btn-select.active .check-icon circle.bg {
  fill: #FFFFFF;
  stroke: #FFFFFF;
}

/* Show checkmark only when selected */
.btn-select.selected .check-icon path,
.btn-select.active .check-icon path {
  display: block;
  stroke: #003595;
}

/* ---------- Input fields ---------- */
.webform-submission-cost-savings-form label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #4F4F4F;
  line-height: 20px;
  margin-bottom: 4px;
}
.webform-submission-cost-savings-form label.form-required::after {
  content: " *";
  color: red;
}

.price-inputs-row {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.price-inputs-row .price-input-col {
  flex: 1;
}
.price-inputs-row .price-input-col label {
  font-size: 16px;
  font-weight: 400;
  color: #003595;
  margin-bottom: 2px;
}
.price-inputs-row .price-input-col .input-sub {
  font-size: 12px;
  color: #003595;
  font-weight: 400;
  margin-bottom: 15px;
  margin-top: 8px;
}

.webform-submission-cost-savings-form input[type="text"],
.webform-submission-cost-savings-form input[type="number"] {
  border: 1px solid #707070;
  border-radius: 1000px;
  width: 100%;
  padding: 8px 20px;
  font-size: 14px;
  color: #4f4f4f;
  height: 40px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.webform-submission-cost-savings-form input[type="text"]:focus,
.webform-submission-cost-savings-form input[type="number"]:focus {
  border-color: #003595;
}

.webform-submission-cost-savings-form .webform-element-description,
.webform-submission-cost-savings-form .webform-element-description p {
  font-size: 11px;
  color: #4f4f4f;
  line-height: 16px;
  margin-top: 4px;
}

/* Same price checkbox */
.same-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 16px;
  color: #4f4f4f;
}
.same-price-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #003595;
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------- Savings inputs row ---------- */
.savings-inputs-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.savings-inputs-row .savings-col {
  flex: 1;
  min-width: 110px;
}
.savings-inputs-row .savings-col label {
  font-size: 13px;
  font-weight: 600;
  color: #003595;
  margin-bottom: 4px;
}
.savings-inputs-row .savings-col .input-sub {
  font-size: 10px;
  color: #003595;
  line-height: 14px;
  margin-top: 13px;
}

/* ---------- Calculate button ---------- */
.webform-submission-cost-savings-form .webform-actions {
  text-align: center;
  padding: 24px 0 8px;
}
.webform-submission-cost-savings-form .webform-actions input[type="submit"],
.webform-submission-cost-savings-form .webform-actions input.button {
  background: #003595;
  color: #fff;
  padding: 16px 48px;
  border-radius: 1000px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  cursor: pointer;
  width: auto;
  transition: background 0.15s;
}
.webform-submission-cost-savings-form .webform-actions input:hover {
  background: #002878;
}
.webform-submission-cost-savings-form .webform-actions input.disable_sub_btn {
  background: #d7d7d7;
  pointer-events: none;
}

/* ---------- Right panel — Results wrapper ---------- */
.calculated_wrapper {
  border: 3px solid #003595;
  border-radius: 16px;
  padding: 32px 36px;
  background: #fff;
}

/* Selected product name */
.annual_contact_lens {
  font-size: 22px;
  font-weight: 700;
  color: #003595;
  line-height: 30px;
  margin-bottom: 20px;
}

/* Starting cost row */
.starting_cost_wrapper {
  margin-bottom: 4px;
}
.starting_cost_title {
  font-size: 18px;
  font-weight: 700;
  color: #003595;
  line-height: 26px;
}
.starting_cost_value {
  font-size: 18px;
  font-weight: 700;
  color: #003595;
  float: right;
}
.cost_cal_des {
  font-size: 12px;
  color: #003595;
  line-height: 18px;
  font-weight: 400;
  margin-bottom: 12px;
  clear: both;
}

/* Detail rows (Manufacturer Rebate, Vision Plan, Additional Savings) */
.calc-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #003595;
  line-height: 22px;
  padding: 2px 0;
}
.calc-detail-row .calc-detail-value {
  font-weight: 600;
}

/* ---------- Rebate bubble ---------- */
.rebate_bubble {
  border: 2px solid #003595;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
}

.rebate_bubble_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.rebate_bubble_row.highlighted {
  font-weight: 700;
}

.todays_total_label,
.after_savings_label {
  font-size: 16px;
  font-weight: 700;
  color: #003595;
}
.todays_total_amount {
  font-size: 16px;
  font-weight: 700;
  color: #003595;
}
.todays_total_off {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #003595;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 8px;
}

.rebate_savings_label {
  font-size: 14px;
  color: #003595;
}
.rebate_savings_value {
  font-size: 14px;
  color: #003595;
  font-weight: 600;
}

.after_savings_total_row {
  background: #003595;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}
.after_savings_label {
  color: #fff;
  font-size: 15px;
}
.after_savings_amount {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.after_savings_off {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-left: 8px;
}

.after_savings_pbox_row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #003595;
  padding: 4px 0 2px;
}

.fsa_hsa_note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #003595;
  font-style: italic;
  font-weight: 600;
  margin-top: 8px;
  line-height: 18px;
}
.fsa_hsa_note svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---------- Summary details ---------- */
.selected_values_wrapper {
  margin-top: 16px;
  border-top: 1px solid #e0e0e0;
  padding-top: 12px;
}
.selected_values_wrapper .detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #003595;
  line-height: 22px;
  padding: 2px 0;
}
.selected_values_wrapper .detail-row .detail-val {
  font-weight: 600;
  text-align: right;
}

/* ---------- Bottom messaging ---------- */
.bottom_wrapper {
  margin-top: 20px;
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
}
.bottom_wrapper .bottom_title {
  font-size: 16px;
  font-weight: 700;
  color: #003595;
  line-height: 24px;
  margin-bottom: 6px;
}
.pre_bottom_unorder {
  font-size: 14px;
  color: #003595;
  margin-bottom: 6px;
  line-height: 20px;
}
.bottom_wrapper ul.bottom_unorder {
  margin: 0 0 0 18px;
  padding: 0;
}
.bottom_wrapper ul.bottom_unorder li {
  font-size: 14px;
  color: #003595;
  list-style: disc;
  line-height: 22px;
  margin-bottom: 2px;
}

/* ---------- Print / Download button ---------- */
.download_pdf {
  margin-top: 20px;
  text-align: center;
}
.download_pdf span,
.download_pdf button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #003595;
  border-radius: 1000px;
  padding: 14px 36px;
  color: #003595;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28px;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.download_pdf span:hover,
.download_pdf button:hover {
  background: #003595;
  color: #fff;
}

/* ---------- Error states ---------- */
.form-error input,
input.form-error {
  border-color: red !important;
}
.form_error_text,
.form-item--error-message {
  display: none;
  color: red;
  font-size: 12px;
  margin-top: 4px;
}
.form-error .form_error_text:nth-of-type(1),
.form-item--error .form-item--error-message {
  display: block;
}
.webform-required { display: none; }
.webform-submission-cost-savings-form .throbber { display: none; }

/* ---------- select2 overrides ---------- */
.select2-container--default.select2-container--below,
.select2.select2-container.select2-container--default {
  border: 1px solid #707070;
  border-radius: 1000px;
  padding: 4px 8px;
}
.select2.select2-container.select2-container--default { width: 100% !important; }
.webform-submission-cost-savings-form .select2-container--default .select2-selection--single { border: 0; background: transparent; }
.select2-dropdown.select2-dropdown--below {
  border: 1px solid #707070;
  border-radius: 8px;
  border-top: 0;
}
.select2-dropdown { background: #F6F6F7; }
.select2-container--default .select2-results>.select2-results__options { max-height: 260px !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: solid #707070;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.js-webform-select2 {
  border: 1px solid #707070;
  border-radius: 8px;
  padding: 5px;
  width: 100%;
}

/* ============================================================
   TABLET (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .cost_saving_wrapper.js-webform-flexbox {
    flex-direction: column;
    padding: 0 20px 40px;
  }
  .cost_saving_wrapper > .webform-flex:first-child,
  .cost_saving_wrapper > .webform-flex:last-child {
    max-width: 100%;
    flex: 1 1 100%;
    position: static;
  }
  .top_text h2 { font-size: 36px; line-height: 44px; }
  .top_text .subtitle p,
  .top_text .subtitle { font-size: 18px; line-height: 26px; }
}

/* ============================================================
   MOBILE (≤ 767px)
   ============================================================ */
@media only screen and (max-width: 767px) {
  .top_text { padding: 20px 16px; }
  .top_text h2 { font-size: 28px; line-height: 36px; }
  .top_text .subtitle p { font-size: 16px; line-height: 24px; }

  .cost_saving_wrapper.js-webform-flexbox {
    flex-direction: column;
    padding: 0 16px 32px;
    gap: 24px;
  }
  .cost_saving_wrapper > .webform-flex:first-child,
  .cost_saving_wrapper > .webform-flex:last-child {
    max-width: 100%;
    flex: 1 1 100%;
    position: static;
  }

  .price-inputs-row { flex-direction: column; gap: 12px; }
  .savings-inputs-row { flex-direction: column; }

  .calculated_wrapper { padding: 24px 20px; }

  .btn-group-wrap { gap: 8px; }
  .btn-select { font-size: 13px; padding: 8px 14px; }

  .rebate_bubble { padding: 12px 14px; }
  .todays_total_label, .after_savings_label { font-size: 14px; }

  .download_pdf span, .download_pdf button {
    padding: 12px 24px;
    font-size: 13px;
  }
}

/* Hide print layout on screen */
.alcon-print-layout {
  display: none;
}

/* Show ONLY print layout when printing */
@media print {
  .cost_saving_wrapper,
  .top_heading_layout {
    display: none;
  }

  .alcon-print-layout {
    display: block;
  }
}

/* ── Print layout styles ─────────────────────────────────────── */
.alcon-print-layout {
  display: none;
}

@media print {
  .cost_saving_wrapper,
  .top_heading_layout,
  .webform-actions,
  .download_pdf {
    display: none !important;
  }

  .alcon-print-layout {
    display: block;
    font-family: Arial, sans-serif;
    color: #003595;
    padding: 24px;
  }

  .print-logo {
    font-size: 28px;
    font-weight: 700;
    font-style: italic;
    color: #003595;
    margin-bottom: 20px;
  }

  .print-summary-card {
    border: 2px solid #003595;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
  }

  .print-product-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .print-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
  }

  .print-cost-label {
    font-size: 16px;
    font-weight: 700;
  }

  .print-cost-sub {
    font-size: 11px;
    color: #666;
    font-weight: 400;
  }

  .print-divider {
    border: none;
    border-top: 1px solid #ccc;
    margin: 12px 0;
  }

  .print-savings-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
  }

  .print-today-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1.5px solid #003595;
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 14px;
    margin: 8px 0;
  }

  .print-after-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #003595;
    color: #fff;
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 14px;
    margin: 4px 0;
  }

  .print-amount-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .print-badge {
    background: #e0e8f7;
    color: #003595;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
  }

  .print-badge-white {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
  }

  .print-pbox-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 12px 4px;
  }

  .print-fsa-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #003595;
    font-weight: 600;
    margin-top: 12px;
  }

  .print-fsa-icon {
    font-size: 16px;
    font-weight: 700;
  }

  .print-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 0.5px solid #e0e8f7;
  }

  .print-detail-row--last {
    border-bottom: none;
  }

  .print-bottom-title {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 6px;
  }

  .print-pre-bullets {
    font-size: 13px;
    margin: 0 0 4px;
  }

  .print-bullets {
    font-size: 13px;
    padding-left: 16px;
    margin: 0;
  }

  .print-bullets li {
    margin-bottom: 4px;
  }

  .print-qr-section {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-top: 1px solid #ccc;
    padding-top: 16px;
    margin-bottom: 20px;
  }

  .print-qr-img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
  }

  .print-qr-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: #003595;
    margin: 0 0 4px;
  }

  .print-qr-text p {
    font-size: 12px;
    color: #333;
    margin: 0;
  }

  .print-notes-box {
    border: 1.5px solid #4a5f85;
    border-radius: 6px;
    padding: 12px 16px;
    min-height: 70px;
    margin-bottom: 16px;
  }

  .print-notes-label {
    font-weight: 700;
    font-size: 13px;
  }

  .print-footer {
    text-align: right;
    font-size: 11px;
    color: #666;
  }
}

/* ── Button-group validation ─────────────────────────────────────────────── */

/**
 * Applied to the .btn-group-wrap when no option has been selected
 * and the user clicks Calculate.
 */
.btn-group-wrap.btn-group-error {
  /* Red outline around the entire group */
  outline: 2px solid #d0021b;
  outline-offset: 4px;
  border-radius: 4px;
  /* Brief shake to draw attention */
  animation: cs-shake 0.35s ease;
}

/**
 * Error label that appears below a button group.
 * Hidden by default; revealed via the sibling combinator when the
 * btn-group-error class is present on the wrap.
 *
 * Usage in Twig (add after each required btn_group macro call):
 *
 *   <p class="btn-group-error-msg" aria-live="polite">
 *     Please make a selection.
 *   </p>
 *
 * (See note at bottom of this file.)
 */
.btn-group-error-msg {
  display: none;
  color: #d0021b;
  font-size: 0.78rem;
  margin: 4px 0 0;
}

.btn-group-wrap.btn-group-error + .btn-group-error-msg {
  display: block;
}

/* ── Text-input validation ───────────────────────────────────────────────── */

input.input-error,
input.input-error:focus {
  border-color: #d0021b !important;
  box-shadow: 0 0 0 2px rgba(208, 2, 27, 0.20);
  outline: none;
}

/**
 * The .form_error_text elements already exist in the Twig template.
 * They are hidden by default and shown when the parent gains .has-error.
 */
.form_error_text {
  display: none;
  color: #d0021b;
  font-size: 0.78rem;
  margin: 4px 0 0;
}

.has-error .form_error_text {
  display: block;
}

/* ── Shake keyframes ─────────────────────────────────────────────────────── */

@keyframes cs-shake {
  0%,  100% { transform: translateX(0); }
  20%        { transform: translateX(-5px); }
  40%        { transform: translateX(5px); }
  60%        { transform: translateX(-4px); }
  80%        { transform: translateX(4px); }
}

.currency-input {
  position: relative;
}

.currency-symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #4f4f4f
}

.currency-input input {
  padding-left: 24px;
}

.btn-select.disabled-option {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-select.disabled-option .check-icon {
  position: relative;
}

.btn-select.disabled-option .check-icon {
  background-image:
    linear-gradient(
      45deg,
      transparent 46%,
      #A7A7A7 46%,
      #A7A7A7 54%,
      transparent 54%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      #A7A7A7 46%,
      #A7A7A7 54%,
      transparent 54%
    );
}