/* Spotly 2.1 — shared quote actions, mobile contact bar and nearby proof. */
.quote-hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 28px; }
.quote-rating { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: #f6fd27; }
.quote-rating a { color: inherit; text-underline-offset: 4px; }
.quote-phone-hint { display: block; margin-top: 6px; color: #ccc; font-size: 12px; line-height: 1.5; }
.quote-price-action { margin: 28px 0 0; }
.quote-price-action .btn-primary { max-width: 100%; white-space: normal; text-align: center; color: #231f20; text-decoration: none; }
.quote-mobile-controls { display: contents; }
.quote-mobile-bar { display: none; }
.quote-mobile-bar[hidden], .quote-rating[hidden] { display: none !important; }
@media (max-width: 980px) {
  .quote-mobile-bar { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #231f20; border-top: 1px solid #f6fd27; box-shadow: 0 -4px 16px #0005; }
  .quote-mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 8px; color: #231f20; background: #f6fd27; border: 1px solid #f6fd27; font: 700 16px/1.3 Arial, sans-serif; text-decoration: none; text-align: center; }
  .quote-mobile-bar a[href^="sms:"] { background: transparent; color: #f6fd27; }
  .quote-mobile-bar a:focus-visible { outline: 2px solid white; outline-offset: 2px; }
  body { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  .quote-mobile-controls .back-to-top { position: absolute; bottom: calc(100% + 16px); }
  .quote-mobile-controls {
    position: fixed; z-index: 95; bottom: 0; left: 0; right: 0; display: block;
    opacity: 0;
    transform: translateY(16px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
  }
  .quote-mobile-controls.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quote-mobile-controls { transition: none; }
}
@media (max-width: 680px) {
  .quote-hero-actions { max-width: 100%; gap: 14px 24px; }
  .quote-hero-actions .btn-primary { flex-basis: 100%; text-align: center; }
  .city-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; }
  .city-actions .btn-primary { grid-column: 1 / -1; }
  .city-actions .text-link { display: flex; justify-content: center; align-items: center; min-height: 44px; }
  .quote-price-action .btn-primary { width: 100%; }
}

/* Service-area availability links use the same visible brand treatment. */
a.quote-zip-link, .city-page a.quote-zip-link { color: #f6fd27; text-decoration: underline; text-underline-offset: 4px; }

/* 2.3: consistent hero contact-link size on desktop and mobile. */
.quote-hero-actions .text-link, .city-actions .text-link { font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
.city-actions .text-link { line-height: 1.25; }

/* 2.5: match quote-button typography without changing existing link sizes. */
a[href="/upholstery-stain-removal/"],
a[href="/pet-stain-odor-removal/"] {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 2.7: stronger header quote action on every public page. */
.nav-links a.nav-cta, #mobileMenu a[href$="#form-hero-sec"] { font-weight: 800 !important; }

/* 2.12: mobile hero actions form one compact, aligned group. */
@media (max-width: 680px) {
  .quote-hero-actions, .city-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 12px;
    align-items: stretch;
  }
  .quote-hero-actions .btn-primary, .city-actions .btn-primary {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .quote-hero-actions .text-link, .city-actions .text-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 10px 6px;
    box-sizing: border-box;
    border: 1px solid #91943d;
    border-radius: 0;
    background: transparent;
    color: #eeeae6;
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
  }
  .quote-hero-actions .text-link:focus-visible, .city-actions .text-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  .quote-rating {
    width: 100%;
    margin: 16px 0 0;
    text-align: center;
  }
}

/* 2.14: discreet mobile separator between quote and contact alternatives. */
@media (max-width: 680px) {
  .quote-hero-actions, .city-actions { row-gap: 6px; }
  .quote-hero-actions::before, .city-actions::before {
    content: "OR";
    grid-column: 1 / -1;
    grid-row: 2;
    color: #aaa;
    font: 400 14px/18px var(--font-head, sans-serif);
    letter-spacing: 0;
    text-align: center;
  }
  .quote-hero-actions .btn-primary, .city-actions .btn-primary { grid-row: 1; }
  .quote-hero-actions .text-link, .city-actions .text-link { grid-row: 3; }
}

/* Accessible optional photo picker and removable previews. */
.booking-form input[type=file] { display:block; position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.form-field:has(input[type=file]:focus-visible) .file-upload-label { outline:2px solid var(--yellow); outline-offset:4px; }
.photo-upload-status { font-size:14px; line-height:1.5; color:#ccc; overflow-wrap:anywhere; margin:8px 0 0; }
.photo-upload-status:empty { display:none; }
.photo-upload-status.is-error { color:#ffb4a9; }
.photo-upload-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.photo-upload-item button { min-height:44px; padding:6px 10px; color:var(--yellow); background:transparent; border:1px solid var(--border); font:inherit; cursor:pointer; }
.photo-upload-item button:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }

.booking-form .form-error { grid-column:1 / -1; color:#ffb4a9; padding:12px; border:1px solid currentColor; font-size:14px; line-height:1.5; }
.booking-form .form-error[hidden] { display:none; }

/* 2.22: prevent focus auto-zoom on touch devices while preserving pinch zoom. */
@media (max-width: 980px), (pointer: coarse) {
  .booking-form .form-field input:not([type=file]):not([type=hidden]),
  .booking-form .form-field textarea,
  .booking-form .form-field select {
    font-size: max(16px, 1rem);
    min-width: 0;
    max-width: 100%;
  }
  .booking-form .form-field { min-width: 0; }
}
