:root {
    --petcy-teal: #4A6B82;      /* الأزرق الفولاذي الأساسي (يطابق إضاءة الفيديو) */
    --petcy-teal-dark: #6E93AB; /* أزرق فولاذي أفتح (تفاعل/هوفر فوق خلفية غامقة) */
    --petcy-teal-light: rgba(74,107,130,0.14); /* تظليل فولاذي خفيف فوق الخلفية الغامقة */
    --petcy-dark: #0F1113;      /* أسود الموقع الأساسي (مطفي، بلمسة باردة) */
    --petcy-surface: #1A1D21;   /* سطح البطاقات/الهيدر فوق الخلفية الغامقة */
    --petcy-surface-2: #242830; /* سطح أفتح شوي (هوفر/أزرار ثانوية) */
    --petcy-border: rgba(255,255,255,0.09);
    --petcy-text: #E7ECEF;      /* النص الأساسي فوق الخلفية الغامقة */
    --petcy-text-muted: #93A0A8;/* نص ثانوي */

    --bs-body-bg: var(--petcy-dark);
    --bs-body-color: var(--petcy-text);
    --bs-border-color: var(--petcy-border);
}

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

body {
    font-family: "Tahoma", "Segoe UI", sans-serif;
    background-color: var(--petcy-dark);
    color: var(--petcy-text);
}

a { text-decoration: none; }

/* ---------- Bootstrap utility overrides (storefront pages use a few
   hardcoded light utility classes that need to follow the dark theme too) ---------- */
main.container .checkout-card.bg-light,
main.container .input-group-text.bg-white,
main.container .badge.bg-light {
    background-color: var(--petcy-surface-2) !important;
    border-color: var(--petcy-border) !important;
    color: var(--petcy-text) !important;
}
main.container .text-dark { color: var(--petcy-text) !important; }

/* ---------- Header ---------- */
.petcy-header {
    background: var(--petcy-surface);
    border-bottom: 1px solid var(--petcy-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.petcy-logo-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--petcy-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    object-fit: cover;
    flex-shrink: 0;
}

.petcy-brand-name {
    font-weight: 700;
    color: var(--petcy-teal-dark);
    font-size: 1.15rem;
    line-height: 1.1;
}

.petcy-brand-tag {
    font-size: 0.68rem;
    color: var(--petcy-text-muted);
}

.petcy-nav a {
    color: var(--petcy-text);
    font-weight: 500;
    padding: 0.4rem 0.75rem;
}
.petcy-nav a:hover { color: var(--petcy-teal-dark); }

.icon-btn {
    position: relative;
    color: var(--petcy-text);
    font-size: 1.2rem;
    padding: 0.3rem 0.5rem;
}

.cart-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--petcy-teal);
    color: #fff;
    font-size: 0.65rem;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Hero ---------- */
.petcy-hero {
    background: linear-gradient(135deg, var(--petcy-teal-light), #ffffff);
    padding: 3rem 1rem;
    border-radius: 0 0 24px 24px;
}
.petcy-hero h1 { color: var(--petcy-teal-dark); font-weight: 800; }

/* ---------- Buttons ---------- */
.btn-petcy {
    background: var(--petcy-teal);
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-petcy:hover { background: var(--petcy-teal-dark); color: #fff; }

.btn-outline-petcy {
    border: 1.5px solid var(--petcy-teal);
    color: var(--petcy-teal-dark);
    font-weight: 600;
    background: transparent;
}
.btn-outline-petcy:hover { background: var(--petcy-teal); color: #fff; }

/* ---------- Cards ---------- */
.category-card {
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    background: var(--petcy-surface);
    border: 1px solid var(--petcy-border);
    transition: transform .15s ease, box-shadow .15s ease;
    padding: 1rem 0.5rem;
}
.category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(74,107,130,0.25); }
.category-card img, .category-card .placeholder-icon {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; margin: 0 auto 0.5rem;
    background: var(--petcy-teal-light);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.category-card .fw-semibold { color: var(--petcy-text); }

.product-card {
    border-radius: 16px;
    border: 1px solid var(--petcy-border);
    overflow: hidden;
    background: var(--petcy-surface);
    height: 100%;
    transition: box-shadow .15s ease;
}
.product-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.product-card .img-wrap {
    aspect-ratio: 1/1;
    background: var(--petcy-teal-light);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.product-card img { width: 100%; height: 100%; object-fit: cover; }
.product-card .price { color: var(--petcy-teal-dark); font-weight: 700; }
.product-card .old-price { text-decoration: line-through; color: var(--petcy-text-muted); font-size: 0.85rem; }
.product-card .card-body, .product-card .card-title { color: var(--petcy-text); }

.badge-out {
    background: #e35d5b;
}

/* ---------- Checkout form ---------- */
.checkout-card {
    background: var(--petcy-surface);
    border-radius: 18px;
    border: 1px solid var(--petcy-border);
    padding: 1.5rem;
}
.form-control, .form-select {
    border-radius: 12px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--petcy-border);
    background-color: var(--petcy-surface-2);
    color: var(--petcy-text);
}
.form-control::placeholder { color: var(--petcy-text-muted); }
.form-control:focus, .form-select:focus {
    border-color: var(--petcy-teal);
    background-color: var(--petcy-surface-2);
    color: var(--petcy-text);
    box-shadow: 0 0 0 0.2rem rgba(74,107,130,0.25);
}

/* ---------- Cart quantity stepper (mobile-friendly +/-) ---------- */
.qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--petcy-border);
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
}
.qty-step-btn {
    background: var(--petcy-surface-2);
    border: none;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--petcy-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    touch-action: manipulation;
}
.qty-step-btn:active { background: var(--petcy-teal); color: #fff; }
.qty-stepper .cart-qty-input {
    width: 48px;
    text-align: center;
    border: none;
    border-right: 1px solid var(--petcy-border);
    border-left: 1px solid var(--petcy-border);
    border-radius: 0;
    padding: 0.35rem 0.25rem;
    background: var(--petcy-surface);
    color: var(--petcy-text);
    -moz-appearance: textfield;
}
.qty-stepper .cart-qty-input::-webkit-outer-spin-button,
.qty-stepper .cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.payment-option {
    border: 1.5px solid var(--petcy-border);
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    background: var(--petcy-surface);
    color: var(--petcy-text);
}
.payment-option.selected {
    border-color: var(--petcy-teal);
    background: var(--petcy-teal-light);
}

/* ---------- Footer ---------- */
.petcy-footer {
    background: #000;
    color: #d7e4e2;
    padding: 2.5rem 0 1rem;
    margin-top: 3rem;
    border-top: 1px solid var(--petcy-border);
}
.petcy-footer a { color: #d7e4e2; }
.petcy-footer a:hover { color: var(--petcy-teal-dark); }

.footer-social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff !important;
    transition: background .15s ease, transform .15s ease;
}
.footer-social-link:hover {
    background: var(--petcy-teal);
    transform: translateY(-3px);
}

/* ---------- Notification banner ---------- */
.notification-banner {
    background: var(--petcy-dark);
    color: #fff;
    font-size: 0.9rem;
}
.notification-banner a { color: #ffe8b3 !important; }

/* ---------- Push notification prompt ---------- */
.push-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--petcy-surface);
    color: var(--petcy-text);
    border-top: 1px solid var(--petcy-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
    padding: 0.75rem 1rem;
    z-index: 1300;
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
    position: fixed;
    bottom: 22px;
    left: 22px;
    background: #25D366;
    color: #fff !important;
    border-radius: 30px;
    padding: 0.7rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    z-index: 1200;
    font-weight: 600;
}

/* ---------- Mobile menu button ---------- */
.menu-toggle-btn {
    background: var(--petcy-dark);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-toggle-btn:hover { background: var(--petcy-teal); }

/* ---------- Offcanvas mobile menu ---------- */
.offcanvas { max-width: 320px; background: var(--petcy-surface); color: var(--petcy-text); }
.offcanvas-header { border-bottom: 1px solid var(--petcy-border); }
.mobile-menu-tabs { border-bottom: 1px solid var(--petcy-border); }
.mobile-menu-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--petcy-text-muted);
    font-weight: 600;
    border-radius: 0;
    background: transparent;
}
.mobile-menu-tabs .nav-link.active {
    color: var(--petcy-teal-dark);
    border-bottom-color: var(--petcy-teal);
    background: transparent;
}
.mobile-menu-link {
    display: block;
    padding: 0.7rem 0.25rem;
    color: var(--petcy-text);
    border-bottom: 1px solid var(--petcy-border);
    font-weight: 500;
}
.mobile-menu-link:hover { color: var(--petcy-teal-dark); }

.mobile-category-tile { display: block; text-align: center; }
.mobile-category-thumb {
    aspect-ratio: 1/1;
    background: var(--petcy-teal-light);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.mobile-category-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mobile-category-tile p { color: var(--petcy-text); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 400px) {
    .petcy-brand-tag { display: none; }
    .petcy-logo-circle { width: 42px; height: 42px; font-size: 1.3rem; }
}

/* ---------- Admin login page ---------- */
.login-page-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at top, #262626 0%, var(--petcy-dark) 65%);
}
.login-card {
    background: var(--petcy-surface);
    color: var(--petcy-text);
    border: 1px solid var(--petcy-border);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}
.login-card label { color: var(--petcy-text-muted); }
.login-card .input-group-text.bg-white {
    background-color: var(--petcy-surface-2) !important;
    color: var(--petcy-text);
    border-color: var(--petcy-border);
}
.login-card .form-control {
    background-color: var(--petcy-surface-2);
    color: var(--petcy-text);
    border-color: var(--petcy-border);
}
.login-card .form-control:focus {
    background-color: var(--petcy-surface-2);
    color: var(--petcy-text);
}
.login-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--petcy-teal-light);
    box-shadow: 0 0 0 3px var(--petcy-teal);
}
@media (min-width: 576px) {
    .login-card { padding: 2.5rem 2rem; }
}


.admin-sidebar {
    background: var(--petcy-dark);
    color: #fff;
    width: 260px;
}
.admin-sidebar a {
    color: #cfe4e1;
    display: flex;
    align-items: center;
    padding: 0.8rem 1.1rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.98rem;
    min-height: 46px;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
    background: var(--petcy-teal);
    color: #fff;
}
.admin-sidebar hr { opacity: 0.25; }

/* الوضع الثابت على الشاشات الكبيرة (lg فأعلى): يصير الشريط جزء طبيعي من الصفحة بدل drawer */
@media (min-width: 992px) {
    .admin-sidebar { min-height: 100vh; flex-shrink: 0; }
}

/* الوضع المنسدل (drawer) على الجوال والتابلت */
@media (max-width: 991.98px) {
    .admin-sidebar { box-shadow: 0 0 30px rgba(0,0,0,0.35); }
    .admin-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,0.15); }
    .admin-sidebar a { padding: 0.9rem 1.1rem; font-size: 1.03rem; }
}

/* شريط علوي على الجوال لفتح القائمة */
.admin-mobile-topbar {
    background: var(--petcy-surface);
    color: var(--petcy-text);
    border-bottom: 1px solid var(--petcy-border);
    padding: 0.6rem 1rem;
    z-index: 1030;
}
.admin-main {
    background: var(--petcy-dark);
    min-height: 100vh;
    color: var(--petcy-text);
    font-family: "Cairo", "Tahoma", "Segoe UI", sans-serif;
}
.admin-main .card, .admin-main .modal-content,
.admin-main .bg-white {
    background-color: var(--petcy-surface) !important;
    color: var(--petcy-text);
    border: 1px solid var(--petcy-border);
}
.admin-main .input-group-text.bg-white {
    background-color: var(--petcy-surface-2) !important;
    color: var(--petcy-text);
    border-color: var(--petcy-border);
}
.admin-main .form-control, .admin-main .form-select {
    background-color: var(--petcy-surface-2);
    color: var(--petcy-text);
    border: 1px solid var(--petcy-border);
}
.admin-main .form-control:focus, .admin-main .form-select:focus {
    background-color: var(--petcy-surface-2);
    color: var(--petcy-text);
    border-color: var(--petcy-teal);
    box-shadow: 0 0 0 0.2rem rgba(74,107,130,0.25);
}
.admin-main label, .admin-main .form-label { color: var(--petcy-text); }
.admin-main h1, .admin-main h2, .admin-main h3,
.admin-main h4, .admin-main h5, .admin-main h6 { color: var(--petcy-text); }

/* -------------------------------------------------------------------------
   وضوح أكبر لبيانات الجداول بلوحة التحكم: قبل هيك كان رأس الجدول (أسماء
   الأعمدة) ما إله أي تمييز عن الصفوف نفسها، فكل شي كان يبين كتلة وحدة،
   وهذا كان سبب "البيانات مش واضحة". هلأ صار رأس الجدول بخلفية وخط مختلف
   بوضوح عن باقي البيانات.
   ------------------------------------------------------------------------- */
.admin-main .table { color: var(--petcy-text); font-size: 0.95rem; }
.admin-main .table thead th {
    background: var(--petcy-surface-2);
    color: var(--petcy-teal-dark);
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--petcy-teal);
    white-space: nowrap;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}
.admin-main .table tbody td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    vertical-align: middle;
    color: var(--petcy-text);
}
.admin-main .table tbody tr:hover { background: var(--petcy-surface-2); }
.admin-main .table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--petcy-border); }

.stat-card {
    border-radius: 16px;
    border: 1px solid var(--petcy-border);
    padding: 1.25rem;
    background: var(--petcy-surface);
    color: var(--petcy-text);
}
.stat-card .value { font-size: 1.7rem; font-weight: 800; color: var(--petcy-teal-dark); }

.status-badge {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* على الجوال: خط أصغر شوي بالجدول حتى يضل مرتب بدون ما ينكسر */
@media (max-width: 767.98px) {
    .admin-main .table { font-size: 0.85rem; }
    .admin-main .table thead th { font-size: 0.75rem; }
}

/* تحسينات عامة للجداول والبطاقات داخل لوحة التحكم على الجوال */
@media (max-width: 767.98px) {
    .admin-main h3, .admin-main h4, .admin-main h5 { font-size: 1.15rem; }
    .table { font-size: 0.88rem; }
    .stat-card { padding: 1rem; }
    .stat-card .value { font-size: 1.4rem; }
}