/* ============================================================
   Bell Wasik Lifetime Parts — modern theme
   ============================================================ */

:root {
   --bw-navy: #163a63;
   --bw-navy-2: #1f4f86;
   --bw-blue: #2EA4DD;
   --bw-blue-600: #1d8ec5;
   --bw-blue-100: #e7f4fb;
   --bw-ink: #1f2c3a;
   --bw-muted: #5d6b7a;
   --bw-line: #e2e8f0;
   --bw-bg: #eef2f7;
   --bw-card: #ffffff;
   --bw-radius: 16px;
   --bw-radius-sm: 10px;
   --bw-shadow: 0 10px 30px rgba(22, 58, 99, 0.08);
   --bw-shadow-sm: 0 4px 14px rgba(22, 58, 99, 0.07);
   --bw-shadow-hover: 0 16px 40px rgba(22, 58, 99, 0.16);
   --bw-gradient: linear-gradient(135deg, var(--bw-navy) 0%, var(--bw-blue-600) 55%, var(--bw-blue) 100%);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   color: var(--bw-ink);
   background-color: var(--bw-bg);
   background-image: radial-gradient(1200px 600px at 100% -5%, #e6f3fb 0%, rgba(230, 243, 251, 0) 60%),
                     radial-gradient(900px 500px at -10% 110%, #e9eef7 0%, rgba(233, 238, 247, 0) 55%);
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Poppins', 'Inter', sans-serif;
   color: var(--bw-navy);
   font-weight: 700;
   letter-spacing: -0.01em;
}

p { line-height: 1.7; color: var(--bw-ink); }

a { color: var(--bw-blue-600); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bw-navy); }

/* ---------- Brand helpers (kept for existing markup) ---------- */
.lifetime-bg { background-color: var(--bw-blue) !important; }
.lifetime-text { color: var(--bw-blue-600) !important; }
.lifetime-border { border-bottom: 2px solid var(--bw-blue); }
.min-100vh { min-height: 100vh; }
.custom-container { max-width: 1100px; }
.sticky-top { top: -1px !important; }

/* ---------- Page surface ---------- */
.min-100vh.bg-light {
   background: transparent !important;
}

/* Page heading with accent underline */
main h2 {
   font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
   position: relative;
   padding-bottom: 1rem !important;
}
main h2.text-center::after {
   content: "";
   display: block;
   width: 64px;
   height: 4px;
   margin: 0.65rem auto 0;
   border-radius: 4px;
   background: var(--bw-gradient);
}

/* Intro paragraph readability */
main .custom-container > .row p {
   color: var(--bw-muted);
}

/* ---------- Header / hero images ---------- */
main img.img-fluid {
   border-radius: var(--bw-radius);
   box-shadow: var(--bw-shadow);
}
/* page banner images: consistent, modern crop */
main .custom-container > .row img.img-fluid {
   width: 100%;
   max-height: 320px;
   object-fit: cover;
}

/* ---------- Cards ---------- */
.bw-card {
   background: var(--bw-card);
   border: 1px solid var(--bw-line);
   border-radius: var(--bw-radius);
   box-shadow: var(--bw-shadow);
   padding: 1.75rem;
}
@media (min-width: 768px) {
   .bw-card { padding: 2.25rem; }
}

/* ---------- Forms ---------- */
.nt-form-label {
   font-weight: 600;
   font-size: 0.875rem;
   color: #33414f;
   letter-spacing: 0.01em;
}

.form-control {
   border: 1px solid #d7dee7;
   border-radius: var(--bw-radius-sm);
   padding: 0.7rem 0.9rem;
   background-color: #fbfcfe;
   transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover { border-color: #c2cdda; }
.form-control:focus {
   border-color: var(--bw-blue);
   background-color: #fff;
   box-shadow: 0 0 0 0.2rem rgba(46, 164, 221, 0.18);
}

/* ---------- Buttons ---------- */
.btn.lifetime-bg {
   background: var(--bw-gradient) !important;
   border: none;
   border-radius: 999px;
   padding: 0.7rem 2.2rem;
   font-weight: 600;
   letter-spacing: 0.02em;
   box-shadow: 0 8px 20px rgba(29, 142, 197, 0.32);
   transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn.lifetime-bg:hover,
.btn.lifetime-bg:focus {
   transform: translateY(-2px);
   filter: brightness(1.04);
   box-shadow: 0 12px 26px rgba(29, 142, 197, 0.42);
   color: #fff;
}
.btn.lifetime-bg:active { transform: translateY(0); }

.print-button {
   border: 1px solid var(--bw-blue);
   color: var(--bw-blue-600);
   border-radius: 999px;
   padding: 0.4rem 1.2rem;
   font-weight: 600;
   transition: all .15s ease;
}
.print-button:hover {
   background: var(--bw-blue);
   color: #fff;
}

/* ---------- Alerts ---------- */
.alert {
   border: none;
   border-radius: var(--bw-radius-sm);
   box-shadow: var(--bw-shadow-sm);
}
.alert-success { background: #e8f7ee; color: #14653b; }
.alert-danger { background: #fdeaea; color: #9b1c1c; }
.alert ul, .alert li { list-style: none; margin: 0; }

/* ============================================================
   Navigation
   ============================================================ */
#topbar {
   background-color: rgba(255, 255, 255, 0.82) !important;
   backdrop-filter: saturate(180%) blur(14px);
   -webkit-backdrop-filter: saturate(180%) blur(14px);
   border-bottom: 1px solid rgba(22, 58, 99, 0.08) !important;
   box-shadow: 0 4px 20px rgba(22, 58, 99, 0.07);
}
/* slim brand accent line across the very top */
#topbar::before {
   content: "";
   display: block;
   height: 3px;
   background: var(--bw-gradient);
}
#topbar .navbar { padding: 0.4rem 1.25rem; }
#topbar .navbar-brand { margin-right: 0; padding-top: 0; padding-bottom: 0; }
#topbar .navbar-brand img {
   width: 205px !important;
   transition: transform .2s ease;
}
#topbar .navbar-brand img:hover { transform: translateY(-1px) scale(1.02); }

#topbar .navbar-nav { align-items: center; }
#topbar .nav-item { margin: 0 !important; }
#topbar .nav-link {
   position: relative;
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--bw-navy) !important;
   padding: 0.55rem 0.95rem !important;
   transition: color .15s ease;
}
#topbar .nav-link::after {
   content: "";
   position: absolute;
   left: 50%; bottom: 0.3rem;
   transform: translateX(-50%);
   width: 0; height: 2px;
   border-radius: 2px;
   background: var(--bw-gradient);
   transition: width .25s ease;
}
#topbar .nav-link:hover { color: var(--bw-blue-600) !important; }
#topbar .nav-link:hover::after { width: calc(100% - 1.9rem); }
/* active state (existing markup adds .fw-bold.lifetime-border) */
#topbar .nav-link.lifetime-border {
   color: var(--bw-blue-600) !important;
   border-bottom: none !important;
}
#topbar .nav-link.lifetime-border::after { width: calc(100% - 1.9rem); }

#topbar .navbar-toggler {
   border: 1px solid rgba(22, 58, 99, 0.16);
   border-radius: 10px;
   padding: 0.35rem 0.6rem;
}
#topbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(46, 164, 221, 0.25); }

@media (max-width: 991px) {
   #topbar .nav-link::after { display: none; }
   #topbar .navbar-nav { padding: 0.5rem 0; }
   #topbar .nav-item.mx-4 { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ============================================================
   Accordion (FAQ)
   ============================================================ */
.accordion { border-radius: var(--bw-radius); }
.accordion-item {
   border: 1px solid var(--bw-line);
   border-radius: var(--bw-radius-sm) !important;
   margin-bottom: 0.75rem;
   overflow: hidden;
   box-shadow: var(--bw-shadow-sm);
}
.accordion-button {
   background-color: #fff !important;
   color: var(--bw-navy) !important;
   font-weight: 600 !important;
   font-size: 1.02rem;
   padding: 1.1rem 1.25rem;
}
.accordion-button:not(.collapsed) {
   background-color: var(--bw-blue-100) !important;
   color: var(--bw-navy) !important;
   box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(46, 164, 221, 0.18); }

/* custom chevron via Font Awesome (loaded in layout) */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
   background-image: none !important;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f078";
   color: var(--bw-blue-600);
   width: auto; height: auto;
   transition: transform .2s ease;
}
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.accordion-body { color: var(--bw-muted); line-height: 1.7; }

/* ============================================================
   About — feature cards
   ============================================================ */
.bw-feature {
   background: var(--bw-card);
   border: 1px solid var(--bw-line);
   border-radius: var(--bw-radius);
   box-shadow: var(--bw-shadow-sm);
   padding: 1.75rem 1rem;
   text-align: center;
   height: 100%;
   transition: transform .2s ease, box-shadow .2s ease;
}
.bw-feature:hover { transform: translateY(-5px); box-shadow: var(--bw-shadow-hover); }
.bw-feature img { width: 96px; height: 96px; margin-bottom: 0.5rem; box-shadow: none !important; border-radius: 0 !important; }
.bw-feature h4 { font-size: 1.05rem; letter-spacing: 0.04em; }

/* ============================================================
   Contact — info panel
   ============================================================ */
.bw-hours.bw-card { padding: 1.6rem 1.4rem; }
.bw-hours-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 0.75rem;
   padding: 0.4rem 0;
   border-bottom: 1px dashed var(--bw-line);
}
.bw-hours-row:last-child { border-bottom: none; }
.bw-hours-row span:first-child { color: var(--bw-muted); }
.bw-hours-row span:last-child { font-weight: 600; color: var(--bw-ink); white-space: nowrap; }
.bw-contact-line { font-size: 0.95rem; }
.bw-contact-line i { width: 1.1rem; }
.contact-map iframe {
   border-radius: var(--bw-radius);
   box-shadow: var(--bw-shadow);
   border: 1px solid var(--bw-line);
}
@media (max-width: 767px) {
   .contact-map iframe { margin-top: 0.5rem; }
}

/* ============================================================
   Terms readability
   ============================================================ */
.bw-terms p, .bw-terms li { color: #34404d; line-height: 1.75; }
.bw-terms h5 { margin-top: 1.5rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
   background: var(--bw-gradient);
   color: rgba(255, 255, 255, 0.88);
   padding: 2.5rem 1rem 1.5rem;
   margin-top: 2rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--bw-blue-100); }
.site-footer img { width: 230px; max-width: 80%; }
.site-footer .footer-contact i { width: 1.2rem; color: var(--bw-blue-100); }
.site-footer hr { border-color: rgba(255, 255, 255, 0.25); }
.site-footer .footer-copy { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   Loader / spinner (behavior unchanged)
   ============================================================ */
#loader {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 30, 50, 0.55);
    backdrop-filter: blur(2px);
    z-index: 2000;
    cursor: pointer;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid var(--bw-blue);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--bw-blue) transparent transparent transparent;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
}

.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   Responsive / mobile polish
   ============================================================ */
@media (max-width: 991px) {
   /* logo never crowds the hamburger toggle */
   #topbar .navbar-brand img { width: 200px !important; }
}

@media (max-width: 575px) {
   #topbar .navbar-brand img { width: 168px !important; }
   main .custom-container > .row img.img-fluid { max-height: 210px; }
   .bw-card { padding: 1.35rem; }
   main h2 { font-size: 1.65rem; }
   .site-footer { text-align: center; }
   .site-footer img { width: 200px; }
}

/* never let any media or embed cause horizontal overflow */
img, iframe { max-width: 100%; }