:root {
    /* Base Colors - Inspired by Cordel Paper */
    --bg-dark: #f2efe1;
    --bg-surface: #fdfcf3;
    --bg-card: rgba(253, 252, 243, 0.85);
    --bg-sidebar: #1a1a1b;

    /* Brand Colors - Encantos do Cordel */
    --primary: #8dbe4e; /* Verde Mandacaru */
    --primary-light: #a3cf6d;
    --primary-rgb: 141, 190, 78;
    --accent: #a0522d; /* Terracota Rústico */
    --accent-rgb: 160, 82, 45;

    /* Interface Colors */
    --success: #2d963f;
    --warning: #d2b48c; /* Areia Escura */
    --danger: #ef4444;
    --info: #3b82f6;

    /* Text Colors */
    --text-main: #1a1a1b; /* Preto Xilo */
    --text-muted: #333333; /* Darker muted text for better contrast */
    --text-on-primary: #1a1a1b;
    --text-color: #1a1a1b;

    /* Border & Glass */
    --border: #d2b48c; /* Areia Escura */
    --glass-bg: rgba(253, 252, 243, 0.7);
    --glass-border: rgba(26, 26, 27, 0.2);

    /* Effects */
    --calendar-filter: none;
}

/* Background Fallback Logic */
body.auth-wrapper, body.body-with-bg {
    background-color: var(--bg-dark) !important;
}

body.body-with-bg {
    background-color: transparent !important;
}

body.auth-wrapper::before, body.body-with-bg::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(242, 239, 225, 0.7), rgba(242, 239, 225, 0.8)), var(--bg-url) center/cover no-repeat fixed !important;
    z-index: -2;
}

/* Hide image layer if not set */
body:not(.body-with-bg)::before {
    display: none !important;
}



.auth-title {
    color: var(--text-main) !important;
    font-weight: 800;
}

/* Cardapio specific adjustments built on top of variables */
body.body-with-bg {
    background: transparent !important;
}

body.body-with-bg::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(242, 239, 225, 0.7), rgba(242, 239, 225, 0.8)), var(--bg-url) center/cover no-repeat fixed !important;
    z-index: -2;
}

/* Glassmorphism elements */
.card, .m-item, .cart-sidebar, .auth-card {
    background-color: var(--bg-card) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid var(--text-main) !important;
    border-radius: 8px !important;
    box-shadow: 6px 6px 0px var(--border) !important;
}

/* Dropdowns fix */
select, .form-control {
    background-color: #fff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

/* Interactive elements */
.category-btn {
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    color: var(--text-main) !important;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.category-btn:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

.category-btn.active {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--text-main) !important;
}

.icon-lucide {
    stroke: currentColor !important;
    stroke-width: 2.2px;
}

/* Contrast Fix: All Cardapio Titles to Black (Preto Xilo) */
.m-content h3, .p-content h3, .card h3, .m-item h3, .header-content h1 {
    color: var(--text-main) !important;
    font-weight: 800 !important;
}

/* Dropdowns & Select Options Fix */
select {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    cursor: pointer;
}

select option {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    padding: 10px;
}

/* Form labels visibility */
.form-label, label, p, .m-item-desc {
    color: var(--text-main) !important;
    font-weight: 500 !important;
}

/* --- CART & FOOTER (CORDEL) --- */
#cart-panel, .cart-sidebar {
    background: var(--bg-card) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-left: 3px solid var(--text-main) !important;
    color: var(--text-main) !important;
}

.cart-header {
    border-bottom: 2px solid var(--text-main) !important;
    background: transparent !important;
}

.cart-item {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 2px solid var(--text-main) !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0px var(--border) !important;
    color: var(--text-main) !important;
    margin-bottom: 15px !important;
}

.cart-item-title, .cart-item-price, .cart-total-row, .total-amount {
    color: var(--text-main) !important;
}

.cart-item-extras {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.cart-footer {
    background: rgba(253, 252, 243, 0.9) !important;
    border-top: 3px solid var(--text-main) !important;
}

.btn-checkout, .add-to-cart-btn {
    background: var(--primary) !important;
    color: var(--text-on-primary) !important;
    border: 2px solid var(--text-main) !important;
    box-shadow: 4px 4px 0px var(--text-main) !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
}

.btn-checkout:hover, .add-to-cart-btn:hover {
    background: var(--accent) !important;
    color: #ffffff !important;
}
.section-header h2 {
    color: #000;
}

.sidebar-nav li a, .top-bar .page-title{
    color: var(--bg-dark);
}

.selectable-card span{
    color: #000 !important;
}

/* --- Product Details Modal (Popup) --- */
#modal-details .modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important;
}

#modal-details .m-close {
    background: var(--accent) !important; /* Terracota */
    color: #fff !important;
}

#modal-details .m-body h2, 
#modal-details .m-body .step-section-title {
    color: var(--text-main) !important;
    font-weight: 800 !important;
}

#modal-details .m-body p,
#modal-details #no-variations-msg {
    color: #444 !important;
}

/* Modal Footer */
#modal-details .m-footer {
    background: rgba(var(--primary-rgb), 0.05) !important;
    border-top: 1px solid var(--border) !important;
    backdrop-filter: blur(10px) !important;
}

/* Quantity Control */
#modal-details .quantity-control {
    background: rgba(0,0,0,0.05) !important;
    border: 1px solid var(--border) !important;
}

#modal-details .qty-btn {
    background: var(--accent) !important; /* Terracota */
    color: #fff !important;
}

#modal-details .qty-number {
    color: var(--text-main) !important;
    font-weight: 800 !important;
}

/* Price Tags */
#modal-details .price-tag {
    color: var(--accent) !important; /* Terracota for price prominence */
}

#modal-details .m-price-label,
#modal-details .m-subtitle-modal {
    color: var(--text-muted) !important;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
}

/* Selection Items (Variations & Adicionais) */
#modal-details .variation-item,
#modal-details .adicional-item {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

#modal-details .variation-item .v-name,
#modal-details .adicional-item .adicional-nome {
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

#modal-details .variation-item:hover,
#modal-details .adicional-item:hover {
    background: rgba(var(--primary-rgb), 0.05) !important;
    border-color: var(--primary) !important;
}

#modal-details .variation-item.selected,
#modal-details .adicional-item.selected {
    background: rgba(var(--primary-rgb), 0.1) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.05) !important;
}

/* Header Categories & Tags */
#modal-details .category-tag {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
}

/* Form Controls (Select & Textarea) */
#modal-details .form-control-digital {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: #000 !important;
}

#modal-details select.form-control-digital option {
    background: #fff !important;
    color: #000 !important;
}

/* Step Indicator */
#modal-details .modal-step-indicator {
    padding: 15px !important;
    background: rgba(0,0,0,0.02) !important;
    border-bottom: 1px solid var(--border) !important;
}

#modal-details .step-dot {
    background: var(--border) !important;
}

#modal-details .step-dot.active {
    background: var(--primary) !important;
}

#modal-details .step-dot.done {
    background: var(--accent) !important;
}

/* Buttons */
#modal-details .add-to-cart-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
}

#modal-details .btn-text-only {
    color: var(--text-muted) !important;
}

#modal-details .btn-text-only:hover {
    color: var(--accent) !important;
}

/* Toast Notifications - Cordel Style */
.toast-notif {
    background: var(--bg-surface) !important;
    border: 1px solid var(--primary) !important;
    color: var(--text-main) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.toast-info i { color: var(--primary) !important; }
.toast-success i { color: var(--success) !important; }
.toast-warning i { color: var(--accent) !important; }

/* Readability fix for form control labels and titles in Cordel */
.m-body h2, .step-section-title {
    color: #000 !important;
    font-weight: 800 !important;
}

.variation-item .v-price, .adicional-item .adicional-preco {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* Modal Meio a Meio Info Box */
.half-flavor-info {
    background: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--text-main) !important;
    padding: 10px 15px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    border: 1px dashed var(--primary) !important;
}

/* Input Polishing */
#modal-details textarea.form-control-digital {
    border-radius: 16px !important;
    padding: 15px !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
}