/**
 * Cupidly PWA Styles
 * Mobile-First Responsive Design
 * Design System v1.0 (Task 3.5)
 */

/* ==================== CSS CUSTOM PROPERTIES (DESIGN SYSTEM) ==================== */
:root {
    /* ===== PRIMARY COLORS ===== */
    --primary-color: #ff4b6a;
    --primary-dark: #e63e5c;
    --primary-light: #ff6b8a;
    --primary-gradient: linear-gradient(135deg, #ff4b6a, #ff8e53);

    /* ===== SECONDARY COLORS ===== */
    --secondary-color: #ff8e53;
    --secondary-dark: #e67e3f;
    --secondary-light: #ffa67a;
    --secondary-gradient: linear-gradient(135deg, #ff8e53, #ffd700);

    /* ===== ACCENT COLORS ===== */
    --accent-purple: #667eea;
    --accent-blue: #4299e1;
    --accent-pink: #ed64a6;

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f1f3f4;
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* ===== TEXT COLORS ===== */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;
    --text-muted: #d1d5db;

    /* ===== STATUS COLORS ===== */
    --success-color: #10b981;
    --success-light: #d1fae5;
    --warning-color: #f59e0b;
    --warning-light: #fef3c7;
    --error-color: #ef4444;
    --error-light: #fee2e2;
    --info-color: #3b82f6;
    --info-light: #dbeafe;

    /* ===== BORDER COLORS ===== */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    --border-focus: var(--primary-color);

    /* ===== SHADOWS (ELEVATION SYSTEM) ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.20);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ===== SPACING (8PX GRID SYSTEM) ===== */
    --spacing-0: 0;
    --spacing-1: 4px;    /* 0.25rem */
    --spacing-2: 8px;    /* 0.5rem */
    --spacing-3: 12px;   /* 0.75rem */
    --spacing-4: 16px;   /* 1rem */
    --spacing-5: 20px;   /* 1.25rem */
    --spacing-6: 24px;   /* 1.5rem */
    --spacing-8: 32px;   /* 2rem */
    --spacing-10: 40px;  /* 2.5rem */
    --spacing-12: 48px;  /* 3rem */
    --spacing-16: 64px;  /* 4rem */
    --spacing-20: 80px;  /* 5rem */
    --spacing-24: 96px;  /* 6rem */

    /* Legacy spacing (for backward compatibility) */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-xxl: var(--spacing-12);

    /* ===== BORDER RADIUS ===== */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===== TYPOGRAPHY ===== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ===== Z-INDEX SCALE ===== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-max: 9999;

    /* ===== SAFE AREAS (PWA) ===== */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* ===== LAYOUT ===== */
    --nav-height: 72px;
    --header-height: 60px;
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;

    /* ===== OPACITY SCALE ===== */
    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-100: 1;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #1f2937;
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] body,
body[data-theme="dark"] {
    background: var(--bg-primary);
}

/* ===== MALKA (QUEEN) MODE THEME ===== */
.theme-malka {
    --primary-color: #9c27b0;
    --primary-dark: #7b1fa2;
    --primary-light: #ba68c8;
    --primary-gradient: linear-gradient(135deg, #9c27b0, #ffd700);
    
    --secondary-color: #ffd700;
    --secondary-dark: #ffc107;
    --secondary-light: #ffe57f;
    
    --bg-secondary: #fbf5ff;
    --bg-tertiary: #f3e5f5;
    
    --text-primary: #4a148c;
}

/* Queen Badge on Profile */
.queen-badge {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    background: var(--secondary-gradient);
    color: var(--text-inverse);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    border: 1px solid var(--text-inverse);
}

/* ===== PWA INSTALL BUTTON ===== */
.install-app-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: var(--text-inverse);
    border: none;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-2);
    transition: var(--transition-normal);
}

.install-app-btn:active {
    transform: scale(0.95);
}

.install-app-btn.hidden {
    display: none !important;
}

/* ===== GLOBAL RESET ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background: linear-gradient(135deg, #fff0f5 0%, #fff 100%);
    /* Premium light pink gradient */
    color: var(--text-primary);
    line-height: 1.5;
    overflow: hidden;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==================== App Container ==================== */
#app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* ==================== Screens ==================== */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overflow: hidden;
}

.screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==================== Splash Screen ==================== */
#splash-screen {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

.logo-container {
    margin-bottom: var(--spacing-xl);
}

.logo {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--primary-color);
    margin: 0 auto var(--spacing-md);
    box-shadow: var(--shadow-lg);
}

.logo i.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.logo-container h1 {
    font-size: var(--font-size-xxl);
    color: white;
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.logo-container p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-md);
}

.splash-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    min-width: 80px;
}

.feature i {
    font-size: 24px;
    color: white;
    margin-bottom: var(--spacing-xs);
}

.feature span {
    font-size: var(--font-size-xs);
    color: white;
}

/* ==================== Buttons ==================== */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 48px;
    min-width: 48px;
    -webkit-tap-highlight-color: transparent;
}

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

.btn-primary:active {
    transform: translateY(0);
}

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

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 48px;
}

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

.btn-danger {
    background: var(--error-color);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 48px;
}

.btn-large {
    width: 100%;
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
}

.btn-small {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    min-height: 40px;
}

.btn-text {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.btn-block {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: 14px var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: right;
}

.btn-block i {
    color: var(--primary-color);
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.btn-block:hover {
    background: var(--bg-tertiary);
}

.btn-block:active {
    background: var(--border-color);
}

.btn-loading {
    position: relative;
}

.btn-loading .btn-loader {
    display: none;
}

.btn-loading.loading .btn-text {
    visibility: hidden;
}

.btn-loading .btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-loading.loading .btn-loader {
    display: block;
}

/* ==================== Auth Screen ==================== */
#auth-screen {
    background: transparent;
    /* Allow body gradient to show */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    padding-top: max(var(--spacing-xl), var(--safe-area-top));
    padding-bottom: var(--safe-area-bottom);
    overflow-y: auto;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.auth-container {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}

.auth-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.auth-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.auth-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    background: var(--bg-tertiary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
}

.auth-tabs .tab {
    flex: 1;
    padding: var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.auth-tabs .tab.active {
    background: white;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
    min-height: 48px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

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

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

.password-input {
    position: relative;
}

.password-input input {
    width: 100%;
    padding-right: 48px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--spacing-xs);
}

.checkbox-group {
    flex-direction: row;
    align-items: flex-start;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.checkbox-label input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.auth-switch {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* ==================== Onboarding Screen ==================== */
#onboarding-screen {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.onboarding-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.onboarding-progress {
    margin-bottom: var(--spacing-xl);
}

.progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

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

.onboarding-step {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: var(--spacing-lg);
    -webkit-overflow-scrolling: touch;
}

.onboarding-step.active {
    display: flex;
}

.onboarding-step h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.onboarding-step h2 i {
    color: var(--primary-color);
}

.step-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Preference Sections (Task 1.4) */
.preference-section {
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

/* Option Cards */
.option-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.option-card {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-card:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.option-card.selected {
    border-color: var(--primary-color);
    background: rgba(255, 75, 106, 0.08);
}

.option-card i {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.option-card span {
    font-weight: 600;
    color: var(--text-primary);
}

/* Interests Grid */
.interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.interest-tag {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

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

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

.interest-tag.selected i {
    color: white;
}

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

/* Compact interests grid for edit profile */
.interests-grid-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.interest-chip {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

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

.form-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 8px;
}

/* Extended Profile Fields Styling */
.extended-field-group {
    margin-bottom: 24px;
    background: transparent;
    border: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group-full {
    grid-column: 1 / -1;
}

/* Mobile responsive: single column */
@media (max-width: 480px) {
    .extended-field-group {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }

    .group-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

.onboarding-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.nav-right-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-text.hidden {
    display: none;
}

#onboarding-skip {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    opacity: 0.8;
}

#onboarding-skip:hover {
    color: var(--primary-color);
    opacity: 1;
}

/* Age Range */
.age-range-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.age-display {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
}

.dual-range {
    position: relative;
    height: 40px;
}

.dual-range::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gray-300);
    border-radius: 3px;
    transform: translateY(-50%);
}

.dual-range input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

.dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(255, 75, 106, 0.4);
}

.dual-range input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    pointer-events: auto;
    border: none;
}

#min-age-range {
    z-index: 1;
}

#max-age-range {
    z-index: 2;
}

/* Location */
.location-container {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.location-status {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.location-status i {
    font-size: 48px;
    color: var(--primary-color);
}

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

.location-status.error i {
    color: var(--error-color);
}

.location-manual {
    margin-top: var(--spacing-lg);
}

.location-manual input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    text-align: center;
}

/* Onboarding Actions */
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: auto;
    padding-top: var(--spacing-lg);
}

.onboarding-actions button {
    flex: 1;
}

/* ==================== Main App ==================== */
#main-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    /* Allow body gradient to show */
}

/* App Header */
.app-header {
    height: var(--header-height);
    min-height: var(--header-height);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
    padding-top: var(--safe-area-top);
    position: relative;
    z-index: 100;
}

.header-right,
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Increased spread (approx 10% + cushion) */
}

.header-left {
    justify-content: center;
    /* Center content in the header */
}

.credits-btn {
    margin: 0;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.app-logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.credits-btn,
.notification-btn,
.premium-btn,
.header-action-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    /* Standardized icon size */
    position: relative;
    transition: background var(--transition-fast);
    padding: 0;
    margin: 0;
    line-height: 1;
    transform: none !important;
    /* Prevent any unintended shifts */
}

/* Enhanced Credits Button - Pill Shape */
.credits-btn {
    width: auto !important;
    min-width: 40px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 20px;
    justify-content: center;
    margin-right: 15px;
}

.credits-btn .credits-badge {
    width: 100%;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

#open-filters-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -2px;
    /* Fine-tuned alignment */
}

.premium-btn i,
.credits-btn i {
    color: #FFD700;
    /* Premium Gold */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
}

.credits-btn:hover,
.notification-btn:hover,
.premium-btn:hover {
    background: var(--border-color);
}

.credits-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--error-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

/* App Content */
.app-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 80px;
    /* Exact Safe Zone for Nav */
}

.tab-content {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-content.active {
    display: flex;
}

.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

#chat-tab > .tab-header {
    padding: var(--spacing-sm);
}

#chat-tab > .tab-header h2 {
    display: none;
}

#chat-tab > .tab-header .tab-count {
    display: none;
}

.tab-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tab-count {
    background: #ff4b6a;
    /* var(--primary-color) but emphasizing the red from the image */
    color: white;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(255, 75, 106, 0.3);
}

/* ==================== Discover Tab ==================== */
#discover-tab.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--nav-height));
    padding-bottom: 0;
    overflow: hidden;
}

#discover-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
}

.discover-header {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.header-action-btn {
    margin-top: 16px;
    padding: 8px 18px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #eef2f6;
    background: #ffffff;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    font-size: 15px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}

.header-action-btn i {
    font-size: 16px;
    color: var(--primary-color);
}

.header-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #e2e8f0;
}

.header-action-btn:active {
    transform: scale(0.95);
    background: #f8fafc;
}

.header-action-btn.active-filters {
    background: #fff5f6;
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(255, 75, 106, 0.15);
}

.header-action-btn .active-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 75, 106, 0.5);
    z-index: 11;
}

.header-action-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.header-action-btn.active-filters {
    border-color: var(--primary-color);
    background: rgba(255, 75, 106, 0.05);
    color: var(--primary-color);
}

.active-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    z-index: 1;
}

.discover-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 4px;
    /* Reduced since filters are gone */
}

.discover-filters {
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

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

/* Distance Slider */
.distance-slider-container {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.distance-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.distance-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.distance-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
}

.distance-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    outline: none;
}

.distance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 75, 106, 0.4);
    transition: transform 0.15s ease;
}

.distance-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
}

.distance-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(255, 75, 106, 0.4);
}

/* Single Range Slider (for distance filter) */
.single-range-container {
    padding: 10px 0 20px;
}

.single-range {
    position: relative;
    height: 24px;
}

.single-range input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    z-index: 2;
    height: 6px;
    top: 9px;
}

.single-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary-color);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.25);
    transition: all 0.2s ease;
}

.single-range input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 75, 106, 0.35);
}

.single-range input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.single-range input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary-color);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.25);
    transition: all 0.2s ease;
}

.single-range input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 75, 106, 0.35);
}

.single-range input[type="range"]::-moz-range-thumb:active {
    transform: scale(0.95);
}

.single-range .range-track-bg {
    position: absolute;
    height: 6px;
    background: #e2e8f0;
    top: 9px;
    border-radius: 10px;
    z-index: 1;
    width: 100%;
    pointer-events: none;
}


#discover-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    display: none;
    /* Hide by default */
}

.tab-content.active #discover-container {
    display: flex;
    /* Show only when discover tab is active */
}

.cards-stack {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.profile-card {
    position: absolute;
    width: 100%;
    max-width: 420px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    background: var(--bg-primary);
    border-radius: 18px;
    /* Ringle style: 18px rounded corners */
    box-shadow: none;
    overflow: hidden;
    /* Clips images and gradients to rounded corners */
    transition: transform 0.6s ease, opacity 0.6s ease;
    touch-action: pan-y;
    user-select: none;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .profile-card {
        border-radius: 18px;
        /* Ringle style: 18px on desktop too */
        height: auto;
        aspect-ratio: 9/16;
        /* FIXED: Strict 9:16 ratio */
        max-width: 420px;
        /* Ringle style: Max width constraint */
        max-height: calc(100vh - 120px);
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        /* Depth shadow */
    }
}

.profile-card:active {
    cursor: grabbing;
}

/* Photo Indicators - Ringle Story Style */
.photo-indicators {
    position: absolute;
    top: 10px;
    /* Ringle style: Top margin 10px */
    left: 12px;
    /* Ringle style: Side margins 12px */
    right: 12px;
    display: flex;
    gap: 4px;
    /* Ringle style: Gap 4px */
    z-index: 10;
    padding: 0;
    /* Ringle style: No padding, just the bars */
}

.photo-indicator {
    flex: 1;
    height: 2px;
    /* Ringle style: Height 2px */
    background: rgba(255, 255, 255, 0.3);
    /* Ringle style: Inactive color */
    border-radius: 2px;
    transition: background 0.2s;
}

.photo-indicator.active {
    background: rgba(255, 255, 255, 0.95);
}

/* Story Progress Bar (photo indicators on profile card) */
.story-progress-bar {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
    pointer-events: none;
}

.story-progress-segment {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.story-progress-segment.active {
    background: rgba(255, 255, 255, 0.95);
}

/* Photo Container */
.card-photo-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.card-photo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-photo-img.active {
    opacity: 1;
}

.card-photo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: rgba(255, 255, 255, 0.2);
}

/* Photo Navigation Zones */
.photo-nav-zone {
    position: absolute;
    top: 0;
    bottom: 120px;
    width: 40%;
    z-index: 5;
    cursor: pointer;
}

.photo-nav-prev {
    left: 0;
}

.photo-nav-next {
    right: 0;
}

/* Info Overlay - Ringle Style */
.card-info-overlay {
    position: absolute;
    bottom: 100px;
    /* Ringle style: Positioned above action buttons */
    left: 0;
    right: 0;
    padding: 0 20px;
    /* Text padding */
    background: transparent !important;
    /* Smoother, softer gradient - only darkens very bottom */
    color: white;
    z-index: 10;
    /* Ringle style: Container for absolutely positioned children */
    pointer-events: none;
    display: flex;
    /* Ringle style: Flex layout for left/right alignment */
    flex-direction: row;
    /* Ringle style: Row layout */
    justify-content: space-between;
    /* Ringle style: Pushes button to start(left) and text to end(right) */
    align-items: flex-end;
    /* Ringle style: Align both blocks at bottom */
    direction: ltr !important;
    /* CRITICAL OVERRIDE: Forces Left button to be physically Left, Right info to be physically Right */
}

.card-info-overlay>* {
    pointer-events: auto;
    /* Re-enable clicks for info text if needed */
}

/* Card Info Left Side - Control Button */
.card-info-left {
    /* Ringle style: Flex item for left side */
    align-self: flex-end;
    /* Ringle style: Align at bottom */
}

.card-control-btn {
    width: 32px;
    /* Match header profile button size */
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25) !important;
    /* Glassmorphism matching main buttons */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 8px;
    /* Lift button slightly for better alignment */
}

.card-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.card-control-btn i {
    font-size: 14px;
}

/* Card Info Right Side - Profile Info */
.card-info-right {
    /* Ringle style: Flex item for right side */
    display: flex;
    flex-direction: column;
    align-items: flex-end !important;
    /* Ringle style: Bottom-right alignment */
    justify-content: flex-end;
    text-align: right !important;
    /* Ringle style: Force text back to right since container is now LTR */
    pointer-events: auto;
}

.card-activity-badge {
    background: #2ecc71 !important;
    /* Brighter Premium Green */
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    display: inline-block;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    /* Stronger shadow */
    letter-spacing: 0.5px;
}

.card-activity-badge.online {
    background: #2ecc71 !important;
    /* Green for online */
}

.card-activity-badge.offline {
    background: #95a5a6 !important;
    /* Gray for offline */
}

.card-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.card-distance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.card-distance i {
    font-size: 11px;
}

.card-name {
    font-size: 28px;
    /* Larger */
    font-weight: 800;
    /* Extra Bold */
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Stronger shadow for readability */
    letter-spacing: -0.5px;
}

.card-age {
    font-size: 24px;
    font-weight: 400;
    /* Regular weight for contrast */
    margin-right: 8px;
    /* Spacing from name */
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.card-location {
    font-size: 14px;
    opacity: 0.9;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.verified-icon {
    color: #3b82f6;
    font-size: 20px;
}

.card-location {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.card-location i {
    font-size: 12px;
}

.card-bio {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1.4;
    max-height: 40px;
    overflow: hidden;
}

/* Remove old card styles */
.card-photo {
    display: none;
}

.card-info {
    display: none;
}

.card-location {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.card-bio {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.card-tag {
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}



#discover-tab.active {
    background: #F5F7FA;
    /* Popping background for desktop */
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (min-width: 768px) {
    .action-btn {
        transform: scale(0.9);
        /* Subtle scaling for desktop balance */
    }

    .action-btn:active {
        transform: scale(0.85);
    }
}

/* Action Buttons - Exact Ringle/discoverypage.html Style */
.action-btn {
    background: white !important;
    border-radius: 50%;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
    flex-shrink: 0;
}

.action-btn:active {
    transform: scale(0.9);
}

/* Small buttons - 48px (Undo, Superlike, Message) */
.action-btn.undo,
.action-btn.superlike,
.action-btn.premium-message {
    width: 48px;
    height: 48px;
}

/* Large buttons - 64px (Pass, Like) */
.action-btn.pass,
.action-btn.like {
    width: 64px;
    height: 64px;
}

/* Icon sizes */
.action-btn i {
    font-size: 20px;
}

.action-btn.pass i,
.action-btn.like i {
    font-size: 28px;
}

/* Button Order (LTR): Undo, Pass, Superlike, Like, Message */
.action-btn.undo {
    order: 1;
}

.action-btn.pass {
    order: 2;
}

.action-btn.superlike {
    order: 3;
    position: relative;
}

.action-btn.like {
    order: 4;
}

.action-btn.premium-message {
    order: 5;
}

/* Exact Icon Colors from discoverypage.html */
.action-btn.undo {
    color: #fbc02d !important;
}

/* Yellow/Gold */
.action-btn.pass {
    color: #546e7a !important;
}

/* Dark Gray */
.action-btn.superlike {
    color: #29b6f6 !important;
}

/* Light Blue */
.action-btn.like {
    color: #ff4b6a !important;
}

/* Pink */
.action-btn.premium-message {
    color: #039be5 !important;
}

/* Blue */

/* Heart slightly larger */



.action-btn.premium-message:hover {
    background: rgba(255, 255, 255, 0.3);
    /* Ringle style: Slightly more opaque on hover */
    transform: scale(1.05);
}

.action-btn.premium-message::before {
    display: none;
}

.action-btn.boost {
    background: white;
    color: #ffd700;
    border: 3px solid #ffd700;
}

.swiping-left {
    animation: swipeLeft 0.8s ease forwards !important;
}

.swiping-right {
    animation: swipeRight 1s ease forwards !important;
}

@keyframes swipeLeft {
    to {
        transform: translateX(-150%) rotate(-20deg);
        opacity: 0;
    }
}

@keyframes swipeRight {
    to {
        transform: translateX(150%) rotate(20deg);
        opacity: 0;
    }
}

/* ==================== Empty States ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    height: 100%;
    min-height: 400px;
    animation: fadeIn 0.3s ease;
}

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

.empty-icon {
    width: 100px;
    height: 100px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-lg);
    transition: all 0.3s ease;
}

.empty-state:hover .empty-icon {
    transform: scale(1.05);
    background: var(--bg-secondary);
}

.empty-state h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xxl);
    max-width: 400px;
    line-height: 1.6;
    font-size: 18px;
}

.empty-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--spacing-sm);
}

.empty-state .btn-primary {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.empty-state .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.3);
}

.empty-state .btn-primary i {
    margin-left: 8px;
}

.empty-state .btn-secondary {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.empty-state .btn-secondary:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.empty-state .btn-secondary i {
    margin-left: 8px;
}

/* Empty State Variants */
.empty-state-warning .empty-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.empty-state-warning h3 {
    color: #f59e0b;
}

.empty-state-creative .empty-icon {
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.1), rgba(255, 142, 83, 0.1));
    color: var(--primary-color);
}

/* Inline Empty State (for smaller components) */
.empty-state-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}

.empty-state-inline i {
    font-size: 18px;
    color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
    .empty-state {
        padding: var(--spacing-lg);
        min-height: 300px;
    }
    
    .empty-icon {
        width: 80px;
        height: 80px;
        font-size: 40px;
    }
    
    .empty-state h3 {
        font-size: 22px;
    }
    
    .empty-state p {
        font-size: 17px;
    }
    
    .empty-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .empty-state .btn-primary,
    .empty-state .btn-secondary {
        width: 100%;
        max-width: 300px;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .empty-icon {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.3);
    }
    
    .empty-state:hover .empty-icon {
        background: rgba(255, 255, 255, 0.08);
    }
    
    .empty-state-warning .empty-icon {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
    }
    
    .empty-state-creative .empty-icon {
        background: linear-gradient(135deg, rgba(255, 75, 106, 0.15), rgba(255, 142, 83, 0.15));
    }
}

/* ==================== Online Users Tab ==================== */
.online-users-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: #f8f9fa;
    /* Slight background color like the image */
    padding-bottom: calc(var(--nav-height) + var(--spacing-md));
}

.online-user-item {
    width: 100%;
    height: auto;
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow like the image */
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.online-user-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.online-user-item:active {
    transform: scale(0.98);
}

.online-user-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--text-tertiary);
    position: relative;
}

.online-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.online-user-avatar i {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--text-tertiary);
}

.online-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--success-color);
    border: 3px solid var(--bg-primary);
    border-radius: var(--radius-full);
}

.online-user-name {
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.online-user-age {
    display: none !important;
}

.online-user-location {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.online-user-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.online-user-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f1f3f4;
    color: #4a4a68;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
}

.online-user-btn.chat {
    background: #f1f3f4;
    color: #4a4a68;
}

.online-user-btn.chat:hover {
    background: #e1e4e8;
}

.online-user-btn.video {
    background: #f1f3f4;
    color: #4a4a68;
}

.online-user-btn.video:hover {
    background: #e1e4e8;
}

/* ==================== Stories Tab ==================== */
.stories-container {
    flex: 1;
    overflow-y: auto;
    padding: 2px;
    padding-bottom: calc(var(--nav-height) + var(--spacing-md));
    background-color: #f8f9fa;
}

.stories-container::-webkit-scrollbar {
    display: none;
}

/* ==================== NEW STORIES UI REDESIGN ==================== */
#stories-list,
.stories-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.story-item {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-tertiary);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: none;
}

.story-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.story-item:active {
    transform: scale(0.98);
}

.story-card-preview {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Bottom gradient for readable white text */
.story-card-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
}

/* Content positioning (name + avatar) at bottom */
.story-overlay-content {
    position: absolute;
    bottom: 8px;
    left: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
    direction: ltr;
}

/* Name styling */
.story-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    text-align: left;
    margin-left: 4px;
}

/* Small avatar circle styling */
.story-avatar-overlay {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1.5px solid #ffffff;
}

.story-avatar-overlay img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Unviewed story indicator (colorful ring) */
.story-item.unviewed .story-avatar-overlay {
    border: 1.5px solid transparent;
    background: linear-gradient(#1a1a2e, #1a1a2e) padding-box,
        linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box;
}

/* Very small screens */
@media (max-width: 360px) {

    #stories-list,
    .stories-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.story-item .story-location {
    display: none;
}

.add-story {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 32px;
}

/* ==================== Matches Tab ==================== */
.matches-grid {
    flex: 1;
    overflow-y: auto;
    padding-top: var(--spacing-sm);
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(160px, auto);
    gap: var(--spacing-sm);
    padding-bottom: calc(var(--nav-height) + var(--spacing-md));
}

.match-item {
    width: 100%;
    max-width: 100%; /* Prevent giant profiles */
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

/* Single match - keep it in grid, don't span full width */
.matches-grid .match-item:only-child {
    grid-column: 1 / 2; /* Stay in first column */
    max-width: 100%;
}

/* RTL: When last row has only one item (odd total > 1), make it span full width */
[dir="rtl"] .matches-grid .match-item:nth-last-child(1):nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
}

/* JS-applied class to span full width - but not for single items */
.match-item-span-2:not(:only-child) {
    grid-column: 1 / -1 !important;
}

.match-item:active {
    transform: scale(0.98);
}

.match-avatar {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--text-tertiary);
    position: relative;
}

.match-avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.match-avatar.has-new::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border: 2px solid var(--bg-primary);
    border-radius: var(--radius-full);
}

.online-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: var(--success-color);
    border: 3px solid var(--bg-primary);
    border-radius: var(--radius-full);
}

.match-name {
    font-weight: 600;
    text-align: center;
}

.match-preview {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== Chat Tab ==================== */
.chat-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: calc(var(--nav-height) + var(--spacing-md));
    padding-left: 0;
    padding-right: 0;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

/* Chat options button */
.chat-options-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 18px;
    padding: var(--spacing-xs);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.chat-item:hover .chat-options-btn,
.chat-item:active .chat-options-btn {
    opacity: 1;
}

/* Always show on mobile */
@media (max-width: 768px) {
    .chat-options-btn {
        opacity: 1;
    }
}

/* Chat thread menu */
.chat-thread-menu {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xs);
    min-width: 150px;
}

.menu-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    text-align: right;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.menu-option:hover,
.menu-option:active {
    background: var(--bg-secondary);
}

.menu-option.unmatch-option {
    color: var(--error-color);
}

.menu-option i {
    width: 20px;
    text-align: center;
}

/* RTL Chat List Styles */
/* RTL chat-item - no direction reversal needed */
/* The natural layout works for RTL when text-align is set correctly */

[dir="rtl"] .chat-list {
    padding-left: 0;
    padding-right: 0;
}

.chat-item:active {
    background: var(--bg-tertiary);
}

.chat-item.unread {
    background: rgba(255, 75, 106, 0.05);
}

.chat-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    overflow: hidden;
}

/* RTL: Avatar on the right side */
[dir="rtl"] .chat-avatar {
    order: 1;
}

[dir="rtl"] .chat-info {
    order: 2;
    text-align: right;
}

/* RTL: Name on the right, time on the left */
[dir="rtl"] .chat-name-row {
    flex-direction: row;
}

[dir="rtl"] .chat-name {
    order: 1;
}

[dir="rtl"] .chat-time {
    order: 2;
}

/* RTL timeline - time positioned on left side of info block */
[dir="rtl"] .chat-time {
    text-align: right;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}

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

.chat-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.chat-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.bot-indicator {
    background: var(--secondary-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.chat-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.chat-preview {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-unread-badge {
    background: var(--primary-color);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    flex-shrink: 0;
    margin-left: auto;
}

/* RTL: Position unread badge on the left side */
[dir="rtl"] .chat-unread-badge {
    margin-left: 0;
    margin-right: auto;
}

.chat-tabs {
    display: flex;
    flex: 1;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

[dir="rtl"] .chat-tabs {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    justify-content: space-between;
}

.chat-tab-btn {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.chat-tab-btn i {
    font-size: 14px;
    flex-shrink: 0;
}

.chat-tab-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small screen optimization for chat tabs */
@media (max-width: 360px) {
    .chat-tab-btn {
        padding: var(--spacing-xs) 4px;
        font-size: 10px;
        gap: 2px;
    }

    .chat-tab-btn i {
        font-size: 12px;
    }
}

[dir="rtl"] .chat-tab-btn {
    flex-direction: row-reverse;
}

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

/* ==================== Profile Tab ==================== */
#profile-tab {
    overflow-y: auto;
    padding-bottom: calc(var(--nav-height) + var(--spacing-lg));
}

.profile-header {
    background: var(--bg-primary);
    padding: var(--spacing-lg);
    text-align: center;
}

.profile-photos {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-lg);
}

.main-photo {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-xl);
    background: var(--bg-tertiary);
    overflow: hidden;
    position: relative;
}

.main-photo img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    object-fit: cover;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--text-tertiary);
}

.photo-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm);
    pointer-events: none;
}

.photo-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: background var(--transition-fast);
}

.photo-nav-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.photo-indicators {
    position: absolute;
    bottom: var(--spacing-sm);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
}

.add-photo-btn {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--primary-color);
    color: white;
    border: 3px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.profile-info {
    margin-bottom: var(--spacing-md);
}

.profile-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.profile-name-row h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.profile-age {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-weight: 500;
}

.profile-location {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.profile-badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.badge.premium-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #333;
}

.badge.online-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

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

.profile-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

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

.section-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-section-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-bio {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.profile-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    text-align: center;
    padding: var(--spacing-md) 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.stat-wallet {
    cursor: pointer;
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    position: relative;
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.1) 0%, rgba(255, 75, 106, 0.05) 100%);
    border: 2px solid rgba(255, 75, 106, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.stat-wallet:hover {
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.15) 0%, rgba(255, 75, 106, 0.1) 100%);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-wallet:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.2) 0%, rgba(255, 75, 106, 0.15) 100%);
}

.stat-wallet-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(255, 183, 0, 0.4);
}

.stat-wallet-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-color);
}

.gifts-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.gift-item {
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: relative;
}

.gift-item[data-count]:not([data-count="1"])::after {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-color);
    color: white;
    font-size: 10px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ==================== Bottom Navigation (Task 1.3: Simplified to 3 tabs) ==================== */
.bottom-nav {
    height: auto;
    min-height: 70px;
    background: #ffffff !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.08);
}

.bottom-nav-inner {
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    gap: 8px;
}

/* Desktop Responsive - Large screens */
@media (min-width: 1024px) {
    .bottom-nav-inner {
        max-width: 500px;
    }
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: 12px;
    min-width: 70px;
}

.nav-item:hover {
    background: var(--bg-secondary);
}

.nav-item.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 12px;
}

.nav-item.active span {
    color: white !important;
}

.nav-item.active .nav-icon i {
    color: white !important;
}

.nav-icon {
    font-size: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item span:last-child {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--error-color);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

.nav-badge.hidden {
    display: none;
}

/* Active state animation */
.nav-item.active .nav-icon {
    animation: navPulse 0.3s ease;
}

@keyframes navPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Mobile Responsive */
@media (max-width: 400px) {
    .nav-item {
        padding: 6px 8px;
        min-width: 60px;
    }
    
    .nav-item span:last-child {
        font-size: 10px;
    }
    
    .nav-item .nav-icon {
        font-size: 20px;
    }
}

@media (min-width: 401px) and (max-width: 600px) {
    .nav-item span:last-child {
        font-size: 11px;
    }
    
    .nav-item .nav-icon {
        font-size: 22px;
    }
}

/* ==================== Modals ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal {
    width: 100%;
    max-height: 90vh;
    background: var(--bg-primary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.modal-content {
    padding: var(--spacing-lg);
    padding-bottom: 100px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Discover Filters Modal */
.filters-modal-content {
    padding: 0;
    background: #f8f9fa;
    height: auto;
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

.filters-modal-content .modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: 0;
    background: white;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
}

.filters-modal-content .modal-header h3 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.filters-modal-content .modal-header .icon-btn {
    order: 2;
    z-index: 1;
    background: #f1f5f9;
    color: #64748b;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.filters-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    gap: var(--spacing-md);
}

.filter-section {
    background: white;
    padding: var(--spacing-lg);
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
}

.filter-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.filter-select:hover {
    border-color: #cbd5e1;
}

.single-range-container {
    width: 100%;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    box-sizing: border-box;
    min-height: 40px;
}

.distance-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.distance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.distance-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.distance-slider:hover::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.distance-slider:hover::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.filter-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.filter-section-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-section-header h4 i {
    color: var(--primary-color);
}

.filter-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(255, 75, 106, 0.08);
    padding: 6px 14px;
    border-radius: 10px;
}

.btn-text.highlight {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 16px;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    /* Increased gap for better button separation */
}

.btn-text.secondary {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
}

/* Dual Range Slider */
.dual-range-container {
    padding: 10px 0 20px;
}

.dual-range {
    position: relative;
    height: 24px;
}

.dual-range input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    z-index: 2;
    height: 6px;
    top: 9px;
}

.dual-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary-color);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.25);
    transition: all 0.2s ease;
}

.dual-range input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 75, 106, 0.35);
}

.dual-range input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.range-track {
    position: absolute;
    height: 6px;
    background: var(--primary-color);
    top: 9px;
    border-radius: 10px;
    z-index: 1;
}

.dual-range::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    top: 9px;
    border-radius: 10px;
    z-index: 0;
}

/* Outlook Tags */
.outlook-tags-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 4px;
}

.outlook-tag {
    padding: 16px 12px;
    background: #ffffff;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
    user-select: none;
    z-index: 10;
}

.outlook-tag:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.outlook-tag.selected {
    background: #fff5f6;
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(255, 75, 106, 0.12);
    transform: translateY(-2px);
    z-index: 11;
}

.outlook-tag.selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    color: var(--primary-color);
}

.outlook-tag:active {
    transform: scale(0.96) translateY(0);
    background: #fff5f6;
}

.outlook-tag:hover:not(.selected) {
    background: var(--border-color);
}

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

.modal-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

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

/* Premium Message Modal */
.premium-message-content {
    padding: var(--spacing-lg) 0;
}

.premium-message-content p {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.premium-message-content textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
    resize: vertical;
    margin-bottom: var(--spacing-lg);
    transition: border-color var(--transition-fast);
}

.premium-message-content textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 75, 106, 0.1);
}

.premium-message-content textarea::placeholder {
    color: var(--text-muted);
}

/* Chat Modal */
.chat-modal-content {
    display: flex;
    flex-direction: column;
    height: 85vh;
    padding: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

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

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-tertiary);
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
}

.user-status {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: var(--radius-full);
    margin-right: 6px; /* Add spacing to the right for RTL */
    vertical-align: middle;
}

.status-dot.offline {
    background: var(--text-tertiary);
}

.chat-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.chat-action-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

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

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.message {
    max-width: 80%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    line-height: 1.4;
    position: relative;
    direction: rtl;
    text-align: right;
    word-break: break-word;
}

.message.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

.message.received {
    align-self: flex-start;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: var(--radius-sm);
}

.message.system {
    align-self: center;
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.message-time {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-right: var(--spacing-xs);
}

.message.gift {
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.15), rgba(255, 142, 83, 0.15));
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
}

.gift-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gift-content {
    font-size: 16px;
    color: var(--text-primary);
}

/* ==================== CHAT ENHANCEMENTS (Task 2.2) ==================== */

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    animation: fadeIn 0.3s ease;
}

.typing-bubble {
    background: var(--bg-tertiary);
    border-radius: 18px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: var(--text-tertiary);
    border-radius: 50%;
    animation: typingDot 1.4s infinite;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.typing-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Message Status Icons */
.message-status {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    font-size: 12px;
    opacity: 0.8;
}

.message-status i {
    font-size: 12px;
}

.message-status-read {
    color: #60a5fa !important;
}

.message.sent .message-time {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

/* Enhanced Message Time */
.message-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
    white-space: nowrap;
}

/* Image Preview Modal */
.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.image-preview-content {
    background: white;
    border-radius: 16px;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.image-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.image-preview-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.image-preview-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.preview-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
}

.image-preview-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* Voice Message Waveform */
.voice-message-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    min-width: 200px;
}

.message.sent .voice-message-container {
    background: rgba(255, 255, 255, 0.2);
}

.message.received .voice-message-container {
    background: var(--bg-secondary);
}

.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.message.sent .voice-play-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
}

.message.received .voice-play-btn {
    background: var(--primary-color);
    color: white;
}

.voice-play-btn:hover {
    transform: scale(1.1);
}

.voice-play-btn i {
    font-size: 14px;
}

.voice-waveform {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
}

.waveform-bar {
    width: 3px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0.6;
    transition: all 0.2s;
}

.voice-message-container:hover .waveform-bar {
    opacity: 1;
}

.voice-duration {
    font-size: 12px;
    opacity: 0.8;
    white-space: nowrap;
    min-width: 35px;
    text-align: center;
}

/* Message Image */
.message-image {
    max-width: 250px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.message-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s;
}

.message-image:hover img {
    transform: scale(1.05);
}

/* Smooth message animations */
.message {
    animation: messageSlideIn 0.3s ease;
}

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

/* RTL Support for Chat Enhancements */
[dir="rtl"] .typing-indicator {
    flex-direction: row-reverse;
}

[dir="rtl"] .message-status {
    margin-right: 0;
    margin-left: 4px;
}

[dir="rtl"] .voice-message-container {
    flex-direction: row-reverse;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .typing-bubble {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .typing-dots span {
        background: rgba(255, 255, 255, 0.6);
    }
    
    .image-preview-content {
        background: #1f2937;
    }
    
    .voice-play-btn {
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }
    
    .message.received .voice-message-container {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .image-preview-content {
        max-width: 95%;
        max-height: 95%;
    }
    
    .preview-image {
        max-height: 60vh;
    }
    
    .voice-message-container {
        min-width: 180px;
    }
    
    .message-image {
        max-width: 200px;
    }
}

/* Accessibility */
.voice-play-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.message-status[aria-label] {
    cursor: help;
}

/* ==================== END CHAT ENHANCEMENTS ==================== */


.gift-display {
    font-size: 28px;
    margin-bottom: var(--spacing-xs);
}

.typing-indicator-chat {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.typing-dots {
    display: flex;
    gap: 3px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-tertiary);
    border-radius: var(--radius-full);
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.chat-input-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.input-action-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

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

#chat-input {
    flex: 1;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-md);
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 48px;
}

#chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.send-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    border: none;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.send-btn:active {
    transform: scale(0.95);
}

/* Credits Modal */
.credits-modal-content {
    padding: var(--spacing-lg);
}

.current-balance {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.balance-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.balance-amount {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.credits-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.credit-option {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.credit-option:hover {
    border-color: var(--primary-color);
}

.credit-option.popular {
    border-color: var(--primary-color);
    background: rgba(255, 75, 106, 0.05);
}

.package-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--text-tertiary);
    color: white;
    font-size: 10px;
    padding: 4px 12px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}

.package-badge.best-value {
    background: var(--primary-color);
}

.credit-option .amount {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--primary-color);
}

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

.credit-option .price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-top: var(--spacing-xs);
}

.credit-option .per-credit {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.payment-methods {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.payment-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    font-size: 32px;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
}

.payment-secure {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* Gifts Modal */
.gifts-modal-content {
    padding: var(--spacing-md);
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.gifts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.gift-option {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    padding: var(--spacing-xs);
    min-width: 0;
}

.gift-option .gift-display {
    font-size: 28px;
    line-height: 1;
}

.gift-option .gift-info {
    display: none;
}

.gift-option .gift-name {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.gift-option .gift-cost {
    font-size: 9px;
    color: var(--primary-color);
}

.gift-option:hover {
    background: var(--bg-primary);
    border-color: var(--primary-color);
}

.gift-option.selected {
    background: rgba(255, 75, 106, 0.1);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.selected-gift-info {
    background: var(--bg-tertiary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 14px;
}

.selected-gift-info p {
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.selected-gift-info span {
    font-weight: 700;
    color: var(--primary-color);
}

/* Mobile Responsive - Delete button highly visible */
@media (max-width: 768px) {
    .view-story-progress {
        height: 3px !important;
        padding: 0 16px !important;
    }
    
    .view-story-header {
        height: 50px !important;
        padding: 0 16px !important;
    }
    
    .view-story-header .icon-btn {
        width: 28px !important;
        height: 28px !important;
    }
    
    .delete-story-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        background: rgba(220, 39, 67, 0.8) !important;
        border: none !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .story-user-info {
        margin-left: 30px !important;
    }
    
    .story-user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .view-story-media {
        top: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .view-story-media img,
    .view-story-media video {
        position: relative !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    .view-story-progress {
        height: 3px !important;
        padding: 0 12px !important;
    }
    
    .view-story-header {
        height: 45px !important;
        padding: 0 12px !important;
    }
    
    .view-story-header .icon-btn {
        width: 24px !important;
        height: 24px !important;
    }
    
    .delete-story-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
        background: rgba(220, 39, 67, 0.8) !important;
        border: none !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .story-user-info {
        margin-left: 20px !important;
    }
    
    .story-user-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .view-story-media {
        top: 49px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .view-story-media img,
    .view-story-media video {
        position: relative !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}

/* Mobile responsive discover filters */
@media (max-width: 768px) {
    .filters-body {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        justify-content: space-evenly;
        overflow-y: auto;
    }
    
    .filter-section {
        padding: var(--spacing-md);
        margin-bottom: 0;
        flex: 1;
    }
    
    .filter-section h4 {
        font-size: 16px;
    }
    
    .filter-select {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .single-range-container {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .distance-slider {
        height: 5px;
    }
    
    .distance-slider::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }
    
    .distance-slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
    }
    
    #discover-filters-modal .modal-header {
        height: 50px;
        padding: 0 12px;
    }
    
    #discover-filters-modal .modal-header h3 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .filters-body {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
        justify-content: space-evenly;
    }
    
    .filter-section {
        padding: var(--spacing-sm);
        border-radius: 16px;
        flex: 1;
    }
    
    .filter-section h4 {
        font-size: 14px;
    }
    
    .filter-select {
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    .single-range-container {
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .distance-slider {
        height: 4px;
    }
    
    .distance-slider::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }
    
    .distance-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }
    
    #discover-filters-modal .modal-header {
        height: 45px;
        padding: 0 8px;
    }
    
    #discover-filters-modal .modal-header h3 {
        font-size: 14px;
        left: 50%;
    }
}

/* Samsung Galaxy specific fixes */
@supports (-webkit-appearance: none) and (not (caret-color: red)) {
    .single-range-container {
        min-height: 50px !important;
        padding: 15px 0 !important;
        display: -webkit-box !important;
        -webkit-box-align: center !important;
        -webkit-box-pack: center !important;
    }
    
    .distance-slider {
        height: 8px !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    .distance-slider::-webkit-slider-thumb {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        margin-top: -6px !important;
    }
}

/* Additional mobile fallbacks */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .single-range-container {
        min-height: 45px !important;
        padding: 14px 0 !important;
    }
    
    .filter-section {
        padding-bottom: calc(var(--spacing-lg) + 10px) !important;
    }
}
@media (max-width: 480px) {
    .gifts-modal-content {
        padding: var(--spacing-sm);
        max-width: 95vw;
    }

    .gifts-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .gift-option {
        font-size: 20px;
        padding: 6px;
    }

    .gift-option .gift-display {
        font-size: 22px;
    }
}

/* Video Call Modal */
.video-modal-content {
    padding: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    margin: 0;
}

#video-call-modal {
    border-radius: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    margin: 0;
}

#video-call-modal .modal-content {
    padding: 0;
    padding-bottom: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
}

.video-call-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
}

.video-main {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-main video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.video-placeholder i {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
}

.video-controls {
    position: absolute;
    bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(8px);
    z-index: 100;
}

.video-control-btn {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all var(--transition-fast);
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.video-control-btn.end-call {
    background: var(--error-color);
}

.video-self {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 120px;
    height: 160px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.video-self video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-info {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    color: white;
}

/* Position call info overlay inside video container */
.video-call-container .profile-info {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    color: white;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
}

.call-timer,
.call-cost {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: white;
}

.credits-warning {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 193, 7, 0.9);
    color: #333;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Settings Modal */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.setting-item label:first-child {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.switch {
    position: relative;
    width: 52px;
    height: 28px;
}

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

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: var(--transition-fast);
    border-radius: var(--radius-full);
}

.switch .slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: var(--transition-fast);
    border-radius: var(--radius-full);
}

.switch input:checked+.slider {
    background-color: var(--primary-color);
}

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

.setting-item select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* Notifications Modal */
.notifications-modal-content {
    max-height: 80vh;
}

/* Gift Animation */
.gift-modal {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s forwards;
}

.gift-modal.hidden {
    display: none;
}

.gift-content {
    text-align: center;
    animation: giftPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.gift-float-icon {
    font-size: 8rem;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    animation: float 2s ease-in-out infinite;
}

.gift-title {
    color: white;
    font-size: 2.5rem;
    margin-top: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: slideUp 0.5s ease 0.3s forwards;
}

#gift-animation-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-top: 10px;
    opacity: 0;
    animation: slideUp 0.5s ease 0.5s forwards;
}

@keyframes giftPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.notifications-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.notif-tab-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

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

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

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.notification-item.unread {
    background: rgba(255, 75, 106, 0.05);
    border-right: 3px solid var(--primary-color);
}

.notification-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    position: relative;
}

.notification-icon {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}

.notification-type-match {
    background: var(--primary-color);
}

.notification-type-message {
    background: var(--info-color);
}

.notification-type-like {
    background: var(--success-color);
}

.notification-type-gift {
    background: var(--secondary-color);
}

.notification-type-system {
    background: var(--text-tertiary);
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.notification-time {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.notification-action-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Language Modal */
.language-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.language-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.language-option:hover {
    background: var(--border-color);
}

.lang-flag {
    font-size: 32px;
}

.lang-info {
    flex: 1;
}

.lang-name {
    font-weight: 600;
    display: block;
}

.lang-native {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.lang-check {
    color: var(--primary-color);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.language-option.selected .lang-check {
    opacity: 1;
}

/* ==================== Toast Notifications ==================== */
#toast-container {
    position: fixed;
    top: var(--safe-area-top);
    left: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    pointer-events: none;
}

.toast {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.3s ease;
    pointer-events: auto;
    border-right: 4px solid;
}

@keyframes toastIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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

.toast.warning {
    border-color: var(--warning-color);
}

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

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

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

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

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

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

.toast-message {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--spacing-xs);
    font-size: 16px;
}

/* ==================== ENHANCED ERROR TOASTS (Task 1.2) ==================== */

/* Enhanced Error Toast with Icon and Action */
.toast-error-enhanced {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    min-width: 320px;
    max-width: 500px;
}

.toast-error-enhanced .toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.toast-error-enhanced.toast-error .toast-icon {
    background: rgba(220, 53, 69, 0.1);
    color: var(--error-color);
}

.toast-error-enhanced.toast-warning .toast-icon {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
}

.toast-error-enhanced .toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-error-enhanced .toast-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.toast-error-enhanced .toast-message {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-error-enhanced .toast-action {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 8px;
}

.toast-error-enhanced .toast-action:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.toast-error-enhanced .toast-action:active {
    transform: scale(0.95);
}

.toast-error-enhanced .toast-close {
    align-self: flex-start;
    margin-top: 2px;
}

/* Toast Exit Animation */
.toast-exit {
    animation: toastOut 0.3s ease forwards;
}

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

/* RTL Support */
[dir="rtl"] .toast {
    border-right: none;
    border-left: 4px solid;
}

[dir="rtl"] .toast-error-enhanced .toast-action {
    margin-left: 0;
    margin-right: 8px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    #toast-container {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
    }
    
    .toast-error-enhanced {
        min-width: auto;
        max-width: 100%;
    }
    
    .toast-error-enhanced .toast-action {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .toast-error-enhanced.toast-error .toast-icon {
        background: rgba(220, 53, 69, 0.2);
    }
    
    .toast-error-enhanced.toast-warning .toast-icon {
        background: rgba(255, 193, 7, 0.2);
    }
}

/* ==================== Loading Overlay ==================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

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

.loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
}

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

.spinner-ring:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-top-color: var(--secondary-color);
    animation-duration: 0.8s;
    animation-direction: reverse;
}

.spinner-ring:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-top-color: var(--primary-color);
    animation-duration: 0.6s;
}

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

.loading-content p {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ==================== NEW LOADING STATES (Task 1.1) ==================== */

/* Loading Spinner Component */
.loading-spinner-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

.loading-spinner-new i {
    display: inline-block;
}

.spinner-small { font-size: 16px; }
.spinner-medium { font-size: 24px; }
.spinner-large { font-size: 32px; }

.spinner-primary { color: var(--primary-color); }
.spinner-white { color: white; }
.spinner-gray { color: var(--text-secondary); }

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

/* Skeleton Screens */
.skeleton-card {
    background: var(--bg-primary);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.skeleton-image {
    width: 100%;
    height: 400px;
    background: var(--gray-200);
}

.skeleton-content {
    padding: 16px;
}

.skeleton-line {
    height: 16px;
    background: var(--gray-200);
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-title {
    width: 60%;
    height: 24px;
}

.skeleton-text {
    width: 100%;
}

.skeleton-text.short {
    width: 40%;
}

/* Shimmer Animation */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-300) 50%,
        var(--gray-200) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* RTL Support for Shimmer */
[dir="rtl"] .shimmer {
    animation: shimmer-rtl 1.5s infinite;
}

@keyframes shimmer-rtl {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton List Items */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gray-200);
    flex-shrink: 0;
}

.skeleton-list-item .skeleton-content {
    flex: 1;
    padding: 0;
}

.skeleton-name {
    width: 40%;
    height: 18px;
}

.skeleton-message {
    width: 70%;
    height: 14px;
}

/* Progress Bar for Uploads */
.progress-container {
    margin: 16px 0;
}

.progress-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.progress-bar-new {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-new .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-percentage {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .skeleton-image,
    .skeleton-line,
    .skeleton-avatar {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .shimmer {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 100%
        );
        background-size: 200% 100%;
    }
}

/* ==================== Admin Tab ==================== */
.admin-content {
    padding: var(--spacing-md);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.admin-stat-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: center;
}

.admin-stat-card i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.stat-number {
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: block;
}

.admin-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.admin-section h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.admin-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

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

.takeover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

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

.takeover-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.takeover-details span {
    font-weight: 600;
    display: block;
}

.takeover-details small {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ==================== Enhanced Forms ==================== */
.enhanced-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.char-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-align: left;
}

/* ==================== Typing Indicator ==================== */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--text-tertiary);
    border-radius: var(--radius-full);
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* ==================== Hidden State ====================*/
.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==================== Tablet Styles (768px+) ==================== */
@media (min-width: 768px) {
    .online-users-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stories-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .matches-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gifts-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .modal {
        max-width: 580px;
        margin: auto;
        border-radius: var(--radius-xl);
    }

    .chat-modal-content {
        max-width: 580px;
        margin: auto;
        height: 80vh;
        border-radius: var(--radius-xl);
    }

    .video-self {
        width: 160px;
        height: 200px;
    }
}

/* ==================== Desktop Styles (1024px+) ==================== */
@media (min-width: 1024px) {
    body {
        background: var(--bg-tertiary);
    }

    #app {
        max-width: 580px;
        margin: 0 auto;
        height: 100vh;
        height: 100dvh;
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-xl);
    }

    .online-users-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .matches-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== PWA Install Banner ==================== */
#pwa-install-banner {
    position: fixed;
    bottom: calc(var(--nav-height) + var(--safe-area-bottom) + var(--spacing-md));
    left: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    z-index: 999;
    animation: slideUp 0.3s ease;
}

#pwa-install-banner.hidden {
    display: none;
}

.pwa-install-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.pwa-install-text {
    flex: 1;
    min-width: 0;
}

.pwa-install-text h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: 2px;
}

.pwa-install-text p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pwa-install-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

#pwa-install-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

#pwa-install-btn:active {
    transform: translateY(0);
}

#pwa-install-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==================== Offline Indicator ==================== */
#offline-indicator {
    position: fixed;
    top: var(--safe-area-top);
    left: 0;
    right: 0;
    background: var(--warning-color);
    color: #333;
    padding: var(--spacing-xs) var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: none;
    z-index: 1001;
}

#offline-indicator.show {
    display: block;
}

/* ==================== Bot Items (Admin) ==================== */
.bots-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 300px;
    overflow-y: auto;
}

.bot-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.bot-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-avatar i {
    font-size: 24px;
    color: var(--text-tertiary);
}

.bot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bot-name {
    font-weight: 600;
    color: var(--text-primary);
}

.bot-age {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.bot-actions {
    display: flex;
    gap: var(--spacing-xs);
}

/* ==================== Takeover Items ==================== */
.takeover-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.takeover-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.takeover-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.takeover-details {
    flex: 1;
}

.takeover-details span {
    display: block;
    font-weight: 600;
}

.takeover-details small {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.takeover-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.takeover-actions button {
    flex: 1;
}

/* ==================== Bot Conversations ==================== */
.conversations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 400px;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.conversation-item:hover {
    background: var(--bg-tertiary);
}

.conv-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conv-avatar i {
    font-size: 20px;
    color: var(--text-tertiary);
}

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

.conv-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.conv-preview {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.conv-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* ==================== Admin Takeover Mode Chat Header ==================== */
.chat-header.takeover-mode {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.chat-header.takeover-mode #chat-user-name {
    color: white;
}

.chat-header.takeover-mode #chat-user-status {
    color: rgba(255, 255, 255, 0.8);
}

.chat-header.takeover-mode #chat-back-btn {
    color: white;
}


/* Report Menu Styles */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-menu-container {
    position: relative;
}

.report-dropdown {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    min-width: 180px;
    max-width: calc(100vw - 32px);
    z-index: 1000;
    overflow: hidden;
    padding: 6px;
}

.report-dropdown.hidden {
    display: none;
}

.menu-section-label {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.report-option {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    text-align: right;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.report-option i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    opacity: 0.7;
}

.report-option:hover {
    background: var(--bg-tertiary);
}

.report-option:hover i {
    opacity: 1;
}

.report-option.block-option {
    color: var(--error);
}

.report-option.block-option:hover {
    background: rgba(239, 68, 68, 0.1);
}

.report-option[data-reason="harassment"] {
    color: var(--warning);
}

.report-option[data-reason="harassment"]:hover {
    background: rgba(239, 68, 68, 0.08);
}

.menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 8px 12px;
}

.block-option {
    color: var(--error);
    font-weight: 600;
}

.block-option:hover {
    background: rgba(239, 68, 68, 0.1);
}


/* ==================== Emoji Picker ==================== */
.emoji-picker-panel {
    position: absolute;
    bottom: 60px;
    left: 10px;
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 280px;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.emoji-item {
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.emoji-item:hover {
    background: var(--bg-tertiary);
}

/* ==================== Voice Recording ==================== */
.input-action-btn.recording {
    background: var(--error-color) !important;
    color: white !important;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}


/* ==================== Message Image ==================== */
.message-image {
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.message-image img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.message-image img:hover {
    transform: scale(1.02);
}


/* ==================== Dark Mode Extended ==================== */
[data-theme="dark"] .card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .match-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .chat-modal-content,
[data-theme="dark"] .settings-modal-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .bottom-nav {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .header {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .message.received {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .interest-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

[data-theme="dark"] .interest-tag.selected {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"] .chat-input-container {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .action-btn {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .swipe-btn {
    background: var(--bg-secondary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .tab-btn:not(.active) {
    color: var(--text-tertiary);
}

[data-theme="dark"] .story-item {
    border-color: var(--border-color);
}

[data-theme="dark"] .emoji-picker-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}


/* ==================== LTR Layout Support ==================== */
[dir="ltr"] .bottom-nav {
    flex-direction: row;
}

[dir="ltr"] .message.sent {
    margin-left: auto;
    margin-right: 0;
}

[dir="ltr"] .message.received {
    margin-right: auto;
    margin-left: 0;
}

[dir="ltr"] .chat-input-container {
    flex-direction: row;
}

[dir="ltr"] .profile-actions {
    text-align: left;
}

[dir="ltr"] .modal-header {
    flex-direction: row;
}

[dir="ltr"] .close-btn {
    margin-left: auto;
    margin-right: 0;
}

[dir="ltr"] .settings-item {
    flex-direction: row;
}

[dir="ltr"] .nav-item {
    text-align: center;
}

[dir="ltr"] .filter-btn,
[dir="ltr"] .tab-btn {
    text-align: center;
}

[dir="ltr"] .swipe-actions {
    flex-direction: row;
}

[dir="ltr"] .input-action-btn:first-child {
    margin-right: 8px;
    margin-left: 0;
}

[dir="ltr"] .message-time {
    text-align: right;
}

body.ltr {
    direction: ltr;
    text-align: left;
}

body.rtl {
    direction: rtl;
    text-align: right;
}


/* ==================== Voice Message Styles ==================== */
.message-voice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    min-width: 150px;
}

.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.voice-play-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.voice-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
}

.voice-wave span {
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    animation: voiceWave 0.5s ease-in-out infinite alternate;
}

.voice-wave span:nth-child(1) {
    animation-delay: 0s;
    height: 12px;
}

.voice-wave span:nth-child(2) {
    animation-delay: 0.1s;
    height: 18px;
}

.voice-wave span:nth-child(3) {
    animation-delay: 0.2s;
    height: 10px;
}

.voice-wave span:nth-child(4) {
    animation-delay: 0.3s;
    height: 16px;
}

.voice-wave span:nth-child(5) {
    animation-delay: 0.4s;
    height: 8px;
}

@keyframes voiceWave {
    0% {
        transform: scaleY(0.5);
    }

    100% {
        transform: scaleY(1);
    }
}

.voice-duration {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    min-width: 35px;
}

/* Received voice message styling */
.message.received .voice-play-btn {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

.message.received .voice-wave span {
    background: rgba(0, 0, 0, 0.3);
}

.message.received .voice-duration {
    color: var(--text-secondary);
}


/* RTL Chat Styles for Hebrew */
[dir="rtl"] .chat-messages {
    direction: rtl;
}

[dir="rtl"] .message {
    text-align: right;
}

[dir="rtl"] .message.sent {
    align-self: flex-start;
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-sm);
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .message.received {
    align-self: flex-end;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-sm);
    margin-left: auto;
    margin-right: 0;
}

[dir="rtl"] .message-time {
    text-align: left;
}

[dir="rtl"] .chat-input-container {
    direction: rtl;
}

[dir="rtl"] .chat-input {
    text-align: right;
}

[dir="rtl"] .gift-bubble {
    direction: rtl;
}


/* ============================================
   BOT ADMIN PANEL STYLES
   ============================================ */

/* ==================== Bot Admin Section ==================== */

.bots-count {
    padding: 8px 16px;
    margin-bottom: 12px;
}

.bots-count .badge {
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Bot Item Card */
.bot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.bot-item:hover {
    background: var(--gray-100);
    transform: translateY(-1px);
}

/* Bot Avatar */
.bot-item .bot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-200);
    position: relative;
}

.bot-item .bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bot-item .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #ff8a9e);
    color: white;
    font-size: 20px;
}

/* Bot Info */
.bot-item .bot-info {
    flex: 1;
    min-width: 0;
}

.bot-item .bot-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-900);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bot-item .bot-details {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--gray-500);
}

.bot-item .bot-age {
    color: var(--gray-600);
}

.bot-item .bot-city {
    color: var(--gray-500);
}

/* Bot Actions */
.bot-item .bot-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Photo Replace Button (Icon Only) */
.bot-item .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bot-item .btn-icon:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.bot-item .btn-icon.btn-photo:hover {
    background: #4CAF50;
    border-color: #4CAF50;
}

/* Small Primary Button */
.bot-item .btn-primary.btn-small {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-item .btn-primary.btn-small i {
    font-size: 12px;
}

/* ==================== Admin Stats Enhancement ==================== */

.admin-stat-card {
    position: relative;
    overflow: hidden;
}

.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #ff8a9e);
}

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

.bots-list:empty::after {
    content: 'טוען בוטים...';
    display: block;
    text-align: center;
    padding: 20px;
    color: var(--gray-500);
}

/* ==================== Responsive Adjustments ==================== */

@media (max-width: 480px) {
    .bot-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .bot-item .bot-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }

    .bot-item .btn-primary.btn-small {
        flex: 1;
        justify-content: center;
    }
}


/* ==================== Create Story Modal ==================== */
#create-story-modal {
    align-items: center;
    justify-content: center;
}

#create-story-modal .modal-content {
    max-width: 400px;
    width: 90%;
    padding: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg) + 60px); /* Space for button */
}

.story-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
}

.story-upload-area:hover {
    border-color: var(--primary);
    background: var(--bg-secondary-hover);
}

.story-upload-area i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.story-upload-area p {
    color: var(--text-secondary);
    font-size: 14px;
}

.story-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 60vh;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

#story-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.story-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    text-align: center;
    color: white;
    font-size: 12px;
}

.story-options {
    margin-top: var(--spacing-lg);
}

/* Story Modal - Complete Redesign with Picture Frame */
#view-story-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    background: #000 !important;
    z-index: 10001 !important; /* Higher than modal-overlay */
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

#view-story-modal:not(.hidden) {
    display: block !important;
}

/* Override modal-content for story modal */
#view-story-modal .modal-content {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    flex: none !important;
}

.view-story-content {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* Progress bar - at the very top */
.view-story-progress {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 150 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Black header - fixed layout with swapped positions */
.view-story-header {
    position: absolute !important;
    top: 4px !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    backdrop-filter: blur(10px) !important;
}

/* Avatar - left corner */
.story-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: white !important;
    order: 1 !important;
    flex-shrink: 0 !important;
}

.story-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--gray-600) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 2px solid white !important;
    flex-shrink: 0 !important;
}

/* Delete button - simplified design matching close button */
.delete-story-btn {
    background: rgba(220, 39, 67, 0.8) !important;
    color: white !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    z-index: 1000 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.delete-story-btn:hover {
    background: rgba(220, 39, 67, 0.9) !important;
    transform: translate(-50%, -50%) scale(1.05) !important;
}

/* Fix avatar and user info visibility */
.story-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: white !important;
    order: 1 !important;
    flex-shrink: 0 !important;
    margin-left: 40px !important;
}

.story-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--gray-600) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 2px solid white !important;
    flex-shrink: 0 !important;
}

.story-user-details {
    display: flex !important;
    flex-direction: column !important;
    color: white !important;
}

.story-user-details h4 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: white !important;
}

.story-user-details span {
    margin: 0 !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Close button - right corner */
.view-story-header .icon-btn {
    background: rgba(220, 39, 67, 0.8) !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    order: 3 !important;
    flex-shrink: 0 !important;
}

.view-story-header .icon-btn:hover {
    background: rgba(220, 39, 67, 0.9) !important;
}

/* Picture frame - media container without border cut-off */
/* Story Media Container - Full Screen Display */
.view-story-media {
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.view-story-media img,
.view-story-media video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    position: relative !important;
    display: block !important;
}

.view-story-progress .progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    flex: 1;
    overflow: hidden;
}

.view-story-progress .progress-bar .progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0;
    transition: width 0.1s linear;
}

.view-story-progress .progress-bar.completed .progress-fill {
    width: 100%;
}

.view-story-progress .progress-bar.active .progress-fill {
    animation: progressAnimation 6s linear forwards;
}

@keyframes progressAnimation {
    from { width: 0; }
    to { width: 100%; }
}

/* Click areas for navigation */
.story-click-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
}

.story-click-area-left,
.story-click-area-right {
    flex: 1;
    cursor: pointer;
}

.story-click-area-left {
    margin-right: 50%;
}

.story-click-area-right {
    margin-left: 50%;
}

/* Story Reply Container */
.story-reply-container {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 30;
}

[dir="rtl"] .story-reply-container {
    flex-direction: row-reverse;
}

#story-reply-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    color: #333;
}

#story-reply-input::placeholder {
    color: #999;
}

.story-reply-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color, #ff4b6a);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.story-reply-btn:hover {
    transform: scale(1.05);
    background: var(--primary-dark, #e63e5c);
}

.story-reply-btn:active {
    transform: scale(0.95);
}

.story-reply-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .view-story-content {
        max-width: 400px;
        max-height: 90vh;
        border-radius: 16px;
        margin: auto;
    }
}


/* ==================== Onboarding Photo Upload ==================== */
.onboarding-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.onboarding-photo-grid {
    display: flex;
    justify-content: center;
}

.onboarding-photo-slot {
    width: 200px;
    height: 250px;
    border: 2px dashed var(--gray-400);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--gray-100);
}

.onboarding-photo-slot:hover {
    border-color: var(--primary);
    background: rgba(255, 87, 122, 0.05);
}

.onboarding-photo-slot .photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--gray-500);
}

.onboarding-photo-slot .photo-placeholder i {
    font-size: 40px;
    color: var(--primary);
}

.onboarding-photo-slot .photo-placeholder span {
    font-size: 14px;
}

.onboarding-photo-slot .photo-loading {
    font-size: 30px;
    color: var(--primary);
}

.photo-library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px 0;
}

.photo-library-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: var(--gray-100);
    border: 2px dashed var(--gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-library-item:hover {
    border-color: var(--primary-color);
    background: var(--gray-200);
    transform: translateY(-2px);
}

.photo-library-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.photo-library-item.empty-slot {
    background: var(--gray-50);
    border: 2px dashed var(--primary-color);
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.photo-library-item.empty-slot:hover {
    opacity: 1;
    transform: translateY(-2px);
    background: rgba(255, 75, 106, 0.05);
}

.photo-library-item.empty-slot i {
    font-size: 28px;
    color: var(--primary-color);
    background: rgba(255, 75, 106, 0.12);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 12px;
}

.photo-main-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: var(--primary-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    z-index: 10;
}

.photo-library-item.empty-slot:hover i {
    color: var(--primary);
}

.photo-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.photo-library-item:hover .photo-delete-btn {
    opacity: 1;
}

.photo-main-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.photo-hint {
    font-size: 13px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ==================== Swipe Indicators ==================== */
.profile-card.swiping-right::after {
    content: 'לייק';
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%) rotate(-15deg);
    font-size: 48px;
    font-weight: bold;
    color: #4CAF50;
    border: 4px solid #4CAF50;
    padding: 10px 20px;
    border-radius: 10px;
    z-index: 100;
    pointer-events: none;
}

.profile-card.swiping-left::after {
    content: 'לא';
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%) rotate(15deg);
    font-size: 48px;
    font-weight: bold;
    color: #F44336;
    border: 4px solid #F44336;
    padding: 10px 20px;
    border-radius: 10px;
    z-index: 100;
    pointer-events: none;
}

/* ==================== User Info Modal Enhancements ==================== */
.user-info-header {
    text-align: center;
}

.user-info-photo-carousel {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.user-info-photo-carousel .carousel-images {
    width: 100%;
    height: 100%;
    position: relative;
}

.user-info-photo-carousel .carousel-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-info-photo-carousel .carousel-images img.active {
    opacity: 1;
}

.user-info-photo-carousel .carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}

.user-info-photo-carousel .carousel-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: background 0.2s;
}

.user-info-photo-carousel .carousel-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.user-info-photo-carousel .carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.user-info-photo-carousel .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s;
}

.user-info-photo-carousel .dot.active {
    background: white;
}

.user-info-single-photo {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.user-info-no-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--text-tertiary);
    margin: 0 auto;
}

.user-info-big-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    margin: -60px auto 15px auto;
    /* Negative margin pulls it up over the edge */
    display: block;
    background: #fff;
    z-index: 20;
    position: relative;
}

.user-info-no-photo.hidden {
    display: none !important;
}

.interest-tag-display {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}


/* Story Card Preview - Square with overlay avatar */
.story-card-preview {
    width: 100%;
    aspect-ratio: 1;
    /* High quality couple image from Unsplash */
    background-image: url('/assets/welcome_bg.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* High quality couple image from Unsplash */
    /* background-image removed - accidental edit */
    background-color: var(--dark-surface);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.story-card-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
}

.story-avatar-overlay {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--dark-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--dark-bg);
    cursor: pointer;
}

.story-avatar-overlay.unviewed {
    border: 2px solid transparent;
    background: linear-gradient(var(--dark-surface), var(--dark-surface)) padding-box,
        linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box;
}

.story-avatar-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-avatar-overlay i {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.story-item.unviewed .story-card-preview {
    box-shadow: 0 0 0 2px var(--primary-color);
}


/* Story overlay content - avatar + name inside the card */
.story-overlay-content {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.story-overlay-content .story-name {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}


/* Coupon Section */
.coupon-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coupon-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.coupon-input-group {
    display: flex;
    gap: 0.5rem;
}

.coupon-input-group input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 1rem;
    text-transform: uppercase;
}

.coupon-input-group button {
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
}

.coupon-message {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.coupon-message.error {
    color: #ff6b6b;
}

.coupon-message.success {
    color: #51cf66;
}

/* ==================== STORIES UI (UNIFIED WITH ONLINE USERS) ==================== */

#stories-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
    width: 100%;
}

.story-item {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: none;
    transition: all 0.3s ease;
    background: #1a1a2e;
}

.story-item:active {
    transform: scale(0.98);
}

.story-card-preview {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: #1a1a2e; /* Fallback for transparent images */
}

.story-card-preview img,
.story-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: transparent;
}

.story-item.unviewed .story-card-preview {
    background-color: #2d2d44; /* Slightly lighter for unviewed */
}

.story-item.unviewed .story-card-preview img {
    background-color: #2d2d44;
}

.story-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 48px;
}

/* Gradient overlay for text readability */
.story-card-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
}

.story-overlay-content {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align to right */
    gap: 8px;
    z-index: 5;
    flex-direction: row;
    /* Name left of avatar? */
}

/* Avatar with Ring */
.story-avatar-overlay {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 2px;
    /* Space for ring */
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-avatar-overlay img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    /* Inner white border */
    display: block;
}

.story-avatar-overlay i {
    color: #fff;
    font-size: 16px;
}

/* Unviewed Story Ring Effect */
.story-item.unviewed .story-avatar-overlay {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    animation: pulse-ring 2s infinite;
}

/* Remove old box shadow from card */
.story-item.unviewed .story-card-preview {
    box-shadow: none;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 39, 67, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(220, 39, 67, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 39, 67, 0);
    }
}

.story-name {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    text-align: right;
}

/* Responsive: 2 columns on very small screens */
@media (max-width: 360px) {
    #stories-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extended Profile Fields */
.extended-field-group {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
}

.group-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
}

.group-title i {
    color: var(--primary-color);
}

.optional-badge {
    font-size: 12px;
    background: var(--gray-200);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 8px;
    font-weight: normal;
}

/* Height Slider */
.height-slider-container {
    padding: 10px 0;
}

.height-display {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

input[type=range] {
    width: 100%;
    height: 6px;
    background: var(--gray-300);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 75, 120, 0.4);
    transition: transform 0.2s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.height-range-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 8px;
}

/* Edit Profile Modal */
.edit-section-divider {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-group.half {
    flex: 1;
}

/* Responsive */
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* Story Viewer Controls */
/* Story Viewer Controls - Removed duplicate .view-story-media */

.story-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    z-index: 10;
}

.story-nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.story-nav-btn.prev {
    right: 15px;
}

.story-nav-btn.next {
    left: 15px;
}

.story-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 12px;
}

/* Old duplicate delete button removed - using unified rule above */

/* Conflicting image rule removed - using unified rule above */

/* --- FINAL RINGLE UI FIXES --- */

/* 1. Lift Chevron to align with Name */
.card-control-btn {
    margin-bottom: 42px !important;
    /* Higher lift to match Name baseline */
    align-self: flex-end !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    z-index: 50;
    /* Ensure clickable */
    pointer-events: auto;
}

/* 2. Push Action Buttons to the Floor - Overlay Style */
.swipe-actions {
    position: absolute;
    bottom: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 30;
    padding: 0;
    margin: 0;
    list-style: none;
    direction: ltr;
    /* Force LTR order: Undo, Pass, Superlike, Like, Message */
    pointer-events: auto;
}

/* Enable pointer events on buttons */
.swipe-actions .action-btn {
    pointer-events: auto;
}

/* 3. Modal Big Photo Style */
.user-info-big-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    margin: -75px auto 15px auto;
    /* Pop out effect */
    display: block !important;
    background: #fff;
    position: relative;
    z-index: 50;
}

/* Hide placeholder when photo exists */
.user-info-header .user-info-no-photo {
    display: none !important;
}

/* Fix Modal Overflow for pop-out photo */
.modal-content {
    overflow: visible !important;
    margin-top: 50px;
}


/* RTL Support */
[dir="rtl"] .match-logo {
    direction: ltr;
}

[dir="rtl"] .match-actions {
    direction: rtl;
}

[dir="rtl"] .match-btn-primary,
[dir="rtl"] .match-btn-secondary {
    direction: rtl;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .match-content {
        padding: 30px 20px;
        margin: 20px;
    }

    .match-title {
        font-size: 28px;
    }

    .match-avatar {
        width: 70px;
        height: 70px;
    }

    .match-btn-primary,
    .match-btn-secondary {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ==================== Chat Module Layout Fixes ==================== */
#chat-modal {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: var(--bg-primary);
    z-index: 9999 !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

#chat-modal.hidden {
    display: none !important;
}

.chat-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-primary);
    overflow: hidden;
}

.chat-header.enhanced {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.chat-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.chat-user-info .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.chat-user-info .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-user-info .user-details h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-messages.enhanced {
    flex: 1;
    padding: 16px;
    background: var(--bg-secondary);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.chat-input-container.enhanced {
    padding: 12px 8px;
    /* Reduced horizontal padding for mobile */
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 6px;
    /* Reduced gap */
    flex-shrink: 0;
    overflow: visible;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    box-sizing: border-box;
    width: 100%;
}

#chat-input {
    flex: 1;
    min-width: 0;
    /* Allow shrinking */
    padding: 10px 12px;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    outline: none;
    font-size: 16px;
    transition: border-color 0.2s;
}

#chat-input:focus {
    border-color: var(--primary-color);
}

.input-action-btn,
.chat-action-btn {
    width: 32px;
    /* Slightly smaller buttons */
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.send-btn.enhanced {
    width: 40px;
    /* Slightly smaller */
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(255, 75, 106, 0.3);
    flex-shrink: 0;
    margin-right: 4px;
    /* Tiny margin */
}

.message.system {
    align-self: center;
    background: linear-gradient(135deg, #ff6b8a, #ff8e53);
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 20px;
    margin: 16px 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 85%;
    box-shadow: 0 3px 10px rgba(255, 107, 138, 0.3);
    border: none;
}

/* ==================== Gift Modal Fixes ==================== */
#gifts-modal {
    z-index: 10001 !important;
    /* Ensure it's above Chat (9999) and Nav (2000) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

#gifts-modal.hidden {
    display: none !important;
}

#gifts-modal .modal-content {
    background: var(--bg-primary);
    width: 90%;
    max-width: 380px;
    max-height: 85vh;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 0;
    padding-bottom: 0 !important;
}

#gifts-modal .modal-header {
    flex-shrink: 0;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

#gifts-modal .gift-categories-tabs {
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    border-radius: 0;
}

#gifts-modal .gifts-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

#gifts-modal .gifts-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

#gifts-modal .selected-gift-info {
    flex-shrink: 0;
    padding: 20px;
    background: var(--bg-secondary, #f8f9fa);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* ==================== Credits/Store Modal Fixes ==================== */
#credits-modal {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: var(--bg-primary);
    z-index: 10002 !important;
    /* Above everything */
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    align-items: stretch;
    justify-content: flex-start;
}

#credits-modal.hidden {
    display: none !important;
}

.credits-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 20px;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
    /* Safe bottom padding */
    border-radius: 0 !important;
    box-shadow: none;
    background: var(--bg-primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: none !important;
    max-height: none !important;
}

.coupon-section {
    margin-top: auto;
    /* Push to bottom if space is available */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ==================== Discover Filters Modal Fixes ==================== */
#discover-filters-modal {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: var(--bg-primary);
    z-index: 10003 !important;
    /* Highest priority */
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

#discover-filters-modal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0;
    border-radius: 0 !important;
    box-shadow: none;
    background: var(--bg-primary);
    overflow: hidden;
    /* Scroll body, not wrapper */
    max-width: none !important;
}

#discover-filters-modal .modal-header {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

/* Fix overlapping header elements */
#discover-filters-modal .modal-header h3 {
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
    /* Ensure title is readable */
    pointer-events: none;
    /* Let clicks pass through if tight */
}

#discover-filters-modal .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    background: var(--bg-primary);
    /* mask title if collision */
}

#discover-filters-modal #close-filters {
    z-index: 2;
    margin-right: 0;
    /* Override generic margin */
    /* If 'done' button is present, maybe we don't need 'X'. But let's keep layout clean */
}

.filters-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
    -webkit-overflow-scrolling: touch;
}

.filter-section {
    margin-bottom: 24px;
}

/* ==================== User Info Modal Fixes ==================== */
#user-info-modal {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Ensure full height cover */
    width: 100vw !important;
    height: 100dvh !important;
    background: var(--bg-primary);
    z-index: 2147483647 !important;
    /* Maximum Integer Value */
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    isolation: isolate;
    /* Create new stacking context */
}

#user-info-modal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0;
    border-radius: 0 !important;
    box-shadow: none;
    background: var(--bg-primary);
    overflow: hidden;
    max-width: none !important;
    max-height: none !important;
}

#user-info-modal .modal-header {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

/* Fix overlapping header elements */
#user-info-modal .modal-header h3 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
}

#user-info-modal .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    background: var(--bg-primary);
}

.user-info-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
    -webkit-overflow-scrolling: touch;
}

/* ==================== New Match Modal (Tinder Style) ==================== */
#match-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    z-index: 20001;
    /* Above almost everything */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    isolation: isolate;
}

#match-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.match-content-overlay {
    text-align: center;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: matchPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.match-branding {
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
    margin-bottom: 10px;
    opacity: 0.8;
}

.match-title {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 107, 107, 0.4));
    line-height: 1.2;
}

.match-subtitle {
    color: white;
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

/* Avatar Container */
.match-avatars-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 40px 0;
    position: relative;
    width: 100%;
}

.avatar-wrapper {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: relative;
    padding: 4px;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Glowing Rings */
.avatar-wrapper.me {
    background: linear-gradient(135deg, #2196f3, #00d2ff);
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.6);
    animation: pulseRingBlue 2s infinite;
}

.avatar-wrapper.them {
    background: linear-gradient(135deg, #ff4081, #ff80ab);
    box-shadow: 0 0 30px rgba(255, 64, 129, 0.6);
    animation: pulseRingPink 2s infinite;
}

/* Centered Heart */
.match-heart-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    animation: heartBeat 1.2s infinite;
}

.match-heart-pulse i {
    font-size: 30px;
    background: linear-gradient(135deg, #fd297b, #ff655b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Buttons */
.match-actions-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.btn-match-primary {
    background: linear-gradient(135deg, #fd297b, #ff655b);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(253, 41, 123, 0.4);
    cursor: pointer;
    transition: transform 0.2s;
    width: 100%;
}

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

.btn-match-secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 14px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
}

/* Animations */
@keyframes matchPopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulseRingBlue {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(33, 150, 243, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

@keyframes pulseRingPink {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 64, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 64, 129, 0);
    }
}

@keyframes heartBeat {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    15% {
        transform: translate(-50%, -50%) scale(1.3);
    }

    30% {
        transform: translate(-50%, -50%) scale(1);
    }

    45% {
        transform: translate(-50%, -50%) scale(1.15);
    }

    60% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ==================== Slow Down Swipe Animations ==================== */
.profile-card {
    transition: transform 0.8s ease;
}

.profile-card.swiping-left,
.profile-card.swiping-right {
    transition: none;
}

.profile-card::before,
.profile-card::after,
.profile-card .like-badge,
.profile-card .nope-badge {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==================== Font Customization ==================== */
.card-name-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    direction: rtl;
    /* Ensure RTL layout for Hebrew */
}

.card-name-row .card-name {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 500 !important;
    /* Medium weight */
    font-size: 1.5rem !important;
    /* Smaller size */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    line-height: 1.2;
}

.card-name-row .card-age {
    font-family: 'Rubik', sans-serif !important;
    font-size: 1.5rem !important;
    /* Match name size */
    font-weight: 400 !important;
    opacity: 0.9;
    line-height: 1.2;
}

/* ==================== Mobile Chat Responsiveness ==================== */
@media (max-width: 768px) {

    /* HIDE BOTTOM NAV WHEN CHAT IS OPEN */
    body.chat-open .bottom-nav {
        display: none !important;
        visibility: hidden !important;
        z-index: -1 !important;
    }

    /* Force Chat Modal to be Full Screen & Top Layer */
    #chat-modal:not(.hidden) {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        /* dynamic viewport height for mobile browsers */
        z-index: 99999 !important;
        /* Above everything including nav/header */
        background: #fff !important;
        /* Opaque background to hide app behind */
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    #chat-modal .modal-content,
    #chat-modal .chat-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: none !important;
        background: #fff !important;
        position: static !important;
        /* Let flex parent handle it */
    }

    /* Fix Header Layout and Safe Area */
    #chat-modal .chat-header {
        flex-shrink: 0;
        width: 100%;
        padding-top: max(15px, env(safe-area-inset-top)) !important;
        padding-bottom: 15px !important;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        z-index: 2;
    }

    /* maximize message area */
    #chat-modal .chat-messages {
        flex: 1 !important;
        height: auto !important;
        overflow-y: auto !important;
        padding-bottom: 20px !important;
        /* Reduced padding, rely on margin-bottom spacer if needed, or flex gap */
        width: 100%;
        overscroll-behavior: contain;
        background: #fff !important;
        /* Ensure no grey background shows through */
    }

    /* Create a spacer matching input height + safe area at the end of messages */
    #chat-modal .chat-messages::after {
        content: '';
        display: block;
        height: 80px;
        /* Approximate height of input container */
        width: 100%;
        flex-shrink: 0;
    }

    /* Fix Input Container to Bottom */
    #chat-modal .chat-input-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 1px solid #eee;
        padding: 10px !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
        z-index: 100 !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }

    /* Ensure input field takes available space */
    #chat-modal #chat-input {
        min-height: 40px;
        max-height: 100px;
    }
}

/* ==================== Incoming Call Modal ==================== */
#incoming-call-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#incoming-call-modal.hidden {
    display: none !important;
}

#incoming-call-modal .incoming-call-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px !important;
    padding-bottom: 40px !important;
    width: 90%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden !important;
    color: white;
    margin: 0 auto;
}

.incoming-call-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.incoming-call-avatar {
    position: relative;
    margin-bottom: 20px;
}

.incoming-call-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #ff6b6b;
    object-fit: cover;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
    animation: bounce-avatar 2s infinite;
}

.calling-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.calling-animation .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 2px solid #ff6b6b;
    border-radius: 50%;
    opacity: 0;
    animation: ring-pulse 2s infinite;
}

.calling-animation .ring:nth-child(2) {
    animation-delay: 0.5s;
}

.calling-animation .ring:nth-child(3) {
    animation-delay: 1s;
}

@keyframes ring-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes bounce-avatar {
    0%, 100% {
        transform: scale(1);
        border-color: #ff6b6b;
    }
    50% {
        transform: scale(1.05);
        border-color: #ff9f43;
    }
}

#incoming-caller-name {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.incoming-call-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 35px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.incoming-call-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

.call-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    color: white;
    font-weight: 700;
    font-size: 16px;
    gap: 8px;
}

.call-action-btn.accept {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4);
}

.call-action-btn.decline {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}

.call-action-btn i {
    font-size: 24px;
    margin-bottom: 2px;
}

.call-action-btn:active {
    transform: scale(0.95);
}

.call-action-btn.accept:hover {
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.6);
    transform: translateY(-2px);
}

.call-action-btn.decline:hover {
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.6);
    transform: translateY(-2px);
}

/* ==================== Add Photo Button Fix ==================== */
#add-photo-btn,
.add-photo-btn {
    position: absolute !important;
    bottom: -5px !important;
    right: -5px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50% !important;
    background: var(--primary-color) !important;
    border: none !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    touch-action: manipulation;
}

/* Ensure hit area works on the icon and it's centered */
#add-photo-btn i,
.add-photo-btn i {
    pointer-events: none !important;
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Make logo clickable */
.app-logo {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.app-logo:active {
    opacity: 0.7;
}

/* ==================== Video Call Confirmation Modal ==================== */
.video-confirm-content {
    max-width: 400px;
    text-align: center;
}

.confirm-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.confirm-user-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(255, 75, 106, 0.3);
}

.confirm-user-info h4 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.video-call-warning {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    color: #856404;
    font-size: 0.95rem;
}

.video-call-warning i {
    color: #ffc107;
    margin-left: 8px;
}

.video-call-warning strong {
    color: #d63384;
}

.video-call-match-status {
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.video-call-match-status i {
    margin-left: 8px;
}

.video-confirm-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: 15px;
}

.video-confirm-footer button {
    flex: 1;
    max-width: 150px;
}

#confirm-video-call-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ==================== Forgot Password Inline View ==================== */
#forgot-password-view {
    padding: 8px 0;
}

.btn-back-forgot {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.forgot-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ==================== Mobile Navigation Responsiveness ==================== */
/* Ensure 6 nav items fit on mobile screens */
.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 2px;
    font-size: 10px;
    gap: 2px;
}

.nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 9px;
}

.nav-item .nav-icon {
    font-size: 18px;
}

@media (max-width: 400px) {
    .nav-item {
        padding: 6px 1px;
    }

    .nav-item span {
        font-size: 8px;
    }

    .nav-item .nav-icon {
        font-size: 16px;
    }
}

@media (min-width: 401px) and (max-width: 600px) {
    .nav-item span {
        font-size: 10px;
    }

    .nav-item .nav-icon {
        font-size: 20px;
    }
}

/* ==================== Chat Options Menu ==================== */
.chat-actions {
    position: relative;
    display: flex;
    gap: 8px;
}

.chat-options-menu {
    position: absolute;
    top: 60px;
    left: 10px;
    /* Aligns to left since it's RTL */
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 1000;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.15s ease-out;
}

.chat-options-menu.hidden {
    display: none;
}

.chat-option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    width: 100%;
    border: none;
    background: none;
    text-align: right;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.chat-option-item:hover {
    background: var(--bg-secondary);
}

.chat-option-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--text-secondary);
}

.chat-option-item.danger {
    color: var(--error-color);
}

.chat-option-item.danger i {
    color: var(--error-color);
}

/* Sub Modal (Confirmation) */
.sub-modal {
    z-index: 2000;
    /* Higher than regular modal */
}

.small-content {
    max-width: 300px;
    padding: 24px;
    text-align: center;
}

.danger-btn {
    background: var(--error-color) !important;
}

.danger-btn:hover {
    background: #c0392b !important;
}

/* ==================== Generic Info Modal ==================== */
#generic-info-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000 !important;
}

#generic-info-modal.hidden {
    display: none !important;
}

#generic-info-modal .modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

#generic-info-modal h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

/* ==================== Unmatch Confirmation Modal Fix ==================== */
#unmatch-confirm-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000 !important;
    /* Very high to overlay chat modal */
}

#unmatch-confirm-modal.hidden {
    display: none !important;
}

#unmatch-confirm-modal .modal-content {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

#unmatch-confirm-modal h3 {
    color: var(--error-color);
    margin-bottom: 12px;
    font-size: 1.25rem;
}

#unmatch-confirm-modal p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

#unmatch-confirm-modal .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

#unmatch-confirm-modal .btn-text {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: white;
    color: var(--text-primary);
}

#unmatch-confirm-modal .danger-btn {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    border: none;
    color: white;
}

/* ==================== Welcome Screen - Image-Based Design ==================== */
#welcome-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Background image - Mobile first */
.welcome-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('mobile.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none; /* Allow clicks to pass through to buttons */
}

/* Desktop/Web background */
@media (min-width: 768px) {
    .welcome-bg {
        background-image: url('web.jpeg');
    }
}

/* Container for invisible button overlays */
.welcome-button-overlays {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    /* Mobile: buttons are at bottom ~8% from bottom, each button ~7% height */
    padding-bottom: 6%;
    gap: 12px;
}

/* Invisible button base styles */
.invisible-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 85%;
    max-width: 320px;
    height: 52px;
    border-radius: 50px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative; /* Ensure proper stacking */
    z-index: 20; /* Higher than welcome-bg */
    color: #ffffff; /* White text for visibility */
    font-weight: 600;
    font-size: 16px;
}

/* Hover/Active states - subtle feedback without changing appearance */
.invisible-btn:hover {
    opacity: 0.95;
}

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

/* Position adjustments for register button (top one - pink) */
.register-overlay {
    order: 1;
    color: white !important;
}

.register-overlay .btn-text,
.register-overlay .btn-text i,
#signup-btn .btn-text,
#signup-btn .btn-text i {
    color: white !important;
}

/* Ensure signup button text is white */
#signup-btn {
    color: white !important;
}

#signup-btn * {
    color: white !important;
}

/* Additional specificity for signup button */
#auth-screen #signup-btn,
#auth-screen #signup-btn .btn-text,
#auth-screen #signup-btn .btn-text i,
#auth-screen #signup-btn span {
    color: white !important;
}

/* ==================== Settings Tabs ==================== */
.settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--spacing-md);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.settings-tab-btn {
    flex: 1;
    padding: var(--spacing-md) 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.settings-tab-btn i {
    font-size: var(--font-size-md);
}

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

.settings-tab-content {
    display: none;
    padding: var(--spacing-md);
}

.settings-tab-content.active {
    display: block;
}

/* Blocked Users List */
.blocked-users-list {
    margin-top: var(--spacing-md);
}

.blocked-user-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-sm);
    transition: transform 0.2s ease;
}

.blocked-user-item:active {
    transform: scale(0.98);
}

.blocked-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    background-size: cover;
    background-position: center;
    margin-left: var(--spacing-md);
    flex-shrink: 0;
}

.blocked-user-info {
    flex: 1;
    text-align: right;
}

.blocked-user-info h4 {
    margin: 0 0 var(--spacing-xxs) 0;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.blocked-since {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.unblock-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-lg);
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 40px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.empty-state p {
    margin: 0;
    font-size: var(--font-size-md);
}

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

.settings-section h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.settings-section h4 i {
    color: var(--primary-color);
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

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

.setting-label i {
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Switch Toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

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

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

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

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

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

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

/* Form Select */
.form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    background-size: 16px;
    padding-right: calc(var(--spacing-md) + 20px);
}

/* App Version */
.app-version {
    text-align: center;
    margin-top: var(--spacing-xxl);
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .settings-tab-btn {
        font-size: var(--font-size-xs);
    }
    
    .blocked-user-item {
        padding: var(--spacing-sm);
    }
    
    .blocked-user-avatar {
        width: 40px;
        height: 40px;
        margin-left: var(--spacing-sm);
    }
    
    .unblock-btn {
        padding: var(--spacing-xxs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

/* Position adjustments for login button (bottom one - outline) */
.login-overlay {
    order: 2;
    color: white !important;
}

.login-overlay .btn-text,
.login-overlay .btn-text i {
    color: white !important;
}

/* Ensure login button text is white */
#login-btn {
    color: white !important;
}

#login-btn * {
    color: white !important;
}

/* Additional specificity for auth screen buttons */
#auth-screen #login-btn,
#auth-screen #login-btn .btn-text,
#auth-screen #login-btn .btn-text i,
#auth-screen #login-btn span {
    color: white !important;
}

#auth-screen button[type="submit"],
#auth-screen button[type="submit"] .btn-text,
#auth-screen button[type="submit"] span {
    color: white !important;
}

/* Desktop adjustments - buttons are more centered in web.jpeg */
@media (min-width: 768px) {
    .welcome-button-overlays {
        padding-bottom: 8%;
        gap: 16px;
    }

    .invisible-btn {
        height: 56px;
        max-width: 380px;
    }
}

/* ==================== Chat Tabs Styling Override ==================== */
.chat-tabs {
    background: var(--bg-primary);
    margin-bottom: 0;
}

.chat-tab-btn {
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    outline: none;
}

.chat-tab-btn:hover {
    color: var(--text-primary);
}

/* Active State - Remove "Red Alert" Background */
.chat-tab-btn.active {
    background: transparent !important;
    /* Force override any previous background */
    color: var(--primary-color) !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}

.chat-tab-btn i {
    font-size: 1.1em;
    margin-bottom: 2px;
}

/* Badge Styling */
.chat-tab-btn .badge {
    background: var(--primary-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 5px;
}

[dir="rtl"] .chat-tab-btn .badge {
    left: auto;
    right: 5px;
}

/* Ensure icons are visible */
.chat-tab-btn.active i {
    color: var(--primary-color);
}

/* ==================== Smaller Header Buttons ==================== */
.header-action-btn.small,
.premium-btn.small,
.notification-btn.small {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.premium-btn.small i,
.notification-btn.small i,
.header-action-btn.small i {
    font-size: 14px;
}

/* Fix Navigation Icons */
.nav-item .nav-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
}

.nav-item .nav-icon i {
    display: block !important;
    font-size: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
}

.nav-item .nav-badge {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
}


/* ==================== ACCESSIBILITY (Task 1.5) ==================== */

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    font-weight: 600;
    font-size: 16px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Focus Indicators */
*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* High contrast focus for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Navigation items focus */
.nav-item:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: -2px;
    background: rgba(59, 130, 246, 0.1);
}

/* Card buttons focus */
.swipe-btn:focus-visible,
.profile-action-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    transform: scale(1.05);
}

/* Color Contrast Fixes */
.text-secondary,
.profile-location,
.stat-label,
.message-time {
    color: #6b7280; /* Improved from #8888a8 for better contrast */
}

.btn-secondary {
    color: #1f2937;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Link colors with better contrast */
a {
    color: #dc2626;
    text-decoration: underline;
}

a:hover {
    color: #991b1b;
    text-decoration: underline;
}

a:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Touch Target Sizes (WCAG 44x44px minimum) */
.icon-btn,
.header-btn,
.notification-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}

.swipe-btn,
.profile-action-btn {
    min-width: 56px;
    min-height: 56px;
}

.nav-item {
    min-height: 56px;
    padding: 8px 16px;
}

/* Ensure clickable area even if visual is smaller */
.small-icon {
    position: relative;
}

.small-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
}

/* Checkbox and radio buttons */
.checkbox-label,
.radio-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    min-height: 44px;
}

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

/* Keyboard Shortcuts Help */
.keyboard-help {
    padding: 24px;
    max-width: 600px;
}

.keyboard-help h3 {
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--text-primary);
    text-align: center;
}

.shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.shortcut-item kbd {
    min-width: 60px;
    padding: 8px 12px;
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #1f2937;
}

.shortcut-item span {
    color: var(--text-secondary);
    font-size: 14px;
    flex: 1;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid #000000;
    }
    
    .card,
    .profile-card {
        border: 2px solid #000000;
    }
    
    *:focus-visible {
        outline: 4px solid #000000;
        outline-offset: 2px;
    }
    
    .nav-item.active {
        border: 2px solid #000000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .shimmer {
        animation: none;
    }
    
    .profile-card {
        transition: none;
    }
}

/* Dark Mode Accessibility */
@media (prefers-color-scheme: dark) {
    .text-secondary,
    .profile-location,
    .stat-label {
        color: #9ca3af;
    }
    
    *:focus-visible {
        outline-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3);
    }
    
    .skip-link {
        background: var(--primary-color);
        color: white;
    }
    
    .keyboard-help {
        background: var(--bg-primary);
    }
    
    .shortcut-item {
        background: var(--bg-tertiary);
    }
    
    .shortcut-item kbd {
        background: var(--bg-secondary);
        border-color: #4b5563;
        color: #f9fafb;
    }
}

/* Mobile Optimizations for Accessibility */
@media (max-width: 768px) {
    .skip-link {
        font-size: 14px;
        padding: 10px 20px;
    }
    
    .keyboard-help {
        padding: 16px;
    }
    
    .shortcut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .shortcut-item kbd {
        min-width: 50px;
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Ensure sufficient color contrast for status indicators */
.online-badge {
    background: #10b981;
    color: white;
}

.verified-badge {
    color: #3b82f6;
}

.premium-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
    font-weight: 700;
}

/* Improve button states for accessibility */
button:disabled,
button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

button[aria-busy="true"] {
    opacity: 0.7;
    cursor: wait;
}

/* Loading states with ARIA */
[aria-busy="true"] {
    position: relative;
}

[aria-busy="true"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Improve modal accessibility */
.modal[aria-hidden="true"] {
    display: none;
}

.modal[aria-hidden="false"] {
    display: flex;
}

/* Ensure proper heading hierarchy */
h1 {
    font-size: 24px;
    font-weight: 700;
}

h2 {
    font-size: 20px;
    font-weight: 600;
}

h3 {
    font-size: 18px;
    font-weight: 600;
}

h4 {
    font-size: 16px;
    font-weight: 600;
}

/* Improve form label association */
label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Error states with better visibility */
input:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
    border-color: #dc2626;
    outline-color: #dc2626;
}

input:invalid:not(:placeholder-shown):focus,
select:invalid:not(:placeholder-shown):focus {
    outline: 3px solid #dc2626;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);
}

/* Success states */
input:valid:not(:placeholder-shown),
select:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* Improve notification badge visibility */
.notification-badge,
.nav-badge {
    min-width: 20px;
    min-height: 20px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* Ensure icons don't interfere with screen readers */
i[aria-hidden="true"] {
    pointer-events: none;
}

/* Improve toast accessibility */
.toast {
    role: alert;
}

.toast[role="alert"] {
    border-left: 4px solid currentColor;
}

[dir="rtl"] .toast[role="alert"] {
    border-left: none;
    border-right: 4px solid currentColor;
}

/* ==================== END ACCESSIBILITY ==================== */


/* ==================== VIDEO CALL PREPARATION MODAL (Task 2.3) ==================== */

/* Video Prep Modal Content */
.video-prep-content {
    max-width: 500px;
    width: 90%;
}

.video-prep-body {
    padding: 0;
}

/* Camera Preview */
.video-prep-preview {
    position: relative;
    width: 100%;
    height: 300px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

#video-prep-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Mirror effect */
}

.video-prep-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.prep-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.prep-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.prep-name {
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Device Status */
.device-status {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
}

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

.device-icon {
    width: 24px;
    color: var(--primary-color);
    font-size: 18px;
}

.device-label {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.device-status-text {
    font-size: 14px;
    font-weight: 600;
}

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

/* Mic Level Indicator */
.mic-level-container {
    display: flex;
    align-items: center;
}

.mic-level-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}

.mic-bar {
    width: 4px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    transition: all 0.1s ease;
}

.mic-bar:nth-child(1) { height: 8px; }
.mic-bar:nth-child(2) { height: 12px; }
.mic-bar:nth-child(3) { height: 16px; }
.mic-bar:nth-child(4) { height: 12px; }
.mic-bar:nth-child(5) { height: 8px; }

.mic-bar.active {
    background: var(--success-color);
    box-shadow: 0 0 4px var(--success-color);
}

/* Credit Warning */
.credit-warning {
    padding: var(--spacing-md);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
}

.warning-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: #856404;
}

.warning-header i {
    color: #ffc107;
    font-size: 18px;
}

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

.warning-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #856404;
}

.warning-row strong {
    font-weight: 700;
}

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

.warning-note {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(133, 100, 4, 0.2);
    font-size: 13px;
    color: #856404;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.warning-note i {
    color: var(--error-color);
}

/* Video Prep Footer */
.video-prep-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

.video-prep-footer button {
    flex: 1;
}

/* Dark Mode Support */
body.dark-mode .video-prep-content {
    background: var(--bg-dark);
    color: var(--text-inverse);
}

body.dark-mode .device-status {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .device-label {
    color: var(--text-inverse);
}

body.dark-mode .mic-bar {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .credit-warning {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

body.dark-mode .warning-header,
body.dark-mode .warning-row,
body.dark-mode .warning-note {
    color: #ffc107;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .video-prep-content {
        max-width: 100%;
        width: 95%;
    }
    
    .video-prep-preview {
        height: 250px;
    }
    
    .device-status {
        padding: var(--spacing-sm);
    }
    
    .credit-warning {
        padding: var(--spacing-sm);
    }
    
    .video-prep-footer {
        flex-direction: column-reverse;
    }
    
    .video-prep-footer button {
        width: 100%;
    }
}

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

.video-prep-content {
    animation: fadeIn 0.3s ease;
}

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

/* RTL Support */
[dir="rtl"] .prep-user-info {
    flex-direction: row-reverse;
}

[dir="rtl"] .device-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .warning-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .warning-note {
    flex-direction: row-reverse;
}


/* ==================== PHOTO MANAGER (Task 2.4) ==================== */

/* Photo Guidelines Modal */
.photo-guidelines-content {
    max-width: 600px;
    width: 90%;
}

.photo-guidelines-body {
    padding: var(--spacing-md);
}

.guidelines-section {
    margin-bottom: var(--spacing-lg);
}

.guidelines-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: 18px;
    font-weight: 700;
}

.do-title {
    color: var(--success-color);
}

.do-title i {
    color: var(--success-color);
}

.dont-title {
    color: var(--error-color);
}

.dont-title i {
    color: var(--error-color);
}

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

.guideline-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 14px;
}

.guideline-item i {
    width: 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

.guidelines-tips {
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    text-align: center;
}

.guidelines-tips i {
    color: #ffd700;
    margin-left: 5px;
}

/* Photo Crop Modal */
.photo-crop-content {
    max-width: 600px;
    width: 90%;
}

.photo-crop-body {
    padding: var(--spacing-md);
}

.crop-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

#crop-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.crop-area {
    position: absolute;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
    pointer-events: all;
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border: 2px solid white;
    border-radius: 50%;
}

.crop-handle.nw {
    top: -6px;
    left: -6px;
}

.crop-handle.ne {
    top: -6px;
    right: -6px;
}

.crop-handle.sw {
    bottom: -6px;
    left: -6px;
}

.crop-handle.se {
    bottom: -6px;
    right: -6px;
}

.crop-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.crop-control-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.crop-control-group label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.crop-control-group input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    outline: none;
    -webkit-appearance: none;
}

.crop-control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.crop-control-group input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.crop-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 13px;
    color: var(--text-secondary);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: 8px;
}

.crop-hint i {
    color: var(--info-color);
}

.photo-crop-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

.photo-crop-footer button {
    flex: 1;
}

/* Upload Progress Overlay */
.upload-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.upload-progress-content {
    background: white;
    padding: var(--spacing-lg);
    border-radius: 16px;
    text-align: center;
    min-width: 300px;
    box-shadow: var(--shadow-xl);
}

.upload-progress-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    animation: pulse 1.5s ease-in-out infinite;
}

.upload-progress-content h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Enhanced Photo Library */
.photo-library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.photo-library-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    cursor: grab;
    transition: all 0.3s ease;
}

.photo-library-item:active {
    cursor: grabbing;
}

.photo-library-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

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

.photo-library-item.empty-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-library-item.empty-slot:hover {
    border-color: var(--primary-color);
    background: var(--bg-tertiary);
}

.photo-library-item.empty-slot i {
    font-size: 24px;
    color: var(--text-tertiary);
}

.photo-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

.photo-library-item:hover .photo-delete-btn {
    opacity: 1;
}

.photo-delete-btn:hover {
    background: var(--error-color);
    transform: scale(1.1);
}

.photo-main-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
}

.photo-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: var(--spacing-xs);
}

/* Photo Guidelines Button */
#photo-guidelines-btn {
    margin-left: var(--spacing-xs);
}

/* Dark Mode Support */
body.dark-mode .photo-guidelines-content,
body.dark-mode .photo-crop-content,
body.dark-mode .upload-progress-content {
    background: var(--bg-dark);
    color: var(--text-inverse);
}

body.dark-mode .guideline-item {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .crop-hint {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .crop-control-group label {
    color: var(--text-inverse);
}

body.dark-mode .progress-text {
    color: var(--text-inverse);
}

body.dark-mode .photo-library-item.empty-slot {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .photo-library-item.empty-slot:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .photo-guidelines-content,
    .photo-crop-content {
        max-width: 100%;
        width: 95%;
    }
    
    .crop-container {
        height: 300px;
    }
    
    .crop-controls {
        flex-direction: column;
    }
    
    .photo-crop-footer {
        flex-direction: column-reverse;
    }
    
    .photo-crop-footer button {
        width: 100%;
    }
    
    .photo-library-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .guidelines-section {
        margin-bottom: var(--spacing-md);
    }
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* RTL Support */
[dir="rtl"] .guideline-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .crop-control-group label {
    flex-direction: row-reverse;
}

[dir="rtl"] .crop-hint {
    flex-direction: row-reverse;
}

[dir="rtl"] .photo-delete-btn {
    right: auto;
    left: 8px;
}

[dir="rtl"] .photo-main-badge {
    left: auto;
    right: 8px;
}

/* Accessibility */
.photo-library-item:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.crop-area:focus {
    outline: 2px solid var(--primary-color);
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .photo-delete-btn {
        opacity: 1;
    }
    
    .photo-library-item {
        cursor: default;
    }
    
    .photo-library-item:active {
        cursor: default;
    }
}


/* ==================== CREDIT MANAGER (Task 2.5) ==================== */

/* Credit Display in Header */
.credit-display {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: var(--spacing-sm);
}

.credit-display:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.credit-display i {
    font-size: 16px;
}

.credit-count {
    min-width: 30px;
    text-align: center;
}

/* Color Coding */
.credit-display.credits-high {
    background: #d4edda;
    border-color: var(--success-color);
    color: var(--success-color);
}

.credit-display.credits-high i {
    color: var(--success-color);
}

.credit-display.credits-medium {
    background: #fff3cd;
    border-color: var(--warning-color);
    color: #856404;
}

.credit-display.credits-medium i {
    color: var(--warning-color);
}

.credit-display.credits-low {
    background: #f8d7da;
    border-color: var(--error-color);
    color: var(--error-color);
    animation: pulse-warning 2s ease-in-out infinite;
}

.credit-display.credits-low i {
    color: var(--error-color);
}

@keyframes pulse-warning {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Insufficient Credits Modal */
.insufficient-credits-content {
    max-width: 500px;
    width: 90%;
}

.insufficient-credits-body {
    padding: var(--spacing-md);
}

.credit-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: var(--spacing-md);
}

.credit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: white;
    border-radius: 8px;
}

.credit-item.shortage {
    background: #f8d7da;
    border: 1px solid var(--error-color);
}

.credit-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.cost-amount {
    color: var(--primary-color);
    font-size: 16px;
}

.balance-amount {
    font-size: 16px;
}

.balance-amount.low {
    color: var(--error-color);
}

.shortage-amount {
    color: var(--error-color);
    font-size: 16px;
}

.insufficient-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: #e3f2fd;
    border-radius: 8px;
    color: #1565c0;
    font-size: 14px;
}

.insufficient-message i {
    color: #2196f3;
}

.insufficient-credits-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

.insufficient-credits-footer button {
    flex: 1;
}

/* Cost Confirmation Modal */
.cost-confirmation-content {
    max-width: 500px;
    width: 90%;
}

.cost-confirmation-body {
    padding: var(--spacing-md);
    text-align: center;
}

.confirmation-icon {
    font-size: 64px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    animation: bounce-in 0.5s ease;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confirmation-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.confirmation-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.cost-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: var(--spacing-md);
}

.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.cost-row.total {
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--border-color);
    font-size: 16px;
    font-weight: 700;
}

.cost-value {
    color: var(--primary-color);
    font-size: 18px;
}

.low-balance {
    color: var(--error-color);
}

.low-balance-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: #fff3cd;
    border: 1px solid var(--warning-color);
    border-radius: 8px;
    color: #856404;
    font-size: 13px;
}

.low-balance-warning i {
    color: var(--warning-color);
}

.cost-confirmation-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
}

.cost-confirmation-footer button {
    flex: 1;
}

/* Low Balance Toast */
.low-balance-toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #fff3cd;
    border-left: 4px solid var(--warning-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    min-width: 320px;
    max-width: 500px;
}

.low-balance-toast .toast-icon {
    font-size: 24px;
    color: var(--warning-color);
}

.low-balance-toast .toast-content {
    flex: 1;
}

.low-balance-toast .toast-content strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #856404;
    margin-bottom: 4px;
}

.low-balance-toast .toast-content p {
    font-size: 13px;
    color: #856404;
    margin: 0;
}

.toast-action-btn {
    padding: 8px 16px;
    background: var(--warning-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.toast-action-btn:hover {
    background: #e0a800;
    transform: translateY(-1px);
}

.toast-close {
    padding: 4px;
    background: transparent;
    border: none;
    color: #856404;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.toast-close:hover {
    color: var(--error-color);
}

/* Dark Mode Support */
body.dark-mode .credit-display {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .credit-display.credits-high {
    background: rgba(40, 167, 69, 0.2);
    border-color: var(--success-color);
}

body.dark-mode .credit-display.credits-medium {
    background: rgba(255, 193, 7, 0.2);
    border-color: var(--warning-color);
}

body.dark-mode .credit-display.credits-low {
    background: rgba(220, 53, 69, 0.2);
    border-color: var(--error-color);
}

body.dark-mode .insufficient-credits-content,
body.dark-mode .cost-confirmation-content {
    background: var(--bg-dark);
    color: var(--text-inverse);
}

body.dark-mode .credit-comparison,
body.dark-mode .cost-breakdown {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .credit-item {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .credit-item.shortage {
    background: rgba(220, 53, 69, 0.2);
}

body.dark-mode .insufficient-message {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

body.dark-mode .low-balance-warning {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning-color);
}

body.dark-mode .low-balance-toast {
    background: rgba(255, 193, 7, 0.2);
    border-left-color: var(--warning-color);
}

body.dark-mode .low-balance-toast .toast-content strong,
body.dark-mode .low-balance-toast .toast-content p {
    color: var(--warning-color);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .credit-display {
        padding: 4px 10px;
        font-size: 13px;
        margin-left: 4px;
    }
    
    .credit-display i {
        font-size: 14px;
    }
    
    .insufficient-credits-content,
    .cost-confirmation-content {
        max-width: 100%;
        width: 95%;
    }
    
    .insufficient-credits-footer,
    .cost-confirmation-footer {
        flex-direction: column-reverse;
    }
    
    .insufficient-credits-footer button,
    .cost-confirmation-footer button {
        width: 100%;
    }
    
    .low-balance-toast {
        min-width: auto;
        max-width: 90%;
    }
}

/* RTL Support */
[dir="rtl"] .credit-display {
    margin-left: 0;
    margin-right: var(--spacing-sm);
}

[dir="rtl"] .low-balance-toast {
    border-left: none;
    border-right: 4px solid var(--warning-color);
}

[dir="rtl"] .credit-item,
[dir="rtl"] .cost-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .insufficient-message,
[dir="rtl"] .low-balance-warning {
    flex-direction: row-reverse;
}

/* Accessibility */
.credit-display:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Animation for credit updates */
@keyframes credit-update {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.credit-count.updating {
    animation: credit-update 0.3s ease;
}


/* ==================== SWIPE FEEDBACK (Task 3.1) ==================== */

/* Swipe Stamp Overlays */
.swipe-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg) scale(0);
    font-size: 80px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 20px 40px;
    border: 8px solid;
    border-radius: 12px;
    z-index: 100;
    pointer-events: none;
    animation: stampAppear 0.3s ease-out forwards;
    text-align: center;
    line-height: 1.2;
}

@keyframes stampAppear {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
        opacity: 1;
    }
}

.stamp-like {
    color: #4caf50;
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
    transform: translate(-50%, -50%) rotate(20deg) scale(0);
}

.stamp-like span {
    display: block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.stamp-nope {
    color: #f44336;
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

.stamp-nope span {
    display: block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.stamp-superlike {
    color: #2196f3;
    border-color: #2196f3;
    background: rgba(33, 150, 243, 0.1);
    font-size: 60px;
}

.stamp-superlike span {
    display: block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Enhanced Swipe Animations */
.profile-card {
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.profile-card.swiping-left {
    animation: swipeLeft 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.profile-card.swiping-right {
    animation: swipeRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes swipeLeft {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-1000px) rotate(-30deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes swipeRight {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(1000px) rotate(30deg) scale(0.8);
        opacity: 0;
    }
}

/* Undo Button - Disabled (backward arrow already exists) */
.undo-swipe-btn {
    display: none !important;
}


/* Card Drag Feedback */
.profile-card[style*="transform"] {
    cursor: grabbing !important;
}

.profile-card[style*="transform"]:not(.swiping-left):not(.swiping-right) {
    transition: transform 0.1s ease-out !important;
}

/* Like/Nope Indicators During Drag */
.profile-card::before,
.profile-card::after {
    content: '';
    position: absolute;
    top: 50px;
    font-size: 60px;
    font-weight: 900;
    padding: 10px 20px;
    border: 6px solid;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.profile-card::before {
    content: 'LIKE';
    left: 30px;
    color: #4caf50;
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
    transform: rotate(-20deg);
}

.profile-card::after {
    content: 'NOPE';
    right: 30px;
    color: #f44336;
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
    transform: rotate(20deg);
}

/* Show indicators based on drag direction */
.profile-card[style*="translateX"][style*="rotate"] {
    /* Indicators will be shown via JS based on drag amount */
}

/* Dark Mode Support */
body.dark-mode .undo-swipe-btn {
    background: var(--bg-dark);
    color: var(--text-inverse);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .undo-swipe-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

body.dark-mode .stamp-like {
    background: rgba(76, 175, 80, 0.2);
}

body.dark-mode .stamp-nope {
    background: rgba(244, 67, 54, 0.2);
}

body.dark-mode .stamp-superlike {
    background: rgba(33, 150, 243, 0.2);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .swipe-stamp {
        font-size: 60px;
        padding: 15px 30px;
        border-width: 6px;
    }
    
    .stamp-superlike {
        font-size: 45px;
    }
    
    .undo-swipe-btn {
        bottom: 80px;
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .profile-card::before,
    .profile-card::after {
        font-size: 45px;
        padding: 8px 16px;
        border-width: 4px;
    }
}

/* RTL Support */
[dir="rtl"] .stamp-like {
    transform: translate(-50%, -50%) rotate(-20deg) scale(0);
}

[dir="rtl"] .stamp-nope {
    transform: translate(-50%, -50%) rotate(20deg) scale(0);
}

[dir="rtl"] .profile-card::before {
    left: auto;
    right: 30px;
    transform: rotate(20deg);
}

[dir="rtl"] .profile-card::after {
    right: auto;
    left: 30px;
    transform: rotate(-20deg);
}

/* Accessibility */
.undo-swipe-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth card transitions */
.profile-card {
    will-change: transform, opacity;
}

/* Prevent text selection during swipe */
.profile-card.swiping-left,
.profile-card.swiping-right {
    user-select: none;
    -webkit-user-select: none;
}

/* Enhanced action buttons feedback */
.action-btn:active {
    transform: scale(0.9);
}

.action-btn.like:active {
    background: #4caf50;
}

.action-btn.pass:active {
    background: #f44336;
}

.action-btn.superlike:active {
    background: #2196f3;
}

/* Pulse animation for superlike */
@keyframes superlikePulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.05);
    }
}

.action-btn.superlike:active {
    animation: superlikePulse 0.5s ease;
}


/* ==================== MATCH CELEBRATION (Task 3.2) ==================== */

/* Enhanced Match Modal */
#match-modal {
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
}

#match-modal.celebration-active .match-content-overlay {
    animation: celebrationZoom 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes celebrationZoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.match-content-overlay {
    position: relative;
    z-index: 2;
}

/* Match Title Animation */
#match-modal.celebration-active .match-title {
    animation: titleBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}

@keyframes titleBounce {
    0% {
        transform: translateY(-50px) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(10px) scale(1.2);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Match Subtitle Animation */
#match-modal.celebration-active .match-subtitle {
    animation: fadeInUp 0.6s ease 0.4s both;
}

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

/* Avatar Animations */
#match-modal.celebration-active .avatar-wrapper.me {
    animation: slideInLeft 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s both;
}

#match-modal.celebration-active .avatar-wrapper.them {
    animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s both;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100px) rotate(-20deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px) rotate(20deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0);
        opacity: 1;
    }
}

/* Heart Pulse Animation */
#match-modal.celebration-active .match-heart-pulse {
    animation: heartPulse 1s ease-in-out 0.5s infinite;
}

@keyframes heartPulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.25);
    }
}

.match-heart-pulse i {
    filter: drop-shadow(0 0 10px rgba(255, 75, 106, 0.8));
}

/* Action Buttons Animation */
#match-modal.celebration-active .match-actions-container {
    animation: fadeInUp 0.6s ease 0.6s both;
}

.btn-match-primary,
.btn-match-secondary {
    transition: all 0.3s ease;
}

.btn-match-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 75, 106, 0.4);
}

.btn-match-secondary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-match-primary:active,
.btn-match-secondary:active {
    transform: translateY(-1px) scale(1);
}

/* Confetti Container */
.match-confetti-container,
#match-confetti {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Confetti Pieces */
.confetti-piece {
    position: absolute;
    top: -20px;
    font-size: 20px;
    animation: confettiFall 4s linear forwards;
    pointer-events: none;
    user-select: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(var(--rotation, 360deg));
        opacity: 0;
    }
}

/* Confetti variations for more natural movement */
.confetti-piece:nth-child(odd) {
    animation-timing-function: ease-in;
}

.confetti-piece:nth-child(even) {
    animation-timing-function: ease-out;
}

.confetti-piece:nth-child(3n) {
    animation-duration: 3s;
}

.confetti-piece:nth-child(4n) {
    animation-duration: 3.5s;
}

.confetti-piece:nth-child(5n) {
    animation-duration: 4.5s;
}

/* Match Branding Animation */
#match-modal.celebration-active .match-branding {
    animation: fadeIn 0.6s ease 0.1s both;
}

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

/* Enhanced Avatar Styling */
.avatar-wrapper img {
    transition: transform 0.3s ease;
}

.avatar-wrapper:hover img {
    transform: scale(1.1);
}

/* Glow Effect on Match */
#match-modal.celebration-active .match-avatars-container {
    filter: drop-shadow(0 0 20px rgba(255, 75, 106, 0.3));
}

/* Sparkle Effect */
#match-modal.celebration-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: sparkle 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .match-title {
        font-size: 36px;
    }
    
    .match-subtitle {
        font-size: 16px;
    }
    
    .avatar-wrapper {
        width: 100px;
        height: 100px;
    }
    
    .match-heart-pulse {
        width: 50px;
        height: 50px;
    }
    
    .match-heart-pulse i {
        font-size: 30px;
    }
    
    .confetti-piece {
        font-size: 16px;
    }
    
    .btn-match-primary,
    .btn-match-secondary {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* Dark Mode Support */
body.dark-mode #match-modal {
    background: rgba(0, 0, 0, 0.98);
}

body.dark-mode .match-content-overlay {
    color: var(--text-inverse);
}

/* RTL Support */
[dir="rtl"] .avatar-wrapper.me {
    animation-name: slideInRight;
}

[dir="rtl"] .avatar-wrapper.them {
    animation-name: slideInLeft;
}

/* Accessibility */
#match-modal:focus-within {
    outline: none;
}

.btn-match-primary:focus,
.btn-match-secondary:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Performance Optimizations */
.match-content-overlay,
.avatar-wrapper,
.match-heart-pulse,
.confetti-piece {
    will-change: transform, opacity;
}

/* Prevent text selection during animations */
#match-modal.celebration-active {
    user-select: none;
    -webkit-user-select: none;
}

/* Re-enable text selection after animation */
#match-modal .match-subtitle,
#match-modal .btn-match-primary,
#match-modal .btn-match-secondary {
    user-select: auto;
    -webkit-user-select: auto;
}

/* Enhanced Button Styles */
.btn-match-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    box-shadow: 0 4px 15px rgba(255, 75, 106, 0.3);
}

.btn-match-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

/* Celebration Glow */
@keyframes celebrationGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 75, 106, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 75, 106, 0.6);
    }
}

#match-modal.celebration-active .match-avatars-container {
    animation: celebrationGlow 2s ease-in-out infinite;
}

/* Confetti Burst Effect */
.confetti-piece:nth-child(-n+10) {
    animation-delay: 0s;
}

.confetti-piece:nth-child(n+11):nth-child(-n+20) {
    animation-delay: 0.1s;
}

.confetti-piece:nth-child(n+21):nth-child(-n+30) {
    animation-delay: 0.2s;
}

.confetti-piece:nth-child(n+31):nth-child(-n+40) {
    animation-delay: 0.3s;
}

.confetti-piece:nth-child(n+41) {
    animation-delay: 0.4s;
}


/* ==================== GIFT MANAGER STYLES (Task 3.3) ==================== */

/* Gift Category Tabs */
.gift-categories-tabs {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gift-categories-tabs::-webkit-scrollbar {
    display: none;
}

.gift-category-tab {
    flex: 1;
    min-width: 100px;
    padding: 12px 16px;
    background: white;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.gift-category-tab i {
    font-size: 20px;
}

.gift-category-tab:hover {
    border-color: var(--primary-color, #ff4b6a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.2);
}

.gift-category-tab.active {
    background: linear-gradient(135deg, var(--primary-color, #ff4b6a), var(--secondary-color, #ff8e53));
    border-color: var(--primary-color, #ff4b6a);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.3);
}

/* Gift Category Description */
.gift-category-description {
    text-align: center;
    padding: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.1), rgba(255, 142, 83, 0.1));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gift-category-description i {
    font-size: 28px;
    color: var(--primary-color, #ff4b6a);
}

.gift-category-description p {
    margin: 0;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
}

/* Enhanced Gift Options */
.gift-option {
    position: relative;
    background: white;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.gift-option:hover {
    border-color: var(--primary-color, #ff4b6a);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 75, 106, 0.2);
}

.gift-option.selected {
    border-color: var(--primary-color, #ff4b6a);
    background: linear-gradient(135deg, rgba(255, 75, 106, 0.1), rgba(255, 142, 83, 0.1));
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 24px rgba(255, 75, 106, 0.3);
}

.gift-option.selected::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary-color, #ff4b6a);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    animation: checkmarkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Gift Badge */
.gift-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    z-index: 1;
}

.gift-badge.popular {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* Gift Display */
.gift-display {
    font-size: 48px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.gift-option:hover .gift-display {
    transform: scale(1.1) rotate(5deg);
}

.gift-option.selected .gift-display {
    transform: scale(1.2);
    animation: giftBounce 0.6s ease;
}

@keyframes giftBounce {
    0%, 100% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Gift Info */
.gift-info {
    text-align: center;
    width: 100%;
}

.gift-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 4px;
}

.gift-cost {
    font-size: 13px;
    color: var(--primary-color, #ff4b6a);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.gift-cost i {
    font-size: 12px;
}

/* Gift Preview Hint */
.gift-preview-hint {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gift-option:hover .gift-preview-hint {
    opacity: 1;
}

/* Selected Gift Info Section */
.selected-gift-info {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 12px;
    text-align: center;
}

.selection-label {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.selection-label span {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.gift-price-large {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color, #ff4b6a);
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gift-price-large i {
    font-size: 20px;
}

/* Gift Chat Preview */
.gift-chat-preview {
    margin: 20px 0;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border: 2px dashed var(--border-color, #e5e7eb);
}

.preview-label {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.preview-message {
    display: flex;
    justify-content: flex-end;
}

.preview-message .message-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary-color, #ff4b6a), var(--secondary-color, #ff8e53));
    color: white;
}

.preview-message .gift-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.preview-message .gift-label {
    font-size: 11px;
    opacity: 0.9;
}

.preview-message .gift-icon-large {
    font-size: 36px;
}

.preview-message .gift-content {
    font-size: 13px;
    font-weight: 600;
}

/* Gift Success Overlay */
.gift-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gift-success-overlay.show {
    opacity: 1;
}

.gift-success-content {
    text-align: center;
    color: white;
    animation: successZoom 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successZoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.gift-success-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: successBounce 0.8s ease infinite;
}

@keyframes successBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.gift-success-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.gift-success-message {
    font-size: 16px;
    opacity: 0.9;
}

/* Gift Received Notification */
.gift-received-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    min-width: 300px;
    max-width: 90%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.gift-received-notification.show {
    transform: translateX(-50%) translateY(0);
}

.gift-received-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gift-received-icon {
    font-size: 48px;
    animation: giftPulse 1s ease infinite;
}

@keyframes giftPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.gift-received-text {
    flex: 1;
}

.gift-received-text strong {
    display: block;
    font-size: 16px;
    color: var(--text-primary, #1f2937);
    margin-bottom: 4px;
}

.gift-received-text p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

/* Gifts Grid Layout */
.gifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .gift-category-tab {
        background: var(--card-bg-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
        color: var(--text-secondary-dark, #9ca3af);
    }
    
    .gift-option {
        background: var(--card-bg-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
    }
    
    .gift-name {
        color: var(--text-primary-dark, #f9fafb);
    }
    
    .selected-gift-info {
        background: var(--bg-secondary-dark, #111827);
    }
    
    .gift-chat-preview {
        background: var(--card-bg-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
    }
    
    .gift-received-notification {
        background: var(--card-bg-dark, #1f2937);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .gift-categories-tabs {
        padding: 12px;
        gap: 6px;
    }
    
    .gift-category-tab {
        min-width: 80px;
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .gift-category-tab i {
        font-size: 18px;
    }
    
    .gifts-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 12px;
        padding: 12px;
        max-height: 350px;
    }
    
    .gift-option {
        padding: 12px;
    }
    
    .gift-display {
        font-size: 40px;
    }
    
    .gift-name {
        font-size: 13px;
    }
    
    .gift-cost {
        font-size: 12px;
    }
    
    .gift-price-large {
        font-size: 20px;
    }
    
    .gift-received-notification {
        min-width: 280px;
        padding: 14px 16px;
    }
    
    .gift-received-icon {
        font-size: 40px;
    }
    
    .gift-received-text strong {
        font-size: 14px;
    }
    
    .gift-received-text p {
        font-size: 13px;
    }
}

/* RTL Support */
[dir="rtl"] .gift-badge {
    left: auto;
    right: 8px;
}

[dir="rtl"] .gift-option.selected::before {
    right: auto;
    left: 8px;
}

/* Accessibility */
.gift-option:focus {
    outline: 2px solid var(--primary-color, #ff4b6a);
    outline-offset: 2px;
}

.gift-category-tab:focus {
    outline: 2px solid var(--primary-color, #ff4b6a);
    outline-offset: 2px;
}

/* Performance Optimizations */
.gift-option,
.gift-display,
.gift-success-content,
.gift-received-notification {
    will-change: transform;
}

/* Smooth Scrolling */
.gifts-grid {
    scroll-behavior: smooth;
}

.gifts-grid::-webkit-scrollbar {
    width: 8px;
}

.gifts-grid::-webkit-scrollbar-track {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 4px;
}

.gifts-grid::-webkit-scrollbar-thumb {
    background: var(--primary-color, #ff4b6a);
    border-radius: 4px;
}

.gifts-grid::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color, #ff8e53);
}


/* ==================== SETTINGS MANAGER STYLES (Task 3.4) ==================== */

/* Settings Modal */
.settings-modal-content {
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Settings Categories Tabs */
.settings-categories {
    display: flex;
    gap: 8px;
    padding: 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-categories::-webkit-scrollbar {
    display: none;
}

.settings-category-tab {
    flex: 1;
    min-width: 100px;
    padding: 12px 16px;
    background: white;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.settings-category-tab i {
    font-size: 18px;
}

.settings-category-tab:hover {
    border-color: var(--primary-color, #ff4b6a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.2);
}

.settings-category-tab.active {
    background: linear-gradient(135deg, var(--primary-color, #ff4b6a), var(--secondary-color, #ff8e53));
    border-color: var(--primary-color, #ff4b6a);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.3);
}

/* Settings Category Content */
.settings-category-content {
    display: none;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.settings-category-content.active {
    display: block;
}

/* Settings Section */
.settings-section {
    margin-bottom: 32px;
}

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

.settings-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section h4 i {
    color: var(--primary-color, #ff4b6a);
}

/* Setting Item */
.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.setting-item:hover {
    border-color: var(--primary-color, #ff4b6a);
    box-shadow: 0 2px 8px rgba(255, 75, 106, 0.1);
}

.setting-info {
    flex: 1;
}

.setting-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    margin-bottom: 4px;
}

.setting-label i {
    font-size: 16px;
    color: var(--text-secondary, #6b7280);
}

.setting-description {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}

/* Settings Button */
.settings-btn {
    width: 100%;
    padding: 16px;
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary, #1f2937);
    margin-bottom: 12px;
}

.settings-btn i:first-child {
    font-size: 18px;
    color: var(--text-secondary, #6b7280);
}

.settings-btn span {
    flex: 1;
    text-align: right;
}

.settings-btn i:last-child {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
}

.settings-btn:hover {
    border-color: var(--primary-color, #ff4b6a);
    box-shadow: 0 2px 8px rgba(255, 75, 106, 0.1);
    transform: translateX(-2px);
}

.settings-btn.primary {
    background: linear-gradient(135deg, var(--primary-color, #ff4b6a), var(--secondary-color, #ff8e53));
    border-color: var(--primary-color, #ff4b6a);
    color: white;
}

.settings-btn.primary i {
    color: white;
}

.settings-btn.primary:hover {
    box-shadow: 0 4px 12px rgba(255, 75, 106, 0.3);
}

.settings-btn.danger {
    border-color: var(--error-color, #ef4444);
    color: var(--error-color, #ef4444);
}

.settings-btn.danger i {
    color: var(--error-color, #ef4444);
}

.settings-btn.danger:hover {
    background: var(--error-color, #ef4444);
    color: white;
}

.settings-btn.danger:hover i {
    color: white;
}

/* Settings Back Button */
.settings-back-btn {
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 20px;
}

.settings-back-btn:hover {
    background: white;
    border-color: var(--primary-color, #ff4b6a);
    color: var(--primary-color, #ff4b6a);
}

/* Toggle Switch (Enhanced) */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary, #e5e7eb);
    transition: 0.3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background: linear-gradient(135deg, var(--primary-color, #ff4b6a), var(--secondary-color, #ff8e53));
}

input:focus + .slider {
    box-shadow: 0 0 0 2px rgba(255, 75, 106, 0.2);
}

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

.slider.round {
    border-radius: 28px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Form Select (Enhanced) */
.form-select {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary, #1f2937);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.form-select:hover {
    border-color: var(--primary-color, #ff4b6a);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color, #ff4b6a);
    box-shadow: 0 0 0 3px rgba(255, 75, 106, 0.1);
}

/* App Version */
.app-version {
    text-align: center;
    padding: 16px;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.app-version i {
    font-size: 12px;
}

/* Blocked Users List */
.blocked-users-list {
    margin-top: 16px;
}

.blocked-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin-bottom: 12px;
}

.blocked-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.blocked-user-info {
    flex: 1;
}

.blocked-user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.blocked-user-date {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

.unblock-btn {
    padding: 8px 16px;
    background: var(--error-color, #ef4444);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.unblock-btn:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #6b7280);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 14px;
}

/* Text Utilities */
.text-muted {
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
    line-height: 1.6;
}

.text-muted.small {
    font-size: 12px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .settings-category-tab {
        background: var(--card-bg-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
        color: var(--text-secondary-dark, #9ca3af);
    }
    
    .setting-item,
    .settings-btn {
        background: var(--card-bg-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
    }
    
    .setting-label,
    .settings-btn {
        color: var(--text-primary-dark, #f9fafb);
    }
    
    .form-select {
        background: var(--card-bg-dark, #1f2937);
        border-color: var(--border-color-dark, #374151);
        color: var(--text-primary-dark, #f9fafb);
    }
    
    .slider {
        background-color: var(--bg-tertiary-dark, #374151);
    }
    
    .settings-back-btn {
        background: var(--bg-secondary-dark, #111827);
        border-color: var(--border-color-dark, #374151);
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .settings-modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .settings-categories {
        padding: 12px;
        gap: 6px;
    }
    
    .settings-category-tab {
        min-width: 80px;
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .settings-category-tab i {
        font-size: 16px;
    }
    
    .settings-category-content {
        padding: 16px;
    }
    
    .setting-item {
        padding: 14px;
    }
    
    .setting-label {
        font-size: 14px;
    }
    
    .setting-description {
        font-size: 12px;
    }
    
    .settings-btn {
        padding: 14px;
        font-size: 14px;
    }
}

/* RTL Support */
[dir="rtl"] .settings-btn i:last-child {
    transform: rotate(180deg);
}

[dir="rtl"] .settings-back-btn i {
    transform: rotate(180deg);
}

[dir="rtl"] .slider:before {
    left: auto;
    right: 4px;
}

[dir="rtl"] input:checked + .slider:before {
    transform: translateX(-24px);
}

/* Accessibility */
.settings-category-tab:focus,
.settings-btn:focus,
.settings-back-btn:focus {
    outline: 2px solid var(--primary-color, #ff4b6a);
    outline-offset: 2px;
}

.switch input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(255, 75, 106, 0.2);
}

/* Animations */
@keyframes settingsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-category-content.active {
    animation: settingsFadeIn 0.3s ease;
}

/* Performance Optimizations */
.settings-category-tab,
.setting-item,
.settings-btn {
    will-change: transform;
}

/* Smooth Scrolling */
.settings-category-content {
    scroll-behavior: smooth;
}

.settings-category-content::-webkit-scrollbar {
    width: 8px;
}

.settings-category-content::-webkit-scrollbar-track {
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 4px;
}

.settings-category-content::-webkit-scrollbar-thumb {
    background: var(--primary-color, #ff4b6a);
    border-radius: 4px;
}

.settings-category-content::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color, #ff8e53);
}


/* ==================== DESIGN SYSTEM UTILITIES (Task 3.5) ==================== */

/* ===== SPACING UTILITIES (8PX GRID) ===== */
/* Padding */
.p-0 { padding: var(--spacing-0) !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.p-6 { padding: var(--spacing-6) !important; }
.p-8 { padding: var(--spacing-8) !important; }

/* Padding X (horizontal) */
.px-0 { padding-left: var(--spacing-0) !important; padding-right: var(--spacing-0) !important; }
.px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }

/* Padding Y (vertical) */
.py-0 { padding-top: var(--spacing-0) !important; padding-bottom: var(--spacing-0) !important; }
.py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }

/* Margin */
.m-0 { margin: var(--spacing-0) !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-3 { margin: var(--spacing-3) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-6 { margin: var(--spacing-6) !important; }
.m-8 { margin: var(--spacing-8) !important; }

/* Margin X (horizontal) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
.mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }

/* Margin Y (vertical) */
.my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
.my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }

/* Margin Top */
.mt-0 { margin-top: var(--spacing-0) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }

/* Gap (for flexbox/grid) */
.gap-1 { gap: var(--spacing-1) !important; }
.gap-2 { gap: var(--spacing-2) !important; }
.gap-3 { gap: var(--spacing-3) !important; }
.gap-4 { gap: var(--spacing-4) !important; }
.gap-6 { gap: var(--spacing-6) !important; }

/* ===== BORDER RADIUS UTILITIES ===== */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ===== SHADOW UTILITIES ===== */
.shadow-none { box-shadow: none !important; }
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* ===== TEXT UTILITIES ===== */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }

.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-inverse { color: var(--text-inverse) !important; }
.text-muted { color: var(--text-muted) !important; }

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

/* ===== BACKGROUND UTILITIES ===== */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }

.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-error { background-color: var(--error-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

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

/* ===== BORDER UTILITIES ===== */
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: none !important; }
.border-light { border-color: var(--border-light) !important; }
.border-dark { border-color: var(--border-dark) !important; }
.border-primary { border-color: var(--primary-color) !important; }

/* ===== DISPLAY UTILITIES ===== */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* ===== FLEXBOX UTILITIES ===== */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }

.flex-1 { flex: 1 !important; }
.flex-auto { flex: auto !important; }
.flex-none { flex: none !important; }

/* ===== POSITION UTILITIES ===== */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* ===== OVERFLOW UTILITIES ===== */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ===== WIDTH/HEIGHT UTILITIES ===== */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }

/* ===== OPACITY UTILITIES ===== */
.opacity-0 { opacity: var(--opacity-0) !important; }
.opacity-50 { opacity: var(--opacity-50) !important; }
.opacity-100 { opacity: var(--opacity-100) !important; }

/* ===== TRANSITION UTILITIES ===== */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-normal { transition: var(--transition-normal) !important; }
.transition-slow { transition: var(--transition-slow) !important; }
.transition-all { transition: all var(--transition-normal) !important; }

/* ===== CURSOR UTILITIES ===== */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ===== POINTER EVENTS UTILITIES ===== */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ===== USER SELECT UTILITIES ===== */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }

/* ===== Z-INDEX UTILITIES ===== */
.z-0 { z-index: var(--z-base) !important; }
.z-10 { z-index: var(--z-dropdown) !important; }
.z-20 { z-index: var(--z-sticky) !important; }
.z-30 { z-index: var(--z-fixed) !important; }
.z-40 { z-index: var(--z-modal-backdrop) !important; }
.z-50 { z-index: var(--z-modal) !important; }
.z-max { z-index: var(--z-max) !important; }

/* ===== VISIBILITY UTILITIES ===== */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
    .mobile-hidden { display: none !important; }
    .mobile-visible { display: block !important; }
}

@media (min-width: 769px) {
    .desktop-hidden { display: none !important; }
    .desktop-visible { display: block !important; }
}

/* ===== ACCESSIBILITY UTILITIES ===== */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

.focus-visible:focus {
    outline: 2px solid var(--border-focus) !important;
    outline-offset: 2px !important;
}

/* ===== GRADIENT UTILITIES ===== */
.gradient-primary {
    background: var(--primary-gradient) !important;
}

.gradient-secondary {
    background: var(--secondary-gradient) !important;
}

/* ===== ICON SIZE UTILITIES ===== */
.icon-xs { font-size: 12px !important; }
.icon-sm { font-size: 14px !important; }
.icon-md { font-size: 16px !important; }
.icon-lg { font-size: 20px !important; }
.icon-xl { font-size: 24px !important; }
.icon-2xl { font-size: 32px !important; }

/* ===== ANIMATION UTILITIES ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn var(--transition-normal);
}

.animate-slide-in-up {
    animation: slideInUp var(--transition-normal);
}

.animate-slide-in-down {
    animation: slideInDown var(--transition-normal);
}

.animate-scale-in {
    animation: scaleIn var(--transition-normal);
}

/* ===== HOVER UTILITIES ===== */
.hover-lift {
    transition: transform var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale {
    transition: transform var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-shadow {
    transition: box-shadow var(--transition-normal);
}

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

/* ===== TRUNCATE TEXT UTILITIES ===== */
.truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.line-clamp-1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ===== ASPECT RATIO UTILITIES ===== */
.aspect-square {
    aspect-ratio: 1 / 1 !important;
}

.aspect-video {
    aspect-ratio: 16 / 9 !important;
}

.aspect-portrait {
    aspect-ratio: 3 / 4 !important;
}

/* ===== DESIGN SYSTEM AUDIT HELPER ===== */
.ds-audit-highlight {
    outline: 2px dashed var(--warning-color) !important;
    outline-offset: 2px !important;
}

.ds-audit-pass {
    outline: 2px solid var(--success-color) !important;
    outline-offset: 2px !important;
}

/* ===== PRINT UTILITIES ===== */
@media print {
    .print-hidden {
        display: none !important;
    }
}

/* Modal Header Actions */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Delete All Notifications Button */
.btn-text-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--error-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-text-danger:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--error-color);
}

.btn-text-danger:active {
    transform: scale(0.95);
}

.btn-text-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-text-danger i {
    font-size: 14px;
}

/* Mark All As Read Button */
.btn-text-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-text-primary:hover {
    background: rgba(255, 75, 106, 0.1);
    color: var(--primary-color);
}

.btn-text-primary:active {
    transform: scale(0.95);
}

.btn-text-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-text-primary i {
    font-size: 14px;
}


/* Image Lightbox */
#image-lightbox {
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
}

#image-lightbox .lightbox-content {
    background: transparent;
    box-shadow: none;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0;
    position: relative;
}

#image-lightbox .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#image-lightbox .lightbox-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

#lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}