/* ==========================================================================
   1. Root Variables & Global Styles
   ========================================================================== */

:root {
    /* Color Palette (Palmeño-Modernista) */
    --color-primary: #007bff;
    /* Buzzon Blue: Trust, primary actions */
    --color-primary-dark: #0056b3;
    /* For hover states */
    --color-secondary: #6c757d;
    /* Muted Gray: Secondary text, borders */
    --color-background: #f8f9fa;
    /* Off-white Canvas */
    --color-surface: #ffffff;
    /* Card & Navbar background */
    --color-text: #343a40;
    /* Main text color */
    --color-border: #e9ecef;
    /* Light borders */

    /* Accent Colors */
    --color-accent-yellow: #ffc107;
    /* Gold: Ratings, points, warnings */
    --color-accent-green: #28a745;
    /* Green: Success, confirmation */
    --color-accent-red: #dc3545;
    /* Red: Danger, deletion, errors */
    --color-accent-turquoise: #20c997;
    /* Turquoise: Special offers, services */
    --color-accent-orange: #fd7e14;
    /* Orange: Food category, energy */
    --color-accent-brown: #885f43;
    /* Brown: Home category */
    --color-accent-blue-icon: #4a90e2;
    /* A softer blue for icons */

    /* Typography */
    --font-family-sans: 'Poppins', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing & Sizing */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */

    /* Borders & Shadows */
    --border-radius-soft: 8px;
    --border-radius-medium: 12px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;

    /* Z-Index Management */
    --z-index-sidebar: 1000;
    --z-index-dropdown: 1100;
    --z-index-modal: 1200;
}

/* Global Reset & Body Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Improves scroll behavior */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--color-background);
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main Content Container */
.container {
    width: 100%;
    max-width: 1200px;
    /* Slightly increased for modern screens */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

/* Helper/Utility Classes */
.text-muted {
    color: var(--color-secondary);
    font-size: 0.9rem;
}




/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================




/* ==========================================================================
   2. Layout & Navigation
   ========================================================================== */

/* --- Main Navbar (Public Pages) --- */
.navbar {
    background-color: var(--color-surface);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
}

.navbar-links {
    display: flex;
    gap: var(--spacing-3);
}

/* --- Main Footer --- */
.footer {
    text-align: center;
    padding: var(--spacing-8) 0;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

/* --- Dashboard Core Layout --- */
.dashboard-page {
    /* Prevents double scrollbars when sidebar is fixed */
    overflow: hidden;
}

.dashboard-layout {
    display: flex;
    height: 100vh;
}

/* --- Sidebar (Client, Commerce, Admin) --- */
.sidebar {
    width: 260px;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: var(--spacing-6);
    height: 100vh;
    overflow-y: auto;
    /* Enables scrolling on long sidebars */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Prevents sidebar from shrinking */
}

.sidebar-header {
    margin-bottom: var(--spacing-6);
}

.sidebar-brand {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
    display: block;
}

.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav-item a {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-soft);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.sidebar-nav-item a:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.sidebar-nav-item.active a {
    background-color: var(--color-primary);
    color: var(--color-surface);
    font-weight: var(--font-weight-semibold);
}

.sidebar-heading {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sidebar-separator {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-4) 0;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li a {
    display: flex;
    /* Changed to flex for better icon alignment */
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-soft);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.sidebar-nav li a:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.sidebar-nav li.active a {
    background-color: var(--color-primary);
    color: var(--color-surface);
    font-weight: var(--font-weight-semibold);
}

.sidebar-separator {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-4) 0;
}

.sidebar-heading {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* --- Main Dashboard Content Area --- */
.dashboard-content {
    flex-grow: 1;
    background-color: var(--color-background);
    padding: var(--spacing-8);
    overflow-y: auto;
    /* The most important property for scrollable content */
}

.dashboard-main-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.dashboard-main-header h2 {
    margin: 0;
    font-size: 1.8rem;
}


.view-more-link {
    display: block;
    margin-top: var(--spacing-4);
    text-align: right;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.view-more-link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    /* Use inline-flex for better alignment */
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border: 1px solid transparent;
    border-radius: var(--border-radius-medium);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn:active {
    transform: scale(0.98);
}

/* Primary Button */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--color-border);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background-color: #d6d8db;
    /* Keep a slightly darker gray for this */
}

/* Outline/Tertiary Button */
.btn-primary-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-primary-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Danger Buttons */
.btn-danger {
    background-color: var(--color-accent-red);
    color: var(--color-surface);
}

.btn-danger:hover {
    background-color: #c82333;
    /* Darker red */
}

.btn-danger-outline {
    background-color: transparent;
    border-color: var(--color-accent-red);
    color: var(--color-accent-red);
}

.btn-danger-outline:hover {
    background-color: var(--color-accent-red);
    color: var(--color-surface);
}

/* Other Button Variants */
.btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: 1.1rem;
}

.btn-sm {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
    font-size: 1rem;
    color: var(--color-secondary);
    border-radius: 50%;
    /* Make icon buttons circular */
}

.btn-icon:hover {
    background-color: var(--color-background);
}

.trash-btn:hover {
    color: var(--color-accent-red);
}

/* Sidebar Specific Button */
.sidebar-action {
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.sidebar-action .btn-scan-qr {
    width: 100%;
}

.btn-scan-qr:hover {
    background-color: #218838;
    /* Darker green */
}

/* Logout link */
.logout-link {
    color: var(--color-accent-red) !important;
}

.logout-link:hover {
    background-color: #fbebee !important;
}

.btn-crystal {
    background-color: color-mix(in srgb, var(--color-accent-yellow) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-yellow) 25%, transparent);
    color: var(--color-primary);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.btn-crystal:hover {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* ==========================================================================
   4. Forms & Inputs
   ========================================================================== */

/* --- Base Form Layout --- */
.form-container,
.form-card {
    background-color: var(--color-surface);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: var(--spacing-6);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-semibold);
}

/* --- Base Input Styles --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    background-color: var(--color-surface);
    font-family: var(--font-family-sans);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* IMPROVEMENT: Add focus state with color for better UX */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* --- Multi-Step Form --- */
.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-8);
    position: relative;
}

.progress-bar::before {
    /* The gray line behind the steps */
    content: "";
    position: absolute;
    background: var(--color-border);
    width: 100%;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

.progress-step {
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: 3px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    transition: var(--transition-fast);
    position: relative;
}

.progress-step.active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.progress-step::after {
    /* The text below the step */
    content: attr(data-title);
    position: absolute;
    top: calc(100% + var(--spacing-2));
    font-size: 0.85rem;
    color: var(--color-secondary);
}

.form-step {
    display: none;
    animation: fadeIn 0.5s;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.step-title {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-8);
}

.skip-link {
    display: block;
    text-align: center;
    margin-top: var(--spacing-4);
}

/* --- Specific Form Components --- */
.phone-input {
    display: flex;
}

.phone-prefix {
    padding: var(--spacing-3);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--border-radius-soft) 0 0 var(--border-radius-soft);
    font-weight: var(--font-weight-semibold);
}

.phone-input input {
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}

.form-check-group,
.radio-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.form-check-group {
    margin-bottom: var(--spacing-3);
}

/* Custom Checkbox & Radio Tags (Interest Grid, etc.) */
.interest-grid,
.attribute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-3);
}

.checkbox-tag,
.interest-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    cursor: pointer;
    transition: var(--transition-fast);
}

.checkbox-tag input,
.interest-tag input {
    display: none;
}

/* INJECTING COLOR: Change border and background on check */
.checkbox-tag:has(input:checked),
.interest-tag:has(input:checked) {
    border-color: var(--color-primary);
    background-color: #eef4ff;
    /* A light, primary-blue tint */
}

.interest-tag input:checked+i {
    color: var(--color-primary);
}

/* Custom Radio Labels */
.radio-label {
    display: block;
    padding: var(--spacing-4);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    margin-bottom: var(--spacing-2);
    cursor: pointer;
    transition: var(--transition-fast);
}

.radio-label:has(input:checked) {
    border-color: var(--color-primary);
    background-color: #eef4ff;
}

/* Hours of Operation Grid */
.hours-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.day-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.day-row input[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
}

.day-row label {
    font-weight: var(--font-weight-semibold);
    width: 50px;
}

.day-row:not(:has(:checked)) input[type="time"],
.day-row:not(:has(:checked))>span {
    display: none;
}

.day-row:has(:checked) .closed-text {
    display: none;
}

.closed-text {
    color: var(--color-secondary);
}

/* Legal Step Skip Section */
.skip-section {
    text-align: center;
    padding: var(--spacing-6);
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
}

.skip-warning {
    font-size: 0.85rem;
    color: var(--color-secondary);
    margin-top: var(--spacing-4);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.separator-text {
    border: none;
    border-top: 1px solid var(--color-border);
    text-align: center;
    margin: var(--spacing-8) 0;
}

.separator-text::after {
    content: attr(data-content);
    position: relative;
    top: -12px;
    background-color: var(--color-surface);
    padding: 0 var(--spacing-4);
    color: var(--color-secondary);
    font-weight: var(--font-weight-semibold);
}

/* --- Custom Color Selector --- */
.color-selector {
    display: flex;
    gap: var(--spacing-3);
}

.color-option input[type="radio"] {
    display: none;
    /* Hide the actual radio button */
}

.color-swatch {
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--swatch-color);
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-border);
    transition: var(--transition-fast);
}

/* Style for the selected color */
.color-option input:checked+.color-swatch {
    box-shadow: 0 0 0 3px var(--swatch-color);
}

/* ==========================================================================
   5. Cards & Content Blocks
   ========================================================================== */

/* --- Base Card Style --- */
/* This is the foundation for almost every content box in the app. */
.card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);
    /* Default bottom margin */
}

.card-title {
    margin-top: 0;
    margin-bottom: var(--spacing-6);
    font-size: 1.2rem;
}

.card:last-child {
    margin-bottom: 0;
}

/* --- Commerce Card (Discovery & Favorites) --- */
.commerce-card {
    padding: 0;
    /* Override base padding for custom layout */
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-top: 4px solid var(--color-border);
    /* A default gray border */
}

.commerce-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-header-image {
    height: 140px;
    background-size: cover;
    background-position: center;
    position: relative;
    background-image: var(--cover-image);
}

.commerce-logo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    position: absolute;
    bottom: -35px;
    /* Halfway overlap */
    left: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.card-body {
    padding: 50px var(--spacing-6) var(--spacing-6);
    /* Top padding makes space for logo */
}

.card-category {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    border: 2px solid transparent;
    /* Prepare for colored borders */
    border-radius: var(--border-radius-soft);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-3);
    /* The hardcoded orange colors have been REMOVED */
}

.card-description {
    font-size: 0.9rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-4);
    height: 40px;
    /* Ensures consistent height for 2 lines */
    overflow: hidden;
}

.card-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-6);
}

/* --- Stat Card (Dashboard Overview) --- */
.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    background-color: var(--color-background);
    /* A slightly different background to stand out */
    padding: var(--spacing-4);
    border-radius: var(--border-radius-soft);
}

.stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    /* Make icons a bit larger */
    flex-shrink: 0;
    /* The background is now handled by the parent panel */
    color: inherit;
    /* Inherit the color from the parent panel */
    opacity: 0.6;
    /* A nice touch to make the icon blend */
}

/* IMPROVEMENT: Use a map-like system for colors for easy extension */
.stat-icon-wrapper.yellow {
    background-color: #fff8e1;
    color: var(--color-accent-yellow);
}

.stat-icon-wrapper.blue {
    background-color: #eef4ff;
    color: var(--color-primary);
}

.stat-icon-wrapper.green {
    background-color: #e9f7ef;
    color: var(--color-accent-green);
}

.stat-icon-wrapper.red {
    background-color: #fbebee;
    color: var(--color-accent-red);
}

.stat-icon-wrapper.turquoise {
    background-color: #e8f9f5;
    color: var(--color-accent-turquoise);
}

.stat-icon-wrapper.orange {
    background-color: #fff3e0;
    color: var(--color-accent-orange);
}

.colored-panel.bg-yellow {
    background-color: color-mix(in srgb, var(--color-accent-yellow) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-yellow) 30%, transparent);
    color: #b38600;
    /* A darker yellow for better contrast */
}

.colored-panel.bg-green {
    background-color: color-mix(in srgb, var(--color-accent-green) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-green) 30%, transparent);
    color: #1c7430;
    /* A darker green */
}


/* Make labels and values inside the panel pop more */
.colored-panel .stat-info .stat-value {
    color: var(--color-text);
    /* Use the main text color for readability */
}

.colored-panel .stat-info .stat-label {
    font-weight: var(--font-weight-medium);
    color: inherit;
    /* Inherit the panel's text color */
    opacity: 0.8;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.stat-label {
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
}

.overview-stats-grid {
    display: grid;
    /* This creates the 2x2 grid you requested */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

/* --- Choice Card (Register Choice Page) --- */
.choice-card {
    border: 2px solid var(--color-border);
    padding: var(--spacing-8);
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.choice-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.choice-card h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.choice-card span {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* --- Other Content Blocks --- */
.info-box {
    background-color: #eef4ff;
    /* Light blue tint */
    padding: var(--spacing-6);
    border-radius: var(--border-radius-medium);
}

.info-box h4 {
    margin-top: 0;
}

.danger-zone-card {
    border: 2px solid var(--color-accent-red);
    background-color: #fbebee;
    /* Light red tint */
}

.danger-zone-card h3 {
    color: var(--color-accent-red);
}

/* ==========================================================================
   6. Page-Specific & Miscellaneous Components
   ========================================================================== */

/* --- Hero Sections (Home & Find Commerce) --- */
.hero {
    /* Home Page Hero */
    text-align: center;
    padding: var(--spacing-8) 0;
}

.hero-search-card {
    /* Find Commerce Hero */
    padding: 0;
    overflow: hidden;
}

.hero-image {
    height: 250px;
    background-size: cover;
    background-position: center;
}

.hero-description {
    padding: var(--spacing-8);
    text-align: center;
}

.hero-description h2 {
    color: var(--color-primary);
}

/* --- Find Commerce Page Components --- */
.bg-hero-find {
    background-image: url('https://images.unsplash.com/photo-1620306124302-194d8a7a8f90?w=800&q=80');
}

.hero-search-card .search-area {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6) var(--spacing-8);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background);
}

.search-area .form-group {
    margin: 0;
    position: relative;
}

.search-area .main-search {
    flex-grow: 1;
}

.search-area .slug-search {
    width: 220px;
    flex-shrink: 0;
}

.search-area .btn {
    flex-shrink: 0;
    height: 48px;
}

.search-area .form-group i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--spacing-4);
    color: var(--color-secondary);
    pointer-events: none;
}

.search-area input[type="text"] {
    height: 48px;
    padding-left: var(--spacing-8);
    font-size: 1rem;
}

/* Filter Tags */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.category-tag {
    padding: var(--spacing-2) var(--spacing-4);
    border: 2px solid var(--color-border);
    background-color: transparent;
    border-radius: var(--border-radius-soft);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
}

/* Generic state for the "All" button */
.category-tag:hover {
    border-color: var(--color-primary);
    background-color: #eef4ff;
    color: var(--color-primary);
}

.category-tag.active:not([class*='category-tag--']) {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* --- Category Color System (Definitive Version) --- */
/* 1. Food & Drink (Orange) */
.category-tag.category-tag--food:hover,
.category-tag.category-tag--food.active,
.card-category.category-tag--food {
    border-color: var(--color-accent-orange);
    background-color: color-mix(in srgb, var(--color-accent-orange) 15%, transparent);
    color: var(--color-accent-orange);
}

.commerce-card.category-tag--food {
    border-top-color: var(--color-accent-orange);
}

/* 2. Health (Red) */
.category-tag.category-tag--health:hover,
.category-tag.category-tag--health.active,
.card-category.category-tag--health {
    border-color: var(--color-accent-red);
    background-color: color-mix(in srgb, var(--color-accent-red) 15%, transparent);
    color: var(--color-accent-red);
}

.commerce-card.category-tag--health {
    border-top-color: var(--color-accent-red);
}

/* 3. Services (Blue) */
.category-tag.category-tag--services:hover,
.category-tag.category-tag--services.active,
.card-category.category-tag--services {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
}

.commerce-card.category-tag--services {
    border-top-color: var(--color-primary);
}

/* 4. Hotels (Green) */
.category-tag.category-tag--hotels:hover,
.category-tag.category-tag--hotels.active,
.card-category.category-tag--hotels {
    border-color: var(--color-accent-green);
    background-color: color-mix(in srgb, var(--color-accent-green) 15%, transparent);
    color: var(--color-accent-green);
}

.commerce-card.category-tag--hotels {
    border-top-color: var(--color-accent-green);
}

/* 5. Beauty (Turquoise) */
.category-tag.category-tag--beauty:hover,
.category-tag.category-tag--beauty.active,
.card-category.category-tag--beauty {
    border-color: var(--color-accent-turquoise);
    background-color: color-mix(in srgb, var(--color-accent-turquoise) 15%, transparent);
    color: var(--color-accent-turquoise);
}

.commerce-card.category-tag--beauty {
    border-top-color: var(--color-accent-turquoise);
}

/* 6. Automotive (Gray) */
.category-tag.category-tag--auto:hover,
.category-tag.category-tag--auto.active,
.card-category.category-tag--auto {
    border-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent);
    color: var(--color-secondary);
}

.commerce-card.category-tag--auto {
    border-top-color: var(--color-secondary);
}

/* 7. Home (Brown) */
.category-tag.category-tag--home:hover,
.category-tag.category-tag--home.active,
.card-category.category-tag--home {
    border-color: #885f43;
    background-color: color-mix(in srgb, #885f43 15%, transparent);
    color: #885f43;
}

.commerce-card.category-tag--home {
    border-top-color: #885f43;
}

/* <-- TYPO IS FIXED HERE */

/* Department Listing */
.department-header {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--color-surface);
    border-radius: var(--border-radius-soft);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.commerce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

/* --- Commerce Profile Page --- */
.profile-header {
    height: 350px;
    position: relative;
    color: var(--color-surface);
    background-size: cover;
    background-position: center;
}

.profile-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: flex-end;
}

.profile-header-content {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-6);
    padding-bottom: var(--spacing-8);
    width: 100%;
}

.profile-logo {
    width: 120px;
    height: 120px;
    border-radius: var(--border-radius-medium);
    border: 4px solid var(--color-surface);
    flex-shrink: 0;
}

.profile-header-info {
    flex-grow: 1;
}

.profile-header-info h1 {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.2rem;
}

.profile-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.profile-rating .fa-star,
.profile-rating .fa-star-half-stroke {
    color: var(--color-accent-yellow);
}

.profile-actions {
    display: flex;
    gap: var(--spacing-4);
}

.profile-body {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

.gallery-grid img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--border-radius-soft);
    cursor: pointer;
    transition: var(--transition-fast);
}

.gallery-grid img:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}

/* --- Tables, Badges, Lists & Tabs --- */
.history-table,
.order-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-4);
}

.history-table th,
.history-table td,
.order-table th,
.order-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.history-table thead th,
.order-table thead th {
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.history-table tbody tr:last-child td,
.order-table tbody tr:last-child td {
    border-bottom: none;
}

.text-right {
    text-align: right;
}

.points-gained {
    color: var(--color-accent-green);
    font-weight: var(--font-weight-semibold);
}

.points-spent {
    color: var(--color-accent-red);
    font-weight: var(--font-weight-semibold);
}

/* --- Badges & Tabs --- */
.order-status-badge {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--border-radius-soft);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
}

.status-pending {
    background-color: #fff8e1;
    color: #f59e0b;
}

.status-confirmed {
    background-color: #eef4ff;
    color: var(--color-primary);
}

.status-completed {
    background-color: #e9f7ef;
    color: var(--color-accent-green);
}

.status-cancelled {
    background-color: #fbebee;
    color: var(--color-accent-red);
}

/* General Purpose Tab System */
.tabs-nav {
    display: flex;
    gap: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-8);
}

.tab-link {
    background: none;
    border: none;
    padding: var(--spacing-4) 0;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
    color: var(--color-secondary);
    border-bottom: 3px solid transparent;
    transition: var(--transition-fast);
}

.tab-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-pane {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-pane.active {
    display: block;
}

.pane-title {
    margin-top: 0;
}

/* Specific style for settings danger zone */
.danger-zone-content {
    background-color: #fff5f5;
    border: 2px solid var(--color-accent-red);
    color: var(--color-accent-red);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-6);
}

.danger-zone-content h4 {
    margin-top: 0;
    color: var(--color-accent-red);
}

.danger-zone-content p {
    color: #a12c37;
}

/* --- Chat Interface --- */
.chat-box {
    height: 400px;
    overflow-y: auto;
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    margin-bottom: var(--spacing-4);
}

.chat-message {
    max-width: 80%;
    margin-bottom: var(--spacing-4);
}

.chat-message p {
    padding: var(--spacing-3);
    border-radius: var(--border-radius-medium);
    margin: 0;
}

.chat-message.me {
    margin-left: auto;
}

.chat-message.me p {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.chat-message.them p {
    background-color: var(--color-border);
    color: var(--color-text);
}

.chat-timestamp {
    font-size: 0.75rem;
    color: var(--color-secondary);
    padding: 0 var(--spacing-2);
}

.chat-message.me .chat-timestamp {
    text-align: right;
}

.chat-input-area {
    display: flex;
    gap: var(--spacing-2);
}

.chat-input-area textarea {
    flex-grow: 1;
    resize: none;
}

/* --- Gamification & Scan Components --- */
.ranking-list {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-6);
}

.ranking-list li {
    display: flex;
    align-items: center;
    padding: var(--spacing-4);
    border-radius: var(--border-radius-medium);
    transition: var(--transition-fast);
}

.ranking-list li:hover {
    background-color: var(--color-background);
}

.ranking-list li.is-user {
    background-color: #eef4ff;
    border: 2px solid var(--color-primary);
}

.rank-position {
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    width: 60px;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.rank-position.gold {
    color: var(--color-accent-yellow);
}

.rank-position.silver {
    color: #adb5bd;
}

.rank-position.bronze {
    color: #cd7f32;
}

.rank-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: var(--spacing-4);
}

.rank-username {
    font-weight: var(--font-weight-semibold);
    flex-grow: 1;
}

.rank-score {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.winners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
}

/* Style for the validation error messages */
.error-message {
    color: #dc3545;
    /* This is the --color-accent-red you requested */
    font-size: 0.875em;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* --- My Raffle Tickets Page --- */
.ticket-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-tickets {
    text-align: center;
}

.total-tickets span {
    display: block;
    color: var(--color-secondary);
}

.total-tickets strong {
    font-size: 3rem;
    line-height: 1;
    color: var(--color-primary);
}

.raffle-info-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6);
    background-color: var(--color-surface);
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.raffle-info-card h5 {
    margin: 0;
    font-size: 1.1rem;
}

.raffle-info-card p {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

.raffle-ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-6);
}

.raffle-ticket {
    display: flex;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Important for the stub effect */
    position: relative;
    transition: var(--transition-fast);
}

.raffle-ticket:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.ticket-stub {
    background-color: var(--color-accent-turquoise);
    color: var(--color-surface);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 90px;
    flex-shrink: 0;
}

.ticket-stub .fa-ticket {
    font-size: 2rem;
}

.ticket-stub img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.ticket-body {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    border-left: 2px dashed rgba(0, 0, 0, 0.1);
}

.ticket-body strong {
    font-family: 'Courier New', Courier, monospace;
}

.ticket-body span {
    font-size: 0.9rem;
}

.ticket-body small {
    color: var(--color-secondary);
    font-size: 0.8rem;
}

.total-tickets strong {
    font-size: 3rem;
    line-height: 1;
    color: var(--color-primary);
}

.scan-page-body,
.success-page-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-8);
}

.scan-page-body {
    background-color: var(--color-text);
    color: var(--color-surface);
    text-align: center;
}

.success-page-body {
    background-color: var(--color-background);
}

.success-card {
    text-align: center;
    max-width: 450px;
    width: 100%;
}

.success-icon {
    font-size: 4rem;
    color: var(--color-accent-green);
}

/* --- Wallet Page Components --- */
.wallet-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.balance-card,
.actions-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center content */
}

.points-total {
    font-size: 3.5rem;
    /* The larger font size you requested */
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.accent-yellow-icon {
    color: var(--color-accent-yellow);
}

/* --- Background Image Classes --- */
.bg-pupuseria {
    background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=500&q=80');
}

.bg-pupuseria-cover {
    background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80');
}

.bg-cafe {
    background-image: url('https://images.unsplash.com/photo-1579167728795-e1299e4d5598?w=500&q=80');
}

.bg-hotel {
    background-image: url('https://images.unsplash.com/photo-1565532555231-93e100c6d744?w=500&q=80');
}

.bg-taller {
    background-image: url('https://images.unsplash.com/photo-1581490213458-2713913768c9?w=500&q=80');
}

.bg-bakery {
    background-image: url('https://images.unsplash.com/photo-1568254183919-78a4f43a2877?w=500&q=80');
}

.bg-salon {
    background-image: url('https://images.unsplash.com/photo-1599387737838-66a461367040?w=500&q=80');
}

.bg-print {
    background-image: url('https://images.unsplash.com/photo-1612871689353-cccf581d8ec4?w=500&q=80');
}

.bg-ferreteria {
    background-image: url('https://images.unsplash.com/photo-1581141849291-1158c8233890?w=500&q=80');
}

.bg-pharmacy {
    background-image: url('https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=500&q=80');
}

.bg-mariscos {
    background-image: url('https://images.unsplash.com/photo-1598449426422-5959f635649a?w=500&q=80');
}

.bg-rancho {
    background-image: url('https://images.unsplash.com/photo-1571003123894-1f0594d2b5d9?w=500&q=80');
}

.bg-tour {
    background-image: url('https://images.unsplash.com/photo-1501555088652-021faa106b9b?w=500&q=80');
}

.bg-foodtruck {
    background-image: url('https://images.unsplash.com/photo-1579870114944-a95782747192?w=500&q=80');
}


/* --- Coloured Crystal Panel Component --- */
.colored-panel {
    padding: var(--spacing-8);
    border-radius: var(--border-radius-medium);
    margin-top: var(--spacing-6);
}

/* Use specific classes to set the color with transparency */
.colored-panel.bg-turquoise {
    background-color: color-mix(in srgb, var(--color-accent-turquoise) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-turquoise) 25%, transparent);
}

.colored-panel.bg-orange {
    background-color: color-mix(in srgb, var(--color-accent-orange) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-orange) 25%, transparent);
}

.colored-panel.bg-blue {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Make form labels inside the panel slightly bolder to stand out */
.colored-panel .form-group label {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* --- My Scans Logbook Styles --- */
.scans-table .td-with-icon {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.scans-table .td-with-icon i {
    color: var(--color-secondary);
}

.raffle-ticket-id {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    background-color: var(--color-background);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-soft);
    font-size: 0.9rem;
}

/* --- Commerce Dashboard Specifics --- */

/* Adjust the stats grid to be a 2x2 layout by default */
.commerce-stats-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* On larger screens, expand to 4 columns */
@media (min-width: 992px) {
    .commerce-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Style for the activity lists (Recent Orders, etc.) */
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.activity-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.activity-list li i {
    font-size: 1.2rem;
    color: var(--color-secondary);
}

.activity-list li div {
    flex-grow: 1;
}

.activity-list li p {
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

/* This targets the status badges inside the list */
.activity-list li>span {
    flex-shrink: 0;
}

/* Style for the new accent icons */
.accent-orange-icon {
    color: var(--color-accent-orange);
}

.accent-blue-icon {
    color: var(--color-accent-blue-icon);
}

/* Style for the "View More" link at the bottom of a card */
.view-more-link {
    display: block;
    text-align: right;
    margin-top: var(--spacing-4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.view-more-link:hover {
    text-decoration: underline;
}

/* --- Commerce Order Detail Page --- */
.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.detail-label {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
}

.detail-value {
    font-size: 1rem;
}

.request-details-box {
    background-color: var(--color-background);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-soft);
    font-style: italic;
    color: var(--color-secondary);
}

.chat-box.is-locked {
    background-color: var(--color-background);
}

.summary-list li {
    padding: var(--spacing-2) 0;
}

.summary-list .summary-total {
    border-top: 2px solid var(--color-border);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    padding-top: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.summary-list .summary-total span:last-child {
    color: var(--color-accent-green);
}

.disclaimer-box {
    background-color: #fffbe6;
    /* A soft yellow warning background */
    border: 1px solid var(--color-accent-yellow);
}

.disclaimer-box p {
    font-size: 0.9rem;
}

.disclaimer-box small {
    color: var(--color-secondary);
}

.disclaimer-box hr {
    background-color: color-mix(in srgb, var(--color-accent-yellow) 20%, transparent);
}

.safety-link {
    font-weight: var(--font-weight-semibold);
}

.card-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    /* Replaces the margin from .card-title */
}

/* Ensure the h4 inside doesn't have extra margin */
.card-header-actions .card-title {
    margin-bottom: 0;
}

/* --- Commerce Manage Orders Page --- */
.filter-bar {
    display: flex;
    gap: var(--spacing-3);
}

.filter-bar .main-search {
    width: 300px;
}

.filter-bar .form-group {
    margin: 0;
}

/* Style for the notification-style count in the tabs */
.status-count {
    display: inline-block;
    background-color: var(--color-accent-red);
    color: var(--color-surface);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: var(--spacing-2);
}

/* Change color based on the parent tab's state */
.tab-link.active .status-count {
    background-color: var(--color-surface);
    color: var(--color-primary);
}

/*
   =================================================
   !!! ADD THIS NEW BLOCK TO YOUR CSS FILE !!!
   =================================================
*/

/* --- Commerce Overview Performance Section --- */
.performance-stats-grid {
    display: grid;
    /* On mobile, show 2 columns. On desktop, show 4. */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
    text-align: center;
}

@media (min-width: 992px) {
    .performance-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.performance-item {
    padding: var(--spacing-4);
}

.performance-value {
    display: block;
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.performance-label {
    color: var(--color-secondary);
}

/* Upsell Banner Style */
.upsell-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--border-radius-soft);
    background: linear-gradient(to right, #eef4ff, #e9f7ef);
    /* A soft blue-to-green gradient */
    border: 1px solid var(--color-border);
}

.upsell-banner i {
    font-size: 2rem;
    color: var(--color-primary);
}

.upsell-banner p {
    margin: 0;
    flex-grow: 1;
}

.upsell-banner a {
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    color: var(--color-accent-green);
}

.upsell-banner a:hover {
    text-decoration: underline;
}


/* --- Commerce Customer Reviews Page --- */
.plus-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background-color: #fff8e1;
    color: #b38600;
    border: 1px solid var(--color-accent-yellow);
    border-radius: var(--border-radius-soft);
    font-weight: var(--font-weight-semibold);
    font-size: 0.85rem;
}

.review-filters {
    padding: var(--spacing-4);
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
    margin-top: var(--spacing-6);
}

.review-filters .form-group {
    min-width: 200px;
}

.review-filters .form-group label {
    font-size: 0.8rem;
    font-weight: var(--font-weight-normal);
}

.review-list {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-6);
}

.review-item {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.review-item:last-child {
    border-bottom: none;
}

.review-author {
    flex-shrink: 0;
    text-align: center;
    width: 80px;
}

.review-author .reviewer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: var(--spacing-2);
}

.review-body {
    flex-grow: 1;
}

.review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.business-reply {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: var(--color-background);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}

.business-reply p {
    margin: 0;
}

.reply-form {
    margin-top: var(--spacing-4);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-2);
}


/* Style for the Plus link in the sidebar */
.sidebar-nav a.plus-link {
    position: relative;
}

.plus-link span {
    flex-grow: 1;
    /* Make the text take up available space */
}

.plus-link .plus-icon {
    color: var(--color-accent-yellow);
    font-size: 0.8rem;
}

/* Style for the search result card */
.customer-result-card {
    display: flex;
    gap: var(--spacing-6);
    align-items: center;
}

.customer-result-body {
    flex-grow: 1;
}

.fa-user-magnifying-glass {
    color: #ced4da;
    /* A very light gray for the placeholder icon */
}

/* --- Commerce Customer Profile View --- */
.customer-header-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.customer-header-card .reviewer-avatar {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.customer-header-card h3 {
    margin: 0;
}

.customer-header-card p {
    margin: 0;
}

.warnings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    /* A smaller gap between items */
}

.warning-item {
    background-color: #fff5f5;
    border-radius: var(--border-radius-soft);
}

.warning-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: #a12c37;
    font-weight: var(--font-weight-medium);
}

.warning-summary .btn-toggle-details {
    margin-left: auto;
    /* Push the button to the far right */
    color: #a12c37;
}

.warning-details {
    display: none;
    /* Hidden by default */
    padding: 0 var(--spacing-4) var(--spacing-4);
    border-top: 1px solid color-mix(in srgb, var(--color-accent-red) 20%, transparent);
}

.warning-details p {
    margin: 0;
    padding: var(--spacing-3);
    background-color: var(--color-surface);
    border-radius: var(--border-radius-soft);
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
}

/* The class to show the details */
.warning-details.is-open {
    display: block;
}

/* --- Commerce Catalog Page --- */
.catalog-section {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-border);
}

.catalog-section:first-of-type {
    margin-top: var(--spacing-6);
    padding-top: 0;
    border-top: none;
}

.catalog-section h5 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.catalog-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
}

.catalog-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius-soft);
    flex-shrink: 0;
}

.catalog-item .item-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-border);
    border-radius: var(--border-radius-soft);
    font-size: 1.5rem;
    color: var(--color-secondary);
}

.item-info {
    flex-grow: 1;
}

.item-info strong {
    display: block;
}

.item-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.item-details {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.item-details span {
    font-size: 0.9rem;
}

.catalog-item .btn {
    margin-left: var(--spacing-4);
}


/* --- Commerce Edit Catalog Item Page --- */
.image-upload-slot {
    position: relative;
    background-color: var(--color-background);
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-soft);
    border: 2px dashed var(--color-border);
    cursor: pointer;
    overflow: hidden;
}

.image-upload-slot.main-photo {
    width: 100%;
    padding-bottom: 75%;
    /* Creates a 4:3 aspect ratio */
    margin-bottom: var(--spacing-3);
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.image-upload-slot:hover .upload-overlay {
    opacity: 1;
}

.secondary-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
}

.secondary-photos-grid .image-upload-slot {
    padding-bottom: 100%;
    /* Creates square aspect ratio */
}

.image-upload-slot.locked {
    background-color: #e9ecef;
    border-style: solid;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-secondary);
}

.image-upload-slot.locked:hover .upload-overlay {
    opacity: 0;
}

.premium-slots {
    margin-top: var(--spacing-3);
}

/* --- Toggle Switch Component --- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--color-accent-green);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--color-accent-green);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

/* --- Commerce Transactions Page --- */
.invoice-link {
    font-size: 1.1rem;
    color: var(--color-secondary);
    text-decoration: none;
}

.invoice-link:hover {
    color: var(--color-primary);
}

/* --- Commerce Storefront Page (Buy Points) --- */
.storefront-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.section-title {
    font-size: 1.5rem;
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

.storefront-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    align-items: stretch;
    /* Make cards the same height */
}

.product-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-md);
    text-align: center;
    display: flex;
    /* Needed for flex-grow on button */
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* For the popular badge */
    transition: var(--transition-fast);
}

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

.product-card .card-body {
    padding: var(--spacing-8);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Make body fill the card */
}

.popular-badge {
    position: absolute;
    top: 15px;
    right: -35px;
    background-color: var(--color-accent-yellow);
    color: var(--color-text);
    padding: var(--spacing-1) var(--spacing-8);
    transform: rotate(45deg);
    font-weight: var(--font-weight-bold);
    font-size: 0.8rem;
}

.product-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* Reusing our stat-card color classes */
.product-icon-wrapper.orange {
    background-color: #fff3e0;
    color: var(--color-accent-orange);
}

.product-icon-wrapper.blue {
    background-color: #eef4ff;
    color: var(--color-primary);
}

.product-icon-wrapper.green {
    background-color: #e9f7ef;
    color: var(--color-accent-green);
}

.product-icon-wrapper.turquoise {
    background-color: #e8f9f5;
    color: var(--color-accent-turquoise);
}

.product-icon-wrapper.yellow {
    background-color: #fff8e1;
    color: var(--color-accent-yellow);
}

.product-price {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-2) 0;
}

.price-cycle {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    color: var(--color-secondary);
}

.product-description {
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-4) 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.feature-list i {
    color: var(--color-accent-green);
}

.product-card .btn {
    width: 100%;
    margin-top: auto;
    /* Push button to the bottom */
}

/* --- Commerce Edit Profile Page --- */
.social-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.social-input-group>div {
    display: flex;
}

.social-input-group span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--border-radius-soft) 0 0 var(--border-radius-soft);
    font-size: 1.2rem;
    color: var(--color-secondary);
}

.social-input-group input {
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}

.location-hours-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

@media (min-width: 992px) {
    .location-hours-grid {
        grid-template-columns: 1fr 2fr;
    }
}

/* --- Commerce Edit Profile - Gallery Tab --- */
.gallery-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-4);
}

.gallery-management-grid .image-upload-slot {
    padding-bottom: 100%;
    /* Make them square */
}

/* Position the delete button on the top right of the image slot */
.gallery-management-grid .image-upload-slot .btn-icon {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-surface);
    opacity: 0;
    transition: var(--transition-fast);
}

.gallery-management-grid .image-upload-slot:hover .btn-icon {
    opacity: 1;
}



/* Status Box for Verification */
.status-box {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-soft);
}

.status-box.verified {
    background-color: color-mix(in srgb, var(--color-accent-green) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-green) 30%, transparent);
}

.status-box i {
    font-size: 1.5rem;
    color: var(--color-accent-green);
    margin-top: var(--spacing-1);
}

.status-box p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.learn-more-link {
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    text-decoration: none;
}

/* Generic Item List (for Team & Certs) */
.team-management-section,
.certifications-section {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-border);
}

.item-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-4) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.item-list-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3);
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
}

.item-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.item-list-entry .item-icon {
    font-size: 1.5rem;
    color: var(--color-secondary);
    width: 45px;
    text-align: center;
}

.item-list-entry .item-info {
    flex-grow: 1;
}

.item-list-entry .item-info strong {
    display: block;
}

.item-list-entry .item-info span {
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.item-list-entry .item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* --- Public Announcement Banner --- */
.announcement-banner {
    /* This rule now defines the "crystal panel" directly */
    padding: var(--spacing-6);
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--spacing-8);
    border: 1px solid transparent;
    /* A default transparent border */
}

.announcement-banner small {
    font-weight: var(--font-weight-semibold);
    color: inherit;
    opacity: 0.8;
}

.announcement-banner h4 {
    margin: var(--spacing-1) 0 var(--spacing-2) 0;
    font-size: 1.5rem;
    color: var(--color-text);
}

.announcement-banner p {
    margin: 0;
    color: var(--color-text);
    opacity: 0.9;
}

.announcement-banner.bg-green {
    background-color: color-mix(in srgb, var(--color-accent-green) 15%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-green) 30%, transparent);
    color: #1c7430;
    /* Dark green text for contrast */
}

/* You can add more color options here in the future */
.announcement-banner.bg-blue {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
    color: var(--color-primary);
}

.announcement-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.bg-announcement-promo {
    background-image: url('https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?w=800&q=80');
}

.announcement-content {
    /* This is now our "crystal panel" */
    padding: var(--spacing-6);
    background-color: color-mix(in srgb, var(--color-accent-green) 90%, #ffffff);
    /* A more opaque crystal */
    border-radius: var(--border-radius-soft);
    border: 1px solid color-mix(in srgb, var(--color-accent-green) 50%, transparent);
    /* Adding a subtle backdrop blur for a true glass effect */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.announcement-content small {
    font-weight: var(--font-weight-semibold);
    color: inherit;
    /* Inherit color from the panel */
    opacity: 0.8;
}

.announcement-content h4 {
    margin: var(--spacing-1) 0 var(--spacing-2) 0;
    font-size: 1.5rem;
    color: var(--color-text);
    /* Use main text color for high contrast */
}

.announcement-content p {
    margin: 0;
    color: var(--color-text);
    opacity: 0.9;
}

/* --- Commerce Settings Page --- */
.subscription-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background);
    padding: var(--spacing-4) var(--spacing-6);
    border-radius: var(--border-radius-soft);
    margin-bottom: var(--spacing-6);
}

.subscription-info-box p {
    margin: 0;
    color: var(--color-secondary);
}

.subscription-info-box strong {
    font-size: 1.1rem;
}

/* --- Role Selector Component --- */
.role-selector-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.role-selector-grid .radio-label {
    /* Existing .radio-label styles are great, we just add to them */
    display: block;
    /* Ensure it behaves as a block */
}

.role-selector-grid strong {
    display: block;
    /* Put the title on its own line */
}

.role-description {
    font-weight: var(--font-weight-normal);
    font-size: 0.9rem;
    color: var(--color-secondary);
}

/* --- Customer Order Detail - Fulfiller Card --- */
.fulfiller-info-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
}

/* --- Admin User Profile Page --- */
.user-header-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.user-header-card .item-info {
    flex-grow: 1;
}

.admin-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

@media (min-width: 1200px) {

    /* Use a 3-column layout on large screens */
    .admin-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.details-list li strong {
    color: var(--color-secondary);
}

.points-input-group {
    display: flex;
}

.points-input-group input {
    border-right: none;
    border-radius: var(--border-radius-soft) 0 0 var(--border-radius-soft);
}

.points-input-group select {
    flex-shrink: 0;
    border-radius: 0 var(--border-radius-soft) var(--border-radius-soft) 0;
}

/* --- Admin Manage Warnings Page --- */
.user-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 var(--spacing-4) 0;
    margin-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
}

.user-context-header p {
    margin: 0;
    color: var(--color-secondary);
}

.warnings-list.full-page .warning-summary {
    align-items: flex-start;
    /* Align icon to the top */
}

.warning-text-content {
    flex-grow: 1;
}

.warning-text-content span {
    display: block;
}

.admin-note {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    margin-top: var(--spacing-3);
    background-color: #eef4ff;
    /* Blue for admin notes */
    border-radius: var(--border-radius-soft);
}

.admin-note i {
    color: var(--color-primary);
}

.admin-note strong {
    font-size: 0.9rem;
}

.admin-note p {
    margin: var(--spacing-1) 0 0 0;
    font-size: 0.9rem;
    color: var(--color-text);
}

.admin-note-form {
    margin-top: var(--spacing-3);
}

.note-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

/* --- Actions Dropdown Component --- */
.actions-dropdown {
    position: relative;
    /* This is the anchor for the menu */
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-2));
    /* Position below the button */
    right: 0;
    z-index: 100;
    /* Ensure it appears above other content */
    background-color: var(--color-surface);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    width: 220px;
    padding: var(--spacing-2);
    display: none;
    /* Hidden by default */
}

/* Class added by JS to show the menu */
.dropdown-menu.is-open {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-soft);
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.dropdown-item:hover {
    background-color: var(--color-background);
}

.dropdown-item .fa-solid {
    width: 16px;
    /* Align icons */
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-2) 0;
}

.dropdown-item.danger-item {
    color: var(--color-accent-red);
}

.dropdown-item.danger-item:hover {
    background-color: #fbebee;
}

.activity-list.full-page {
    gap: var(--spacing-6);
    /* Add a little more space in the full-page view */
}

.profile-preview-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    background-color: var(--color-background);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-soft);
}

.profile-preview-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.profile-preview-card div {
    flex-grow: 1;
}

.profile-preview-card strong {
    display: block;
}

.profile-preview-card p {
    margin: 0;
}

/* --- Admin Commerce Profile Page --- */
.verification-actions {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--spacing-3);
}

/* --- Admin Content Moderation Panel --- */

/* A smaller variant for our tab navigation */
.tabs-nav.mini-tabs {
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.tabs-nav.mini-tabs .tab-link {
    padding: var(--spacing-2) 0;
    font-size: 0.9rem;
}

.content-flag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-background);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-soft);
}

.content-flag-item i {
    font-size: 1.2rem;
}

/* --- Admin Support Ticket Detail Page --- */
.support-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    /* Default to single column */
    gap: var(--spacing-6);
}

/* Use 3 columns on larger screens */
@media (min-width: 1200px) {
    .support-grid-container {
        /* Chat takes most space, KB and Details take less */
        grid-template-columns: 2fr 1.2fr 1fr;
    }
}

/* Knowledge Base (KB) Accordion Styles */
.kb-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.kb-category {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-soft);
}

.kb-category summary {
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    list-style: none;
    /* Hide default triangle */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kb-category summary::after {
    /* Custom arrow */
    content: '\f078';
    /* Font Awesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transition: transform 0.2s ease-in-out;
}

.kb-category[open]>summary {
    border-bottom: 1px solid var(--color-border);
}

.kb-category[open]>summary::after {
    transform: rotate(180deg);
}

.kb-entry-list {
    list-style: none;
    padding: var(--spacing-2);
    margin: 0;
}

.kb-entry-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2);
    border-radius: var(--border-radius-soft);
}

.kb-entry-list li:hover {
    background-color: var(--color-background);
}

.kb-entry-list li .btn-copy {
    color: var(--color-secondary);
}

.kb-entry-list li .btn-copy:hover {
    color: var(--color-primary);
}

/* --- Knowledge Base (KB) Accordion Styles --- */
.kb-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

/* Style for the main category (e.g., "Credit Card Issues") */
.kb-category {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-soft);
}

.kb-category>summary {
    /* Use > to target only the direct child summary */
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kb-category>summary::after {
    content: '\f078';
    /* Font Awesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transition: transform 0.2s ease-in-out;
}

.kb-category[open]>summary {
    border-bottom: 1px solid var(--color-border);
}

.kb-category[open]>summary::after {
    transform: rotate(180deg);
}

.kb-category .kb-entry-list {
    list-style: none;
    padding: var(--spacing-2);
    margin: 0;
}

/* Style for the nested entry (e.g., "Card not accepted") */
.kb-entry-list li {
    padding: 0;
    /* Remove padding from the li itself */
}

.kb-entry>summary {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-soft);
    cursor: pointer;
    list-style: none;
    font-weight: var(--font-weight-medium);
}

.kb-entry>summary:hover {
    background-color: var(--color-background);
}

.kb-entry>summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: var(--font-weight-light);
}

.kb-entry[open]>summary::after {
    content: '-';
}

/* Style for the answer box */
.kb-answer {
    padding: var(--spacing-4);
    margin: var(--spacing-2) var(--spacing-3) var(--spacing-3);
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
    border: 1px solid var(--color-border);
}

.kb-answer p {
    margin: 0 0 var(--spacing-4) 0;
    font-style: italic;
    color: var(--color-secondary);
}

.kb-answer .btn {
    width: 100%;
}

/* --- Admin Support Ticket - Advanced Actions & Notes --- */
.action-group-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2);
    margin: var(--spacing-3) 0;
}

.action-group-special {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

/* New Special Button Variants */
.btn-warning-special {
    background-color: color-mix(in srgb, var(--color-accent-yellow) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-yellow) 40%, transparent);
    color: #b38600;
}

.btn-warning-special:hover {
    background-color: color-mix(in srgb, var(--color-accent-yellow) 30%, transparent);
}

.btn-info-special {
    background-color: color-mix(in srgb, var(--color-accent-turquoise) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent-turquoise) 40%, transparent);
    color: #00826c;
}

.btn-info-special:hover {
    background-color: color-mix(in srgb, var(--color-accent-turquoise) 30%, transparent);
}

/* Internal Notes List */
.internal-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.note-item {
    padding: var(--spacing-3);
    background-color: var(--color-background);
    border-left: 4px solid var(--color-accent-yellow);
    border-radius: var(--border-radius-soft);
}

.note-item p {
    margin: 0 0 var(--spacing-2) 0;
    font-style: italic;
}

.note-item small {
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
}

/* --- Admin Commerce Profile - Advanced Header --- */
.status-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--border-radius-soft);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9rem;
    cursor: pointer;
    background-color: transparent;
    /* Set by status classes */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
    padding-right: 2rem;
}

/* Reuse status badge colors */
.status-dropdown.status-pending {
    background-color: #fff8e1;
    color: #f59e0b;
}

/* Add more classes for verified, warned, etc. as needed */


.card-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
    margin-top: 1rem;
    text-align: center;
}

.mini-stat-label {
    font-size: 0.8rem;
    color: #6c757d;
    display: block;
    margin-bottom: 0.25rem;
}

.mini-stat-value {
    font-size: 1.25rem;
    font-weight: bold;
    display: block;
}

.mini-stat-context {
    font-size: 0.75rem;
    color: #6c757d;
    display: block;
}

.accent-green-text {
    color: #198754;
}

.accent-red-text {
    color: #dc3545;
}

.accent-blue-text {
    color: #0d6efd;
}

.accent-orange-text {
    color: #fd7e14;
}

.view-more-link {
    display: block;
    text-align: right;
    margin-top: 1rem;
    font-size: 0.9rem;
    text-decoration: none;
}

/* --- Admin Financial Report Page --- */
.header-actions {
    display: flex;
    gap: var(--spacing-4);
}

.date-range-picker {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background-color: var(--color-surface);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius-soft);
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.ledger-controls {
    display: flex;
    gap: var(--spacing-4);
    margin: var(--spacing-6) 0;
}

.ledger-controls .main-search {
    flex-grow: 1;
}

.ledger-controls select {
    width: 250px;
}

.financial-ledger-table strong {
    display: block;
}

.financial-ledger-table a {
    font-size: 0.85rem;
    text-decoration: none;
}

.financial-ledger-table a:hover {
    text-decoration: underline;
}

.amount-positive {
    color: var(--color-accent-green);
    font-weight: var(--font-weight-semibold);
}

.amount-negative {
    color: var(--color-accent-red);
    font-weight: var(--font-weight-semibold);
}

.badge {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-surface);
}

.badge.category-income {
    background-color: var(--color-accent-green);
}

.badge.category-expense {
    background-color: var(--color-secondary);
}

.badge.category-gamification {
    background-color: var(--color-accent-orange);
}

/* Colored text helpers from your suggestion */
.accent-green-text {
    color: var(--color-accent-green);
}

.accent-red-text {
    color: var(--color-accent-red);
}

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

.accent-orange-text {
    color: var(--color-accent-orange);
}

/* --- Admin Gamification Management Page --- */
.status-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid;
}

.status-card.status-active {
    border-left-color: var(--color-accent-green);
}

.status-card.status-inactive {
    border-left-color: var(--color-secondary);
}

.status-card.status-pending {
    border-left-color: var(--color-accent-yellow);
}

.countdown-timer {
    margin-top: var(--spacing-2);
}

.countdown-timer span {
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.countdown-timer strong {
    font-size: 1.5rem;
    display: block;
}

.form-vertical .form-row {
    display: flex;
    gap: var(--spacing-4);
}

.form-vertical .form-group {
    margin-bottom: var(--spacing-4);
}

.sub-title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
}

.prize-input-group {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.prize-input-group span {
    width: 80px;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.leaderboard-table thead th {
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.leaderboard-table a {
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.leaderboard-table a:hover {
    text-decoration: underline;
}

/* --- Admin Platform Health Page --- */
.progress-bar-wrapper {
    width: 100%;
    height: 8px;
    background-color: var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: var(--spacing-2);
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 8px;
    width: var(--progress-width, 0%);
    transition: width 0.5s ease-in-out;
}

/* Re-using our background color classes for the bars */
.progress-bar-fill.bg-green {
    background-color: var(--color-accent-green);
}

.progress-bar-fill.bg-yellow {
    background-color: var(--color-accent-yellow);
}

.progress-bar-fill.bg-red {
    background-color: var(--color-accent-red);
}

/* --- Admin Verification Queue Page --- */
.verification-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-6);
}

.verification-card {
    padding: 0;
    /* Remove base card padding */
    display: flex;
    flex-direction: column;
}

.verification-card .card-body {
    padding: var(--spacing-6);
    flex-grow: 1;
}

.verification-card hr {
    margin: var(--spacing-4) 0;
}

.document-list {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-2);
}

.document-list li a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    padding: var(--spacing-1) 0;
}

.document-list li a:hover {
    text-decoration: underline;
}

.document-list i {
    color: var(--color-accent-red);
}

.verification-card-actions {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

/* Push the main action buttons to the right */
.verification-card-actions .btn-secondary {
    margin-right: auto;
}

/*
  This targets the main layout container you created.
  Using flexbox is a modern way to create layouts
  where a sidebar and main content sit side-by-side.
*/
.dashboard-layout {
    display: flex;
    height: 100vh;
    /* Make the layout take the full screen height */
}

/* --- System Maintenance Page --- */
.maintenance-page-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-6);
    background-color: var(--color-background);
    text-align: center;
}

.maintenance-card {
    max-width: 550px;
    width: 100%;
}

.maintenance-icon {
    font-size: 5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-6);
    /* Simple spin animation for the icon */
    animation: spin 10s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.maintenance-card h1 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-3) 0;
}

.maintenance-card .lead-text {
    font-size: 1.2rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-4);
}

.maintenance-card .support-text {
    color: var(--color-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-8);
}

.maintenance-footer {
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
}

/* Style for the split action cell in tables */
.actions-cell-split {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Aligns items to the right */
    gap: 0.5rem;
}

/* Styles for dropdown menu items with icons */
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between icon and text */
}

.dropdown-menu a i {
    width: 16px;
    /* Ensures consistent alignment */
    text-align: center;
    color: var(--color-secondary);
}

.dropdown-menu a:hover i {
    color: inherit;
    /* Icon color matches text color on hover */
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 0.5rem 0;
}

.dropdown-menu .danger-item {
    color: var(--color-accent-red);
}

.home-actions {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.action-group {
    display: flex;
    gap: 1rem;
}

.home-separator {
    width: 100%;
    max-width: 400px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    line-height: 0.1em;
    margin: 10px 0 20px;
}

.home-separator span {
    background: var(--color-surface);
    padding: 0 10px;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

.btn-secondary-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-secondary);
}

.btn-secondary-outline:hover {
    background-color: var(--color-background);
    border-color: var(--color-secondary);
    color: var(--color-text);
}

.choice-page-wrapper {
    text-align: center;
    padding: var(--spacing-8) 0;
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

/* Extend the existing .choice-card style */
.choice-card {
    padding: var(--spacing-8);
    text-align: left;
    display: flex;
    flex-direction: column;
    border-top: 4px solid;
    /* Prepare for color */
}

.choice-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.choice-card-header i {
    font-size: 2rem;
}

.choice-card--client {
    border-top-color: var(--color-accent-turquoise);
}

.choice-card--client i {
    color: var(--color-accent-turquoise);
}

.choice-card--commerce {
    border-top-color: var(--color-accent-orange);
}

.choice-card--commerce i {
    color: var(--color-accent-orange);
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.benefit-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.benefit-list i {
    color: var(--color-accent-green);
}

/* Push the button to the bottom */
.choice-card .btn {
    margin-top: auto;
}

/* Custom Button Colors */
.btn-teal {
    background-color: var(--color-accent-turquoise);
    color: var(--color-surface);
}

.btn-teal:hover {
    background-color: #1aa080;
    /* Darker turquoise */
}

.btn-orange {
    background-color: var(--color-accent-orange);
    color: var(--color-surface);
}

.btn-orange:hover {
    background-color: #d86600;
    /* Darker orange */
}

/* Responsive stacking for mobile */
@media (max-width: 768px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Enhancements for Multi-Step Forms --- */
.form-page-body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Aligns to top */
    padding: var(--spacing-8) var(--spacing-4);
}

.form-page-container {
    width: 100%;
    max-width: 700px;
}

.step-title {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.step-title h3 {
    margin-bottom: var(--spacing-2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
}

.form-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-8) 0;
}

/* --- Improved Profile Upload Component --- */
.profile-upload-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    background-color: var(--color-background);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-medium);
}

.profile-upload-circle {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background-color: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.profile-upload-circle:hover {
    border-color: var(--color-primary);
    background-color: #eef4ff;
    color: var(--color-primary);
}

.profile-upload-circle i {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

.profile-upload-circle span {
    font-weight: var(--font-weight-semibold);
}

/* Responsive adjustments for the form */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ==========================================================================
   ENHANCEMENTS FOR COMMERCE REGISTRATION FORM
   ========================================================================== */

/* --- Image Upload Group (Logo & Cover) --- */
.image-upload-group {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Logo takes 1 part, Cover takes 2 */
    gap: var(--spacing-6);
    align-items: flex-end;
    /* Align to the bottom for a clean look */
    margin-bottom: var(--spacing-6);
}

.logo-upload-circle,
.cover-upload-rect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border);
    background-color: var(--color-background);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    color: var(--color-secondary);
}

.logo-upload-circle:hover,
.cover-upload-rect:hover {
    border-color: var(--color-primary);
    background-color: #eef4ff;
    color: var(--color-primary);
}

.logo-upload-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.cover-upload-rect {
    width: 100%;
    height: 150px;
    border-radius: var(--border-radius-soft);
}

.logo-upload-circle i,
.cover-upload-rect i {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

.logo-upload-circle span,
.cover-upload-rect span {
    font-weight: var(--font-weight-semibold);
}

/* Hide the actual file input element */
.file-input-hidden {
    display: none;
}


/* --- Horizontal Radio Button Group --- */
.radio-group-horizontal {
    display: flex;
    gap: var(--spacing-3);
}

.radio-group-horizontal .radio-label {
    flex-grow: 1;
    text-align: center;
}


/* --- Custom File Input Label --- */
.file-input-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-6);
    background-color: var(--color-border);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.file-input-label:hover {
    background-color: #d6d8db;
}

.file-input-label i {
    color: var(--color-secondary);
}


/* --- Survey-style Question Labels --- */
.survey-title {
    display: block;
    margin-bottom: var(--spacing-4);
    font-weight: var(--font-weight-semibold);
    font-size: 1.1rem;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .image-upload-group {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        justify-items: center;
        /* Center the logo */
    }

    .radio-group-horizontal {
        flex-direction: column;
    }
}

.grid-container-2col-wide-left {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.text-center {
    text-align: center;
}

.points-total {
    justify-content: center;
    /* Override default for this specific use */
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
}

.quick-action-btn:hover {
    background-color: #eef4ff;
    color: var(--color-primary);
}

.quick-action-btn i {
    font-size: 1.5rem;
}

/* Style for the validation error messages */
.error-message {
    color: #dc3545;
    /* This is the --color-accent-red you requested */
    font-size: 0.875em;
    margin-top: 0.25rem;
    font-weight: 500;
    min-height: 1.2em;
    /* Prevents layout shift when error appears */
}

.dashboard-user-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.profile-picture-header {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.header-user-info h2 {
    margin: 0;
    font-size: 1.8rem;
}

.header-user-info p {
    margin: 0;
}

/* --- Advanced Commerce Registration Form --- */
.form-page-body {
    background-color: var(--color-background);
}

.step-title {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.step-title h3 {
    margin: 0 0 var(--spacing-2) 0;
}

.step-title p {
    margin: 0;
}

/* Validation Error Styles */
.error-message {
    color: var(--color-accent-red);
    font-size: 0.875em;
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-2);
    min-height: 1.2em;
    /* Prevents layout shifts when errors appear/disappear */
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--color-accent-red);
}

/* Custom File Upload Styling */
.logo-upload-circle,
.cover-upload-rect {
    cursor: pointer;
    border: 3px dashed var(--color-border);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-2);
}

.logo-upload-circle:hover,
.cover-upload-rect:hover {
    border-color: var(--color-primary);
    background-color: #eef4ff;
}

.logo-upload-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.cover-upload-rect {
    width: 100%;
    height: 120px;
    border-radius: var(--border-radius-soft);
}

.file-name-display {
    font-size: 0.8em;
    color: var(--color-secondary);
    margin-top: var(--spacing-2);
    display: block;
    text-align: center;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-soft);
    cursor: pointer;
}

/* Horizontal Radio Group */
.radio-group-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.radio-group-horizontal .radio-label {
    margin-bottom: 0;
}

/* Location Display Text */
.district-display-text {
    font-size: 0.9em;
    color: var(--color-secondary);
    margin: var(--spacing-2) 0;
    min-height: 1.2em;
    display: none;
    /* Hidden by default */
}

/* --- Pre-Registration Feedback --- */
.feedback-message {
    font-size: 0.875em;
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-2);
    min-height: 1.2em;
}

.feedback-message.checking {
    color: var(--color-secondary);
}

.feedback-message.success {
    color: var(--color-accent-green);
}

.feedback-message.error {
    color: var(--color-accent-red);
}


/* --- Style for readonly/locked inputs --- */
.locked-input {
    background-color: var(--color-background);
    cursor: not-allowed;
    color: var(--color-secondary);
}

.db-monitor {
    position: fixed;
    bottom: 15px;
    right: 15px;
    padding: 8px 15px;
    border-radius: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #333;
}

.db-monitor .status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.db-monitor .status-indicator.connected {
    background-color: #28a745;
    /* Green */
}

.db-monitor .status-indicator.disconnected {
    background-color: #dc3545;
    /* Red */
}


/* ==========================================================================
   NUEVO: Estilo para el Banner de CTA en la Barra Lateral
   ========================================================================== */

.sidebar-cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    /* Espacio antes de la navegación */
    border-radius: var(--border-radius-medium);
    text-decoration: none;
    background-color: #eef4ff;
    /* Tinte azul claro, consistente con el tema */
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    transition: var(--transition-fast);
}

.sidebar-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background-color: color-mix(in srgb, var(--color-primary) 10%, #eef4ff);
}

.sidebar-cta i {
    font-size: 1.8rem;
    color: var(--color-primary);
}

.sidebar-cta-text {
    line-height: 1.4;
}

.sidebar-cta-text strong {
    color: var(--color-text);
    display: block;
    /* Pone el texto en su propia línea */
}

.sidebar-cta-text span {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.section-header {
    font-size: 1.8rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.filter-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Allows items to wrap on smaller screens */
    gap: 1rem;
}

.location-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
    padding-left: 1rem;
}

.location-filter i {
    color: var(--color-secondary);
}

.location-filter select {
    border: none;
    background: none;
    font-weight: var(--font-weight-semibold);
    padding-right: 1rem;
}

.location-filter select:focus {
    box-shadow: none;
}


/* ==========================================================================
   8. PAGE: MY COMMERCES
   ========================================================================== */

.my-commerces-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinea al inicio para que el texto y botón no se estiren */
    gap: var(--spacing-6);
}

.my-commerces-header .header-text p {
    margin-top: var(--spacing-2);
}

/* --- Lista de Comercios --- */
.my-commerces-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.my-commerce-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    background-color: var(--color-surface);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

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

/* --- Wrapper y Estilo del Logo --- */
.my-commerce-logo-wrapper {
    flex-shrink: 0; /* Evita que el contenedor del logo se encoja */
    width: 80px;
    height: 80px;
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft); /* Un radio suave para el contenedor */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Clave para contener la imagen */
}

/* La solución al problema principal: el tamaño del logo */
.my-commerce-logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 'contain' es mejor que 'cover' para logos, evita recortes */
}

/* --- Información del Comercio --- */
.my-commerce-info {
    flex-grow: 1; /* Ocupa el espacio disponible */
}

.my-commerce-name {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
}

.my-commerce-location {
    margin: 0 0 var(--spacing-3) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.my-commerce-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.my-commerce-slug {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: var(--color-secondary);
    background-color: var(--color-background);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-soft);
}

/* --- Acciones del Comercio --- */
.my-commerce-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.my-commerce-actions .actions-dropdown button.dropdown-item {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-sans);
    font-size: 1rem;
}

/* --- Estado Vacío (Empty State) --- */
.empty-state-card {
    text-align: center;
    padding: var(--spacing-8);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--color-secondary);
    opacity: 0.3;
    margin-bottom: var(--spacing-6);
}

.empty-state-card h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

.empty-state-card p {
    color: var(--color-secondary);
    max-width: 450px;
    margin: 0 auto var(--spacing-8) auto;
}

/* --- Menú Desplegable (Dropdown) --- */
.actions-dropdown {
    position: relative;
}

.actions-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: var(--z-index-dropdown);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-lg);
    width: 200px;
    padding: var(--spacing-2);
}

.actions-dropdown.is-open .dropdown-menu {
    display: block;
}


/* --- Responsive (Móvil) --- */
@media (max-width: 768px) {
    .my-commerces-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .my-commerce-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-commerce-actions {
        width: 100%;
        margin-top: var(--spacing-4);
        justify-content: space-between;
    }

    .my-commerce-actions .btn-primary {
        flex-grow: 1; /* El botón de Manage ocupa más espacio */
    }
}

/* ==========================================================================
   9. COMMERCE DASHBOARD OVERVIEW ENHANCEMENTS
   ========================================================================== */

/* Hace que el grid de estadísticas sea 2x2 en móvil y 4x1 en escritorio */
.commerce-stats-grid {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 992px) {
    .commerce-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Sección de Rendimiento Mensual --- */
.performance-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
    gap: var(--spacing-6);
    text-align: center;
    padding: var(--spacing-4) 0;
}

@media (min-width: 992px) {
    .performance-stats-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
    }
}

.performance-item {
    padding: var(--spacing-4);
}

.performance-value {
    display: block;
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.performance-label {
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
}

/* Clases de utilidad para texto de color, las necesitarás en varios lugares */
.accent-green-text { color: var(--color-accent-green); }
.accent-red-text { color: var(--color-accent-red); }
.accent-blue-text { color: var(--color-primary); }
.accent-orange-text { color: var(--color-accent-orange); }

/* --- Banner de Upsell / Llamada a la Acción --- */
.upsell-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin: var(--spacing-8) 0;
    padding: var(--spacing-6);
    border-radius: var(--border-radius-medium);
    background: linear-gradient(135deg, #eef4ff, #e8f9f5); /* Gradiente suave de azul a turquesa */
    border: 1px solid var(--color-border);
}

.upsell-banner i {
    font-size: 2.5rem;
    color: var(--color-primary);
}

.upsell-banner p {
    margin: 0;
    flex-grow: 1;
    font-weight: 500;
}

.upsell-banner p strong {
    display: block;
    font-size: 1.1rem;
}

/* --- Mejoras a la Lista de Actividad --- */
.activity-list li {
    align-items: flex-start; /* Alinea los items al inicio para mejor lectura */
}

.activity-list li i {
    margin-top: 5px; /* Centra verticalmente el ícono con el texto principal */
}

.activity-list li p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Evita que descripciones largas rompan el layout */
    max-width: 300px; /* Ajusta según sea necesario */
}

.activity-list li small {
    margin-left: auto; /* Empuja la hora a la derecha */
    flex-shrink: 0;
    padding-left: var(--spacing-4);
}

/* --- Estado Vacío Mejorado para las listas --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8) 0;
    text-align: center;
    min-height: 150px; /* Asegura un alto mínimo */
    opacity: 0.7;
}

/* Estilo para el enlace de "Cambiar de Vista" */
.sidebar-switch-view {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-radius: var(--border-radius-soft);
    background-color: var(--color-background);
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
}

.sidebar-switch-view:hover {
    background-color: var(--color-border);
    color: var(--color-primary);
}

.sidebar-switch-view i {
    transition: transform 0.2s ease-in-out;
}

.sidebar-switch-view:hover i {
    transform: translateX(-3px);
}




/* ==========================================================================
   7. Responsive Media Queries
   ========================================================================== */

/* This rule will be used to hide the mobile menu toggle on large screens */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text);
}


/* --- Tablet View (e.g., iPads, smaller laptops) --- */
/* This breakpoint targets screens up to 992px wide. */
@media (max-width: 992px) {

    /* Make two-column layouts stack into a single column */
    .grid-container,
    .profile-body {
        grid-template-columns: 1fr;
    }

    /* Adjust padding for a bit more space */
    .container {
        padding: 0 var(--spacing-4);
    }

    .dashboard-content {
        padding: var(--spacing-6);
    }
}


/* --- Mobile View (e.g., iPhones, Android phones) --- */
/* This breakpoint targets screens up to 768px wide. */
@media (max-width: 768px) {

    /* --- Dashboard Layout --- */
    .dashboard-layout {
        position: relative;
        /* Needed for absolute positioning of sidebar */
        overflow-x: hidden;
        /* Prevents horizontal scroll when sidebar is out */
    }

    /* Hide the sidebar off-screen to the left */
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: var(--shadow-lg);
    }

    /* The class 'is-open' (added by JS) will slide the sidebar into view */
    .sidebar.is-open {
        transform: translateX(0);
    }

    /* Show the mobile menu button */
    .mobile-menu-toggle {
        display: block;
    }

    .dashboard-main-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
    }

    /* --- General Layouts & Grids --- */
    /* Make all grids stack into a single column */
    .overview-stats-grid,
    .commerce-grid,
    .winners-grid,
    .raffle-ticket-grid {
        grid-template-columns: 1fr;
    }


    /* --- Component-Specific Adjustments --- */
    /* Stack the search area on the Find page */
    .hero-search-card .search-area {
        flex-direction: column;
        align-items: stretch;
        /* Make items full-width */
    }

    .search-area .slug-search {
        width: 100%;
    }

    /* Stack the public profile header */
    .profile-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-header-info h1 {
        font-size: 1.8rem;
    }

    .profile-actions {
        flex-direction: column;
        width: 100%;
    }

    .profile-actions .btn {
        width: 100%;
    }

    /* Adjust font sizes */
    h1,
    .hero-description h2 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

/* --- Profile Page Specifics --- */
.profile-upload-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.form-actions-footer {
    margin-top: var(--spacing-8);
    display: flex;
    justify-content: flex-end;
}






/* Contenedor principal de dos columnas */
.profile-body {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Columna principal 2x más ancha que la sidebar */
    gap: var(--spacing-8);
    align-items: flex-start; /* Alinea los items al inicio de la celda */
}

/* Slogan del comercio en el header */
.profile-slogan {
    font-size: 1.1rem;
    color: white;
    opacity: 0.9;
    font-weight: 400;
    margin-top: var(--spacing-2);
}

/* Sidebar de información (columna derecha) */
.profile-sidebar {
    position: sticky; /* Hace que la sidebar se quede fija al hacer scroll */
    top: var(--spacing-8);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* Tarjeta de información dentro de la sidebar */
.info-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}

.info-card h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    color: var(--color-text);
}

.info-card h4 i {
    color: var(--color-primary);
}

/* Listas de horarios y amenidades */
.hours-list, .amenities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    font-size: 0.9rem;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
}

.hours-list li span:first-child {
    font-weight: var(--font-weight-medium);
}

.amenities-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.amenities-list li i {
    color: var(--color-accent-green);
}

/* Contenido de las reseñas */
.review-content {
    flex-grow: 1;
}
.review-content .profile-rating {
    margin: var(--spacing-2) 0;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 992px) {
    .profile-body {
        grid-template-columns: 1fr; /* En tablets y móviles, las columnas se apilan */
    }

    .profile-sidebar {
        position: static; /* La sidebar deja de ser pegajosa */
    }
}

/* ==========================================================================
   PÁGINA DE CREACIÓN DE ORDEN (CATÁLOGO PÚBLICO)
   ========================================================================== */

.order-creation-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Layout de 2/3 y 1/3 */
    gap: var(--spacing-8);
    align-items: flex-start;
}

.catalog-item-selectable {
    display: block;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-soft);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.catalog-item-selectable:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.catalog-item-selectable:has(input:checked) {
    border-color: var(--color-primary);
    background-color: #eef4ff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.catalog-item-selectable input[type=checkbox] {
    display: none;
}

.catalog-item-selectable .item-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.catalog-item-selectable .item-content img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.catalog-item-selectable .item-options {
    display: none;
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--spacing-6);
}

.catalog-item-selectable:has(input:checked) .item-options {
    display: flex;
}

.item-options .form-group {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.form-control-sm {
    padding: var(--spacing-2);
    font-size: 0.9rem;
    width: 80px; /* Ancho fijo para el input de cantidad */
}
.item-options input[type="text"].form-control-sm {
    width: 150px;
}

/* Responsive para la página de orden */
@media (max-width: 992px) {
    .order-creation-layout {
        grid-template-columns: 1fr;
    }
    .order-summary-panel {
        /* En móvil, el resumen se mueve al final */
        grid-row: 2;
    }
}

.order-detail-header {
            padding-bottom: var(--spacing-4);
            margin-bottom: var(--spacing-6);
        }
        .order-detail-header .header-main-info {
            display: flex;
            align-items: center;
            gap: var(--spacing-4);
            margin-bottom: var(--spacing-2);
        }
        .order-detail-header .header-main-info h2 {
            margin: 0;
        }
        .order-detail-header .header-meta-info {
            display: flex;
            gap: var(--spacing-3);
            font-size: 0.9em;
        }
        .item-options-summary {
            font-size: 0.9em;
            color: var(--color-secondary);
            padding-left: var(--spacing-6) !important;
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
        }
        .item-options-summary i {
            transform: rotate(90deg);
        }
        .action-buttons-group {
            display: flex;
            gap: var(--spacing-3);
            margin-top: 1rem;
        }
        .action-buttons-group form {
            margin: 0;
        }

        .status-timeline {
            display: flex;
            flex-direction: column-reverse; /* Empezar de abajo hacia arriba */
            gap: var(--spacing-2);
            padding: var(--spacing-4) 0;
        }
        .timeline-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-4);
            padding-left: 20px;
            position: relative;
            border-left: 3px solid var(--color-border);
        }
        .timeline-item.completed {
            border-left-color: var(--color-accent-green);
        }
        .timeline-item .timeline-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: -21.5px;
            background-color: var(--color-background);
        }
        .timeline-item.pending .timeline-icon {
            background-color: var(--color-border);
            color: var(--color-secondary);
        }
        .timeline-item.completed .timeline-icon {
            background-color: var(--color-accent-green);
            color: white;
        }
        .timeline-item.completed span {
            font-weight: var(--font-weight-semibold);
        }
        .timeline-item.pending span {
            color: var(--color-secondary);
        }
        .chat-message.system p {
            background-color: var(--color-background);
            font-style: italic;
            text-align: center;
            color: var(--color-secondary);
            font-size: 0.9em;
            width: 100%;
        }
        .chat-message.system {
            margin-left: 0; /* Centrar los mensajes de sistema */
        }
        .modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: #fff; margin: 15% auto; padding: 2rem; border-radius: 8px; max-width: 500px; }
        .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }

        /* ==========================================================================
   ESTILOS MEJORADOS PARA EL CHAT DE ÓRDENES
   ========================================================================== */

/* Estilo base para todos los mensajes */
.chat-message {
    max-width: 80%;
    margin-bottom: var(--spacing-4);
    display: flex;
    flex-direction: column;
}

.chat-message p {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-medium);
    margin: 0;
    line-height: 1.5;
}

.chat-timestamp {
    font-size: 0.75rem;
    color: var(--color-secondary);
    padding: var(--spacing-1) var(--spacing-2);
}

/* 
   ==================================================================
   AQUÍ ESTÁ LA LÓGICA DE LOS COLORES
   ==================================================================
*/

/* MENSAJES DEL CLIENTE ("them" desde la perspectiva del comercio, "me" desde la del cliente) */
/* Fondo gris, letras azules */
.chat-message.them p {
    background-color: var(--color-border);
    color: var(--color-primary-dark);
}

/* Se alinea a la izquierda */
.chat-message.them {
    align-items: flex-start;
}

/* MENSAJES DEL COMERCIO ("me" desde la perspectiva del comercio, "them" desde la del cliente) */
/* Fondo azul, letras blancas */
.chat-message.me p {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Se alinea a la derecha */
.chat-message.me {
    margin-left: auto;
    align-items: flex-end;
}
.chat-message.me .chat-timestamp {
    text-align: right;
}

/* Mensajes de sistema */
.chat-message.system p {
    background-color: transparent;
    font-style: italic;
    text-align: center;
    color: var(--color-secondary);
    font-size: 0.9em;
    width: 100%;
    padding: var(--spacing-2) 0;
}
.chat-message.system {
    width: 100%;
    max-width: 100%;
    align-items: center;
}

/* ==========================================================================
   End of Buzzon Stylesheet
   ========================================================================== */