/* =================== */
/* CSS Variables        */
/* =================== */
:root {
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #dbeafe;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #ef4444;
    --warning-color: #ffc107;
    --background-color: #f5f5f7;
    --card-background: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --border-color: #d2d2d7;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Breakpoints (for reference) */
    /* Mobile + Tablet Portrait: <= 768px (hamburger menu) */
    /* Tablet Landscape: 769px - 991px (horizontal nav) */
    /* Desktop: >= 992px (full layout) */
}

/* =================== */
/* Base Styles          */
/* =================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--background-color) 100%);
    background-attachment: fixed;
    min-height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: transparent;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
}

.hidden {
    display: none !important;
}

/* Pending merchant restrictions - hide merchant-only elements */
body.merchant-pending .merchant-only {
    display: none !important;
}

/* =================== */
/* Typography           */
/* =================== */
h1 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

/* Tablet and up */
@media (min-width: 576px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
}

/* Desktop */
@media (min-width: 992px) {
    h1 { font-size: 2.25rem; }
}

/* =================== */
/* Buttons              */
/* =================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 48px; /* Touch-friendly */
}

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

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: #f0f0f0;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: #e0e0e0;
    color: var(--text-primary);
}

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

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

.btn-outline-dark {
    background-color: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--text-primary);
}

.btn-outline-dark:hover {
    background-color: var(--text-primary);
    color: #ffffff;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-success {
    background-color: #10b981;
    color: white;
    border: 1px solid #10b981;
}

.btn-success:hover {
    background-color: #059669;
    border-color: #047857;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
    min-height: 36px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.125rem;
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* =================== */
/* Forms                */
/* =================== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.optional-hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Info Icon with Tooltip */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: var(--spacing-xs);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}

.info-icon svg {
    width: 16px;
    height: 16px;
}

.info-icon:hover,
.info-icon:focus {
    color: var(--primary-color);
}

/* Tooltip */
.tooltip {
    position: fixed;
    background: var(--text-primary);
    color: var(--card-background);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    font-weight: 400;
    max-width: 250px;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--card-background);
    min-height: 48px; /* Touch-friendly */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-group input::placeholder {
    color: var(--text-secondary);
}

.form-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

/* Address Search with Google Places Autocomplete */
.address-search-wrapper {
    position: relative;
}

.address-search-wrapper input {
    padding-right: 40px;
}

/* Style the PlaceAutocompleteElement to match form inputs */
gmp-place-autocomplete {
    width: 100%;
}

gmp-place-autocomplete::part(input) {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--card-background);
    min-height: 48px;
    color: var(--text-primary);
}

gmp-place-autocomplete::part(input):focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

gmp-place-autocomplete::part(input)::placeholder {
    color: var(--text-secondary);
}

.address-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    pointer-events: none;
}

.address-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-light);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    margin-bottom: var(--spacing-sm);
}

.address-display-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.address-pin-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
}

#location-address-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.address-clear-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.address-clear-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* Google Places Autocomplete Dropdown Styling */
.pac-container {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    margin-top: 4px;
    font-family: inherit;
}

.pac-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9375rem;
    border-top: 1px solid var(--border-color);
}

.pac-item:first-child {
    border-top: none;
}

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

.pac-item-selected {
    background: var(--primary-light);
}

.pac-icon {
    margin-right: 12px;
}

.pac-item-query {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.pac-matched {
    font-weight: 600;
}

/* OTP Input Group - 6 Digit Boxes */
.otp-input-group {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.otp-digit:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.otp-digit.filled {
    border-color: var(--success-color);
    background: rgba(52, 199, 89, 0.05);
}

.otp-digit.error {
    border-color: var(--danger-color);
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Mobile: Smaller digit boxes */
@media (max-width: 400px) {
    .otp-digit {
        width: 40px;
        height: 48px;
        font-size: 1.25rem;
    }

    .otp-input-group {
        gap: 6px;
    }
}

/* =================== */
/* Auth Container       */
/* =================== */
#auth-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--background-color) 100%);
}

.auth-card {
    background: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

/* Tablet and up */
@media (min-width: 576px) {
    .auth-card {
        padding: var(--spacing-xl);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .auth-card {
        padding: var(--spacing-2xl);
    }
}

.auth-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin: 0 auto var(--spacing-lg);
    display: block;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.auth-card h1 {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.auth-card .subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    font-size: 1rem;
}

.auth-card .btn {
    width: 100%;
    margin-top: var(--spacing-sm);
}

.auth-card .btn + .btn {
    margin-top: var(--spacing-md);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Error/Success Messages */
.message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
    font-size: 0.9375rem;
}

.message-error {
    color: var(--danger-color);
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.message-success {
    color: var(--success-color);
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.message-info {
    color: var(--primary-color);
    background-color: var(--primary-light);
    border: 1px solid #b6d4fe;
}

/* Legacy support */
.error-message {
    color: var(--danger-color);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #f8d7da;
    border-radius: var(--border-radius-sm);
}

/* =================== */
/* Sidebar Navigation   */
/* =================== */

/* App Layout Container */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* Mobile Header (hidden on desktop) */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    align-items: center;
    padding: 0 var(--spacing-md);
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

.sidebar-toggle:hover {
    background: var(--background-color);
}

.mobile-header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.mobile-header-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.mobile-header-brand span {
    font-family: 'Baloo Thambi 2', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #156CAF;
}

.mobile-header-spacer {
    flex: 1;
}

/* Sidebar Overlay (mobile drawer backdrop) */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--card-background);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    overflow-y: auto;
}

/* Sidebar Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 60px;
    padding: 0 var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.sidebar-brand-text {
    font-family: 'Baloo Thambi 2', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #156CAF;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: var(--spacing-md) 0;
    overflow-y: auto;
}

.sidebar-nav-section {
    padding: 0 var(--spacing-sm);
}

.sidebar-nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-md) var(--spacing-lg);
}

/* Sidebar Links */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 2px 0;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.15s ease;
}

.sidebar-link:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

.sidebar-link.active {
    background: var(--primary-color);
    color: white;
}

.sidebar-link.active .sidebar-icon {
    color: white;
    fill: white;
}

.sidebar-link.active .sidebar-icon path {
    fill: white;
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.sidebar-link:hover .sidebar-icon {
    color: var(--text-primary);
}

.sidebar-link-text {
    white-space: nowrap;
}

/* Sidebar Admin Link */
.sidebar-link-admin {
    color: var(--primary-color);
}

.sidebar-link-admin .sidebar-icon {
    color: var(--primary-color);
}

.sidebar-link-admin:hover {
    background: rgba(0, 122, 255, 0.1);
    color: var(--primary-color);
}

.sidebar-link-admin:hover .sidebar-icon {
    color: var(--primary-color);
}

.sidebar-link-admin.active {
    background: var(--primary-color);
    color: white;
}

.sidebar-link-admin.active .sidebar-icon {
    color: white;
}

/* Sidebar User Section */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background: var(--background-color);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-user-avatar svg {
    width: 20px;
    height: 20px;
    color: white;
}

.sidebar-user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-email {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-logout-btn:hover {
    background: var(--card-background);
    color: var(--danger-color);
}

/* Main Content with Sidebar */
.app-layout .main-content {
    flex: 1;
    margin-left: 260px;
    min-height: 100vh;
    background: var(--background-color);
    padding: var(--spacing-lg);
}

/* Responsive: Tablet and Mobile */
@media (max-width: 1023px) {
    .mobile-header {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .app-layout .main-content {
        margin-left: 0;
        padding: 16px;
        padding-top: 60px;
        padding-right: 16px;
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

/* =================== */
/* Old Navbar (Legacy) - Hidden, replaced by sidebar */
/* =================== */
.navbar {
    display: none !important;
    background: var(--card-background);
    padding: var(--spacing-md) var(--spacing-lg);
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Tablet Landscape and up */
@media (min-width: 769px) {
    .navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .navbar {
        padding: var(--spacing-md) var(--spacing-xl);
    }
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}

.nav-brand h2 {
    font-family: 'Baloo Thambi 2', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #156CAF;
}

.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.5rem;
}

/* Hide toggle on tablet landscape and up */
@media (min-width: 769px) {
    .nav-toggle {
        display: none;
    }
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

.nav-menu.active {
    max-height: 500px;
    opacity: 1;
    margin-top: var(--spacing-sm);
    transition: max-height 0.3s ease-in, opacity 0.2s ease-in, margin-top 0.3s ease-in;
}

/* Tablet Landscape and up - always show nav */
@media (min-width: 769px) {
    .nav-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

@media (min-width: 769px) {
    .nav-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
}

.nav-link {
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    font-weight: 500;
    display: block;
}

.nav-link:hover {
    background-color: var(--background-color);
    color: var(--text-primary);
}

.nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

.nav-user {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

@media (min-width: 769px) {
    .nav-user {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
        padding-top: 0;
        border-top: none;
        margin-left: auto;
    }
}

.nav-user span {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Profile Menu - Desktop/Tablet only */
.profile-menu {
    display: none;
    position: relative;
}

@media (min-width: 769px) {
    .profile-menu {
        display: block;
    }
}

.profile-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--background-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.profile-btn:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.profile-btn:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.profile-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

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

/* Profile Tooltip (hover) */
.profile-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--text-primary);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 200;
}

.profile-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--text-primary);
}

.profile-btn:hover + .profile-tooltip,
.profile-tooltip:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hide tooltip when dropdown is open */
.profile-menu.dropdown-open .profile-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Profile Dropdown (click) */
.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-sm);
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 300;
    overflow: hidden;
}

.profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-avatar svg {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
}

.dropdown-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dropdown-email {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9375rem;
    word-break: break-all;
}

.dropdown-role {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dropdown-role-container {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.dropdown-role-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.dropdown-role-info-btn:hover {
    color: var(--primary-color);
    background: rgba(21, 108, 175, 0.1);
}

.dropdown-role-info-btn svg {
    width: 14px;
    height: 14px;
}

.dropdown-role-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    animation: tooltipFadeIn 0.15s ease-out;
}

.dropdown-role-tooltip.hidden {
    display: none;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-role-tooltip-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-role-tooltip-content {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

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

.dropdown-item svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.dropdown-logout {
    color: var(--danger-color);
}

.dropdown-logout svg {
    color: var(--danger-color);
}

.dropdown-logout:hover {
    background: #fef2f2;
}

/* Mobile user info - show only on mobile */
.mobile-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

@media (min-width: 769px) {
    .mobile-user-info {
        display: none;
    }
}

/* =================== */
/* Main Content         */
/* =================== */
.main-content {
    padding: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .main-content {
        padding: var(--spacing-lg);
    }
}

@media (min-width: 992px) {
    .main-content {
        padding: var(--spacing-xl);
    }
}

.page {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-header {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.page-header h1 {
    margin-bottom: var(--spacing-xs);
}

.page-header p {
    color: var(--text-secondary);
}

.page-header h1 + p {
    font-weight: 500;
}

/* =================== */
/* Cards                */
/* =================== */
.card {
    background: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Dashboard Cards */
.dashboard-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 576px) {
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 992px) {
    .dashboard-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {
    text-align: center;
    padding: var(--spacing-lg);
}

.stat-card h3 {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

@media (min-width: 576px) {
    .stat-card .stat-value {
        font-size: 3rem;
    }
}

/* =================== */
/* Lists                */
/* =================== */
.list {
    list-style: none;
}

.list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

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

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

/* =================== */
/* Empty State          */
/* =================== */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

/* =================== */
/* Loading Overlay      */
/* =================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    z-index: 1000;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =================== */
/* Utility Classes      */
/* =================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }

/* =================== */
/* Back Link            */
/* =================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: var(--spacing-md);
}

.back-link:hover {
    text-decoration: underline;
}

/* =================== */
/* Resend Link          */
/* =================== */
.resend-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.resend-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.resend-link:hover {
    text-decoration: underline;
}

.resend-link:disabled,
.resend-link.disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* =================== */
/* Timer                */
/* =================== */
.timer {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.timer-value {
    font-weight: 600;
    color: var(--primary-color);
}

/* =================== */
/* Toast Notifications  */
/* =================== */
.toast {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    background: var(--text-primary);
    color: white;
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    opacity: 0;
    transition: all 0.3s ease;
    max-width: calc(100vw - 32px);
    text-align: center;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

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

.toast-error {
    background: var(--danger-color);
}

.toast-info {
    background: var(--primary-color);
}

.toast-warning {
    background: var(--warning-color);
    color: var(--text-primary);
}

/* =================== */
/* Profile Page         */
/* =================== */
#profile-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

#profile-form-container .card {
    margin-bottom: 0;
}

#profile-form-container .card-header {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

#profile-form-container .card-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.card-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.card-body {
    padding: 0;
}

/* Form Rows */
.form-row {
    margin-bottom: var(--spacing-lg);
}

.form-row:last-child {
    margin-bottom: 0;
}

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

@media (min-width: 576px) {
    .form-row.two-col {
        grid-template-columns: 1fr 1fr;
    }
}

.form-row.two-col .form-group {
    margin-bottom: 0;
}

/* Textarea styling */
#profile-form-container textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

/* Readonly inputs */
#profile-form-container input[readonly],
#profile-form-container select[disabled] {
    background-color: var(--background-color);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 1;
}

/* Form hint below input */
#profile-form-container .form-hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

@media (min-width: 576px) {
    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-item {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--border-radius-sm);
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.stat-badge.approved {
    background: #d4edda;
    color: var(--success-color);
}

.stat-badge.pending {
    background: #fff3cd;
    color: #856404;
}

.stat-badge.disabled {
    background: #f8d7da;
    color: var(--danger-color);
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.form-actions .btn {
    min-width: 150px;
}

@media (min-width: 576px) {
    .form-actions {
        flex-direction: column;
        align-items: center;
    }

    .form-actions .btn {
        min-width: 300px;
    }
}

/* Save Status */
.save-status {
    font-size: 0.9375rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
}

.save-status.saving {
    color: var(--text-secondary);
}

.save-status.success {
    color: var(--success-color);
    background: #d4edda;
}

.save-status.error {
    color: var(--danger-color);
    background: #f8d7da;
}

/* Select styling */
#profile-form-container select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Tags Container */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    min-height: 40px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-primary);
    user-select: none;
}

.tag-chip:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.tag-chip.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.tag-chip.selected:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Read-only tags (no interaction) */
.tag-chip.readonly {
    cursor: default;
    pointer-events: none;
}

.tag-chip.readonly:hover {
    border-color: var(--border-color);
    background: var(--background-color);
}

.tag-chip.readonly.selected:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.tag-chip .tag-check {
    width: 14px;
    height: 14px;
    display: none;
}

.tag-chip.selected .tag-check {
    display: inline-block;
}

.tags-empty {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

/* =================== */
/* Locations Page       */
/* =================== */

/* Page Header with Action Button */
.page-header {
    position: relative;
}

.page-header-action {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

@media (max-width: 576px) {
    .page-header-action {
        position: static;
        margin-top: var(--spacing-md);
        width: 100%;
    }
}

/* Locations Grid */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

/* Location Card */
.location-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.location-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.location-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.location-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.location-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-card-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.location-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.location-card-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.location-card-row svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.location-card-hours {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--spacing-md);
}

.location-card-hours-col {
    flex: 1;
}

.location-card-hours-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.location-hours-status {
    font-size: 0.875rem;
    font-weight: 500;
}

.location-hours-status.open {
    color: var(--success-color);
}

.location-hours-status.closed {
    color: var(--danger-color);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.modal.hidden {
    display: none;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: modalOverlayFadeIn 0.25s ease forwards;
}

@keyframes modalOverlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    position: relative;
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalContentFadeIn 0.25s ease forwards;
}

@keyframes modalContentFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-content.modal-sm {
    max-width: 400px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.deal-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid currentColor;
}

.deal-status-badge.badge-active {
    color: var(--success-color);
}

.deal-status-badge.badge-archived {
    color: var(--text-secondary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

.modal-close:hover {
    background: var(--background-color);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    box-sizing: border-box;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    gap: var(--spacing-md);
}

.modal-footer-right {
    display: flex;
    gap: var(--spacing-md);
    margin-left: auto;
}

.modal-progress-cover {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    z-index: 10;
    border-radius: var(--border-radius);
}

.modal-progress-cover p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.modal-footer--column {
    flex-direction: column;
    align-items: stretch;
}

.modal-footer--column .modal-footer-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.billing-consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.4;
    margin-top: var(--spacing-md);
}

.billing-consent-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* ─── Billing Info Modal ─────────────────────────────────────────────────── */

.form-hint-inline {
    font-size: 0.8125rem;
    color: var(--text-tertiary, var(--text-secondary));
    font-weight: 400;
}

/* ─── Payment Summary – Tax Breakdown ────────────────────────────────────── */

.payment-summary-row.payment-subtotal {
    color: var(--text-secondary);
}

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

/* Campaign Modal Footer - stack buttons on mobile */
@media (max-width: 576px) {
    #campaign-modal .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #campaign-modal .modal-footer > button,
    #campaign-modal .modal-footer-right {
        width: 100%;
        margin: 0;
    }

    #campaign-modal .modal-footer-right {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #campaign-modal .modal-footer-right .btn {
        width: 100%;
    }
}

/* Deal Modal Footer - stack buttons on mobile */
@media (max-width: 576px) {
    #deal-modal .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #deal-modal .modal-footer-right {
        display: contents; /* Flatten container so order works on all buttons */
    }

    #deal-modal .modal-footer > button,
    #deal-modal .modal-footer-right > button {
        width: 100%;
    }

    #deal-modal .modal-footer #deal-delete-btn {
        order: 1; /* Delete at top - away from accidental taps */
    }

    #deal-modal .modal-footer #deal-cancel-btn {
        order: 2; /* Cancel in middle */
    }

    #deal-modal .modal-footer #deal-save-btn {
        order: 3; /* Save at bottom - primary action, easy thumb reach */
    }
}

@media (max-width: 576px) {
    #location-modal .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #location-modal .modal-footer-right {
        display: contents;
    }

    #location-modal .modal-footer > button,
    #location-modal .modal-footer-right > button {
        width: 100%;
    }

    #location-modal .modal-footer #location-delete-btn { order: 1; }
    #location-modal .modal-footer #location-cancel-btn { order: 2; }
    #location-modal .modal-footer #location-save-btn { order: 3; }
}

/* Gallery Edit Modal Footer - stack buttons on mobile */
@media (max-width: 576px) {
    #gallery-edit-modal .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #gallery-edit-modal .modal-footer-right {
        display: contents;
    }

    #gallery-edit-modal .modal-footer > button,
    #gallery-edit-modal .modal-footer-right > button {
        width: 100%;
    }

    #gallery-edit-modal .modal-footer #gallery-delete-btn { order: 1; }
    #gallery-edit-modal .modal-footer #gallery-edit-cancel-btn { order: 2; }
    #gallery-edit-modal .modal-footer #gallery-edit-save-btn { order: 3; }
}

/* Campaign Detail Modal Footer - full-width button on mobile */
@media (max-width: 576px) {
    #campaign-detail-modal .modal-footer > button {
        width: 100%;
    }
}

/* Form Sections */
.form-section {
    margin-bottom: var(--spacing-xl);
}

.form-section:last-child {
    margin-bottom: 0;
}

.form-section h3,
.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
}

.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-section-header h3 {
    margin: 0;
}

.form-section-header .link-btn {
    font-size: 0.875rem;
}

/* Phone Input Group */
.phone-input-group {
    display: flex;
    align-items: center;
    gap: 0;
}

.phone-input-group .phone-code {
    padding: 10px 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    white-space: nowrap;
}

.phone-input-group input {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    flex: 1;
}

/* Subcategory Tags */
.subcategory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.subcategory-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.subcategory-tag:hover {
    border-color: var(--primary-color);
}

.subcategory-tag.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.subcategory-tag .tag-check {
    font-size: 12px;
}

/* Success Icon */
.success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    background: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

/* Terms Links */
.terms-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.terms-links .link-btn {
    text-align: center;
}

/* Modal Footer Stack */
.modal-footer-stack {
    flex-direction: column;
    gap: var(--spacing-sm);
}

.modal-footer-stack .btn {
    margin: 0;
}

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

.hours-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

@media (max-width: 576px) {
    .hours-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

.day-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    min-width: 120px;
}

.day-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.day-name {
    font-weight: 500;
    color: var(--text-primary);
}

.hours-24-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.hours-24-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.hours-24-toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.hours-24-toggle input[type="checkbox"]:checked + span {
    color: var(--primary-color);
    font-weight: 500;
}

.hours-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.time-select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--card-background);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 110px;
}

.time-select:disabled {
    background: var(--background-color);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.time-separator {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Delete Button */
.btn-danger {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* =================== */
/* Photo Gallery        */
/* =================== */

/* Gallery Search */
.gallery-search-container {
    margin-bottom: var(--spacing-lg);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    background: var(--card-background);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--background-color);
    color: var(--text-secondary);
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.search-clear:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.search-results-text {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.gallery-card.search-hidden,
.deal-picker-item.search-hidden {
    display: none;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

@media (min-width: 576px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (min-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.gallery-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.gallery-card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--background-color);
}

.gallery-card-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
}

.gallery-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-card-image.loaded {
    opacity: 1;
}

.gallery-card-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.gallery-card-label {
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card-date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

/* Upload Dropzone */
.upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-2xl);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    margin-bottom: var(--spacing-lg);
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.dropzone-content svg {
    color: var(--text-secondary);
}

.dropzone-content p {
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.dropzone-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.upload-preview {
    position: relative;
    width: 100%;
}

.upload-preview img {
    width: 100%;
    border-radius: var(--border-radius-sm);
    display: block;
}

/* Reduce padding when showing preview to maximize image size */
.upload-dropzone:has(.upload-preview:not(.hidden)) {
    padding: var(--spacing-md);
}

.preview-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--danger-color);
    color: white;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    padding-bottom: 2px;
}

.preview-remove:hover {
    transform: scale(1.1);
}

/* Upload Progress */
.upload-progress {
    margin-top: var(--spacing-md);
}

.progress-bar {
    height: 8px;
    background: var(--background-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-sm);
    text-align: center;
}

/* Image Cropper - 3 Layer System */
/* Layer 0: Workspace (static stage) */
.cropper-workspace {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    background: #1a1a1a;
    border-radius: var(--radius-md);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Layer 1: Image (movable/zoomable) */
#cropper-image {
    position: absolute;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    will-change: transform;
}

/* Dark overlay masks (positioned dynamically around crop frame) */
.cropper-mask {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Layer 2: Fixed crop frame (16:9) */
.cropper-frame {
    position: absolute;
    border: 2px solid #fff;
    box-sizing: border-box;
    pointer-events: none;
    /* Centered horizontally, positioned dynamically vertically */
}

.cropper-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 33.33% 33.33%;
}

.cropper-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

/* Mobile Cropper */
@media (max-width: 576px) {
    .modal-content.modal-lg {
        max-width: calc(100% - 32px);
        margin: 16px;
    }

    .cropper-workspace {
        height: 50vh;
    }

    .cropper-hint {
        font-size: var(--font-xs);
    }
}

/* Edit Photo Preview */
.edit-preview {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.edit-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--border-radius-sm);
}

/* =================== */
/* Team Management      */
/* =================== */
.team-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.team-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.team-card.disabled {
    opacity: 0.6;
}

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-avatar svg {
    width: 28px;
    height: 28px;
}

.member-avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-avatar-lg svg {
    width: 40px;
    height: 40px;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-job {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
}

.member-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

/* Role Badges */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-owner {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
}

.role-admin {
    background: var(--primary-color);
    color: white;
}

.role-user {
    background: var(--success-color);
    color: white;
}

.role-editor {
    background: #6f42c1;
    color: white;
}

.role-viewer {
    background: var(--text-secondary);
    color: white;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-active {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.status-disabled {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.status-pending {
    background: rgba(255, 193, 7, 0.1);
    color: #d39e00;
}

/* Member Header in Edit Modal */
.member-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.member-header-info h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.25rem;
}

.member-header-info p {
    margin: 0;
    color: var(--text-secondary);
}

/* Status Toggle */
.status-toggle {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.toggle-text {
    font-weight: 500;
    color: var(--text-primary);
}

.status-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Role Info Card */
.role-info-card {
    margin-top: var(--spacing-lg);
}

.role-info-card .card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.role-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.role-item p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Responsive Team Card */
@media (max-width: 576px) {
    .team-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .member-meta {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
    }

    .member-header {
        flex-direction: column;
        text-align: center;
    }
}

/* =================== */
/* Deal Management      */
/* =================== */

/* Deal Filters */
.deal-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    /* Extend scroll area so last item doesn't clip at edge */
    margin-right: calc(-1 * var(--spacing-md));
    padding-right: var(--spacing-md);
}

@media (min-width: 576px) {
    .deal-filters {
        margin-right: calc(-1 * var(--spacing-lg));
        padding-right: var(--spacing-lg);
    }
}

.filter-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-background);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.filter-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.filter-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Deals Grid */
.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

@media (min-width: 992px) {
    .deals-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

/* Deals List (Simple List View) */
.deals-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.deal-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s ease;
}

.deal-list-item:hover {
    box-shadow: var(--shadow-md);
}

.deal-list-item--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.deal-list-item--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23999' stroke-width='3' fill='none' stroke-dasharray='31.4' stroke-dashoffset='10' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
}

.deal-list-item-image {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    background: var(--background-color);
}

.deal-list-item-content {
    flex: 1;
    min-width: 0;
}

.deal-list-item-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deal-list-item-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deal-list-item-actions {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.deal-list-item-lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.deal-list-item-lock-icon svg {
    width: 16px;
    height: 16px;
}

.deal-list-item-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.deal-list-item-menu-btn:hover,
.deal-list-item-menu-btn:focus {
    background: var(--background-color);
    color: var(--text-primary);
}

.deal-list-item-menu-btn svg {
    width: 20px;
    height: 20px;
}

/* Deal List Item Dropdown Menu */
.deal-list-item-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    background: var(--card-background);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.deal-list-item-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    white-space: nowrap;
    background: none;
    border: none;
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

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

.deal-list-item-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.deal-list-item-dropdown-item--danger {
    color: var(--danger-color);
}

.deal-list-item-dropdown-item--danger svg {
    color: var(--danger-color);
}

.deal-list-item-dropdown-item--danger:hover {
    background: #fff0f0;
}

/* =================== */
/* Campaign Management  */
/* =================== */

/* Campaign Filters */
.campaign-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    margin-right: calc(-1 * var(--spacing-md));
    padding-right: var(--spacing-md);
}

@media (min-width: 576px) {
    .campaign-filters {
        margin-right: calc(-1 * var(--spacing-lg));
        padding-right: var(--spacing-lg);
    }
}

/* Deal Filters Bar (wraps filter tabs + locked info label) */
.deal-filters-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.deal-filters-bar .deal-filters {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

/* Locked Deals Info Label */
.deal-locked-info {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: default;
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.deal-locked-info svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.deal-locked-info-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--text-primary);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    z-index: 100;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    white-space: normal;
}

.deal-locked-info:hover .deal-locked-info-tooltip {
    display: block;
}

/* Campaigns Grid */
.campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

@media (min-width: 1280px) {
    .campaigns-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

/* Campaign Card */
.campaign-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

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

.campaign-card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--background-color);
}

.campaign-card-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
}

.campaign-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.campaign-card-image.loaded {
    opacity: 1;
}

.campaign-card-body {
    padding: var(--spacing-md);
}

.campaign-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.campaign-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.campaign-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.campaign-card-dates {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.campaign-card-dates svg {
    width: 16px;
    height: 16px;
}

.campaign-card-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.campaign-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.campaign-stat svg {
    width: 18px;
    height: 18px;
}

.campaign-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

/* Campaign Detail Modal */
.campaign-detail-deal {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.campaign-detail-deal-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.campaign-detail-deal-info h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.campaign-detail-meta {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.campaign-detail-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--spacing-md);
    font-size: 0.9rem;
}

.campaign-detail-meta-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

/* Campaign Status Badges */
.campaign-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.campaign-status.pending {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
}

.campaign-status.active {
    background: rgba(40, 167, 69, 0.15);
    color: #155724;
}

.campaign-status.completed {
    background: rgba(108, 117, 125, 0.15);
    color: #495057;
}

.campaign-status.disabled {
    background: rgba(220, 53, 69, 0.15);
    color: #721c24;
}

/* Deal Card */
.deal-card {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.deal-card.archived {
    opacity: 0.7;
}

.deal-card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--background-color);
}

.deal-card-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
}

.deal-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.deal-card-image.loaded {
    opacity: 1;
}

.deal-card-body {
    padding: var(--spacing-md);
}

.deal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.deal-card-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deal-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.deal-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.deal-card-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Deal Status Badges */
.deal-status {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deal-status.draft {
    background: rgba(108, 117, 125, 0.1);
    color: var(--text-secondary);
}

.deal-status.pending {
    background: rgba(255, 193, 7, 0.1);
    color: #d39e00;
}

.deal-status.active {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.deal-status.completed {
    background: rgba(0, 122, 255, 0.1);
    color: var(--primary-color);
}

.deal-status.disabled {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.deal-status.archived {
    background: rgba(108, 117, 125, 0.2);
    color: var(--text-secondary);
}

/* Modal Large */
.modal-content.modal-lg {
    max-width: 700px;
}

/* Photo Selector */
.photo-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
}

.selected-photo {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16 / 9;
    background: var(--background-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.selected-photo:hover {
    border-color: var(--primary-color);
}

.selected-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-placeholder {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    text-align: center;
    padding: var(--spacing-md);
}

/* Character Count */
.char-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 400;
    float: right;
    transition: color 0.2s ease;
}

.char-count.over-limit {
    color: var(--danger-color);
    font-weight: 600;
}

/* Alert Box */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-lg);
}

.alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #856404;
}

.alert-warning strong {
    color: #6c5300;
}

#deal-locked-warning,
#deal-duplicate-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

.photo-selector--locked {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* Deal Picker (Campaign Form) */
.deal-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

/* Selected Deal Container - full width deal info, centered button */
#campaign-deal-selected {
    align-items: stretch; /* Override center alignment for full-width deal info */
}

#campaign-deal-selected .campaign-deal-info {
    width: 100%;
    max-width: none;
}

#campaign-deal-selected .btn {
    align-self: center; /* Center just the button */
}

.deal-picker h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
}

.deal-picker-field {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 400px;
    background: var(--background-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    margin-bottom: var(--spacing-md);
}

.deal-picker-field:hover {
    border-color: var(--primary-color);
}

.deal-picker-placeholder {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    text-align: center;
    padding: var(--spacing-md);
    margin: 0;
}

/* Deal Picker Modal Grid */
.deal-picker-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.deal-picker-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--card-background);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.deal-picker-item:hover {
    background: var(--background-color);
    border-color: var(--border-color);
}

.deal-picker-item.selected {
    border-color: var(--primary-color);
    background: rgba(25, 118, 210, 0.05);
}

.deal-picker-item-image {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    background: var(--background-color);
}

.deal-picker-item-content {
    flex: 1;
    min-width: 0;
}

.deal-picker-item-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deal-picker-item-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Campaign Deal Info */
.campaign-deal-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xl);
}

.campaign-deal-info img {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.campaign-deal-text {
    flex: 1;
    min-width: 0;
}

.campaign-deal-text h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1rem;
}

.campaign-deal-text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Campaign Locations Section - reduce bottom margin since it's last visible section */
#campaign-locations {
    margin-bottom: 0;
}

#campaign-form .form-section:has(#campaign-locations) {
    margin-bottom: var(--spacing-md);
}

#campaign-form .form-section:has(#campaign-locations) .form-hint {
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* Campaign Days Counter */
.campaign-days-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--border-radius-sm);
}

.campaign-days-counter .days-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.campaign-days-counter .days-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.campaign-days-counter .days-value.error {
    color: var(--danger-color);
}

/* Three Column Form Row */
.form-row.three-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 576px) {
    .form-row.three-col {
        grid-template-columns: repeat(3, 1fr);
    }
}

.form-row.three-col .form-group {
    margin-bottom: 0;
}

/* Input with Prefix */
.input-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix span {
    position: absolute;
    left: var(--spacing-md);
    color: var(--text-secondary);
    font-weight: 500;
}

.input-prefix input {
    padding-left: calc(var(--spacing-md) + 16px);
}

/* Location Checkboxes */
.location-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.location-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.location-checkbox:hover {
    background: var(--primary-light);
}

.location-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.location-checkbox-label {
    flex: 1;
}

.location-checkbox-name {
    font-weight: 500;
    color: var(--text-primary);
}

.location-checkbox-address {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Photo Picker Grid */
#photo-picker-grid .gallery-card {
    cursor: pointer;
}

#photo-picker-grid .gallery-card.selected {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Deal Stats in Card */
.deal-card-stats {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.deal-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.deal-stat svg {
    width: 14px;
    height: 14px;
}

/* =================== */
/* Admin Portal Styles */
/* =================== */

/* Admin Nav Link */
.nav-link-admin {
    color: var(--warning-color) !important;
    font-weight: 600;
}

.nav-link-admin.active {
    color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

/* Admin Stats Grid */
.admin-stats-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Admin Controls */
.admin-controls {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.admin-search {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.admin-search-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9375rem;
}

.admin-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.admin-filters {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Admin Merchants List */
.admin-merchants-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Admin Merchant Card */
.admin-merchant-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.merchant-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.merchant-initial {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
}

.merchant-card-info {
    flex: 1;
    min-width: 0;
}

.merchant-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merchant-card-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merchant-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.merchant-card-category {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.merchant-card-actions {
    flex-shrink: 0;
}

/* Merchant Status Badges */
.merchant-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.merchant-status-badge.status-pending,
.status-pending {
    background: var(--warning-color);
    color: #333;
}

.merchant-status-badge.status-approved,
.status-approved {
    background: var(--success-color);
    color: white;
}

.merchant-status-badge.status-suspended,
.status-suspended {
    background: var(--danger-color);
    color: white;
}

/* Admin Merchant Modal */
.admin-merchant-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.merchant-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.merchant-avatar-lg span {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-color);
}

.merchant-header-info h3 {
    margin-bottom: var(--spacing-xs);
}

.merchant-header-info p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Admin Merchant Details */
.admin-merchant-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 576px) {
    .admin-merchant-details {
        grid-template-columns: 1fr;
    }
}

.detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* Admin Merchant Sections */
.admin-merchant-section {
    margin-bottom: var(--spacing-lg);
}

.admin-merchant-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Admin Merchant Stats */
.admin-merchant-stats {
    display: flex;
    gap: var(--spacing-lg);
}

.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mini-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.mini-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Service Code Display */
.service-code-display {
    font-family: monospace;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--background-color);
    border-radius: var(--border-radius);
    letter-spacing: 0.2em;
    margin: var(--spacing-md) 0;
}

/* Warning Button */
.btn-warning {
    background-color: var(--warning-color);
    color: #333;
}

.btn-warning:hover {
    background-color: #e6a800;
}

/* =================== */
/* Skeleton Loading    */
/* =================== */

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--border-radius-sm);
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--spacing-sm);
}

.skeleton-text-sm {
    height: 0.75rem;
    width: 60%;
}

.skeleton-title {
    height: 1.5rem;
    width: 70%;
    margin-bottom: var(--spacing-md);
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    padding: var(--spacing-md);
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.skeleton-stat {
    height: 2.5rem;
    width: 60px;
    margin: 0 auto var(--spacing-sm);
}

.skeleton-image {
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-sm);
}

/* =================== */
/* Toast Notifications */
/* =================== */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--card-background);
    color: var(--text-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 360px;
}

.toast.show {
    transform: translateX(0);
}

.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast-error {
    border-left: 4px solid var(--danger-color);
}

.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast-info {
    border-left: 4px solid var(--primary-color);
}

.toast-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-success .toast-icon {
    color: var(--success-color);
}

.toast-error .toast-icon {
    color: var(--danger-color);
}

.toast-message {
    flex: 1;
    font-size: 0.9375rem;
}

@media (max-width: 576px) {
    .toast-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .toast {
        max-width: none;
    }
}

/* =================== */
/* Improved Form Validation */
/* =================== */

.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: var(--danger-color);
}

/* Note: Select validation is handled via .has-error class (set by JS after interaction) */

/* Note: Auto success borders removed - show validation feedback only after user interaction */

.form-error {
    color: var(--danger-color);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
    display: none;
}

.form-group.has-error .form-error {
    display: block;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: var(--danger-color);
}

/* Required field indicator */
.required::after {
    content: " *";
    color: var(--danger-color);
}

/* =================== */
/* Accessibility       */
/* =================== */

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: 1200;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
}

.skip-link:focus {
    left: var(--spacing-md);
    top: var(--spacing-md);
    width: auto;
    height: auto;
    overflow: visible;
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skeleton {
        animation: none;
        background: #e0e0e0;
    }
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =================== */
/* Image Lazy Loading  */
/* =================== */

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

.image-placeholder {
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

/* =================== */
/* Connection Status   */
/* =================== */

.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--danger-color);
    color: white;
    text-align: center;
    padding: var(--spacing-sm);
    font-size: 0.875rem;
    z-index: 1100;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.offline-banner.show {
    transform: translateY(0);
}

/* =================== */
/* Empty States Enhancement */
/* =================== */

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.empty-state h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-secondary);
    max-width: 320px;
    margin: 0 auto;
}

/* =================== */
/* Loading State        */
/* =================== */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-secondary);
}

.loading-state .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
    margin-bottom: var(--spacing-md);
}

.loading-state p {
    font-size: var(--font-sm);
    margin: 0;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.empty-state .btn {
    margin-top: var(--spacing-lg);
}

/* =================== */
/* Alert Improvements  */
/* =================== */

.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.alert-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.alert-error,
.alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

/* =================== */
/* Button Loading State */
/* =================== */

.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn-primary.loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* =================== */
/* Mobile Improvements */
/* =================== */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Better touch targets */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    input, select, textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .main-content {
        padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    }

    .modal-content {
        padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   MERCHANT ACCOUNT PAGE
   ============================================================ */

/* Test Mode Banner */
.test-mode-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.test-mode-icon {
    font-size: 1.5rem;
}

.test-mode-text strong {
    color: var(--warning-color);
    display: block;
    margin-bottom: 2px;
}

.test-mode-text p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Test Mode Styling */
#account-content.test-mode .plan-card {
    border-color: var(--warning-color);
}

#account-content.test-mode .plan-card.selected {
    border-color: var(--warning-color);
    background: rgba(255, 152, 0, 0.08);
    box-shadow: 0 0 0 2px var(--warning-color);
}

#account-content.test-mode .plan-badge {
    background: var(--warning-color);
    color: #333;
}

#account-content.test-mode #subscribe-btn {
    background: var(--warning-color);
    color: #333;
}

#account-content.test-mode #subscribe-btn:hover {
    background: #e6a800;
}

#account-content.test-mode .feature-check {
    color: var(--warning-color);
}

/* Modal Test Mode Banner */
.modal-test-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-sm);
    color: #856404;
}

.modal-test-banner .test-banner-icon {
    font-size: 1rem;
    line-height: 1;
}

.modal-test-banner strong {
    color: var(--warning-color);
}

/* Test Mode Modal Button Styling */
.modal.test-mode .btn-primary {
    background: var(--warning-color);
    color: #333;
}

.modal.test-mode .btn-primary:hover {
    background: #e6a800;
}

/* Account Page Card Spacing */
#account-content > .card,
#account-content > section.card {
    margin-bottom: var(--spacing-lg);
}

#account-content > .card:last-child,
#account-content > section.card:last-child {
    margin-bottom: 0;
}

/* Account Status Section */
#account-status-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-label {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.status-value {
    font-weight: 600;
}

.status-value.status-active {
    color: var(--success-color);
}

.status-value.status-pending {
    color: var(--warning-color);
}

.status-value.status-suspended {
    color: var(--danger-color);
}

.status-badge-test {
    display: inline-block;
    padding: 2px 6px;
    background: var(--warning-color);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

.status-message {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.status-message a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Dashboard Status Card */
.dashboard-status-card {
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--primary-color);
}

.status-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.status-card-content .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.status-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Status Card Title Row - title on left, badge on right */
.status-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-card-title-row h2 {
    margin: 0;
}

.status-card-title-row .status-badge,
.status-card-title-row .status-value.status-badge {
    padding: 4px 12px 4px 0;
    margin-left: 0;
    border-radius: 20px;
    font-size: var(--font-sm);
    font-weight: 600;
}

/* Mobile: Stack title row vertically */
@media (max-width: 768px) {
    .status-card-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .status-card-title-row .status-badge,
    .status-card-title-row .status-value.status-badge {
        padding-left: 0;
        margin-left: 0;
    }
}

.status-card-title-row .status-badge.status-active {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
    padding-left: 12px;
}

.status-card-title-row .status-badge.status-pending {
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
    padding-left: 12px;
}

.status-card-title-row .status-badge.status-suspended {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
    padding-left: 12px;
}

.status-card-message {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.status-card-message p {
    margin: 0;
}

.status-card-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Status Card Loading State */
.status-card-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.loading-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Permission Info Button */
.permission-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.permission-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

.permission-info-btn:hover {
    background-color: var(--surface-secondary);
}

.permission-info-btn svg {
    width: 20px;
    height: 20px;
}

/* Permission Tooltip */
.permission-tooltip {
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-top: var(--spacing-sm);
}

.permission-tooltip strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.permission-tooltip p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Service Interruption Banner */
.service-interruption-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.interruption-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.interruption-text {
    flex: 1;
}

.interruption-text strong {
    display: block;
    color: #856404;
    margin-bottom: 4px;
}

.interruption-text p {
    margin: 0;
    font-size: var(--font-sm);
    color: #856404;
}

.service-interruption-banner .btn {
    flex-shrink: 0;
}

/* Mobile: stack button below content */
@media (max-width: 576px) {
    .service-interruption-banner,
    .cancellation-pending-banner {
        flex-wrap: wrap;
    }

    .service-interruption-banner .btn,
    .cancellation-pending-banner .btn {
        width: 100%;
        margin-top: var(--spacing-sm);
    }
}

/* Cancellation Pending Banner */
.cancellation-pending-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.cancellation-pending-banner .interruption-icon {
    color: var(--warning-color);
}

.cancellation-pending-banner .interruption-text strong {
    color: var(--text-primary);
}

.cancellation-pending-banner .interruption-text p {
    color: var(--text-secondary);
}

/* Upgrade Banner (for Starter plan restrictions) */
.upgrade-banner {
    margin-bottom: var(--spacing-lg);
}

.upgrade-banner-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--primary-light);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

.upgrade-banner-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.upgrade-banner-text {
    flex: 1;
}

.upgrade-banner-text strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.upgrade-banner-text p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.upgrade-banner .btn {
    flex-shrink: 0;
}

/* Mobile: stack button below content */
@media (max-width: 576px) {
    .upgrade-banner-content {
        flex-wrap: wrap;
    }

    .upgrade-banner .btn {
        width: 100%;
        margin-top: var(--spacing-sm);
    }
}

.cancellation-pending-banner .btn {
    flex-shrink: 0;
}

/* Disabled button state */
.btn-disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Modal Subscription Alert */
.modal-subscription-alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-sm);
    color: #856404;
}

.modal-subscription-alert .alert-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.modal-subscription-alert a {
    color: #533f03;
    font-weight: 600;
    text-decoration: underline;
}

.modal-subscription-alert a:hover {
    color: #1a1400;
}

/* Page-level Subscription Alert (for Profile, etc.) */
.page-subscription-alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-sm);
    color: #856404;
}

.page-subscription-alert .alert-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.page-subscription-alert a {
    color: #533f03;
    font-weight: 600;
    text-decoration: underline;
}

.page-subscription-alert a:hover {
    color: #1a1400;
}

/* Subscription Section */
.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.subscription-plan {
    flex: 1;
}

.subscription-plan-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.subscription-plan-name {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--success-color);
}

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

.subscription-seats {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.subscription-renewal {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 12px;
}

.subscription-renewal svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.7;
}

.subscription-renewal.text-warning {
    color: var(--warning-color);
    font-weight: 600;
}

.subscription-canceled-date {
    color: var(--error-color);
    font-size: 12px;
}

/* Subscription Cancellation Warning Banner */
.subscription-cancellation-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-md);
}

.cancellation-warning-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.cancellation-warning-content {
    flex: 1;
    min-width: 0;
}

.cancellation-warning-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cancellation-warning-text {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.subscription-cancellation-warning .btn-sm {
    flex-shrink: 0;
    align-self: center;
}

.subscription-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.subscription-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.subscription-action:hover {
    background: var(--surface-tertiary);
}

.subscription-action-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.subscription-action-icon {
    font-size: 1.2rem;
}

.subscription-action-label {
    font-weight: 500;
}

.subscription-action-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.subscription-action-chevron {
    color: var(--text-tertiary);
}

/* Pending Change Banner */
.pending-change-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.pending-change-icon {
    font-size: 1.5rem;
}

.pending-change-text {
    flex: 1;
}

.pending-change-text strong {
    display: block;
    margin-bottom: 2px;
}

.pending-change-text p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Plans Subtitle */
.plans-subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Plans Grid */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.plan-card {
    position: relative;
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
    border-color: var(--primary-color);
}

.plan-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.plan-badge {
    position: absolute;
    top: -12px;
    right: var(--spacing-md);
    padding: 4px 12px;
    background: var(--primary-color);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

.plan-header {
    margin-bottom: var(--spacing-md);
}

.plan-name {
    font-size: var(--font-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-amount {
    font-size: 2rem;
    font-weight: 700;
}

.price-period {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.plan-price-note {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin-top: 4px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.feature-check {
    color: var(--success-color);
    font-weight: 600;
}

/* Premium Options */
.premium-options {
    padding: var(--spacing-lg);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

/* Seat Selector / Stepper */
.seat-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.seat-selector label {
    font-weight: 500;
    flex: 1;
}

.stepper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.stepper-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.stepper-btn:hover:not(:disabled) {
    background: var(--surface-secondary);
}

.stepper-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.stepper-value {
    min-width: 40px;
    text-align: center;
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--primary-color);
}

.seat-price-note {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.total-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.total-amount {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--primary-color);
}

/* Enterprise Notice */
.enterprise-notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(128, 0, 255, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.enterprise-icon {
    font-size: 1.5rem;
}

.enterprise-text strong {
    display: block;
    margin-bottom: 2px;
}

.enterprise-text a {
    color: var(--primary-color);
    text-decoration: none;
}

.enterprise-text a:hover {
    text-decoration: underline;
}

/* Test Card Info */
.test-card-info {
    padding: var(--spacing-lg);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
}

.test-card-info h4 {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.test-card-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

.test-card-label {
    min-width: 100px;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.test-card-number {
    font-family: monospace;
    font-size: var(--font-sm);
    background: var(--surface-tertiary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    flex: 1;
}

.btn-copy {
    padding: 4px 8px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
}

.btn-copy:hover {
    background: var(--surface-tertiary);
}

.test-card-hint {
    margin-top: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 12px;
}

/* Test Card Info Mobile */
@media (max-width: 480px) {
    .test-card-info {
        padding: var(--spacing-md) 0;
    }

    .test-card-row {
        flex-wrap: wrap;
        align-items: flex-start;
        padding-bottom: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        border-bottom: 1px solid var(--border-color);
    }

    .test-card-row:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
    }

    .test-card-label {
        width: 100%;
        min-width: auto;
        margin-bottom: var(--spacing-xs);
    }

    .test-card-number {
        flex: 1;
    }

    .btn-copy {
        margin-left: var(--spacing-sm);
    }
}

/* Plans Footer */
.plans-footer {
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-sm);
    margin-top: var(--spacing-md);
}

/* Change Plan Modal */
.billing-info + .plan-comparison-section {
    margin-top: var(--spacing-lg);
}

@media (max-width: 576px) {
    .billing-info + .plan-comparison-section {
        margin-top: var(--spacing-md);
    }
}

.plan-comparison-section + .plan-comparison-section {
    margin-top: var(--spacing-md);
}

.plan-comparison-section {
}

.plan-comparison-section h3 {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.current-plan-card,
.target-plan-card {
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.current-plan-card .plan-name,
.target-plan-card .plan-name {
    font-size: var(--font-md);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.target-plan-card .plan-features {
    margin-top: var(--spacing-sm);
}

.change-plan-seats {
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.billing-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.billing-icon {
    font-size: 1.5rem;
}

.billing-info.upgrade .billing-icon {
    color: var(--primary-color);
}

.billing-info.downgrade .billing-icon {
    color: var(--warning-color);
}

.billing-text strong {
    display: block;
    margin-bottom: 4px;
}

.billing-text p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Manage Seats Modal */
.seats-usage {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.seat-change-info {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.seat-change-price {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-sm);
}

.seat-change-price span:last-child {
    font-weight: 600;
}

.seat-change-price.increase span:last-child {
    color: var(--warning-color);
}

.seat-change-price.decrease span:last-child {
    color: var(--success-color);
}

.seat-change-timing {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 12px;
    color: var(--text-secondary);
}

.seat-change-timing.immediate #seat-change-icon {
    color: var(--primary-color);
}

.seat-change-timing.scheduled #seat-change-icon {
    color: var(--warning-color);
}

/* Icon Button */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

/* Responsive Account Page */
@media (max-width: 640px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }

    .subscription-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .subscription-details {
        text-align: left;
    }

    .pending-change-banner {
        flex-direction: column;
        text-align: center;
    }

    .test-mode-banner {
        flex-direction: column;
        text-align: center;
    }

    .seat-selector {
        flex-wrap: wrap;
    }
}

/* ============================================
   Payment Modal (Stripe Elements)
   ============================================ */

.payment-summary {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.payment-summary-row.payment-total {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-primary);
    align-items: flex-start;
}

@media (max-width: 480px) {
    .payment-summary-row.payment-total {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}

/* Auto-Renewal Notice */
.payment-renewal-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    color: #0c5460;
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
}

.payment-renewal-notice svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Payment Details Confirmed */
.payment-details-confirmed {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--success-color);
    margin-top: var(--spacing-md);
}

.payment-details-confirmed svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Prorated payment display */
#payment-total .payment-today {
    display: block;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-primary);
}

#payment-total .payment-recurring {
    display: block;
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 2px;
}

#payment-element {
    min-height: 200px;
    padding: var(--spacing-md);
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

#payment-error {
    margin-top: var(--spacing-md);
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================================================
   Update Payment Method Modal
   ============================================================================= */

.modal-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-sm);
    line-height: 1.5;
}

#setup-payment-element {
    min-height: 200px;
    padding: var(--spacing-md);
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

#setup-payment-error {
    margin-top: var(--spacing-md);
}

/* More Billing Options Link */
.billing-more-options {
    padding-top: var(--spacing-md);
    text-align: center;
}

.link-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    cursor: pointer;
    text-decoration: underline;
    padding: var(--spacing-xs);
}

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

/* =============================================================================
   Invoice History Modal
   ============================================================================= */

.invoice-loading,
.invoice-empty {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

.invoice-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--spacing-md);
}

.invoice-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.invoice-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    gap: var(--spacing-md);
}

.invoice-info {
    flex: 1;
    min-width: 0;
}

.invoice-number {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-date {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.invoice-amount {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
    text-align: right;
}

.invoice-status {
    font-size: var(--font-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.invoice-status-paid {
    background: var(--success-light);
    color: var(--success-color);
}

.invoice-status-open {
    background: var(--warning-light);
    color: var(--warning-color);
}

.invoice-download {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-sm);
    flex-shrink: 0;
}

.invoice-download-icon {
    font-size: 1rem;
}

/* =============================================================================
   Billing Page
   ============================================================================= */

/* Page Header with Back Link */
.page-header-with-back {
    margin-bottom: var(--spacing-sm);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

.back-icon {
    font-size: 1.2em;
    line-height: 1;
}

/* Billing Cards */
.billing-card {
    margin-bottom: var(--spacing-lg);
}

.billing-card .card-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.billing-card .card-header h2 {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Billing Subscription Info */
.billing-subscription-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.billing-plan-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.billing-plan-name {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.billing-plan-seats {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.billing-plan-price {
    font-size: var(--font-lg);
    color: var(--text-primary);
}

.billing-plan-details {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.billing-plan-details p {
    margin: 0;
}

.billing-plan-details strong {
    color: var(--text-primary);
}

/* Billing Price Breakdown */
.billing-price-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) 0;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
}

.billing-price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.billing-price-line.billing-price-total {
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    border-top: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-md);
}

.billing-price-label {
    flex: 1;
}

.billing-price-amount {
    font-family: var(--font-mono, monospace);
}

/* Payment Method Section */
.billing-payment-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.payment-method-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.payment-method-icon {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.payment-method-details {
    display: flex;
    flex-direction: column;
}

.payment-method-label {
    font-weight: 500;
    color: var(--text-primary);
}

.payment-method-hint {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Billing Invoice List */
.billing-invoice-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.billing-invoice-row:last-child {
    border-bottom: none;
}

.billing-invoice-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.billing-invoice-date {
    color: var(--text-primary);
    font-weight: 500;
    min-width: 100px;
}

.billing-invoice-amount {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

.billing-invoice-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
}

.billing-invoice-desc {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-pdf-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.invoice-pdf-link:hover {
    text-decoration: underline;
}

/* Billing Payment Element */
#billing-payment-element {
    min-height: 200px;
    padding: var(--spacing-md);
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

#billing-payment-error {
    margin-top: var(--spacing-md);
}

/* Billing Section (Account Page) */
.billing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.billing-item:last-of-type {
    border-bottom: none;
}

.billing-item-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.billing-item-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
    border-radius: var(--border-radius);
}

.billing-item-details {
    display: flex;
    flex-direction: column;
}

.billing-item-label {
    font-weight: 500;
    color: var(--text-primary);
}

.billing-item-value {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.billing-portal-link {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    text-align: center;
}

.billing-portal-link .link-btn {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.billing-portal-link .link-btn:hover {
    color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .billing-invoice-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .billing-invoice-header {
        justify-content: space-between;
        width: 100%;
    }

    .billing-invoice-date {
        min-width: auto;
    }

    .billing-invoice-amount {
        min-width: auto;
        text-align: right;
    }

    .billing-invoice-details {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .billing-invoice-desc {
        white-space: normal;
        flex: 1 1 100%;
        order: 2;
    }

    .invoice-status {
        order: 1;
        padding: 0;
    }

    .invoice-pdf-link {
        align-self: flex-start;
    }

    .billing-payment-method {
        flex-direction: column;
        align-items: stretch;
    }

    .payment-method-card {
        margin-bottom: var(--spacing-md);
    }

    .billing-item {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .billing-item .btn {
        flex-shrink: 0;
    }
}

/* =================== */
/* App Loading Overlay  */
/* =================== */
.app-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-color);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.app-loading-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: var(--shadow-lg);
}

.app-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: app-loading-spin 0.8s linear infinite;
}

@keyframes app-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =================== */
/* Profile Photo Section */
/* =================== */
.profile-photo-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.profile-photo-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--background-color);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.profile-photo-preview:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
}

.profile-photo-preview.has-photo {
    border-style: solid;
    border-color: var(--border-color);
}

.profile-photo-preview.has-photo:hover {
    border-color: var(--primary-color);
}

.profile-photo-preview .photo-placeholder {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    text-align: center;
    padding: var(--spacing-lg);
}

.profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.profile-photo-actions .btn-sm {
    padding: 8px 16px;
    font-size: var(--font-sm);
}

.profile-photo-actions .btn svg {
    width: 16px;
    height: 16px;
}

/* =================== */
/* Merchant Onboarding */
/* =================== */

/* Onboarding Modal Container */
.onboarding-modal {
    max-width: 500px;
    width: 100%;
    padding: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

/* Close Button */
.onboarding-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.onboarding-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Slides Container */
.onboarding-slides {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

/* Individual Slide */
.onboarding-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.onboarding-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.onboarding-slide.prev {
    transform: translateX(-30px);
}

/* Slide Icon */
.slide-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    margin-bottom: var(--spacing-xl);
    transition: transform 0.3s ease;
}

.slide-icon svg {
    width: 56px;
    height: 56px;
}

.onboarding-slide.active .slide-icon {
    animation: slideIconPop 0.5s ease-out 0.2s both;
}

@keyframes slideIconPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Icon Color Variants */
.slide-icon-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1976d2;
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.15);
}

.slide-icon-coral {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #f57c00;
    box-shadow: 0 8px 24px rgba(245, 124, 0, 0.15);
}

.slide-icon-green {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #388e3c;
    box-shadow: 0 8px 24px rgba(56, 142, 60, 0.15);
}

/* Slide Title */
.slide-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

/* Slide Description */
.slide-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto;
}

/* Pagination Dots */
.onboarding-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
}

.onboarding-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.onboarding-dots .dot:hover {
    background: var(--text-secondary);
}

.onboarding-dots .dot.active {
    background: var(--primary-color);
    width: 28px;
    border-radius: 5px;
}

/* Navigation Buttons */
.onboarding-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.onboarding-nav .btn {
    min-width: 120px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.onboarding-nav .onboarding-next {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
}

.onboarding-nav .onboarding-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.onboarding-nav .onboarding-back {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.onboarding-nav .onboarding-back:hover {
    background: var(--background-color);
    color: var(--text-primary);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .onboarding-modal {
        max-width: 100%;
        margin: var(--spacing-md);
        border-radius: var(--border-radius);
    }

    .onboarding-slides {
        min-height: 360px;
    }

    .onboarding-slide {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .slide-icon {
        width: 80px;
        height: 80px;
        border-radius: 22px;
    }

    .slide-icon svg {
        width: 44px;
        height: 44px;
    }

    .slide-title {
        font-size: 1.5rem;
    }

    .slide-description {
        font-size: 0.9375rem;
    }

    .onboarding-nav {
        flex-direction: column-reverse;
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    }

    .onboarding-nav .btn {
        width: 100%;
    }
}

/* =================== */
/* Merchant Welcome    */
/* =================== */

/* Welcome Modal Container */
.welcome-modal {
    max-width: 480px;
    width: 100%;
    padding: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 40%);
    position: relative;
}

/* Close Button */
.welcome-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.welcome-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Welcome Content */
.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-lg);
    text-align: center;
}

/* Welcome Icon */
.welcome-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.15);
    animation: welcomeIconPulse 2s ease-in-out infinite;
}

.welcome-icon svg {
    width: 48px;
    height: 48px;
    color: #1976d2;
}

@keyframes welcomeIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Welcome Title */
.welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

/* Business Name */
.welcome-business-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.welcome-business-name:empty {
    display: none;
}

/* Welcome Subtitle */
.welcome-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Feature Highlights */
.welcome-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--border-radius);
}

/* Individual Feature */
.welcome-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    text-align: left;
}

/* Feature Icon */
.feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

/* Feature Icon Colors */
.feature-icon-blue {
    background: rgba(25, 118, 210, 0.15);
    color: #1976d2;
}

.feature-icon-green {
    background: rgba(56, 142, 60, 0.15);
    color: #388e3c;
}

.feature-icon-orange {
    background: rgba(245, 124, 0, 0.15);
    color: #f57c00;
}

.feature-icon-indigo {
    background: rgba(92, 107, 192, 0.15);
    color: #5c6bc0;
}

/* Feature Text */
.feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.feature-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Welcome Footer */
.welcome-footer {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}

.welcome-subscribe-btn {
    width: 100%;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
    transition: all 0.2s ease;
}

.welcome-subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .welcome-modal {
        max-width: 100%;
        margin: var(--spacing-md);
    }

    .welcome-content {
        padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
    }

    .welcome-icon {
        width: 80px;
        height: 80px;
    }

    .welcome-icon svg {
        width: 40px;
        height: 40px;
    }

    .welcome-title {
        font-size: 1.5rem;
    }

    .welcome-business-name {
        font-size: 1.125rem;
    }

    .welcome-footer {
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    }
}

/* =================== */
/* Usage Page          */
/* =================== */

.usage-card {
    margin-bottom: var(--spacing-lg);
}

.usage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.usage-card-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.usage-card-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.usage-info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.usage-info-icon svg {
    width: 18px;
    height: 18px;
}

.usage-info-icon:hover {
    opacity: 0.75;
}

.usage-info-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    background: var(--text-primary);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    width: 260px;
    z-index: 100;
    pointer-events: none;
    white-space: normal;
}

.usage-info-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--text-primary);
}

.usage-info-icon:hover .usage-info-tooltip,
.usage-info-icon:focus-within .usage-info-tooltip {
    display: block;
}

.usage-reset-info {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.usage-meter {
    margin-bottom: var(--spacing-md);
}

.usage-meter:last-child {
    margin-bottom: 0;
}

.usage-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.usage-meter-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.usage-meter-count {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.usage-progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.usage-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background-color 0.3s ease;
    background: var(--primary-color);
}

/* Progress bar color states */
.usage-progress-fill.usage-low {
    background: #10b981; /* Green - under 50% */
}

.usage-progress-fill.usage-medium {
    background: #f59e0b; /* Yellow/Amber - 50-80% */
}

.usage-progress-fill.usage-high {
    background: #ef4444; /* Red - over 80% */
}

/* Plan Info Card */
.usage-plan-info {
    background: var(--primary-light);
    border: 1px solid var(--primary-color);
}

.usage-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.usage-plan-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.usage-plan-tier {
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
}

.usage-plan-desc {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.usage-plan-desc a {
    color: var(--primary-color);
    text-decoration: none;
}

.usage-plan-desc a:hover {
    text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .usage-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .usage-meter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}