/* ═══════════════════════════════════════════════════════════
   X OMS — Brand Design System
   Cafe & Restaurant Theme
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --brand-espresso:   #1C0E04;
    --brand-dark:       #2C1A0E;
    --brand-gold:       #D4A017;
    --brand-amber:      #8B5E1A;
    --brand-cream:      #FFF8F1;
    --brand-warm:       #FFF5E6;
    --brand-page-bg:    #F5EDE3;
    --brand-muted:      #8C7B6E;
    --brand-border:     #E2D5CA;
    --font-heading:     'Playfair Display', serif;
    --font-body:        'Inter', "MS PGothic", sans-serif;
}

/* ── Base ── */
body {
    font-family: var(--font-body) !important;
    background-color: var(--brand-page-bg) !important;
    color: var(--brand-espresso);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading) !important;
}

/* ── Header ── */
header {
    background: var(--brand-espresso) !important;
    border-bottom: 2px solid var(--brand-gold) !important;
}

/* Override nav-bg.jpg */
.fixed-top {
    background: var(--brand-espresso) !important;
}

/* ── Logo tint ── */
#logo img {
    filter: brightness(1.1);
}

/* ── Navigation links ── */
#main-nav ul li a,
#main-nav .nav-link,
nav ul li a {
    color: #E8DDD4 !important;
    transition: color 0.2s;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
}

#main-nav ul li a:hover,
.hover-orange:hover {
    color: var(--brand-gold) !important;
    text-decoration: none;
}

/* Language select in nav */
nav .lang-select {
    background: transparent;
    border: none;
    color: #E8DDD4;
    font-size: 0.875rem;
    cursor: pointer;
}

nav .lang-select option {
    background: var(--brand-espresso);
    color: #E8DDD4;
}

/* ── Hamburger menu (mobile) ── */
#cd-hamburger-menu a {
    color: var(--brand-gold) !important;
}
#cd-cart-trigger a {
    color: var(--brand-gold) !important;
}

/* ── Footer ── */
footer.py-5,
footer.bg-inverse {
    background: var(--brand-espresso) !important;
}

footer p {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(255,245,230,0.5) !important;
    letter-spacing: 0.5px;
}

/* ── Page wrapper ── */
.container-fluid {
    background-color: var(--brand-page-bg);
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-amber) 100%) !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(139, 94, 26, 0.3) !important;
    transition: opacity 0.2s, transform 0.15s !important;
    letter-spacing: 0.2px;
}

.btn-primary:hover,
.btn-primary:focus {
    opacity: 0.9 !important;
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-amber) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(139, 94, 26, 0.4) !important;
}

.btn-secondary {
    background: var(--brand-dark) !important;
    border: none !important;
    color: #E8DDD4 !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
}

.btn-secondary:hover {
    background: var(--brand-espresso) !important;
    color: var(--brand-gold) !important;
}

.btn-link {
    color: var(--brand-gold) !important;
    font-weight: 500;
}

.btn-link:hover {
    color: var(--brand-amber) !important;
}

.btn-plain {
    background: transparent;
    border: 1.5px solid var(--brand-border);
    border-radius: 8px;
    color: var(--brand-muted);
    font-family: var(--font-body);
    font-weight: 500;
}

.btn-plain:hover {
    background: var(--brand-cream);
    color: var(--brand-espresso);
}

/* ── Cards (Dashboard & Everywhere) ── */
.card {
    background: #FFFFFF !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(44, 26, 14, 0.06) !important;
    transition: box-shadow 0.2s ease, transform 0.18s ease !important;
    overflow: hidden !important;
    min-height: 140px;
}

.card:hover {
    box-shadow: 0 6px 22px rgba(44, 26, 14, 0.13) !important;
    transform: translateY(-3px);
}

.card a {
    color: var(--brand-espresso) !important;
    text-decoration: none !important;
}

.card a:hover {
    color: var(--brand-amber) !important;
}

.card .card-block {
    padding: 28px 16px 20px;
}

.card .card-block span {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-espresso);
    letter-spacing: 0.1px;
}

/* ── Card icons ── */
div i,
.card i {
    color: var(--brand-gold) !important;
    font-size: 40px;
    margin: 10px 0;
}

/* Keep icon color white when inside a nav form or button */
li form i,
.btn i,
button i {
    color: inherit !important;
    font-size: inherit !important;
    margin: 0 !important;
}

/* ── Tables ── */
.table-bordered th,
.table-bordered thead th {
    background: var(--brand-espresso) !important;
    color: #FFF5E6 !important;
    border: 4px solid #fff !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

.table-bordered td {
    background: #FFFAF5 !important;
    border: 4px solid #fff !important;
    font-family: var(--font-body);
}

.table-bordered td a {
    color: var(--brand-amber) !important;
    font-weight: 600;
}

.table-bordered td .btn {
    color: #fff !important;
}

/* ── Forms ── */
.form-control {
    border: 1.5px solid var(--brand-border) !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    color: var(--brand-espresso) !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15) !important;
    outline: none !important;
}

label {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #6B5344;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ── Alerts ── */
.alert-danger {
    background: #FDF0EE;
    border: 1.5px solid #E8B4AD;
    border-radius: 8px;
    color: #8B2B1D;
    font-family: var(--font-body);
    font-size: 0.875rem;
}

/* ── Dropdown menus ── */
.dropdown-menu {
    border: 1px solid var(--brand-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(44, 26, 14, 0.13) !important;
    background: #fff !important;
    padding: 6px !important;
}

.dropdown-item {
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--brand-espresso) !important;
    padding: 8px 14px;
    transition: background 0.15s;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--brand-cream) !important;
    color: var(--brand-amber) !important;
}

.dropdown-toggle {
    font-family: var(--font-body);
}

/* ── Nav tabs (old login/reg tabs that may still appear) ── */
.reg-login-nav {
    background: var(--brand-espresso) !important;
    border: none !important;
}

.reg-login-nav .nav-item .nav-link {
    color: rgba(232, 221, 212, 0.7) !important;
    border: none !important;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.reg-login-nav .nav-item .nav-link.active {
    background: transparent !important;
    color: var(--brand-gold) !important;
    border-bottom: 2px solid var(--brand-gold) !important;
}

.reg-login-nav .nav-item .nav-link:hover {
    color: var(--brand-gold) !important;
}

/* ── Cart badge ── */
#cartCount {
    background: var(--brand-gold) !important;
}

/* ── Cart button orange ── */
.cart-button,
.cart-button:hover {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

.add-qty,
.sub-qty {
    background-color: var(--brand-gold) !important;
}

.cart-title {
    color: var(--brand-gold) !important;
}

.toppage-bgcolor {
    background-color: var(--brand-espresso) !important;
}

/* ── #menuNavButtons ── */
#menuNavButtons .btn-group .btn,
#menuNavButtons .btn-group .dropdown-menu,
#menuNavButtons .btn-group .dropdown-item,
#menuNavButtons .btn-group .dropdown-item.active,
#menuNavButtons .dropdown-item:active {
    background-color: var(--brand-gold) !important;
}

/* ── Modals ── */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(44, 26, 14, 0.2);
    font-family: var(--font-body);
}

.modal-header {
    background: var(--brand-espresso);
    color: #FFF5E6;
    border-radius: 16px 16px 0 0;
    border-bottom: 2px solid var(--brand-gold);
}

.modal-header .close {
    color: #FFF5E6 !important;
    opacity: 0.7;
}

.modal-footer {
    border-top: 1px solid var(--brand-border);
}

/* ── SweetAlert2 theming ── */
.swal2-popup {
    border-radius: 16px !important;
    font-family: var(--font-body) !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-amber)) !important;
    border-radius: 8px !important;
}

.swal2-cancel {
    border-radius: 8px !important;
}

/* ── Page headings ── */
h1.my-4, h2.my-4 {
    font-family: var(--font-heading) !important;
    color: var(--brand-espresso);
}

/* ── Privacy link ── */
.privacy {
    color: var(--brand-gold) !important;
    font-weight: 500;
}

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--brand-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-muted);
}