/* ================================================
   AutoTech Parts Store — Custom Styles
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,800;1,900&display=swap');

:root {
    --at-blue:  #1366AF;
    --at-red:   #E30F13;
    --at-dark:  #1e1e1e;
}

/* ------------------------------------------------
   Global links
   ------------------------------------------------ */
a { color: #1366AF; }
a:hover { color: #E30F13; }

/* ------------------------------------------------
   Bootstrap primary = brand blue
   ------------------------------------------------ */
.btn-primary {
    background-color: #1366AF;
    border-color: #1366AF;
    color: #fff;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #E30F13;
    border-color: #E30F13;
    color: #fff;
}
.btn-primary:active {
    background-color: #b50c10 !important;
    border-color: #b50c10 !important;
}
.btn-outline-primary {
    color: #1366AF;
    border-color: #1366AF;
}
.btn-outline-primary:hover {
    background-color: #1366AF;
    border-color: #1366AF;
    color: #fff;
}
.btn-danger {
    background-color: #E30F13;
    border-color: #E30F13;
}
.btn-danger:hover {
    background-color: #b50c10;
    border-color: #b50c10;
}

/* ------------------------------------------------
   Top contact bar
   ------------------------------------------------ */
.top-bar {
    background-color: #1366AF;
    padding: 6px 0;
    font-size: .82rem;
}
.top-bar-link {
    color: #fff;
    text-decoration: none;
    transition: color .15s;
}
.top-bar-link:hover { color: rgba(255,255,255,.75); }
.top-bar-social {
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    transition: color .15s;
}
.top-bar-social:hover { color: rgba(255,255,255,.75); }

/* ------------------------------------------------
   Navbar — white background
   ------------------------------------------------ */
.navbar {
    background-color: #fff !important;
    border-bottom: 3px solid #1366AF;
}
.navbar .nav-link          { color: #333 !important; font-weight: 500; }
.navbar .nav-link:hover    { color: #E30F13 !important; }
.navbar .nav-link.active   { color: #1366AF !important; }
.navbar .navbar-toggler    { border-color: #1366AF; }

.nav-logo {
    height: 48px;
    width: auto;
    display: block;
}

/* Dropdown menu links */
.dropdown-menu .dropdown-item       { color: #333; }
.dropdown-menu .dropdown-item:hover { color: #E30F13; background: #f8f9fa; }

/* ------------------------------------------------
   Cart badge
   ------------------------------------------------ */
.cart-badge {
    min-width: 18px;
    min-height: 18px;
    font-size: .65rem;
    background-color: #E30F13 !important;
    color: #fff !important;
}

/* ------------------------------------------------
   Hero banner — centered, 60% width
   ------------------------------------------------ */
.hero-banner {
    width: 100%;
    background: #fff;
    padding: 30px 0;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}
.hero-banner-img {
    width: 60%;
    max-width: 900px;
    height: auto;
    display: inline-block;
    object-fit: contain;
}

/* ------------------------------------------------
   Make tiles
   ------------------------------------------------ */
.make-tile:hover {
    border-color: #1366AF !important;
    transform: translateY(-2px);
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.12) !important;
}
.make-tile:hover .fw-bold { color: #E30F13 !important; }

/* ------------------------------------------------
   Category tiles
   ------------------------------------------------ */
.category-tile { transition: transform .15s, box-shadow .15s; background: #fff; }
.category-tile:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12) !important; }

/* ------------------------------------------------
   Product cards
   ------------------------------------------------ */
.product-card { transition: transform .15s, box-shadow .15s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.14) !important; }
.product-thumb {
    height: 200px;
    object-fit: contain;
    background: #f8f9fa;
    padding: .5rem;
}

/* ------------------------------------------------
   Low stock badge
   ------------------------------------------------ */
.badge-stock-low { background-color: #E30F13; color: #fff; }

/* ------------------------------------------------
   Pagination
   ------------------------------------------------ */
.page-link { color: #1366AF; }
.page-link:hover { color: #E30F13; }
.page-item.active .page-link {
    background-color: #1366AF;
    border-color: #1366AF;
    color: #fff;
}

/* ------------------------------------------------
   Forms
   ------------------------------------------------ */
.form-control:focus,
.form-select:focus {
    border-color: #1366AF;
    box-shadow: 0 0 0 .2rem rgba(19,102,175,.2);
}

/* ------------------------------------------------
   Footer
   ------------------------------------------------ */
.site-footer { background-color: #1e1e1e !important; }
.footer-logo { height: 38px; width: auto; display: block; }
.footer-link {
    color: #adb5bd;
    text-decoration: none;
    transition: color .15s;
}
.footer-link:hover { color: #fff; }
.footer-social {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.footer-social:hover { background: #1366AF; color: #fff; }

/* ------------------------------------------------
   Admin sidebar
   ------------------------------------------------ */
.admin-body { overflow-x: hidden; background: #f1f3f5; }
#admin-wrapper { min-height: 100vh; }
#admin-sidebar {
    width: 240px;
    min-height: 100vh;
    background-color: #1e1e1e !important;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width .2s;
    flex-shrink: 0;
}
#admin-sidebar .nav-link {
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    color: #adb5bd !important;
    transition: background .15s, color .15s;
}
#admin-sidebar .nav-link:hover,
#admin-sidebar .nav-link.active {
    background-color: #1366AF;
    color: #fff !important;
}
.admin-topbar {
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    border-bottom: 3px solid #1366AF;
}

/* ------------------------------------------------
   Product image gallery
   ------------------------------------------------ */
.pg-wrap { display: flex; flex-direction: column; gap: 10px; }

/* Main image box */
.pg-main {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}
.pg-main a { display: block; }
.pg-main img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    padding: 16px;
    display: block;
    transition: opacity .18s ease;
}

/* Arrows — inside the box */
.pg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.9);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: #1e1e1e;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: background .15s, color .15s, box-shadow .15s;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.pg-arrow:hover { background: #1366AF; color: #fff; border-color: #1366AF; box-shadow: 0 3px 10px rgba(19,102,175,.3); }
.pg-prev { left: 10px; }
.pg-next { right: 10px; }

/* Counter */
.pg-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: .72rem;
    padding: 2px 9px;
    border-radius: 20px;
    pointer-events: none;
    letter-spacing: .03em;
}

/* Thumbnails strip */
.pg-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
.pg-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #f8f9fa;
    transition: border-color .15s;
}
.pg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
}
.pg-thumb:hover { border-color: #aac8e8; }
.pg-thumb.active { border-color: #1366AF; }

/* ------------------------------------------------
   Misc
   ------------------------------------------------ */
.font-monospace { font-family: 'SFMono-Regular', Consolas, monospace; }
.product-description { line-height: 1.75; }
.product-thumb-sm { transition: opacity .15s; }
.product-thumb-sm:hover { opacity: .75; }
#stripe-element { min-height: 46px; display: flex; align-items: center; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */
@media (max-width: 991px) {
    #admin-sidebar { width: 200px; }
    .product-thumb { height: 160px; }
}
@media (max-width: 767px) {
    .hero-banner-img { width: 90%; }
}
@media (max-width: 575px) {
    .product-thumb { height: 140px; }
    .hero-banner-img { width: 100%; }
}