/* ROADeShop - site styles on top of Bootstrap 5.3.
   Colors, type and components follow ROADe's products page
   (wallytest.roade.com/testing1234.html) so the shop and the main site match. */
:root {
    --primary-color: #0066cc;
    --secondary-color: #0ea5e9;
    --secondary-dark: #0284c7;
    --secondary-darker: #0369a1;
    --accent-orange: #ff6b35;
    --light-bg: #f8f9fa;
    --dark-bg: #1a1a2e;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --line: #e9ecef;

    --bs-primary: #0284c7;
    --bs-primary-rgb: 2, 132, 199;
    --bs-link-color: #0284c7;
    --bs-link-color-rgb: 2, 132, 199;
    --bs-link-hover-color: #0369a1;
    --bs-link-hover-color-rgb: 3, 105, 161;
    --bs-body-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--slate-800);
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}
main { flex: 1 0 auto; }
.bg-soft { background: var(--light-bg); }

/* ---------- buttons (same as the products page) ---------- */
.btn-primary {
    --bs-btn-bg: #0284c7; --bs-btn-border-color: #0284c7;
    --bs-btn-hover-bg: #0369a1; --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-bg: #075985; --bs-btn-active-border-color: #075985;
    --bs-btn-disabled-bg: #0284c7; --bs-btn-disabled-border-color: #0284c7;
}
.btn-outline-primary {
    --bs-btn-color: #0284c7; --bs-btn-border-color: #0ea5e9;
    --bs-btn-hover-bg: #0284c7; --bs-btn-hover-border-color: #0284c7; --bs-btn-active-bg: #0369a1;
}
.btn-consult, .btn-accent {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff; border: none; border-radius: 50px; font-weight: 600;
    padding: 13px 34px;
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(14, 165, 233, .4);
    position: relative; overflow: hidden;
}
.btn-consult::before, .btn-accent::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .5s;
}
.btn-consult:hover::before, .btn-accent:hover::before { left: 100%; }
.btn-consult:hover, .btn-accent:hover, .btn-consult:focus-visible, .btn-accent:focus-visible {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #fff; transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(14, 165, 233, .6);
}
.btn-accent.btn-sm { padding: 8px 20px; }
.btn-accent.disabled, .btn-accent:disabled { opacity: .55; transform: none; box-shadow: none; }

.btn-select {
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--secondary-color); color: var(--secondary-dark); background: #fff;
    border-radius: 50px; font-weight: 600; padding: 9px 18px; width: 100%;
    text-decoration: none; transition: all .3s ease;
}
.btn-select:hover, .btn-select:focus-visible {
    background: rgba(14, 165, 233, .08); color: var(--secondary-darker);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 165, 233, .25);
}
.btn-select:disabled { border-color: var(--slate-300); color: var(--slate-400); transform: none; box-shadow: none; }

/* ---------- header ---------- */
.demo-banner { background: #fff3cd; color: #664d03; }
.site-nav { background: #212529; }
.site-nav .navbar-brand img { height: 45px; width: auto; }
.shop-bar { background: var(--slate-800); border-bottom: 1px solid rgba(14,165,233,.35); }
.dept-all {
    display: inline-flex; align-items: center; height: 42px; padding: 0 1.1rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff;
    border: 0; border-radius: 50px; font-weight: 600; white-space: nowrap;
}
.dept-all:hover, .dept-all[aria-expanded="true"] { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
.mega-menu { width: min(1100px, 94vw); border: 0; border-radius: 15px; box-shadow: 0 20px 50px rgba(15,23,42,.3); }
.mega-heading { display: block; font-weight: 700; color: var(--slate-900); text-decoration: none; margin-bottom: .5rem; }
.mega-heading i { color: var(--secondary-color); }
.mega-menu ul a { display: block; padding: .2rem 0; color: var(--slate-600); text-decoration: none; font-size: .92rem; }
.mega-menu ul a:hover { color: var(--secondary-dark); text-decoration: underline; }
.mega-menu .mega-all { color: var(--secondary-dark); font-weight: 600; }

.site-search { min-width: 0; }
.site-search .form-control, .site-search .form-select { border: 0; height: 42px; }
.site-search .input-group { border-radius: 50px; overflow: hidden; }
.search-scope { max-width: 220px; background-color: #f1f5f9; font-size: .9rem; }
.btn-search { background: var(--secondary-color); color: #fff; border: 0; padding: 0 1.1rem; }
.btn-search:hover { background: var(--secondary-dark); color: #fff; }
.shop-action {
    display: inline-flex; align-items: center; gap: .45rem; color: #e2e8f0; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.shop-action i { font-size: 1.15rem; }
.shop-action:hover, .shop-action.active { color: var(--secondary-color); }
.cart-count {
    position: absolute; top: -9px; right: -12px;
    background: var(--accent-orange); color: #fff; font-size: .65rem;
}

/* ---------- footer ---------- */
.site-footer { background: var(--slate-900); color: var(--slate-400); margin-top: 5rem; }
.site-footer a { color: var(--slate-300); text-decoration: none; }
.site-footer a:hover { color: var(--secondary-color); }
.site-footer li { padding: .15rem 0; }
.site-footer hr { border-color: rgba(148,163,184,.2); }
.footer-brand { font-weight: 700; font-size: 1.5rem; color: #fff; }
.footer-heading { font-weight: 700; color: #fff; font-size: .95rem; margin-bottom: .75rem; }
.payment-icons { font-size: 1.6rem; display: inline-flex; gap: .5rem; color: var(--slate-300); }

/* ---------- hero (same treatment as the products page) ---------- */
.products-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #fff; padding: 90px 0 70px; position: relative; overflow: hidden;
}
.products-hero::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(14,165,233,.15) 0%, transparent 70%);
    animation: pulse 15s ease-in-out infinite;
}
.products-hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 150px;
    background: linear-gradient(to top, rgba(14,165,233,.1), transparent);
}
.products-hero .container { position: relative; z-index: 1; }
.products-hero h1 {
    font-weight: 700; line-height: 1.2; text-wrap: balance;
    text-shadow: 0 0 40px rgba(14,165,233,.5), 0 0 80px rgba(14,165,233,.3);
}
.products-hero p.lead { color: rgba(255,255,255,.9); max-width: 680px; }
.hero-product { max-height: 340px; width: 100%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(14,165,233,.35)); }
.page-hero { padding: 48px 0 40px; }
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: .8; }
}

/* ---------- section headings ---------- */
.category-header { margin: 64px 0 10px; text-align: center; }
.category-header h2, .gradient-title {
    font-size: 2.2rem; font-weight: 700; margin-bottom: .5rem;
    background: linear-gradient(135deg, #0f172a 0%, #0ea5e9 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.category-header p { color: var(--slate-500); max-width: 720px; margin: 0 auto; }
.category-header .see-all { display: inline-block; margin-top: .5rem; font-weight: 600; text-decoration: none; }
.step-icon { font-size: 2.25rem; color: var(--secondary-color); }

/* ---------- product cards (same vocabulary as the products page) ---------- */
.product-card {
    background: #fff; border-radius: 15px; border: 1px solid var(--line);
    overflow: hidden; height: 100%; position: relative; display: flex; flex-direction: column;
    transition: all .4s cubic-bezier(.175,.885,.32,1.275);
}
.product-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
    transform: scaleX(0); transition: transform .4s ease; z-index: 2;
}
.product-card:hover::before { transform: scaleX(1); }
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(14,165,233,.25);
    border-color: rgba(14,165,233,.3);
}
.product-media {
    height: 190px; background: #fff; display: flex; align-items: center; justify-content: center;
    position: relative; border-bottom: 1px solid #f1f5f9;
}
.product-media .product-img { width: 100%; height: 100%; object-fit: contain; padding: 12px; aspect-ratio: auto; }
.badge-flag {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    background: var(--accent-orange); color: #fff; font-size: .78rem; font-weight: 600;
    padding: 5px 20px; border-radius: 50px;
}
.product-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.product-body h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; color: var(--dark-bg); }
.product-body h3 a { color: inherit; text-decoration: none; }
.product-body h3 a:hover { color: var(--secondary-dark); }
.product-body .desc { color: var(--slate-600); font-size: .93rem; flex-grow: 1; }
ul.specs { list-style: none; padding: 0; margin: 10px 0 14px; font-size: .86rem; color: var(--slate-600); }
ul.specs li { padding: 2px 0; }
ul.specs li i { color: var(--secondary-color); margin-right: 7px; }
.price-line { font-weight: 700; color: var(--primary-color); margin-bottom: 12px; font-size: 1.02rem; }

.product-img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; background: #fff; }
.product-img-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f1f5f9, #fff);
    color: var(--secondary-dark); font-size: 3.4rem;
}
.product-detail-img { border-radius: 15px; aspect-ratio: 1 / 1; border: 1px solid var(--line); padding: 24px; }
.product-detail-img.product-img-placeholder { font-size: 6rem; }
#gallery .gallery-arrow {
    width: 42px; height: 42px; top: 50%; transform: translateY(-50%); margin: 0 12px;
    border-radius: 50%; background: rgba(15, 23, 42, .55); color: #fff; opacity: .85; font-size: 1rem;
}
#gallery .gallery-arrow:hover, #gallery .gallery-arrow:focus-visible { opacity: 1; background: rgba(15, 23, 42, .8); }
.gallery-thumb {
    width: 72px; padding: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden;
    background: #fff; opacity: .7; transition: opacity .15s, border-color .15s;
}
.gallery-thumb:hover, .gallery-thumb.active { opacity: 1; }
.gallery-thumb.active { border-color: var(--primary-color); }
.gallery-thumb .product-img { aspect-ratio: 1 / 1; padding: 4px; }
.gallery-thumb .product-img-placeholder { font-size: 1.5rem; }
.price { font-weight: 700; color: var(--primary-color); }
.price-sale { color: #c0392b; }
.price-quote { color: var(--secondary-dark); }
.price-was { text-decoration: line-through; color: #6c757d; font-size: .875em; }

/* ---------- catalog sidebar ---------- */
.catalog-sidebar { border: 1px solid var(--line); border-radius: 15px; }
.catalog-sidebar .list-group-item { border: 0; padding: .45rem .75rem; border-radius: 10px; }
.catalog-sidebar .list-group-item.active { background: rgba(14,165,233,.12); color: var(--secondary-darker); font-weight: 600; }
.catalog-sidebar .list-group-item.child { padding-left: 2rem; font-size: .925rem; }
@media (min-width: 992px) {
    .catalog-sidebar { position: sticky; top: 1rem; }
}

/* ---------- forms ---------- */
.form-label { font-weight: 600; font-size: .92rem; }
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(14,165,233,.2); }

/* ---------- request / consultation band ---------- */
.request-section {
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #3b82f6 100%);
    padding: 72px 0 88px; margin-top: 80px; position: relative; overflow: hidden; color: #fff;
}
.request-section::before {
    content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
    animation: pulse 10s ease-in-out infinite;
}
.request-section .container { position: relative; z-index: 1; }
.request-section + #site-footer .site-footer,
main:has(> .request-section:last-child) + #site-footer .site-footer { margin-top: 0; }
.products-hero + .request-section { margin-top: 0; }
.request-card {
    background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.2);
    padding: 40px 36px; color: var(--dark-bg);
}

/* ---------- panels used by cart, checkout, account, orders ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.card.border-0 { border: 1px solid var(--line) !important; border-radius: 15px !important; }
.bg-white.rounded-3 { border: 1px solid var(--line); border-radius: 15px !important; }

/* ---------- cart / checkout ---------- */
.cart-thumb { width: 72px; flex: 0 0 72px; }
.cart-thumb .product-img { border-radius: 10px; font-size: 1.5rem; border: 1px solid var(--line); padding: 4px; }
.qty-input { width: 4.5rem; text-align: center; }
.summary-card { position: sticky; top: 1rem; }
.checkout-step-num {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; font-size: .85rem; font-weight: 600;
}

/* ---------- order status tracker ---------- */
.tracker { display: flex; justify-content: space-between; position: relative; margin: 1.5rem 0 .5rem; }
.tracker::before { content: ""; position: absolute; top: 15px; left: 8%; right: 8%; height: 4px; background: #e2e8f0; z-index: 0; }
.tracker .step { position: relative; z-index: 1; text-align: center; flex: 1; font-size: .85rem; color: #6c757d; }
.tracker .dot {
    width: 34px; height: 34px; border-radius: 50%; background: #e2e8f0; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: .35rem;
}
.tracker .step.done .dot { background: var(--secondary-dark); }
.tracker .step.current .dot { background: var(--accent-orange); box-shadow: 0 0 0 4px rgba(255,107,53,.25); }
.tracker .step.done, .tracker .step.current { color: var(--slate-900); font-weight: 600; }
.timeline { list-style: none; padding-left: 0; border-left: 2px solid #e2e8f0; margin-left: .5rem; }
.timeline li { position: relative; padding: 0 0 1rem 1.25rem; }
.timeline li::before {
    content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%;
    background: var(--secondary-color);
}

/* ---------- auth pages ---------- */
.auth-card { max-width: 460px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; }

/* DataTables tweaks */
table.dataTable td { vertical-align: middle; }

@media (max-width: 575.98px) {
    .products-hero { padding: 60px 0 48px; }
    .request-card { padding: 26px 20px; }
    .category-header h2, .gradient-title { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}