/**
 * Quick Fix Force — AMC Cost Calculator
 * Source: src/pages/AmcCalculator.jsx + src/components/amc/*.jsx.
 * Used by page-amc-calculator.php (locked-layout wizard) and, for the
 * .qff-amc-locked-* header/footer shell only, nowhere else — the SEO
 * landing page (page-amc-cost-calculator-dubai.php) reuses the sitewide
 * shared blocks (qff-shared-blocks.css) instead.
 */

/* ===== Locked page shell (no site header/footer — see page-amc-calculator.php) ===== */
.qff-amc-locked-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--qff-offwhite); }

.qff-amc-locked-header { background: #fff; border-bottom: 1px solid var(--qff-navy-10); position: sticky; top: 0; z-index: 20; }
.qff-amc-locked-header__bar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.qff-amc-locked-logo { display: flex; align-items: center; gap: 0.625rem; }
.qff-amc-locked-logo__mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; background: var(--qff-navy); color: #fff;
  font-family: var(--qff-font-display); font-weight: 700; font-size: 13px; border-radius: var(--qff-radius-sm);
}
.qff-amc-locked-logo__word { font-family: var(--qff-font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.qff-navy-text { color: var(--qff-navy); }
.qff-action-text { color: var(--qff-action); }
.qff-amc-locked-phone { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 13.5px; font-weight: 600; color: var(--qff-navy); }
.qff-amc-locked-phone svg { width: 1rem; height: 1rem; }
@media (max-width: 639px) { .qff-amc-locked-phone__num { display: none; } }

.qff-amc-locked-main { flex: 1; padding-top: 1.5rem; padding-bottom: 2rem; }
@media (min-width: 640px) { .qff-amc-locked-main { padding-top: 2.5rem; padding-bottom: 3rem; } }

.qff-amc-locked-footer-link { background: var(--qff-offwhite); border-top: 1px solid var(--qff-navy-10); padding: 2rem 0; }

/* ===== Wizard container ===== */
.qff-amc-wizard { max-width: 40rem; margin: 0 auto; padding: 0 var(--qff-container-pad); }

/* ===== Progress ===== */
.qff-amc-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; }
.qff-amc-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 13.5px; font-weight: 600; color: var(--qff-navy); padding: 0.375rem 0.25rem; margin-left: -0.25rem; }
.qff-amc-back:hover { color: var(--qff-action); }
.qff-amc-back svg { width: 1rem; height: 1rem; }
.qff-amc-progress__label { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--qff-charcoal-45); }
.qff-amc-progress__bar { margin-top: 0.625rem; height: 4px; width: 100%; background: var(--qff-navy-10); border-radius: 9999px; overflow: hidden; }
.qff-amc-progress__fill { height: 100%; width: 6%; background: var(--qff-action); border-radius: 9999px; transition: width 0.3s ease-out; }

/* ===== Step ===== */
.qff-amc-step { margin-top: 1.5rem; }
.qff-amc-step__question { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-amc-step__question { font-size: 32px; } }
.qff-amc-step__help { margin-top: 0.625rem; font-size: 14.5px; color: var(--qff-charcoal-60); line-height: 1.6; }
.qff-amc-step__fields { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.75rem; }

.qff-amc-field__label { margin-bottom: 0.625rem; font-size: 14px; font-weight: 600; color: var(--qff-charcoal); }
.qff-amc-field__optional { margin-left: 0.5rem; font-weight: 400; color: var(--qff-charcoal-45); }

/* ===== Option cards ===== */
.qff-amc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) {
  .qff-amc-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qff-amc-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.qff-amc-card {
  position: relative; text-align: left; border-radius: var(--qff-radius-sm);
  border: 1px solid var(--qff-navy-15); background: #fff;
  padding: 1rem 1.125rem; min-height: 76px; transition: border-color 0.2s ease, background-color 0.2s ease;
}
.qff-amc-card:hover { border-color: var(--qff-navy-25); }
.qff-amc-card.is-selected { border-color: var(--qff-action); background: rgba(245, 27, 42, 0.04); box-shadow: 0 0 0 1px var(--qff-action); }
.qff-amc-card__check {
  position: absolute; top: 0.75rem; right: 0.75rem; display: none;
  align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  border-radius: 9999px; background: var(--qff-action);
}
.qff-amc-card__check svg { width: 0.75rem; height: 0.75rem; color: #fff; }
.qff-amc-card.is-selected .qff-amc-card__check { display: flex; }
.qff-amc-card__icon { display: block; margin-bottom: 0.625rem; }
.qff-amc-card__icon svg { width: 1.25rem; height: 1.25rem; color: var(--qff-navy); }
.qff-amc-card.is-selected .qff-amc-card__icon svg { color: var(--qff-action); }
.qff-amc-card__label { display: block; font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; padding-right: 1.5rem; }
.qff-amc-card__desc { display: block; margin-top: 0.375rem; font-size: 13.5px; color: var(--qff-charcoal-55); line-height: 1.5; }

/* ===== Number input ===== */
.qff-amc-number { display: block; width: 100%; max-width: 16rem; min-height: 48px; border-radius: var(--qff-radius-sm); border: 1px solid var(--qff-navy-15); padding: 0 0.875rem; font-size: 15px; color: var(--qff-charcoal); }
.qff-amc-number:focus { outline: 2px solid var(--qff-action); outline-offset: 1px; border-color: var(--qff-action); }

/* ===== Area picker ===== */
.qff-amc-area__search-wrap { position: relative; }
.qff-amc-area__search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--qff-charcoal-35); }
.qff-amc-area__search { display: block; width: 100%; min-height: 48px; padding-left: 2.5rem; padding-right: 0.875rem; border-radius: var(--qff-radius-sm); border: 1px solid var(--qff-navy-15); font-size: 15px; }
.qff-amc-area__search:focus { outline: 2px solid var(--qff-action); outline-offset: 1px; border-color: var(--qff-action); }
.qff-amc-area__list { margin-top: 0.75rem; max-height: 280px; overflow-y: auto; border-radius: var(--qff-radius-sm); border: 1px solid var(--qff-navy-15); }
.qff-amc-area__item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; padding: 0.875rem 1rem; min-height: 48px; border-bottom: 1px solid var(--qff-navy-06); background: #fff; }
.qff-amc-area__item:last-child { border-bottom: 0; }
.qff-amc-area__item:hover { background: var(--qff-offwhite); }
.qff-amc-area__item.is-selected { background: rgba(245, 27, 42, 0.05); }
.qff-amc-area__item-label { display: flex; align-items: center; gap: 0.625rem; font-size: 15px; color: var(--qff-charcoal); }
.qff-amc-area__item-label svg { width: 1rem; height: 1rem; color: var(--qff-action); flex-shrink: 0; }
.qff-amc-area__check { display: none; }
.qff-amc-area__check svg { width: 1rem; height: 1rem; color: var(--qff-action); }
.qff-amc-area__item.is-selected .qff-amc-area__check { display: block; }
.qff-amc-area__no-match { padding: 1rem; font-size: 14.5px; color: var(--qff-charcoal-55); }
.qff-amc-area__other { margin-top: 0.75rem; width: 100%; text-align: left; padding: 0.875rem 1rem; min-height: 48px; border-radius: var(--qff-radius-sm); border: 1px solid var(--qff-navy-15); font-size: 15px; font-weight: 500; color: var(--qff-charcoal-70); }
.qff-amc-area__other:hover { border-color: var(--qff-navy-25); }
.qff-amc-area__other.is-selected { border-color: var(--qff-action); background: rgba(245, 27, 42, 0.04); color: var(--qff-charcoal); }

/* ===== Continue / saved ===== */
.qff-amc-step__continue { margin-top: 1.75rem; }
.qff-amc-step__hint { margin-top: 0.625rem; font-size: 13px; color: var(--qff-charcoal-45); }
.qff-amc-step__saved { margin-top: 1.5rem; font-size: 13px; font-weight: 600; color: var(--qff-action); }

/* ===== Contact gate ===== */
.qff-amc-contact-form { margin-top: 1.75rem; }
.qff-amc-field-error { margin-top: 0.375rem; font-size: 13px; color: var(--qff-action); }
.qff-amc-privacy-note { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: flex-start; background: #fff; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 1rem; }
.qff-amc-privacy-note svg { width: 1rem; height: 1rem; color: var(--qff-navy); flex-shrink: 0; margin-top: 0.15rem; }
.qff-amc-privacy-note p { font-size: 13.5px; color: var(--qff-charcoal-65); line-height: 1.6; }
.qff-amc-privacy-note a { color: var(--qff-navy); font-weight: 600; text-decoration: underline; }
.qff-amc-contact-actions { margin-top: 1.75rem; display: flex; flex-direction: column-reverse; gap: 0.75rem; }
@media (min-width: 640px) { .qff-amc-contact-actions { flex-direction: row; align-items: center; } }
.qff-amc-contact-actions [data-amc-contact-submit] { flex: 1; }

.qff-amc-selections { margin-top: 2rem; }
.qff-amc-selections__label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--qff-charcoal-45); }
.qff-amc-summary { margin-top: 0.75rem; background: #fff; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 0.5rem 1.25rem; display: grid; grid-template-columns: 1fr auto; }
.qff-amc-summary dt { grid-column: 1; font-size: 13.5px; color: var(--qff-charcoal-55); padding: 0.625rem 0; border-top: 1px solid var(--qff-navy-06); }
.qff-amc-summary dd { grid-column: 2; font-size: 14.5px; font-weight: 500; color: var(--qff-charcoal); text-align: right; padding: 0.625rem 0; border-top: 1px solid var(--qff-navy-06); }
.qff-amc-summary dt:first-of-type, .qff-amc-summary dd:first-of-type { border-top: 0; }

/* ===== Result ===== */
.qff-amc-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--qff-action); }
.qff-amc-result-title { margin-top: 1rem; font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-amc-result-title { font-size: 32px; } }

.qff-amc-range-card { margin-top: 1.5rem; background: var(--qff-navy); color: #fff; border-radius: var(--qff-radius-sm); padding: 1.5rem; }
@media (min-width: 640px) { .qff-amc-range-card { padding: 2rem; } }
.qff-amc-range-card__figure { font-family: var(--qff-font-display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-amc-range-card__figure { font-size: 42px; } }
.qff-amc-range-card__note { margin-top: 0.75rem; font-size: 14.5px; color: var(--qff-white-70); }

.qff-amc-result-section { margin-top: 1.75rem; }
.qff-amc-result-section h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; letter-spacing: -0.01em; }
.qff-amc-result-section .qff-amc-summary { margin-top: 1rem; }

.qff-amc-result-grid { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .qff-amc-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qff-amc-result-card { border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 1.25rem; background: #fff; }
.qff-amc-result-card h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 16px; letter-spacing: -0.01em; }
.qff-amc-result-card ul { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; }
.qff-amc-result-card li { font-size: 14px; color: var(--qff-charcoal-65); line-height: 1.6; }

.qff-amc-result-disclaimer { margin-top: 1.5rem; font-size: 14px; color: var(--qff-charcoal-60); line-height: 1.6; }

.qff-amc-result-next { margin-top: 2rem; }
.qff-amc-result-next h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; letter-spacing: -0.01em; }
.qff-amc-result-next > p { margin-top: 0.5rem; font-size: 15px; color: var(--qff-charcoal-65); line-height: 1.6; }
.qff-amc-result-actions { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .qff-amc-result-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== SEO landing page (page-amc-cost-calculator-dubai.php) extras ===== */
.qff-amc-mid-cta { border-top: 1px solid var(--qff-navy-10); border-bottom: 1px solid var(--qff-navy-10); background: var(--qff-offwhite); padding: 3rem 0; text-align: center; }
.qff-amc-mid-cta h2 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 26px; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-amc-mid-cta h2 { font-size: 30px; } }
.qff-amc-mid-cta p { margin: 0.75rem auto 0; max-width: 34rem; font-size: 15px; color: var(--qff-charcoal-60); line-height: 1.6; }
.qff-amc-mid-cta .qff-btn { margin-top: 1.75rem; }
.qff-amc-hero-trust { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .qff-amc-hero-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qff-amc-hero-trust li { border-top: 2px solid var(--qff-navy-10); padding-top: 1rem; }
.qff-amc-hero-trust svg { width: 1rem; height: 1rem; color: var(--qff-action); }
.qff-amc-hero-trust p:first-of-type { margin-top: 0.625rem; font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 15px; letter-spacing: -0.01em; }
.qff-amc-hero-trust p:last-of-type { margin-top: 0.25rem; font-size: 13.5px; color: var(--qff-charcoal-55); line-height: 1.5; }