/* ============================================
   webstore — Bootstrap 5 Enhanced Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ===== BOOTSTRAP VARIABLES OVERRIDE ===== */
:root {
    --primary: #00a2a3;
    --primary-rgb: 0, 162, 163;
    --primary-light: color-mix(in srgb, var(--primary) 60%, #fff);
    --primary-dark: #007e7f;
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-secondary: #2EC4B6;
    --bs-secondary-rgb: 46, 196, 182;
    --bs-success: #06D6A0;
    --bs-success-rgb: 6, 214, 160;
    --bs-danger: #EF476F;
    --bs-danger-rgb: 239, 71, 111;
    --bs-warning: #FFD166;
    --bs-warning-rgb: 255, 209, 102;
    --bs-info: #118AB2;
    --bs-info-rgb: 17, 138, 178;
    --bs-dark: #1A1A2E;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-heading-font-family: 'Space Grotesk', sans-serif;
    --bs-body-color: #2D3436;
    --bs-body-bg: #FFFAF6;
    --bs-border-color: rgba(var(--primary-rgb), 0.15);
    --bs-border-radius: 16px;
    --bs-border-radius-lg: 24px;
    --bs-border-radius-xl: 32px;
    --bs-box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.08);
    --bs-box-shadow-lg: 0 12px 40px rgba(var(--primary-rgb), 0.12);
}

@property --btn-grad-a {
    syntax: '<color>';
    inherits: true;
    initial-value: #ffffff;
}
@property --btn-grad-b {
    syntax: '<color>';
    inherits: true;
    initial-value: #000000;
}

/* ===== CUSTOM THEME ===== */
body { background: rgba(var(--primary-rgb), 0.04); min-height: 100vh; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--bs-heading-font-family); }

/* Brand gradient text */
.text-gradient { background: linear-gradient(135deg, var(--primary), #EF476F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-success { background: linear-gradient(135deg, var(--primary-dark), rgba(0,0,0,0.65)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Brand gradient backgrounds */
.bg-gradient-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.bg-gradient-success { background: linear-gradient(135deg, #06D6A0, #05B588); }
.bg-gradient-danger { background: linear-gradient(135deg, #EF476F, #D63D5E); }
.bg-gradient-whatsapp { background: linear-gradient(135deg, #25D366, #1DA851); }
.bg-warm { background: rgba(var(--primary-rgb), 0.04); }
.bg-soft-primary { background: rgba(var(--primary-rgb), 0.08); }

/* Buttons */
.btn { font-weight: 700; font-size: 0.875rem; padding: 0.625rem 1.5rem; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: 10px; }
.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; border-radius: 16px; }
.btn-primary { --btn-grad-a: var(--primary-light); --btn-grad-b: var(--primary-dark); background: linear-gradient(135deg, var(--btn-grad-a), var(--btn-grad-b)); border: none; transition: --btn-grad-a 0.7s ease, --btn-grad-b 0.7s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-primary:hover { --btn-grad-a: var(--primary-dark); --btn-grad-b: var(--primary-light); }
.btn-success { background: linear-gradient(135deg, #06D6A0, #05B588); border: none; }
.btn-success:hover { background: linear-gradient(135deg, #05B588, #06D6A0); border: none; }
.btn-danger { background: linear-gradient(135deg, #EF476F, #D63D5E); border: none; }
.btn-danger:hover { background: linear-gradient(135deg, #D63D5E, #EF476F); border: none; }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-whatsapp { background: linear-gradient(135deg, #25D366, #1DA851); color: #fff; border: none; }
.btn-whatsapp:hover { background: linear-gradient(135deg, #1DA851, #25D366); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3); }

/* Cards */
.card { border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #fff; }
.card:hover { border-color: var(--primary);}
.card-header { background: transparent; border-bottom: 2px solid rgba(var(--primary-rgb), 0.15); padding: 1.25rem 1.5rem; font-weight: 700; }

/* Product card top accent */
.product-card { position: relative; overflow: hidden; }
.product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-light), var(--primary-dark)); transform: scaleX(0); transition: transform 0.3s ease; z-index: 2; }
.product-card:hover::before { transform: scaleX(1); }
.product-card .card-img-top { height: 200px; object-fit: cover; }
.product-card .card-img-top--placeholder { height: 200px; background: rgba(var(--primary-rgb), 0.08); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }

/* Forms */
.form-control, .form-select { border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 14px; padding: 0.75rem 1rem; font-size: 0.95rem; transition: all 0.2s ease; background-color: rgba(var(--primary-rgb), 0.04); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12); }
.form-label { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.375rem; color: #2D3436; }

/* Form validation errors */
.val-error { display: none; color: #EF476F; font-size: 0.8rem; font-weight: 600; margin-top: 0.375rem; }
.error .val-error { display: block; }
.error .form-label { color: #EF476F; }
.error .form-control, .error .form-select { border-color: #EF476F; box-shadow: 0 0 0 4px rgba(239, 71, 111, 0.12); background-color: rgba(239, 71, 111, 0.03); }

/* Navbar / Header */
.navbar { padding: 0.75rem 0; }
.navbar-brand { font-family: var(--bs-heading-font-family); font-weight: 700; font-size: 1.5rem; color: var(--primary-dark); }

/* Store Header Card */
.store-header-card { background: #fff; border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 24px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.06); }
.store-header-card img { width: 72px; height: 72px; object-fit: contain; border-radius: 16px; }

.products-scroll { max-height: calc(100vh - 260px); overflow-y: auto; overflow-x: hidden; padding-top: 0.5rem; }

/* Desktop product grid: 3, 4, 5, 6 columns by screen width */
@media (min-width: 992px) {
    #products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 !important; }
    #products-grid > * { width: auto !important; max-width: none !important; padding: 0 !important; margin-top: 0 !important; }
}
@media (min-width: 1200px) {
    #products-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
    #products-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1600px) {
    #products-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Cart drawer items */
.cart-item { display: flex; align-items: center; padding: 0.875rem 0; border-bottom: 1px solid rgba(var(--primary-rgb), 0.15); gap: 0.75rem; }
.cart-item:last-child { border-bottom: none; }

.qty-btn, .remove-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 10px; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.qty-btn { background: rgba(var(--primary-rgb), 0.08); color: var(--primary); }
.qty-btn:hover { background: var(--primary); color: #fff; }
.remove-btn { background: #FFF0F0; color: #EF476F; }
.remove-btn:hover { background: #EF476F; color: #fff; }

/* Filter / Category pills */
.filter-pill { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 50px; font-size: 0.8rem; font-weight: 700; color: #636E72; text-decoration: none; transition: all 0.2s; background: #fff; }

.filters-row { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 768px) {
    .filters-row { gap: 2.5rem; }
}
.filter-scroll { display: flex; gap: 0.5rem; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.filter-scroll .filter-pill { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }
.filter-scroll::-webkit-scrollbar { height: 5px; }
.filter-scroll::-webkit-scrollbar-track { background: transparent; }
.filter-scroll::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.25); border-radius: 10px; }
.search-form .search-box { flex: 1; min-width: 0; }
.filter-pill:hover { border-color: var(--primary); color: var(--primary); }
.filter-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Status badges */
.status-badge { display: inline-block; padding: 0.25rem 0.875rem; border-radius: 50px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.status-pending { background: #FFF8E1; color: #E6A800; }
.status-confirmed { background: #E3F2FD; color: #1565C0; }
.status-preparing { background: #E8F5E9; color: #2E7D32; }
.status-ready { background: #E0F7FA; color: #00838F; }
.status-completed { background: #E8F5E9; color: #1B5E20; }
.status-cancelled { background: #FFEBEE; color: #C62828; }

/* Order tracking steps */
.track-steps { display: flex; justify-content: space-between; position: relative; margin: 2rem 0; }
.track-steps::before { content: ''; position: absolute; top: 30%; left: 2.5rem; right: 2.5rem; height: 3px; background: rgba(var(--primary-rgb), 0.15); transform: translateY(-50%); z-index: 0; }
.track-step { text-align: center; position: relative; z-index: 1; flex: 1; }
.track-step-circle { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid rgba(var(--primary-rgb), 0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 700; font-size: 0.875rem; color: #B2BEC3; transition: all 0.3s; }
.track-step.active .track-step-circle { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: transparent; color: #fff; box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3); }
.track-step.done .track-step-circle { background: linear-gradient(135deg, #06D6A0, #05B588); border-color: transparent; color: #fff; }
.track-step.active .track-step-circle { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3); }
.track-step.done .track-step-circle { background: linear-gradient(135deg, #06D6A0, #05B588); color: #fff; }
.track-step-label { font-size: 0.7rem; color: #B2BEC3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.track-step.active .track-step-label, .track-step.done .track-step-label { color: #2D3436; font-weight: 700; }

/* Search */
.search-box { border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 14px; padding: 0.625rem 1rem; font-size: 0.9rem; background: #fff; transition: all 0.2s; }
.search-box:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12); outline: none; }

/* Stats */
.stat-card { background: #fff; border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 16px; padding: 1.5rem; text-align: center; transition: all 0.3s; }
.stat-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.08); }
.stat-card .stat-number { font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), #EF476F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Tables */
.table-custom { margin-bottom: 0; }
.table-custom thead th { background: rgba(var(--primary-rgb), 0.04); border-bottom: 2px solid rgba(var(--primary-rgb), 0.15); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #636E72; padding: 1rem 1.25rem; }
.table-custom td { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(var(--primary-rgb), 0.15); vertical-align: middle; }
.table-custom tbody tr { transition: background 0.2s; }
.table-custom tbody tr:hover { background: #FFFAF6; }

/* Admin/owner layout */
.admin-wrapper { background: #fff; border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 16px; padding: 2rem; }

.country-list { max-height: 200px; overflow-y: auto; border: 2px solid rgba(var(--primary-rgb), 0.15); border-radius: 14px; padding: 4px; }
.country-item { display: flex; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(var(--primary-rgb), 0.08); margin-bottom: 2px; cursor: pointer; transition: background 0.15s; }
.country-item:hover { background: rgba(var(--primary-rgb), 0.06); }
.country-item .form-check-input { margin-top: 0; flex-shrink: 0; }
.country-item .form-check-label { cursor: pointer; }
.country-group-label { padding: 6px 12px 4px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); border-bottom: 1px solid rgba(var(--primary-rgb), 0.15); margin-bottom: 4px; }

/* Animations */
.fade-up { animation: fadeUp 0.4s ease both; }
.fade-up-1 { animation-delay: 0.03s; }
.fade-up-2 { animation-delay: 0.06s; }
.fade-up-3 { animation-delay: 0.09s; }
.fade-up-4 { animation-delay: 0.12s; }
.fade-up-5 { animation-delay: 0.15s; }
.fade-up-6 { animation-delay: 0.18s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Confirm Modal */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.confirm-overlay.show { opacity: 1; pointer-events: auto; }
.confirm-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.9); background: #fff; border-radius: 20px; padding: 2rem 2rem 1.5rem; z-index: 3001; opacity: 0; pointer-events: none; transition: all 0.25s; width: 90%; max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.confirm-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.confirm-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 0.75rem; }
.confirm-message { font-size: 1rem; font-weight: 600; color: #2D3436; margin-bottom: 1.5rem; }
.confirm-btns { display: flex; gap: 0.75rem; justify-content: center; }
.confirm-btns .btn { min-width: 100px; }

/* Mobile cart */
.mobile-cart-fab { position: fixed; bottom: 24px; inset-inline-end: 24px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border: none; font-size: 1.5rem; box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.35); z-index: 1000; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; }
.mobile-cart-fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.45); }
.mobile-cart-fab .badge { position: absolute; top: -4px; inset-inline-end: -4px; font-size: 0.7rem; }

.mobile-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mobile-cart-overlay.show { opacity: 1; pointer-events: auto; }

.mobile-cart-panel { position: fixed; top: 0; inset-inline-end: -100%; width: 92%; max-width: 400px; height: 100vh; background: #fff; z-index: 2000; transition: inset-inline-end 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,0.08); }
.mobile-cart-panel.open { inset-inline-end: 0; }

/* Mobile user dropdown */
.user-menu { min-width: 220px; border: none; border-radius: 16px; padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.14); margin-top: 10px; }
.user-menu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; padding: 12px 14px; margin-bottom: 4px; min-height: 46px; border-radius: 12px; font-weight: 600; font-size: 0.9rem; }
.user-menu .dropdown-item:last-child { margin-bottom: 0; }
.user-menu .dropdown-item:hover, .user-menu .dropdown-item:focus { background: rgba(var(--primary-rgb), 0.08); color: var(--primary-dark); }
.user-menu .dropdown-divider { margin: 4px 8px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
    .products-scroll { max-height: none !important; overflow-y: visible !important; }
}

@media (min-width: 992px) {
    .mobile-cart-panel { max-width: 440px; }
}

@media (max-width: 767.98px) {
    body { padding: 0.75rem; }
    .store-header-card { padding: 1rem; }
    .store-header-card img { width: 56px; height: 56px; }
    .auth-container { padding: 1rem; }
    .filters-row { flex-wrap: wrap; }
    .search-form { width: 100%; }
}

@media (max-width: 575.98px) {
    .product-card .card-img-top, .product-card .card-img-top--placeholder { height: 180px; }
    .track-step-circle { width: 34px; height: 34px; font-size: 0.75rem; }
    .track-steps::before { left: 1.5rem; right: 1.5rem; }
}