/* ═══════════════════════════════════════════════════════
   804 AVENUE — Service pages: calculators, packages, certs
   ═══════════════════════════════════════════════════════ */

/* ── Quote Calculator ── */
.quote-section { background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-deep) 100%); padding: 64px 0; position: relative; overflow: hidden; }
.quote-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, var(--accent-10), transparent 60%); pointer-events: none; }
.quote-section .container { position: relative; z-index: 1; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 36px; }
.quote-card { background: var(--bg-card); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(15,23,42,.1), 0 0 0 1px var(--accent-10); }
.quote-card-head { padding: 22px 26px 0; border-bottom: 1px solid var(--border-subtle); padding-bottom: 18px; background: linear-gradient(165deg, var(--bg-card), var(--bg-elevated)); }
.quote-card-head h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.quote-card-head p { font-size: .82rem; color: var(--text-secondary); }
.quote-form { padding: 22px 26px 26px; }
.quote-field { margin-bottom: 14px; }
.quote-field label { display: block; font-family: var(--font-nav); font-size: .6rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 7px; }
.quote-field input, .quote-field select, .quote-field textarea { width: 100%; padding: 11px 13px; background: var(--bg-input, #fff); border: 1px solid #e2e5e9; border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: .88rem; transition: border-color .2s ease, box-shadow .2s ease; }
.quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-15); }
.quote-field textarea { min-height: 80px; resize: vertical; }
.quote-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Estimate result box */
.quote-estimate { background: linear-gradient(135deg, var(--accent-15), var(--accent-10)); border: 1px solid var(--accent-20); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 16px; display: none; }
.quote-estimate.show { display: block; }
.quote-estimate-label { font-family: var(--font-nav); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.quote-estimate-range { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.quote-estimate-note { font-size: .72rem; color: var(--text-secondary); margin-top: 4px; }

/* Quote info panel */
.quote-info { display: flex; flex-direction: column; gap: 18px; }
.quote-info-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); }
.quote-info-icon { width: 44px; height: 44px; background: var(--accent-10); border: 1px solid var(--accent-20); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 12px; }
.quote-info-card h4 { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.quote-info-card p { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; }

/* ── Service Packages ── */
.packages-section { background: var(--bg-surface); padding: 64px 0; }
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.pkg-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px; position: relative; transition: var(--transition); box-shadow: 0 2px 12px rgba(15,23,42,.04); }
.pkg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(15,23,42,.1), 0 0 0 1px var(--accent-10); border-color: var(--border-accent); }
.pkg-card--featured { border-color: var(--accent); box-shadow: 0 8px 40px var(--accent-glow); }
.pkg-card--featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--cyan)); color: #fff; font-family: var(--font-nav); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 14px; border-radius: 999px; }
.pkg-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--accent-15), var(--accent-10)); border: 1px solid var(--accent-20); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 16px; }
.pkg-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pkg-tagline { font-size: .78rem; color: var(--text-tertiary); margin-bottom: 16px; }
.pkg-price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 4px; }
.pkg-price small { font-size: .72rem; color: var(--text-tertiary); font-family: var(--font-body); font-weight: 400; }
.pkg-divider { height: 1px; background: var(--border-subtle); margin: 18px 0; }
.pkg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pkg-item { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: var(--text-secondary); line-height: 1.5; }
.pkg-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pkg-item--off { color: var(--text-tertiary); opacity: .65; }
.pkg-item--off svg { color: var(--text-tertiary); }

/* ── Certifications ── */
.certs-section { background: var(--bg-deep); padding: 64px 0; }
.certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 36px; }
.cert-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 22px 18px; text-align: center; transition: var(--transition); }
.cert-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(15,23,42,.08); }
.cert-icon { width: 56px; height: 56px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-15), var(--accent-10)); border: 1px solid var(--accent-20); border-radius: 50%; color: var(--accent); }
.cert-name { font-family: var(--font-nav); font-size: .72rem; font-weight: 700; color: var(--text-primary); letter-spacing: .04em; margin-bottom: 4px; }
.cert-body { font-size: .72rem; color: var(--text-tertiary); line-height: 1.5; }

/* ── Emergency Strip ── */
.emergency-section { background: linear-gradient(90deg, #DC2626, #B91C1C); padding: 32px 0; }
.emergency-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.emergency-badge { display: flex; align-items: center; gap: 12px; }
.emergency-pulse { width: 16px; height: 16px; background: #fff; border-radius: 50%; animation: esPulse 1.4s ease-in-out infinite; flex-shrink: 0; }
@keyframes esPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 50%{box-shadow:0 0 0 12px rgba(255,255,255,0)} }
.emergency-label { font-family: var(--font-nav); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.emergency-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: #fff; }
.emergency-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.emergency-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-family: var(--font-nav); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: var(--transition-fast); }
.emergency-btn--wa { background: #25D366; color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,.4); }
.emergency-btn--wa:hover { filter: brightness(1.1); transform: translateY(-1px); }
.emergency-btn--call { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.emergency-btn--call:hover { background: rgba(255,255,255,.25); }
.emergency-btn--form { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.emergency-btn--form:hover { background: rgba(255,255,255,.2); }

/* ── AMC Calculator ── */
.amc-calc { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: 0 8px 40px rgba(15,23,42,.06); }
.amc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.amc-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.amc-service-check { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-secondary); cursor: pointer; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); transition: var(--transition-fast); }
.amc-service-check:has(input:checked) { background: var(--accent-10); border-color: var(--border-accent); color: var(--text-primary); }
.amc-service-check input { accent-color: var(--accent); }
.amc-result { background: linear-gradient(135deg, var(--accent-15), var(--accent-10)); border: 1px solid var(--border-accent); border-radius: var(--radius-md); padding: 20px 22px; margin-top: 20px; }
.amc-result-header { font-family: var(--font-nav); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.amc-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amc-result-item label { font-size: .72rem; color: var(--text-secondary); display: block; margin-bottom: 2px; }
.amc-result-item strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }

/* ── Maintenance Ticket Form ── */
.ticket-modal .modal-field select option { background: var(--bg-card); }
.priority-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.priority-option { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); font-family: var(--font-nav); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--bg-surface); color: var(--text-secondary); }
.priority-option:has(input:checked) { border-color: var(--accent); background: var(--accent-10); color: var(--accent); }
.priority-option--emergency:has(input:checked) { border-color: var(--danger); background: rgba(220,38,38,.1); color: var(--danger); }
.priority-option input { display: none; }

@media (max-width: 1024px) {
  .quote-grid, .packages-grid { grid-template-columns: 1fr; }
  .amc-grid, .amc-result-grid { grid-template-columns: 1fr; }
  .emergency-inner { flex-direction: column; text-align: center; justify-content: center; }
}
@media (max-width: 640px) {
  .quote-grid-2 { grid-template-columns: 1fr; }
  .packages-grid { grid-template-columns: 1fr; }
  .certs-grid { grid-template-columns: 1fr 1fr; }
  .amc-services-grid { grid-template-columns: 1fr; }
  .priority-selector { grid-template-columns: 1fr; }
}