/* ==========================================================================
   Caffe Disebelah — Modern Theme
   A warm, modern visual system layered on top of the existing Bootstrap /
   Multikart template. Existing class names, DOM structure and JS hooks
   (tabs, offcanvas cart, add-to-cart-btn, etc.) are preserved untouched —
   this file only restyles them.
   ========================================================================== */

/* Override the Multikart template's per-theme accent variable (was a
   bright green, #81ba00, for body.theme-color-11) so every existing
   selector in style.css that reads var(--theme-color) picks up our
   gold accent instead — without having to hunt down each usage. */
body.theme-color-11 {
    --theme-color: #c8872a;
}

:root {
    --coffee-900: #2b1b12;
    --coffee-800: #3e2723;
    --coffee-700: #4e342e;
    --coffee-600: #6a4a3c;
    --coffee-500: #8a6a57;
    --cream-100: #fff9f2;
    --cream-200: #fbf1e4;
    --cream-300: #f3e3cf;
    --gold-500: #c8872a;
    --gold-400: #d9a24c;
    --gold-300: #ecc98a;
    --ink: #2b1b12;
    --muted: #8a7a6d;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-soft: 0 10px 30px -12px rgba(43, 27, 18, 0.18);
    --shadow-pop: 0 18px 40px -16px rgba(43, 27, 18, 0.28);
    --font-display: 'Playfair Display', 'Montserrat', serif;
    --font-body: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
}

/* ---------- Base ---------- */
html {
    height: 100%;
}

body.theme-color-11 {
    font-family: var(--font-body);
    background: var(--cream-100);
    color: var(--ink);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Push the footer to the bottom of the viewport on short pages, while
   fixed-position header/sidebar are unaffected (out of normal flow). */
body.theme-color-11>.space_sm.section-t-space {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body.theme-color-11>.space_sm.section-t-space>.container-fluid.p-0-xl {
    flex: 1 0 auto;
}

body.theme-color-11 footer.footer-light {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, .title1, .title-inner1, .brand-logo {
    font-family: var(--font-display);
    letter-spacing: 0.2px;
}

a {
    color: var(--coffee-700);
}

a:hover {
    color: var(--gold-500);
}

::selection {
    background: var(--gold-300);
    color: var(--coffee-900);
}

/* ---------- Navbar ---------- */
.header-5.left-sidebar-header {
    background: var(--cream-100);
    border-bottom: 1px solid var(--cream-300);
    box-shadow: 0 2px 18px -10px rgba(43, 27, 18, 0.15);
}

.header-5 .brand-logo a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--coffee-800);
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-5 .brand-logo a::before {
    content: "☕";
    font-size: 22px;
}

.header-5 .icon-nav>ul>li,
.header-5 .header-dropdown>li {
    position: relative;
}

.header-5 .icon-nav i,
.header-5 .header-dropdown i {
    color: var(--coffee-700);
    transition: color .2s ease, transform .2s ease;
}

.header-5 .icon-nav li:hover i,
.header-5 .header-dropdown li:hover i {
    color: var(--gold-500);
    transform: translateY(-1px);
}

.cart_qty_cls {
    background: var(--gold-500) !important;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px -2px rgba(200, 135, 42, 0.6);
}

#accountMenu img {
    box-shadow: 0 0 0 2px var(--gold-400);
}

/* ---------- Sidebar ---------- */
.left-header {
    background: var(--coffee-800);
}

.left-header .left-sidebar_center ul#sub-menu>li>a {
    display: flex !important;
    align-items: center;
    color: var(--cream-200);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14.5px;
    text-transform: capitalize;
    border-radius: var(--radius-sm);
    margin: 2px 10px;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

.left-header .left-sidebar_center ul#sub-menu>li>a:hover {
    background: rgba(216, 162, 76, 0.16);
    color: var(--gold-300);
    padding-left: 22px;
}

.left-header .category-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 16px;
    color: var(--gold-400);
}

.left-header .sidebar-back {
    color: var(--cream-200);
}

/* ---------- Hero ---------- */
.cafe-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 0 0 18px;
    background-image: url('/assets/images/branding/hero-nongki.jpg');
    background-size: cover;
    background-position: center 30%;
    color: var(--cream-100);
    padding: 64px 40px;
    min-height: 320px;
    display: flex;
    align-items: center;
}

.cafe-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(43, 27, 18, 0.94) 0%, rgba(43, 27, 18, 0.82) 38%, rgba(43, 27, 18, 0.45) 68%, rgba(43, 27, 18, 0.35) 100%),
        radial-gradient(circle at 85% 20%, rgba(216, 162, 76, 0.22) 0, transparent 45%);
    pointer-events: none;
}

.cafe-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 249, 242, 0.12);
    border: 1px solid rgba(255, 249, 242, 0.22);
    color: var(--gold-300);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.cafe-hero h1 {
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.1;
    margin-bottom: 16px;
    color: #fff;
}

.cafe-hero h1 span {
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    color: var(--gold-400);
    font-style: italic;
}

.cafe-hero p {
    max-width: 520px;
    color: rgba(255, 249, 242, 0.78);
    font-size: 16px;
    margin-bottom: 28px;
}

.cafe-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold-500);
    color: #fff !important;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 999px;
    box-shadow: 0 14px 30px -10px rgba(200, 135, 42, 0.7);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cafe-hero__cta:hover {
    background: var(--gold-400);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(200, 135, 42, 0.8);
}

/* Smaller variant for use outside the hero (empty states, inline CTAs) */
.cafe-hero__cta--sm {
    padding: 9px 20px;
    font-size: 14px;
    box-shadow: 0 8px 18px -8px rgba(200, 135, 42, 0.6);
}

.cafe-hero__stats {
    position: relative;
    display: flex;
    gap: 32px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.cafe-hero__stats div strong {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
}

.cafe-hero__stats div span {
    font-size: 12.5px;
    color: rgba(255, 249, 242, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ---------- Section titles ---------- */
.title1 {
    text-align: center;
    margin-bottom: 28px;
}

.title1 h4 {
    color: var(--gold-500);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.title1 .title-inner1 {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    color: var(--coffee-800);
}

/* ---------- Category tabs ---------- */
.theme-tab .tabs.tab-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

.theme-tab .tabs.tab-title li {
    margin: 0;
}

.theme-tab .tabs.tab-title li a {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--cream-300);
    background: #fff;
    color: var(--coffee-700);
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
    transition: all .2s ease;
}

.theme-tab .tabs.tab-title li a:hover {
    border-color: var(--gold-400);
    color: var(--gold-500);
}

.theme-tab .tabs.tab-title li.current a {
    background: var(--coffee-800);
    border-color: var(--coffee-800);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(62, 39, 35, 0.6);
}

/* ---------- Product cards ---------- */
.basic-product.theme-product-1 {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 10px;
    border: 1px solid var(--cream-300);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
}

.basic-product.theme-product-1:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
    border-color: var(--gold-300);
}

.basic-product .img-wrapper {
    border-radius: var(--radius-sm) !important;
    background: var(--cream-200) !important;
}

/* Graceful fallback when a product photo fails to load (missing upload) —
   toggled via JS (onerror) instead of showing the browser's broken-image icon. */
.basic-product .img-wrapper .img-fallback-icon {
    display: none;
}

.basic-product .img-wrapper.img-fallback img {
    visibility: hidden;
}

.basic-product .img-wrapper.img-fallback .img-fallback-icon {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--gold-400);
    background: var(--cream-200);
}

.basic-product .rating-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    color: var(--gold-500);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.25);
}

.basic-product .cart-info {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.basic-product:hover .cart-info {
    opacity: 1;
    transform: translateX(0);
}

.basic-product .cart-info a,
.basic-product .cart-info button.add-to-cart-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--coffee-800);
    border: none;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.basic-product .cart-info a:hover,
.basic-product .cart-info button.add-to-cart-btn:hover {
    background: var(--gold-500);
    color: #fff;
    transform: scale(1.08);
}

/* The base theme's `.basic-product .cart-info i:hover` sets the icon's own
   color to var(--theme-color), which we point at the same gold as
   --gold-500 above — so on hover the icon became the same color as its own
   button background and visually vanished into it. Force it white whenever
   the icon itself is hovered, overriding that rule directly instead of
   relying on inheritance from the button. */
.basic-product .cart-info a:hover i,
.basic-product .cart-info button.add-to-cart-btn:hover i {
    color: #fff !important;
}

.basic-product .product-detail {
    padding: 14px 6px 6px;
}

.basic-product .product-title {
    color: var(--coffee-800);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
}

.basic-product .price {
    color: var(--gold-500);
    font-weight: 700;
    font-size: 16px;
    margin-top: 4px;
}

/* ---------- Bootstrap utility harmonization (customer pages only) ---------- */
.text-primary {
    color: var(--coffee-800) !important;
}

.card.border-0.shadow-sm,
.card.shadow-sm {
    box-shadow: var(--shadow-soft) !important;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn.btn-primary {
    background: var(--coffee-800) !important;
    border-color: var(--coffee-800) !important;
    border-radius: 999px;
    font-weight: 600;
    transition: background .2s ease, transform .2s ease;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--gold-500) !important;
    border-color: var(--gold-500) !important;
    transform: translateY(-1px);
}

.cart_total .buttons .btn.checkout {
    background: var(--gold-500);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    border: none;
}

.cart_total .buttons .btn.checkout:hover {
    background: var(--coffee-800);
}

/* ---------- Offcanvas cart & modal ---------- */
.offcanvas.cart-offcanvas {
    background: var(--cream-100);
}

.offcanvas.cart-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--cream-300);
}

.offcanvas.cart-offcanvas .offcanvas-title {
    font-family: var(--font-display);
    color: var(--coffee-800);
}

.cart-product li .media-body h4 {
    font-family: var(--font-body);
    color: var(--coffee-800);
    font-weight: 600;
}

.modal-content {
    border-radius: var(--radius-lg) !important;
    border: none;
    box-shadow: var(--shadow-pop);
}

.modal-title {
    font-family: var(--font-display);
    color: var(--coffee-800);
}

/* ---------- Footer ---------- */
footer.footer-light {
    background: var(--coffee-900);
    color: rgba(255, 249, 242, 0.75);
    margin-top: 40px;
}

footer.footer-light .sub-footer {
    /* The base theme's generic `.sub-footer { background-color: #fff }`
       (style.css) was never overridden here, so this strip stayed white
       while its copyright text uses the footer's near-white cream color —
       invisible light-on-white. Match the footer's own dark background. */
    background-color: var(--coffee-900);
    padding: 22px 0;
}

footer.footer-light .footer-end p {
    color: rgba(255, 249, 242, 0.6);
    margin: 0;
    font-size: 13.5px;
}

footer.footer-light .payment-card-bottom ul li a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 249, 242, 0.08);
    color: var(--cream-100);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

footer.footer-light .payment-card-bottom ul li a:hover {
    background: var(--gold-500);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Existing inline-styled bits (payment, order history) ---------- */
.payment-option {
    border-radius: var(--radius-md) !important;
    border-color: var(--cream-300) !important;
    background: #fff !important;
}

.payment-option:hover {
    background: var(--cream-200) !important;
    border-color: var(--gold-400) !important;
}

.payment-box {
    background: var(--cream-200) !important;
    border-radius: var(--radius-md) !important;
    border-color: var(--cream-300) !important;
}

.order-card-modern {
    border-radius: var(--radius-md) !important;
    border-color: var(--cream-300) !important;
}

.order-card-modern:hover {
    box-shadow: var(--shadow-soft) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .cafe-hero {
        padding: 44px 24px;
        min-height: 260px;
        background-position: center 15%;
    }

    .cafe-hero::before {
        background:
            linear-gradient(180deg, rgba(43, 27, 18, 0.88) 0%, rgba(43, 27, 18, 0.93) 60%, rgba(43, 27, 18, 0.96) 100%);
    }

    .cafe-hero__stats {
        gap: 20px;
    }

    /* Hover-to-reveal doesn't work on touch screens — keep the
       add-to-cart / quick-view actions always visible on mobile. */
    .basic-product .cart-info {
        opacity: 1;
        transform: none;
    }

    .basic-product .cart-info a,
    .basic-product .cart-info button.add-to-cart-btn {
        width: 34px;
        height: 34px;
    }
}