/* ===================================================================
   Direct From China — custom theme on top of Bootstrap 5
   Blue scheme + amber "attention" accent.
   Colours are driven from the tokens below; the Bootstrap class
   overrides re-point .btn-danger / .text-warning etc. to these,
   so the markup across the site doesn't need to change.
   =================================================================== */

:root {
    /* Brand tokens */
    --dfc-blue:       #1257c2;   /* primary blue        */
    --dfc-blue-dark:  #0e4499;   /* hover / active      */
    --dfc-navy:       #0a2540;   /* deep navy (headers) */
    --dfc-accent:     #ff9f1c;   /* amber attention     */
    --dfc-accent-dk:  #e88a00;   /* amber hover         */

    /* Re-point Bootstrap's primary to our blue (links, accordions, etc.) */
    --bs-primary:      #1257c2;
    --bs-primary-rgb:  18, 87, 194;
    --bs-link-color:        #1257c2;
    --bs-link-color-rgb:    18, 87, 194;
    --bs-link-hover-color:  #0e4499;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dfc-main { flex: 1 0 auto; }

/* ---------- Bootstrap class re-paints ---------- */
/* Primary action buttons (markup uses .btn-danger) -> blue */
.btn-danger {
    --bs-btn-bg: var(--dfc-blue);
    --bs-btn-border-color: var(--dfc-blue);
    --bs-btn-hover-bg: var(--dfc-blue-dark);
    --bs-btn-hover-border-color: var(--dfc-blue-dark);
    --bs-btn-active-bg: var(--dfc-blue-dark);
    --bs-btn-active-border-color: var(--dfc-blue-dark);
    --bs-btn-disabled-bg: var(--dfc-blue);
    --bs-btn-disabled-border-color: var(--dfc-blue);
}
.btn-outline-danger {
    --bs-btn-color: var(--dfc-blue);
    --bs-btn-border-color: var(--dfc-blue);
    --bs-btn-hover-bg: var(--dfc-blue);
    --bs-btn-hover-border-color: var(--dfc-blue);
    --bs-btn-active-bg: var(--dfc-blue);
    --bs-btn-active-border-color: var(--dfc-blue);
}
.btn-primary {
    --bs-btn-bg: var(--dfc-blue);
    --bs-btn-border-color: var(--dfc-blue);
    --bs-btn-hover-bg: var(--dfc-blue-dark);
    --bs-btn-hover-border-color: var(--dfc-blue-dark);
    --bs-btn-active-bg: var(--dfc-blue-dark);
}

/* Attention accent (markup uses .btn-warning / .bg-warning / .text-warning) -> amber */
.btn-warning {
    --bs-btn-bg: var(--dfc-accent);
    --bs-btn-border-color: var(--dfc-accent);
    --bs-btn-hover-bg: var(--dfc-accent-dk);
    --bs-btn-hover-border-color: var(--dfc-accent-dk);
    --bs-btn-active-bg: var(--dfc-accent-dk);
    --bs-btn-color: #1a1300;
    --bs-btn-hover-color: #1a1300;
}
.bg-warning { background-color: var(--dfc-accent) !important; }
.text-warning { color: var(--dfc-accent) !important; }
.text-danger  { color: var(--dfc-blue) !important; }

/* ---------- Navbar ---------- */
.dfc-navbar {
    background: linear-gradient(90deg, var(--dfc-blue), var(--dfc-navy));
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.dfc-navbar .navbar-brand { letter-spacing: .5px; }
.cart-badge {
    position: absolute;
    top: 2px;
    right: -6px;
    font-size: .65rem;
}

/* ---------- Country selector bar ---------- */
.country-bar {
    background: #f4f6fa;
    border-bottom: 1px solid #e4e8ef;
}

/* ---------- Hero ---------- */
.dfc-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(18,87,194,.95), rgba(10,37,64,.95));
    color: #fff;
    padding: 4.5rem 0;
    border-radius: 0 0 1.5rem 1.5rem;
}
.dfc-hero h1 { font-weight: 800; }

/* Rotating banner background */
.hero-bg,
.hero-overlay {
    position: absolute;
    inset: 0;
}
.hero-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-bg-slide.active { opacity: 1; }

/* Per-banner headline/subtitle that cross-fades with the image.
   Grid stacking lets the block size to the tallest slide (no layout jump). */
.hero-text { display: grid; }
.hero-text-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}
.hero-text-slide.active { opacity: 1; pointer-events: auto; }
/* Tint over the images so overlaid text stays readable */
.hero-overlay {
    background: linear-gradient(120deg, rgba(18,87,194,.78), rgba(10,37,64,.82));
}
.dfc-hero .container { position: relative; z-index: 2; }

/* ---------- Category tiles ---------- */
.category-tile {
    display: block;
    text-decoration: none;
    color: var(--dfc-navy);
    border: 1px solid #eee;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
    background: #fff;
    height: 100%;
}
.category-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    color: var(--dfc-blue);
}
.category-tile i { font-size: 2.2rem; color: var(--dfc-blue); }

/* ---------- Product cards ---------- */
.product-card { transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.product-card .card-img-top {
    height: 210px;
    object-fit: cover;
    background: #f4f4f4;
}
.price-locked {
    color: #6c757d;
    font-style: italic;
    font-size: .9rem;
}
.price-tag {
    color: var(--dfc-blue);
    font-weight: 700;
    font-size: 1.15rem;
}

/* Availability badges */
.badge-available { background: #198754; }
.badge-to-order  { background: var(--dfc-accent); color: #1a1300; cursor: pointer; }

/* ---------- Footer ---------- */
.dfc-footer {
    background: var(--dfc-navy);
    color: #cfd6e0;
    flex-shrink: 0;
}
.dfc-footer a { color: #cfd6e0; text-decoration: none; }
.dfc-footer a:hover { color: var(--dfc-accent); }

/* ---------- Product detail ---------- */
.thumb-img { transition: border-color .15s ease; border-color: #eee !important; }
.thumb-img.active,
.thumb-img:hover { border-color: var(--dfc-blue) !important; }

.ship-card {
    background: linear-gradient(120deg, #eef4ff, #f7fbff);
    border: 1px solid #dbe7ff;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: #556;
    background: #f4f6fa;
    border: 1px solid #e4e8ef;
    border-radius: .5rem;
    padding: .35rem .55rem;
}
.trust-badge i { color: #198754; font-size: .95rem; }

.nav-tabs .nav-link { color: var(--dfc-navy); }
.nav-tabs .nav-link.active { color: var(--dfc-blue); font-weight: 600; }

/* ---------- Content pages ---------- */
.content-body { line-height: 1.7; }
.content-body h5 { margin-top: 1.25rem; font-weight: 700; }

/* ---------- Welcome popup ---------- */
.welcome-hero {
    position: relative;
    background: linear-gradient(120deg, var(--dfc-blue), var(--dfc-navy));
    overflow: hidden;
}
/* decorative oversized icons as a subtle background pattern */
.welcome-hero::before,
.welcome-hero::after {
    content: "\F3E9"; /* bi-box-seam glyph */
    font-family: "bootstrap-icons";
    position: absolute;
    opacity: .10;
    line-height: 1;
}
.welcome-hero::before { font-size: 9rem; right: -1.5rem; bottom: -2.5rem; transform: rotate(-12deg); }
.welcome-hero::after  { font-size: 5rem; left: -1rem; top: -1.2rem; transform: rotate(10deg); }
.welcome-hero-icon {
    font-size: 3.4rem;
    position: relative;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.welcome-hero .btn-close { z-index: 3; }

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 1050;
    transition: transform .15s ease;
}
.whatsapp-float:hover { color: #fff; transform: scale(1.08); }

/* ---------- Auth cards ---------- */
.auth-wrap { max-width: 440px; margin: 3rem auto; }

/* ---------- Admin sidebar ---------- */
.admin-sidebar {
    background: var(--dfc-navy);
    min-height: calc(100vh - 56px);
}
.admin-sidebar a {
    color: #cfd6e0;
    display: block;
    padding: .6rem 1rem;
    text-decoration: none;
    border-radius: .4rem;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: var(--dfc-blue);
    color: #fff;
}

/* ---------- Collapsible category tree ---------- */
.cat-node > .cat-sub { display: none; }
.cat-node.open > .cat-sub { display: block; }
.cat-toggle { cursor: pointer; }
.cat-chevron { transition: transform .2s ease; }
.cat-node.open > .cat-toggle .cat-chevron { transform: rotate(90deg); }
.navbar .dropdown-menu { max-height: 75vh; overflow-y: auto; }