/* Dynamic Frontend CSS - Generated from Admin Settings */


/* ===== COLOR VARIABLES ===== */
:root {
    /* Primary Colors */
    --frontend-primary: #e07a7f;
    --frontend-primary-rgb: 224, 122, 127;
    --frontend-primary-hover: #ad474c;
    --frontend-secondary: #191c1d;
    
    /* Status Colors */
    --frontend-success: #28a745;
    --frontend-danger: #dc3545;
    --frontend-warning: #ffc107;
    --frontend-info: #17a2b8;
    
    /* Background Colors */
    --frontend-body-bg: #f0f0f0;
    --frontend-card-bg: #ffffff;
    --frontend-footer-bg: #191c1d;
    
    /* Navbar Colors */
    --frontend-navbar-bg: #191c1d;
    --frontend-navbar-text: #ffffff;
    --frontend-navbar-link-hover: #e07a7f;
    
    /* Topbar Colors */
    --frontend-topbar-bg: #f5f5f5;
    --frontend-topbar-text: #191c1d;
    
    /* Text Colors */
    --frontend-text-primary: #333333;
    --frontend-text-secondary: #6c757d;
    --frontend-text-muted: #999999;
    --frontend-link-color: #e07a7f;
    --frontend-link-hover-color: #a66467;
    --frontend-header-text: #ffffff;
    
    /* Border & Radius */
    --frontend-border-color: #e9ecef;
    --frontend-border-radius: 0.5rem;
    --frontend-max-width: 1400px;
    
    /* Button Colors */
    --frontend-btn-primary-bg: #e07a7f;
    --frontend-btn-primary-text: #ffffff;
}

/* ===== GLOBAL STYLES ===== */
body { background-color: var(--frontend-body-bg); color: var(--frontend-text-primary); }
a { color: var(--frontend-link-color); }
a:hover { color: var(--frontend-link-hover-color); }
.text-primary { color: var(--frontend-primary) !important; }
.text-secondary { color: var(--frontend-text-secondary) !important; }
.text-muted { color: var(--frontend-text-muted) !important; }

/* ===== BUTTONS ===== */
.btn-primary { background-color: var(--frontend-btn-primary-bg) !important; border-color: var(--frontend-btn-primary-bg) !important; color: var(--frontend-btn-primary-text) !important; }
.btn-primary:hover { background-color: var(--frontend-secondary) !important; border-color: var(--frontend-secondary) !important; }
.btn-outline-primary { color: var(--frontend-primary) !important; border-color: var(--frontend-primary) !important; }
.btn-outline-primary:hover { background-color: var(--frontend-primary) !important; color: white !important; }

/* ===== CARDS ===== */
.card { background-color: var(--frontend-card-bg); border-color: var(--frontend-border-color); border-radius: var(--frontend-border-radius); }
.product-card { border-color: var(--frontend-border-color); }

/* ===== FOOTER ===== */
footer, .footer { background-color: var(--frontend-footer-bg); }

/* ===== NAVBAR ===== */
.header-sticky { background: var(--frontend-navbar-bg) !important; }
.header-logo-primary, .header-logo-secondary { color: var(--frontend-navbar-text) !important; }
.header-nav-link { color: var(--frontend-navbar-text) !important; }
.header-nav-link:hover { color: var(--frontend-navbar-link-hover) !important; }
.header-dropdown-toggle { color: var(--frontend-navbar-text) !important; }
.header-dropdown-toggle:hover { color: var(--frontend-navbar-link-hover) !important; }
.header-mobile-toggle { color: var(--frontend-navbar-text) !important; }
.header-mobile-toggle:hover { color: var(--frontend-navbar-link-hover) !important; }
.header-nav-list a { color: var(--frontend-navbar-text) !important; }
.header-nav-list a:hover, .header-nav-list a.active { color: var(--frontend-navbar-link-hover) !important; }
.header-nav-list a.active { border-bottom-color: var(--frontend-navbar-link-hover) !important; }
.header-nav-action-item { color: var(--frontend-navbar-text) !important; }
.header-nav-action-item:hover { color: var(--frontend-navbar-link-hover) !important; }

/* ===== TOPBAR ===== */
.frontend-topbar { background: var(--frontend-topbar-bg) !important; color: var(--frontend-topbar-text) !important; }
.topbar-label { color: var(--frontend-topbar-text) !important; }
.topbar-badge-link { color: var(--frontend-topbar-text) !important; border-color: rgba(25, 28, 29, 0.3) !important; }
.topbar-badge-link:hover { background: rgba(25, 28, 29, 0.15) !important; border-color: rgba(25, 28, 29, 0.5) !important; color: var(--frontend-topbar-text) !important; }
.topbar-link { color: var(--frontend-topbar-text) !important; }
.topbar-link:hover { color: var(--frontend-topbar-text) !important; opacity: 0.8; }

/* ===== BADGES & ALERTS ===== */
.badge-primary { background-color: var(--frontend-primary); }
.badge-success { background-color: var(--frontend-success); }
.badge-danger { background-color: var(--frontend-danger); }
.badge-warning { background-color: var(--frontend-warning); }
.badge-info { background-color: var(--frontend-info); }
.alert-success { background-color: rgba(40, 167, 69, 0.1); border-color: #28a745; color: #28a745; }
.alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: #dc3545; color: #dc3545; }
.alert-warning { background-color: rgba(255, 193, 7, 0.1); border-color: #ffc107; color: #ffc107; }
.alert-info { background-color: rgba(23, 162, 184, 0.1); border-color: #17a2b8; color: #17a2b8; }

/* ===== FORMS ===== */
.form-control:focus { border-color: var(--frontend-primary); box-shadow: 0 0 0 0.2rem rgba(224, 122, 127, 0.25); }
.form-check-input:checked { background-color: var(--frontend-primary); border-color: var(--frontend-primary); }

/* ===== CUSTOM COMPONENTS ===== */
.contact-icon { background: var(--frontend-primary); }
.hover-shadow:hover { box-shadow: 0 8px 25px rgba(224, 122, 127, 0.15); }

/* ===== TYPOGRAPHY ===== */
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
strong, b, .fw-bold { font-weight: 600; }
h1, .h1 { font-size: 2rem; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h2, .h2 { font-size: 1.8rem; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h3, .h3 { font-size: 1.5rem; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h4, .h4 { font-size: 1.1rem; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h5, .h5 { font-size: 1rem; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
h6, .h6 { font-size: 0.9rem; font-weight: 600; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }