/* ════════════════════════════════════════════════
   B&J Air Solutions — Shared Stylesheet
   ════════════════════════════════════════════════ */

/* ── Material Symbols thin stroke ── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Ambient shadow (blue-tinted) ── */
.ambient-shadow {
    box-shadow: 0px 4px 20px rgba(0, 88, 188, 0.05);
}

/* ── Hover lift interaction ── */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px rgba(0, 88, 188, 0.10);
}

/* ── Glassmorphism navbar ── */
.glass-nav {
    background: rgba(249, 249, 255, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(193, 198, 215, 0.30);
}

/* ── Recessed inputs ── */
.input-recessed {
    background-color: #F1F5F9;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.input-recessed:focus {
    border-color: #0058bc;
    outline: none;
    box-shadow: none;
}

/* ── Circulation logo animation ── */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Cleanliness meter fill animation ── */
@keyframes fillMeter {
    from { width: 0; }
    to   { width: 99.9%; }
}
.meter-fill {
    animation: fillMeter 2s ease-out forwards;
}

/* ── Page hero gradient overlay ── */
.hero-overlay {
    background: linear-gradient(to right, rgba(249, 249, 255, 0.90), rgba(249, 249, 255, 0.70), transparent);
}

/* ── Smooth scroll & selection ── */
html { scroll-behavior: smooth; }
::selection {
    background: #d8e2ff;
    color: #001a41;
}

/* ── Focus visible outline ── */
*:focus-visible {
    outline: 2px solid #0058bc;
    outline-offset: 2px;
}

/* ── Form validation states (used dynamically by JS) ── */
.border-error {
    border-color: #ba1a1a !important;
}
.opacity-70 {
    opacity: 0.7;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Mobile sticky bar safe area ── */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 12px);
}