/* === Shared Storefront Styles === */

/* Toast notifications — used in Index, Cart, Product, Checkout, MyOrders */
.sf-toast { padding: 10px 14px; border-radius: 8px; margin: 8px 0 4px; font-size: 14px; border: 1px solid transparent; }
.sf-toast.ok { background: rgba(111, 168, 160, .12); color: #9ec5be; border-color: rgba(111, 168, 160, .35); }
.sf-toast.err { background: rgba(192, 57, 43, .14); color: #ecc1b8; border-color: rgba(192, 57, 43, .45); }

/* Status pills — used in Orders admin, MyOrders, Track */
.sf-status-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.sf-pill-AwaitingPayment, .sf-pill-PaymentSubmitted { background: rgba(255,152,0,.18); color: var(--accent); }
.sf-pill-Paid, .sf-pill-PaidPendingDetails, .sf-pill-Fulfilling { background: rgba(33,150,243,.18); color: #1565c0; }
.sf-pill-Completed { background: rgba(76,175,80,.18); color: #2e7d32; }
.sf-pill-Cancelled, .sf-pill-Refunded { background: rgba(0,0,0,.08); color: var(--muted); }

/* Cart top bar — used in Index, Cart, Product */
.sf-cart-bar {
    display: flex; justify-content: flex-end; gap: 10px; align-items: center;
    font-size: 14px; margin: 8px 0 4px;
}
.sf-cart-bar a { color: var(--accent); text-decoration: none; font-weight: 700; transition: text-shadow .15s; }
.sf-cart-bar a:hover { text-shadow: 0 0 10px var(--accent-glow); }
.sf-cart-bar .sep { color: rgba(212, 175, 55, .35); }

/* AJAX add-to-cart toast (floating) */
.sf-ajax-toast {
    position: fixed; top: 70px; right: 16px; z-index: 1000;
    padding: 12px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    background: rgba(28, 12, 4, 0.95);
    border: 1px solid rgba(111, 168, 160, .5);
    color: #9ec5be;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    transform: translateX(120%);
    transition: transform .3s ease;
    pointer-events: none;
}
.sf-ajax-toast.show { transform: translateX(0); }
.sf-ajax-toast.err {
    border-color: rgba(192, 57, 43, .5);
    color: #ecc1b8;
}

/* Custom modal overlay */
.sf-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.sf-modal-overlay.show { opacity: 1; pointer-events: auto; }
.sf-modal {
    background: var(--card, rgba(28, 12, 4, 0.95));
    border: 1px solid var(--border-strong, rgba(220, 110, 25, 0.85));
    border-radius: 12px;
    padding: 24px;
    max-width: 420px; width: 90%;
    box-shadow: 0 16px 48px rgba(0,0,0,.7);
    text-align: center;
}
.sf-modal h3 { margin: 0 0 12px; color: var(--text-accent, #ff9922); font-size: 18px; }
.sf-modal p { margin: 0 0 20px; color: var(--text, #f2dfa0); font-size: 14px; line-height: 1.6; }
.sf-modal .sf-modal-actions { display: flex; gap: 10px; justify-content: center; }
.sf-modal .sf-modal-actions .btn { min-width: 100px; }

/* Mobile checkout floating bar */
.sf-mobile-total-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(10, 4, 0, .96);
    border-top: 1px solid var(--border, rgba(185, 85, 18, 0.55));
    padding: 10px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.7);
}
@media (max-width: 959px) {
    .sf-mobile-total-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
}
.sf-mobile-total-bar .sf-total-label { color: var(--muted); font-size: 13px; }
.sf-mobile-total-bar .sf-total-num { color: var(--accent); font-size: 22px; font-weight: 800; }

/* Collapsible payment panel */
.sf-pay-panel-toggle {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; padding: 10px 12px;
    background: rgba(212,175,55,.06); border: 1px solid var(--border);
    border-radius: 10px; margin-top: 12px;
    transition: background .15s;
}
.sf-pay-panel-toggle:hover { background: rgba(212,175,55,.12); }
.sf-pay-panel-toggle .arrow { transition: transform .2s; }
.sf-pay-panel-toggle.open .arrow { transform: rotate(180deg); }
.sf-pay-panel-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.sf-pay-panel-body.open { max-height: 800px; }