/* ============================================================================
   FILE: cart.css
   DESCRIPTION: Shopping Cart Sidebar and Checkout UI.
   Contains styles for the sliding cart drawer, cart items, 
   quantity controls, and shipping notices.
   ============================================================================ */

/* --- 1. CART SIDEBAR & OVERLAY --- */
/* The cart drawer slides in from the right side of the screen.
   Uses both 100vh (fallback for older browsers) and 100dvh (dynamic viewport
   height that adapts to mobile browser chrome like Safari's address bar). */
.cart-sidebar {
    position: fixed; 
    top: 0; 
    right: -100%; 
    width: 400px; 
    max-width: 90%; 
    height: 100vh; /* Fallback for browsers that do not support dvh */
    height: 100dvh; /* Adapts to mobile bottom UI bars (Safari, Chrome) */
    background-color: var(--bg-section); 
    z-index: 3000; 
    box-shadow: -10px 0 30px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); 
}

.cart-sidebar.open { 
    right: 0; 
}

.cart-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.5); 
    backdrop-filter: blur(4px);
    z-index: 2999; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.4s ease;
}

.cart-overlay.open { 
    opacity: 1; 
    visibility: visible; 
}

.cart-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 25px; 
    border-bottom: 1px solid rgba(0,0,0,0.06); 
}

.cart-header h3 { 
    font-size: 1.2rem; 
    color: var(--text-main); 
}

/* --- 2. CART ITEMS AREA --- */
.cart-items-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 20px 25px; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.empty-cart-msg { 
    text-align: center; 
    color: #888888; 
    font-size: 0.9rem; 
    margin-top: 50px; 
}

/* Individual Cart Item */
.cart-item { 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    background: var(--text-light); 
    padding: 12px; 
    border-radius: var(--card-radius); 
    border: 1px solid rgba(0,0,0,0.05); 
}

.cart-item-img { 
    width: 65px; 
    height: 65px; 
    border-radius: var(--btn-radius); 
    object-fit: cover; 
}

.cart-item-details { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

.cart-item-title { 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--text-main); 
    line-height: 1.2; 
}

.cart-item-variant { 
    font-size: 0.7rem; 
    color: var(--text-sub); 
}

.cart-item-price { 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--primary-gold); 
}

/* --- 3. QUANTITY CONTROLS & ACTIONS --- */
.cart-item-actions { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-top: 5px; 
}

.quantity-control { 
    display: flex; 
    align-items: center; 
    background: #f5f5f5; 
    border-radius: var(--btn-radius); 
    overflow: hidden; 
}

.qty-btn { 
    background: none; 
    border: none; 
    padding: 4px 10px; 
    cursor: pointer; 
    font-size: 1rem; 
    color: #333333; 
    transition: background 0.2s; 
}

.qty-btn:hover { 
    background: #e0e0e0; 
}

.qty-value { 
    font-size: 0.8rem; 
    font-weight: 600; 
    padding: 0 10px; 
    min-width: 25px; 
    text-align: center; 
}

/* Remove Item Button */
.remove-item-btn { 
    background: none; 
    border: none; 
    color: #aaaaaa; 
    cursor: pointer; 
    transition: color 0.3s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 5px; 
}

.remove-item-btn:hover { 
    color: #EA4335; 
    transform: scale(1.1); 
}

/* --- 4. CART FOOTER & SHIPPING UI (Premium Design) --- */
/* Uses env(safe-area-inset-bottom) to pad the footer above the iOS home
   indicator bar on notch-equipped devices (iPhone X and later). */
.cart-footer { 
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom)) 20px;
    border-top: 1px solid rgba(0,0,0,0.06); 
    background-color: var(--text-light); 
}

.cart-total-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--text-main); 
    margin-bottom: 12px; 
    padding: 0 4px;
}

.cart-price-column { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    gap: 2px; 
}

.cart-total-price { 
    color: var(--primary-gold);
    font-size: 1.3rem; 
    line-height: 1; 
}

.shipping-plus-text { 
    font-size: 0.75rem; 
    color: #888888;
    font-weight: 500; 
    font-style: italic; 
}

/* Shipping Notice */
.shipping-notice {
    display: flex; 
    align-items: center; 
    gap: 10px;
    background-color: rgba(212, 160, 23, 0.04); 
    border: 1px solid rgba(212, 160, 23, 0.18); 
    padding: 10px 12px; 
    border-radius: var(--btn-radius); 
    margin-bottom: 14px; 
}

.shipping-notice-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--btn-radius); /* सर्कल की जगह वेबसाइट के स्टैंडर्ड स्क्वायर-कर्व्ड रेडियस का इस्तेमाल */
    background-color: rgba(212, 160, 23, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shipping-notice-icon svg { 
    color: var(--primary-gold); 
}

.shipping-notice p { 
    font-size: 0.74rem; 
    color: var(--text-main); 
    line-height: 1.35; 
    margin: 0; 
    font-weight: 500; 
    letter-spacing: 0.01em;
}

/* Checkout Button with Hover Support */
.checkout-btn {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    width: 100%; 
    height: 45px;
    background-color: var(--text-main); 
    color: var(--text-light); 
    text-decoration: none; 
    font-size: 0.85rem;
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    border: none;
    border-radius: var(--btn-radius); 
    transition: all 0.4s ease; 
    cursor: pointer;
}

.checkout-btn:hover { 
    background-color: var(--wa-green); 
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25); 
    transform: translateY(-2px); 
}

/* Minimal Trust Footnote */
.minimal-trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 2px;
}

.minimal-trust-badge svg {
    color: var(--text-muted);
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

.minimal-trust-badge span {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}