/**
 * BrainChai Cart Manager - Custom Styles
 * Version: 2.21.0
 *
 * Note: As of v2.0, the plugin renders its own side cart HTML.
 * Bricks Builder selectors (.brxe-*, .ct-*) were never present in this file;
 * Bricks styles are managed by the theme, not the plugin.
 */

/* ================================================
   SIDE CART SHELL STYLES
   Plugin-rendered side cart (v2.0)
   ================================================ */

/* Main Modal Container */
.single-pack-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 550px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
                rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    /* Animation: slide in from right */
    transform: translateX(100%);
    transition: transform 300ms ease-out;
}

/* When modal is open (JS adds .is-open class after display:flex) */
.single-pack-modal.is-open {
    transform: translateX(0);
}

/* Products scroll area */
.tea_container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 70px 24px 200px; /* Reduced from 100px: header is ~52px + 18px spacing */
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Header section */
.bchai-cart-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: #191716; /* Brand dark color */
    z-index: 10;
}

/* STYLE-01: Arrow positioned absolutely on left, title centered */
.bchai-cart-header .close-modal {
    position: absolute;
    left: 24px;
}

.bchai-cart-title {
    flex: 1;
    text-align: center;
    font-family: 'Mont', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}

/* Close button */
.close-modal {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.close-modal:hover {
    opacity: 0.7;
}

.close-modal:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Products placeholder */
.bchai-cart-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Footer placeholder (styled in Phase 5) */
.bchai-cart-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #191716;
    padding: 16px 24px;
    z-index: 10;
}

/* ================================================
   BACKDROP OVERLAY
   ================================================ */

.overlay-bg-blurred {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* Safari support */
    /* Animation synced with modal */
    opacity: 0;
    transition: opacity 300ms ease-out;
    cursor: pointer; /* Indicate clickable */
}

/* When overlay is visible */
.overlay-bg-blurred[style*="display: flex"],
.overlay-bg-blurred[style*="display:flex"],
.overlay-bg-blurred[style*="display: block"],
.overlay-bg-blurred[style*="display:block"] {
    opacity: 1;
}

/* ================================================
   FLOATING CART TRIGGER BUTTON
   ================================================ */

.side-cart-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998; /* Below modal but above page content */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #191716; /* Brand dark color */
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.side-cart-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.side-cart-trigger:focus {
    outline: 2px solid rgb(255, 107, 9);
    outline-offset: 2px;
}

/* Cart icon inside trigger */
.side-cart-trigger i {
    font-size: 24px;
    color: #fff;
}

/* Quantity badge */
.cart-quantity-bubble {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 107, 9); /* Orange accent */
    color: #fff;
    font-family: 'Mont', sans-serif;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    line-height: 1;
}

/* ================================================
   BODY SCROLL LOCK & ACCESSIBILITY
   ================================================ */

/* Body scroll lock when cart is open */
body.bchai-cart-open {
    overflow: hidden !important;
}

/* Prevent layout shift from scrollbar disappearing */
@supports (scrollbar-gutter: stable) {
    body.bchai-cart-open {
        scrollbar-gutter: stable;
    }
}

/* ================================================
   ANIMATIONS & REDUCED MOTION
   ================================================ */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .single-pack-modal,
    .overlay-bg-blurred,
    .side-cart-trigger {
        transition: none;
    }
}

/* ================================================
   LEGACY STYLES (migrated from v1.0)
   Keep for backward compatibility
   ================================================ */

/* Quantity controls styling */
.modal_add_qty_button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plus_qty,
.minus_qty {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.plus_qty:hover,
.minus_qty:hover {
    opacity: 0.7;
}

/* Price display styling - adjusted to match original format */
.modal_price {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.modal_price s {
    color: #999;
    font-weight: normal;
    font-size: inherit;
    margin-right: 5px;
}

/* Shipping message styling */
.shipping-message-side-cart {
    color: #28a745;
    font-weight: 500;
}

/* Bottle price centering in side cart */
.champagne_bottle_price,
.black_bottle_price,
.glass_bottle_price {
    text-align: center;
    display: block;
    width: 100%;
}

/* Strikethrough styling for bottle prices */
.champagne_bottle_price s,
.black_bottle_price s,
.glass_bottle_price s {
    color: #999;
    margin-right: 5px;
}

/* Arrow message styling */
.gift_tea_arrow .arrow-text {
    margin-left: 10px;
}

/* Product Suggestion Badge */
.suggestion-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
    animation: suggestionPulse 2s ease-in-out infinite;
    white-space: nowrap;
}

.suggestion-badge::before {
    content: "\2605"; /* Star character */
    margin-right: 4px;
    font-size: 10px;
}

@keyframes suggestionPulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.5);
    }
}

/* Suggested product highlight border - legacy */
.buy-now-modal-tea.is-suggested {
    position: relative;
    border-left: 3px solid #4CAF50;
    transition: all 0.3s ease;
}

/* SUGGEST-01: Suggested product highlight - plugin-rendered cards */
.sc-product-card.is-suggested {
    position: relative;
    border: 2px solid #FF6B0B;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: visible;
}

/* Product Suggestion Badge - inside card border for plugin-rendered cards */
.sc-product-card .suggestion-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    background: #FF6B0B;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(255, 107, 11, 0.3);
    white-space: nowrap;
    z-index: 1;
    animation: none; /* Override legacy pulse animation */
}

/* Remove default star icon for plugin-rendered cards */
.sc-product-card .suggestion-badge::before {
    content: none;
}

/* ================================================
   PRODUCT CARD STYLES (Phase 4)
   sc-* prefixed selectors for clean implementation
   ================================================ */

/* Product container (scrollable area) */
.sc-product-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Individual product card */
.sc-product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 10.67px;
    background-color: rgb(243, 243, 243);
    border-radius: 10px;
    position: relative;
    font-family: 'Mont', sans-serif;
}

/* Product image container */
.sc-product-image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Product info (name + price) */
.sc-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Allow text truncation */
}

.sc-product-name {
    font-size: 16px;
    font-weight: 600;
    color: rgb(20, 20, 20);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-product-price {
    font-size: 14px;
    font-weight: 500;
    color: #191716;
}

.sc-product-price s {
    color: #999;
    margin-right: 5px;
}

/* Product controls (Add button OR qty controls) */
.sc-product-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Add button */
/* STYLE-05: Green (#404D3B) add buttons */
.sc-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 8px 16px;
    background: #404D3B;
    color: rgb(242, 244, 241);
    font-size: 14.67px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 7.33px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    text-decoration: none;
}

.sc-add-btn:hover {
    background: #364331;
    color: rgb(242, 244, 241);
}

/* Quantity controls wrapper */
.sc-qty-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10.67px;
    padding: 5.33px 8px;
    background: #fff;
    border: 1px solid #191716;
    border-radius: 10px;
}

/* Plus/Minus buttons */
.sc-plus-btn,
.sc-minus-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #191716;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s;
}

.sc-plus-btn:hover,
.sc-minus-btn:hover {
    opacity: 0.7;
}

.sc-plus-btn i,
.sc-minus-btn i {
    color: #fff;
    font-size: 10px;
}

/* Quantity display */
.sc-qty {
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    min-width: 20px;
    color: rgb(20, 20, 20);
}

/* Divider between main products and gift bottles */
/* STYLE-02: Text before arrow, both vertically centered */
.sc-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10.67px;
    padding: 12px 0;
}

.sc-divider img {
    height: 24px;
    width: auto;
    margin-top: 14px;
}

.sc-divider .arrow-text {
    font-size: 16px;
    font-weight: 500;
    color: #191716;
}

/* ================================================
   GIFT CARD STYLES (Phase 11)
   Gift products displayed as locked cards
   ================================================ */

/* Gift card base - inherits from .sc-product-card */
.sc-product-card.sc-gift-card {
    border: 2px solid #4CAF50;
    position: relative;
    pointer-events: none;
    cursor: default;
}

/* Gift badge - positioned on right side where qty controls would be */
.sc-gift-badge {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: #4CAF50;
    color: #fff;
    font-family: 'Mont', sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    line-height: 1.2;
}

/* Gift price - strikethrough original + free price */
.sc-gift-card .sc-product-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-gift-card .sc-product-price s {
    color: #999;
    font-weight: 400;
}

.sc-gift-card .sc-product-price .gift-free-price {
    color: #4CAF50;
    font-weight: 600;
}

/* Hide controls for gift cards (they shouldn't exist, but defensive) */
.sc-gift-card .sc-product-controls {
    display: none !important;
}

/* Ensure gift cards don't respond to hover/click */
.sc-gift-card:hover {
    background-color: rgb(243, 243, 243); /* Same as default, no change */
}

/* ================================================
   TIER NUDGE BANNER (Phase 12)
   Promotional message showing next tier benefits
   ================================================ */

/* Base banner styling - orange accent per CONTEXT.md */
.sc-tier-nudge {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 2px solid #FF6B0B;
    border-radius: 8px;
    background: #FFF;
    color: #191716;
    font-family: 'Mont', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
    animation: scNudgeFadeIn 300ms ease-out;
}

/* Completion state - green when all gifts unlocked */
.sc-tier-nudge--completion {
    border-color: #4CAF50;
    color: #4CAF50;
}

/* Fade in animation with subtle upward slide */
@keyframes scNudgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .sc-tier-nudge {
        animation: none;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .sc-tier-nudge {
        font-size: 13px;
        padding: 10px 14px;
    }
}

/* ================================================
   FOOTER STYLES (Phase 5)
   ================================================ */

/* Footer container - enhanced from Phase 3 baseline */
.bchai-cart-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #191716;
    padding: 16px 24px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Summary row (label + price) */
.bchai-footer-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Summary label */
.bchai-footer-label {
    font-family: 'Mont', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* Total price display - override legacy styles for footer context */
.bchai-cart-footer .modal_price {
    font-family: 'Mont', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
}

/* Strikethrough price when discount applies */
.bchai-cart-footer .modal_price s {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    margin-right: 8px;
}

/* Shipping message - override legacy styles for footer context */
.bchai-cart-footer .shipping-message-side-cart {
    font-family: 'Mont', sans-serif;
    font-size: 13.33px;
    font-weight: 300;
    color: #fff;
    margin-top: -8px;
    text-align: right;
}

/* Checkout link wrapper */
.finish_order_single {
    display: block;
    text-decoration: none;
}

/* Checkout button (default empty cart state) */
/* STYLE-04: Centered text */
.modal-buy-now-button {
    width: 100%;
    padding: 12px 24px;
    font-family: 'Mont', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}

.modal-buy-now-button:hover {
    background: rgb(242, 244, 241);
}

/* 60-day guarantee section */
.bchai-footer-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
}

.bchai-guarantee-check {
    color: #FF6B0B;
    font-size: 16px;
    line-height: 1;
}

.bchai-footer-guarantee span {
    font-family: 'Mont', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

/* ================================================
   RESPONSIVE STYLES
   ================================================ */

/* Product cards mobile adjustments */
@media (max-width: 768px) {
    .sc-product-card {
        gap: 12px;
        padding: 8px;
    }

    .sc-product-image {
        width: 56px;
        height: 56px;
    }

    .sc-add-btn {
        min-width: 80px;
        padding: 6px 12px;
        font-size: 13px;
        background: #404D3B;
    }

    .sc-qty-controls {
        gap: 8px;
        padding: 4px 6px;
    }
}

@media (max-width: 768px) {
    .single-pack-modal {
        width: 100%;
        max-width: none;
    }

    .tea_container {
        padding: 60px 16px 180px; /* Reduced: mobile header is ~48px */
        gap: 24px;
    }

    .bchai-cart-header {
        padding: 12px 16px;
    }

    .bchai-cart-footer {
        padding: 12px 16px;
        gap: 10px;
    }

    .modal-buy-now-button {
        padding: 10px 20px;
        font-size: 15px;
    }

    .bchai-footer-guarantee {
        padding-top: 6px;
    }

    .bchai-footer-guarantee span {
        font-size: 11px;
    }

    .side-cart-trigger {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .side-cart-trigger i {
        font-size: 20px;
    }

    .cart-quantity-bubble {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        top: -4px;
        right: -4px;
    }

    .suggestion-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* SUGGEST-01: Mobile responsive badge for plugin-rendered cards */
    .sc-product-card .suggestion-badge {
        font-size: 9px;
        padding: 2px 6px;
        top: -8px;
        left: 8px;
    }

    /* Gift card mobile adjustments */
    .sc-gift-badge {
        font-size: 9px;
        padding: 3px 10px;
        right: 12px;
        /* top/transform inherited from desktop */
    }

    .sc-gift-card .sc-product-price {
        flex-wrap: wrap;
        gap: 4px;
    }
}