/* ==========================================================================
   Sunan Sweets — Premium theme (Palette A: Burgundy & Bronze Gold)
   Burgundy  #5C1420   Deep Maroon #3E0D16   Copyright #2C0910
   Soft Gold #C9A227   Gold hover  #B08D1F   Accent    #8A2233
   Ivory     #F7EFE3   Muted cream #D9C6B8

   Core colors above are admin-editable (Admin > Settings > Theme Colors),
   backed by CSS custom properties defined in
   resources/views/frontend/partials/theme-vars.blade.php — see
   docs/site-theme-settings/README.md for the full token list and the
   decorative shades intentionally left hardcoded.
   ========================================================================== */

/* Page background — the one theme token not tied to an existing rule */
body {
    background-color: var(--theme-bg, #ffffff);
}

/* ---- Core color tokens (site-wide primary = burgundy, buttons = gold) ---- */
.text-primary {
    color: var(--theme-primary, #5C1420) !important;
}

.bg-primary {
    background-color: var(--theme-primary, #5C1420) !important;
}

.btn-primary {
    color: #fff;
    border-color: var(--theme-accent, #C9A227);
    background-color: var(--theme-accent, #C9A227);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    color: #fff;
    border-color: var(--theme-accent-hover, #B08D1F);
    background-color: var(--theme-accent-hover, #B08D1F);
}
.btn-primary.btn-solid {
    color: var(--theme-primary, #5C1420);
    border-color: #fff;
    background-color: #fff;
}
.btn-primary.btn-solid:hover,
.btn-primary.btn-solid:active,
.btn-primary.btn-solid:focus {
    border-color: var(--theme-primary, #5C1420);
    background-color: var(--theme-primary, #5C1420);
    color: #fff;
}

/* Secondary action (Add to Cart) — burgundy so it stays distinct from
   the gold "Order Now" primary CTA */
.btn-maroon {
    color: #fff;
    border-color: var(--theme-primary, #5C1420);
    background-color: var(--theme-primary, #5C1420);
}
.btn-maroon:hover,
.btn-maroon:active,
.btn-maroon:focus {
    color: #fff;
    border-color: #8A2233;
    background-color: #8A2233;
}

/* ==========================================================================
   HEADER — burgundy bar, ivory text, gold accents
   ========================================================================== */
.header-middle {
    border-bottom: 2px solid var(--theme-accent, #C9A227);            /* gold hairline under bar */
}

/* Nav links: ivory default, gold on hover / active */
.header-middle .main-nav .menu > li > a {
    color: var(--theme-text-light, #F7EFE3);
    transition: color 0.3s;
}
.header-left .menu > li.active > a,
.header-left .menu > li > a:hover,
.header-left .menu > li.active > a:not(.menu-title),
.main-nav .menu > li.active > a,
.main-nav .menu > li > a:hover {
    color: var(--theme-accent, #C9A227) !important;
}

/* Contact / phone block */
.header-middle .header-call::after {
    display: none;
}
.header-middle .header-call .w-icon-call {
    color: var(--theme-accent, #C9A227) !important;
    transition: color 0.3s;
}
.header-middle .header-call:hover .w-icon-call {
    color: #FFFFFF !important;
}
.header-middle .phone-number,
.header-middle .call-info .text-white {
    color: var(--theme-text-light, #F7EFE3) !important;
    transition: color 0.3s;
}
.header-middle .phone-number:hover,
.header-middle .phone-number:focus {
    color: var(--theme-accent, #C9A227) !important;
}

/* Cart icon + label: ivory, gold on hover */
.header-middle .cart-toggle .w-icon-cart,
.header-middle .cart-toggle .cart-label {
    color: var(--theme-text-light, #F7EFE3) !important;
    transition: color 0.3s;
}
.header-middle .cart-toggle:hover .w-icon-cart,
.header-middle .cart-toggle:hover .cart-label {
    color: var(--theme-accent, #C9A227) !important;
}
/* Cart count badge in gold for a premium pop */
.header-middle .cart-toggle .cart-count {
    background-color: var(--theme-accent, #C9A227);
    color: var(--theme-footer, #3E0D16);
}

/* ---- Header bottom (light search bar) ---- */
/* Search field: gold hairline border, maroon icon */
.header-search.input-wrapper,
.header-search .form-control {
    border-color: var(--theme-accent, #C9A227) !important;
}
.header-search .btn-search i,
.header-search .w-icon-search {
    color: var(--theme-primary, #5C1420);
}
.header-search .btn-search:hover i {
    color: var(--theme-accent, #C9A227);
}

/* Browse Categories button */
.category-dropdown .category-toggle {
    color: var(--theme-primary, #5C1420);
}
.category-dropdown .category-toggle i {
    color: var(--theme-accent, #C9A227);
}
.category-dropdown .category-toggle:hover {
    color: var(--theme-accent, #C9A227);
}

/* Track Order link */
.header-bottom .header-right a {
    color: var(--theme-primary, #5C1420);
    transition: color 0.3s;
}
.header-bottom .header-right a .w-icon-map-marker {
    color: var(--theme-accent, #C9A227);
}
.header-bottom .header-right a:hover {
    color: var(--theme-accent, #C9A227);
}

/* ==========================================================================
   HERO SLIDER - fixed responsive heights + premium nav buttons
   ========================================================================== */
/* Reserve height on the container so there is no layout shift before init */
.intro-section .swiper-container,
.intro-section .hero-slide {
    height: 510px;                     /* Desktop */
}
.intro-section .hero-slide {
    overflow: hidden;
}
.intro-section .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* no stretching, keeps aspect ratio */
    object-position: center;           /* keep image centered */
    display: block;
}

/* Premium circular navigation buttons — visible over light & dark banners */
.intro-section .swiper-button-next,
.intro-section .swiper-button-prev {
    width: 52px;
    height: 52px;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: rgba(255, 248, 236, 0.85);   /* semi-transparent cream */
    border: 1px solid var(--theme-accent, #C9A227);                      /* thin gold border */
    color: #7A1F2B;                                 /* maroon arrow */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);     /* soft shadow */
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    z-index: 10;
}
.intro-section .swiper-button-next::after,
.intro-section .swiper-button-prev::after {
    font-size: 1.2rem;
    font-weight: 700;
}
.intro-section .swiper-button-next:hover,
.intro-section .swiper-button-prev:hover {
    background-color: var(--theme-accent, #C9A227);                       /* gold background */
    color: #FFFFFF;                                  /* white icon */
    transform: translateY(-50%) scale(1.1);          /* slight scale */
    box-shadow: 0 6px 18px rgba(201, 162, 39, 0.45);
}
.intro-section .swiper-button-prev {
    left: 20px;
}
.intro-section .swiper-button-next {
    right: 20px;
}

/* Responsive hero heights */
@media (max-width: 1399.98px) {        /* Laptop */
    .intro-section .swiper-container,
    .intro-section .hero-slide {
        height: 470px;
    }
}
@media (max-width: 991.98px) {         /* Tablet */
    .intro-section .swiper-container,
    .intro-section .hero-slide {
        height: 400px;
    }
    .intro-section .swiper-button-next,
    .intro-section .swiper-button-prev {
        width: 46px;
        height: 46px;
    }
}
@media (max-width: 575.98px) {         /* Mobile */
    .intro-section .swiper-container,
    .intro-section .hero-slide {
        height: 270px;
    }
    .intro-section .swiper-button-prev {
        left: 10px;
    }
    .intro-section .swiper-button-next {
        right: 10px;
    }
}

/* ==========================================================================
   CATEGORY SLIDER - Swiper carousel with gold nav arrows
   ========================================================================== */
/* Premium cream section */
.top-category {
    background-color: #FBF6EC !important;
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* Premium category cards */
.top-category .category-classic {
    background-color: #FFFFFF;
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 14px;
    padding: 12px 12px 16px;
    box-shadow: 0 2px 10px rgba(60, 13, 22, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.top-category .category-classic:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 26px rgba(60, 13, 22, 0.15);
    border-color: var(--theme-accent, #C9A227);
}
.top-category .category-classic h6 {
    color: var(--theme-primary, #5C1420);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.category-swiper {
    padding: 0 3.4rem;                 /* gutter so arrows clear the cards */
    position: relative;
}
.category-swiper .swiper-slide {
    height: auto;
}
/* Premium circular navigation arrows — white with gold ring, aligned to the image */
.category-swiper .swiper-button-next,
.category-swiper .swiper-button-prev {
    width: 2.6rem;
    height: 2.6rem;
    top: 57px;                         /* card padding (12px) + image half (45px) */
    margin-top: 0;
    transform: translateY(-50%);
    background-color: #FFFFFF;
    border: 1px solid var(--theme-accent, #C9A227);
    border-radius: 50%;
    color: #7A1F2B;
    box-shadow: 0 3px 10px rgba(60, 13, 22, 0.15);
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    z-index: 10;                       /* stay above slides, never clipped */
}
.category-swiper .swiper-button-next::after,
.category-swiper .swiper-button-prev::after {
    font-size: 1rem;
    font-weight: 700;
}
.category-swiper .swiper-button-next:hover,
.category-swiper .swiper-button-prev:hover {
    background-color: var(--theme-accent, #C9A227);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.40);
}
.category-swiper .swiper-button-next {
    right: 0.5rem;                     /* equal inset from both edges, fully visible */
}
.category-swiper .swiper-button-prev {
    left: 0.5rem;
}

/* Tablet / mobile: tighter gutter but arrows stay inside and equal */
@media (max-width: 767.98px) {
    .category-swiper {
        padding: 0 2.6rem;
    }
    .category-swiper .swiper-button-next {
        right: 0.25rem;
    }
    .category-swiper .swiper-button-prev {
        left: 0.25rem;
    }
}

/* ==========================================================================
   ABOUT PAGE — premium maroon header + description card
   ========================================================================== */
.about-page-header,
.contact-page-header,
.terms-page-header,
.track-page-header {
    background: linear-gradient(135deg, var(--theme-primary, #5C1420) 0%, var(--theme-footer, #3E0D16) 100%) !important;
    height: 15rem !important;
    border-bottom: 3px solid var(--theme-accent, #C9A227);      /* gold underline */
}
.about-page-header .page-title,
.contact-page-header .page-title,
.terms-page-header .page-title,
.track-page-header .page-title {
    color: var(--theme-text-light, #FFFFFF);
}

/* About banner image — no rounded corners */
.introduce figure.br-lg,
.introduce figure.br-lg img {
    border-radius: 0 !important;
}

/* Description card — plain white, no border/radius */
.about-description-card {
    background-color: var(--theme-bg, #FFFFFF);
    border: none;
    box-shadow: 0 6px 24px rgba(60, 13, 22, 0.08);
}
.about-description-card .card-body {
    padding: 2.5rem;
    font-size: 1.05rem;
    line-height: 1.9;
    color: #444;
    max-height: none;                       /* undo any collapsed clipping */
}
.about-description-card .card-body h1,
.about-description-card .card-body h2,
.about-description-card .card-body h3,
.about-description-card .card-body h4 {
    color: var(--theme-primary, #5C1420);
}
@media (max-width: 575.98px) {
    .about-description-card .card-body {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   PRODUCT SEARCH / SHOP — premium listing, filters, pagination, empty state
   ========================================================================== */
/* Banner */
.ss-shop-banner {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(60, 13, 22, 0.10);
}
.ss-shop-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Result heading */
.ss-shop-head {
    border-bottom: 1px solid rgba(201, 162, 39, 0.30);
    padding-bottom: 1rem;
}
.ss-shop-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-primary, #5C1420);
    letter-spacing: -0.01em;
}
.ss-shop-subtitle {
    color: #777;
    font-size: 1rem;
}
.ss-shop-subtitle strong {
    color: var(--theme-accent, #C9A227);
}

/* Filter cards */
.ss-shop .filter-actions {
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--theme-primary, #5C1420);
    margin-bottom: 1.2rem;
}
.ss-shop .filter-actions label {
    font-weight: 700;
    color: var(--theme-primary, #5C1420);
    font-size: 1.15rem;
}
.ss-clear-filters {
    color: var(--theme-accent, #C9A227);
    font-weight: 600;
    font-size: 0.85rem;
}
.ss-clear-filters:hover {
    color: var(--theme-primary, #5C1420);
    text-decoration: underline;
}
.ss-filter-card {
    background: #FFFFFF;
    border: 1px solid rgba(201, 162, 39, 0.20);
    border-radius: 6px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 10px rgba(60, 13, 22, 0.05);
}
.ss-filter-card .widget-title {
    color: var(--theme-primary, #5C1420);
    border-bottom: none;
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
}
.ss-filter-item {
    padding: 0.35rem 0;
    list-style: none;
}
.ss-filter-item label {
    cursor: pointer;
    margin-left: 0.4rem;
    color: #555;
    transition: color 0.2s;
}
.ss-filter-item input:checked + label {
    color: var(--theme-primary, #5C1420);
    font-weight: 600;
}
.ss-filter-item input[type="radio"] {
    accent-color: #7A1F2B;
    cursor: pointer;
}
.ss-shop .price-range input {
    border: 1px solid #E0D3BE;
    border-radius: 4px;
    padding: 0.5rem;
    width: 100%;
}
.ss-shop .price-range input:focus {
    border-color: var(--theme-accent, #C9A227);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
    outline: none;
}

/* Sort select */
.ss-shop .toolbox-sort .sort {
    border: 1px solid #E0D3BE;
    border-radius: 50rem;
    padding: 0.4rem 2rem 0.4rem 1rem;
    color: var(--theme-primary, #5C1420);
    font-weight: 500;
    cursor: pointer;
}
.ss-shop .toolbox-sort .sort:focus {
    border-color: var(--theme-accent, #C9A227);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
    outline: none;
}

/* Premium pagination */
.ss-shop .pagination {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ss-shop .pagination .page-item .page-link {
    min-width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #E0D3BE;
    color: var(--theme-primary, #5C1420);
    font-weight: 600;
    transition: all 0.25s ease;
}
.ss-shop .pagination .page-item .page-link:hover {
    background: var(--theme-accent, #C9A227);
    border-color: var(--theme-accent, #C9A227);
    color: #fff;
    transform: translateY(-2px);
}
.ss-shop .pagination .page-item.active .page-link {
    background: var(--theme-primary, #5C1420);
    border-color: var(--theme-primary, #5C1420);
    color: #fff;
}
.ss-shop .pagination .page-item.disabled .page-link {
    opacity: 0.45;
}

/* Empty state */
.ss-empty-state {
    padding: 4rem 1.5rem;
    background: #FBF6EC;
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 16px;
}
.ss-empty-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--theme-accent, #C9A227);
    color: var(--theme-accent, #C9A227);
    font-size: 2.4rem;
}
.ss-empty-title {
    color: var(--theme-primary, #5C1420);
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.ss-empty-text {
    color: #777;
    max-width: 460px;
    margin: 0 auto 1.6rem;
}
.ss-empty-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   CONTACT PAGE — premium info cards, form & CTA
   ========================================================================== */
/* Section titles in brand maroon */
.contact-us .title {
    color: var(--theme-primary, #5C1420);
}

/* Contact info cards */
.contact-us .contact-info-row {
    row-gap: 1.5rem;
}
.contact-us .icon-box-primary {
    background-color: var(--theme-bg, #FFFFFF);
    border: 1px solid rgba(201, 162, 39, 0.22);
    border-radius: 14px;
    padding: 2.2rem 1.5rem;
    box-shadow: 0 4px 16px rgba(60, 13, 22, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.contact-us .icon-box-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 26px rgba(60, 13, 22, 0.12);
    border-color: var(--theme-accent, #C9A227);
}
.contact-us .icon-box-primary .icon-box-icon,
.contact-us .icon-box-primary .icon-box-icon i {
    color: var(--theme-accent, #C9A227);
    font-size: 2.6rem;
}
.contact-us .icon-box-primary .icon-box-title {
    color: var(--theme-primary, #5C1420);
    margin-top: 0.5rem;
}

/* Divider hairline in faint gold */
.contact-us .divider {
    border-color: rgba(201, 162, 39, 0.30);
}

/* Form fields */
.contact-us label {
    color: var(--theme-primary, #5C1420);
    font-weight: 600;
}
.contact-us .form-control:focus {
    border-color: var(--theme-accent, #C9A227);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

/* ==========================================================================
   FOOTER — deep maroon, gold headings, muted-cream body text
   ========================================================================== */
.footer .widget-title {
    color: var(--theme-accent, #C9A227) !important;                   /* gold headings */
    letter-spacing: 0.03em;
}

/* Body / link text: muted warm cream instead of stark white */
.footer .widget-body a.text-white,
.footer .widget-body li a,
.footer .widget-about-title,
.footer .widget-about-call,
.footer .widget-body p,
.footer .footer-top .text-white {
    color: #D9C6B8 !important;
    transition: color 0.3s;
}
.footer .widget-body a.text-white:hover,
.footer .widget-body li a:hover,
.footer .widget-about-call:hover {
    color: var(--theme-accent, #C9A227) !important;
}

/* Section divider hairline (faint gold) */
.footer .footer-top {
    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

/* Social icons: outlined gold, fill gold on hover */
.footer .social-icon {
    background-color: transparent !important;
    border: 1px solid var(--theme-accent, #C9A227) !important;
    color: var(--theme-accent, #C9A227) !important;
    transition: all 0.3s;
}
.footer .social-icon:hover {
    background-color: var(--theme-accent, #C9A227) !important;
    border-color: var(--theme-accent, #C9A227) !important;
    color: var(--theme-footer, #3E0D16) !important;
}

/* Copyright strip: deepest maroon, cream text, gold credit link */
.footer .footer-bottom {
    background-color: var(--theme-footer-deep, #2C0910);
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    padding: 1.2rem 0;
    margin-top: 0;
}
.footer .footer-bottom .copyright.text-white {
    color: #D9C6B8 !important;
}
.footer .text-primary {
    color: var(--theme-accent, #C9A227) !important;
}