/* Daryel Phones UI Theme
   Modern, minimal, and responsive layer that sits on top of existing Bootstrap.
   IMPORTANT: Only presentation. No backend IDs/classes removed. */

:root {
    /* Brand palette */
    --primary-color: #2563eb; /* Indigo-600 */
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --secondary-color: #64748b; /* Slate-500 */
    --success-color: #10b981; /* Emerald-500 */
    --warning-color: #f59e0b; /* Amber-500 */
    --danger-color: #ef4444;  /* Red-500 */
    --info-color: #0ea5e9;    /* Sky-500 */
    --light-color: #f8fafc;   /* Slate-50 */
    --muted-color: #94a3b8;   /* Slate-400 */
    --dark-color: #0f172a;    /* Slate-900 */

    /* Surface system */
    --surface-0: #ffffff;
    --surface-1: #f1f5f9; /* Slate-100 */
    --surface-2: #e2e8f0; /* Slate-200 */
    --shadow-lg: 0 20px 40px rgba(2, 6, 23, 0.18);
    --shadow-md: 0 10px 24px rgba(2, 6, 23, 0.12);
    --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.08);

    /* Radii and motion */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --elevate: cubic-bezier(.22,.61,.36,1);
}

/* Typography */
html { scroll-behavior: smooth; }
body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.6;
    color: #111827; /* neutral-900 for readable text */
    background: var(--surface-1);
}

/* Improve default text color contrast in cards/sections */
.card, .offcanvas, .modal-content, .table-responsive { color: #111827; }
.text-muted { color: #6b7280 !important; } /* neutral-500 for better contrast */
h1, h2, h3, h4, h5 { color: #0b1220; letter-spacing: -0.2px; }
p { color: #111827; }
a { color: var(--primary-700); }
a:hover { color: var(--primary-color); }

/* Elevation helpers */
.shadow-soft { box-shadow: var(--shadow-sm); }
.shadow-mid { box-shadow: var(--shadow-md); }
.shadow-pop { box-shadow: var(--shadow-lg); }

/* Gradients */
.bg-gradient-primary {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(37, 99, 235, .25), transparent 40%),
                linear-gradient(135deg, var(--primary-color), var(--primary-700));
}

/* Navigation */
.navbar { border-bottom: 1px solid rgba(2,6,23,.06); backdrop-filter: saturate(140%) blur(6px); }
.navbar-brand { font-size: 1.25rem; letter-spacing: .2px; display: inline-flex; align-items: center; gap: .5rem; }
.navbar-brand img { display: inline-block; vertical-align: middle; }
.navbar-dark.bg-primary { background: linear-gradient(180deg, var(--primary-800), var(--primary-700)) !important; }
.navbar .btn { border-radius: 999px; }

/* Hero */
.hero {
    background: linear-gradient(120deg, rgba(37,99,235,.08), rgba(16,185,129,.08));
}
.hero .display-4 { letter-spacing: -0.5px; }

/* Chip buttons for filters */
.btn-outline-primary { border-color: rgba(37,99,235,.45); color: var(--primary-700); }
.btn-outline-primary:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.btn-warning { color: #111827; border-radius: 999px; }

/* Product Grid */
.product-card { border: 1px solid rgba(2,6,23,.06); border-radius: var(--radius-md); overflow: hidden; transition: transform .25s var(--elevate), box-shadow .25s var(--elevate); background: var(--surface-0); }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-image { height: 220px; object-fit: cover; transition: transform .4s var(--elevate); }
.product-card:hover .product-image { transform: scale(1.06); }
.product-image-container { position: relative; border-bottom: 1px solid rgba(2,6,23,.06); }
.product-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,23,42,.35); color: #fff; opacity: 0; transition: opacity .2s; }
.product-card:hover .product-overlay { opacity: 1; }

/* Badges */
.badge { border-radius: 999px; padding: .35rem .6rem; font-weight: 600; }

/* Product details */
.product-media-container { background: var(--surface-0); border: 1px solid rgba(2,6,23,.06); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.product-video, .product-image { border-radius: 0; }
.thumbnail-nav { cursor: pointer; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; transition: border-color .2s; }
.thumbnail-nav:hover { border-color: var(--primary-color); }
.product-title { font-weight: 800; letter-spacing: -.3px; }
.price { font-size: 1.25rem; color: var(--primary-700); }

/* Cart Offcanvas */
.offcanvas { border-left: 1px solid rgba(2,6,23,.06); }
.cart-item { border-bottom: 1px dashed rgba(2,6,23,.08); padding-bottom: 1rem; margin-bottom: 1rem; }
.cart-item:last-child { border-bottom: 0; margin-bottom: 0; }
.cart-item-image { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.quantity-controls { display: flex; align-items: center; gap: .5rem; }
.quantity-btn { width: 32px; height: 32px; border: 1px solid rgba(2,6,23,.12); background: #fff; border-radius: 999px; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, transform .06s; }
.quantity-btn:hover { background: var(--surface-1); border-color: var(--primary-color); }
.quantity-btn:active { transform: scale(.96); }
.quantity-input { width: 56px; text-align: center; border: 1px solid rgba(2,6,23,.12); border-radius: 8px; padding: 4px; }

/* Buttons w/ ripple */
.btn { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple .6s linear; background: rgba(255,255,255,.45); pointer-events: none; }
@keyframes ripple { to { transform: scale(12); opacity: 0; } }

/* Modals */
.modal-header { background: linear-gradient(180deg, var(--primary-color), var(--primary-700)); color: #fff; }
.modal-header .btn-close { filter: invert(1); }

/* Tables */
.table-responsive { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface-0); }
.table thead th { background: var(--surface-1); border-bottom: 2px solid var(--primary-color); font-weight: 700; color: #0b1220; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: rgba(37,99,235,.04); }

/* Forms */
.form-control { border-radius: 10px; border-color: rgba(2,6,23,.12); }
.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15); }
.form-label { font-weight: 600; color: #0b1220; }
input::placeholder, textarea::placeholder { color: #9ca3af; } /* neutral-400 */

/* Alerts */
.alert { border: none; border-radius: var(--radius-md); padding: 1rem 1.25rem; }
.alert-success { background: rgba(16,185,129,.12); color: var(--success-color); border-left: 4px solid var(--success-color); }
.alert-danger { background: rgba(239,68,68,.12); color: var(--danger-color); border-left: 4px solid var(--danger-color); }
.alert-info { background: rgba(14,165,233,.12); color: var(--info-color); border-left: 4px solid var(--info-color); }

/* Hero CTA */
.cta-primary { box-shadow: var(--shadow-sm); border-radius: 999px; padding: .75rem 1.25rem; }
.cta-primary:hover { box-shadow: var(--shadow-md); }

/* Floating WhatsApp button */
.fab-whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 1050; display: inline-flex; align-items: center; gap: .5rem; background: #22c55e; color: #073b1a; border-radius: 999px; padding: .7rem 1rem; box-shadow: var(--shadow-md); transition: transform .2s var(--elevate), box-shadow .2s var(--elevate); }
.fab-whatsapp:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #052b13; }

/* Checkout Stepper */
.stepper { display: flex; gap: 12px; align-items: center; padding: 1rem; border-radius: var(--radius-md); background: var(--surface-0); box-shadow: var(--shadow-sm); }
.step { display: flex; align-items: center; gap: .5rem; color: var(--muted-color); font-weight: 600; }
.step .bubble { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-1); border: 2px solid var(--surface-2); color: var(--muted-color); font-size: .85rem; }
.step.active { color: #0b1220; }
.step.active .bubble { border-color: var(--primary-color); background: rgba(37,99,235,.08); color: var(--primary-700); }
.step .line { flex: 1; height: 2px; background: var(--surface-2); }

/* Admin sidebar */
.admin-sidebar { background: linear-gradient(180deg, #0b1220, #111827); min-height: calc(100vh - 56px); }
.admin-sidebar .nav-link { color: rgba(255,255,255,.82); padding: .7rem 1rem; margin: .15rem .75rem; border-radius: 10px; transition: background .2s, transform .12s; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(255,255,255,.1); color: #fff; }
.admin-sidebar .nav-link i { width: 20px; margin-right: .5rem; }

/* Dashboard stat cards */
.stat-card { background: linear-gradient(135deg, var(--primary-color), var(--primary-700)); color: #fff; border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-bottom: 1rem; transition: transform .2s var(--elevate), box-shadow .2s var(--elevate); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .stat-number { font-size: 1.75rem; font-weight: 800; }
.stat-card .stat-label { opacity: .92; font-size: .9rem; }

/* Utility */
.text-gray-800 { color: #334155 !important; }
.text-gray-300 { color: #cbd5e1 !important; }
.font-weight-bold { font-weight: 700 !important; }
.text-xs { font-size: .75rem !important; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .5s var(--elevate); }

/* Status Badges */
.status-pending { background: var(--warning-color); color: #111827; }
.status-paid { background: var(--info-color); }
.status-delivered { background: var(--success-color); }
.status-cancelled { background: var(--danger-color); }

/* Image Upload Preview */
.image-preview { max-width: 220px; max-height: 220px; border-radius: var(--radius-md); border: 2px dashed rgba(2,6,23,.16); padding: 1rem; text-align: center; cursor: pointer; transition: border-color .2s; background: var(--surface-0); }
.image-preview:hover { border-color: var(--primary-color); }
.image-preview img { max-width: 100%; max-height: 160px; object-fit: cover; border-radius: .5rem; }

/* Footer */
footer.bg-dark { background: #0b1220 !important; }
footer.bg-dark, footer.bg-dark p, footer.bg-dark a { color: #e5e7eb !important; }

/* Print */
@media print { .no-print { display: none !important; } .container { max-width: none !important; } }

/* Responsive */
@media (max-width: 992px) {
    .product-image { height: 200px; }
}
@media (max-width: 768px) {
    .product-card { margin-bottom: 1rem; }
    .stat-card { margin-bottom: 1rem; }
    .table-responsive { font-size: .92rem; }
}

/* Minimal pulse animation (no external library needed) */
.animate__animated.animate__pulse { animation: pulse .8s ease; }
@keyframes pulse { 0% { transform: scale(1);} 50% { transform: scale(1.08);} 100% { transform: scale(1);} }