@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
    --brand-primary: #C08061;       /* Rose Gold / Bronze */
    --brand-secondary: #E8B89E;     /* Soft Rose Gold Highlight */
    --brand-bg-light: #FFFBF8;      /* Cream / Linen */
    --brand-bg-peach: #FCD5BE;      /* Peach background matching the logo */
    --brand-dark: #3D2E26;          /* Elegant Charcoal Brown for text */
    --brand-accent: #8C5338;        /* Terracotta Bronze for primary buttons */
    --brand-muted: #8E7E76;         /* Muted warm gray/brown */
    --brand-success: #5F7D67;       /* Soft sage green for success/in-stock */
    --brand-warning: #D9A05B;       /* Warm mustard/amber for low-stock */
    --brand-danger: #C05B5B;        /* Dusty rose/crimson for out-of-stock */
    --border-color: #EAD2C3;        /* Soft peach border */
    --font-sans: 'Outfit', sans-serif;
    --font-serif: 'Playfair Display', serif;
}

html[data-theme="dark"] .alert-warning[style*="rgba(217, 160, 91"] {
    color: #f1d7a7;
    background-color: #443722 !important;
}

body {
    background-color: var(--brand-bg-light);
    color: var(--brand-dark);
    font-family: var(--font-sans);
    overflow-x: hidden;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #e2d4ce;
    border-color: #79615a;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus-visible {
    color: #fffaf7;
    background-color: #59423d;
    border-color: #c88968;
}

html[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .font-serif {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

html[dir="rtl"] .product-badge {
    right: 12px;
    left: auto;
}

html[dir="rtl"] .cart-count-badge {
    right: auto;
    left: -10px;
}

html[dir="rtl"] .tracking-timeline {
    padding-right: 2rem;
    padding-left: 0;
}

html[dir="rtl"] .tracking-timeline::before {
    right: 7px;
    left: auto;
}

html[dir="rtl"] .timeline-marker {
    right: -29px;
    left: auto;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --brand-primary: #c88968;
    --brand-secondary: #dfb19a;
    --brand-bg-light: #211d1d;
    --brand-bg-peach: #34292a;
    --brand-dark: #f2e9e5;
    --brand-accent: #d29a7b;
    --brand-muted: #c0aaa0;
    --brand-success: #8eb79a;
    --brand-warning: #e2bb78;
    --brand-danger: #e28f8f;
    --border-color: #51413e;
    --bs-body-bg: #211d1d;
    --bs-body-color: #f2e9e5;
    --bs-secondary-color: #c0aaa0;
    --bs-tertiary-color: #c0aaa0;
    --bs-border-color: #51413e;
    --bs-light-rgb: 52, 41, 42;
    --bs-white-rgb: 43, 36, 36;
    --bs-dark-rgb: 30, 26, 26;
    --bs-secondary-rgb: 111, 91, 86;
    --bs-primary-rgb: 192, 128, 97;
    --bs-link-color: #e0aa8c;
    --bs-link-hover-color: #f0c3a8;
}

html[data-theme="dark"] body {
    background-color: var(--brand-bg-light);
    color: var(--brand-dark);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .font-serif,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
    color: var(--brand-dark) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body-secondary {
    color: #c0aaa0 !important;
}

html[data-theme="dark"] .navbar-store {
    background-color: #34292a !important;
    border-color: var(--border-color);
}

html[data-theme="dark"] .navbar-store .nav-link-store,
html[data-theme="dark"] .navbar-store .nav-icon,
html[data-theme="dark"] .navbar-store .navbar-toggler {
    color: #f2e9e5;
}

html[data-theme="dark"] .navbar-store .navbar-toggler {
    border-color: #79615a;
}

html[data-theme="dark"] .navbar-store .navbar-toggler-icon {
    filter: invert(1);
}

html[data-theme="dark"] .navbar-store [style*="background-color: #d8b2a0"] {
    background-color: #34292a !important;
}

html[data-theme="dark"] .hero-slider-container {
    background-color: #34292a;
    border-color: var(--border-color);
}

html[data-theme="dark"] .py-5[style*="#FFF2E8"] {
    background-color: #302626 !important;
}

html[data-theme="dark"] .py-5[style*="background-color: var(--brand-accent)"] {
    background-color: #352827 !important;
}

html[data-theme="dark"] .card-premium,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover {
    color: var(--brand-dark);
    background-color: #2b2424;
    border-color: var(--border-color);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--brand-dark);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .list-group-item-action:hover {
    color: #fff;
    background-color: #493735;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary {
    color: var(--brand-dark) !important;
    background-color: #2b2424 !important;
}

html[data-theme="dark"] .bg-dark {
    background-color: #181515 !important;
}

html[data-theme="dark"] .bg-success-subtle {
    color: #c4e3ca !important;
    background-color: #26382c !important;
}

html[data-theme="dark"] .bg-danger-subtle {
    color: #f2c1c1 !important;
    background-color: #452929 !important;
}

html[data-theme="dark"] .bg-secondary {
    background-color: #62504c !important;
}

html[data-theme="dark"] .text-white {
    color: #fffaf7 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    color: #f2e9e5;
    background-color: #302828;
    border-color: #62504c;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #bca9a1;
    opacity: 1;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    color: #fffaf7;
    background-color: #352c2b;
    border-color: #d29a7b;
    box-shadow: 0 0 0 0.25rem rgb(210 154 123 / 25%);
}

html[data-theme="dark"] .form-check-input {
    background-color: #302828;
    border-color: #a28b81;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: #a96f53;
    border-color: #a96f53;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-dark {
    color: #f2e9e5;
    background-color: #3b302f;
    border-color: #79615a;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
    color: #fffaf7;
    background-color: #59423d;
    border-color: #c88968;
}

html[data-theme="dark"] .btn-secondary {
    color: #fffaf7;
    background-color: #62504c;
    border-color: #79615a;
}

html[data-theme="dark"] .btn-secondary:disabled,
html[data-theme="dark"] .btn-brand:disabled,
html[data-theme="dark"] .btn-brand.disabled {
    color: #c0aaa0;
    background-color: #49403e;
    border-color: #62504c;
    opacity: 1;
}

html[data-theme="dark"] .btn-brand:hover {
    color: #211d1d;
}

html[data-theme="dark"] .table {
    --bs-table-color: #f2e9e5;
    --bs-table-bg: #2b2424;
    --bs-table-border-color: #51413e;
    --bs-table-striped-bg: #342c2b;
    --bs-table-hover-bg: #403332;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-bottom-color: var(--bs-table-border-color);
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] hr {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .alert-success {
    --bs-alert-color: #c4e3ca;
    --bs-alert-bg: #26382c;
    --bs-alert-border-color: #46694e;
}

html[data-theme="dark"] .alert-danger {
    --bs-alert-color: #f2c1c1;
    --bs-alert-bg: #452929;
    --bs-alert-border-color: #744343;
}

html[data-theme="dark"] .alert-warning {
    --bs-alert-color: #f1d7a7;
    --bs-alert-bg: #443722;
    --bs-alert-border-color: #725b34;
}

html[data-theme="dark"] .toast {
    color: #fffaf7;
    border-color: var(--border-color);
}

html[data-theme="dark"] .footer-store {
    color: #f2e9e5;
    background-color: #181515;
}

html[data-theme="dark"] .footer-store a {
    color: #e0aa8c;
}

html[data-theme="dark"] .footer-store a:hover {
    color: #fffaf7;
}

html[data-theme="dark"] .footer-store p,
html[data-theme="dark"] .footer-store h5 {
    color: #f2e9e5 !important;
}

html[data-theme="dark"] .product-badge {
    color: #fffaf7;
}

html[data-theme="dark"] .stock-badge-instock {
    color: #b9d9c1;
    background-color: #26382c;
}

html[data-theme="dark"] .stock-badge-lowstock {
    color: #f1d7a7;
    background-color: #443722;
}

html[data-theme="dark"] .stock-badge-outofstock {
    color: #f2c1c1;
    background-color: #452929;
}

html[data-theme="dark"] .navbar-store .theme-toggle {
    flex: 0 0 36px;
}

.theme-toggle {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--brand-dark);
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: #fff;
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgb(192 128 97 / 35%);
    outline-offset: 2px;
}

html[data-theme="dark"] .text-danger {
    color: #ef9999 !important;
}

html[data-theme="dark"] .text-success {
    color: #a8d1b1 !important;
}

html[data-theme="dark"] .text-warning {
    color: #f1d7a7 !important;
}

html[data-theme="dark"] .text-info {
    color: #9bd5e4 !important;
}

html[data-theme="dark"] .text-primary {
    color: #e0aa8c !important;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--font-serif);
    color: var(--brand-dark);
}

/* Primary Button Styling */
.btn-brand {
    background-color: var(--brand-accent);
    color: #ffffff;
    border: 1px solid var(--brand-accent);
    border-radius: 30px;
    padding: 0.6rem 1.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-brand:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(192, 128, 97, 0.2);
}

.btn-brand-outline {
    background-color: transparent;
    color: var(--brand-accent);
    border: 1px solid var(--brand-accent);
    border-radius: 30px;
    padding: 0.6rem 1.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-brand-outline:hover {
    background-color: var(--brand-accent);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Premium Card Design */
.card-premium {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(61, 46, 38, 0.08);
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--brand-primary);
    color: #ffffff;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    z-index: 2;
}

.stock-badge-instock {
    background-color: rgba(95, 125, 103, 0.15);
    color: var(--brand-success);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.stock-badge-lowstock {
    background-color: rgba(217, 160, 91, 0.15);
    color: var(--brand-warning);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.stock-badge-outofstock {
    background-color: rgba(192, 91, 91, 0.15);
    color: var(--brand-danger);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Header & Navbar Customizations */
.navbar-store {
    background-color: var(--brand-bg-peach) !important;
    border-bottom: 1px solid var(--border-color);
}

.nav-link-store {
    color: var(--brand-dark);
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

.nav-link-store:hover {
    color: var(--brand-accent);
}

.nav-icon {
    font-size: 1.25rem;
    color: var(--brand-dark);
    position: relative;
    transition: color 0.3s ease;
}

.nav-icon:hover {
    color: var(--brand-accent);
}

.cart-count-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--brand-accent);
    color: #ffffff;
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    border-radius: 50%;
}

/* Hero Slider Styling */
.hero-slider-container {
    background-color: var(--brand-bg-peach);
    border-bottom: 1px solid var(--border-color);
    padding: 4rem 0;
}

/* Footer Styling */
.footer-store {
    background-color: var(--brand-dark);
    color: #FFFBF8;
    padding: 4rem 0 2rem;
    margin-top: 5rem;
}

.footer-store a {
    color: #E8B89E;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-store a:hover {
    color: #ffffff;
}

/* Star Ratings */
.star-rating {
    color: #FFC107;
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--brand-bg-light);
}
::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-accent);
}

/* Admin Dashboard Custom Styles */
.admin-sidebar {
    background-color: var(--brand-dark);
    color: #ffffff;
    min-height: 100vh;
}

.admin-sidebar .nav-link {
    color: #EAD2C3;
    transition: all 0.3s ease;
}

.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active {
    color: #ffffff;
    background-color: rgba(192, 128, 97, 0.2);
}

.admin-card-stat {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    padding: 1.5rem;
}

/* Order visual tracking timeline */
.tracking-timeline {
    position: relative;
    padding-left: 2rem;
}
.tracking-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background-color: var(--border-color);
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}
.timeline-marker {
    position: absolute;
    left: -29px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--border-color);
    border: 3px solid var(--brand-bg-light);
    z-index: 2;
}
.timeline-item.active .timeline-marker {
    background-color: var(--brand-accent);
    box-shadow: 0 0 0 4px rgba(140, 83, 56, 0.2);
}
.timeline-item.completed .timeline-marker {
    background-color: var(--brand-success);
}