/* ============================================================
   AutoParts B2B Theme  —  truck / commercial-vehicle spare parts
   Night-sky-blue palette: deep navy + royal blue + sky accent.
   Loaded AFTER the default Bagisto stylesheet, so these rules
   win on source order (a few !important guards for Tailwind utils).
   ============================================================ */

:root {
    --ap-ink:      #0a1b3d;   /* deep night-navy background   */
    --ap-ink-2:    #0f2750;   /* raised panel                 */
    --ap-ink-3:    #1c3a6e;   /* border / hover               */
    --ap-blue:     #2f6fed;   /* primary night-sky blue       */
    --ap-blue-d:   #1c4fc4;   /* hover                        */
    --ap-sky:      #5aa9ff;   /* secondary sky highlight      */
    --ap-text:     #eaf1ff;   /* light text on dark           */
    --ap-muted:    #9fb6dd;   /* muted text                   */
    --ap-line:     rgba(255,255,255,.10);
}

/* ---------- Typography: rugged condensed headings ---------- */
h1, h2, h3, .ap-display {
    font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
    letter-spacing: .3px;
}
h1 { text-transform: uppercase; }

::selection { background: var(--ap-blue); color: #fff; }

a:hover { color: var(--ap-blue-d); }

/* ---------- Site header: blue accent strip + brand feel ---------- */
header.bg-white {
    border-top: 4px solid var(--ap-blue) !important;
}
/* keep the header crisp on dark pages */
header.bg-white .primary-button,
header.bg-white .secondary-button { /* no change, inherits */ }

/* ---------- Primary / secondary buttons -> night-sky blue ---------- */
.primary-button {
    background-color: var(--ap-blue) !important;
    border-color: var(--ap-blue) !important;
    color: #fff !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(47,111,237,.30);
}
.primary-button:hover { background-color: var(--ap-blue-d) !important; opacity: 1 !important; }

.secondary-button {
    color: var(--ap-blue) !important;
    border-color: var(--ap-blue) !important;
    border-radius: 8px !important;
}

/* ---------- "Login to view price" prompt -> blue pill ---------- */
.login-prompt-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(47,111,237,.14);
    color: var(--ap-blue-d) !important;
    border: 1px solid rgba(47,111,237,.45);
    font-weight: 600;
}

/* ---------- Product price accent (logged-in) ---------- */
.price, .final-price, .regular-price {
    color: var(--ap-blue-d);
}

/* ---------- Footer -> dark navy ---------- */
footer.bg-lightOrange,
footer {
    background: var(--ap-ink) !important;
    color: var(--ap-muted) !important;
}
footer.bg-lightOrange h1,
footer.bg-lightOrange h2,
footer.bg-lightOrange h3,
footer h1, footer h2, footer h3 {
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .5px;
}
footer.bg-lightOrange a,
footer a { color: var(--ap-muted) !important; }
footer.bg-lightOrange a:hover,
footer a:hover { color: var(--ap-sky) !important; }
footer.bg-lightOrange .border-t,
footer .border-t { border-color: var(--ap-line) !important; }

/* ============================================================
   Homepage hero + category grid (used by home/index.blade.php)
   ============================================================ */
.ap-hero {
    position: relative;
    width: 100%;
    min-height: 460px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.ap-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10,27,61,.92) 0%, rgba(10,27,61,.55) 55%, rgba(10,27,61,.15) 100%);
}
.ap-hero__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
.ap-hero__eyebrow {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    color: var(--ap-sky);
    border-left: 3px solid var(--ap-blue);
    padding-left: 10px;
    margin-bottom: 14px;
}
.ap-hero__title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(30px, 5vw, 60px);
    line-height: 1.05;
    margin: 0 0 14px;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.ap-hero__title .hl { color: var(--ap-sky); }
.ap-hero__sub {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.7;
    color: #d7e2f7;
    margin-bottom: 26px;
}
.ap-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ap-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    transition: all .18s ease;
}
.ap-btn--solid { background: var(--ap-blue); color: #fff; box-shadow: 0 8px 22px rgba(47,111,237,.40); }
.ap-btn--solid:hover { background: var(--ap-blue-d); color: #fff; transform: translateY(-1px); }
.ap-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.ap-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* Category grid */
.ap-cats {
    max-width: 1180px;
    margin: 56px auto;
    padding: 0 16px;
}
.ap-cats__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
}
.ap-cats__title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 26px;
    color: var(--ap-ink);
    border-left: 4px solid var(--ap-blue);
    padding-left: 12px;
}
.ap-cats__more { color: var(--ap-blue-d); font-weight: 600; text-decoration: none; }
.ap-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}
.ap-cat {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ap-ink-2);
    border: 1px solid #e6ecf7;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
    color: #fff;
}
.ap-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(10,27,61,.25);
    border-color: var(--ap-blue);
}
.ap-cat__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.ap-cat:hover .ap-cat__img { transform: scale(1.06); }
.ap-cat__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: linear-gradient(0deg, rgba(10,27,61,.92), rgba(10,27,61,0));
}
.ap-cat__label small {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--ap-sky);
    text-transform: none;
}

/* Trust / feature strip */
.ap-strip {
    background: var(--ap-ink);
    color: var(--ap-text);
}
.ap-strip__grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}
.ap-strip__item { display: flex; gap: 12px; align-items: center; }
.ap-strip__ico {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(47,111,237,.18);
    color: var(--ap-sky);
    font-size: 20px;
}
.ap-strip__t { font-family: 'Oswald', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.ap-strip__s { font-size: 12px; color: var(--ap-muted); }

/* Section heading shared */
.ap-section {
    max-width: 1180px;
    margin: 56px auto;
    padding: 0 16px;
}
@media (max-width: 640px) {
    .ap-hero { min-height: 380px; }
    .ap-cats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Footer newsletter subscription card ---------- */
/* White card + navy frame on the light-orange footer, so the block
   reads clearly and the form has room to breathe. Styled here (not via
   Tailwind utilities) because autoparts reuses the default theme build,
   whose CSS only contains classes scanned from the default sources. */
.autoparts-newsletter {
    width: 500px;
    max-width: 100%;
    display: grid;
    gap: 12px;
    padding: 28px;
    border: 2px solid var(--ap-blue);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(10, 27, 61, .14);
}
.autoparts-newsletter__title {
    margin: 0;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1.25;
    color: var(--ap-ink) !important;          /* deep navy on white = strong contrast */
}
.autoparts-newsletter__sub {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #3f4a5c !important;                /* dark slate, clear on white */
}
.autoparts-newsletter__form { width: 100%; }
.autoparts-newsletter__field {
    position: relative;
    width: 100%;
}
.autoparts-newsletter__field input[type="email"],
.autoparts-newsletter__input {
    display: block !important;
    width: 100% !important;
    padding: 16px 152px 16px 20px !important;  /* right padding clears the button */
    border: 2px solid #e3d9c6 !important;
    border-radius: 12px !important;
    background: #F1EADF !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    outline: none;
}
.autoparts-newsletter__field input[type="email"]::placeholder { color: #6b7280 !important; }
.autoparts-newsletter__btn,
.autoparts-newsletter__field button[type="submit"] {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    padding: 11px 26px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ap-blue) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: .3px;
    cursor: pointer;
}
.autoparts-newsletter__btn:hover,
.autoparts-newsletter__field button[type="submit"]:hover { background: var(--ap-blue-d) !important; }

@media (max-width: 1060px) {
    .autoparts-newsletter { width: 100%; }
}
@media (max-width: 640px) {
    .autoparts-newsletter__field { position: static; }
    .autoparts-newsletter__field input[type="email"],
    .autoparts-newsletter__input { padding: 14px 16px !important; }
    .autoparts-newsletter__btn,
    .autoparts-newsletter__field button[type="submit"] {
        position: static !important;
        width: 100% !important;
        margin-top: 10px;
    }
}

/* ---------- What's New / News list (CMS page) ---------- */
.wn-page { max-width: 860px; margin: 0 auto; padding: .5rem 0 2rem; }
.wn-page-title {
    font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
    font-size: 2.2rem; line-height: 1.1; text-transform: uppercase;
    letter-spacing: .5px; color: var(--ap-text); margin: 0 0 .35rem;
}
.wn-page-intro { color: var(--ap-muted); font-size: 1rem; margin: 0 0 2rem; }
.wn-foot { margin-top: 2rem; color: var(--ap-muted); font-size: .85rem; }

.wn-list { display: flex; flex-direction: column; gap: 1.5rem; }

.wn-card {
    display: flex; flex-direction: column;
    background: var(--ap-ink-2);
    border: 1px solid var(--ap-line);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    transition: border-color .2s ease, transform .2s ease;
}
.wn-card:hover { border-color: var(--ap-blue); transform: translateY(-2px); }

/* date stays at the top, unchanged position */
.wn-date {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; color: var(--ap-sky);
    text-transform: uppercase; letter-spacing: .6px;
    margin: 0 0 .9rem;
}
.wn-date::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ap-sky); display: inline-block;
}

.wn-row { display: flex; gap: 1.25rem; align-items: flex-start; }

.wn-thumb {
    flex: 0 0 200px; width: 200px; height: 140px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--ap-line); background: var(--ap-ink-3);
}
.wn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wn-body { flex: 1 1 auto; min-width: 0; }
.wn-title {
    font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
    font-size: 1.35rem; line-height: 1.2; margin: 0 0 .5rem;
    text-transform: uppercase; letter-spacing: .3px;
}
.wn-title a { color: var(--ap-text); text-decoration: none; }
.wn-title a:hover { color: var(--ap-sky); }
.wn-desc { color: var(--ap-muted); font-size: .95rem; line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
    .wn-row { flex-direction: column; }
    .wn-thumb { width: 100%; flex-basis: auto; height: 180px; }
    .wn-card { padding: 1rem 1.1rem; }
}

/* ---------- Category placeholder (no image in admin) ---------- */
.ap-cat__ph {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 14px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #1a2b54 0%, #2f6fed 100%);
}
.ap-cats__empty { color: var(--ap-muted); }

/* ---------- About / video block ---------- */
.ap-about { max-width: 1180px; margin: 56px auto; padding: 0 16px; }
.ap-about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: #fff;
    border: 1px solid #e6ecf7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(10,27,61,.08);
}
.ap-about__media { position: relative; }
.ap-video-cover {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #0e1a33 0%, #2f6fed 100%);
    position: relative;
    color: #fff;
}
.ap-video-cover__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #2f6fed;
    display: grid; place-items: center;
    font-size: 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    transition: transform .18s ease;
}
.ap-video-cover:hover .ap-video-cover__play { transform: translate(-50%, -50%) scale(1.08); }
.ap-video-cover__cap {
    position: absolute;
    left: 16px; bottom: 14px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    color: rgba(255,255,255,.9);
}
.ap-about__text { padding: 28px 36px 28px 4px; }
.ap-about__title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    color: var(--ap-ink, #0e1a33);
    margin: 0 0 14px;
}
.ap-about__desc {
    color: #3f4a5c;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px;
}

/* ---------- Video lightbox ---------- */
.ap-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
}
.ap-video-modal[hidden] { display: none; }
.ap-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6,12,28,.8);
}
.ap-video-modal__box {
    position: relative;
    width: min(900px, 92vw);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ap-video-modal__box iframe,
.ap-video-modal__box video {
    width: 100%; height: 100%;
    display: block; border: 0;
}
.ap-video-modal__close {
    position: absolute;
    top: 10px; right: 12px;
    z-index: 2;
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #0e1a33;
    font-size: 22px; line-height: 1;
    cursor: pointer;
}

/* mirrored variant: text on the left, video on the right */
.ap-about--rev .ap-about__text { padding: 28px 4px 28px 36px; }

@media (max-width: 768px) {
    .ap-about__inner { grid-template-columns: 1fr; }
    .ap-about__text { padding: 22px; }
}