/* ========================================
   COSMEDS UNIFIED DESIGN SYSTEM
   Consistent Colors & Styles Across All Pages
   ======================================== */

/* ========================================
   1. COLOR & DESIGN TOKENS (CSS Variables)
   ======================================== */
:root {
    /* === PRIMARY BRAND COLORS === */
    --primary-gold: #FFC43F;        /* Main brand color */
    --primary-gold-dark: #E8A30A;   /* Darker gold for hover */
    --primary-gold-light: #FFF9EB;  /* Light gold background */
    --primary-gold-rgb: 255, 196, 63;
    
    /* === SECONDARY COLORS === */
    --primary-blue: #6995B1;        /* Secondary brand color */
    --primary-blue-light: #eef1f3;  /* Light blue background */
    --primary-blue-rgb: 105, 149, 177;
    
    /* === STATUS COLORS === */
    --success: #28a745;             /* Success/Positive */
    --success-light: #EEF5E4;       /* Light success background */
    --success-rgb: 40, 167, 69;
    
    --danger: #dc3545;              /* Danger/Error */
    --danger-light: #FFEADA;        /* Light danger background */
    --danger-rgb: 220, 53, 69;
    
    --warning: #ffc107;             /* Warning */
    --warning-light: #FCF7EB;       /* Light warning background */
    --warning-rgb: 255, 193, 7;
    
    --info: #17a2b8;                /* Information */
    --info-light: #E6F3FA;          /* Light info background */
    --info-rgb: 23, 162, 184;
    
    /* === NEUTRAL COLORS === */
    --dark: #222222;                /* Dark text */
    --dark-secondary: #3D464D;      /* Secondary dark */
    --dark-text: #6C757D;           /* Body text color */
    --light: #FFFFFF;               /* White */
    --light-bg: #f5f5f5;            /* Light background */
    --light-bg-alt: #fafafa;        /* Alternative light bg */
    --grey: #dbdbdb;                /* Light grey */
    --grey-dark: #747474;           /* Medium grey */
    
    /* === BORDERS & SHADOWS === */
    --border-color: #F7F7F7;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
    
    /* === TYPOGRAPHY === */
    --body-font: "Open Sans", sans-serif;
    --heading-font: "Nunito", sans-serif;
    --base-font-size: 1rem;
    --base-line-height: 1.5;
    --letter-spacing: 0.03em;
    
    /* === SPACING === */
    --spacing-xs: 0.25rem;          /* 4px */
    --spacing-sm: 0.5rem;           /* 8px */
    --spacing-md: 1rem;             /* 16px */
    --spacing-lg: 1.5rem;           /* 24px */
    --spacing-xl: 2rem;             /* 32px */
    --spacing-2xl: 3rem;            /* 48px */
    
    /* === HEADER === */
    --header-height: 160px;
    --header-height-min: 80px;
}

@media screen and (max-width: 600px) {
    :root {
        --header-height: 100px;
        --header-height-min: 80px;
    }
}

/* ========================================
   2. GLOBAL STYLES
   ======================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    font-size: var(--base-font-size);
    font-weight: 400;
    line-height: var(--base-line-height);
    color: var(--dark-text);
    background-color: var(--light-bg);
    letter-spacing: var(--letter-spacing);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 1rem;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: 700;
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-gold);
    text-decoration: none;
}

a:not([href]):not([class]) {
    color: inherit;
    text-decoration: none;
}

/* ========================================
   3. BUTTON STYLES
   ======================================== */

/* Primary Button */
.btn-primary,
.btn-yellow {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-gold);
    --bs-btn-border-color: var(--primary-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-gold-dark);
    --bs-btn-hover-border-color: var(--primary-gold-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-gold-dark);
    --bs-btn-active-border-color: var(--primary-gold-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d3d7dd;
    --bs-btn-disabled-border-color: #d3d7dd;
    transition: all 0.3s ease;
    border-radius: var(--border-radius);
    font-weight: 600;
}

.btn-primary:hover,
.btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Outline Primary Button */
.btn-outline-primary {
    --bs-btn-color: var(--primary-gold);
    --bs-btn-border-color: var(--primary-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-gold);
    --bs-btn-hover-border-color: var(--primary-gold);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-gold);
    --bs-btn-active-border-color: var(--primary-gold);
    --bs-btn-disabled-color: var(--primary-gold);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-gold);
}

/* Secondary Button */
.btn-secondary {
    --bs-btn-color: var(--dark-text);
    --bs-btn-bg: var(--light-bg);
    --bs-btn-border-color: var(--grey);
    --bs-btn-hover-color: var(--dark);
    --bs-btn-hover-bg: var(--grey);
    --bs-btn-hover-border-color: var(--grey);
    --bs-btn-active-color: var(--dark);
    --bs-btn-active-bg: var(--grey);
    --bs-btn-active-border-color: var(--grey);
}

/* Outline Light Button */
.btn-outline-light {
    --bs-btn-color: var(--dark-text);
    --bs-btn-border-color: var(--grey);
    --bs-btn-hover-color: var(--dark);
    --bs-btn-hover-bg: var(--grey);
    --bs-btn-hover-border-color: var(--grey);
    --bs-btn-active-color: var(--dark);
    --bs-btn-active-bg: var(--grey);
    --bs-btn-active-border-color: var(--grey);
}

/* Success Button */
.btn-success {
    --bs-btn-color: #222;
    --bs-btn-bg: var(--success-light);
    --bs-btn-border-color: var(--success-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
}

/* Danger Button */
.btn-danger {
    --bs-btn-color: #222;
    --bs-btn-bg: var(--danger-light);
    --bs-btn-border-color: var(--danger-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
}

/* Warning Button */
.btn-warning {
    --bs-btn-color: #222;
    --bs-btn-bg: var(--warning-light);
    --bs-btn-border-color: var(--warning-light);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
}

/* Info Button */
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #128ca3;
    --bs-btn-hover-border-color: #128ca3;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #128ca3;
    --bs-btn-active-border-color: #128ca3;
}

/* ========================================
   4. BADGE STYLES
   ======================================== */
.badge-primary,
.badge-gold {
    background-color: var(--primary-gold);
    color: var(--dark);
}

.badge-success {
    background-color: var(--success);
    color: #fff;
}

.badge-danger {
    background-color: var(--danger);
    color: #fff;
}

.badge-warning {
    background-color: var(--warning);
    color: var(--dark);
}

.badge-info {
    background-color: var(--info);
    color: #fff;
}

/* ========================================
   5. CARD & CONTAINER STYLES
   ======================================== */
.card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    background-color: var(--light-bg);
    border-color: var(--border-color);
    color: var(--dark);
    font-weight: 600;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.card-footer {
    background-color: var(--light-bg);
    border-color: var(--border-color);
}

/* ========================================
   6. ALERT STYLES
   ======================================== */
.alert {
    border: none;
    border-radius: var(--border-radius);
}

.alert-success {
    background-color: var(--success-light);
    color: #155724;
    border-color: var(--success);
}

.alert-danger {
    background-color: var(--danger-light);
    color: #721c24;
    border-color: var(--danger);
}

.alert-warning {
    background-color: var(--warning-light);
    color: #856404;
    border-color: var(--warning);
}

.alert-info {
    background-color: var(--info-light);
    color: #0c5460;
    border-color: var(--info);
}

/* ========================================
   7. FORM STYLES
   ======================================== */
.form-control,
.form-select {
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 0.2rem rgba(255, 196, 63, 0.25);
}

.form-control::placeholder {
    color: var(--grey-dark);
}

.form-label {
    color: var(--dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ========================================
   8. NAVIGATION STYLES
   ======================================== */
.navbar {
    background-color: var(--light);
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--dark);
    font-size: 1.5rem;
}

.nav-link {
    color: var(--dark-text) !important;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-gold) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-gold);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ========================================
   9. DROPDOWN STYLES
   ======================================== */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--primary-gold);
    border-radius: var(--border-radius);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--primary-gold-light);
    color: var(--dark);
}

.dropdown-item.active {
    background-color: var(--primary-gold);
    color: var(--dark);
}

/* ========================================
   10. PAGINATION STYLES
   ======================================== */
.pagination {
    gap: 0.25rem;
}

.page-link {
    color: var(--primary-gold);
    border-color: var(--border-color);
    background-color: var(--light);
    transition: all 0.3s ease;
}

.page-link:hover {
    color: #fff;
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
}

.page-item.active .page-link {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
    color: var(--dark);
}

/* ========================================
   11. TABLE STYLES
   ======================================== */
.table {
    color: var(--dark-text);
}

.table-hover tbody tr:hover {
    background-color: var(--primary-gold-light);
}

.table thead {
    background-color: var(--light-bg);
    color: var(--dark);
    font-weight: 600;
    border-color: var(--border-color);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--light-bg-alt);
}

.table-bordered {
    border-color: var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border-color: var(--border-color);
}

/* ========================================
   12. BREADCRUMB & LINKS
   ======================================== */
.breadcrumb {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.breadcrumb-item {
    color: var(--dark-text);
}

.breadcrumb-item.active {
    color: var(--primary-gold);
    font-weight: 600;
}

.btn-link {
    color: var(--primary-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.btn-link:hover {
    color: var(--primary-gold-dark);
    text-decoration: underline;
}

/* ========================================
   13. PRODUCT CARD STYLES
   ======================================== */
.product-item {
    transition: all 0.3s ease;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.product-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.product-title {
    color: var(--dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-price {
    color: var(--primary-gold);
    font-weight: 700;
    font-size: 1.1rem;
}

.product-price-original {
    color: var(--grey-dark);
    text-decoration: line-through;
    font-size: 0.9rem;
}

.badge-discount {
    background-color: var(--danger);
    color: #fff;
    border-radius: var(--border-radius);
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ========================================
   14. MODAL & POPOVER STYLES
   ======================================== */
.modal-header {
    background-color: var(--light-bg);
    border-color: var(--border-color);
}

.modal-title {
    color: var(--dark);
    font-weight: 700;
}

.modal-body {
    color: var(--dark-text);
}

.modal-footer {
    background-color: var(--light-bg);
    border-color: var(--border-color);
}

/* ========================================
   15. INPUT & SELECT STYLES
   ======================================== */
.input-group-text {
    background-color: var(--light-bg);
    border-color: var(--border-color);
    color: var(--dark-text);
}

.form-check-input {
    border-color: var(--grey);
    transition: all 0.3s ease;
}

.form-check-input:checked {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-gold);
}

/* ========================================
   16. UTILITY CLASSES
   ======================================== */

/* Text colors */
.text-primary-gold {
    color: var(--primary-gold) !important;
}

.text-primary-blue {
    color: var(--primary-blue) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-muted {
    color: var(--dark-text) !important;
}

/* Background colors */
.bg-primary-gold {
    background-color: var(--primary-gold) !important;
}

.bg-primary-gold-light {
    background-color: var(--primary-gold-light) !important;
}

.bg-primary-blue {
    background-color: var(--primary-blue) !important;
}

.bg-primary-blue-light {
    background-color: var(--primary-blue-light) !important;
}

.bg-success-light {
    background-color: var(--success-light) !important;
}

.bg-danger-light {
    background-color: var(--danger-light) !important;
}

.bg-warning-light {
    background-color: var(--warning-light) !important;
}

.bg-info-light {
    background-color: var(--info-light) !important;
}

/* Border colors */
.border-primary-gold {
    border-color: var(--primary-gold) !important;
}

.border-primary-blue {
    border-color: var(--primary-blue) !important;
}

.border-success {
    border-color: var(--success) !important;
}

.border-danger {
    border-color: var(--danger) !important;
}

/* Shadows */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* Borders & Radius */
.rounded-primary {
    border-radius: var(--border-radius) !important;
}

.rounded-lg {
    border-radius: var(--border-radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--border-radius-xl) !important;
}

/* ========================================
   17. HEADER SECTION STYLES
   ======================================== */
.section-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
}

.section-title {
    color: var(--dark);
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0;
}

/* ========================================
   18. RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    
    .btn { padding: 0.5rem 1rem; }
    
    .section-title { font-size: 1.25rem; }
}

@media (max-width: 576px) {
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
    h3, .h3 { font-size: 1rem; }
    
    .btn { padding: 0.375rem 0.75rem; font-size: 0.9rem; }
    
    .section-title { font-size: 1.1rem; }
    
    .card { margin-bottom: var(--spacing-lg); }
}

/* ========================================
   19. ANIMATION & TRANSITION UTILITIES
   ======================================== */
.transition-all {
    transition: all 0.3s ease;
}

.transition-fast {
    transition: all 0.15s ease;
}

.transition-slow {
    transition: all 0.5s ease;
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   20. TOAST/NOTIFICATION STYLES
   ======================================== */
#toast-container > .toast-success {
    background-color: var(--success) !important;
}

#toast-container > .toast-error {
    background-color: var(--danger) !important;
}

#toast-container > .toast-info {
    background-color: var(--info) !important;
}

#toast-container > .toast-warning {
    background-color: var(--warning) !important;
}

.toast {
    opacity: 1 !important;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius);
    border: none;
}