/*
| ------------------------------------------------------------------
| Store Cannabo — Blade integration overrides
| Purpose (business): keep the original Cannabo look while wiring it
| to live data. Only additive tweaks live here; the base theme stays
| untouched in style.css so the vendor theme can be re-synced later.
| Recovery: if the store looks broken, verify this file loads AFTER
| assets/store/cannabo/css/style.css in layouts/store/cannabo.blade.php
| ------------------------------------------------------------------
*/

/* Constrain dynamic logos (admin uploads can be very large). */
.header-logo img.logo { max-height: 55px; width: auto; }
.footer-logo img.logo { max-height: 60px; width: auto; }
.mobile-logo img.logo { max-height: 50px; width: auto; }
.preloader-inner img { max-height: 80px; width: auto; }

/* Fixed-height, consistent product image cards across dynamic data. */
.vs-product .product-img {
    overflow: hidden;
    /* Small breathing room so the image never touches the card's top border. */
    padding-top: 10px;
}
.vs-product .product-img > a { display: block; }
.vs-product .product-img img.img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* Keep long dynamic titles from breaking the card grid. */
.vs-product .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* Flash / session feedback banner reusing the theme palette. */
.store-flash {
    padding: 14px 20px;
    border-radius: 8px;
    margin: 20px 0;
    font-weight: 500;
}
.store-flash--success { background: #e8f7e4; color: #2f7d16; border: 1px solid #bfe6b2; }
.store-flash--error   { background: #fdecec; color: #c0392b; border: 1px solid #f5c6c6; }

/* Empty-state block for lists with no data. */
.store-empty {
    text-align: center;
    padding: 60px 20px;
    color: #777;
}
.store-empty i { font-size: 48px; color: var(--theme-color); margin-bottom: 16px; display: block; }

/* --------- CMS / legal pages: readable typography for admin HTML --------- */
.store-cms-content {
    color: var(--body-color, #5b5b5b);
    line-height: 1.9;
    font-size: 16px;
    word-break: break-word;
}
/* Neutralise the Quill editor wrapper that admin content may carry. */
.store-cms-content .ql-editor {
    padding: 0;
    border: 0;
    -webkit-user-modify: read-only;
    white-space: normal;
}
.store-cms-content [contenteditable] { -webkit-user-modify: read-only; }
.store-cms-content h1,
.store-cms-content h2,
.store-cms-content h3,
.store-cms-content h4 {
    color: var(--title-color, #1b1b1b);
    font-family: var(--title-font, inherit);
    margin: 1.4em 0 .6em;
    line-height: 1.3;
}
.store-cms-content h1 { font-size: 30px; }
.store-cms-content h2 { font-size: 26px; }
.store-cms-content h3 { font-size: 22px; }
.store-cms-content p { margin: 0 0 1.1em; }
.store-cms-content ul,
.store-cms-content ol { margin: 0 0 1.1em; padding-inline-start: 1.5em; }
.store-cms-content li { margin-bottom: .5em; }
.store-cms-content a { color: var(--theme-color, #47b32d); text-decoration: underline; }
.store-cms-content img { max-width: 100%; height: auto; border-radius: 8px; }
.store-cms-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.1em; }
.store-cms-content th,
.store-cms-content td { border: 1px solid #e6e8e2; padding: 10px 14px; text-align: start; }
html[dir="rtl"] .store-cms-content { text-align: right; }

/* --------- App-like account "More/Menu" list --------- */
.store-menu__group {
    font-size: 14px;
    font-weight: 700;
    color: #9aa08f;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 22px 0 10px;
}
.store-menu__group:first-child { margin-top: 0; }
.store-menu__list { list-style: none; margin: 0 0 8px; padding: 0; }
.store-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #eceee7;
    border-radius: 12px;
    margin-bottom: 10px;
    color: var(--title-color, #1b1b1b);
    font-weight: 600;
    font-size: 16px;
    min-height: 60px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.store-menu__item:hover {
    color: var(--theme-color, #47b32d);
    border-color: var(--theme-color, #47b32d);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.store-menu__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--smoke-color, #f3f4ef);
    color: var(--theme-color, #47b32d);
    border-radius: 10px;
    font-size: 18px;
}
.store-menu__label { flex: 1 1 auto; }
.store-menu__meta {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-color, #47b32d);
    color: #fff;
    font-size: 12px;
    border-radius: 11px;
}
.store-menu__chevron { flex: 0 0 auto; color: #b7bcae; font-size: 14px; }
html[dir="rtl"] .store-menu__chevron { transform: scaleX(-1); }

/* --------- Footer overlap guard (see ADR-010) ---------
   The theme pulls .footer-layout1 up by -133px (with a compensating 253px
   widget-area top padding). Our content sections have < 133px bottom padding,
   so the footer covered real content — worst on mobile. This spacer absorbs
   the negative margin so each section's own padding becomes the visible gap. */
.store-footer-guard { height: 133px; }

/* Kill the oversized footer top padding on small screens (253px is fixed in
   the theme even on mobile, leaving a huge empty gap above the widgets). */
@media (max-width: 991.98px) {
    .footer-layout1 .widget-area { padding-top: 120px; }
}

/* --------- Floating WhatsApp button (admin-controlled) --------- */
.store-whatsapp-fab {
    position: fixed;
    inset-inline-end: 22px;
    bottom: 22px;
    z-index: 997;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    font-size: 28px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    transition: transform .2s ease;
}
.store-whatsapp-fab:hover { color: #fff; transform: scale(1.08); }
@media (max-width: 991.98px) {
    .store-whatsapp-fab { bottom: calc(70px + env(safe-area-inset-bottom, 0)); }
}

/* Real cart badge count on the header basket icon. */
.header-btns .sideCartToggler span {
    background: var(--theme-color);
    color: #fff;
}

/* Cart line remove button. */
.cart-remove-btn {
    background: transparent;
    border: 0;
    color: #c0392b;
    font-size: 18px;
    cursor: pointer;
    transition: transform .2s ease;
}
.cart-remove-btn:hover { transform: scale(1.15); }

/* --------- Checkout --------- */
.checkout-title { font-size: 22px; margin-bottom: 20px; font-family: var(--title-font); }
.woocommerce-checkout .form-group { margin-bottom: 20px; }
.order-review-wrap {
    background: #f7f8f5;
    border: 1px solid #e6e8e2;
    border-radius: 12px;
    padding: 28px;
}
.checkout-order-table { width: 100%; }
.checkout-order-table th, .checkout-order-table td { padding: 10px 6px; }
.payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    padding: 14px 16px;
    border: 1px solid var(--theme-color);
    border-radius: 8px;
    background: #fff;
}
.payment-option i { color: var(--theme-color); font-size: 20px; }

/* --------- Order confirmation --------- */
.order-confirm__icon { font-size: 72px; color: var(--theme-color); margin-bottom: 16px; }
.order-confirm__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 480px;
    margin: 30px auto 0;
    text-align: left;
}
.order-confirm__meta > div {
    background: #f7f8f5;
    border-radius: 10px;
    padding: 14px 18px;
}
.order-confirm__meta span { display: block; color: #777; font-size: 13px; }
.order-confirm__meta strong { font-size: 18px; }

/* --------- Order tracking result --------- */
.order-track-info p {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding: 10px 0;
    margin: 0;
}
.order-track-info p:last-child { border-bottom: 0; }

/* --------- Shop sidebar category counts: mirror padding for RTL --------- */
html[dir="rtl"] .widget_categories li a { padding: 5px 30px 5px 5px; }

/* --------- Widget title underline: align to the right in RTL --------- */
html[dir="rtl"] .widget_title::after { left: auto; right: 0; }

/* --------- Preloader: branded loading screen (no cancel button) --------- */
.store-preloader .preloader-inner { display: flex; flex-direction: column; align-items: center; }
.store-preloader__logo {
    max-height: 90px;
    width: auto;
    margin: 0 auto 14px auto;
    animation: storePreloaderPulse 1.6s ease-in-out infinite;
}
.store-preloader__name {
    display: block;
    margin: 0 0 18px 0;
    font-family: var(--title-font, inherit);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .5px;
    color: var(--title-color, #1b1b1b);
}
@keyframes storePreloaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: .82; }
}

/* --------- Footer: full RTL mirroring (contact info + category menu) --------- */
html[dir="rtl"] .footer-info { text-align: right; }
html[dir="rtl"] .footer-info__icon { margin: 0 0 0 17px; }
html[dir="rtl"] .footer-menu--style > ul { text-align: right; }
html[dir="rtl"] .footer-menu--style > ul > li > a { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .footer-menu--style > ul > li > a::before { content: "\f104"; left: auto; right: 0; }
html[dir="rtl"] .footer-menu--style > ul > li > a:hover { transform: translateX(-10px); }

/* --------- Category card: whole card clickable --------- */
.cate-style { position: relative; }
.cate-style:hover { cursor: pointer; }
.cate-style:hover .cate-title__link { color: var(--theme-color); }
.cate-style:hover .cate-num__link { color: var(--theme-color); }

/* --------- AJAX cart toast + loading state --------- */
.store-toast {
    position: fixed;
    z-index: 9999;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    min-width: 220px;
    max-width: 90vw;
    padding: 14px 24px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.store-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.store-toast--success { background: var(--theme-color, #85a947); }
.store-toast--error { background: #c0392b; }
.cart-btn.is-loading,
.vs-btn.is-loading,
.remove.is-loading,
.cart-remove-btn.is-loading {
    opacity: .55;
    pointer-events: none;
}

/* --------- Hero: single full-width banner image from admin --------- */
.hero-banner { position: relative; width: 100%; overflow: hidden; }
.hero-banner__carousel { margin: 0; }
.hero-banner__slide { display: block; line-height: 0; }
.hero-banner__img {
    display: block;
    width: 100%;
    height: auto;
}
/* Slider dots anchored to the bottom of the banner, clearly visible. */
.hero-banner .slick-dots {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 3;
}
.hero-banner .slick-dots button {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.hero-banner .slick-dots .slick-active button {
    background-color: var(--theme-color, #85a947);
}

/* --------- Language switcher (header top bar) --------- */
.header-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.header-lang__item {
    color: #fff;
    opacity: .7;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.6;
    transition: opacity .2s ease, background-color .2s ease;
}
.header-lang__item + .header-lang__item { border-left: 1px solid rgba(255, 255, 255, .25); }
.header-lang__item:hover { color: #fff; opacity: 1; }
.header-lang__item.is-active {
    opacity: 1;
    color: var(--theme-color, #85a947);
}
html[dir="rtl"] .header-lang__item + .header-lang__item {
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, .25);
}

/* --------- Minimal RTL support for Arabic locale --------- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .breadcumb-menu li { direction: rtl; }
html[dir="rtl"] .product-price del { margin-right: 8px; margin-left: 0; }
html[dir="rtl"] .cart-btn { left: 20px; right: auto; }

/* ==================================================================
|| APP-LIKE / MOBILE (Phase 1): bottom tab bar, mobile header, touch
|| ================================================================== */

/* Mobile header icon button (search) */
.store-icon-btn {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--smoke-color, #f3f4ef);
    border: 0;
    border-radius: 50%;
    color: var(--title-color, #1b1b1b);
    font-size: 18px;
}
.store-icon-btn:hover { background: var(--theme-color); color: #fff; }

/* Always show the header cart on mobile with a readable badge */
.header-btns .sideCartToggler { position: relative; }
.header-btns .sideCartToggler .js-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 1;
    border-radius: 9px;
}

/* ---- Bottom tab bar (mobile app shell) ---- */
.store-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid #e6e8e2;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.store-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    min-height: 56px;
    color: #7a7f74;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
.store-bottom-nav__item i { font-size: 19px; }
.store-bottom-nav__item span:last-child { display: block; }
.store-bottom-nav__item:hover,
.store-bottom-nav__item.is-active { color: var(--theme-color, #85a947); }
.store-bottom-nav__icon-wrap { position: relative; display: inline-flex; }
.store-bottom-nav__badge {
    position: absolute;
    top: -7px;
    inset-inline-end: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-color, #85a947);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    border-radius: 8px;
}

/* Keep page content clear of the fixed bottom bar (mobile only) */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
    .scrollToTop { bottom: calc(74px + env(safe-area-inset-bottom, 0)) !important; }
    .store-toast { bottom: calc(74px + env(safe-area-inset-bottom, 0)); }
}

/* Comfortable touch targets on small screens */
@media (max-width: 767.98px) {
    .vs-btn { min-height: 46px; }
    .form-control,
    .form-select,
    .nice-select { min-height: 46px; }
}

/* ==================================================================
|| SHOP: filters drawer + responsive product grid (Phase 3)
|| ================================================================== */
.vs-btn.vs-btn--sm { padding: 10px 18px; font-size: 14px; min-height: 44px; }
.store-filter-toggle i { margin-inline-end: 6px; }
.store-filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e8e2;
}
.store-filter-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--title-color, #1b1b1b); }

@media (min-width: 992px) {
    .store-filter-overlay { display: none; }
    .store-filter-panel__head { display: none; }
}

@media (max-width: 991.98px) {
    .store-filter-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: 86%;
        max-width: 340px;
        background: #fff;
        z-index: 1051;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 20px calc(30px + env(safe-area-inset-bottom, 0));
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    }
    html[dir="rtl"] .store-filter-panel { transform: translateX(100%); }
    body.store-filters-open .store-filter-panel { transform: translateX(0) !important; }
    .store-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        z-index: 1050;
        transition: opacity .3s ease;
    }
    body.store-filters-open .store-filter-overlay { opacity: 1; visibility: visible; }
    body.store-filters-open { overflow: hidden; }
}

/* Two-per-row product cards on phones/tablets: tighten imagery + text */
@media (max-width: 767.98px) {
    .vs-product .product-img img.img { height: 200px; }
    .vs-product .product-content { padding: 16px 14px; }
    .vs-product .product-title { font-size: 16px; }
}
@media (max-width: 575.98px) {
    .vs-product .product-img img.img { height: 160px; }
    .vs-product .product-content { padding: 14px 12px; }
    .vs-product .product-title { font-size: 14px; line-height: 1.35; }
    .vs-product .product-price { font-size: 15px; }
    .row.gy-4 { --bs-gutter-x: 14px; }
}

/* ==================================================================
|| PRODUCT sticky add-to-cart bar + CART mobile cards (Phase 4)
|| ================================================================== */
.product-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0));
    z-index: 998;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #e6e8e2;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
}
.product-sticky-bar__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.product-sticky-bar__name {
    font-weight: 600;
    font-size: 13px;
    color: var(--title-color, #1b1b1b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-sticky-bar__price { color: var(--theme-color, #47b32d); font-weight: 700; font-size: 16px; }
.product-sticky-bar .vs-btn { flex: 0 0 auto; padding: 12px 22px; min-height: 48px; }
.product-sticky-spacer { height: 78px; }

/* Cart page: turn stacked rows into clean cards on phones */
@media (max-width: 767px) {
    #store-cart-body .cart_table .cart_item { display: block; margin-bottom: 16px; }
    #store-cart-body .cart_table td:last-child { text-align: center; padding-left: 15px; }
    #store-cart-body .cart-footer .vs-btn { flex: 1 1 auto; text-align: center; }
    html[dir="rtl"] .cart_table td { text-align: left; padding-left: 15px; padding-right: 25%; }
    html[dir="rtl"] .cart_table td::before { left: auto; right: 15px; }
}