/* ===========================================================================
   QUOTE PAGE STYLES
   VERSION: v2.1.0
   LAST UPDATED: 2026-08-23

   CHANGE LOG:
   v2.1.0 - .quote-tier-picker widened from two columns to three for the
            Essentials tier. Still collapses to one column below 820px.
            Added the visibility rule for the Essentials server-coverage
            warning on the servers card, matching the existing pattern for
            the Microsoft 365 prerequisite warning. No new component: both
            reuse .quote-card-warning, which is a background tint plus an
            all-round border.
   v2.0.0 - Full rewrite for the dual-service quote builder. New components:
            .quote-builder-layout (2-col grid with sticky right rail on
            desktop), .quote-card (toggleable question card), .quote-toggle
            (pill switch), .quote-tier-picker (Standard/Premium picker),
            .cyber-picker (compressed cybersecurity-only picker), .m365-line
            (Microsoft 365 SKU line item), .quote-totals-card (sticky right
            rail). Existing .quote-package-btn styling preserved and reused
            for the Total Care tier picker. Removed: .quote-builder,
            .quote-column, .quote-total-card (no longer in the HTML). Sticky
            right-rail card on desktop only; below 1024px the rail returns
            to natural page flow.
   v1.0.0 - Initial styles for the cybersecurity-only mailbox/device picker.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.quote-hero {
  padding: 96px 0 64px;
  background:
    radial-gradient(circle at top left, rgba(223, 146, 47, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--background-light) 100%);
}

.quote-hero .section-heading {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Builder layout: questions + sticky rail (desktop)
   --------------------------------------------------------------------------- */
.quote-builder-section {
  padding-top: 64px;
}

.quote-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}

.quote-questions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Question card
   --------------------------------------------------------------------------- */
.quote-card {
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 26px 30px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quote-card[data-enabled="true"] {
  border-color: rgba(55, 74, 147, 0.28);
  box-shadow: 0 14px 32px rgba(33, 44, 66, 0.08);
}

.quote-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.quote-card-question {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.4;
  flex: 1 1 auto;
}

.quote-card-body {
  margin-top: 22px;
}

.quote-card-body[hidden] {
  display: none;
}

.quote-card-body > * + * {
  margin-top: 16px;
}

.quote-card-intro {
  color: rgba(26, 26, 26, 0.78);
  line-height: 1.6;
  margin: 0;
}

.quote-card-warning {
  background: rgba(223, 146, 47, 0.1);
  border: 1px solid rgba(223, 146, 47, 0.35);
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--primary-dark);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.quote-card[data-prereq-met="true"] [data-m365-prereq] {
  display: none;
}

/* v2.1.0 - The Essentials server-coverage warning. Same visibility pattern as
   the Microsoft 365 prerequisite above: quote.js sets the data attribute on
   the card and CSS decides whether the paragraph shows. Hidden unless the
   selected Total Care tier is Essentials, which is the only tier that
   excludes server management and server backup. */
.quote-card[data-essentials="false"] [data-essentials-warning] {
  display: none;
}

.quote-card-slim .quote-card-header {
  align-items: center;
}

.quote-card-always-open .quote-card-question {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Toggle switch
   --------------------------------------------------------------------------- */
.quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 4px 4px 4px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(26, 26, 26, 0.65);
  flex: 0 0 auto;
}

.quote-toggle:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 4px;
  border-radius: 999px;
}

.quote-toggle-track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(33, 44, 66, 0.2);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.quote-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.quote-toggle.is-on .quote-toggle-track {
  background: var(--primary-blue);
}

.quote-toggle.is-on .quote-toggle-thumb {
  transform: translateX(20px);
}

.quote-toggle.is-on {
  color: var(--primary-blue);
}

.quote-toggle-state {
  min-width: 26px;
  text-align: left;
}

/* Inline toggle (used for the Total Care part-time sub-question) */
.quote-toggle-inline {
  width: 100%;
  justify-content: flex-start;
  font-weight: 500;
  color: var(--primary-dark);
  padding: 8px 0;
}

.quote-toggle-inline-label {
  flex: 1;
  text-align: left;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Total Care tier picker (reuses .quote-package-btn)
   --------------------------------------------------------------------------- */
/* v2.1.0 - Three columns, not two. Total Care went to three tiers when
   Essentials was added at $160, so the picker had to widen to match the
   pricing page. Below 820px it still collapses to a single column. */
.quote-tier-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quote-package-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(33, 44, 66, 0.14);
  border-radius: 14px;
  background: #ffffff;
  color: var(--primary-dark);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.quote-package-btn:hover,
.quote-package-btn:focus-visible {
  border-color: rgba(55, 74, 147, 0.4);
  outline: none;
}

.quote-package-btn.is-selected {
  border-color: var(--primary-blue);
  background: rgba(55, 74, 147, 0.08);
}

.quote-package-name {
  font-weight: 700;
  font-size: 1rem;
}

.quote-package-price {
  font-size: 0.92rem;
  color: rgba(26, 26, 26, 0.7);
}

/* ---------------------------------------------------------------------------
   Form controls (inputs, selects)
   --------------------------------------------------------------------------- */
.quote-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quote-card .form-group label {
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}

.quote-card .form-group input[type="number"],
.quote-card .form-group select {
  width: 100%;
  max-width: 280px;
  padding: 10px 14px;
  border: 1px solid rgba(33, 44, 66, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-card .form-group input[type="number"]:focus,
.quote-card .form-group select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(55, 74, 147, 0.15);
}

.quote-hint {
  font-size: 0.9rem;
  color: rgba(26, 26, 26, 0.65);
  line-height: 1.45;
  margin: 0;
}

.quote-sub-question {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(33, 44, 66, 0.12);
}

.quote-sub-question-body[hidden] {
  display: none;
}

.quote-sub-question-body {
  margin-top: 12px;
  padding-left: 56px;
}

.quote-sub-question-body > * + * {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   Cybersecurity-only picker (compressed)
   --------------------------------------------------------------------------- */
.cyber-picker {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cyber-picker-row {
  display: grid;
  grid-template-columns: 130px 1fr 100px;
  gap: 16px;
  align-items: center;
}

.cyber-picker-label {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.96rem;
}

.cyber-picker-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cyber-picker-btn {
  padding: 8px 14px;
  border: 1px solid rgba(33, 44, 66, 0.16);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cyber-picker-btn:hover {
  border-color: rgba(55, 74, 147, 0.4);
}

.cyber-picker-btn.is-selected {
  background: rgba(55, 74, 147, 0.1);
  border-color: var(--primary-blue);
  font-weight: 700;
}

.cyber-picker-price {
  margin-left: 4px;
  color: rgba(26, 26, 26, 0.6);
  font-size: 0.86rem;
}

.cyber-picker-btn.is-selected .cyber-picker-price {
  color: var(--primary-blue);
}

.cyber-picker-count {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cyber-picker-count label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.7);
}

.cyber-picker-count input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(33, 44, 66, 0.18);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--primary-dark);
}

.cyber-picker-count input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(55, 74, 147, 0.15);
}

/* ---------------------------------------------------------------------------
   Microsoft 365 line items
   --------------------------------------------------------------------------- */
.m365-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m365-lines:empty {
  display: none;
}

.m365-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  gap: 10px;
  align-items: center;
}

.m365-line-sku {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(33, 44, 66, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.95rem;
}

.m365-line-sku:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(55, 74, 147, 0.15);
}

.m365-line-qty {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(33, 44, 66, 0.18);
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: center;
}

.m365-line-qty:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(55, 74, 147, 0.15);
}

.m365-line-remove {
  background: none;
  border: 1px solid rgba(33, 44, 66, 0.2);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: rgba(26, 26, 26, 0.7);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.m365-line-remove:hover {
  border-color: rgba(168, 50, 50, 0.5);
  color: rgb(168, 50, 50);
}

.quote-add-line {
  width: 100%;
  background: none;
  border: 1.5px dashed rgba(33, 44, 66, 0.22);
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-blue);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.quote-add-line:hover:not(:disabled) {
  border-color: var(--primary-blue);
  background: rgba(55, 74, 147, 0.04);
}

.quote-add-line:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Section subtotal row
   --------------------------------------------------------------------------- */
.quote-subtotal {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(33, 44, 66, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}

.quote-subtotal-label {
  font-weight: 700;
  color: var(--primary-dark);
}

.quote-subtotal-value {
  font-weight: 700;
  color: var(--primary-blue);
}

/* ---------------------------------------------------------------------------
   Sticky totals rail (desktop)
   --------------------------------------------------------------------------- */
.quote-totals-rail {
  position: sticky;
  top: 96px;
}

.quote-totals-card {
  background: #ffffff;
  border: var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 28px;
}

.quote-totals-eyebrow {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(26, 26, 26, 0.6);
}

.quote-totals-amount {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.05;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: -0.01em;
}

.quote-totals-breakdown,
.quote-totals-flags-wrap {
  margin-top: 22px;
}

.quote-totals-breakdown[hidden],
.quote-totals-flags-wrap[hidden] {
  display: none;
}

.quote-totals-section-label {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(26, 26, 26, 0.52);
}

.quote-totals-breakdown ul,
.quote-totals-flags-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quote-totals-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--primary-dark);
}

.breakdown-label {
  flex: 1;
}

.breakdown-amount {
  font-weight: 700;
  white-space: nowrap;
}

.quote-totals-flags-wrap li {
  position: relative;
  padding-left: 14px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.78);
}

.quote-totals-flags-wrap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
}

.quote-totals-cta {
  width: 100%;
  margin-top: 16px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Request section (shared vt-lead-form)
   --------------------------------------------------------------------------- */
.quote-request-section {
  padding-top: 88px;
}

.quote-form-shell {
  max-width: 100% !important;
}

.quote-hidden-field {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Accessibility helpers (scoped fallback if not in style.css)
   --------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .quote-builder-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .quote-totals-rail {
    position: static;
    order: 2;
  }

  .quote-questions {
    order: 1;
  }
}

@media (max-width: 820px) {
  .quote-hero {
    padding: 80px 0 52px;
  }

  .quote-builder-section {
    padding-top: 52px;
  }

  .quote-request-section {
    padding-top: 72px;
  }

  .quote-card {
    padding: 22px 22px;
  }

  .quote-card-header {
    gap: 14px;
  }

  .quote-tier-picker {
    grid-template-columns: 1fr;
  }

  .cyber-picker-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cyber-picker-count {
    max-width: 140px;
  }

  .quote-sub-question-body {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .quote-card {
    padding: 20px 18px;
  }

  .quote-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .quote-card-slim .quote-card-header {
    flex-direction: row;
    align-items: center;
  }

  .m365-line {
    grid-template-columns: 1fr 70px auto;
    gap: 8px;
  }

  .m365-line-sku {
    font-size: 0.88rem;
    padding: 8px 10px;
  }

  .quote-subtotal {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .quote-totals-amount {
    font-size: 2rem;
  }
}