/* AURA LIFE - Shop Pages Styles */
/* Cart, Checkout, Orders - Page specific styles */

:root {
    --success: #28a745;
    --danger: #dc3545;
    --gold: #c8a84e;
}
/* ============ Buttons ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 24px; border-radius: 8px; font-weight: 600; font-family: inherit;
    font-size: 14px; cursor: pointer; border: none; transition: 0.3s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(128,86,106,0.3); }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #b89740; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============ Cart Page ============ */
.cart-page { padding: 100px 0 30px; }
.page-title { font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #222; }
.page-title i { color: var(--primary); margin-left: 8px; }

.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 25px; align-items: start; }

.cart-items { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); overflow: hidden; }
.cart-item {
    display: grid; grid-template-columns: 90px 1fr auto;
    gap: 15px; padding: 20px; align-items: center;
    border-bottom: 1px solid #f0f0f0; transition: 0.3s;
}
.cart-item:hover { background: #fafafa; }
.cart-item:last-child { border-bottom: none; }

.cart-item-image { width: 90px; height: 90px; border-radius: 10px; overflow: hidden; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }

.cart-item-info h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.cart-item-info h3 a { color: #333; }
.cart-item-info h3 a:hover { color: var(--primary); }
.cart-item-sku { font-size: 12px; color: #999; margin-bottom: 8px; }
.cart-item-price { font-size: 14px; font-weight: 700; color: var(--primary); }
.cart-item-price .old-price { text-decoration: line-through; color: #bbb; font-weight: 400; font-size: 12px; margin-right: 5px; }

.cart-item-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qty-control { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.qty-btn {
    width: 34px; height: 34px; border: none; background: #f5f5f5;
    font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.3s; color: #555;
}
.qty-btn:hover { background: var(--primary); color: #fff; }
.qty-input {
    width: 45px; height: 34px; border: none; text-align: center;
    font-family: inherit; font-weight: 600; font-size: 14px; outline: none;
    border-left: 1px solid #ddd; border-right: 1px solid #ddd;
}
.cart-remove { color: #ccc; font-size: 14px; cursor: pointer; transition: 0.3s; background: none; border: none; }
.cart-remove:hover { color: var(--danger); }

.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty i { font-size: 60px; color: #ddd; margin-bottom: 15px; }
.cart-empty h3 { color: #666; margin-bottom: 10px; }
.cart-empty p { color: #999; margin-bottom: 20px; }

/* ============ Cart Summary ============ */
.cart-summary {
    background: #fff; border-radius: 12px; padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04); position: sticky; top: 120px;
}
.cart-summary h3 { font-size: 18px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; }

.coupon-form { display: flex; gap: 8px; margin-bottom: 20px; }
.coupon-form input {
    flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px;
    font-family: inherit; outline: none; font-size: 13px;
}
.coupon-form input:focus { border-color: var(--primary); }
.coupon-applied {
    display: flex; justify-content: space-between; align-items: center;
    background: #f0faf0; padding: 8px 12px; border-radius: 8px; margin-bottom: 15px; font-size: 13px;
}
.coupon-applied .remove-coupon { color: var(--danger); cursor: pointer; background: none; border: none; font-size: 12px; }

.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #666; }
.summary-row.discount { color: var(--success); }
.summary-row.shipping { }
.summary-row.tax { font-size: 13px; }
.summary-total {
    display: flex; justify-content: space-between; padding: 15px 0 0;
    margin-top: 10px; border-top: 2px solid #222; font-size: 20px; font-weight: 800; color: #222;
}
.summary-total small { font-size: 14px; font-weight: 400; }

.free-shipping-note { background: #f0faf0; color: var(--success); padding: 8px 12px; border-radius: 8px; font-size: 12px; text-align: center; margin: 15px 0; }
.free-shipping-note i { margin-left: 5px; }

.checkout-btn { width: 100%; margin-top: 15px; padding: 14px; font-size: 16px; }
.continue-shopping { display: block; text-align: center; margin-top: 10px; color: #888; font-size: 13px; }
.continue-shopping:hover { color: var(--primary); }

/* ============ Checkout Page ============ */
.checkout-page { padding: 100px 0 30px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 25px; align-items: start; }

.checkout-section { background: #fff; border-radius: 12px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.checkout-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 8px; }
.checkout-section h3 i { color: var(--primary); }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.form-group label .required { color: var(--danger); }
.form-control {
    width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none; transition: 0.3s;
    background: #fff;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(128,86,106,0.1); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; padding-left: 35px; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Shipping Methods */
.shipping-options { display: flex; flex-direction: column; gap: 10px; }
.shipping-option {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    border: 2px solid #eee; border-radius: 10px; cursor: pointer; transition: 0.3s;
}
.shipping-option:hover { border-color: var(--primary); }
.shipping-option.active { border-color: var(--primary); background: rgba(128,86,106,0.03); }
.shipping-option input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; }
.shipping-option-info { flex: 1; }
.shipping-option-name { font-weight: 600; font-size: 14px; }
.shipping-option-desc { font-size: 12px; color: #888; }
.shipping-option-price { font-weight: 700; color: var(--primary); font-size: 14px; }
.shipping-free { color: var(--success); }

/* Payment Methods */
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    border: 2px solid #eee; border-radius: 10px; cursor: pointer; transition: 0.3s;
}
.payment-option:hover { border-color: var(--primary); }
.payment-option.active { border-color: var(--primary); background: rgba(128,86,106,0.03); }
.payment-option input[type="radio"] { accent-color: var(--primary); width: 18px; height: 18px; }
.payment-option-icon { width: 40px; text-align: center; font-size: 20px; color: var(--primary); }
.payment-option-name { font-weight: 600; font-size: 14px; }
.payment-option-desc { font-size: 12px; color: #888; }
.payment-instructions { background: #f8f8fa; padding: 12px; border-radius: 8px; font-size: 13px; color: #666; margin-top: 10px; white-space: pre-line; }

/* Order Summary Sidebar */
.checkout-summary { position: sticky; top: 120px; }
.order-items-preview { max-height: 300px; overflow-y: auto; margin-bottom: 15px; }
.order-preview-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; align-items: center; }
.order-preview-item:last-child { border-bottom: none; }
.order-preview-img { width: 55px; height: 55px; border-radius: 8px; overflow: hidden; position: relative; }
.order-preview-img img { width: 100%; height: 100%; object-fit: cover; }
.order-preview-qty {
    position: absolute; top: -5px; left: -5px; background: var(--primary); color: #fff;
    width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.order-preview-info { flex: 1; }
.order-preview-name { font-size: 13px; font-weight: 500; }
.order-preview-price { font-size: 13px; color: var(--primary); font-weight: 600; }

/* ============ Order Success ============ */
.order-success { text-align: center; padding: 60px 20px; max-width: 600px; margin: 0 auto; }
.order-success .success-icon { width: 100px; height: 100px; background: #f0faf0; color: var(--success); font-size: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.order-success h1 { font-size: 28px; color: #222; margin-bottom: 10px; }
.order-success .order-num { font-size: 18px; color: var(--primary); font-weight: 700; margin-bottom: 20px; }
.order-details-box { background: #f8f8fa; padding: 20px; border-radius: 12px; text-align: right; margin: 20px 0; }
.order-details-box .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.order-details-box .detail-row:last-child { border-bottom: none; }

/* ============ My Orders ============ */
.orders-list { }
.order-card { background: #fff; border-radius: 12px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); overflow: hidden; }
.order-card-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    padding: 15px 20px; background: #f8f8fa; gap: 10px;
}
.order-number { font-weight: 700; color: var(--primary); }
.order-date { font-size: 13px; color: #888; }
.order-status { padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; }
.order-card-body { padding: 15px 20px; }
.order-card-items { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.order-card-item-img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; border: 1px solid #eee; }
.order-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid #f0f0f0; }
.order-total { font-weight: 700; font-size: 16px; }

/* ============ Breadcrumb ============ */
.breadcrumb { padding: 12px 0; font-size: 13px; color: #888; }
.breadcrumb a { color: var(--primary); }
.breadcrumb span { margin: 0 5px; }

/* ============ Add to Cart Button (for product pages) ============ */
.add-to-cart-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; background: var(--primary); color: #fff;
    border: none; border-radius: 10px; font-family: inherit; font-weight: 700;
    font-size: 15px; cursor: pointer; transition: 0.3s;
}
.add-to-cart-btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(128,86,106,0.3); }
.add-to-cart-btn.loading { opacity: 0.7; pointer-events: none; }
.add-to-cart-btn .spinner { display: none; animation: spin 0.8s linear infinite; }
.add-to-cart-btn.loading .spinner { display: inline-block; }
.add-to-cart-btn.loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Product Card (Updated for Cart) ============ */
.product-card .quick-add {
    position: absolute; bottom: -50px; left: 0; right: 0;
    padding: 10px; transition: 0.3s; opacity: 0;
}
.product-card:hover .quick-add { bottom: 0; opacity: 1; }
.quick-add-btn {
    width: 100%; padding: 10px; background: var(--primary); color: #fff;
    border: none; border-radius: 0 0 10px 10px; font-family: inherit;
    font-weight: 600; cursor: pointer; transition: 0.3s; font-size: 13px;
}
.quick-add-btn:hover { background: var(--primary-dark); }

/* ============ Toast Notifications ============ */
.toast-container { position: fixed; top: 100px; left: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: #fff; padding: 14px 20px; border-radius: 10px; min-width: 300px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px;
    transform: translateX(-100%); opacity: 0; transition: 0.4s; font-size: 14px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-right: 4px solid var(--success); }
.toast.error { border-right: 4px solid var(--danger); }
.toast i { font-size: 20px; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }

/* ============ Loading Overlay ============ */
.loading-overlay {
    position: fixed; inset: 0; background: rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: center;
    z-index: 3000; opacity: 0; visibility: hidden; transition: 0.3s;
}
.loading-overlay.active { opacity: 1; visibility: visible; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid #eee; border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }


/* ============ Responsive ============ */
@media (max-width: 991px) {
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .cart-summary, .checkout-summary { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .features-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .top-bar { display: none; }
    .header-search { display: none; }
    .mobile-menu-btn {
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; background: rgba(255,255,255,0.05);
        border: none; color: #fff; font-size: 20px; border-radius: 8px; cursor: pointer;
    }
    .mobile-sidebar { display: block; }
    .nav-list { padding: 0 10px; }
    .nav-link { padding: 10px 12px; font-size: 12px; }
    
    .cart-item { grid-template-columns: 70px 1fr; gap: 12px; padding: 15px; }
    .cart-item-image { width: 70px; height: 70px; }
    .cart-item-actions { flex-direction: row; justify-content: space-between; grid-column: 1 / -1; }
    
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 25px; }
    .features-grid { grid-template-columns: 1fr; gap: 15px; }
    .feature-item { justify-content: center; }
    
    .page-title { font-size: 20px; }
    .summary-total { font-size: 18px; }
}

@media (max-width: 480px) {
    .container { padding: 0 15px; }
    .checkout-section { padding: 15px; }
    .cart-summary { padding: 20px; }
    .mini-cart-popup { left: 10px; right: 10px; width: auto; }
}