/* ========================================
   AUTH PAGES - LOGIN & REGISTER
   ======================================== */
small {
    display: flex !important;
    align-items: center;
}
small i {
      margin-left: 7px;
      margin-right: 7px;
}
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    position: relative;
}

/* Radial Glow Effect */
.auth-page::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(800px, 90vw);
    height: min(800px, 90vw);
    background: radial-gradient(circle, rgba(5, 150, 105, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.auth-container {
    width: 100%;
    max-width: 440px;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* Two-Column Split Layout */
.auth-split-container {
    max-width: 1200px;
    display: flex;
    gap: var(--spacing-2xl);
    align-items: stretch;
}

.auth-form-column {
    flex: 1;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.auth-info-column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.auth-info-content {
    max-width: 500px;
}

.auth-info-icon {
    width: 80px;
    height: 80px;
    background: var(--bg-secondary);
    border: 2px solid var(--btn-primary-bg);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.auth-info-icon i {
    font-size: 2.5rem;
    color: var(--btn-primary-bg);
}

.auth-info-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.auth-info-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
}

.auth-info-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.auth-info-steps li i {
    color: var(--btn-primary-bg);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.auth-info-note {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--btn-primary-bg);
}

/* Branding Marquee */
.auth-branding-marquee {
    margin-top: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.marquee-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--font-size-sm);
}

.marquee-header i {
    color: var(--btn-primary-bg);
    font-size: 1rem;
}

.partner-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.partner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--overlay-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.partner-icon:hover {
    background: var(--overlay-light);
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
}

.partner-icon i {
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    transition: all var(--transition-fast);
}

.partner-icon:hover i {
    color: var(--btn-primary-bg);
}

/* Fallback text for icons that don't load */
.partner-icon::before {
    content: attr(title);
    font-size: 0.625rem;
    color: var(--text-secondary);
    display: none;
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    letter-spacing: 0.05em;
}

/* Show text if icon doesn't exist */
.partner-icon:not(:has(i))::before {
    display: block;
}

/* Marquee Container with Overflow Control */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}

.marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
    width: fit-content;
}

.marquee-content span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: 0 var(--spacing-2xl);
    display: inline-flex;
    align-items: center;
}

.marquee-content span::after {
    content: '•';
    margin-left: var(--spacing-2xl);
    color: var(--btn-primary-bg);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Enhanced Info Column */
.auth-info-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.auth-info-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.auth-info-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.auth-info-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-md);
}

.auth-info-section-title i {
    color: var(--btn-primary-bg);
    font-size: 1.25rem;
}

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

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

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

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

.auth-info-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--overlay-light);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.auth-info-feature:hover {
    background: var(--overlay-medium);
    transform: translateX(4px);
}

.auth-info-feature i {
    color: var(--btn-primary-bg);
    font-size: 1rem;
    flex-shrink: 0;
}

.auth-info-feature span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.auth-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.auth-logo img {
    height: 48px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

.auth-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-tight);
}

.auth-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.auth-form {
    margin-bottom: var(--spacing-xl);
}

.auth-footer {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

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

.auth-footer-link {
    color: var(--accent-secondary);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.auth-footer-link:hover {
    color: var(--text-primary);
    opacity: 0.9;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.auth-form .btn-primary {
    width: 100%;
}

/* OTP Section */
.otp-section {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.otp-label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-xs);
}

.otp-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* OTP Input Boxes */
.otp-inputs {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-bottom: var(--spacing-md);
    direction: ltr !important;
}

.otp-box {
    width: 2.75rem;
    height: 3rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: var(--font-semibold);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    direction: ltr !important;
    unicode-bidi: bidi-override;
}

.otp-box:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

/* OTP Links */
.otp-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.otp-links span {
    color: var(--text-tertiary);
}

.link-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    font-size: var(--font-size-sm);
    transition: opacity var(--transition-fast);
    text-decoration: underline;
}

.link-btn:hover {
    opacity: 0.7;
}

.link-btn.active {
    color: var(--btn-primary-bg);
    font-weight: var(--font-semibold);
}

/* Phone Input Group */
.phone-input-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.phone-input-group .input-field {
    flex: 1;
}

/* Custom Select Wrapper */
.custom-select-wrapper {
    position: relative;
    min-width: 120px;
    max-width: 150px;
    flex-shrink: 0;
}

/* Custom Select Trigger */
.custom-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    user-select: none;
    height: auto;
    min-height: fit-content;
}

.custom-select:hover {
    border-color: var(--border-light);
}

.custom-select .selected-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select i {
    font-size: 1rem;
    transition: transform var(--transition-fast);
}

.custom-select.active i {
    transform: rotate(180deg);
}

/* Custom Dropdown */
.custom-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    max-height: 300px;
    overflow: hidden;
}

.custom-dropdown.active {
    display: block;
}

/* Dropdown Search */
.dropdown-search {
    width: 100%;
    padding: var(--spacing-sm);
    background-color: var(--input-bg);
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    outline: none;
}

.dropdown-search:focus {
    background-color: var(--bg-primary);
}

/* Dropdown Options */
.dropdown-options {
    max-height: 250px;
    overflow-y: auto;
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

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

.dropdown-option .country-flag {
    font-size: 1.25rem;
}

.dropdown-option .country-name {
    flex: 1;
    font-size: var(--font-size-sm);
}

.dropdown-option .country-dial {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.phone-number {
    flex: 1;
}

/* Spinner Animation */
.spin {
    animation: spin 1s linear infinite;
}

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

/* ========================================
   HOME PAGE
   ======================================== */

.hero-section {
    padding: var(--spacing-3xl) 0 var(--spacing-4xl);
    margin-bottom: var(--spacing-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
}

.hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.hero-badge:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.hero-badge i {
    font-size: var(--font-size-base);
}

/* Hero Title */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    max-width: 800px;
}

/* Hero Description */
.hero-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
}

/* Hero Actions */
.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

/* Hero Features Span */
.hero-features {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2xl);
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
}

.hero-feature-item i {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.hero-feature-divider {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
}

/* Marquee Container */
.marquee-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 1400px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    animation: marqueeUp 40s linear infinite;
}

.marquee-column-reverse {
    animation: marqueeDown 40s linear infinite;
}

.marquee-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Marquee Cards */
.marquee-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.marquee-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
}

.marquee-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: var(--font-size-2xl);
    color: white;
}

.marquee-card h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.marquee-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Marquee Animations */
@keyframes marqueeUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes marqueeDown {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Pause animation on hover */
.marquee-column:hover {
    animation-play-state: paused;
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-relaxed);
    max-width: 600px;
    margin: 0 auto var(--spacing-2xl);
}

/* Content Section */
.content-section {
    margin-bottom: var(--spacing-3xl);
}

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

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.section-action {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

.section-action:hover {
    color: var(--text-primary);
}

/* Dashboard Cards */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.dashboard-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    transition: all var(--transition-fast);
}

.dashboard-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
}

.dashboard-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
}

.dashboard-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.dashboard-card-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Dashboard Card Link */
.dashboard-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Dashboard Card Avatar */
.dashboard-card-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

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

.dashboard-card-avatar .avatar-initials {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-transform: uppercase;
}

.dashboard-card-avatar .user-avatar-badges {
    position: absolute;
    bottom: -5px;
    right: -5px;
    display: flex;
    gap: 4px;
}

.dashboard-card-avatar .user-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dashboard-card-avatar .user-badge .badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dashboard-card-avatar .user-badge i {
    font-size: 0.75rem;
}

/* Member Card Stats */
.member-card-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    width: 100%;
}

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

.member-stat i {
    font-size: 1rem;
    color: var(--btn-primary-bg);
}

.member-stat span {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* ===== FACEBOOK-STYLE PROFILE LAYOUT ===== */
.fb-profile-page {
    background-color: var(--bg-primary);
    min-height: 100vh;
}

/* Cover Photo */
.fb-cover-container {
    width: 100%;
    background-color: var(--bg-secondary);
}

.fb-cover-photo {
    max-width: 1100px;
    margin: 0 auto;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-tertiary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Profile Header */
.fb-profile-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.fb-profile-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl) var(--spacing-lg);
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-xl);
    position: relative;
}

/* Avatar */
.fb-avatar-container {
    position: relative;
    margin-top: -75px;
}

.fb-avatar {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 4px solid var(--bg-secondary);
    background-color: var(--bg-tertiary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--overlay-dark);
}

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

.fb-avatar-initials {
    font-size: 3.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-transform: uppercase;
}

.fb-plan-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 3px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fb-plan-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* User Info */
.fb-user-info {
    flex: 1;
    padding-bottom: var(--spacing-md);
}

.fb-username {
    font-size: 2rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    
}
@media (max-width: 768px) {
   .fb-username {
     
            justify-content: center;
    }
}

.fb-verified-badge {
    font-size: 1.5rem;
    color: var(--btn-primary-bg);
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    margin-left: var(--spacing-xs);
}

.user-status-badge.blocked {
    color: var(--error-color);
}

.user-status-badge.suspended {
    color: var(--warning-color);
}

[dir="rtl"] .user-status-badge {
    margin-left: 0;
    margin-right: var(--spacing-xs);
}

.fb-user-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.fb-stat-link {
    text-decoration: none;
    color: var(--text-secondary);
    display: flex;
    gap: var(--spacing-xs);
    align-items: baseline;
    transition: color var(--transition-fast);
}

.fb-stat-link:hover {
    color: var(--text-primary);
}

.fb-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

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

/* Profile Actions */
.fb-profile-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
}

.fb-btn-follow,
.fb-btn-message {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-decoration: none;
}

.fb-btn-follow {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

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

.fb-btn-follow.following {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.fb-btn-follow.following:hover {
    background-color: var(--overlay-light);
    color: var(--error-color);
    border-color: var(--error-color);
}

.fb-btn-message {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.fb-btn-message:hover {
    background-color: var(--overlay-medium);
}

/* Navigation Tabs */
.fb-profile-nav {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.fb-profile-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    gap: var(--spacing-xs);
}

.fb-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.fb-tab-btn:hover {
    background-color: var(--overlay-light);
    color: var(--text-primary);
}

.fb-tab-btn.active {
    color: var(--btn-primary-bg);
    border-bottom-color: var(--btn-primary-bg);
}

.fb-tab-btn i {
    font-size: 1.25rem;
}

/* Profile Content */
.fb-profile-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--spacing-xl);
}

/* Sidebar */
.fb-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Card */
.fb-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.fb-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.fb-card-body {
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* Intro Section */
.fb-bio {
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

.fb-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.fb-info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.fb-info-item i {
    font-size: 1.25rem;
    color: var(--btn-primary-bg);
    width: 24px;
}

/* Badges Grid */
.fb-badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.fb-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    text-align: center;
}

.fb-badge-item img,
.fb-badge-item i {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.fb-badge-item i {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-badge-item span {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Rating Stats */
.fb-rating-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.fb-rating-row {
    display: flex;
    gap: var(--spacing-xl);
}

.fb-rating-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.fb-rating-item.positive {
    background-color: var(--overlay-light);
}

.fb-rating-item.negative {
    background-color: var(--overlay-light);
}

.fb-rating-item i {
    font-size: 1.5rem;
}

.fb-rating-item.positive i {
    color: var(--success-color);
}

.fb-rating-item.negative i {
    color: var(--error-color);
}

.fb-rating-count {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.fb-rating-percentage {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.fb-rating-bar {
    height: 8px;
    background-color: var(--overlay-medium);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.fb-rating-fill {
    height: 100%;
    background-color: var(--success-color);
    transition: width var(--transition-base);
}

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

/* Block Button */
.fb-btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fb-btn-block:hover {
    background-color: var(--overlay-light);
    color: var(--error-color);
    border-color: var(--error-color);
}

/* Main Content */
.fb-main-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.fb-tab-content {
    display: none;
}

.fb-tab-content.active {
    display: block;
}

/* About Tab */
.fb-about-section {
    margin-bottom: var(--spacing-xl);
}

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

.fb-about-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.fb-about-text {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

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

.fb-stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--overlay-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.fb-stat-card:hover {
    background-color: var(--overlay-light);
    border-color: var(--border-light);
}

.fb-stat-card i {
    font-size: 1.5rem;
    color: var(--btn-primary-bg);
}

/* Responsive */
@media (max-width: 1024px) {
    .fb-profile-content {
        grid-template-columns: 1fr;
    }
    
    .fb-sidebar {
        order: 2;
    }
    
    .fb-main-content {
        order: 1;
    }
}

@media (max-width: 768px) {
    .fb-cover-photo {
        height: 200px;
        border-radius: 0;
    }
    
    .fb-avatar {
        width: 120px;
        height: 120px;
    }
    
    .fb-avatar-initials {
        font-size: 2.5rem;
    }
    
    .fb-avatar-container {
        margin-top: -60px;
    }
    
    .fb-profile-header-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .fb-user-info {
        padding-bottom: 0;
    }
    
    .fb-user-stats {
        justify-content: center;
    }
    
    .fb-profile-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .fb-btn-follow,
    .fb-btn-message {
        width: 100%;
        justify-content: center;
    }
    
    .fb-profile-nav-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .fb-tab-btn {
        white-space: nowrap;
    }
    
    .fb-profile-content {
        padding: var(--spacing-md);
    }
    
    .fb-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fb-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.stat-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    transition: all var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--overlay-medium);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.stat-icon.primary {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
}

.stat-icon.warning {
    background: var(--overlay-light);
    color: var(--warning-color);
}

.stat-icon.info {
    background: var(--overlay-light);
    color: var(--info-color);
}

.stat-icon.success {
    background: var(--overlay-light);
    color: var(--success-color);
}

.stat-icon.accent {
    background: var(--overlay-medium);
    color: var(--btn-primary-bg);
}

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

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    line-height: var(--line-height-normal);
}

/* ========================================
   ADMIN ORDERS - FINANCIAL BREAKDOWN
   ======================================== */

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

.financial-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.financial-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.financial-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.financial-total {
    border-top: 2px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.financial-total .financial-label {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: var(--font-bold);
}

.financial-total .financial-value {
    font-size: var(--font-size-2xl);
}

/* ========================================
   ADMIN ORDERS - USER CARDS
   ======================================== */

.user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
}

.user-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 3px solid var(--border-color);
}

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

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    color: white;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
}

.user-card-info h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.user-card-info p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ========================================
   ADMIN ORDERS - QUICK STATS
   ======================================== */

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

.quick-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

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

.quick-stat-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: var(--font-bold);
}

/* ========================================
   ADMIN ORDERS - CREDENTIALS BOX
   ======================================== */

.credentials-box {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.credentials-content {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ========================================
   ADMIN ORDERS - FILTER FORM
   ======================================== */

.filters-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

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

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

/* ========================================
   ADMIN TABLE LINKS
   ======================================== */

.table-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.table-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.table-link i {
    font-size: 0.875em;
}

/* ========================================
   ORDER AMOUNT NOTE
   ======================================== */

.order-amount-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    display: block;
}

/* ========================================
   ADMIN ORDERS - MODERN DESIGN
   ======================================== */

/* Page Header */
.page-header-admin {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.back-button {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-base);
    flex-shrink: 0;
    font-size: 18px;
}

.back-button:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
    transform: translateX(-2px);
}

.page-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
}

.page-title-admin {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.page-subtitle-admin {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0;
}

.page-header-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.btn-back-admin {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-back-admin:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.badge-xl {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
}

/* Modern Stats Grid */
.stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card-modern {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stat-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    transition: width var(--transition-normal);
}

.stat-card-modern:hover::before {
    width: 100%;
    opacity: 0.05;
}

.stat-card-modern.primary::before {
    background: var(--primary-color);
}

.stat-card-modern.warning::before {
    background: var(--warning-color);
}

.stat-card-modern.info::before {
    background: var(--info-color);
}

.stat-card-modern.success::before {
    background: var(--success-color);
}

.stat-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.stat-card-icon-modern {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.stat-card-modern.primary .stat-card-icon-modern {
    color: var(--primary-color);
}

.stat-card-modern.warning .stat-card-icon-modern {
    color: var(--warning-color);
}

.stat-card-modern.info .stat-card-icon-modern {
    color: var(--info-color);
}

.stat-card-modern.success .stat-card-icon-modern {
    color: var(--success-color);
}

.stat-card-content-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.stat-card-label-modern {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.stat-card-value-modern {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    line-height: 1;
}

/* Revenue Cards */
.revenue-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.revenue-card {
    background: var(--btn-primary-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    color: white;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.revenue-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: var(--overlay-light);
    pointer-events: none;
}

.revenue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--overlay-dark);
}

.revenue-card.gradient-primary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
}

.revenue-card.gradient-success {
    background: var(--bg-tertiary);
    border: 1px solid var(--success-color);
}

.revenue-card.gradient-info {
    background: var(--bg-tertiary);
    border: 1px solid var(--info-color);
}

.revenue-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    opacity: 0.9;
    margin-bottom: var(--spacing-lg);
}

.revenue-card-header i {
    font-size: 18px;
}

.revenue-card-amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.revenue-card-footer {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

/* Section Headers */
.section-header-with-border {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--spacing-xl);
}

.section-title-admin {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title-admin i {
    color: var(--primary-color);
    font-size: 22px;
}

.section-title-sm {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title-sm i {
    color: var(--primary-color);
}

.section-count {
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

/* Modern Filters */
.filters-form-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.form-label-modern {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.form-label-modern i {
    color: var(--primary-color);
}

.filters-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Modern Table */
.table-container-modern {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.table-modern {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-secondary);
}

.table-modern thead {
    background-color: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
}

.table-modern thead th {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-modern tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.table-modern tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.table-modern tbody tr:last-child {
    border-bottom: none;
}

.table-modern tbody td {
    padding: var(--spacing-lg) var(--spacing-md);
    vertical-align: middle;
    font-size: var(--font-size-sm);
}

.table-row-hover:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Order Cell */
.order-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.order-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.order-number {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2xs);
}

.order-type {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: capitalize;
}

/* User Link */
.user-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

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

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    overflow: hidden;
    flex-shrink: 0;
}

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

/* Financial Cell */
.financial-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.financial-row-small {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
}

.financial-label-small {
    color: var(--text-secondary);
}

/* Date Cell */
.date-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.date-main {
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.date-time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Badge Modern */
.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
}

.badge-modern i {
    font-size: 12px;
}

.badge-sm {
    padding: var(--spacing-2xs) var(--spacing-sm);
    font-size: var(--font-size-2xs);
}

/* View Button */
.btn-view-modern {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background-color: var(--primary-color);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: 16px;
}

.btn-view-modern:hover {
    background-color: var(--accent-color);
    transform: scale(1.1);
}

/* Empty State Modern */
.empty-state-modern {
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.empty-state-icon {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    font-size: 48px;
    color: var(--text-secondary);
}

.empty-state-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.empty-state-desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* Pagination Modern */
.pagination-modern {
    padding: var(--spacing-xl) 0;
    display: flex;
    justify-content: center;
}

/* Admin Grid Layout */
.admin-grid-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-xl);
}

.admin-main-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.admin-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Info Grid Modern */
.info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-lg);
}

.info-item-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-label-modern {
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value-modern {
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* Financial Breakdown Modern */
.financial-breakdown-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.financial-item-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.financial-item-modern:hover {
    background-color: var(--bg-primary);
}

.financial-item-modern.highlight {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    padding: var(--spacing-lg);
}

.financial-label-modern {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.financial-label-modern i {
    font-size: 18px;
    color: var(--primary-color);
}

.financial-value-modern {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.financial-value-modern.primary {
    color: var(--primary-color);
}

.financial-value-modern.success {
    color: var(--success-color);
}

.financial-value-modern.info {
    color: var(--info-color);
}

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

.financial-alert {
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--info-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.financial-alert i {
    color: var(--info-color);
}

/* Credentials Box Modern */
.credentials-box-modern {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.credentials-content-modern {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* Timeline Modern */
.timeline-modern {
    position: relative;
    padding-left: var(--spacing-2xl);
}

.timeline-modern::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--border-color);
}

.timeline-item-modern {
    position: relative;
    padding-bottom: var(--spacing-2xl);
}

.timeline-item-modern:last-child {
    padding-bottom: 0;
}

.timeline-icon-modern {
    position: absolute;
    left: -32px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--bg-secondary);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
    z-index: 1;
}

.timeline-item-modern.completed .timeline-icon-modern {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.timeline-item-modern.cancelled .timeline-icon-modern {
    background: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

.timeline-content-modern {
    padding-left: var(--spacing-lg);
}

.timeline-title-modern {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.timeline-date-modern {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* User Card Modern */
.user-card-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
}

.user-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 3px solid var(--border-color);
    flex-shrink: 0;
}

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

.avatar-placeholder-large {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    color: white;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
}

.user-info-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
}

.user-name-modern {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.user-email-modern {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Quick Stats Modern */
.quick-stats-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.quick-stat-item-modern {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.quick-stat-item-modern:hover {
    background-color: var(--bg-primary);
    transform: translateX(4px);
}

.quick-stat-icon-modern {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.quick-stat-icon-modern.primary {
    background: var(--btn-primary-bg);
}

.quick-stat-icon-modern.success {
    background: var(--success-color);
}

.quick-stat-icon-modern.info {
    background: var(--info-color);
}

.quick-stat-content-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.quick-stat-label-modern {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.quick-stat-value-modern {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

/* ========================================
   RESPONSIVE - ADMIN ORDERS
   ======================================== */

@media (max-width: 1024px) {
    .admin-grid-layout {
        grid-template-columns: 1fr;
    }
    
    .admin-sidebar-col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .page-header-admin {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-icon-wrapper {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
    
    .page-title-admin {
        font-size: var(--font-size-2xl);
    }
    
    .stats-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .revenue-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .table-container-modern {
        border-radius: 0;
    }
    
    .admin-sidebar-col {
        grid-template-columns: 1fr;
    }
    
    /* Empty States Mobile Adjustments */
    .empty-state,
    .empty-state-modern {
        padding: var(--spacing-3xl) var(--spacing-lg);
    }
    
    .empty-state-small {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .empty-state-icon {
        width: 80px;
        height: 80px;
        font-size: 36px;
    }
    
    .empty-state i {
        font-size: 2.5rem;
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .auth-container {
        padding: 0 var(--spacing-md);
    }
    
    /* Mobile: Stack columns vertically, form on top */
    .auth-split-container {
        flex-direction: column-reverse;
        gap: var(--spacing-xl);
    }
    
    .auth-form-column {
        max-width: 100%;
    }
    
    .auth-info-column {
        padding: var(--spacing-lg);
        order: -1; /* Show info column on top in mobile */
    }
    
    .auth-info-icon {
        width: 60px;
        height: 60px;
    }
    
    .auth-info-icon i {
        font-size: 2rem;
    }
    
    .auth-info-title {
        font-size: var(--font-size-xl);
    }
    
    .partner-icons {
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .partner-icon {
        width: 36px;
        height: 36px;
    }
    
    .partner-icon i {
        font-size: 1.25rem;
    }
    
    .auth-info-feature:hover {
        transform: none;
    }
    
    .marquee-content span {
        font-size: 0.8rem;
        padding: 0 var(--spacing-lg);
    }
    
    .marquee-content span::after {
        margin-left: var(--spacing-lg);
    }
    
    .auth-card {
        padding: var(--spacing-lg);
    }
    
    .auth-title {
        font-size: var(--font-size-xl);
    }
    
    .otp-box {
        width: 2.5rem;
        height: 2.75rem;
        font-size: 1.125rem;
    }
    
    .otp-inputs {
        gap: 0.375rem;
    }
    
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-description {
        font-size: var(--font-size-base);
    }
    
    .hero-features {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }
    
    .hero-feature-divider {
        display: none;
    }
    
    .marquee-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .marquee-column:last-child {
        display: none;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .auth-container {
        max-width: 100%;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-actions a {
        width: 100%;
        justify-content: center;
    }
    
    .marquee-container {
        grid-template-columns: 1fr;
    }
    
    .marquee-column:nth-child(2) {
        display: none;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ADMIN DASHBOARD PAGE STYLES
   ======================================== */

/* Statistics Cards */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.admin-stat-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: all var(--transition-fast);
}

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

.admin-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-stat-icon i {
    font-size: var(--font-size-2xl);
}

.admin-stat-content {
    flex: 1;
}

.admin-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

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

/* Admin Sections */
.admin-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}

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

.admin-section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 0;
}

/* Admin Tables */
.admin-table-container {
    overflow-x: auto;
    border-radius: var(--radius-md);
}

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

.admin-table thead {
    background-color: var(--bg-primary);
}

.admin-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-bottom: 1px solid var(--border-color);
}

.admin-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}

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

.admin-table tbody tr:last-child {
    border-bottom: none;
}

.admin-table td {
    padding: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

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

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.table-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.table-image-placeholder {
    width: 50px;
    height: 50px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.25rem;
}

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

.ip-link {
    color: var(--btn-primary-bg);
    text-decoration: none;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--transition-base);
}

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

.text-muted {
    color: var(--text-secondary);

    
    padding: var(--spacing-2xl) !important;
}

/* Admin Pagination */
.admin-pagination {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

/* Admin Search Form */
.admin-search-form {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
}

.admin-search-form .form-group {
    flex: 1;
    margin-bottom: 0;
}

.admin-search-form .form-input {
    width: 100%;
}

/* Admin Info Grid & Cards */
.admin-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.admin-info-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.admin-info-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-info-value {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

/* Admin Responsive */
@media (max-width: 1024px) {
    .admin-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .admin-section {
        padding: var(--spacing-lg);
    }

    .admin-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .admin-search-form {
        flex-direction: column;
        width: 100%;
    }
    
    .admin-search-form .form-group {
        width: 100%;
    }
    
    .admin-search-form .btn-primary,
    .admin-search-form .btn-secondary {
        width: 100%;
    }
    
    .admin-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-table-container {
        border-radius: 0;
        margin: 0 calc(var(--spacing-lg) * -1);
    }

    .admin-table th,
    .admin-table td {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }

    .user-cell {
        gap: var(--spacing-sm);
    }
}

/* ========================================
   USER PROFILE & MANAGEMENT PAGES
   ======================================== */

/* User Profile Card */
.user-profile-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
}

.user-profile-header {
    padding: var(--spacing-2xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
}

.user-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: white;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

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

.user-profile-info .badge {
    display: inline-flex;
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.user-profile-name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.user-profile-email {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.user-profile-bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

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

.user-profile-body {
    padding: var(--spacing-2xl);
}

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

.user-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.user-info-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-info-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-medium);
    word-break: break-word;
}

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

/* User Actions Card */
.user-actions-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.user-actions-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

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

.action-form {
    display: contents;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
    cursor: pointer;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font-family);
}

.btn-action i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

.btn-action span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

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

.btn-action .btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-action .btn-loader {
    display: none;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-action .btn-loader i {
    animation: spinner-rotate 0.8s linear infinite;
}

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

/* Button action variants - override only necessary properties */
.btn-action.btn-primary {
    background-color: var(--accent-primary);
    color: var(--btn-primary-text);
    border-color: transparent;
}

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

.btn-action.btn-success {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

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

.btn-action.btn-info {
    background-color: var(--info-color);
    color: white;
    border-color: var(--info-color);
}

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

.btn-action.btn-warning {
    background-color: var(--warning-color);
    color: white;
    border-color: var(--warning-color);
}

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

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

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

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

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

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--error-color);
    color: white;
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    font-family: var(--font-family);
    line-height: 1;
}

.btn-danger i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125em;
    line-height: 1;
}

.btn-danger span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.btn-danger:hover {
    background-color: var(--danger-color-hover);
    border-color: var(--danger-color-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

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

/* ========================================
   PROFILE IMAGES & BIO
   ======================================== */

/* Profile Background */
.user-profile-background {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: calc(var(--spacing-2xl) * -1);
}

/* Avatar with Image */
.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Bio */
.user-profile-bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-relaxed);
}

/* Image Upload Preview */
.current-image-preview {
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.avatar-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

.background-preview {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
}

.current-image-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* ========================================
   FILE INPUT STYLING - GLOBAL
   ======================================== */

/* Hide default file input */
input[type="file"] {
    position: relative;
    width: 100%;
    height: auto;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

/* Modern file input wrapper */
input[type="file"]::file-selector-button {
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-right: var(--spacing-md);
    cursor: pointer;
    font-weight: var(--font-semibold);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

input[type="file"]::file-selector-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: var(--accent-primary);
}

input[type="file"]::file-selector-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Custom file input container */
.file-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.file-input-wrapper input[type="file"] {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    transition: all var(--transition-fast);
}

.file-input-wrapper input[type="file"]:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-primary);
}

.file-input-wrapper input[type="file"]:focus {
    outline: none;
    border-color: var(--accent-primary);
    border-style: solid;
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 3px var(--overlay-light);
}

/* File input with .file-input class for enhanced styling */
.file-input {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.file-input:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-primary);
}

.file-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    border-style: solid;
    box-shadow: 0 0 0 3px var(--overlay-light);
}

.file-input::file-selector-button {
    margin-right: var(--spacing-md);
}

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

textarea.form-input {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-family);
    line-height: var(--line-height-normal);
}

/* ========================================
   LOGIN HISTORY
   ======================================== */

.login-history-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    margin-top: var(--spacing-xl);
}

.login-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.login-history-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.login-history-item:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}

.history-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    color: var(--primary);
    flex-shrink: 0;
}

.history-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

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

.history-type strong {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.history-time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.history-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.history-info span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.history-info i {
    font-size: var(--font-size-base);
}

.history-timestamp {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.no-login-history {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

.no-login-history i {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.login-history-pagination {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
}

/* Admin Forms */
.admin-form {
    max-width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

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

.form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

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

.form-input {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    width: 100%;
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2 + 12px);
    cursor: pointer;
    font-weight: 500;
    background-color: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    transition: all 0.2s ease;
}

select.form-input:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-tertiary);
}

select.form-input:focus {
    border-color: var(--accent-primary);
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 3px var(--overlay-medium);
}

/* Enhanced styling when a value is selected */
select.form-input:not([value=""]):valid,
select.form-input.has-value {
    font-weight: 600;
    border-color: var(--accent-primary);
    background-color: var(--overlay-light);
}

/* Show checkmark when option is selected */
select.form-input option:checked {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
}

select.form-input option {
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 500;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Placeholder option styling */
select.form-input option[value=""],
select.form-input option:disabled {
    color: var(--text-tertiary);
    font-style: italic;
    font-weight: 400;
}

[dir="rtl"] select.form-input {
    background-position: left var(--spacing-md) center;
    padding-right: var(--spacing-md);
    padding-left: calc(var(--spacing-md) * 2 + 12px);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--overlay-light);
}

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

.input-error:focus {
    box-shadow: 0 0 0 3px var(--overlay-light);
}

.form-error {
    font-size: var(--font-size-sm);
    color: var(--error-color);
    margin-top: var(--spacing-xs);
}

/* ========================================
   CHECKBOX STYLING - GLOBAL
   ======================================== */

/* Hide default checkbox and create custom one */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

input[type="checkbox"]:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-primary);
}

input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--overlay-light);
}

input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

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

input[type="checkbox"]:disabled:hover {
    border-color: var(--border-color);
    background-color: var(--bg-secondary);
}

/* Checkbox label wrapper */
.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    user-select: none;
}

.form-checkbox-label:hover {
    background-color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.form-checkbox-label input[type="checkbox"] {
    margin: 0;
}

.form-checkbox-label span {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.checkbox-group .form-checkbox-label {
    padding: var(--spacing-sm) var(--spacing-md);
}

.plans-checkboxes {
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Alternative: Simple checkbox without wrapper */
label:has(> input[type="checkbox"]:only-child) {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

/* Checkbox in form groups */
.form-group input[type="checkbox"] {
    margin-top: var(--spacing-xs);
}

.form-section {
    padding-top: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
    border-top: 1px solid var(--border-color);
}

.form-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.form-section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--border-color);
}

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

.inline-form {
    display: inline;
    margin: 0;
}

.btn-icon-danger {
    color: var(--error-color) !important;
}

.btn-icon-danger:hover {
    background-color: var(--overlay-light) !important;
}

/* Responsive User Management */
@media (max-width: 768px) {
    .user-profile-card {
        margin-bottom: var(--spacing-lg);
    }

    .user-profile-header {
        padding: var(--spacing-lg);
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: var(--spacing-lg);
    }

    .user-profile-avatar {
        width: 64px;
        height: 64px;
        font-size: var(--font-size-lg);
    }

    .user-profile-info {
        width: 100%;
    }

    .user-profile-name {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-sm);
    }

    .user-profile-email {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
    }

    .user-profile-bio {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
    }

    .user-profile-info .badge {
        margin-right: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .user-profile-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .user-profile-actions .btn-primary,
    .user-profile-actions .btn-secondary {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        font-size: var(--font-size-base);
    }

    .user-profile-body {
        padding: var(--spacing-lg);
    }

    .user-info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .user-info-item {
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
    }

    .user-info-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .user-info-label {
        font-size: 0.7rem;
        margin-bottom: var(--spacing-xs);
    }

    .user-info-value {
        font-size: var(--font-size-base);
    }

    .user-info-value .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .text-muted {
        font-size: 0.75rem;
        margin-top: var(--spacing-xs);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .user-actions-list,
    .user-actions-grid {
        grid-template-columns: 1fr;
    }

    .btn-action {
        width: 100%;
        justify-content: center;
    }

    .table-actions {
        flex-wrap: wrap;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .user-profile-header {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .user-profile-avatar {
        width: 56px;
        height: 56px;
        font-size: var(--font-size-base);
    }

    .user-profile-name {
        font-size: var(--font-size-lg);
    }

    .user-profile-email {
        font-size: 0.8125rem;
    }

    .user-profile-bio {
        font-size: 0.8125rem;
    }

    .user-profile-body {
        padding: var(--spacing-md);
    }

    .user-info-grid {
        gap: var(--spacing-md);
    }

    .user-info-item {
        padding-bottom: var(--spacing-sm);
    }
}

/* ========================================
   PROFILE PAGE (Social Media Style)
   ======================================== */

/* Profile Layout with Sidebar */
.profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-2xl);
    min-height: calc(100vh - 140px);
}

/* Profile Sidebar */
.profile-sidebar {
    position: sticky;
    top: var(--spacing-2xl);
    height: fit-content;
}

.sidebar-profile-card {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.sidebar-cover {
    height: 120px;
    background: var(--accent-primary);
    background-size: cover;
    background-position: center;
    position: relative;
}

.cover-actions-small {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-xs);
}

.btn-icon-light {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background-color: var(--overlay-medium);
    backdrop-filter: blur(10px);
    border: 1px solid var(--overlay-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: white;
    font-size: 14px;
    z-index: 5;
}

.btn-icon-light:hover {
    background-color: var(--overlay-medium);
    border-color: var(--overlay-strong);
    transform: scale(1.05);
}

.sidebar-avatar-wrapper {
    position: relative;
    margin-top: -40px;
    text-align: center;
    padding: 0 var(--spacing-lg);
}

.sidebar-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--bg-secondary);
    background-color: var(--bg-primary);
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sidebar-avatar .avatar-initials {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.btn-avatar-edit-small {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--btn-primary-bg);
    border: 2px solid var(--bg-secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 12px;
    z-index: 5;
}

.btn-avatar-edit-small:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05);
}

.sidebar-user-info {
    padding: var(--spacing-lg);
    text-align: center;
}

.sidebar-username {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.sidebar-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    word-break: break-word;
}

.sidebar-bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.sidebar-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

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

.sidebar-stat .stat-value {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2xs);
}

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

/* Sidebar Rating Stats */
.sidebar-rating-stats {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.rating-stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.rating-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.rating-stat i {
    font-size: 1.5rem;
}

.rating-stat.positive i {
    color: var(--success-color);
}

.rating-stat.negative i {
    color: var(--error-color);
}

.rating-stat .rating-count {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.rating-stat .rating-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
}

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

.rating-percentage-bar {
    height: 8px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.rating-percentage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), var(--success-color-light));
    transition: width 0.3s ease;
}

.rating-percentage-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    font-weight: var(--font-medium);
}

/* Sidebar Navigation */
.sidebar-nav {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    font-size: var(--font-size-base);
}

.sidebar-nav-item i {
    font-size: var(--font-size-lg);
    width: 20px;
    text-align: center;
}

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

.sidebar-nav-item.active {
    background-color: var(--overlay-light);
    color: var(--btn-primary-bg);
    border-left-color: var(--btn-primary-bg);
    font-weight: var(--font-semibold);
}

.sidebar-nav-item.danger {
    color: var(--danger-color);
}

.sidebar-nav-item.danger:hover {
    background-color: var(--overlay-light);
}

/* Profile Main Content */
.profile-main-content {
    min-height: 500px;
}

.profile-section {
    display: none;
}

.profile-section.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

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

.profile-section .content-card {
    margin-bottom: var(--spacing-2xl);
}

/* Responsive Design */
@media (max-width: 992px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }

    .profile-sidebar {
        position: relative;
        top: 0;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .sidebar-nav-item {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        border-left: none;
        border-top: 3px solid transparent;
    }

    .sidebar-nav-item.active {
        border-left: none;
        border-top-color: var(--btn-primary-bg);
    }

    .sidebar-nav-item span {
        font-size: var(--font-size-xs);
    }

    /* Member Profile Tablet */
    .profile-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .profile-sidebar {
        width: 100%;
        order: 2;
    }

    .profile-main-content {
        width: 100%;
        order: 1;
    }

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

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

@media (max-width: 576px) {
    .profile-layout {
        padding: var(--spacing-md);
    }

    .sidebar-cover {
        height: 200px;
    }

    .sidebar-avatar-wrapper {
        margin-top: -30px;
    }

    .sidebar-avatar {
        width: 60px;
        height: 60px;
        border-width: 3px;
    }

    .sidebar-avatar .avatar-initials {
        font-size: var(--font-size-xl);
    }

    .btn-avatar-edit-small {
        right: calc(50% - 38px);
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .sidebar-username {
        font-size: var(--font-size-lg);
    }

    .sidebar-nav {
        grid-template-columns: 1fr;
    }
}

/* OLD STYLES - Keep for backward compatibility */
/* ===== TWITTER-STYLE PROFILE LAYOUT ===== */
.profile-wrapper {
    background-color: var(--bg-primary);
    min-height: calc(100vh - 80px);
    padding: 0;
}

.profile-alert {
    max-width: 600px;
    margin: var(--spacing-md) auto;
}

/* Profile Header Card */
.profile-header-card {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
    position: relative;
}

.profile-cover {
    height: 250px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(135deg, var(--overlay-light) 0%, var(--overlay-light) 100%);
    position: relative;
    border-bottom: none;
}

.cover-actions {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-sm);
}

.btn-cover-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--text-primary);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}

.btn-cover-action:hover {
    background-color: var(--white);
    transform: translateY(-2px);
}

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

.btn-cover-action.btn-danger:hover {
    background-color: var(--error-color);
}

.profile-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.profile-main-info {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
}

/* Avatar */
.profile-avatar-wrapper {
    position: relative;
    margin-top: -80px;
    flex-shrink: 0;
}

.profile-avatar-large {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 5px solid var(--bg-secondary);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px var(--overlay-dark);
    transition: transform 0.3s ease;
}

.profile-avatar-large:hover {
    transform: scale(1.02);
}

.avatar-initials-large {
    font-size: 56px;
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

/* Avatar Badges */
.profile-avatar-badges {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 4px;
}

.profile-avatar-badges .user-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-avatar-badges .badge-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-badges .user-badge i {
    font-size: 16px;
}

.avatar-edit-form {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.btn-avatar-edit {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
    background-color: var(--text-primary);
    color: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.btn-avatar-edit:hover {
    transform: scale(1.1);
}

.btn-avatar-edit i {
    font-size: var(--font-size-base);
}

/* User Details */
.profile-user-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.profile-username {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.profile-user-email {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
}

.profile-user-bio {
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    margin: var(--spacing-sm) 0 0 0;
    word-wrap: break-word;
    max-width: 600px;
}

.profile-bio {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
}

.profile-bio.text-muted {
    color: var(--text-secondary);
}

.profile-stats {
    display: flex;
    gap: var(--spacing-2xl);
}

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

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

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

/* Profile Tabs */
.profile-tabs {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
}

.profile-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    position: relative;
}

.profile-tab:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

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

.profile-tab i {
    font-size: var(--font-size-lg);
}

/* Content Wrapper - Modern Layout */
.profile-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
}

/* Sidebar */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

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

.sidebar-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.sidebar-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.info-item i {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    width: 24px;
    text-align: center;
}

.info-item.verified {
    color: var(--success-color);
    font-weight: var(--font-semibold);
}

.info-item.verified i {
    color: var(--success-color);
}

/* Main Content - Modern Layout */
.profile-main-content {
    min-height: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.tab-content {
    display: none;
}

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

.content-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    transition: box-shadow 0.2s ease;
}

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

.content-card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: 0 0 var(--spacing-md) 0;
    border-bottom: none;
}

.card-body {
    padding: 0;
}

.card-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    margin: 0;
}

.card-title i {
    margin-right: 7px;
    margin-left: 7px;
}
.card-form {
    padding: var(--spacing-xl);
}

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

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

.info-text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xl);
}

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

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.setting-item:hover {
    border-color: var(--border-light);
}

.setting-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex: 1;
}

.setting-info i {
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
}

.setting-info h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.setting-info p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.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-primary);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: var(--transition-fast);
    border-radius: 50%;
}

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

input:checked + .slider:before {
    background-color: var(--bg-secondary);
    transform: translateX(22px);
}

/* Member Profile Enhancements */
.sidebar-user-info {
    text-align: center;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-username {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

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

.sidebar-badges {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-badge-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.sidebar-badge-item .badge-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-badge-item i {
    font-size: 1.25rem;
}

.sidebar-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
}

.sidebar-stat i {
    font-size: var(--font-size-2xl);
    color: var(--primary-color);
}

.sidebar-stat .stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    display: block;
}

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

/* Follower/Following Stats */
.sidebar-stat .stat-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--transition-base);
}

.sidebar-stat .stat-link:hover .stat-value {
    color: var(--btn-primary-bg);
}

/* Follow Button */
.sidebar-action {
    margin-top: var(--spacing-md);
}

.btn-follow {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

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

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

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

.btn-follow.following {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--border-color);
}

.btn-follow.following:hover {
    background: var(--overlay-light);
    color: var(--error-color);
    border-color: var(--error-color);
}

.btn-follow i {
    font-size: 1em;
}

.verification-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
}

.verification-item.verified {
    background-color: var(--overlay-light);
    color: var(--success-color);
}

.verification-item.unverified {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.verification-item i {
    font-size: var(--font-size-lg);
}

/* Additional Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-sm);
    background: var(--overlay-light);
    border-radius: var(--radius-sm);
}

.detail-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

.detail-value {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-medium);
}

.status-badge.verified {
    background-color: var(--overlay-light);
    color: var(--success-color);
}

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

/* Badges Grid */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}

.badge-item-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.badge-item-large:hover {
    background: var(--overlay-light);
    transform: translateY(-2px);
}

.badge-image-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--spacing-sm);
}

.badge-icon-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.badge-icon-large i {
    font-size: 1.25rem;
}

.badge-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.badge-earned {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

/* Ratings List */
.ratings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rating-card {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: var(--spacing-md);
}

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

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

.rater-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.avatar-initials {
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.rater-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-decoration: none;
}

.rater-name:hover {
    color: var(--primary-color);
}

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

.rating-type-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
}

.rating-type-badge.positive {
    background-color: var(--overlay-light);
    color: var(--success-color);
}

.rating-type-badge.negative {
    background-color: var(--overlay-light);
    color: var(--error-color);
}

.rating-comment {
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.rating-comment p {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.rating-footer {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.rating-order-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.rating-order-info i {
    font-size: 1rem;
}

/* Responsive - Modern Layout */
@media (max-width: 1024px) {
    .profile-content-wrapper {
        grid-template-columns: 250px 1fr;
        padding: var(--spacing-lg);
    }

    .profile-header-content {
        padding: 0 var(--spacing-lg);
    }

    .tabs-container {
        padding: 0 var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .profile-cover {
        height: 180px;
    }

    .profile-header-content {
        padding: 0 var(--spacing-md);
    }

    .profile-main-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-md) 0;
    }

    .profile-avatar-wrapper {
        margin-top: -60px;
    }

    .profile-avatar-large {
        width: 120px;
        height: 120px;
        border-width: 4px;
    }

    .avatar-initials-large {
        font-size: 42px;
    }

    .profile-avatar-badges .user-badge {
        width: 28px;
        height: 28px;
        border-width: 2px;
    }

    .profile-avatar-badges .user-badge i {
        font-size: 14px;
    }

    .profile-user-details {
        padding-bottom: 0;
        width: 100%;
    }

    .profile-username {
        font-size: 22px;
    }

    .profile-user-bio {
        font-size: 15px;
    }

    .tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 var(--spacing-md);
        gap: var(--spacing-xs);
    }

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

    .tab-btn {
        padding: var(--spacing-md) var(--spacing-lg);
        white-space: nowrap;
        font-size: 15px;
        min-width: auto;
        gap: var(--spacing-xs);
    }

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

    .content-card {
        padding: var(--spacing-lg);
    }

    .profile-content-wrapper {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
        gap: var(--spacing-lg);
    }

    .profile-sidebar {
        order: 2;
    }

    .profile-main-content {
        order: 1;
    }

    .cover-actions {
        bottom: var(--spacing-sm);
        right: var(--spacing-sm);
    }

    .btn-cover-action span {
        display: none;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .sidebar-card {
        padding: var(--spacing-lg);
    }

    .content-card {
        margin-bottom: var(--spacing-lg);
    }

    .card-header,
    .card-form {
        padding: var(--spacing-lg);
    }

    /* Member Profile Responsive */
    .profile-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .profile-sidebar {
        position: static;
        width: 100%;
        order: 2;
        margin-top: var(--spacing-lg);
    }

    .profile-main-content {
        order: 1;
        width: 100%;
    }

    .badges-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--spacing-xs);
    }

    .details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .listings-grid-modern {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .listing-card-modern {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .rating-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .rating-type-badge {
        align-self: flex-start;
    }

    .sidebar-user-info {
        padding-bottom: var(--spacing-md);
    }

    .sidebar-stat {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .sidebar-badges {
        padding: var(--spacing-md) 0;
    }
}

/* ========================================
   DEVICE MANAGEMENT & DANGER ZONE
   ======================================== */

.devices-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.device-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.device-item:hover {
    border-color: var(--accent-primary);
}

.device-item.current-device {
    border-color: var(--accent-primary);
    background-color: var(--overlay-light);
}

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

.device-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 24px;
    color: var(--text-secondary);
}

.device-details {
    flex: 1;
}

.device-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.current-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background-color: var(--accent-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.device-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.device-meta i {
    font-size: var(--font-size-sm);
}

.device-details h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.device-details p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

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

.danger-zone {
    border: 2px solid var(--error-color);
}

.danger-zone .card-header {
    background-color: var(--overlay-light);
}

.danger-zone .card-title {
    color: var(--error-color);
}

@media (max-width: 768px) {
    .device-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .device-item .btn-small {
        width: 100%;
    }

    .device-info {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .profile-cover {
        height: 150px;
    }

    .profile-avatar-large {
        width: 100px;
        height: 100px;
    }

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

/* ========================================
   ADMIN SETTINGS PAGE
   ======================================== */

/* Settings Layout with Sidebar */
.settings-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.settings-tabs {
    position: sticky;
    top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    width: 100%;
}

.settings-tab i {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    color: var(--text-tertiary);
    transition: color var(--transition-base);
}

.settings-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.settings-tab:hover i {
    color: var(--btn-primary-bg);
}

.settings-tab.active {
    background: var(--btn-primary-bg);
    color: #FFFFFF;
}

.settings-tab.active i {
    color: #FFFFFF;
}

.settings-content-wrapper {
    min-height: 500px;
}

.settings-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.settings-tab-content.active {
    display: block;
}

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

.settings-form {
    max-width: 800px;
}

.section-header {
    margin-bottom: var(--spacing-xl);
}

.section-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.section-header p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

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

.preview-image {
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.preview-image-small {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.color-input {
    width: 60px;
    height: 45px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.required {
    color: var(--error-color);
    margin-left: 4px;
}

@media (max-width: 1024px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-tabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        border-radius: var(--radius-md);
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .settings-tab {
        flex-shrink: 0;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }

    .settings-tab span {
        display: none;
    }

    .settings-tab i {
        font-size: 1.5rem;
    }

    .settings-form {
        max-width: 100%;
    }

    .file-preview {
        flex-direction: column;
        align-items: flex-start;
    }

    .color-picker-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   CACHE & SYSTEM SETTINGS
   ======================================== */

.cache-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.cache-action-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: var(--transition-base);
}

.cache-action-card:hover {
    border-color: var(--overlay-medium);
    box-shadow: var(--shadow-lg);
}

.cache-action-card.cache-action-primary {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-color: rgba(5, 150, 105, 0.3);
}

.cache-action-card.cache-action-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.cache-action-card.cache-action-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.cache-action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--btn-primary-bg);
}

.cache-action-card.cache-action-warning .cache-action-icon {
    color: var(--warning-color);
}

.cache-action-card.cache-action-success .cache-action-icon {
    color: var(--success-color);
}

.cache-action-content {
    flex: 1;
}

.cache-action-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.cache-action-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cache-action-content .cache-version {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.cache-action-card form {
    margin-top: auto;
}

.cache-action-card .btn-warning {
    background: var(--warning-color);
    color: #000;
}

.cache-action-card .btn-warning:hover {
    background: #d97706;
}

.cache-action-card .btn-success {
    background: var(--success-color);
    color: #fff;
}

.cache-action-card .btn-success:hover {
    background: #16a34a;
}

@media (max-width: 768px) {
    .cache-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MEMBERS PAGE
   ======================================== */

.page-header {
    margin-bottom: var(--spacing-3xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.page-header-content {
    max-width: 600px;
    margin: 0 auto;
}

.page-header-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.members-search {
    margin-bottom: var(--spacing-3xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

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

.search-input-wrapper {
    flex: 1;
    position: relative;
}

.search-input-wrapper i {
    position: absolute;
    left: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: var(--font-size-lg);
}

.search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) * 2.5);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all var(--transition-normal);
}

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

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.member-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: relative;
}

.member-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.member-background {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-tertiary);
}

.member-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: -50px auto 0;
    z-index: 1;
}

.member-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-secondary);
    box-shadow: var(--shadow-lg);
}

.member-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    border: 4px solid var(--bg-secondary);
    box-shadow: var(--shadow-lg);
}

.member-info {
    text-align: center;
    flex: 1;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.member-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.member-name .username-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.member-name .verified-badge-icon {
    color: var(--info-color);
    font-size: 1.1em;
    display: inline-flex;
    align-items: center;
}

.member-name .user-status-indicator {
    font-size: 1.2em;
    display: inline-flex;
    align-items: center;
    margin-left: var(--spacing-xs);
}

.member-info .user-badges {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.member-bio {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
}

.member-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

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

.member-date i {
    font-size: var(--font-size-base);
}

.member-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.btn-block {
    width: 100%;
}

/* Promoted member cards - animated gradient border */
.member-card.promoted-listing {
    position: relative;
    background: var(--bg-secondary);
    border: 3px solid transparent;
    background-clip: padding-box;
    overflow: visible !important;
    background: 
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        linear-gradient(
            45deg,
            var(--btn-primary-bg),
            var(--success-color),
            var(--info-color),
            var(--error-color),
            var(--btn-primary-bg)
        ) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: promotedGradient 3s ease infinite;
    box-shadow: 
        0 0 20px var(--btn-primary-bg),
        0 4px 12px var(--overlay-light);
}

.member-card.promoted-listing:hover {
    transform: translateY(-4px);
    animation-duration: 2s;
    box-shadow: 
        0 0 30px var(--btn-primary-bg),
        0 8px 24px var(--overlay-dark);
}

/* Promoted badge styling */
.promoted-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--btn-primary-bg);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    z-index: 10;
    box-shadow: var(--shadow-md);
    animation: promotedPulse 2s ease-in-out infinite;
}

.promoted-badge i {
    font-size: 1em;
}

/* Suspended/Blocked member card styling */
.member-card.seller-unavailable {
    opacity: 0.7;
    filter: grayscale(30%);
}

.member-card.seller-unavailable:hover {
    transform: none;
}

.suspended-badge {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--warning-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    z-index: 10;
    box-shadow: var(--shadow-md);
}

.suspended-badge.blocked {
    background: var(--error-color);
}

.suspended-badge i {
    font-size: 1em;
}

[dir="rtl"] .suspended-badge {
    left: auto;
    right: var(--spacing-md);
}

[dir="rtl"] .promoted-badge {
    right: auto;
    left: var(--spacing-md);
}

.pagination-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
    margin-top: var(--spacing-2xl);
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.empty-state {
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.empty-state-icon {
    font-size: 80px;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xl);
}

.empty-state-icon i {
    opacity: 0.5;
}

.empty-state-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.empty-state-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

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

    .search-form {
        flex-direction: column;
    }

    .search-form .btn-primary {
        width: 100%;
    }

    .page-title {
        font-size: var(--font-size-3xl);
    }
}

/* ========================================
   PUBLIC PROFILE VIEW (MEMBERS SHOW)
   ======================================== */

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

.activity-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.activity-item:hover {
    background-color: var(--bg-secondary);
    border-color: var(--color-primary);
}

.activity-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.activity-details {
    flex: 1;
}

.activity-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.activity-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

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

.activity-time i,
.activity-device i {
    font-size: var(--font-size-base);
}

.empty-state-small {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-2xl);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.empty-state-small i {
    font-size: 48px;
    color: var(--text-tertiary);
    opacity: 0.5;
    margin-bottom: var(--spacing-md);
}

.empty-state-small p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

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

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

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

.info-label i {
    font-size: var(--font-size-base);
    color: var(--text-tertiary);
}

.info-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-tertiary);
    font-style: italic;
}

@media (max-width: 768px) {
    .activity-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* ========================================
   MERCHANT VERIFICATION SYSTEM
   ======================================== */

/* Progress Steps */
.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-lg);
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.progress-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.progress-steps .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.progress-steps .step.active .step-number {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: white;
}

.progress-steps .step.completed .step-number {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.progress-steps .step-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
}

.progress-steps .step.active .step-label {
    color: var(--btn-primary-bg);
    font-weight: var(--font-semibold);
}

/* Privacy Notice */
.privacy-notice {
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.privacy-notice i {
    font-size: 24px;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.privacy-notice p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Form Steps */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

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

.step-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.step-content h3 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.step-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* Document Type Selection */
.document-type-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.document-type-card {
    position: relative;
    cursor: pointer;
}

.document-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.document-type-card .card-content {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.3s ease;
}

.document-type-card:hover .card-content {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.document-type-card input[type="radio"]:checked + .card-content {
    background: var(--overlay-light);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--overlay-light);
}

.document-type-card .card-content i {
    font-size: 48px;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-md);
}

.document-type-card .card-content h4 {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.document-type-card .card-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Single Upload Container */
.single-upload-container {
    max-width: 600px;
    margin: 0 auto;
}

.single-upload {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-zone {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
}

.upload-zone:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.upload-zone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
}

.upload-placeholder i {
    font-size: 64px;
    color: var(--accent-primary);
}

.upload-placeholder p {
    color: var(--text-secondary);
    margin: 0;
}

.upload-btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: all 0.3s ease;
}

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

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

.preview-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.preview-wrapper img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    background: var(--bg-secondary);
}

.upload-success {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 48px;
    height: 48px;
    background: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-success i {
    font-size: 24px;
    color: white;
}

.remove-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-medium);
    transition: all 0.3s ease;
}

.remove-upload:hover {
    background: #c82333;
    transform: translateY(-2px);
}

/* Terms Acceptance */
.terms-acceptance {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    position: relative;
    padding-left: 35px;
    user-select: none;
}

.checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--input-bg);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-container:hover input ~ .checkmark {
    border-color: var(--accent-primary);
}

.checkbox-container input:checked ~ .checkmark {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

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

/* Form Navigation */
.form-navigation {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.form-navigation button {
    min-width: 150px;
}

/* Merchant Status Page */
/* ============================================
   Merchant Status Page
   ============================================ */

.merchant-status-page {
    min-height: 100vh;
    padding-bottom: var(--spacing-2xl);
}

/* Status Hero Section */
.merchant-status-hero {
    padding: var(--spacing-2xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.merchant-status-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.05;
    pointer-events: none;
}

.merchant-status-hero.status-pending::before {
    background: var(--overlay-light);
}

.merchant-status-hero.status-under_review::before {
    background: var(--overlay-light);
}

.merchant-status-hero.status-approved::before {
    background: var(--overlay-light);
}

.merchant-status-hero.status-rejected::before {
    background: var(--overlay-light);
}

.status-hero-content {
    position: relative;
    z-index: 1;
}

.status-icon-large {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid;
}

.status-pending .status-icon-large {
    border-color: var(--warning-color);
}

.status-under_review .status-icon-large {
    border-color: var(--info-color);
}

.status-approved .status-icon-large {
    border-color: var(--btn-primary-bg);
}

.status-rejected .status-icon-large {
    border-color: var(--error-color);
}

.status-icon-large i {
    font-size: 3.5rem;
}

.status-pending .status-icon-large i {
    color: var(--warning-color);
}

.status-under_review .status-icon-large i {
    color: var(--info-color);
}

.status-approved .status-icon-large i {
    color: var(--btn-primary-bg);
}

.status-rejected .status-icon-large i {
    color: var(--error-color);
}

.status-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.status-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Status Container */
.merchant-status-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Status Section Card */
.status-section-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--overlay-light);
}

.status-section-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--overlay-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.status-section-header i {
    font-size: 1.5rem;
    color: var(--btn-primary-bg);
}

.status-section-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.status-section-body {
    padding: var(--spacing-xl);
}

/* Status Info Grid */
.status-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.status-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-label {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Rejection Card */
.rejection-card {
    border: 2px solid var(--overlay-medium);
    background: var(--overlay-light);
}

.rejection-card .status-section-header i {
    color: var(--error-color);
}

.rejection-text {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--error-color);
}

/* Status Documents Grid */
.status-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

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

.document-preview {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--overlay-medium);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.document-preview:hover {
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--overlay-medium);
}

.document-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.document-preview:hover img {
    transform: scale(1.05);
}

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

.document-label i {
    font-size: 1.125rem;
    color: var(--btn-primary-bg);
}

/* Status Actions */
.status-actions {
    display: flex;
    justify-content: center;
    padding: var(--spacing-lg) 0;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .merchant-status-hero {
        padding: var(--spacing-xl) 0;
    }
    
    .status-icon-large {
        width: 90px;
        height: 90px;
    }
    
    .status-icon-large i {
        font-size: 2.5rem;
    }
    
    .status-title {
        font-size: 1.75rem;
    }
    
    .status-description {
        font-size: 1rem;
    }
    
    .status-section-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .status-section-body {
        padding: var(--spacing-lg);
    }
    
    .status-info-grid {
        grid-template-columns: 1fr;
    }
    
    .status-documents-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .status-icon-large {
        width: 70px;
        height: 70px;
    }
    
    .status-icon-large i {
        font-size: 2rem;
    }
    
    .status-title {
        font-size: 1.5rem;
    }
    
    .status-section-header {
        padding: var(--spacing-md);
    }
    
    .status-section-body {
        padding: var(--spacing-md);
    }
}

/* Admin Merchant Verification */
.filter-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    overflow-x: auto;
}

.filter-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.filter-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

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

.filter-tab .badge {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.filter-tab.active .badge {
    background: var(--overlay-strong);
    color: white;
}

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

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    font-weight: var(--font-semibold);
    font-size: 16px;
    text-transform: uppercase;
}

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

.user-info strong {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.user-info span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.status-badge.large {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
}

.status-badge.status-pending {
    background: var(--overlay-light);
    color: var(--warning-color-hover);
}

.status-badge.status-under_review {
    background: var(--overlay-light);
    color: var(--info-color-hover);
}

.status-badge.status-approved {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
}

.status-badge.status-active {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
}

.status-badge.status-rejected {
    background: var(--overlay-light);
    color: var(--danger-color-hover);
}

.status-badge.status-sold {
    background: var(--overlay-light);
    color: var(--text-secondary);
}

/* Admin Merchant Review */
.verification-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.review-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.review-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
}

.review-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.user-profile {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.user-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.avatar-initials-large {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    font-size: 32px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.user-details h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

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

.clickable-image {
    cursor: pointer;
    transition: all 0.3s ease;
}

.clickable-image:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark-strong);
}

.image-modal .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    z-index: 1;
}

.image-modal .modal-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}

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

.action-form {
    margin-bottom: var(--spacing-lg);
}

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

.reviewer-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-md);
}

/* Responsive Design */
@media (max-width: 768px) {
    .progress-steps {
        padding: 0;
    }
    
    .progress-steps .step-label {
        display: none;
    }
    
    .document-type-selection {
        grid-template-columns: 1fr;
    }
    
    .verification-review-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    
    .form-navigation {
        flex-direction: column;
    }
    
    .form-navigation button {
        width: 100%;
    }
}

/* ========================================
   REFERRAL SYSTEM
   ======================================== */

/* Referral Notice (shown on registration when using referral link) */
.referral-notice {
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.referral-notice i {
    color: var(--accent-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.referral-notice-content {
    flex: 1;
}

.referral-notice-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.referral-notice-content span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Referral Stats in Profile */
.referral-stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--overlay-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.referral-stat-item i {
    font-size: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.referral-stat-content {
    flex: 1;
}

.referral-stat-content strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.referral-stat-content span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Referral Link Wrapper */
.referral-link-wrapper {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.referral-link-wrapper input {
    flex: 1;
    min-width: 0;
}

.referral-link-wrapper button {
    flex-shrink: 0;
}

/* Responsive Referral Components */
@media (max-width: 768px) {
    .referral-notice {
        flex-direction: column;
        text-align: center;
    }

    .referral-notice i {
        font-size: 2rem;
    }

    .referral-stat-item {
        flex-direction: column;
        text-align: center;
    }

    .referral-stat-item i {
        font-size: 2rem;
    }
}

/* ========================================
   PROFILE PAGE - Settings & Security
   ======================================== */

.profile-content {
    max-width: 900px;
    margin: var(--spacing-2xl) auto 0;
    padding: 0 var(--spacing-xl) var(--spacing-3xl);
}

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

/* Card Description */
.card-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

/* Profile Form */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

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

/* Referral Code Display */
.referral-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.referral-code-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.referral-code-display {
    display: flex;
    gap: var(--spacing-sm);
}

.referral-code-display input {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-weight: var(--font-bold);
    font-size: var(--font-size-lg);
    letter-spacing: 2px;
    text-align: center;
}

.btn-copy {
    white-space: nowrap;
}

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

.referral-stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.referral-stat-card i {
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
}

.referral-stat-card div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.referral-stat-card strong {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.referral-stat-card span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Login History Styles */
.login-history-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-history-icon i {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
}

.login-history-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.login-history-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.login-history-type {
    padding: 2px 8px;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: capitalize;
}

.login-history-meta {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.login-history-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.login-history-meta i {
    font-size: var(--font-size-sm);
}

/* Two-Factor Actions */
.two-factor-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Status Badge */
.status-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.status-success {
    background-color: var(--overlay-light);
    color: var(--success-color);
}

.status-warning {
    background-color: var(--overlay-light);
    color: #FFC107;
}

/* Devices List */
.devices-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.device-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.device-icon i {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
}

.device-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.device-name {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.device-meta {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.device-actions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.btn-icon-danger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--error-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon-danger:hover {
    background-color: var(--overlay-light);
    border-color: var(--error-color);
}

/* Danger Card */
.card-danger {
    border-color: var(--error-color);
}

.card-danger .card-header {
    background-color: var(--overlay-light);
    border-bottom-color: var(--overlay-medium);
}

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

.danger-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0;
}

.danger-list li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--text-secondary);
}

.danger-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--error-color);
    font-weight: var(--font-bold);
}

/* Avatar Management */
.avatar-management {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3em;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-bottom: var(--spacing-lg);
}

.empty-state p {
    font-size: var(--font-size-base);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-content {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--overlay-dark);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
    margin: auto;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.modal-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.modal-close:hover,
.modal-close:active {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    position: sticky;
    bottom: 0;
}

/* QR Code Container */
.qr-code-container {
    padding: var(--spacing-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    margin: var(--spacing-lg) 0;
}

/* Recovery Codes */
.recovery-codes-container {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.recovery-code {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    text-align: center;
    color: var(--text-primary);
}

/* ========================================
   BLOCKED USERS PAGE
   ======================================== */

.blocked-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    padding: 0;
}

.blocked-user-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: all var(--transition-fast);
}

.blocked-user-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

.blocked-user-info {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.blocked-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blocked-user-avatar .avatar-initials {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.blocked-user-details {
    flex: 1;
    min-width: 0;
}

.blocked-user-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.blocked-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
}

.blocked-date i {
    font-size: 0.9em;
}

.blocked-user-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-xs);
}

.blocked-user-actions form {
    flex: 1;
}

.blocked-user-actions button {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.blocked-user-actions button i {
    font-size: 1em;
}

/* Responsive Blocked Users */
@media (max-width: 768px) {
    .blocked-users-grid {
        grid-template-columns: 1fr;
    }
    
    .blocked-user-card {
        padding: var(--spacing-md);
    }
}

/* Responsive Profile Page */
@media (max-width: 768px) {
    .profile-main-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-user-details {
        align-items: center;
    }

    .profile-stats {
        justify-content: center;
    }

    .profile-tabs {
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .profile-tab {
        white-space: nowrap;
    }

    .profile-content {
        padding: 0 var(--spacing-md) var(--spacing-2xl);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .referral-stats-grid {
        grid-template-columns: 1fr;
    }

    .two-factor-actions {
        flex-direction: column;
    }

    .two-factor-actions button {
        width: 100%;
    }

    .device-actions button {
        width: 100%;
    }

    .avatar-management {
        flex-direction: column;
    }

    .modal {
        padding: var(--spacing-sm);
        align-items: flex-start;
    }

    /* Tablet-specific adjustments */
    @media (min-width: 481px) and (max-width: 768px) {
        .modal-content {
            max-width: 90%;
        }

        .modal-body {
            max-height: calc(90vh - 140px);
        }
    }

    .modal-content {
        margin: 0;
        max-height: 98vh;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg);
    }

    .modal-header {
        padding: var(--spacing-md) var(--spacing-lg);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-header h2,
    .modal-title {
        font-size: var(--font-size-base);
        flex: 1;
        margin-right: var(--spacing-sm);
    }

    .modal-close {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .modal-body {
        padding: var(--spacing-md) var(--spacing-lg);
        max-height: calc(98vh - 140px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .modal-actions {
        padding: var(--spacing-md) var(--spacing-lg);
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .modal-actions button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        font-size: var(--font-size-base);
    }

    .modal-footer {
        flex-direction: column-reverse;
        padding: var(--spacing-md) var(--spacing-lg);
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .modal-footer button {
        width: 100%;
        min-height: 44px;
        font-size: var(--font-size-base);
    }

    .recovery-codes {
        grid-template-columns: 1fr;
    }

    /* Form elements in modals */
    .modal .form-group {
        margin-bottom: var(--spacing-md);
    }

    .modal .form-input,
    .modal .form-select,
    .modal textarea.form-input {
        min-height: 44px;
        font-size: 16px;
    }

    .modal .checkbox-wrapper {
        min-height: 44px;
        padding: var(--spacing-sm) 0;
    }

    .modal .alert {
        margin-bottom: var(--spacing-md);
    }

    /* Grid layouts in modals */
    .modal-body [style*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Badge modal specific fixes */
    #badgeModal .modal-content {
        max-width: 100%;
    }

    #badgeModal .modal-body {
        max-height: calc(98vh - 150px);
    }

    /* Assign plan modal fixes */
    #assignPlanModal .modal-content {
        max-width: 100%;
    }

    /* Improve select dropdowns on mobile */
    .modal select.form-input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 40px;
    }
}

/* ========================================
   WALLET PAGES
   ======================================== */

.wallet-container {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

.wallet-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wallet-card-header {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--accent-primary);
}

.wallet-icon {
    width: 70px;
    height: 70px;
    background-color: var(--overlay-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
}

.wallet-icon i {
    font-size: 36px;
    color: white;
}

.wallet-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: white;
    margin: 0 0 var(--spacing-xs);
}

.wallet-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin: 0;
}

.wallet-card-body {
    padding: var(--spacing-lg);
}

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

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

.wallet-balance-card {
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: var(--spacing-lg);
}

.balance-info {
    flex: 1;
}

.balance-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    display: block;
    margin-bottom: var(--spacing-xs);
}

.balance-amount {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-extrabold);
    margin: 0;
}

.balance-icon {
    width: 60px;
    height: 60px;
    background-color: var(--overlay-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance-icon i {
    font-size: 28px;
}

.wallet-quick-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.wallet-quick-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.wallet-balance-display {
    padding: var(--spacing-lg);
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    text-align: center;
    color: white;
}

.wallet-balance-display .balance-amount {
    font-size: var(--font-size-3xl);
}

.wallet-actions-quick {
    display: flex;
    gap: var(--spacing-md);
}

.wallet-info-box {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

/* Mastercard Wallet Design */
.mastercard-wallet {
    margin-bottom: var(--spacing-xl);
}

.mastercard-bg {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 10px 30px var(--overlay-dark);
}

.mastercard-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: var(--overlay-light);
    border-radius: 50%;
}

.mastercard-chip {
    width: 50px;
    height: 40px;
    background: var(--warning-color);
    border-radius: 6px;
    position: relative;
    margin-bottom: var(--spacing-lg);
    box-shadow: inset 0 2px 4px var(--overlay-dark);
}

.chip-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--overlay-light);
    top: 50%;
    transform: translateY(-50%);
}

.chip-line:nth-child(2) {
    top: 40%;
}

.chip-line:nth-child(3) {
    top: 60%;
}

.chip-main {
    position: absolute;
    width: 30px;
    height: 24px;
    border: 2px solid var(--overlay-light);
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mastercard-content {
    position: relative;
    z-index: 2;
}

.card-balance-section {
    margin-bottom: var(--spacing-xl);
}

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

.card-balance {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-extrabold);
    color: var(--white);
    margin: 0;
    text-shadow: 0 2px 4px var(--overlay-light);
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-holder {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.card-label-small {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-name {
    font-size: var(--font-size-base);
    color: var(--white);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mastercard-logo {
    display: flex;
    align-items: center;
    gap: -8px;
    position: relative;
}

.circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    opacity: 0.9;
}

.circle-left {
    background: #eb001b;
    position: relative;
    z-index: 2;
}

.circle-right {
    background: #ff5f00;
    margin-left: -14px;
    position: relative;
    z-index: 1;
}

/* Wallet Action Buttons */
.wallet-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.wallet-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    cursor: pointer;
    min-height: 100px;
}

.wallet-action-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.action-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
}

.action-icon i {
    font-size: 22px;
}

.action-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--error-color);
    color: white;
    font-size: 11px;
    font-weight: var(--font-bold);
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 2px 4px var(--overlay-light);
}

.action-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    text-align: center;
    line-height: 1.3;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mastercard-bg {
        min-height: 200px;
        padding: var(--spacing-lg);
    }
    
    .card-balance {
        font-size: var(--font-size-2xl);
    }
    
    .mastercard-chip {
        width: 45px;
        height: 36px;
    }
    
    .circle {
        width: 30px;
        height: 30px;
    }
    
    .circle-right {
        margin-left: -12px;
    }
}

@media (max-width: 640px) {
    .wallet-action-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
    
    .wallet-action-btn {
        padding: var(--spacing-md) var(--spacing-xs);
        min-height: 90px;
    }
    
    .action-icon {
        width: 42px;
        height: 42px;
    }
    
    .action-icon i {
        font-size: 20px;
    }
    
    .action-label {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .mastercard-bg {
        min-height: 180px;
    }
    
    .card-balance {
        font-size: var(--font-size-xl);
    }
    
    .wallet-action-btn {
        padding: var(--spacing-sm) var(--spacing-2xs);
        min-height: 85px;
    }
    
    .action-icon {
        width: 38px;
        height: 38px;
    }
    
    .action-icon i {
        font-size: 18px;
    }
    
    .action-label {
        font-size: 11px;
    }
}

.wallet-info-box i {
    font-size: var(--font-size-xl);
    color: var(--accent-primary);
    flex-shrink: 0;
}

.wallet-info-box strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.wallet-info-box p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Compact Wallet Styles for Profile Page */
.wallet-info-box-small {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

/* Wallet Password Reset Modal Styles */
.wallet-reset-modal .modal-content {
    max-width: 650px;
}

.reset-progress-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.reset-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    opacity: 0.4;
    transition: opacity var(--transition-base);
}

.reset-step.active {
    opacity: 1;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.reset-step.active .step-number {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: white;
}

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

.step-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 2px;
}

.step-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.reset-step-divider {
    width: 24px;
    height: 2px;
    background: var(--border-color);
    margin: 0 var(--spacing-xs);
}

.reset-step-content {
    display: none;
}

.reset-step-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.reset-code-input {
    text-transform: uppercase;
    letter-spacing: 8px;
    font-family: 'Courier New', monospace;
    text-align: center;
    font-size: 24px !important;
    font-weight: 700;
    direction: ltr !important;
    unicode-bidi: bidi-override;
}

.resend-code-section {
    text-align: center;
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: var(--spacing-lg) 0;
}

.resend-code-section p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.new-password-display {
    text-align: center;
}

.password-display-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.password-display-header i {
    font-size: var(--font-size-2xl);
    color: var(--btn-primary-bg);
}

.password-display-header h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.password-display-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.password-display-box {
    background: rgba(5, 150, 105, 0.1);
    border: 2px solid rgba(5, 150, 105, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.password-text {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    font-family: 'Courier New', monospace;
    color: var(--text-primary);
    letter-spacing: 2px;
    margin-bottom: var(--spacing-md);
    word-break: break-all;
}

.copy-password-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--btn-primary-bg);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.copy-password-btn:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
}

.copy-password-btn i {
    font-size: var(--font-size-base);
}

/* Responsive Wallet Reset Modal */
@media (max-width: 768px) {
    .reset-progress-stepper {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .reset-step {
        width: 100%;
    }

    .reset-step-divider {
        display: none;
    }

    .step-info {
        display: none;
    }

    .reset-step .step-number {
        margin: 0 auto;
    }

    .reset-code-input {
        font-size: 18px !important;
        letter-spacing: 4px;
    }

    .password-text {
        font-size: var(--font-size-lg);
        letter-spacing: 1px;
    }
}

.wallet-info-box-small i {
    font-size: var(--font-size-base);
    color: var(--accent-primary);
    flex-shrink: 0;
}

.wallet-info-box-small strong {
    display: block;
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
    color: var(--text-primary);
}

.wallet-info-box-small p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.wallet-quick-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wallet-balance-small {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    color: white;
}

.wallet-balance-small i {
    font-size: 28px;
    opacity: 0.9;
}

.balance-label-tiny {
    display: block;
    font-size: var(--font-size-xs);
    opacity: 0.9;
    margin-bottom: 2px;
}

.balance-value-small {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
}

.btn-compact {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-compact i {
    font-size: 1em;
}

/* Transaction Styling */
.transactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.transaction-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.transaction-item:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

.transaction-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-item.credit .transaction-icon {
    background-color: var(--overlay-light);
    color: var(--success-color);
}

.transaction-item.debit .transaction-icon {
    background-color: var(--overlay-light);
    color: var(--error-color);
}

.transaction-icon i {
    font-size: 18px;
}

.transaction-details {
    flex: 1;
    min-width: 0;
}

.transaction-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xs);
    gap: var(--spacing-md);
}

.transaction-main strong {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.transaction-amount {
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.transaction-amount.credit {
    color: var(--success-color);
}

.transaction-amount.debit {
    color: var(--error-color);
}

.transaction-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.transaction-meta span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.transaction-meta i {
    font-size: 0.9em;
}

.transaction-fee {
    display: block;
    font-size: var(--font-size-xs);
    opacity: 0.7;
}

.transaction-note {
    margin-top: var(--spacing-2xs);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

/* Credit Request Styles */
.requests-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.request-item {
    padding: var(--spacing-lg);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.request-item:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

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

.request-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-primary);
}

.request-user i {
    font-size: var(--font-size-lg);
}

.request-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.request-message {
    display: flex;
    align-items: start;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background-color: var(--overlay-light);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.request-message i {
    margin-top: 2px;
    flex-shrink: 0;
}

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

.request-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

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

.request-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
}

.request-status.status-pending {
    background-color: var(--overlay-light);
    color: var(--warning-color);
}

.request-status.status-approved {
    background-color: var(--overlay-light);
    color: var(--success-color);
}

.request-status.status-rejected {
    background-color: var(--overlay-light);
    color: var(--error-color);
}

.request-status.status-cancelled {
    background-color: var(--overlay-light);
    color: var(--text-tertiary);
}

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

.btn-success {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-fast);
}

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

.btn-danger {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--error-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-fast);
}

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

/* Admin Wallet Styles */
.wallet-balance-display-admin {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
}

.wallet-balance-display-admin i {
    font-size: 42px;
    color: var(--accent-primary);
}

.balance-label-small {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--spacing-2xs);
}

.balance-amount-large {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-extrabold);
    color: var(--accent-primary);
    margin: 0;
}

.info-list-small {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
}

.info-item-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

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

.admin-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.card-header-admin {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.card-header-admin h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Responsive Wallet */
@media (max-width: 768px) {
    .wallet-balance-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .balance-amount {
        font-size: var(--font-size-3xl);
    }
    
    .wallet-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .transaction-main {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .admin-grid-2 {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   HOMEPAGE POPUP MODAL
   ======================================== */

.homepage-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark-strong);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--spacing-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.homepage-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.homepage-popup {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px -12px var(--overlay-dark);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.homepage-popup-overlay.active .homepage-popup {
    transform: scale(1);
}

.popup-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
    z-index: 10;
}

.popup-close:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
    transform: rotate(90deg);
}

.popup-content {
    display: flex;
    flex-direction: column;
}

.popup-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-body {
    padding: var(--spacing-2xl);
}

.popup-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.3;
}

.popup-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.6;
}

.popup-rich-content {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
}

.popup-rich-content h1,
.popup-rich-content h2,
.popup-rich-content h3,
.popup-rich-content h4,
.popup-rich-content h5,
.popup-rich-content h6 {
    color: var(--text-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-semibold);
}

.popup-rich-content h1 { font-size: var(--font-size-2xl); }
.popup-rich-content h2 { font-size: var(--font-size-xl); }
.popup-rich-content h3 { font-size: var(--font-size-lg); }

.popup-rich-content p {
    margin-bottom: var(--spacing-md);
}

.popup-rich-content ul,
.popup-rich-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.popup-rich-content li {
    margin-bottom: var(--spacing-xs);
}

.popup-rich-content a {
    color: var(--accent-primary);
    text-decoration: underline;
}

.popup-rich-content a:hover {
    text-decoration: none;
}

.popup-rich-content strong {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.popup-rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

.popup-rich-content table th,
.popup-rich-content table td {
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    text-align: left;
}

.popup-rich-content table th {
    background-color: var(--bg-tertiary);
    font-weight: var(--font-weight-semibold);
}

.popup-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.popup-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Admin Popup Thumbnail */
.popup-thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.popup-thumbnail-placeholder {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
}

.popup-title-cell {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.popup-title-cell strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.popup-title-cell small {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.popup-image-preview {
    max-width: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.popup-image-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.btn-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-toggle.active {
    color: var(--success-color);
    background-color: var(--overlay-light);
    border-color: var(--success-color);
}

.btn-toggle:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Responsive Popup */
@media (max-width: 768px) {
    .homepage-popup {
        max-width: 95%;
        max-height: 85vh;
    }

    .popup-image {
        height: 200px;
    }

    .popup-body {
        padding: var(--spacing-xl);
    }

    .popup-title {
        font-size: var(--font-size-xl);
    }

    .popup-close {
        top: var(--spacing-md);
        right: var(--spacing-md);
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .homepage-popup-overlay {
        padding: var(--spacing-md);
    }

    .popup-image {
        height: 160px;
    }

    .popup-body {
        padding: var(--spacing-lg);
    }

    .popup-title {
        font-size: var(--font-size-lg);
    }

    .popup-description {
        font-size: var(--font-size-sm);
    }

    .popup-rich-content {
        font-size: var(--font-size-sm);
    }

    .popup-thumbnail {
        width: 60px;
        height: 45px;
    }

    .popup-thumbnail-placeholder {
        width: 60px;
        height: 45px;
    }
}

/* ========================================
   PAYMENT GATEWAYS
   ======================================== */

.gateway-logo {
    width: 60px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    padding: var(--spacing-xs);
}

.gateway-logo-placeholder {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.gateway-logo-placeholder i {
    font-size: 1.5em;
}

.gateway-logo-preview {
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    background-color: var(--bg-primary);
    margin-bottom: var(--spacing-sm);
}

.current-logo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.custom-field-item {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.custom-field-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);
}

.custom-field-header h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.form-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--border-color);
}

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

.form-section-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.field-options-group {
    transition: all 0.3s ease;
}

.table-text-truncate {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .custom-field-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .gateway-logo-preview {
        max-width: 150px;
    }

    .table-text-truncate {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .custom-field-item {
        padding: var(--spacing-md);
    }

    .form-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .gateway-logo-preview {
        max-width: 120px;
    }
}

/* ========================================
   WALLET TABS & CHARGES
   ======================================== */

.wallet-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0;
    border-bottom: 2px solid var(--border-color);
}

.wallet-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: -2px;
}

.wallet-tab:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

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

.wallet-tab i {
    font-size: 1.1em;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-xs);
    background-color: var(--info-color);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    margin-left: var(--spacing-xs);
}

.tab-content {
    display: none;
}

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

/* Payment Gateways Grid */
.payment-gateways-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.gateway-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.gateway-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gateway-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--overlay-light);
}

.gateway-card.active {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.gateway-card.active::before {
    opacity: 1;
}

.gateway-card-image,
.gateway-card-icon,
.gateway-card-name {
    position: relative;
    z-index: 1;
}

.gateway-card.active .gateway-card-name,
.gateway-card.active .gateway-card-icon {
    color: white;
}

.gateway-card-image {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-xs);
}

.gateway-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(1);
    transition: filter 0.3s ease;
}

.gateway-card.active .gateway-card-image img {
    filter: brightness(0) invert(1);
}

.gateway-card-icon {
    font-size: 2em;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    transition: color 0.3s ease;
}

.gateway-card-name {
    font-weight: var(--font-semibold);
    font-size: 0.8rem;
    color: var(--text-primary);
    transition: color 0.3s ease;
    line-height: 1.2;
}

/* Random grid sizes - Creates masonry effect */
.gateway-card:nth-child(6n+1) {
    grid-column: span 2;
}

.gateway-card:nth-child(6n+2) {
    grid-column: span 1;
}

.gateway-card:nth-child(6n+3) {
    grid-column: span 3;
}

.gateway-card:nth-child(6n+4) {
    grid-column: span 1;
}

.gateway-card:nth-child(6n+5) {
    grid-column: span 2;
}

.gateway-card:nth-child(6n+6) {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .payment-gateways-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .gateway-card:nth-child(6n+1),
    .gateway-card:nth-child(6n+3) {
        grid-column: span 2;
    }
    
    .gateway-card:nth-child(6n+2),
    .gateway-card:nth-child(6n+4),
    .gateway-card:nth-child(6n+5),
    .gateway-card:nth-child(6n+6) {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .payment-gateways-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gateway-card:nth-child(odd) {
        grid-column: span 1;
    }
    
    .gateway-card:nth-child(even) {
        grid-column: span 1;
    }
    
    .gateway-card:nth-child(6n+1),
    .gateway-card:nth-child(6n+2),
    .gateway-card:nth-child(6n+3),
    .gateway-card:nth-child(6n+4),
    .gateway-card:nth-child(6n+5),
    .gateway-card:nth-child(6n+6) {
        grid-column: span 1;
    }
}

/* Price Breakdown - Ultra Simple & Compact */
.price-breakdown-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-xs);
    font-size: 0.875rem;
}

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

.price-row + .price-row {
    margin-left: var(--spacing-md);
    padding-left: var(--spacing-md);
    border-left: 1px solid var(--overlay-medium);
}

.price-label {
    color: var(--text-secondary);
    font-weight: 400;
}

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

.price-total {
    margin: 0;
    padding: 0;
    border: none;
}

.price-total .price-label {
    color: var(--text-primary);
}

.price-total .price-value {
    font-weight: 700;
    color: var(--btn-primary-bg);
    font-size: 1rem;
}

/* Feature Availability Badges */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: var(--spacing-sm);
}

.feature-badge.available {
    background: var(--overlay-light);
    color: var(--success-color);
    border: 1px solid var(--overlay-medium);
}

.feature-badge.locked {
    background: var(--overlay-light);
    color: var(--text-secondary);
    border: 1px solid var(--overlay-light);
}

.feature-badge i {
    font-size: 1em;
}

/* Username Validation Badge */
.username-validation-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: var(--spacing-xs);
}

.username-validation-badge.success {
    background: var(--overlay-light);
    color: var(--success-color);
    border: 1px solid var(--overlay-medium);
}

.username-validation-badge.error {
    background: var(--overlay-light);
    color: var(--error-color);
    border: 1px solid var(--overlay-medium);
}

.username-validation-badge i {
    font-size: 1em;
}

.gateway-instructions {
    margin: var(--spacing-lg) 0;
}

.custom-fields-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.form-section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

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

.charge-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
}

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

.charge-item.status-approved {
    border-left: 4px solid var(--success-color);
}

.charge-item.status-rejected {
    border-left: 4px solid var(--error-color);
}

.charge-item.status-pending {
    border-left: 4px solid var(--warning-color);
}

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

.charge-info h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.charge-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

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

.charge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.charge-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.charge-notes {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
}

.charge-proof {
    margin-top: var(--spacing-sm);
}

.charge-rejection {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--overlay-light);
    border-left: 3px solid var(--error-color);
    border-radius: var(--radius-md);
    color: var(--error-color);
    font-size: var(--font-size-sm);
}

.charge-rejection i {
    font-size: 1.2em;
}

@media (max-width: 768px) {
    .wallet-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wallet-tab {
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .charge-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .charge-meta {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .custom-fields-section {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .tab-badge {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .charge-item {
        padding: var(--spacing-md);
    }

    .charge-amount {
        font-size: var(--font-size-md);
    }
}


/* ========================================
   WITHDRAWAL METHODS STYLES
   ======================================== */

/* Withdrawal Methods List in Profile */
/* Plans Store Page Styles */

/* ========================================
   PLANS STORE PAGE STYLES
   ======================================== */

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto;
}

.plan-card {
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-light);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px var(--overlay-light);
    border-color: var(--border-light);
}

.plan-card:hover::before {
    opacity: 1;
}

.plan-card-featured {
    border-color: var(--border-light);
    box-shadow: 0 4px 16px var(--overlay-light);
}

.plan-card-featured::before {
    background: var(--text-primary);
    opacity: 1;
}

.plan-card-current {
    border-color: var(--success-color);
    background: var(--bg-secondary);
}

.plan-card-current::before {
    background: var(--success-color);
    opacity: 1;
}

.plan-badge {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--accent-primary);
    color: var(--btn-primary-text);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--overlay-dark);
    z-index: 10;
}

.plan-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.plan-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-icon i {
    font-size: 2.5rem;
}

.plan-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.plan-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.plan-pricing {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.price-option {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.price-period {
    font-size: 1rem;
    color: var(--text-secondary);
}

.price-alternative {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

.plan-trial {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--success-color)10;
    border: 1px solid var(--success-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.9375rem;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg);
    flex: 1;
}

.plan-features li {
    display: flex;
    align-items: start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.plan-features li i {
    color: var(--success-color);
    flex-shrink: 0;
    margin-top: 0.25em;
}

.plan-action {
    margin-top: auto;
}

@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }
    
    .price-amount {
        font-size: 2rem;
    }
}

/* Plans Page Header & Billing Cycle Switcher */
.plans-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl) var(--spacing-lg);
}

.plans-header-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.plans-header-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    line-height: 1.6;
}

.plans-header-trial {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--success-color);
    border-radius: var(--radius-full);
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.9375rem;
}

.plans-header-trial i {
    font-size: 1.25em;
}

.billing-cycle-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-2xl) auto;
    padding: var(--spacing-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: fit-content;
}

.cycle-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    justify-content: center;
}

.cycle-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.cycle-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-light);
    box-shadow: 0 2px 8px var(--overlay-light);
}

.cycle-btn i {
    font-size: 1.25em;
}

.cycle-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--success-color);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--overlay-light);
}

.price-savings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--success-color)10;
    border-radius: var(--radius-md);
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.875rem;
}

.price-savings i {
    font-size: 1em;
}

@media (max-width: 768px) {
    .plans-header {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .plans-header-title {
        font-size: 2rem;
    }
    
    .plans-header-subtitle {
        font-size: 1rem;
    }
    
    .billing-cycle-switcher {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }
    
    .cycle-btn {
        width: 100%;
        min-width: unset;
    }
    
    .plans-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .plans-header-title {
        font-size: 1.75rem;
    }
    
    .plans-header-subtitle {
        font-size: 0.9375rem;
    }
    
    .plan-card {
        padding: var(--spacing-lg);
    }
    
    .plan-badge {
        top: var(--spacing-md);
        right: var(--spacing-md);
        font-size: 0.625rem;
    }
    
    .price-amount {
        font-size: 2rem;
    }
}

/* ========================================
   CART & BROWSE MARKETPLACE
   ======================================== */

/* Cart Icon in Header */
.header-cart-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
    text-decoration: none;
}

.header-cart-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}

.header-cart-link i {
    font-size: 1.25rem;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 0 5px;
    border: 2px solid var(--bg-primary);
}

.header-cart-link.has-items .cart-count {
    animation: cartPulse 0.5s ease;
}

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

/* Marketplace Browse Layout */
.page-wrapper {
    min-height: calc(100vh - var(--header-height) - var(--footer-height, 0px));
    padding: var(--spacing-2xl) 0;
}

.page-header {
    margin-bottom: var(--spacing-2xl);
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.page-header-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 2px solid var(--btn-primary-bg);
    border-radius: var(--radius-md);
    color: var(--btn-primary-bg);
    font-size: 2rem;
}

/* Marketplace Page Layout */
.marketplace-page {
    min-height: 100vh;
    padding: var(--spacing-2xl) 0;
}

/* Marketplace Hero Section */
.marketplace-hero {
    text-align: center;
    padding: var(--spacing-5xl) 0 var(--spacing-3xl);
    position: relative;
}

.marketplace-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--overlay-light) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.marketplace-hero-content {
    position: relative;
    z-index: 1;
}

.marketplace-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-lg);
    background: linear-gradient(135deg, var(--overlay-light), var(--overlay-light));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    transition: all 0.3s ease;
}

.marketplace-hero-badge:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.marketplace-hero-badge i {
    color: var(--accent-primary);
    font-size: 1.125rem;
}

.marketplace-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.marketplace-hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Marketplace Stats Bar */
.marketplace-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
    padding: var(--spacing-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.marketplace-stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

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

.marketplace-stat-item i {
    font-size: 2rem;
    color: var(--accent-primary);
}

.marketplace-stat-item .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.marketplace-stat-item .stat-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0;
}

.marketplace-browse-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    align-items: start;
}

@media (max-width: 1200px) {
    .marketplace-browse-layout {
        grid-template-columns: 280px 1fr;
        gap: var(--spacing-lg);
    }
}

/* Filters Sidebar - Modern Card-Based Design */
.filters-sidebar {
    background: transparent;
    border: none;
    padding: 0;
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    align-self: start;
    max-height: calc(100vh - var(--header-height) - var(--spacing-2xl));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.filters-header {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.filters-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.filters-header h3 i {
    color: var(--accent-primary);
    font-size: 1.25rem;
}

.filters-close-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: center;
    justify-content: center;
}

.filters-close-btn:hover {
    background: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.filters-close-btn i {
    font-size: 1rem;
}

#filterForm {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    padding-right: var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#filterForm::-webkit-scrollbar {
    width: 6px;
}

#filterForm::-webkit-scrollbar-track {
    background: transparent;
}

#filterForm::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
    transition: background 0.2s ease;
}

#filterForm::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Modern Filter Group Cards */
.filter-group {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: relative;
    overflow: hidden;
}

.filter-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-group:hover::before {
    opacity: 1;
}

.filter-group:hover {
    border-color: var(--border-light);
    box-shadow: 0 4px 16px var(--overlay-light);
    transform: translateX(4px);
}

.filter-group > * {
    width: 100%;
}

.filter-group input,
.filter-group select,
.filter-group textarea {
    width: 100%;
    display: block;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

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

.filter-group input::placeholder {
    color: var(--text-tertiary);
}

.filter-label {
    display: none !important;
}

/* Checkbox Labels - Horizontal Pills */
.form-checkbox-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.form-checkbox-label:hover {
    border-color: var(--accent-primary);
    background: var(--overlay-light);
}

.form-checkbox-label input.form-checkbox {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-checkbox-label span {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.form-checkbox-label input:checked ~ span {
    color: var(--btn-primary-bg);
    font-weight: 600;
}

/* Highlighted Filter Pills (Promotional/Offers) */
.form-checkbox-label.filter-highlight {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    overflow: hidden;
    position: relative;
}

.form-checkbox-label.filter-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--overlay-light);
    transition: left 0.5s ease;
}

.form-checkbox-label.filter-highlight:hover::before {
    left: 100%;
}

.form-checkbox-label.filter-highlight:hover {
    border-color: var(--text-primary);
    box-shadow: 0 4px 12px var(--overlay-dark);
    transform: scale(1.02);
}

.form-checkbox-label.filter-highlight i {
    color: var(--accent-primary);
    font-size: 1.125rem;
    margin-left: auto;
}

/* Small screens: Show full text with proper styling */
@media (max-width: 480px) {
    .form-checkbox-label span {
        font-size: 0.875rem !important;
        color: var(--text-primary) !important;
    }

    .form-checkbox-label {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .form-checkbox-label.filter-highlight i {
        margin-left: 0;
    }
}

.price-range-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

.price-range-inputs input {
    width: 100%;
}

/* Filter Actions Card */
.filter-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.filter-actions .btn {
    width: 100%;
    justify-content: center;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: all 0.2s ease;
}

.filter-actions .btn-primary {
    background: var(--btn-primary-bg);
    border: none;
}

.filter-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--btn-primary-bg);
}

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

.filter-actions .btn-secondary:hover {
    border-color: var(--btn-primary-bg);
    background: var(--overlay-light);
}

/* Mobile Filter Toggle Button */
.filters-toggle-btn {
    display: none;
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

.filters-toggle-badge {
    background: var(--danger-color);
    color: white;
    min-width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 6px;
    margin-left: var(--spacing-xs);
}

/* Listings Container */
.listings-container {
    min-height: 400px;
}

.listings-header {
    margin-bottom: var(--spacing-xl);
}

.listings-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.listings-header h2 i {
    color: var(--accent-primary);
    font-size: 1.75rem;
}

.listings-results-count {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Listings Grid - Compact List Layout */
.listings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    width: 100%;
}

/* Listing Card - Compact List Design */
.listing-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    transition: all var(--transition-base);
    width: 100%;
    display: block;
}

.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--btn-primary-bg);
}

/* Platform Icon - Large and Centered */
.listing-platform-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    border-radius: 50%;
    margin-bottom: var(--spacing-xs);
}

.listing-platform-icon i {
    font-size: 2rem;
    color: var(--bg-primary);
}

.listing-platform-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-sm);
    border-radius: 50%;
}

/* Username - Centered */
.listing-username {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}

/* Feature Icons - Horizontal Row */
.listing-features-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 24px;
}

.feature-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.feature-icon.verified {
    background-color: var(--overlay-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.feature-icon i {
    font-size: 0.75rem;
        display: flex;
}

/* Price - Prominent */
.listing-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin: var(--spacing-xs) 0;
}

/* Seller - Simple Row */
.listing-seller-simple {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

.seller-avatar-small {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.seller-username {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Actions - Stacked Buttons */
.listing-actions-simple {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* Old listing styles - keeping for backwards compatibility */
.listing-content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.listing-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    flex: 1;
}

.listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: auto;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-verified {
    background-color: var(--overlay-light);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.badge-feature {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.badge i {
    font-size: 1em;
}

.listing-seller {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.seller-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.seller-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seller-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.seller-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.seller-name:hover {
    color: var(--accent-primary);
}

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

.listing-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

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

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.813rem;
}

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

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

/* Pagination Wrapper */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-2xl);
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
}

.feature-badge i {
    font-size: 1em;
    color: var(--success-color);
}

.feature-badge.verified-badge {
    background-color: var(--overlay-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.listing-seller {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.seller-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background-size: cover;
    background-position: center;
}

.seller-info {
    flex: 1;
}

.seller-label {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.seller-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.seller-name:hover {
    color: var(--accent-primary);
}

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

.listing-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

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

.listing-actions .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
}

.listing-actions .btn i {
    font-size: 1em;
}

.listing-actions .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.listing-actions .btn-primary.added {
    background-color: var(--success-color);
    border-color: var(--success-color);
    pointer-events: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-tertiary);
}

.empty-state-icon i {
    font-size: 2rem;
}

.empty-state h3,
.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state p,
.empty-state-text {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
}

/* Cart Page Layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

/* Cart Items Section */
.cart-items-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cart-items-section h2 i {
    color: var(--accent-primary);
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Cart Item */
.cart-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: all 0.3s ease;
}

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

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.cart-item-details {
    flex: 1;
}

.cart-item-platform {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--accent-primary);
    color: white;
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.cart-item-platform i {
    font-size: 1em;
}

.cart-item-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.cart-item-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.cart-item-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.cart-item-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
    white-space: nowrap;
}

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

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

.cart-item-seller i {
    font-size: 1em;
    color: var(--text-tertiary);
}

.cart-item-seller a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.cart-item-seller a:hover {
    color: var(--accent-primary);
}

.btn-remove-cart {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--danger-color);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.btn-remove-cart:hover {
    background-color: var(--overlay-light);
    border-color: var(--danger-color);
}

.btn-remove-cart i {
    font-size: 1em;
}

/* Cart Summary Sidebar */
.cart-summary {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    align-self: start;
}

.cart-summary h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

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

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

.summary-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-lg);
    border-top: 2px solid var(--border-color);
}

.summary-total .summary-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-total .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

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

.cart-summary-actions .btn {
    width: 100%;
    justify-content: center;
}

.cart-trust-badges {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.trust-badge:last-child {
    margin-bottom: 0;
}

.trust-badge i {
    color: var(--success-color);
    font-size: 1em;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .marketplace-hero-title {
        font-size: 2.5rem;
    }
    
    .marketplace-hero-subtitle {
        font-size: 1.125rem;
    }
    
    .marketplace-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }
    
    .marketplace-browse-layout,
    .gaming-browse-layout,
    .gift-cards-browse-layout,
    .services-browse-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Mobile Filters Sidebar - Collapsible Inline */
    .filters-toggle-btn {
        display: flex !important;
        position: relative;
        z-index: 10;
    }
    
    .filters-sidebar {
        position: static;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease;
        background: transparent;
        padding: 0;
    }
    
    .filters-sidebar.filters-open {
        max-height: 5000px;
        opacity: 1;
        margin-bottom: var(--spacing-lg);
    }
    
    .filters-sidebar::before {
        display: none;
    }
    
    #filterForm {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        background: transparent;
        box-shadow: none;
        transform: none;
        transition: none;
        display: flex;
        flex-direction: column;
        overflow: visible;
        gap: var(--spacing-sm);
        padding: 0;
    }
    
    .filters-close-btn {
        display: none !important;
    }
    
    .filters-header {
        position: static;
        flex-shrink: 0;
        padding: var(--spacing-md);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .filter-actions {
        position: static;
        flex-shrink: 0;
        padding: var(--spacing-md);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-top: var(--spacing-sm);
    }
    
    .page-header-content {
        gap: var(--spacing-md);
    }
    
    .page-header-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .cart-layout {
        grid-template-columns: 1fr;
    }
    
    .cart-summary {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    .marketplace-page {
        padding: var(--spacing-lg) 0;
    }
    
    .marketplace-hero {
        padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }
    
    .marketplace-hero-title {
        font-size: 2rem;
    }
    
    .marketplace-hero-subtitle {
        font-size: 1rem;
    }
    
    .marketplace-stats {
        padding: var(--spacing-md);
    }
    
    .marketplace-stat-item {
        padding: var(--spacing-sm);
    }
    
    .marketplace-stat-item i {
        font-size: 1.5rem;
    }
    
    .marketplace-stat-item .stat-value {
        font-size: 1.25rem;
    }
    
    .page-wrapper {
        padding: var(--spacing-lg) 0;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    #filterForm {
        width: 90%;
        max-width: 360px;
        padding: var(--spacing-sm);
    }
    
    .filters-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .filters-header h3 {
        font-size: 1rem;
    }
    
    .filter-group {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .filter-actions {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .listings-grid {
        gap: var(--spacing-xs);
    }
    
    .listing-card {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .listing-card-icon {
        width: 32px;
        height: 32px;
    }
    
    .listing-card-icon i {
        font-size: 16px;
    }
    
    .listing-username {
        font-size: 0.8rem;
    }
    
    .listing-card-meta {
        font-size: 0.65rem;
    }
    
    .listing-price {
        font-size: 0.875rem;
    }
    
    .listing-description {
        font-size: 0.7rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .listing-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .listing-actions {
        width: 100%;
    }
    
    .listing-actions .btn {
        flex: 1;
    }
    
    .cart-item-header {
        flex-direction: column;
    }
    
    .cart-item-price {
        align-self: flex-start;
    }
    
    .price-range-inputs {
        grid-template-columns: 1fr;
    }
    
    .page-header-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .page-title {
        font-size: 1.25rem;
    }
    
    .page-subtitle {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .marketplace-page {
        padding: var(--spacing-md) 0;
    }
    
    .marketplace-hero {
        padding: var(--spacing-2xl) 0 var(--spacing-xl);
    }
    
    .marketplace-hero::before {
        width: 300px;
        height: 300px;
        filter: blur(40px);
        opacity: 0.5;
    }
    
    .marketplace-hero-badge {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .marketplace-hero-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .marketplace-hero-subtitle {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    .marketplace-stats {
        grid-template-columns: 1fr;
        padding: var(--spacing-md) var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    
    .marketplace-stat-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md);
        text-align: left;
    }
    
    .marketplace-stat-item .stat-icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
    
    .marketplace-stat-item i {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-xs);
    }
    
    .marketplace-stat-item .stat-value {
        font-size: 1.25rem;
    }
    
    .marketplace-stat-item .stat-label {
        font-size: 0.875rem;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Natural inline filters on mobile */
    #filterForm {
        width: 100%;
        max-width: 100%;
        padding: 0;
        gap: var(--spacing-sm);
    }
    
    .filters-header {
        padding: var(--spacing-md);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
    }
    
    .filters-header h3 {
        font-size: 1rem;
        font-weight: 600;
    }
    
    .filters-close-btn {
        display: none !important;
    }
    
    /* Filter groups with better touch targets */
    .filter-group {
        padding: var(--spacing-md) !important;
        margin: 0 !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-secondary) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
        box-shadow: var(--shadow-sm) !important;
    }
    
    .filter-group::before {
        display: none !important;
    }
    
    .filter-group:hover {
        transform: none !important;
        border-left: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-sm) !important;
    }
    
    .filter-group h4 {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-sm);
        color: var(--text-secondary);
        font-weight: 600;
    }
    
    /* Better touch targets for inputs */
    .filter-group .form-input,
    .filter-group .form-select {
        min-height: 44px !important;
        font-size: 1rem !important;
        padding: var(--spacing-sm) var(--spacing-md) !important;
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
    }
    
    /* Horizontal checkbox pills optimized for mobile */
    .filter-group .form-checkbox-label {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: var(--spacing-md) !important;
        min-height: 48px !important;
        margin-bottom: var(--spacing-xs) !important;
        font-size: 1rem !important;
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        gap: var(--spacing-sm) !important;
        width: 100% !important;
    }
    
    .filter-group .form-checkbox-label:last-child {
        margin-bottom: 0 !important;
    }
    
    .filter-group .form-checkbox-label input[type="checkbox"],
    .filter-group .form-checkbox-label .form-checkbox {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .filter-group .form-checkbox-label span {
        flex: 1 !important;
        display: block !important;
        color: var(--text-primary) !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
    }
    
    .filter-group .form-checkbox-label i {
        font-size: 1.125rem !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .filter-group .form-checkbox-label.filter-highlight {
        background: var(--bg-tertiary) !important;
        border-color: var(--border-light) !important;
    }
    
    /* Checkbox wrapper styling for services browse */
    .filter-group .checkbox-wrapper {
        display: flex !important;
        align-items: center !important;
        padding: var(--spacing-md) !important;
        min-height: 48px !important;
        margin-bottom: var(--spacing-xs) !important;
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        gap: var(--spacing-sm) !important;
        width: 100% !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .filter-group .checkbox-wrapper:hover {
        background: var(--bg-tertiary) !important;
        border-color: var(--border-light) !important;
    }
    
    .filter-group .checkbox-wrapper .checkbox-input {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        position: relative !important;
        border: 2px solid var(--border-color) !important;
        border-radius: var(--radius-sm) !important;
        background-color: var(--input-bg) !important;
        transition: all 0.3s ease !important;
    }
    
    .filter-group .checkbox-wrapper .checkbox-input:checked {
        background-color: var(--accent-primary) !important;
        border-color: var(--accent-primary) !important;
    }
    
    .filter-group .checkbox-wrapper .checkbox-input:checked::after {
        content: '✓' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: white !important;
        font-size: 0.75rem !important;
        font-weight: bold !important;
    }
    
    .filter-group .checkbox-wrapper .checkbox-text {
        flex: 1 !important;
        display: block !important;
        color: var(--text-primary) !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
    }
    
    /* Price range inputs */
    .filter-group .price-range-inputs {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
    }
    
    .filter-group .price-range-inputs input {
        width: 100% !important;
    }
    
    /* Filter actions card styling */
    .filter-actions {
        position: static;
        padding: var(--spacing-md) !important;
        margin: 0 !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-secondary) !important;
        box-shadow: var(--shadow-sm) !important;
        gap: var(--spacing-sm) !important;
    }
    
    .filter-actions .btn {
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-size: 1rem !important;
        min-height: 44px !important;
        font-weight: 600 !important;
    }
    
    /* Compact list layout */
    .listings-grid {
        gap: var(--spacing-xs);
    }
    
    .listing-card {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .listing-card-icon {
        width: 32px;
        height: 32px;
    }
    
    .listing-card-icon i {
        font-size: 16px;
    }
    
    .listing-username {
        font-size: 0.8rem;
    }
    
    .listing-card-meta {
        font-size: 0.65rem;
    }
    
    .listing-price {
        font-size: 0.85rem;
    }
    
    .listing-description {
        font-size: 0.7rem;
    }
    
    .listing-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .listing-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .listing-actions .btn {
        width: 100%;
        min-height: 44px;
        padding: var(--spacing-md);
        font-size: 0.9375rem;
    }
    
    /* Page header adjustments */
    .page-header-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .page-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    .page-subtitle {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* Extra Small Mobile Phones (320px) */
@media (max-width: 360px) {
    .marketplace-hero-title {
        font-size: 1.375rem;
    }
    
    .marketplace-stats {
        padding: var(--spacing-xs);
    }
    
    .marketplace-stat-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }
    
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .filters-header {
        padding: var(--spacing-sm) !important;
    }
    
    .filter-group {
        padding: var(--spacing-sm) !important;
    }
    
    .filter-group .form-input,
    .filter-group .form-select {
        font-size: 0.9375rem !important;
        padding: var(--spacing-sm) !important;
    }
    
    .filter-group .form-checkbox-label {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 0.9375rem !important;
        min-height: 44px !important;
    }
    
    .listing-card {
        padding: var(--spacing-sm);
    }
    
    .filters-toggle-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9375rem;
    }
    
    .filter-actions {
        padding: var(--spacing-sm) !important;
    }
    
    .filter-actions .btn {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        font-size: 0.9375rem !important;
    }
}

/* ========================================
   GIFT CARDS BROWSE - GRID LAYOUT
   ======================================== */

/* Results Column */
.results-column {
    min-width: 0;
}

/* Results Header - Sort & Count */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

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

.sort-form select {
    min-width: 200px;
}

/* Gift Cards Grid - Responsive 2-column on mobile */
.gift-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-lg);
}

/* Gift Card Listing Card - Override default listing-card */
.gift-cards-grid .listing-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0;
    transition: all var(--transition-base);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gift-cards-grid .listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px var(--overlay-light);
    border-color: var(--btn-primary-bg);
}

/* Gift Card Image Area - Compact */
.gift-cards-grid .listing-card-image {
    position: relative;
    width: 100%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
   
}

.gift-cards-grid .listing-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px var(--overlay-light));
}

.gift-cards-grid .listing-card-placeholder {
    font-size: 3rem;
    color: var(--text-tertiary);
}

/* Gift Card Image Overlays */
.gift-card-overlays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm);
    pointer-events: none;
}

.gift-card-region-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--overlay-dark);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    width: fit-content;
    align-self: flex-start;
}

.gift-card-region-badge i {
    font-size: 0.65rem;
    color: var(--btn-primary-bg);
}

.gift-card-value-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    color: var(--text-primary);
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    text-align: center;
    box-shadow: 0 4px 12px var(--btn-primary-bg);
    width: fit-content;
    white-space: nowrap;
}

/* Promotional Title Badge */
.gift-cards-grid .listing-promotional-title {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--warning-color);
    color: var(--text-primary);
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    animation: sparkle 1.5s ease-in-out infinite;
    margin-bottom: var(--spacing-xs);
    width: fit-content;
}

.gift-cards-grid .listing-promotional-title i {
    font-size: 0.75rem;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
}

/* Gift Card Badge */
.gift-cards-grid .listing-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Gift Card Content - Compact */
.gift-cards-grid .listing-card-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.gift-cards-grid .listing-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--spacing-sm);
}

.gift-cards-grid .listing-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.gift-cards-grid .listing-card-region {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 4px var(--spacing-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: var(--font-medium);
}

.gift-cards-grid .listing-card-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Gift Card Meta - Compact */
.gift-cards-grid .listing-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.gift-cards-grid .listing-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-tertiary);
}

.gift-cards-grid .listing-meta-item i {
    font-size: 0.875rem;
}

.gift-cards-grid .listing-meta-item span {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* Gift Card Footer */
.gift-cards-grid .listing-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.gift-cards-grid .listing-card-seller {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.gift-cards-grid .seller-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.gift-cards-grid .seller-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.gift-cards-grid .listing-card-price {
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    color: var(--btn-primary-bg);
}

/* Gift Card Inventory */
.gift-cards-grid .listing-card-inventory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.gift-cards-grid .inventory-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.gift-cards-grid .inventory-count i {
    font-size: 0.75rem;
}

.gift-cards-grid .inventory-count span {
    color: var(--text-secondary);
}

.gift-cards-grid .low-stock-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--overlay-light);
    color: var(--error-color);
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    animation: pulse 2s ease-in-out infinite;
}

.gift-cards-grid .low-stock-badge i {
    font-size: 0.65rem;
}

.gift-cards-grid .low-stock-badge span {
    color: var(--error-color);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .gift-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--spacing-md);
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sort-form select {
        width: 100%;
    }
}

/* Responsive - Mobile - 2 COLUMNS */
@media (max-width: 768px) {
    .marketplace-browse-layout {
        grid-template-columns: 1fr;
    }
    
    .gift-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .gift-cards-grid .listing-card-image {
        height: 120px;
        padding: var(--spacing-xs);
    }
    
    .gift-cards-grid .listing-card-image img {
        width: 100%;
        height: 100%;
    }
    
    .gift-cards-grid .listing-card-content {
        padding: var(--spacing-sm);
        gap: 6px;
    }
    
    .gift-cards-grid .listing-card-title {
        font-size: 0.8rem;
    }
    
    .gift-cards-grid .listing-card-description {
        font-size: 0.7rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .gift-cards-grid .listing-card-price {
        font-size: 0.9rem;
    }
    
    .gift-cards-grid .seller-name {
        font-size: 0.7rem;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .gift-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .gift-cards-grid .listing-card-image {
        height: 100px;
        padding: var(--spacing-xs);
    }
    
    .gift-cards-grid .listing-card-image img {
        width: 100%;
        height: 100%;
    }
    
    .gift-cards-grid .listing-card-content {
        padding: var(--spacing-xs);
        gap: 4px;
    }
    
    .gift-cards-grid .listing-promotional-title {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
    
    .gift-cards-grid .listing-card-region {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
    
    .gift-cards-grid .listing-card-title {
        font-size: 0.75rem;
    }
    
    .gift-cards-grid .listing-meta-item span,
    .gift-cards-grid .inventory-count span {
        font-size: 0.65rem;
    }
}

/* ========================================
   MARKETPLACE - SOCIAL MEDIA LISTINGS
   ======================================== */

.marketplace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.marketplace-filters {
    margin-bottom: var(--spacing-xl);
}

.platform-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 400px;
}

.platform-filter label {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.listings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    width: 100%;
}

.listing-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all 0.2s ease;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--overlay-medium);
}

.listing-card.listing-sold {
    opacity: 0.6;
    pointer-events: none;
}

.listing-card-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    width: 100%;
}

.listing-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition-base);
}

.listing-card:hover .listing-card-icon {
    background: var(--bg-tertiary);
    border-color: var(--btn-primary-bg);
}

.listing-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-card-icon i {
    font-size: 24px;
    color: var(--btn-primary-bg);
}

.listing-card-body {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    overflow: hidden;
}

.listing-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-width: 0;
}

.listing-card-top > div:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.listing-username {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-word;
}

.listing-card-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    font-weight: var(--font-regular);
    line-height: var(--line-height-normal);
    word-wrap: break-word;
}

.listing-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card-meta i {
    font-size: 0.9em;
    color: var(--btn-primary-bg);
    flex-shrink: 0;
}

.listing-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin: var(--spacing-sm) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-word;
}

.listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--border-color);
}

.listing-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.listing-stat i {
    font-size: 0.9em;
    color: var(--btn-primary-bg);
}

.listing-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-xs);
    gap: var(--spacing-md);
}

.listing-price {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--btn-primary-bg);
    white-space: nowrap;
}

.listing-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.listing-card-actions .btn-sm {
    flex-shrink: 0;
}

.listing-card-actions .form-inline {
    display: flex;
    margin: 0;
    flex-shrink: 0;
}

/* Gift Card Quantity Display */
.gift-card-quantity {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
}

.gift-card-quantity i {
    color: var(--text-secondary);
}

.gift-card-quantity span {
    color: var(--text-secondary);
}

.gift-card-quantity strong {
    font-weight: var(--font-semibold);
}

.quantity-high {
    color: var(--success-color);
}

.quantity-medium {
    color: var(--warning-color);
}

.quantity-low {
    color: var(--error-color);
}

/* Listing Card Meta Footer */
.listing-card-meta-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.listing-card-meta-footer span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.listing-card-meta-footer i {
    font-size: 0.9em;
}

/* Compact Status Badge for Listings */
.listing-card .status-badge {
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-xs);
    gap: var(--spacing-xs);
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.listing-card .status-badge i {
    font-size: 0.9em;
}

/* Compact Buttons for Listings */
.listing-card .btn-sm {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    white-space: nowrap;
    font-weight: var(--font-semibold);
}

.listing-card .btn-sm i {
    font-size: 1em;
}

/* Promotional Listing Styles */
.listing-card.promotional-listing {
    border: 2px solid var(--warning-color);
    background: var(--bg-primary);
    box-shadow: 0 0 20px var(--overlay-medium);
}

.listing-card.promotional-listing:hover {
    border-color: var(--warning-color);
    box-shadow: 0 0 30px var(--warning-color);
}

.promotional-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--warning-color);
    color: #111;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: 0 2px 8px var(--warning-color);
    z-index: 10;
}

.promotional-badge i {
    font-size: 1em;
}

.listing-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--overlay-light);
    gap: var(--spacing-sm);
}

.listing-platform {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.listing-platform i {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.listing-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--btn-primary-bg);
    white-space: nowrap;
}

.listing-card-body {
    flex: 1;
    padding: 0;
}

.listing-username {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-description {
    color: var(--text-secondary);
    line-height: 1.4;
    font-size: 0.75rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.listing-seller {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.listing-seller i {
    font-size: 1em;
}



/* Listing Details Page */
.listing-details-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-2xl);
}

.listing-details-header {
    margin-bottom: var(--spacing-xl);
}

.listing-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--accent-primary)10;
    border: 1px solid var(--accent-primary)30;
    border-radius: var(--radius-full);
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-md);
}

.listing-platform-badge i {
    font-size: 1.25em;
}

.listing-details-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.listing-details-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.listing-details-body {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
}

.listing-details-sidebar {
    position: sticky;
    top: var(--spacing-lg);
    height: fit-content;
}

.seller-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

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

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

.seller-avatar i {
    font-size: 1.5rem;
    color: var(--text-tertiary);
}

/* Terms Section */
.terms-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

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

.terms-list li {
    display: flex;
    align-items: start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.terms-list li::before {
    content: '✓';
    color: var(--success-color);
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .listing-details-container {
        grid-template-columns: 1fr;
    }
    
    .listing-details-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .marketplace-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .marketplace-header > div:last-child {
        width: 100%;
    }
    
    .marketplace-header > div:last-child > * {
        flex: 1;
    }
    
    .listings-grid {
        gap: var(--spacing-xs);
        width: 100%;
    }
    
    .platform-filter {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
    }
}

/* Category Cards */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* ========================================
   MARKETPLACE PAGE
   ======================================== */

/* Page Header */
.page-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-2xl) 0;
    margin-bottom: var(--spacing-2xl);
}

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

.page-header-text {
    flex: 1;
}

.page-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.page-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Page Content */
.page-content {
    padding-bottom: var(--spacing-3xl);
}

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

/* Marketplace Card */
.marketplace-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    transition: all 0.3s ease;
    position: relative;
}

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

.marketplace-card-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
}

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

.marketplace-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.marketplace-card-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md);
    line-height: 1.5;
}

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

.marketplace-card-platforms,
.marketplace-card-fee {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.marketplace-card-platforms i,
.marketplace-card-fee i {
    font-size: 0.875rem;
}

.marketplace-card-fee {
    color: var(--success-color);
    font-weight: 600;
}

.marketplace-card-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

.marketplace-card:hover .marketplace-card-arrow {
    background: var(--accent-primary);
    color: white;
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
    .page-title {
        font-size: 1.5rem;
    }

    .marketplace-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .marketplace-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-md);
    }

    .marketplace-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .marketplace-card-title {
        font-size: 1rem;
    }

    .marketplace-card-description {
        display: none;
    }

    .marketplace-card-meta {
        justify-content: center;
    }

    .marketplace-card-arrow {
        display: none;
    }

    /* 4th card - centered in second row */
    .marketplace-card:nth-child(4) {
        grid-column: 1 / -1;
        max-width: calc(33.333% - var(--spacing-md));
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: var(--spacing-xl) 0;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .marketplace-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-card {
        flex-direction: row;
        text-align: left;
        padding: var(--spacing-lg);
    }

    .marketplace-card-description {
        display: block;
    }

    .marketplace-card-meta {
        justify-content: flex-start;
    }

    .marketplace-card:nth-child(4) {
        grid-column: auto;
        max-width: 100%;
        margin: 0;
    }
}

/* Old Marketplace Styles - Removed */

.marketplace-intro-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.marketplace-intro-subtitle {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Marketplace Categories Wrapper - Centered */
.marketplace-categories-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.marketplace-categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 800px;
}

/* Marketplace Category Card - Horizontal Design */
.marketplace-category-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.marketplace-category-card:hover {
    transform: translateX(8px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-lg);
}

.marketplace-category-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--text-primary);
}

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

.marketplace-category-name {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.marketplace-category-description {
    font-size: var(--font-md);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.5;
}

.marketplace-category-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.marketplace-category-platforms {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
    color: var(--text-tertiary);
}

.marketplace-category-platforms i {
    font-size: 0.9rem;
}

.marketplace-category-fee {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--success-color-light);
    color: var(--success-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 600;
}

.marketplace-category-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--text-tertiary);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.marketplace-category-card:hover .marketplace-category-arrow {
    background: var(--accent-primary);
    color: white;
    transform: translateX(4px);
}

/* Marketplace Responsive */
@media (max-width: 768px) {
    .marketplace-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .marketplace-category-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-lg);
    }

    .marketplace-category-description {
        display: none;
    }

    /* 4th category card spans full width but stays same size and centered */
    .marketplace-category-card:nth-child(4) {
        grid-column: 1 / -1;
        max-width: calc(33.333% - var(--spacing-md));
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .marketplace-categories-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-category-card {
        flex-direction: row;
        text-align: left;
    }

    .marketplace-category-description {
        display: block;
    }

    .marketplace-category-card:nth-child(4) {
        grid-column: auto;
        max-width: 100%;
        margin: 0;
    }
}

.category-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-primary);
}

.category-card-icon {
    font-size: 3rem;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
}

.category-card-title {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.category-card-description {
    font-size: var(--font-md);
    color: var(--text-secondary);
    line-height: 1.5;
    flex-grow: 1;
}

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

.category-count,
.category-tax {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 600;
}

.category-count {
    color: var(--accent-primary);
}

.category-tax {
    color: var(--success-color);
}

/* Platform Cards */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.platform-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.platform-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-primary);
}

.platform-card-icon {
    font-size: 2.5rem;
    color: var(--accent-primary);
}

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

.platform-card-description {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    flex-grow: 1;
}

.platform-card-footer {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.platform-listings-count {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.platform-listings-count i {
    color: var(--accent-primary);
}

/* Tax Preview */
.tax-preview {
    background: var(--overlay-light);
    border: 2px solid var(--success-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

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

.tax-preview-header i {
    font-size: 1.5rem;
    color: var(--success-color);
}

.tax-preview-header h4 {
    margin: 0;
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
}

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

.tax-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-md);
}

.tax-preview-row span {
    color: var(--text-secondary);
}

.tax-preview-row strong {
    color: var(--text-primary);
    font-weight: 600;
}

.tax-preview-row.tax-deduction strong {
    color: var(--error-color);
}

.tax-preview-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-sm) 0;
}

.tax-preview-total {
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--success-color);
}

.tax-preview-total span,
.tax-preview-total strong {
    font-size: var(--font-lg);
    font-weight: 700;
}

.tax-preview-total strong {
    color: var(--success-color);
}

/* Tax Notice */
.tax-notice {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--warning-color-light);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-sm);
    margin-top: var(--spacing-sm);
}

.tax-notice i {
    color: var(--warning-color);
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.breadcrumb a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--accent-primary-hover);
}

.breadcrumb i {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
    .categories-grid,
    .platforms-grid {
        grid-template-columns: 1fr;
    }
    
    .marketplace-intro-title {
        font-size: 2rem;
    }
    
    .marketplace-intro-subtitle {
        font-size: var(--font-md);
    }
    
    .marketplace-categories-grid {
        max-width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
    
    .marketplace-category-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .marketplace-category-card:hover {
        transform: translateY(-4px);
    }
    
    .marketplace-category-icon {
        width: 45px;
        height: 45px;
        font-size: 1.35rem;
    }
    
    .marketplace-category-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .marketplace-category-name {
        font-size: var(--font-md);
        margin-bottom: var(--spacing-xs);
    }
    
    .marketplace-category-description {
        display: none;
    }
    
    .marketplace-category-meta {
        font-size: var(--font-xs);
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .marketplace-category-arrow {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        transform: rotate(90deg);
    }
    
    .marketplace-category-card:hover .marketplace-category-arrow {
        transform: rotate(90deg) translateX(4px);
    }
    
    .category-card-footer,
    .platform-card-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .marketplace-intro {
        margin-bottom: var(--spacing-xl);
    }
    
    .marketplace-intro-title {
        font-size: 1.75rem;
    }
    
    .marketplace-categories-grid {
        grid-template-columns: 1fr;
    }
    
    .marketplace-category-card {
        padding: var(--spacing-lg);
    }
    
    .marketplace-category-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .marketplace-category-name {
        font-size: var(--font-lg);
    }
    
    .marketplace-category-description {
        display: block;
        font-size: var(--font-sm);
    }
    
    .marketplace-category-meta {
        font-size: var(--font-sm);
        flex-direction: row;
    }
}

/* ========================================
   MARKETPLACE CREATE LISTING - STEP INDICATORS
   ======================================== */

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.step-indicator.active .step-circle {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: white;
}

.step-indicator.completed .step-circle {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

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

.step-indicator.active .step-label {
    color: var(--btn-primary-bg);
    font-weight: var(--font-semibold);
}

.step-content {
    display: none;
}

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

/* Two Column Layout for Create Listing */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
    align-items: start;
}

@media (max-width: 1200px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
    
    .preview-column {
        display: none;
    }
}

/* Preview Card */
.preview-card {
    position: sticky;
    top: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.preview-title {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.preview-item {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.preview-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.preview-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.preview-value {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.preview-price {
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.preview-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--success-color);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
}




/* ============================================
   LISTING DETAILS PAGE
   ============================================ */

/* Layout */
.listing-details-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

/* Header Card */
.listing-details-header-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.listing-header-top {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.listing-platform-badge-large {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 2px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.listing-platform-badge-large i {
    font-size: 2.5rem;
    color: var(--btn-primary-bg);
}

.listing-platform-badge-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.listing-header-info {
    flex: 1;
}

.listing-platform-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.listing-details-username {
    font-size: 2rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}

.listing-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    margin-top: var(--spacing-md);
}

.listing-status-badge.active {
    background: var(--success-bg);
    color: var(--success-color);
}

.listing-status-badge.sold {
    background: var(--error-bg);
    color: var(--error-color);
}

/* Section Styling */
.listing-details-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.25rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
}

.section-title i {
    font-size: 1.5rem;
    color: var(--btn-primary-bg);
}

/* Images Gallery */
.listing-images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.listing-image-item {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-primary);
    cursor: pointer;
    transition: var(--transition-base);
    border: 1px solid var(--border-color);
}

.listing-image-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--btn-primary-bg);
}

.listing-image-item:hover .image-overlay {
    opacity: 1;
}

.listing-image-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg-primary);
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-base);
    color: white;
}

.image-overlay i {
    font-size: 2rem;
}

.image-overlay span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
}

/* Single large image */
.listing-images-gallery.single-image {
    grid-template-columns: 1fr;
}

.listing-images-gallery.single-image .listing-image-item {
    padding-top: 56.25%; /* 16:9 Aspect Ratio for single image */
    max-height: 500px;
}

/* Image Modal */
.image-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-dark-strong);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.image-modal.active {
    display: flex;
}

.image-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.image-modal-content img {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px var(--overlay-dark);
}

.image-modal-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--overlay-medium);
    border: 1px solid var(--overlay-strong);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}

.image-modal-close:hover {
    background: var(--overlay-strong);
    transform: scale(1.1);
}

.image-modal-close i {
    font-size: 1.5rem;
}

.image-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--overlay-medium);
    border: 1px solid var(--overlay-strong);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}

.image-modal-nav:hover {
    background: var(--btn-primary-bg);
    transform: translateY(-50%) scale(1.1);
}

.image-modal-nav.prev {
    left: var(--spacing-xl);
}

.image-modal-nav.next {
    right: var(--spacing-xl);
}

.image-modal-nav i {
    font-size: 1.75rem;
}

.image-modal-counter {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--overlay-dark-strong);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-full);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
}

/* Responsive Image Gallery */
@media (max-width: 768px) {
    .listing-images-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .image-modal-nav {
        width: 44px;
        height: 44px;
    }
    
    .image-modal-nav.prev {
        left: var(--spacing-md);
    }
    
    .image-modal-nav.next {
        right: var(--spacing-md);
    }
    
    .image-modal-close {
        top: var(--spacing-md);
        right: var(--spacing-md);
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .listing-images-gallery {
        grid-template-columns: 1fr;
    }
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.feature-item i {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.feature-item.verified i {
    color: var(--success-color);
}

.feature-item.delivery-instant i {
    color: var(--btn-primary-bg);
}

.feature-item.delivery-manual i {
    color: var(--warning-color);
}

.feature-item span {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* Description */
.listing-description {
    color: var(--text-secondary);
    line-height: 1.8;

    word-break: break-word;
}

/* Sidebar */
.listing-details-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Price Card */
.price-card,
.listing-price-card {
    background: var(--bg-secondary);
    border: 2px solid var(--btn-primary-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
}

.price-label {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.price-amount {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.price-card .btn-primary,
.price-card .btn-secondary {
    width: 100%;
}

.price-card .btn-primary:hover {
    transform: translateY(-2px);
}

.price-card .alert {
    margin-top: var(--spacing-md);
}

.price-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    font-size: 0.9375rem;
}

.price-breakdown-row:last-child {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

/* Seller Card */
.seller-card,
.seller-card-details {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
}

.seller-card-title,
.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
}

.seller-card-title i,
.sidebar-section-title i {
    color: var(--btn-primary-bg);
}

.seller-profile,
.seller-profile-link {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

.seller-profile-link:hover {
    transform: translateY(-2px);
}

.seller-avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--bg-primary);
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

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

.seller-info,
.seller-info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.seller-username {
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.seller-view-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--btn-primary-bg);
    transition: var(--transition-base);
}

.seller-profile-link:hover .seller-view-profile {
    gap: var(--spacing-sm);
}

.seller-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.verified-merchant-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.verified-merchant-badge i {
    font-size: 0.875rem;
}

.seller-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

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

.seller-stat i {
    color: var(--btn-primary-bg);
    font-size: 1rem;
    flex-shrink: 0;
}

.seller-actions {
    display: flex;
    flex-direction: column;
}

.btn-icon-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-text:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* Safety Tips Card */
.safety-tips-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    border: 2px solid var(--border-color);
}

.safety-tips-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.safety-tips-title i {
    color: var(--success-color);
    font-size: 1.25rem;
}

.safety-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.safety-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.safety-tips-list li i {
    color: var(--success-color);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
    .listing-details-layout {
        grid-template-columns: 1fr;
    }
    
    .listing-details-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .listing-header-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .listing-platform-badge-large {
        width: 64px;
        height: 64px;
    }
    
    .listing-platform-badge-large i {
        font-size: 2rem;
    }
    
    .listing-details-username {
        font-size: 1.5rem;
    }
    
    .price-amount {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .seller-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================
   CART PAGE
   ============================================ */

/* Cart Layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

/* Cart Items List */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Individual Cart Item */
.cart-item {
    transition: all 0.3s ease;
}

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

.cart-item-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-xl);
    align-items: start;
    padding: var(--spacing-lg);
}

/* Platform Badge in Cart - IMPROVED DESIGN */
.cart-item-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-width: 100px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.cart-item-platform:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--overlay-light);
    border-color: var(--btn-primary-bg);
}

.cart-item-platform i {
    font-size: 2.5rem;
    color: var(--btn-primary-bg);
    filter: drop-shadow(0 2px 4px var(--btn-primary-bg));
}

.cart-item-platform span {
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: center;
    font-weight: var(--font-semibold);
    line-height: 1.2;
    letter-spacing: 0.025em;
}

.platform-icon-small {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--overlay-light);
    padding: var(--spacing-sm);
    transition: all var(--transition-base);
}

.cart-item-platform:hover .platform-icon-small {
    transform: scale(1.05);
    box-shadow: 0 4px 8px var(--overlay-light);
}

/* Cart Item Details - IMPROVED DESIGN */
.cart-item-details {
    flex: 1;
    min-width: 0; /* Prevent overflow */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cart-item-title {
    font-size: 1.125rem;
    font-weight: var(--font-semibold);
    margin: 0;
    line-height: 1.4;
}

.cart-item-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.cart-item-title a:hover {
    color: var(--btn-primary-bg);
    text-decoration: underline;
}

.cart-item-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cart Item Features */
.cart-item-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--spacing-sm);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.feature-badge i {
    font-size: 0.875rem;
    color: var(--accent-primary);
}

/* Cart Item Seller */
.cart-item-seller {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.cart-item-seller a {
    color: var(--text-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
}

.cart-item-seller a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Cart Item Actions */
.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-md);
    min-width: 200px; /* Ensure enough space for price and tax info */
}

.cart-item-price {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
}

/* Cart Item Price Info */
.cart-quantity-info {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: var(--spacing-xs);
}

.cart-tax-info {
    display: block;
    font-size: 0.75rem;
    margin-top: var(--spacing-xs);
}

.cart-tax-info.customer-pays {
    color: var(--info-color);
}

.cart-tax-info.merchant-pays {
    color: var(--success-color);
}

.cart-tax-info i {
    font-size: 0.75rem;
}

/* Cart Summary */
.cart-summary {
    position: sticky;
    top: var(--spacing-lg);
    height: fit-content;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
}

.summary-row span:last-child {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

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

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

/* Trust Badges */
.trust-badges {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

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

.trust-badge i {
    color: var(--success-color);
    font-size: 1.125rem;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-5xl) var(--spacing-2xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-xl);
}

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

/* Responsive Design */
@media (max-width: 992px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
    
    .cart-summary {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    .cart-item-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .cart-item-platform {
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
    }
    
    .cart-item-actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: unset;
    }
    
    .cart-item-price {
        font-size: 1.25rem;
        align-items: flex-start;
        text-align: left;
    }
}

/* ========================================
   COMMENTS SECTION
   ======================================== */

.comment-form {
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    transition: all var(--transition-base);
}

.comment-form:hover {
    border-color: var(--overlay-medium);
}

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

.comment-form .form-group:last-of-type {
    margin-bottom: var(--spacing-xl);
}

/* Star Rating Input */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.rating-input input[type="radio"] {
    display: none;
}

.rating-input label {
    font-size: 2rem;
    color: var(--overlay-strong);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1;
}

.rating-input label:hover {
    color: var(--warning-color);
    transform: scale(1.15);
}

.rating-input label:hover ~ label {
    color: var(--warning-color);
}

.rating-input input[type="radio"]:checked ~ label {
    color: var(--warning-color);
}

/* Comments List */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.comment-item {
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
}

.comment-item:hover {
    border-color: var(--btn-primary-bg);
    box-shadow: 0 4px 12px var(--overlay-light);
    transform: translateY(-2px);
}

/* Nested Reply Styling */
.comment-reply {
    border-inline-start: 2px solid var(--overlay-medium);
    padding-inline-start: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.merchant-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--spacing-xs);
    background: var(--overlay-medium);
    color: var(--btn-primary-bg);
    border-radius: var(--radius-sm);
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

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

.comment-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--btn-primary-bg);
    overflow: hidden;
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.comment-item:hover .comment-avatar {
    border-color: var(--btn-primary-bg);
    transform: scale(1.05);
}

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

.comment-author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.comment-author-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.comment-rating {
    display: flex;
    gap: 0.125rem;
    align-items: center;
}

.comment-rating .star {
    color: var(--overlay-strong);
    font-size: 0.938rem;
    line-height: 1;
}

.comment-rating .star.filled {
    color: var(--warning-color);
}

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

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

.comment-delete-form {
    display: inline-block;
}

.btn-text-danger {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 1rem;
}

.btn-text-danger:hover {
    background: var(--overlay-light);
}

.comment-body {
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: var(--spacing-md);
}

/* Comment Actions */
.comment-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.comment-action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.comment-action-btn:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.comment-action-btn i {
    font-size: 1rem;
}

.comment-action-btn:hover i {
    transform: scale(1.1);
}

.comment-reply-btn {
    color: var(--btn-primary-bg);
}

.comment-reply-btn:hover {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
}

/* Comment Replies */
.comment-replies {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--overlay-light);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.comment-reply-item {
    background: var(--overlay-light);
    border-left: 3px solid var(--btn-primary-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

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

.reply-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
}

.reply-author i {
    color: var(--btn-primary-bg);
    font-size: 1rem;
}

.reply-author strong {
    color: var(--text-primary);
    font-weight: 600;
}

.merchant-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--spacing-xs);
    background: var(--overlay-medium);
    color: var(--btn-primary-bg);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reply-date {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.reply-body {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.938rem;
}

/* Empty State for Comments */
.comments-list .empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.comments-list .empty-state i {
    font-size: 3rem;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
}

.comments-list .empty-state p {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.comments-list .empty-state small {
    color: var(--text-secondary);
}

/* ========================================
   MODAL STYLES
   ======================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
    backdrop-filter: blur(4px);
    z-index: 9999999999999999999999999;
}

.modal-content {
    position: relative;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px var(--overlay-dark);
    z-index: 1;
}

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

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-header h3 i {
    font-size: 1.5rem;
}

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

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

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-body .form-group {
    margin-bottom: var(--spacing-md);
}

.modal-body .form-group:last-child {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: var(--danger-color-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--error-color);
}

/* Responsive */
@media (max-width: 768px) {
    .comment-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .comment-meta {
        width: 100%;
        justify-content: space-between;
    }
    
    .modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}


/* ========================================
   MARKETPLACE TABS & OFFERS
   ======================================== */

/* Tabs Styling */
.tabs-wrapper {
    margin-bottom: var(--spacing-xl);
}

.tabs-container-compact {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    border: 1px solid var(--overlay-light);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Twitter-Style Tabs */
.tabs-container {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
    background: transparent;
    padding: 0 var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    font-family: var(--font-family);
    position: relative;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--overlay-light);
}

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

.tab-btn.active:hover {
    background: var(--overlay-light);
}

.tab-btn .badge,
.tab-badge {
    background: var(--btn-primary-bg);
    color: white;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    line-height: 1;
}

.tab-btn.active .tab-badge {
    background: var(--btn-primary-bg);
    box-shadow: 0 0 0 2px var(--overlay-medium);
}

/* Compact Tab Buttons */
.compact-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.compact-tab-btn:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.compact-tab-btn.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.compact-tab-btn i {
    font-size: 1em;
}

.compact-tab-btn .tab-count {
    background: var(--overlay-strong);
    color: white;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: var(--font-bold);
    min-width: 18px;
    text-align: center;
}

.compact-tab-btn.active .tab-count {
    background: var(--overlay-medium);
}

.tab-content {
    display: none;
}

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

/* Offers Grid */
.offers-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.offers-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.offers-group {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

/* Offer Cards */
.offer-card,
.offer-card-compact {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
}

.offer-card-compact {
    background: var(--bg-primary);
}

.offer-card:hover,
.offer-card-compact:hover {
    box-shadow: var(--shadow-md);
}

.offer-card.pending,
.offer-card-compact.pending {
    border-left: 4px solid var(--warning-color);
}

.offer-card.accepted,
.offer-card-compact.accepted {
    border-left: 4px solid var(--success-color);
}

.offer-card.rejected,
.offer-card-compact.rejected {
    border-left: 4px solid var(--error-color);
}

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

.offer-header-compact {
    align-items: center;
}

/* Offer Listing Info */
.offer-listing-info,
.listing-info-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.listing-platform-icon-small,
.platform-icon-small {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
}

.platform-icon-small {
    background: var(--bg-secondary);
}

.listing-platform-icon-small img,
.platform-icon-small img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.offer-listing-username {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.listing-info-compact h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.offer-listing-platform,
.listing-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Offer Status Badges */
.offer-status-badge,
.offer-status-badge-compact {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
}

.offer-status-badge-compact {
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
}

.offer-status-badge.pending,
.offer-status-badge-compact.pending {
    background: var(--overlay-light);
    color: var(--warning-color);
}

.offer-status-badge.accepted,
.offer-status-badge-compact.accepted {
    background: var(--overlay-light);
    color: var(--success-color);
}

.offer-status-badge.rejected,
.offer-status-badge-compact.rejected {
    background: var(--overlay-light);
    color: var(--error-color);
}

.offers-count-badge {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
}

/* Offer Details */
.offer-details,
.offer-body-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.offer-body-compact {
    gap: var(--spacing-sm);
}

.offer-price-row,
.price-comparison-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

.price-comparison-compact {
    background: var(--bg-secondary);
}

.price-item,
.price-item-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.price-item-compact {
    gap: 4px;
}

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

.price-label-compact {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
}

.price-value,
.price-value-compact {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
}

.price-value-compact {
    font-size: var(--font-size-lg);
}

.price-value.original,
.price-value-compact.original {
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.price-value.offer,
.price-value-compact.offer {
    color: var(--accent-primary);
}

.price-diff {
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
}

.price-diff .negative {
    color: var(--error-color);
}

.price-diff .positive {
    color: var(--success-color);
}

/* Offer Metadata */
.offer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

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

/* Offer Messages */
.offer-message,
.offer-message-compact {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
}

.offer-message-compact {
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
}

.offer-message i,
.offer-message-compact i {
    color: var(--accent-primary);
    margin-top: 2px;
}

.offer-message p,
.offer-message-compact p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.offer-message-compact p {
    font-style: italic;
}

.offer-expiry {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--warning-color);
}

/* Offer Actions */
.offer-actions,
.offer-actions-compact {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Buyer Info */
.buyer-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.buyer-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    font-weight: var(--font-bold);
    font-size: var(--font-size-sm);
}

.buyer-name {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

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

/* Offers List */
.offers-list-modern {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

/* ========================================
   MY LISTINGS PAGE - MODERN CARDS
   ======================================== */

.listings-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.listing-card-modern {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.listing-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-primary);
}

.listing-card-modern.sold {
    opacity: 0.6;
}

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

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

.platform-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
}

.platform-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.platform-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.listing-username-small {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.status-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.status-badge-modern.active {
    background: var(--overlay-light);
    color: var(--success-color);
}

.status-badge-modern.sold {
    background: var(--overlay-light);
    color: var(--text-tertiary);
}

.status-badge-modern.pending {
    background: var(--overlay-light);
    color: var(--warning-color);
}

.listing-card-modern-body {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.price-main {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.price-net {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--success-color);
}

.listing-description-modern {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.badge-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
}

.badge-verified {
    background: var(--overlay-light);
    color: var(--info-color);
}

.badge-featured {
    background: var(--overlay-light);
    color: var(--warning-color);
}

.badge-offers {
    background: var(--overlay-light);
    color: var(--info-color);
}

.listing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

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

.stat-item.highlight {
    color: var(--accent-primary);
    font-weight: var(--font-semibold);
}

.listing-card-modern-footer {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.listing-card-modern-footer .btn-sm {
    flex: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .listings-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .tabs-wrapper {
        margin-bottom: var(--spacing-lg);
    }
    
    .tabs-container-compact {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    
    .tabs-container-compact::-webkit-scrollbar {
        display: none;
    }
    
    .compact-tab-btn {
        white-space: nowrap;
        min-width: max-content;
    }
    
    .tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }
    
    .tabs-container::-webkit-scrollbar {
        display: none;
    }
    
    .tab-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
        white-space: nowrap;
        min-width: max-content;
    }
    
    .tab-btn i {
        font-size: 1rem;
    }
    
    .tab-badge {
        font-size: 0.625rem;
        padding: 1px 6px;
    }
    
    .offer-price-row,
    .price-comparison-compact {
        flex-direction: column;
        align-items: stretch;
    }
    
    .offer-price-row i,
    .price-comparison-compact i {
        transform: rotate(90deg);
    }
    
    .offer-actions,
    .offer-actions-compact {
        flex-direction: column;
    }
}

/* ========================================
   ORDERS & SALES SYSTEM
   ======================================== */

/* Checkout Page Layout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

/* ========================================
   RATING SYSTEM
   ======================================== */

/* Star Rating Selector */
.rating-stars {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.star-icon {
    font-size: 2rem;
    color: var(--overlay-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.star-icon:hover {
    color: var(--overlay-medium);
    transform: scale(1.1);
}

.star-icon.active {
    color: var(--btn-primary-bg);
}

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

/* Character Counter */
.form-help-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xs);
}

.char-counter {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.char-counter.warning {
    color: var(--warning-color);
}

.char-counter.error {
    color: var(--error-color);
}

/* Rating Marquee on Homepage */
.rating-marquee-section {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-2xl) 0;
    background: linear-gradient(
        180deg,
        var(--overlay-light) 0%,
        transparent 100%
    );
}

.rating-marquee-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.rating-marquee-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.rating-marquee-subtitle {
    color: var(--text-secondary);
    font-size: 1.125rem;
}

.rating-marquee-container {
    position: relative;
    overflow: hidden;
    height: 200px;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.rating-marquee-track {
    display: flex;
    gap: var(--spacing-lg);
    animation: marquee-scroll 30s linear infinite;
    will-change: transform;
}

.rating-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Rating Card in Marquee */
.rating-card {
    min-width: 350px;
    max-width: 350px;
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    flex-shrink: 0;
    transition: var(--transition-base);
}

.rating-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--btn-primary-bg);
}

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

.rating-card-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.rating-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-primary-text);
    font-weight: 600;
    font-size: 1rem;
}

.rating-card-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9375rem;
}

.rating-card-stars {
    display: flex;
    gap: 2px;
}

.rating-card-stars i {
    font-size: 1rem;
    color: var(--btn-primary-bg);
}

.rating-card-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive Rating Cards */
@media (max-width: 768px) {
    .rating-card {
        min-width: 280px;
        max-width: 280px;
    }
    
    .rating-marquee-container {
        height: auto;
        min-height: 180px;
    }
    
    .star-icon {
        font-size: 1.75rem;
    }
}

/* ========================================
   Ratings Page Grid Styles
   ======================================== */

.ratings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.ratings-grid .rating-card {
    min-width: unset;
    max-width: unset;
    width: 100%;
}

.ratings-grid .rating-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.rating-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

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

.rating-user-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-primary-text);
}

.rating-user-avatar .avatar-placeholder i {
    font-size: 1.25rem;
}

.rating-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.rating-user-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.rating-date {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.ratings-grid .rating-stars {
    display: flex;
    gap: 0.25rem;
    margin: var(--spacing-md) 0;
}

.ratings-grid .rating-stars i {
    color: var(--btn-primary-bg);
    font-size: 1.125rem;
}

.rating-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

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

/* ========================================
   Custom Page Display Styles
   ======================================== */

.custom-page-article {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-2xl) 0;
}

.custom-page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.custom-page-body {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 1rem;
}

/* Headings in page content */
.custom-page-body h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.custom-page-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.custom-page-body h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

/* Paragraphs */
.custom-page-body p {
    margin-bottom: var(--spacing-md);
}

/* Lists */
.custom-page-body ul,
.custom-page-body ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.custom-page-body li {
    margin-bottom: var(--spacing-sm);
}

/* Links */
.custom-page-body a {
    color: var(--btn-primary-bg);
    text-decoration: underline;
    transition: var(--transition-base);
}

.custom-page-body a:hover {
    color: var(--btn-primary-hover);
}

/* Images */
.custom-page-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--spacing-lg) 0;
    display: block;
}

/* Blockquotes */
.custom-page-body blockquote {
    border-left: 4px solid var(--btn-primary-bg);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Code blocks */
.custom-page-body code {
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

.custom-page-body pre {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}

.custom-page-body pre code {
    background: none;
    padding: 0;
}

/* Tables */
.custom-page-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.custom-page-body table th,
.custom-page-body table td {
    padding: var(--spacing-md);
    border: 1px solid var(--overlay-medium);
    text-align: left;
}

.custom-page-body table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.custom-page-body table td {
    color: var(--text-primary);
}

/* Horizontal rules */
.custom-page-body hr {
    border: none;
    border-top: 1px solid var(--overlay-medium);
    margin: var(--spacing-xl) 0;
}

/* Strong and emphasis */
.custom-page-body strong {
    font-weight: 700;
    color: var(--text-primary);
}

.custom-page-body em {
    font-style: italic;
}

/* Responsive design for custom pages */
@media (max-width: 768px) {
    .custom-page-article {
        padding: var(--spacing-lg) 0;
    }
    
    .custom-page-title {
        font-size: 2rem;
    }
    
    .custom-page-body h2 {
        font-size: 1.5rem;
    }
    
    .custom-page-body h3 {
        font-size: 1.25rem;
    }
    
    .custom-page-body h4 {
        font-size: 1.125rem;
    }
    
    .custom-page-body table {
        font-size: 0.875rem;
    }
    
    .custom-page-body table th,
    .custom-page-body table td {
        padding: var(--spacing-sm);
    }
}

/* ========================================
   WHY CHOOSE PREMIUM PLATFORM SECTION
   ======================================== */

.why-choose-section {
    padding: var(--spacing-5xl) 0;
    position: relative;
}

/* ========== Features Section (Centered) ========== */
.why-choose-features {
    padding: var(--spacing-xl);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.features-content {
    width: 100%;
}

/* Small Subtitle */
.features-subtitle {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--btn-primary-bg);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 var(--spacing-md) 0;
}

/* Large Title */
.features-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 var(--spacing-2xl) 0;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--btn-primary-bg) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Feature List */
.feature-list {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-2xl);
    align-items: center;
}

/* Individual Feature Item */
.feature-item {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    max-width: 600px;
    width: 100%;
    text-align: left;
}

/* Feature Marker Wrapper (contains dot and line) */
.feature-marker-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Feature Marker (Dots with different sizes) */
.feature-marker {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: var(--btn-primary-bg);
    box-shadow: 0 4px 12px var(--btn-primary-bg);
    transition: all var(--transition-base);
}

.feature-marker i {
    color: var(--btn-primary-text);
    position: relative;
    z-index: 1;
}

/* Different sizes for visual hierarchy */
.feature-marker-large {
    width: 64px;
    height: 64px;
}

.feature-marker-large i {
    font-size: 2rem;
}

.feature-marker-medium {
    width: 56px;
    height: 56px;
}

.feature-marker-medium i {
    font-size: 1.75rem;
}

.feature-marker-small {
    width: 48px;
    height: 48px;
}

.feature-marker-small i {
    font-size: 1.5rem;
}

/* Connecting Line between dots */
.feature-line {
    width: 3px;
    height: 60px;
    background: linear-gradient(
        180deg,
        var(--btn-primary-bg) 0%,
        var(--btn-primary-bg) 100%
    );
    margin: var(--spacing-xs) 0;
    position: relative;
}

/* Animated pulse effect on line */
.feature-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--btn-primary-bg) 50%,
        transparent 100%
    );
    opacity: 0;
    animation: pulse-line 2s ease-in-out infinite;
}

@keyframes pulse-line {
    0%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 0.6;
        transform: translateX(-50%) translateY(30px);
    }
}

/* Hover effect for markers */
.feature-item:hover .feature-marker {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--btn-primary-bg);
}

/* Glow effect on hover */
.feature-item:hover .feature-marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    opacity: 0.3;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* Feature Content */
.feature-content {
    flex: 1;
    padding-top: var(--spacing-xs);
}

.feature-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.feature-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 var(--spacing-xl) 0;
}

/* Feature Divider - REMOVED, using lines instead */
.feature-divider {
    display: none;
}

/* CTA Actions */
.features-actions {
    display: flex;
    gap: var(--spacing-md);
}

.features-actions .btn-primary {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: 1.125rem;
}

/* ========== Responsive Design ========== */

/* Tablets */
@media (max-width: 1024px) {
    .features-title {
        font-size: 2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .why-choose-section {
        padding: var(--spacing-3xl) 0;
    }
    
    .why-choose-features {
        padding: var(--spacing-md);
    }
    
    .features-subtitle {
        font-size: 0.75rem;
    }
    
    .features-title {
        font-size: 1.75rem;
    }
    
    .feature-item {
        gap: var(--spacing-md);
    }
    
    .feature-marker-large {
        width: 56px;
        height: 56px;
    }
    
    .feature-marker-large i {
        font-size: 1.75rem;
    }
    
    .feature-marker-medium {
        width: 48px;
        height: 48px;
    }
    
    .feature-marker-medium i {
        font-size: 1.5rem;
    }
    
    .feature-marker-small {
        width: 44px;
        height: 44px;
    }
    
    .feature-marker-small i {
        font-size: 1.25rem;
    }
    
    .feature-line {
        height: 50px;
    }
    
    .feature-name {
        font-size: 1.25rem;
    }
    
    .feature-description {
        font-size: 0.9375rem;
    }
    
    .features-actions .btn-primary {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
    }
}

/* Extra Small Phones */
@media (max-width: 480px) {
    .features-title {
        font-size: 1.5rem;
    }
    
    .feature-marker-large {
        width: 52px;
        height: 52px;
    }
    
    .feature-marker-large i {
        font-size: 1.5rem;
    }
    
    .feature-marker-medium {
        width: 44px;
        height: 44px;
    }
    
    .feature-marker-medium i {
        font-size: 1.25rem;
    }
    
    .feature-marker-small {
        width: 40px;
        height: 40px;
    }
    
    .feature-marker-small i {
        font-size: 1.125rem;
    }
    
    .feature-line {
        height: 40px;
    }
    
    .feature-name {
        font-size: 1.125rem;
    }
}

/* ===================================
   MERCHANT APPLICATION PAGE
   =================================== */

/* Hero Section */
.merchant-hero {
    text-align: center;
    padding: var(--spacing-2xl) 0;
    margin-bottom: var(--spacing-2xl);
}

.merchant-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.merchant-hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-full);
    color: var(--btn-primary-bg);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
}

.merchant-hero .hero-badge i {
    font-size: 1em;
}

.merchant-hero .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
}

.merchant-hero .hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Application Container */
.merchant-application-container {
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl) auto;
}

/* Progress Steps */
.merchant-progress-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-2xl);
    position: relative;
}

.merchant-progress-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.merchant-progress-steps .step-indicator {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.merchant-progress-steps .step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--overlay-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.merchant-progress-steps .step-line {
    flex: 1;
    height: 2px;
    background: var(--overlay-medium);
    margin-left: var(--spacing-sm);
    transition: all 0.3s ease;
}

.merchant-progress-steps .step:last-child .step-line {
    display: none;
}

.merchant-progress-steps .step-info {
    margin-top: var(--spacing-sm);
    text-align: center;
}

.merchant-progress-steps .step-title {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Active Step */
.merchant-progress-steps .step.active .step-circle {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: white;
    box-shadow: 0 0 0 4px var(--overlay-medium);
}

.merchant-progress-steps .step.active .step-title {
    color: var(--btn-primary-bg);
    font-weight: 600;
}

/* Completed Step */
.merchant-progress-steps .step.completed .step-circle {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: white;
}

.merchant-progress-steps .step.completed .step-circle::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
}

.merchant-progress-steps .step.completed .step-line {
    background: var(--btn-primary-bg);
}

.merchant-progress-steps .step.completed .step-title {
    color: var(--text-primary);
}

/* Privacy Notice */
.merchant-privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2xl);
}

.merchant-privacy-notice i {
    font-size: 1.5rem;
    color: var(--btn-primary-bg);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.merchant-privacy-notice strong {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: var(--spacing-xs);
}

.merchant-privacy-notice p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Step Container */
.merchant-step {
    display: none;
}

.merchant-step.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

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

/* Step Card */
.merchant-step-card {
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}

.merchant-step-card .step-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--overlay-light);
}

.merchant-step-card .step-header i {
    font-size: 2rem;
    color: var(--btn-primary-bg);
    flex-shrink: 0;
}

.merchant-step-card .step-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.merchant-step-card .step-header p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Document Type Grid */
.document-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.document-type-option {
    cursor: pointer;
}

.document-type-option input[type="radio"] {
    display: none;
}

.document-type-option .option-card {
    background: var(--bg-primary);
    border: 2px solid var(--overlay-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.document-type-option .option-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    transition: all 0.3s ease;
}

.document-type-option .option-icon i {
    font-size: 2rem;
    color: var(--btn-primary-bg);
}

.document-type-option .option-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.document-type-option .option-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.document-type-option .option-check {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--overlay-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.document-type-option .option-check i {
    font-size: 0.875rem;
    color: white;
}

.document-type-option:hover .option-card {
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
}

.document-type-option input[type="radio"]:checked + .option-card {
    border-color: var(--btn-primary-bg);
    background: var(--overlay-light);
}

.document-type-option input[type="radio"]:checked + .option-card .option-icon {
    background: var(--btn-primary-bg);
    box-shadow: 0 0 0 4px var(--overlay-medium);
}

.document-type-option input[type="radio"]:checked + .option-card .option-icon i {
    color: white;
}

.document-type-option input[type="radio"]:checked + .option-card .option-check {
    opacity: 1;
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

/* Upload Container */
.upload-container {
    margin-bottom: var(--spacing-xl);
}

.upload-area {
    display: block;
    cursor: pointer;
    position: relative;
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    background: var(--bg-primary);
    border: 2px dashed var(--overlay-medium);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    min-height: 300px;
}

.upload-area:hover .upload-content,
.upload-area.drag-over .upload-content {
    border-color: var(--btn-primary-bg);
    background: rgba(5, 150, 105, 0.02);
}

.upload-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.upload-icon i {
    font-size: 2.5rem;
    color: var(--btn-primary-bg);
}

.upload-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.upload-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.upload-formats {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.upload-preview {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--overlay-dark) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--spacing-lg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-area:hover .upload-overlay {
    opacity: 1;
}

.upload-success-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--btn-primary-bg);
    border-radius: var(--radius-full);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.upload-success-badge i {
    font-size: 1em;
}

.upload-remove {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--error-color);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.upload-remove:hover {
    background: #ff1a1a;
    transform: scale(1.1);
}

.upload-remove i {
    font-size: 1.125rem;
}

/* Terms Acceptance */
.terms-acceptance {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--overlay-light);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-md);
}

.terms-acceptance .form-checkbox-label {
    background: transparent;
    border: none;
    padding: 0;
}

.terms-acceptance .form-checkbox-label span {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.terms-acceptance a {
    color: var(--btn-primary-bg);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.terms-acceptance a:hover {
    color: var(--btn-primary-hover);
}

/* Step Actions */
.merchant-step-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: space-between;
}

.merchant-step-actions .btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
}

.merchant-step-actions .btn-large:only-child {
    max-width: 100%;
}

.label-optional {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .merchant-hero .hero-title {
        font-size: 2rem;
    }
    
    .merchant-hero .hero-description {
        font-size: 1rem;
    }
    
    .merchant-progress-steps {
        overflow-x: auto;
        padding-bottom: var(--spacing-md);
    }
    
    .merchant-progress-steps .step {
        min-width: 60px;
    }
    
    .merchant-progress-steps .step-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .merchant-progress-steps .step-title {
        font-size: 0.75rem;
    }
    
    .merchant-step-card {
        padding: var(--spacing-xl);
    }
    
    .merchant-step-card .step-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .merchant-step-card .step-header i {
        font-size: 1.5rem;
    }
    
    .merchant-step-card .step-header h3 {
        font-size: 1.25rem;
    }
    
    .document-type-grid {
        grid-template-columns: 1fr;
    }
    
    .upload-content {
        padding: var(--spacing-xl);
        min-height: 250px;
    }
    
    .upload-icon {
        width: 64px;
        height: 64px;
    }
    
    .upload-icon i {
        font-size: 2rem;
    }
    
    .merchant-step-actions {
        flex-direction: column;
    }
    
    .merchant-step-actions .btn-large {
        width: 100%;
    }
}

/* ============================================
   Selling Page (Redesigned - Compact & Clean)
   ============================================ */

.selling-header {
    margin-bottom: var(--spacing-xl);
}

.selling-header-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.selling-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.selling-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Selling Categories Grid */
.selling-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.selling-category-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
}

.selling-category-card:hover {
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--overlay-medium);
}

/* Category Icon */
.selling-category-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    color: var(--btn-primary-bg);
    font-size: 1.25rem;
}

.selling-category-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Category Info */
.selling-category-info {
    flex: 1;
    min-width: 0;
}

.selling-category-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.4;
}

.selling-category-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.selling-category-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selling-category-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.selling-category-discount,
.selling-category-tax {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all var(--transition-base);
}

.selling-category-discount {
    background: rgba(5, 150, 105, 0.1);
    color: var(--btn-primary-bg);
    border: 1px solid rgba(5, 150, 105, 0.2);
}

.selling-category-tax {
    background: var(--overlay-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.selling-category-discount i,
.selling-category-tax i {
    font-size: 0.75rem;
}

.selling-category-card:hover .selling-category-discount {
    background: rgba(5, 150, 105, 0.15);
    border-color: rgba(5, 150, 105, 0.3);
}

.selling-category-card:hover .selling-category-tax {
    background: var(--overlay-medium);
}

/* Arrow Icon */
.selling-category-arrow {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.selling-category-card:hover .selling-category-arrow {
    color: var(--btn-primary-bg);
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .selling-title {
        font-size: 1.5rem;
    }
    
    .selling-subtitle {
        font-size: 0.875rem;
    }
    
    .selling-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .selling-category-card {
        padding: var(--spacing-sm);
    }
    
    .selling-category-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }
    
    .selling-category-name {
        font-size: 0.9375rem;
    }
    
    .selling-category-meta {
        gap: var(--spacing-xs);
    }
    
    .selling-category-description {
        font-size: 0.8125rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .selling-category-badges {
        gap: 6px;
    }
    
    .selling-category-discount,
    .selling-category-tax {
        font-size: 0.75rem;
        padding: 3px 8px;
    }
}

/* ========================================
   ADMIN - GAME SHOW PAGE
   ======================================== */

/* Info Cards */
.info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.info-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--overlay-light);
}

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

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

.info-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.info-value {
    font-size: 1rem;
    color: var(--text-primary);
}

.info-value code {
    background: var(--overlay-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Game Preview Image */
.game-preview-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
    border: 1px solid var(--overlay-medium);
}

/* Icon Preview */
.icon-preview {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.icon-preview i {
    font-size: 2rem;
    color: var(--btn-primary-bg);
}

.icon-preview code {
    font-size: 0.875rem;
    background: var(--overlay-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* Section Header Inline */
.section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.section-header-inline .section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Platform Name Cell */
.platform-name-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.platform-name-cell i {
    font-size: 1.25rem;
    color: var(--btn-primary-bg);
}

.platform-name-cell span {
    color: var(--text-primary);
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .info-card {
        padding: var(--spacing-md);
    }
    
    .game-preview-image {
        width: 100px;
        height: 100px;
    }
    
    .icon-preview i {
        font-size: 1.5rem;
    }
    
    .section-header-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .header-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .header-actions .btn-primary,
    .header-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Browse Page Grid Layout ==================== */
/* Separate from my-listings compact list design */

.browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Gaming browse grid - responsive columns */
.browse-grid:has(.gaming-two-column) {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 1024px) {
    .browse-grid:has(.gaming-two-column) {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .browse-grid:has(.gaming-two-column) {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .browse-grid:has(.gaming-two-column) {
        grid-template-columns: 1fr;
    }
}

.browse-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Seller unavailable card styling */
.browse-card.seller-unavailable {
    opacity: 0.7;
}

.browse-card.seller-unavailable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 1;
}

.browse-card.seller-unavailable .browse-card-icon,
.browse-card.seller-unavailable .browse-seller-avatar {
    filter: grayscale(50%);
}

.browse-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--btn-primary-bg), var(--btn-primary-hover));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.browse-card:hover::before {
    opacity: 1;
}

.browse-card.seller-unavailable:hover::before {
    background: linear-gradient(90deg, var(--error-color), #dc2626);
}

.browse-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--btn-primary-bg);
}

.browse-card.seller-unavailable:hover {
    border-color: var(--error-color);
}

.browse-card-icon {
    width: 56px;
    height: 56px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    border-radius: 50%;
    margin-bottom: var(--spacing-sm);
    position: relative;
    box-shadow: 0 2px 8px var(--btn-primary-bg);
}

.browse-card-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--btn-primary-bg);
    opacity: 0.3;
}

.browse-card-icon i {
    font-size: 1.75rem;
    color: white;
    position: relative;
    z-index: 1;
}

.browse-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

/* Remove background when image is present */
.browse-card-icon:has(img) {
    background: transparent;
}

.browse-card-icon:has(img)::after {
    display: none;
}

.browse-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.verified-merchant-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.25rem;
    color: var(--info-color);
    font-size: 1.2em;
    animation: pulse 2s ease-in-out infinite;
}

[dir="rtl"] .verified-merchant-badge {
    margin-left: 0;
    margin-right: 0.25rem;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.browse-card-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: var(--spacing-xs) 0;
    flex-wrap: wrap;
}

.browse-feature-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--overlay-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    cursor: help;
}

.browse-feature-tag:hover {
    transform: scale(1.1);
    background: var(--overlay-medium);
}

.browse-feature-tag i {
    font-size: 0.875rem;
    color: var(--btn-primary-bg);
}

.browse-feature-tag.verified {
    color: var(--success-color);
    border-color: var(--success-color);
    background: var(--overlay-light);
}

.browse-feature-tag.verified i {
    color: var(--success-color);
}

.browse-feature-tag.instant-delivery {
    color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    background: var(--overlay-light);
}

.browse-feature-tag.instant-delivery i {
    color: var(--btn-primary-bg);
}

.browse-feature-tag.manual-delivery {
    color: var(--warning-color);
    border-color: var(--warning-color);
    background: var(--overlay-light);
}

.browse-feature-tag.manual-delivery i {
    color: var(--warning-color);
}

/* Promotional Title - Below features */
.browse-promotional-title {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--warning-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    position: relative;
    overflow: hidden;
}

/* Animated gradient border below the promotional title */
.browse-promotional-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--warning-color) 25%, 
        var(--warning-color) 50%, 
        var(--warning-color) 75%, 
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
}

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

.browse-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--btn-primary-bg);
    margin: var(--spacing-sm) 0;
}

.browse-card-seller {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--overlay-light);
    border-radius: var(--radius-full);
    width: 100%;
    justify-content: center;
}

.browse-seller-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-primary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    position: relative;
}

.browse-seller-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.browse-seller-avatar-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

[dir="rtl"] .browse-seller-avatar-badge {
    right: auto;
    left: -2px;
}

.browse-seller-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.browse-card-actions {
    display: flex;
    gap: var(--spacing-xs);
    width: 100%;
    margin-top: auto;
    flex-wrap: wrap-reverse;
    justify-content: center;
}

.browse-card-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    justify-content: center;
}

/* When only one button (e.g., guest login), don't stretch too wide */
.browse-card-actions .btn:only-child {
    flex: 0 1 auto;
    min-width: 120px;
    max-width: 180px;
}

/* Clickable span button style for guest login */
.browse-card-actions .browse-card-login-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ========================================
   GAMING TWO-COLUMN LAYOUT
   ======================================== */

.browse-card.gaming-two-column {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-lg);
    align-items: stretch;
    text-align: left;
    padding: var(--spacing-lg);
}

.browse-card-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.browse-card-left .browse-card-title {
    margin: 0;
    text-align: left;
}

.browse-card-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Promotional badge inline (below description) */
.browse-promotional-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(255, 159, 10, 0.15) 0%, rgba(255, 159, 10, 0.05) 100%);
    border: 1px solid rgba(255, 159, 10, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    color: var(--warning-color);
    width: fit-content;
}

.browse-promotional-badge-inline i {
    font-size: 0.875rem;
}

.browse-card-left .browse-card-features {
    justify-content: flex-start;
    margin: 0;
}

.browse-card-left .browse-card-seller {
    margin: var(--spacing-sm) 0 0 0;
}

.browse-card-left .browse-card-price {
    margin: auto 0 0 0;
}

.browse-card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 140px;
}

.browse-card-icon-large {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: 0 4px 16px var(--btn-primary-bg);
    overflow: hidden;
}

.browse-card-icon-large::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--btn-primary-bg);
    opacity: 0.3;
}

.browse-card-icon-large i {
    font-size: 3rem;
    color: white;
    position: relative;
    z-index: 1;
}

.browse-card-icon-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.browse-card-icon-large:has(img) {
    background: transparent;
    box-shadow: 0 4px 16px var(--overlay-light);
}

.browse-card-icon-large:has(img)::after {
    display: none;
}

.gaming-two-column .browse-card-actions {
    flex-direction: column;
    margin-top: auto;
}

.gaming-two-column .browse-card-actions .btn-block {
    width: 100%;
}

/* Responsive Gaming Two-Column */
@media (max-width: 1024px) {
    .browse-card.gaming-two-column {
        padding: var(--spacing-md);
    }
    
    .browse-card-right {
        min-width: 120px;
    }
    
    .browse-card-icon-large {
        width: 100px;
        height: 100px;
    }
    
    .browse-card-icon-large i {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .browse-card.gaming-two-column {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .browse-card-left .browse-card-title {
        font-size: 1rem;
    }
    
    .browse-card-description {
        font-size: 0.8125rem;
    }
    
    .browse-card-right {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }
    
    .browse-card-icon-large {
        width: 70px;
        height: 70px;
    }
    
    .browse-card-icon-large i {
        font-size: 1.75rem;
    }
    
    .gaming-two-column .browse-card-actions {
        flex-direction: column;
        flex: 1;
        gap: var(--spacing-sm);
    }
    
    .gaming-two-column .browse-card-actions .btn {
        width: 100%;
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
        justify-content: center;
        display: flex !important;
        visibility: visible !important;
    }
    
    .gaming-two-column .browse-card-actions .btn span {
        display: inline !important;
    }
    
    .browse-promotional-badge-inline {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Promotional Badge for Browse Cards */
.browse-card.promotional-listing .browse-card-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed var(--warning-color);
    animation: rotate 10s linear infinite;
}

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

.browse-promotional-badge {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    background: var(--warning-color);
    color: var(--bg-primary);
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4);
}

.browse-promotional-badge i {
    font-size: 0.7rem;
}

/* Promoted Badge - Appears below promotional badge or at top-right */
.browse-promoted-badge {
    position: absolute;
    top: 12px;
    right: -8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 
        0 4px 12px rgba(245, 158, 11, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%);
    animation: promotedPulse 2s ease-in-out infinite;
}

[dir="rtl"] .browse-promoted-badge {
    right: auto;
    left: -8px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.browse-promoted-badge::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 6px 0;
    border-color: transparent #92400e transparent transparent;
    z-index: -1;
}

[dir="rtl"] .browse-promoted-badge::before {
    right: auto;
    left: 0;
    border-width: 0 0 6px 8px;
    border-color: transparent transparent transparent #92400e;
}

.browse-promoted-badge i {
    font-size: 0.875rem;
    animation: megaphoneBounce 1s ease-in-out infinite;
}

@keyframes megaphoneBounce {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* When card has promotional title, move promoted badge down */
.browse-card.promotional-listing .browse-promoted-badge {
    top: 40px;
}

/* Promoted listings get animated gradient border effect */
.browse-card.promoted-listing {
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    background-clip: padding-box;
    overflow: visible !important;
}

/* Animated gradient border using background */
.browse-card.promoted-listing {
    background: 
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        linear-gradient(
            135deg,
            #f59e0b,
            #ef4444,
            #8b5cf6,
            #3b82f6,
            #f59e0b
        ) border-box;
    background-size: 100% 100%, 400% 400%;
    animation: promotedGradient 8s ease infinite;
    box-shadow: 
        0 0 30px rgba(245, 158, 11, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.browse-card.promoted-listing:hover {
    transform: translateY(-6px) scale(1.02);
    animation-duration: 4s;
    box-shadow: 
        0 0 40px rgba(245, 158, 11, 0.5),
        0 12px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Animated gradient keyframes */
@keyframes promotedGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Pulse animation for promoted badge */
.browse-promoted-badge {
    animation: promotedPulse 2s ease-in-out infinite;
}

@keyframes promotedPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(5, 150, 105, 0.6);
    }
}

/* Shimmer effect overlay for promoted cards */
.browse-card.promoted-listing .browse-card-icon {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(245, 158, 11, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.browse-card.promoted-listing .browse-card-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(245, 158, 11, 0.3),
        transparent
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

/* Ensure content inside promoted card doesn't overflow */
.browse-card.promoted-listing > * {
    position: relative;
    z-index: 1;
}

.browse-card.promoted-listing .browse-card-title {
    color: var(--text-primary);
    text-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    font-weight: 700;
}

/* Price badge enhancement for promoted listings */
.browse-card.promoted-listing .browse-card-price {
    background: var(--btn-secondary-bg);
    color: white !important;
    padding: 8px 16px;
    border-radius: var(--radius-md);
  
    font-size: 1.375rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.5px;
}

.browse-card.promoted-listing .browse-card-price > * {
    color: white !important;
}

.browse-card.promoted-listing .browse-card-price span:first-child {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1rem !important;
}

.browse-card.promoted-listing .browse-card-price span:last-child {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    backdrop-filter: blur(4px);
}

@keyframes priceGlow {
    from {
        box-shadow: 
            0 4px 16px rgba(5, 150, 105, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    to {
        box-shadow: 
            0 6px 24px rgba(5, 150, 105, 0.6),
            0 4px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transform: scale(1.02);
    }
}

/* Responsive Grid */
@media (max-width: 1400px) {
    .browse-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 1024px) {
    .browse-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .browse-card-icon {
        width: 48px;
        height: 48px;
    }
    
    .browse-card-icon i {
        font-size: 1.5rem;
    }
    
    .browse-card-title {
        font-size: 0.875rem;
    }
}

/* Tablet - reduce button size */
@media (max-width: 1024px) {
    .browse-card-actions .btn {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Medium tablet - more compact */
@media (max-width: 900px) {
    .browse-card-actions {
        gap: 0.375rem;
    }
    
    .browse-card-actions .btn {
        font-size: 0.7rem;
        padding: 0.5rem 0.625rem;
        min-width: 44px;
    }
}

/* Mobile - vertical stacking with full visible buttons */
@media (max-width: 768px) {
    .browse-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    /* Exception: Social Media Marketplace - 2 columns on mobile */
    body:has([action*="marketplace/social-media"]) .browse-grid,
    body[data-route="marketplace.social-media"] .browse-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    
    .browse-card {
        padding: var(--spacing-sm);
    }
    
    .browse-card-icon {
        width: 44px;
        height: 44px;
    }
    
    .browse-card-icon i {
        font-size: 1.25rem;
    }
    
    .browse-card-title {
        font-size: 0.875rem;
    }
    
    .browse-card-price {
        font-size: 1.125rem;
    }
    
    .browse-card-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .browse-card-actions .btn {
        flex: 1 1 auto;
        width: 100%;
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
        justify-content: center;
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Single button on mobile (guest) */
    .browse-card-actions .btn:only-child {
        max-width: 100%;
        width: 100%;
    }
    
    .browse-card-actions .btn span {
        display: inline !important;
    }
    
    .browse-card-actions .btn i {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .browse-grid {
        grid-template-columns: 1fr;
    }
    
    /* Exception: Social Media Marketplace - 2 columns on mobile */
    body:has([action*="marketplace/social-media"]) .browse-grid,
    body[data-route="marketplace.social-media"] .browse-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }
}








/* ============================================
   TABS CONTAINER - Orders & Similar Pages
   ============================================ */

.tabs-container {
    background: var(--bg-secondary);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tabs-header {
    display: flex;
    gap: 0;
    background: var(--bg-primary);
    border-bottom: 2px solid var(--overlay-medium);
    padding: 0;
    width: 100%;
    flex-shrink: 0;
}

.tab-button {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-right: 1px solid var(--overlay-light);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    position: relative;
}

.tab-button:last-child {
    border-right: none;
}

.tab-button:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.tab-button.active {
    color: var(--btn-primary-bg);
    background: var(--bg-secondary);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--btn-primary-bg);
}

.tab-button i {
    font-size: 1em;
}

.tab-badge {
    background: var(--overlay-medium);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

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

.tabs-content {
    padding: var(--spacing-lg);
    width: 100%;
    flex: 1;
}

/* Ensure listings grid inside tabs takes full width */
.tabs-content .listings-grid {
    margin: 0;
    width: 100%;
}

.tabs-content .listing-card {
    width: 100%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .tabs-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-button {
        flex: 0 0 auto;
        min-width: 120px;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }
    
    .tab-button span:not(.tab-badge) {
        display: none;
    }
    
    .tabs-content {
        padding: var(--spacing-md);
    }
}



/* Listing Card Username/Title */
.listing-card-username,
.listing-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--line-height-tight);
}

/* Hidden state for filtering */
.hidden {
    display: none !important;
}

/* Responsive Listing Card Styles */
@media (max-width: 768px) {
    .listing-card {
        padding: var(--spacing-lg);
    }
    
    .listing-card-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .listing-card-icon {
        width: 48px;
        height: 48px;
        align-self: flex-start;
    }
    
    .listing-card-icon i {
        font-size: 20px;
    }
    
    .listing-card-body {
        width: 100%;
        min-width: 0;
    }
    
    .listing-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .listing-card-top > div:first-child {
        width: 100%;
    }
    
    .listing-username {
        font-size: var(--font-size-base);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    
    .listing-description {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    
    .listing-card-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        width: 100%;
    }
    
    .listing-price {
        font-size: var(--font-size-xl);
    }
    
    .listing-card-actions {
        display: flex !important;
        gap: var(--spacing-sm);
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    
    .listing-card-actions .btn-sm {
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .listing-card-actions .btn-sm i {
        font-size: 1.25rem;
        margin: 0;
    }
    
    .listing-card-actions .form-inline {
        display: flex !important;
        margin: 0;
    }
    
    .listing-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .gift-card-quantity {
        font-size: var(--font-size-xs);
    }
    
    .listing-card-meta-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* Additional Mobile Optimizations */
@media (max-width: 480px) {
    .listing-card {
        padding: var(--spacing-md);
    }
    
    .listing-card-content {
        gap: var(--spacing-sm);
    }
    
    .listing-card-icon {
        width: 40px;
        height: 40px;
    }
    
    .listing-card-icon i {
        font-size: 18px;
    }
    
    .listing-username {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .listing-card-meta {
        font-size: 0.75rem;
        gap: var(--spacing-xs);
    }
    
    .listing-card-meta > span {
        font-size: 0.7rem;
    }
    
    .listing-description {
        font-size: 0.8125rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin: var(--spacing-xs) 0;
    }
    
    .listing-price {
        font-size: var(--font-size-lg);
    }
    
    .listing-stats {
        gap: var(--spacing-xs);
    }
    
    .listing-stat {
        font-size: 0.65rem;
    }
}

/* Status Badge Positioning */
.listing-status {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.listing-status-active {
    background: var(--overlay-light);
    color: var(--success-color);
}

.listing-status-sold {
    background: var(--overlay-light);
    color: var(--info-color);
}

.listing-status-inactive,
.listing-status-pending {
    background: var(--overlay-light);
    color: var(--error-color);
}

/* Light Mode Adjustments for Listing Cards */
[data-theme="light"] .listing-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .listing-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--btn-primary-bg);
}

[data-theme="light"] .listing-card-icon {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="light"] .listing-card:hover .listing-card-icon {
    background: var(--bg-tertiary);
}

[data-theme="light"] .listing-status-active {
    background: rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .listing-status-sold {
    background: var(--overlay-medium);
}

[data-theme="light"] .listing-status-inactive,
[data-theme="light"] .listing-status-pending {
    background: rgba(239, 68, 68, 0.15);
}

/* Ensure proper spacing for additional mobile screens */
@media (max-width: 480px) {
    
    .listing-card .btn-sm {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .listing-card-username,
    .listing-card-title {
        font-size: var(--font-size-base);
    }
    
    .listing-card-meta {
        font-size: var(--font-size-xs);
    }
}

/* Feature Input Groups */
.feature-input-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.feature-input-group .form-input {
    flex: 1;
}

/* Offers Enabled Badge */
.browse-feature-tag.offers-enabled {
    background: var(--overlay-light);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-bg);
}

.browse-feature-tag.offers-enabled:hover {
    background: var(--overlay-medium);
}

/* Listing Details Promotional Badge */
.listing-details-header-card {
    position: relative;
}

.listing-details-header-card.promotional-listing {
    border: 2px solid var(--btn-primary-bg);
    box-shadow: 0 0 20px var(--overlay-medium);
}

.listing-promotional-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--btn-primary-bg);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px var(--btn-primary-bg);
    z-index: 2;
}

.listing-promotional-badge i {
    font-size: 1em;
}

@media (max-width: 768px) {
    .listing-promotional-badge {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ========================================
   Service-Specific Components
======================================== */

/* Service Options List */
.service-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.service-option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.service-option-card:hover {
    border-color: var(--btn-primary-bg);
    box-shadow: var(--shadow-md);
}

.service-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.service-option-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.service-option-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.service-option-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    margin-top: var(--spacing-xs);
}

.service-option-badge i {
    font-size: 0.9em;
}

.service-option-price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--btn-primary-bg);
    white-space: nowrap;
    margin-left: var(--spacing-lg);
}

/* Service Request Fields Display */
.service-request-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.request-field-card {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.request-field-card:hover {
    border-color: var(--btn-primary-bg);
    box-shadow: var(--shadow-sm);
}

.request-field-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.request-field-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--btn-primary-bg);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
}

.request-field-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.request-field-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.optional-badge {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--overlay-light);
    color: var(--info-color);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.request-field-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--overlay-light);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: var(--font-medium);
}

.request-field-type-badge i {
    font-size: 0.9em;
}

.request-field-placeholder {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--overlay-light);
    border-left: 3px solid var(--btn-primary-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
}

.request-field-placeholder i {
    color: var(--btn-primary-bg);
    margin-top: 2px;
    flex-shrink: 0;
}

.request-field-options {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
}

.request-field-options strong {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.request-field-options ul {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xs) 0 0 0;
}

.request-field-options li {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    position: relative;
    padding-left: var(--spacing-lg);
}

.request-field-options li:before {
    content: '•';
    color: var(--btn-primary-bg);
    font-size: 1.2em;
    position: absolute;
    left: 0;
}

.section-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: calc(var(--spacing-sm) * -1) 0 var(--spacing-lg) 0;
    line-height: var(--line-height-relaxed);
}

/* Custom Fields Display */
.custom-fields-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.custom-field-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.custom-field-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.required-badge {
    display: inline-flex;
    padding: 2px 6px;
    background: var(--overlay-light);
    color: var(--error-color);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.custom-field-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.custom-field-image {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.field-unit {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

/* Price Info in Sidebar */
.price-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

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

.price-info-item i {
    color: var(--btn-primary-bg);
    font-size: 1em;
}

/* Guarantee Info Card */
.guarantee-info-card {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--overlay-light), var(--overlay-light));
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-lg);
    text-align: center;
}

.guarantee-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    background: var(--btn-primary-bg);
    border-radius: var(--radius-full);
}

.guarantee-icon i {
    font-size: 1.5rem;
    color: white;
}

.guarantee-info-card h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.guarantee-info-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* Guarantee Badge in Browse */
.guarantee-badge {
    background: var(--overlay-light) !important;
    color: var(--btn-primary-bg) !important;
    border: 1px solid var(--overlay-medium);
}

.guarantee-badge i {
    color: var(--btn-primary-bg);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .service-option-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .service-option-price {
        margin-left: 0;
        font-size: var(--font-size-lg);
    }
    
    .custom-fields-display {
        grid-template-columns: 1fr;
    }
    
    .request-field-header {
        gap: var(--spacing-sm);
    }
    
    .request-field-number {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }
    
    .request-field-label {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .service-option-card {
        padding: var(--spacing-md);
    }
    
    .service-option-title {
        font-size: var(--font-size-base);
    }
    
    .guarantee-info-card {
        padding: var(--spacing-md);
    }
    
    .guarantee-icon {
        width: 48px;
        height: 48px;
    }
    
    .guarantee-icon i {
        font-size: 1.25rem;
    }
    
    .request-field-card {
        padding: var(--spacing-md);
    }
    
    .request-field-number {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-sm);
    }
}

/* Order Status Badges */
.status-badge.cancellation_requested {
    background: var(--overlay-light);
    color: var(--warning-color);
    border: 1px solid var(--overlay-medium);
}

.status-badge.processing {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
    border: 1px solid var(--overlay-medium);
}

.status-badge.completed {
    background: var(--overlay-light);
    color: var(--success-color);
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.status-badge.cancelled {
    background: var(--overlay-light);
    color: var(--error-color);
    border: 1px solid var(--overlay-medium);
}

.status-badge.pending {
    background: rgba(160, 160, 160, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(160, 160, 160, 0.2);
}

/* Service Order Details */
.service-details-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.service-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.service-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.service-detail-item label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.service-detail-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

/* Promotion Management Styles */
.promotion-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.promotion-badge-preview {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 2px solid var(--overlay-strong);
}

.promotion-cell i {
    font-size: 1.2em;
    color: var(--btn-primary-bg);
}

/* ========================================
   USER PROMOTION PURCHASE PAGE
   ======================================== */

/* Active Promotions Section */
.active-promotions-section {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.active-promotions-section .section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
}

.active-promotions-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.active-promotions-section .section-title i {
    color: var(--btn-primary-bg);
    font-size: 1.2em;
}

.section-badge {
    background: var(--btn-primary-bg);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
}

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

.active-promotion-card {
    background: rgba(5, 150, 105, 0.03);
    border: 2px solid var(--overlay-medium);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.active-promotion-card:hover {
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--overlay-medium);
}

.promotion-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-bottom: 1px solid var(--overlay-light);
}

.promotion-type-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    background: var(--overlay-medium);
    color: var(--text-primary);
}

.promotion-type-badge i {
    font-size: 1em;
}

.promotion-type-badge.social_media {
    background: rgba(225, 48, 108, 0.1);
    color: var(--error-color);
}

.promotion-type-badge.gaming {
    background: rgba(88, 101, 242, 0.1);
    color: var(--info-color);
}

.promotion-type-badge.service {
    background: rgba(0, 168, 255, 0.1);
    color: var(--info-color);
}

.promotion-type-badge.account {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
}

.promotion-status-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
}

.promotion-status-badge.active {
    background: var(--overlay-light);
    color: var(--success-color);
}

.promotion-status-badge i {
    font-size: 0.9em;
}

.promotion-card-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.promotion-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

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

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

.listing-name i {
    color: var(--btn-primary-bg);
}

.promotion-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.stat-value.expires {
    color: var(--warning-color);
}

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

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--overlay-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--btn-primary-bg), var(--btn-primary-hover));
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.progress-text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
}

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

.promotion-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--btn-primary-bg);
}

/* Promotion Tabs */
.promotion-tabs {
    margin-top: var(--spacing-2xl);
}

.tab-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tab-buttons::-webkit-scrollbar {
    display: none;
}

.tab-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: var(--transition-base);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab-button i {
    font-size: 1.2em;
}

.tab-button:hover {
    color: var(--text-primary);
}

.tab-button.active {
    color: var(--btn-primary-bg);
    border-bottom-color: var(--btn-primary-bg);
}

.tab-count {
    background: var(--overlay-medium);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
}

.tab-button.active .tab-count {
    background: var(--overlay-medium);
    color: var(--btn-primary-bg);
}

/* Tab Content */
.tab-content {
    display: none;
}

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

/* Promotion Form */
.promotion-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Promotion Options Grid */
.promotion-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.promotion-option {
    cursor: pointer;
    display: block;
}

.promotion-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.promotion-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.promotion-option:hover .promotion-card {
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--overlay-medium);
}

.promotion-option input[type="radio"]:checked ~ .promotion-card {
    border-color: var(--btn-primary-bg);
    background: var(--overlay-light);
    box-shadow: 0 0 0 3px var(--overlay-light);
}

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

.promotion-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.promotion-price {
    background: var(--btn-primary-bg);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    white-space: nowrap;
}

.promotion-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: 0;
}

/* Promotion Summary */
.promotion-summary {
    background: var(--overlay-light);
    border: 2px solid var(--overlay-medium);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.summary-row span:last-child {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.summary-total {
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--overlay-medium);
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.summary-total span:last-child {
    color: var(--btn-primary-bg);
    font-size: var(--font-size-xl);
}

/* Account Info Section */
.account-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

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

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    color: white;
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
}

.account-details h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .active-promotions-grid {
        grid-template-columns: 1fr;
    }
    
    .promotion-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .promotion-card-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .tab-buttons {
        gap: var(--spacing-sm);
    }
    
    .tab-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .tab-button i {
        font-size: 1em;
    }
    
    .promotion-options {
        grid-template-columns: 1fr;
    }
    
    .account-info {
        flex-direction: column;
        text-align: center;
    }
    
    .summary-row {
        font-size: var(--font-size-sm);
    }
    
    .summary-total {
        font-size: var(--font-size-base);
    }
    
    .summary-total span:last-child {
        font-size: var(--font-size-lg);
    }
}

/* ========================================
   CHAT SYSTEM STYLES
   ======================================== */

/* Chat Warning Alert */
.chat-warning {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.1) 0%, var(--overlay-light) 100%);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.chat-warning .alert-icon {
    font-size: 1.5rem;
    color: var(--warning-color);
    flex-shrink: 0;
}

.chat-warning .alert-content {
    flex: 1;
}

.chat-warning .alert-content strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--warning-color);
    font-size: var(--font-size-lg);
}

.chat-warning .alert-content p {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.chat-rules-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 0;
}

.chat-rules-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.chat-rules-list li i {
    color: var(--success-color);
    font-size: 0.875em;
}

/* Conversations List */
.conversations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    position: relative;
}

.conversation-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--btn-primary-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.conversation-item.unread {
    background: var(--overlay-light);
    border-color: var(--btn-primary-bg);
}

.conversation-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.conversation-avatar img,
.conversation-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-avatar .avatar-placeholder {
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    color: white;
}

.conversation-avatar .unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--error-color);
    color: white;
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px var(--overlay-light);
}

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

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

.conversation-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.conversation-time {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.conversation-preview {
    display: flex;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.conversation-preview .message-sender {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.conversation-preview .message-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-listing-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 8px;
    background: var(--overlay-light);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--btn-primary-bg);
}

.conversation-listing-tag i {
    font-size: 0.875em;
}

.conversation-arrow {
    color: var(--text-tertiary);
    font-size: 1.25rem;
}

/* Conversation Header Card */
.conversation-header-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

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

.conversation-avatar-large {
    width: 80px;
    height: 80px;
}

.conversation-avatar-large img,
.conversation-avatar-large .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-avatar-large .avatar-placeholder {
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: var(--font-bold);
    color: white;
}

.conversation-username {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.conversation-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.conversation-listing-info {
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
}

.listing-info-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--btn-primary-bg);
    margin-bottom: var(--spacing-sm);
}

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

.listing-info-content strong {
    color: var(--text-primary);
}

/* Messages Container */
.messages-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

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

.message-item {
    display: flex;
    gap: var(--spacing-sm);
}

.message-item.sent {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.message-avatar img,
.message-avatar .avatar-placeholder-sm {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.message-avatar .avatar-placeholder-sm {
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: var(--font-bold);
    color: white;
}

.message-content {
    flex: 1;
    max-width: 70%;
}

.message-item.sent .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.message-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.message-item.sent .message-header {
    flex-direction: row-reverse;
}

.message-sender-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.message-bubble {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    word-wrap: break-word;
    line-height: 1.5;
}

.message-item.sent .message-bubble {
    background: var(--btn-primary-bg);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

.message-item.received .message-bubble {
    border-bottom-left-radius: var(--radius-sm);
}

/* Message Input */
.message-input-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.message-input-wrapper {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

.message-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    resize: none;
    min-height: 44px;
    max-height: 120px;
    font-family: inherit;
    transition: all var(--transition-base);
}

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

.btn-send {
    flex-shrink: 0;
    min-width: 120px;
}

/* Admin Chat Styles */
.conversation-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.detail-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.detail-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

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

.user-avatar-sm,
.user-avatar-placeholder-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-avatar-md,
.user-avatar-placeholder-md {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-avatar-placeholder-sm,
.user-avatar-placeholder-md {
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    color: white;
}

.user-avatar-placeholder-sm {
    font-size: 1rem;
}

.user-avatar-placeholder-md {
    font-size: 1.5rem;
}

.user-name {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.user-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.admin-messages-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.admin-message-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.admin-message-item.buyer {
    border-left: 3px solid var(--info-color);
}

.admin-message-item.seller {
    border-left: 3px solid var(--success-color);
}

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

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

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

.message-content-admin {
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Responsive Chat Styles */
@media (max-width: 768px) {
    .conversation-item {
        padding: var(--spacing-md);
    }
    
    .conversation-avatar {
        width: 50px;
        height: 50px;
    }
    
    .conversation-name {
        font-size: var(--font-size-base);
    }
    
    .conversation-header-card {
        padding: var(--spacing-md);
    }
    
    .conversation-user-info {
        flex-direction: column;
        text-align: center;
    }
    
    .conversation-listing-info {
        padding: var(--spacing-sm);
    }
    
    .listing-info-content {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .messages-container {
        min-height: 300px;
        max-height: 400px;
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .message-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-send {
        width: 100%;
    }
    
    .conversation-details-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   macOS Services Section (Finder Style)
   ======================================== */
.macos-services-wrapper {
    margin-top: var(--spacing-2xl);
    padding: 0;
}

.macos-services-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.macos-subtitle {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--btn-primary-bg);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-sm);
}

.macos-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* macOS Window Container */
.macos-window {
    background: rgba(30, 30, 30, 0.95);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px var(--overlay-dark),
                0 0 0 0.5px var(--overlay-medium);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

/* macOS Title Bar */
.macos-titlebar {
    height: 52px;
    background: rgba(40, 40, 40, 0.95);
    border-bottom: 0.5px solid var(--overlay-medium);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-lg);
}

.macos-traffic-lights {
    display: flex;
    gap: 8px;
    align-items: center;
}

.traffic-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
}

.traffic-close {
    background: #ff5f57;
}

.traffic-minimize {
    background: #ffbd2e;
}

.traffic-maximize {
    background: #28ca42;
}

.macos-window-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.macos-titlebar-spacer {
    flex: 1;
}

/* macOS Content Wrapper */
.macos-content-wrapper {
    display: flex;
    min-height: 500px;
}

/* macOS Sidebar (Finder Style) */
.macos-sidebar {
    width: 220px;
    background: rgba(20, 20, 20, 0.6);
    border-right: 0.5px solid var(--overlay-light);
    padding: var(--spacing-md) 0;
    flex-shrink: 0;
}

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

.macos-sidebar-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.macos-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px var(--spacing-md);
    margin-bottom: 2px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

.macos-sidebar-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.macos-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.macos-sidebar-item.active {
    background: rgba(5, 150, 105, 0.25);
    color: var(--white);
}

.macos-sidebar-item.active i {
    color: var(--btn-primary-bg);
}

/* macOS Main Content */
.macos-main-content {
    flex: 1;
    background: rgba(25, 25, 25, 0.4);
    padding: var(--spacing-2xl);
    position: relative;
    overflow: hidden;
}

.macos-panel {
    display: none;
    animation: macFadeIn 0.3s ease-out;
}

.macos-panel.active {
    display: block;
}

@keyframes macFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.macos-panel-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.macos-panel-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-xl);
    background: linear-gradient(135deg, var(--overlay-medium) 0%, var(--overlay-light) 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px var(--overlay-medium),
                inset 0 1px 0 var(--overlay-medium);
}

.macos-panel-icon i {
    font-size: 4rem;
    color: var(--btn-primary-bg);
}

.macos-panel-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.macos-panel-description {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
}

.macos-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 480px;
    margin: 0 auto;
}

.macos-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--overlay-light);
    border: 0.5px solid var(--overlay-light);
    border-radius: 10px;
    transition: all 0.2s ease;
    text-align: left;
}

.macos-feature:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--btn-primary-bg);
    transform: translateX(4px);
}

.macos-feature i {
    font-size: 1.25rem;
    color: var(--btn-primary-bg);
    width: 24px;
    text-align: center;
}

.macos-feature span {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .macos-title {
        font-size: 2rem;
    }
    
    .macos-sidebar {
        width: 180px;
    }
    
    .macos-main-content {
        padding: var(--spacing-xl);
    }
    
    .macos-panel-icon {
        width: 100px;
        height: 100px;
    }
    
    .macos-panel-icon i {
        font-size: 3rem;
    }
    
    .macos-panel-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .macos-services-wrapper {
        margin-top: var(--spacing-xl);
    }
    
    .macos-title {
        font-size: 1.75rem;
    }
    
    .macos-window {
        border-radius: 8px;
    }
    
    .macos-titlebar {
        height: 44px;
        padding: 0 var(--spacing-md);
    }
    
    .traffic-light {
        width: 10px;
        height: 10px;
    }
    
    .macos-content-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    
    .macos-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 0.5px solid var(--overlay-light);
        padding: var(--spacing-sm) 0;
    }
    
    .macos-sidebar-section {
        display: flex;
        gap: var(--spacing-xs);
        overflow-x: auto;
        padding: 0 var(--spacing-sm);
    }
    
    .macos-sidebar-title {
        display: none;
    }
    
    .macos-sidebar-item {
        min-width: auto;
        padding: var(--spacing-sm) var(--spacing-md);
        white-space: nowrap;
        margin-bottom: 0;
    }
    
    .macos-main-content {
        padding: var(--spacing-lg);
    }
    
    .macos-panel-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }
    
    .macos-panel-icon i {
        font-size: 2.5rem;
    }
    
    .macos-panel-title {
        font-size: 1.25rem;
    }
    
    .macos-panel-description {
        font-size: 0.9375rem;
    }
    
    .macos-feature {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .macos-feature i {
        font-size: 1.125rem;
    }
    
    .macos-feature span {
        font-size: 0.875rem;
    }
}

/* ========================================
   SPACE TRAVEL SERVICES SIDEBAR
   ======================================== */

.space-services-container {
    margin-top: var(--spacing-2xl);
    display: flex;
    gap: var(--spacing-lg);
    width: 100%;
    position: relative;
    perspective: 2000px;
}

/* Sidebar Navigation */
.space-sidebar {
    width: 280px;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.space-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, var(--overlay-light) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Navigation Items */
.space-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1;
}

.space-nav-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--btn-primary-bg) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.space-nav-item:hover::before {
    width: 300px;
    height: 300px;
}

.space-nav-item:hover {
    border-color: var(--btn-primary-bg);
    color: var(--text-primary);
    transform: translateX(8px);
}

.space-nav-item.active {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.25) 0%, var(--overlay-light) 100%);
    border-color: var(--btn-primary-bg);
    color: var(--white);
    box-shadow: 0 8px 24px var(--btn-primary-bg);
}

.space-nav-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-medium);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.space-nav-item.active .space-nav-icon {
    background: var(--btn-primary-bg);
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.6);
    transform: scale(1.1) rotate(360deg);
}

.space-nav-icon i {
    font-size: 1.25rem;
    color: var(--btn-primary-bg);
    transition: all 0.4s ease;
}

.space-nav-item.active .space-nav-icon i {
    color: var(--white);
}

.space-nav-text {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

/* Warp Speed Effect */
.space-warp-effect {
    position: absolute;
    top: 50%;
    right: -100%;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(5, 150, 105, 0.8) 50%, 
        transparent 100%
    );
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-nav-item.active .space-warp-effect {
    right: -50%;
    opacity: 1;
    animation: warpSpeed 1s ease-in-out;
}

@keyframes warpSpeed {
    0% {
        right: -200%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        right: -50%;
        opacity: 0;
    }
}

/* Content Area */
.space-content {
    flex: 1;
    position: relative;
    min-height: 500px;
    background: rgba(15, 15, 15, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Panel */
.space-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateZ(-200px) rotateY(-15deg);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: block;
}

.space-panel.active {
    opacity: 1;
    transform: translateZ(0) rotateY(0);
    pointer-events: auto;
}

/* Panel Image - Full Coverage */
.space-panel-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.space-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    animation: floatImage 6s ease-in-out infinite;
}

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

.space-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0.6) 0%, 
        transparent 20%,
        transparent 80%,
        var(--overlay-dark) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Panel Header - Overlay on Image */
.space-panel-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-2xl);
    background: linear-gradient(180deg, 
        var(--overlay-dark-strong) 0%, 
        rgba(0, 0, 0, 0.6) 50%,
        var(--overlay-dark) 80%,
        transparent 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
    z-index: 2;
}

.space-panel-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px var(--overlay-dark),
                 0 0 20px rgba(5, 150, 105, 0.6);
    animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% {
        text-shadow: 0 2px 10px var(--overlay-dark),
                     0 0 20px var(--btn-primary-bg);
    }
    100% {
        text-shadow: 0 2px 10px var(--overlay-dark),
                     0 0 30px rgba(5, 150, 105, 0.8);
    }
}

/* Panel Footer - Overlay on Image */
.space-panel-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-2xl);
    background: linear-gradient(0deg, 
        rgba(0, 0, 0, 0.9) 0%, 
        var(--overlay-dark) 50%,
        rgba(0, 0, 0, 0.4) 80%,
        transparent 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: none;
    z-index: 2;
}

.space-panel-description {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-shadow: 0 1px 3px var(--overlay-dark-strong);
}

/* Particle Background */
.space-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.space-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(5, 150, 105, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.8);
    animation: particleFloat 8s ease-in-out infinite;
}

.space-particle:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.space-particle:nth-child(2) {
    top: 30%;
    left: 80%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.space-particle:nth-child(3) {
    top: 60%;
    left: 40%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.space-particle:nth-child(4) {
    top: 80%;
    left: 70%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.space-particle:nth-child(5) {
    top: 50%;
    left: 10%;
    animation-delay: 4s;
    animation-duration: 10s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate(50px, -100px) scale(1.5);
        opacity: 0.8;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(100px, -200px) scale(0);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .space-services-container {
        perspective: 1500px;
    }
    
    .space-sidebar {
        width: 240px;
    }
    
    .space-panel-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .space-services-container {
        flex-direction: column;
        perspective: none;
        gap: var(--spacing-md);
    }
    
    .space-sidebar {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .space-sidebar::-webkit-scrollbar {
        display: none;
    }
    
    .space-sidebar::before {
        display: none;
    }
    
    .space-nav-item {
        flex-direction: column;
        min-width: 100px;
        padding: var(--spacing-md) var(--spacing-sm);
        gap: var(--spacing-xs);
        text-align: center;
    }
    
    .space-nav-item:hover {
        transform: translateY(-4px);
    }
    
    .space-nav-text {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .space-nav-icon {
        width: 36px;
        height: 36px;
    }
    
    .space-nav-icon i {
        font-size: 1.125rem;
    }
    
    .space-content {
        min-height: 400px;
    }
    
    .space-panel {
        transform: translateY(-20px);
    }
    
    .space-panel.active {
        transform: translateY(0);
    }
    
    .space-panel-header {
        padding: var(--spacing-lg);
    }
    
    .space-panel-title {
        font-size: 1.25rem;
    }
    
    .space-panel-footer {
        padding: var(--spacing-lg);
    }
    
    .space-panel-description {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .space-nav-item {
        min-width: 80px;
        padding: var(--spacing-sm);
    }
    
    .space-nav-icon {
        width: 32px;
        height: 32px;
    }
    
    .space-nav-icon i {
        font-size: 1rem;
    }
    
    .space-nav-text {
        font-size: 0.6875rem;
    }
    
    .space-content {
        min-height: 350px;
    }
    
    .space-panel-header {
        padding: var(--spacing-md);
    }
    
    .space-panel-title {
        font-size: 1.125rem;
    }
    
    .space-panel-footer {
        padding: var(--spacing-md);
    }
    
    .space-panel-description {
        font-size: 0.8125rem;
    }
}

/* ========================================
   POPULAR PLATFORMS SECTION
   ======================================== */

.popular-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.platform-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.platform-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--overlay-light) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.platform-card:hover {
    transform: translateY(-4px);
    border-color: var(--btn-primary-bg);
    box-shadow: 0 8px 24px var(--overlay-medium);
}

.platform-card:hover::before {
    opacity: 1;
}

.platform-card-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.platform-card-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    transition: transform var(--transition-base);
}

.platform-card:hover .platform-card-icon img {
    transform: scale(1.1);
}

.platform-card-icon i {
    font-size: 2rem;
    color: var(--btn-primary-bg);
    transition: transform var(--transition-base);
}

.platform-card:hover .platform-card-icon i {
    transform: scale(1.1);
}

.platform-card-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.platform-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    transition: color var(--transition-fast);
}

.platform-card:hover .platform-card-title {
    color: var(--btn-primary-bg);
}

.platform-card-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.platform-card-count i {
    font-size: 1rem;
    color: var(--btn-primary-bg);
}

.platform-card-arrow {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
}

.platform-card-arrow i {
    font-size: 1rem;
    color: var(--btn-primary-bg);
    transition: transform var(--transition-base);
}

.platform-card:hover .platform-card-arrow {
    background: var(--btn-primary-bg);
    transform: translateX(4px);
}

.platform-card:hover .platform-card-arrow i {
    color: var(--text-primary);
    transform: translateX(2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .popular-platforms-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--spacing-md);
    }
    
    .platform-card {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    .platform-card-icon {
        width: 56px;
        height: 56px;
    }
    
    .platform-card-title {
        font-size: var(--font-size-base);
    }
    
    .platform-card-count {
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .popular-platforms-grid {
        grid-template-columns: 1fr;
    }
    
    .platform-card {
        padding: var(--spacing-md);
    }
}

/* ========================================
   GUEST ACTION BAR (FIXED BOTTOM)
   ======================================== */

.guest-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--bg-secondary) 0%, var(--bg-secondary) 100%);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px var(--overlay-dark);
    z-index: 999;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.guest-action-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.guest-action-bar-text {
    flex: 1;
}

.guest-action-bar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.guest-action-bar-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.guest-action-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.guest-action-bar .btn-primary,
.guest-action-bar .btn-secondary {
    padding: 0.625rem 1.5rem;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* Add padding to body when guest bar is visible */
body:has(.guest-action-bar) {
    padding-bottom: 100px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .guest-action-bar-content {
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .guest-action-bar-text {
        text-align: center;
    }
    
    .guest-action-bar-title {
        font-size: 18px;
    }
    
    .guest-action-bar-subtitle {
        font-size: 13px;
    }
    
    .guest-action-bar-actions {
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }
    
    .guest-action-bar .btn-primary,
    .guest-action-bar .btn-secondary {
        flex: 1;
        padding: 0.625rem 1rem;
        font-size: 14px;
    }
    
    body:has(.guest-action-bar) {
        padding-bottom: 140px;
    }
}

@media (max-width: 480px) {
    .guest-action-bar-content {
        padding: var(--spacing-sm);
    }
    
    .guest-action-bar-title {
        font-size: 16px;
    }
    
    .guest-action-bar-subtitle {
        font-size: 12px;
    }
    
    .guest-action-bar .btn-primary,
    .guest-action-bar .btn-secondary {
        padding: 0.5rem 0.75rem;
        font-size: 13px;
    }
    
    .guest-action-bar .btn-primary i,
    .guest-action-bar .btn-secondary i {
        display: none;
    }
}

/* Hide on mobile bottom nav pages */
@media (max-width: 768px) {
    body:has(.mobile-bottom-nav) .guest-action-bar {
        bottom: 70px;
    }
    
    body:has(.mobile-bottom-nav):has(.guest-action-bar) {
        padding-bottom: 210px;
    }
}

/* ================================================================================
   Site Announcements - Notification Center
   ================================================================================ */

/* Bell Button (Fixed Position) */
.announcement-bell-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 8px 24px var(--btn-primary-bg);
    z-index: 1000;
    transition: var(--transition-base);
    animation: slideInFromBottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.announcement-bell-button:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px var(--btn-primary-bg);
}

.announcement-bell-button:active {
    transform: translateY(0);
}

/* Badge Count */
.announcement-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: var(--error-color);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid var(--bg-primary);
}

/* Notification Center Panel */
.announcement-center-panel {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 420px;
    max-height: 600px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px var(--overlay-dark);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.announcement-center-panel.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Panel Header */
.announcement-center-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--overlay-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

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

.announcement-center-title i {
    font-size: 1.25rem;
    color: var(--btn-primary-bg);
}

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

.announcement-center-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.announcement-center-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.announcement-center-close:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

/* Panel Body (Scrollable) */
.announcement-center-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    max-height: 450px;
}

.announcement-center-body::-webkit-scrollbar {
    width: 6px;
}

.announcement-center-body::-webkit-scrollbar-track {
    background: transparent;
}

.announcement-center-body::-webkit-scrollbar-thumb {
    background: var(--overlay-medium);
    border-radius: 3px;
}

.announcement-center-body::-webkit-scrollbar-thumb:hover {
    background: var(--overlay-medium);
}

/* Individual Announcement Item */
.announcement-item {
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    gap: var(--spacing-md);
    border-left: 3px solid;
    transition: all 0.3s ease;
}

.announcement-item:last-child {
    margin-bottom: 0;
}

.announcement-item:hover {
    background: var(--overlay-light);
}

.announcement-item.announcement-update {
    border-left-color: var(--info-color);
}

.announcement-item.announcement-warning {
    border-left-color: var(--warning-color);
}

/* Announcement Item Icon */
.announcement-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.announcement-update .announcement-item-icon {
    background: rgba(0, 122, 255, 0.15);
    color: var(--info-color);
}

.announcement-warning .announcement-item-icon {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning-color);
}

/* Announcement Item Content */
.announcement-item-content {
    flex: 1;
    min-width: 0;
}

.announcement-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.4;
}

.announcement-item-body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.announcement-item-body p {
    margin: 0 0 var(--spacing-xs) 0;
}

.announcement-item-body p:last-child {
    margin-bottom: 0;
}

.announcement-item-body a {
    color: var(--btn-primary-bg);
    text-decoration: underline;
}

.announcement-item-body a:hover {
    color: var(--btn-primary-hover);
}

/* Announcement Meta Info */
.announcement-item-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.announcement-item-type,
.announcement-item-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.announcement-item-type i,
.announcement-item-date i {
    font-size: 0.875rem;
}

/* Delete Button */
.announcement-item-delete {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: var(--transition-fast);
    align-self: flex-start;
}

.announcement-item-delete:hover {
    background: var(--overlay-light);
    color: var(--error-color);
}

/* Panel Footer */
.announcement-center-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--overlay-medium);
}

.announcement-clear-all {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--overlay-light);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: var(--transition-fast);
}

.announcement-clear-all:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.announcement-clear-all i {
    font-size: 1rem;
}

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

.announcement-empty-state i {
    font-size: 3rem;
    color: var(--success-color);
    margin-bottom: var(--spacing-md);
}

.announcement-empty-state p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Backdrop */
.announcement-center-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-dark);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.announcement-center-backdrop.show {
    opacity: 1;
}

/* Animations */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .announcement-bell-button {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
        font-size: 1.375rem;
    }
    
    .announcement-center-panel {
        bottom: 86px;
        right: 20px;
        left: 20px;
        width: auto;
        max-height: 500px;
    }
    
    .announcement-center-body {
        max-height: 350px;
    }
    
    .announcement-item {
        padding: var(--spacing-sm);
    }
    
    .announcement-item-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .announcement-bell-button {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .announcement-badge {
        min-width: 18px;
        height: 18px;
        font-size: 0.6875rem;
        padding: 0 5px;
    }
    
    .announcement-center-panel {
        bottom: 80px;
        max-height: 400px;
    }
    
    .announcement-center-header {
        padding: var(--spacing-md);
    }
    
    .announcement-center-title h3 {
        font-size: 1rem;
    }
    
    .announcement-center-body {
        max-height: 280px;
    }
    
    .announcement-item-title {
        font-size: 0.875rem;
    }
    
    .announcement-item-body {
        font-size: 0.75rem;
    }
}

/* Guest Action Bar Adjustment */
body:has(.guest-action-bar) .announcement-bell-button {
    bottom: 160px;
}

body:has(.guest-action-bar) .announcement-center-panel {
    bottom: 230px;
}

@media (max-width: 768px) {
    body:has(.guest-action-bar) .announcement-bell-button {
        bottom: 140px;
    }
    
    body:has(.guest-action-bar) .announcement-center-panel {
        bottom: 206px;
    }
}

/* ========================================
   MERCHANT VERIFICATION STYLES
   ======================================== */

/* User Profile Card */
.user-profile-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.user-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
}

.user-profile-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--btn-primary-text);
    border: 3px solid var(--border-color);
}

.user-profile-info h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.user-profile-info p {
    margin: var(--spacing-xs) 0;
    font-size: 0.875rem;
}

/* Info List */
.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.info-list-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.info-list-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Score Cards */
.score-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

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

.score-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.progress-bar {
    width: 100%;
    height: 30px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--btn-primary-bg), var(--btn-primary-hover));
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-md);
}

.score-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--btn-primary-bg);
}

/* Verification Documents Grid */
.verification-documents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

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

.verification-document-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.verification-document-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-secondary);
}

.verification-document-image:hover {
    transform: scale(1.02);
    border-color: var(--btn-primary-bg);
    box-shadow: var(--shadow-lg);
}

/* Image Modal */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
}

.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10001;
}

.modal-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--text-primary);
}

.modal-close:hover {
    background: var(--error-color);
    border-color: var(--error-color);
    transform: rotate(90deg);
}

.modal-close i {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .user-profile-card {
        flex-direction: column;
        text-align: center;
    }
    
    .info-list-item {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: left;
    }
    
    .info-list-label {
        align-self: flex-start;
    }
    
    .info-list-value {
        align-self: flex-start;
    }
    
    .modal-close {
        top: -40px;
        width: 36px;
        height: 36px;
    }
}

/* ========================================
   ADMIN FILTERS FORM
   ======================================== */

.admin-filters-form {
    width: 100%;
}

.admin-filters-row {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr) auto;
    gap: var(--spacing-md);
    align-items: center;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-search {
    min-width: 0;
}

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

.admin-filters-form .form-input {
    margin: 0;
}

/* Responsive Filters */
@media (max-width: 1280px) {
    .admin-filters-row {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .filter-search {
        grid-column: 1 / -1;
    }
    
    .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .admin-filters-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .filter-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .filter-actions .btn-primary,
    .filter-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================
   DISPUTE PAGE STYLES
   =================================== */

/* Dispute Container */
.dispute-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
}

/* Dispute Header Card */
.dispute-header-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--overlay-light);
}

.dispute-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.dispute-title-section h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.dispute-order-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: var(--transition-base);
}

.dispute-order-link:hover {
    color: var(--btn-primary-bg);
}

.dispute-status-badge {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.dispute-status-badge.status-open {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning-color);
}

.dispute-status-badge.status-under_review {
    background: rgba(0, 122, 255, 0.15);
    color: var(--info-color);
}

.dispute-status-badge.status-resolved {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success-color);
}

.dispute-status-badge.status-closed {
    background: rgba(160, 160, 160, 0.15);
    color: var(--text-secondary);
}

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

.dispute-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dispute-info-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.dispute-info-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.dispute-info-value.amount {
    color: var(--btn-primary-bg);
    font-size: 1.25rem;
}

/* Main Dispute Layout */
.dispute-main-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

/* Dispute Details Side */
.dispute-details-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dispute-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--overlay-light);
}

.dispute-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--overlay-light);
}

.dispute-card-header i {
    font-size: 1.25rem;
    color: var(--btn-primary-bg);
}

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

.dispute-reason-text {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.dispute-resolution-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--success-color);
}

.dispute-resolution-content i {
    font-size: 1.5rem;
    color: var(--success-color);
    flex-shrink: 0;
}

.dispute-resolution-text {
    flex: 1;
}

.dispute-resolution-text p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.6;
}

.dispute-resolution-time {
    margin-top: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dispute-actions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.dispute-action-warning {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 149, 0, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Chat Container */
.dispute-chat-container {
    position: sticky;
    top: 100px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--overlay-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    max-height: 800px;
    min-height: 500px;
}

.dispute-chat-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--overlay-light);
    flex-shrink: 0;
}

.dispute-chat-header h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dispute-chat-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dispute-chat-subtitle i {
    font-size: 1em;
}

/* Chat Messages Area */
.dispute-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    background: var(--bg-primary);
}

.dispute-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.dispute-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.dispute-chat-messages::-webkit-scrollbar-thumb {
    background: var(--overlay-medium);
    border-radius: 4px;
}

.dispute-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--overlay-medium);
}

/* Chat Message */
.dispute-message {
    display: flex;
    gap: var(--spacing-md);
    animation: messageSlideIn 0.3s ease;
}

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

.dispute-message.message-own {
    flex-direction: row-reverse;
}

.dispute-message-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: white;
    text-transform: uppercase;
    background: var(--btn-primary-bg);
    border: 2px solid var(--bg-primary);
}

.dispute-message-avatar.avatar-buyer {
    background: linear-gradient(135deg, var(--info-color) 0%, #0051D5 100%);
}

.dispute-message-avatar.avatar-seller {
    background: linear-gradient(135deg, var(--warning-color) 0%, #FF6B00 100%);
}

.dispute-message-avatar.avatar-employee {
    background: var(--btn-primary-bg);
}

.dispute-message-content {
    flex: 1;
    max-width: 75%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.dispute-message.message-own .dispute-message-content {
    align-items: flex-end;
}

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

.dispute-message.message-own .dispute-message-header {
    flex-direction: row-reverse;
}

.dispute-message-sender {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dispute-message-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dispute-message-bubble {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
}

.dispute-message.message-own .dispute-message-bubble {
    background: var(--btn-primary-bg);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

.dispute-message:not(.message-own) .dispute-message-bubble {
    border-bottom-left-radius: var(--radius-sm);
}

.dispute-message-attachment {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8125rem;
    transition: var(--transition-base);
}

.dispute-message-attachment:hover {
    background: var(--overlay-dark);
}

.dispute-message-attachment i {
    font-size: 1em;
}

.dispute-message-attachment a {
    color: inherit;
    text-decoration: none;
}

/* Chat Input Area */
.dispute-chat-input {
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-secondary);
    border-top: 1px solid var(--overlay-light);
    flex-shrink: 0;
}

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

.dispute-chat-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 200px;
    padding: var(--spacing-md);
    border: 1px solid var(--overlay-medium);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
    transition: var(--transition-base);
}

.dispute-chat-textarea:focus {
    outline: none;
    border-color: var(--btn-primary-bg);
    background: var(--bg-primary);
}

.dispute-chat-textarea::placeholder {
    color: var(--text-secondary);
}

.dispute-chat-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.dispute-chat-file-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.dispute-chat-file-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.dispute-chat-file-label:hover {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.dispute-chat-file-label i {
    font-size: 1em;
}

.dispute-chat-file-input {
    display: none;
}

.dispute-chat-file-name {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.dispute-chat-send-btn {
    min-width: 120px;
}

/* Empty State */
.dispute-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--text-secondary);
}

.dispute-chat-empty i {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.dispute-chat-empty p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Responsive Design */
@media (max-width: 1280px) {
    .dispute-main-layout {
        grid-template-columns: 1fr 380px;
    }
    
    .dispute-chat-container {
        max-height: 700px;
    }
}

@media (max-width: 1024px) {
    .dispute-main-layout {
        grid-template-columns: 1fr;
    }
    
    .dispute-chat-container {
        position: static;
        height: 600px;
        max-height: 600px;
    }
    
    .dispute-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dispute-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dispute-info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .dispute-title-section h1 {
        font-size: 1.5rem;
    }
    
    .dispute-header-card,
    .dispute-card,
    .dispute-chat-header,
    .dispute-chat-input {
        padding: var(--spacing-lg);
    }
    
    .dispute-chat-messages {
        padding: var(--spacing-lg);
    }
    
    .dispute-message-content {
        max-width: 85%;
    }
    
    .dispute-chat-container {
        height: 500px;
        max-height: 500px;
    }
    
    .dispute-chat-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dispute-chat-send-btn {
        width: 100%;
    }
}

/* ========================================
   ADMIN REPORTS PAGE
   ======================================== */

.report-modal-content {
    max-width: 700px;
}

.report-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.report-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.report-info-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.report-description-box {
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.modal.modal-active {
    display: flex;
}

.modal-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.3s ease;
}

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

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

.modal-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--bg-secondary);
    border-color: var(--error-color);
    color: var(--error-color);
}

.modal-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .modal {
        padding: var(--spacing-md);
    }
    
    .modal-content {
        max-height: 95vh;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-lg);
    }
    
    .report-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   USER REPORTS PAGE
   ======================================== */

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.report-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.report-card:hover {
    border-color: var(--btn-primary-bg);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

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

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

.report-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-card-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.report-card-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.report-card-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.report-card-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.report-card-description {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.report-card-notes {
    background: var(--overlay-light);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.report-card-notes .report-card-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--info-color);
    margin-bottom: var(--spacing-xs);
}

.report-card-notes p {
    color: var(--text-primary);
    margin: 0;
    line-height: 1.6;
}

.report-card-review {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--success-color);
}

.report-card-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

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

/* Empty State Card */
.empty-state-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    text-align: center;
    margin: var(--spacing-2xl) 0;
}

.empty-state-card i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    display: block;
}

.empty-state-card h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm);
}

.empty-state-card p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   API DOCUMENTATION
   ======================================== */

/* API Token Display */
.api-token-display {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.api-token-display code {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--btn-primary-bg);
    letter-spacing: 0.5px;
}

.api-token-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.api-token-field {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.api-token-field .form-input {
    flex: 1;
}

.api-token-status {
    flex-shrink: 0;
}

/* API Documentation Sections */
.api-docs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.api-doc-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
}

.api-doc-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.api-doc-title i {
    color: var(--btn-primary-bg);
}

.api-doc-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

.api-doc-content p {
    margin: 0 0 var(--spacing-md);
}

.api-doc-content ul {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-xl);
}

.api-doc-content li {
    margin: var(--spacing-sm) 0;
}

.api-doc-content code {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* API Endpoints */
.api-endpoint {
    margin: var(--spacing-xl) 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.api-endpoint-header {
    background: var(--overlay-light);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.api-endpoint-header code {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.api-method {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.api-method.get {
    background: var(--overlay-light);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.api-method.post {
    background: var(--overlay-light);
    color: var(--info-color);
    border: 1px solid var(--info-color);
}

.api-method.put,
.api-method.patch {
    background: var(--overlay-light);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.api-method.delete {
    background: var(--overlay-light);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

.api-endpoint-body {
    padding: var(--spacing-lg);
}

.api-endpoint-body p {
    margin: 0 0 var(--spacing-md);
    color: var(--text-secondary);
}

.api-endpoint-body ul {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-xl);
}

/* Code Blocks */
.code-block {
    background: #0d0d0d;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
    overflow: hidden;
}

.code-header {
    background: var(--overlay-light);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.code-block pre {
    margin: 0;
    padding: var(--spacing-lg);
    overflow-x: auto;
}

.code-block code {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.6;
    background: none;
    padding: 0;
}

/* API Error Table */
.api-error-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.api-error-table thead {
    background: var(--overlay-light);
}

.api-error-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.api-error-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.api-error-table code {
    background: var(--overlay-light);
    color: var(--btn-primary-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
}

/* Stats Grid for API */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .api-token-display {
        flex-direction: column;
        align-items: stretch;
    }
    
    .api-endpoint-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .code-block pre {
        font-size: 0.75rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* RTL Support for API Pages */
[dir="rtl"] .api-token-display,
[dir="rtl"] .api-endpoint-header,
[dir="rtl"] .code-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .api-doc-content ul {
    padding-left: 0;
    padding-right: var(--spacing-xl);
}

[dir="rtl"] .api-endpoint-body ul {
    padding-left: 0;
    padding-right: var(--spacing-xl);
}

/* API Access Request Styles */
.api-request-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.api-request-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.api-request-detail-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.api-request-detail-item p {
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .api-request-details {
        gap: var(--spacing-lg);
    }
}

/* ========================================
   MERCHANT ANALYTICS PAGES
   ======================================== */

/* Merchant Profile Card */
.merchant-profile-card {
    margin-bottom: var(--spacing-2xl);
}

.merchant-profile-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.merchant-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.merchant-info {
    flex: 1;
    min-width: 200px;
}

.merchant-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

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

.merchant-badges {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}

.merchant-verified-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

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

/* Section Headings */
.section-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
    color: var(--text-primary);
}

/* Stats Grid Variants */
.stats-grid-3col {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: var(--spacing-2xl);
}

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

/* Chart Container */
.chart-container {
    margin-bottom: var(--spacing-2xl);
}

.chart-container canvas {
    max-height: 400px;
}

/* Order Table Cells */
.order-link {
    color: var(--btn-primary-bg);
    font-weight: var(--font-semibold);
    text-decoration: none;
}

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

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

.user-avatar-small {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.listing-title-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.earnings-value {
    font-weight: var(--font-semibold);
    color: var(--success-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .merchant-profile-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .merchant-actions {
        width: 100%;
    }

    .merchant-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .listing-title-cell {
        max-width: 150px;
    }
}

/* RTL Support */
[dir="rtl"] .merchant-profile-content,
[dir="rtl"] .merchant-badges,
[dir="rtl"] .merchant-actions,
[dir="rtl"] .user-cell {
    flex-direction: row-reverse;
}

/* Merchant Analytics Index Page */
.stats-grid-spacing {
    margin-bottom: var(--spacing-2xl);
}

.filters-section {
    margin-bottom: var(--spacing-lg);
}

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

.merchant-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.merchant-cell-info {
    display: flex;
    flex-direction: column;
}

.merchant-cell-name {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.merchant-cell-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ================================
   Multi-Listing Creator Styles
   ================================ */

#multiListingSection {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

#multiListingFormsContainer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.multi-listing-form {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    position: relative;
    transition: all var(--transition-base);
}

.multi-listing-form:hover {
    border-color: var(--btn-primary-bg);
    box-shadow: 0 4px 20px var(--overlay-medium);
}

.multi-listing-counter {
    background: var(--btn-primary-bg);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: var(--font-bold);
}

/* RTL Support for Multi-Listing */
[dir="rtl"] #multiListingSection {
    text-align: right;
}

[dir="rtl"] .multi-listing-form {
    direction: rtl;
}

/* Responsive Multi-Listing */
@media (max-width: 768px) {
    #multiListingSection {
        padding: var(--spacing-md);
    }
    
    .multi-listing-form {
        padding: var(--spacing-md);
    }
    
    .multi-listing-form > div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* Alert & Confirm Modals */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark-strong);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.confirm-modal-overlay.show {
    opacity: 1;
}

.confirm-modal {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 90%;
    padding: var(--spacing-xl);
    transform: scale(0.9);
    transition: transform var(--transition-base);
}

.confirm-modal-overlay.show .confirm-modal {
    transform: scale(1);
}

.confirm-modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.confirm-modal-header i {
    font-size: 2rem;
    color: var(--warning-color);
}

.confirm-modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.confirm-modal-body {
    margin-bottom: var(--spacing-xl);
}

.confirm-modal-body p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.confirm-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.confirm-modal-actions button {
    min-width: 120px;
}

@media (max-width: 768px) {
    .toast-notification {
        right: 10px;
        min-width: 280px;
        max-width: calc(100% - 20px);
    }
    
    [dir="rtl"] .toast-notification {
        left: 10px;
    }
    
    .confirm-modal {
        padding: var(--spacing-lg);
    }
    
    .confirm-modal-actions {
        flex-direction: column;
    }
    
    .confirm-modal-actions button {
        width: 100%;
    }
}

/* ========================================
   GIFT CARD CREATION PAGE
   ======================================== */

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

.create-header-icon {
    width: 80px;
    height: 80px;
    background: var(--btn-primary-bg);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--btn-primary-text);
}

.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--spacing-2xl);
    align-items: start;
}

.form-column {
    min-width: 0;
}

.preview-column {
    position: sticky;
    top: var(--spacing-lg);
}

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

.tax-option-card {
    display: flex;
    align-items: start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-base);
}

.tax-option-card:has(input:checked) {
    border-color: var(--btn-primary-bg);
    background: var(--overlay-light);
}

.tax-option-card input[type="radio"] {
    margin-top: 2px;
}

.tax-option-card span {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tax-option-card strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.tax-option-card small {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.feature-group {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-color);
}

.feature-checkbox-label {
    display: flex;
    align-items: start;
    gap: var(--spacing-md);
}

.feature-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
}

.feature-checkbox-label span {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.feature-checkbox-label strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

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

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-medium);
    margin-top: var(--spacing-xs);
}

.feature-badge.locked {
    background: var(--overlay-light);
    color: var(--error-color);
}

.preview-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.preview-content {
    padding: var(--spacing-xl);
    text-align: center;
}

.preview-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.preview-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.preview-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-normal);
}

.preview-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

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

.preview-meta-item i {
    color: var(--btn-primary-bg);
}

.preview-meta-item strong {
    color: var(--text-primary);
    font-weight: var(--font-bold);
}

.tips-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.tips-card h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.tips-card h4 i {
    color: var(--warning-color);
}

.tips-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-card li {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
    position: relative;
}

.tips-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--btn-primary-bg);
}

/* Radio Card Styles */
.radio-card {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-base);
}

.radio-card:hover {
    border-color: var(--btn-primary-bg);
}

.radio-card:has(input:checked) {
    border-color: var(--btn-primary-bg);
    background: var(--overlay-light);
}

.radio-card input[type="radio"] {
    margin-right: var(--spacing-md);
}

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

.radio-card-content strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.radio-card-content small {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Code Input Row Styles */
.code-input-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

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

.code-input-row .form-input {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
}

/* Provider Preview Styles */
.preview-provider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.preview-provider-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: contain;
    background: var(--overlay-light);
    padding: var(--spacing-xs);
}

.preview-provider-name {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

/* Bulk Indicator Badge */
.bulk-indicator-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--overlay-medium);
    color: var(--btn-primary-bg);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

.bulk-indicator-badge i {
    font-size: 0.875em;
}

/* Custom Fields Styling */
.custom-field-row {
    animation: fadeInUp 0.3s ease;
}

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

.field-type-select,
.field-options-group textarea {
    transition: all 0.3s ease;
}

.form-grid {
    display: grid;
}

/* Responsive Design for Gift Card Creation */
@media (max-width: 1024px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
    
    .preview-column {
        position: static;
    }
    
    .code-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .code-input-row .btn-icon {
        align-self: flex-end;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

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
























/* ========================================
   PLAN INVOICES PAGES
   ======================================== */

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

/* Invoice Card */
.invoice-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.invoice-card:hover {
    border-color: var(--btn-primary-bg);
    box-shadow: var(--shadow-lg);
}

.invoice-card.invoice-overdue {
    border-color: var(--error-color);
}

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

.invoice-number {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.invoice-plan-name {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.invoice-card-body {
    margin-bottom: var(--spacing-lg);
}

.invoice-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.invoice-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.invoice-detail-label i {
    font-size: 0.75rem;
}

.invoice-detail-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-amount {
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-amount-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.invoice-amount-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--btn-primary-bg);
}

.invoice-card-footer {
    display: flex;
    gap: var(--spacing-sm);
}

.invoice-card-footer .btn-primary,
.invoice-card-footer .btn-secondary {
    flex: 1;
}

.overdue-badge {
    display: inline-block;
    background: rgba(255, 59, 48, 0.1);
    color: var(--error-color);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: var(--spacing-xs);
}

/* Invoice Detail Page */
.invoice-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
}

.invoice-detail-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.invoice-detail-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.invoice-detail-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
}

.invoice-section {
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-color);
}

.invoice-section:last-child {
    border-bottom: none;
}

.invoice-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.invoice-section-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

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

.invoice-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.invoice-info-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.invoice-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-summary {
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border: none;
}

.invoice-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.invoice-summary-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

.invoice-summary-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-total {
    border-top: 2px solid var(--border-color);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.invoice-total .invoice-summary-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-total .invoice-summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--btn-primary-bg);
}

.invoice-paid-section {
    background: rgba(5, 150, 105, 0.05);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.invoice-paid-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(5, 150, 105, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invoice-paid-icon i {
    font-size: 24px;
    color: var(--btn-primary-bg);
}

.invoice-payment-method,
.invoice-transaction-id {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.invoice-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
}

/* Payment Page */
.payment-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-container {
    max-width: 900px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-2xl);
}

.payment-summary-card,
.payment-form-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
}

.payment-summary-title,
.payment-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
}

.payment-summary-details {
    margin-bottom: var(--spacing-lg);
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.payment-summary-row:last-child {
    border-bottom: none;
}

.payment-summary-total {
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-lg);
}

.payment-total-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--btn-primary-bg);
}

.payment-overdue-warning {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--error-color);
    font-size: 0.875rem;
    font-weight: 600;
}

.payment-method-option {
    margin-bottom: var(--spacing-md);
}

.payment-method-label {
    display: block;
    cursor: pointer;
}

.payment-method-radio {
    display: none;
}

.payment-method-content {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.payment-method-radio:checked + .payment-method-content {
    border-color: var(--btn-primary-bg);
    background: rgba(5, 150, 105, 0.05);
}

.payment-method-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.payment-method-icon {
    width: 48px;
    height: 48px;
    background: var(--overlay-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-method-icon i {
    font-size: 24px;
    color: var(--btn-primary-bg);
}

.payment-method-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.payment-method-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.wallet-balance-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.wallet-balance {
    font-size: 1.125rem;
    font-weight: 700;
}

.payment-form-actions {
    margin-top: var(--spacing-lg);
}

.payment-form-note {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* Responsive Design */
@media (max-width: 768px) {
    .invoices-grid {
        grid-template-columns: 1fr;
    }

    .payment-container {
        grid-template-columns: 1fr;
    }

    .invoice-detail-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .invoice-actions {
        flex-direction: column;
    }

    .invoice-card-footer {
        flex-direction: column;
    }

    .invoice-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Professional Invoice Styles (Stripe-like) ===== */
.invoice-professional {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-3xl) 0;
}

.invoice-paper {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-5xl);
    margin-bottom: var(--spacing-3xl);
}

/* Invoice Header */
.invoice-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--spacing-3xl);
    border-bottom: 2px solid var(--border-light);
    margin-bottom: var(--spacing-3xl);
}

.invoice-company-info {
    flex: 1;
}

.invoice-company-name {
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    color: var(--black);
    margin-bottom: var(--spacing-md);
}

.invoice-company-details {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.invoice-company-details p {
    margin: var(--spacing-xs) 0;
}

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

.invoice-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-bold);
    color: var(--black);
    margin-bottom: var(--spacing-sm);
}

.invoice-number {
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
}

.invoice-status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--letter-spacing-wide);
}

.invoice-status-badge.badge-success {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.invoice-status-badge.badge-warning {
    background: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

.invoice-status-badge.badge-danger {
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error-color);
}

/* Bill To / Invoice Details */
.invoice-details-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-5xl);
}

.invoice-bill-to h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-md);
}

.invoice-customer-info strong {
    display: block;
    font-size: var(--font-size-base);
    color: var(--black);
    margin-bottom: var(--spacing-xs);
}

.invoice-customer-info p {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    margin: calc(var(--spacing-xs) / 2) 0;
}

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

.invoice-date-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.invoice-date-row span {
    color: var(--text-tertiary);
}

.invoice-date-row strong {
    color: var(--black);
    min-width: 120px;
}

/* Items Table */
.invoice-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-3xl);
}

.invoice-items-table thead th {
    background: var(--bg-secondary);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-bottom: 1px solid var(--border-light);
}

.invoice-items-table tbody td {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    color: var(--black);
}

.invoice-items-table tbody td strong {
    font-size: 0.9375rem;
    color: var(--black);
}

.invoice-item-description {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0 0 0;
}

.invoice-items-table tfoot td {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    border-bottom: none;
}

.invoice-subtotal-row td {
    padding-top: var(--spacing-lg);
    color: var(--text-tertiary);
}

.invoice-tax-row td {
    color: var(--text-tertiary);
}

.invoice-total-row {
    background: var(--bg-secondary);
}

.invoice-total-row td {
    padding: var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--black);
    font-weight: var(--font-semibold);
}

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

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

/* Payment Information */
.invoice-payment-info {
    background: rgba(var(--success-rgb), 0.05);
    border: 1px solid rgba(var(--success-rgb), 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

.invoice-payment-success {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--success-color);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-md);
}

.invoice-payment-success i {
    font-size: var(--font-size-2xl);
}

.invoice-payment-details p {
    color: var(--success-color-hover);
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0;
}

/* Notes */
.invoice-notes {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

.invoice-notes h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.invoice-notes p {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin: var(--spacing-sm) 0;
}

/* Footer */
.invoice-footer {
    text-align: center;
    padding-top: var(--spacing-3xl);
    border-top: 1px solid var(--border-light);
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

/* Action Buttons */
.invoice-actions-bottom {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-3xl) 0;
}

/* Responsive */
@media (max-width: 768px) {
    .invoice-paper {
        padding: var(--spacing-2xl);
    }
    
    .invoice-header-section {
        flex-direction: column;
        gap: var(--spacing-2xl);
    }
    
    .invoice-meta {
        text-align: left;
    }
    
    .invoice-details-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
    
    .invoice-dates {
        text-align: left;
    }
    
    .invoice-date-row {
        justify-content: flex-start;
    }
    
    .invoice-items-table {
        font-size: var(--font-size-sm);
    }
    
    .invoice-items-table thead th,
    .invoice-items-table tbody td,
    .invoice-items-table tfoot td {
        padding: var(--spacing-sm);
    }
}

/* RTL Support */
[dir="rtl"] .invoice-meta {
    text-align: left;
}

[dir="rtl"] .invoice-dates {
    text-align: left;
}

[dir="rtl"] .invoice-date-row {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

[dir="rtl"] .invoice-footer {
    text-align: center;
}

/* ========================================
   SUBSCRIPTION PAGE RESPONSIVE
   ======================================== */

/* Subscription page grid - make responsive */
@media (max-width: 1024px) {
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile responsiveness for subscription info blocks */
@media (max-width: 768px) {
    /* Override inline grid for mobile */
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust admin table on mobile */
    .admin-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-table {
        min-width: 600px;
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .admin-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--spacing-md);
    }
    
    .admin-page-header .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   PRICE BREAKDOWN RESPONSIVE
   ======================================== */

/* Make price breakdown responsive on mobile */
@media (max-width: 768px) {
    .price-breakdown-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .price-row {
        width: 100%;
        justify-content: space-between;
    }
    
    .price-row + .price-row {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--overlay-medium);
    }
}

/* ========================================
   TINYMCE EDITOR STYLING
   ======================================== */

/* TinyMCE Dark Theme Styling */
.tox .tox-tinymce {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--bg-secondary) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

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

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

.tox .tox-tbtn:hover {
    background: var(--overlay-light) !important;
    color: var(--text-primary) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background: var(--btn-primary-bg) !important;
    color: var(--white) !important;
}

.tox .tox-tbtn svg {
    fill: var(--text-primary) !important;
}

.tox .tox-tbtn--enabled svg {
    fill: var(--white) !important;
}

.tox .tox-statusbar {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.tox .tox-edit-area__iframe {
    background-color: var(--input-bg) !important;
}

.tox .tox-menubar,
.tox .tox-menu {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

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

.tox .tox-collection__item:hover {
    background: var(--overlay-light) !important;
}

.tox .tox-collection__item--active {
    background: var(--btn-primary-bg) !important;
    color: var(--white) !important;
}

.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__body,
.tox .tox-dialog__footer {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-listboxfield .tox-listbox--select {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.tox .tox-label {
    color: var(--text-secondary) !important;
}

.tox .tox-button {
    background: var(--btn-secondary-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.tox .tox-button:hover {
    background: var(--btn-secondary-hover) !important;
}

.tox .tox-button--primary {
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--white) !important;
}

.tox .tox-button--primary:hover {
    background: var(--btn-primary-hover) !important;
}

/* ============================================
   BULK ACCOUNT MODAL
   ============================================ */

.bulk-account-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bulk-account-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-xl);
}

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

.bulk-modal-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-primary);
}

.bulk-modal-title i {
    color: #10b981;
}

.bulk-info-box {
    margin-bottom: var(--spacing-lg);
}

.bulk-info-box strong {
    display: block;
    margin-bottom: var(--spacing-sm);
}

.bulk-info-box p {
    margin: var(--spacing-sm) 0;
    font-size: 0.875rem;
}

.bulk-info-box code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--warning-color);
}

.bulk-info-box ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    font-size: 0.875rem;
}

.bulk-code-example {
    background: var(--bg-tertiary);
    padding: var(--spacing-sm);
    border-radius: 4px;
    display: block;
    margin-top: 4px;
    color: #10b981;
    font-family: monospace;
}

.bulk-skip-duplicates {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(255, 159, 0, 0.1);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--warning-color);
}

.bulk-skip-duplicates span {
    display: flex;
    flex-direction: column;
}

.bulk-skip-duplicates small {
    color: var(--text-secondary);
}

.bulk-promotional-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(5, 150, 105, 0.1);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--btn-primary-bg);
}

.bulk-promotional-section span {
    display: flex;
    flex-direction: column;
}

.bulk-promotional-section small {
    color: var(--text-secondary);
}

.bulk-promotional-input {
    display: none;
    margin-top: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.bulk-account-count-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.bulk-account-count-header label {
    margin: 0;
}

.bulk-account-count {
    font-weight: 600;
    color: #10b981;
    font-size: 0.875rem;
}

.bulk-accounts-textarea {
    font-family: monospace;
    font-size: 0.875rem;
}

.bulk-validation-feedback {
    margin-top: var(--spacing-sm);
}

.bulk-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.bulk-submit-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

@media (max-width: 768px) {
    .bulk-account-modal-content {
        width: 95%;
        max-height: 95vh;
        padding: var(--spacing-lg);
    }
    
    .bulk-modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .bulk-modal-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .bulk-modal-actions button {
        width: 100%;
    }
}

/* ============================================
   Description Generator Modal
   ============================================ */

.description-generator-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: var(--spacing-lg);
}

.description-generator-modal.show {
    opacity: 1;
}

.description-generator-content {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.description-generator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    border-bottom: 2px solid var(--border-color);
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(16, 185, 129, 0.05));
}

.description-generator-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.description-generator-title i {
    color: var(--btn-primary-bg);
    font-size: 1.75rem;
}

.description-generator-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

/* Method Selector */
.description-method-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.method-tab {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-secondary);
    font-weight: 600;
}

.method-tab i {
    font-size: 2rem;
    transition: all 0.3s ease;
}

.method-tab:hover {
    border-color: var(--btn-primary-bg);
    background: rgba(5, 150, 105, 0.05);
    transform: translateY(-2px);
}

.method-tab.active {
    border-color: var(--btn-primary-bg);
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2), rgba(16, 185, 129, 0.1));
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.3);
}

.method-tab.active i {
    color: var(--btn-primary-bg);
    transform: scale(1.1);
}

/* Generation Methods */
.generation-method {
    display: none;
    animation: fadeIn 0.3s ease;
}

.generation-method.active {
    display: block;
}

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

/* Template Grid */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.template-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
}

.template-card:hover {
    border-color: var(--btn-primary-bg);
    background: rgba(5, 150, 105, 0.05);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.template-card.selected {
    border-color: var(--btn-primary-bg);
    background: rgba(5, 150, 105, 0.1);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

.template-selection-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.template-card.selected .template-selection-indicator {
    opacity: 1;
    transform: scale(1);
}

.template-selection-indicator i {
    color: white;
    font-size: 0.875rem;
    font-weight: bold;
}

.template-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--btn-primary-bg), #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.template-icon i {
    font-size: 1.75rem;
    color: white;
}

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

.template-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.template-card .btn-secondary {
    width: 100%;
    margin-top: auto;
}

/* Loading Overlay */
.generator-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: var(--radius-xl);
}

.generator-loading-content {
    text-align: center;
    color: var(--text-primary);
}

.generator-loading-content i {
    font-size: 3rem;
    color: var(--btn-primary-bg);
    animation: spin 1s linear infinite;
    display: block;
    margin-bottom: var(--spacing-md);
}

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

.generator-loading-content p {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.generator-loading-content small {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* AI Options Grid */
.ai-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.ai-options-grid .form-group {
    margin-bottom: 0;
}

.ai-options-grid .form-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.ai-options-grid .form-label i {
    color: var(--btn-primary-bg);
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .description-generator-content {
        max-width: 95%;
        max-height: 90vh;
    }
    
    .description-generator-header {
        padding: var(--spacing-lg);
    }
    
    .description-generator-title {
        font-size: 1.25rem;
    }
    
    .description-generator-body {
        padding: var(--spacing-lg);
    }
    
    .description-method-selector {
        grid-template-columns: 1fr;
    }
    
    .template-grid {
        grid-template-columns: 1fr;
    }
    
    .method-tab {
        padding: var(--spacing-md);
    }
    
    .method-tab i {
        font-size: 1.5rem;
    }
}

/* RTL Support */
[dir="rtl"] .description-generator-title {
    flex-direction: row-reverse;
}

[dir="rtl"] .method-tab {
    text-align: right;
}

[dir="rtl"] .template-selection-indicator {
    right: auto;
    left: 12px;
}

[dir="rtl"] .template-card {
    text-align: right;
}

/* ========================================
   MEMBER PROFILE LISTINGS - FILTERS & GRID
   ======================================== */

/* Filters Section */
.member-listings-filters {
    margin-bottom: var(--spacing-xl);
}

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

.member-filters-toggle {
    position: relative;
}

.member-filters-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--btn-primary-bg);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
}

.member-listings-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.member-listings-count span {
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

/* Filters Panel */
.member-filters-panel {
    display: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.member-filters-panel.active {
    display: block;
    animation: slideDown 0.3s ease;
}

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

.member-filter-group {
    margin-bottom: var(--spacing-lg);
}

.member-filter-group:last-child {
    margin-bottom: 0;
}

.member-filter-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.member-filter-label i {
    color: var(--btn-primary-bg);
    font-size: 1rem;
}

.member-filter-input {
    width: 100%;
}

.member-price-range {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.member-price-range .member-filter-input {
    flex: 1;
}

.member-price-separator {
    color: var(--text-tertiary);
    font-weight: var(--font-medium);
}

.member-filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.member-filter-checkboxes .form-checkbox-label {
    flex: 0 0 calc(50% - var(--spacing-sm) / 2);
    margin: 0;
}

.member-filter-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Member Listings Grid - 2 columns layout */
.member-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* Member Listing Card */
.member-listing-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.member-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--btn-primary-bg);
}

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

.member-listing-card-header .platform-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

.member-listing-card-header .platform-name {
    font-size: var(--font-size-sm);
}

.member-listing-card-header .listing-username-small {
    font-size: var(--font-size-xs);
}

.member-listing-card-body {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Price Display - Improved Design */
.member-listing-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.member-listing-price-original {
    text-decoration: line-through;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

.member-listing-price-current {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--btn-primary-bg);
    line-height: 1.2;
}

.member-listing-discount {
    background: var(--error-color);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: var(--font-bold);
}

.member-listing-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.member-listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

.member-listing-badges .badge-small {
    padding: 2px 6px;
    font-size: 0.65rem;
}

.badge-instant {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success-color);
}

.badge-manual {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
}

.member-listing-card-footer {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.member-listing-card-footer .btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
}

/* No Results */
.member-no-results {
    grid-column: 1 / -1;
}

/* Responsive - Mobile 2 columns */
@media (max-width: 768px) {
    .member-listings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .member-listing-card-header {
        padding: var(--spacing-sm);
    }
    
    .member-listing-card-header .platform-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .member-listing-card-header .platform-name {
        font-size: var(--font-size-xs);
    }
    
    .member-listing-card-header .listing-username-small {
        font-size: 0.65rem;
    }
    
    .member-listing-card-body {
        padding: var(--spacing-sm);
    }
    
    .member-listing-price-current {
        font-size: 1.125rem;
    }
    
    .member-listing-price-original {
        font-size: var(--font-size-xs);
    }
    
    .member-listing-discount {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
    
    .member-listing-description {
        font-size: 0.65rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .member-listing-badges .badge-small {
        padding: 1px 4px;
        font-size: 0.6rem;
    }
    
    .member-listing-card-footer {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .member-listing-card-footer .btn-sm {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.65rem;
    }
    
    .member-filters-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .member-filter-checkboxes .form-checkbox-label {
        flex: 0 0 100%;
    }
}

@media (max-width: 480px) {
    .member-listings-grid {
        gap: var(--spacing-xs);
    }
    
    .member-listing-price-current {
        font-size: 1rem;
    }
}

/* RTL Support for Member Listings */
[dir="rtl"] .member-filters-badge {
    right: auto;
    left: -6px;
}

[dir="rtl"] .member-filter-label {
    flex-direction: row-reverse;
}

[dir="rtl"] .member-listing-price {
    flex-direction: row-reverse;
}

/* ========================================
   MEMBER PROFILE REVIEWS FILTER
   ======================================== */

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

.reviews-filter-buttons {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.reviews-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reviews-filter-btn:hover {
    border-color: var(--btn-primary-bg);
    color: var(--text-primary);
}

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

.reviews-filter-btn i {
    font-size: 1rem;
}

.reviews-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--overlay-light);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: var(--font-bold);
}

.reviews-filter-btn.active .reviews-filter-count {
    background: rgba(255, 255, 255, 0.2);
}

.reviews-filter-count.positive {
    color: var(--success-color);
}

.reviews-filter-count.negative {
    color: var(--error-color);
}

.reviews-filter-btn.active .reviews-filter-count.positive,
.reviews-filter-btn.active .reviews-filter-count.negative {
    color: white;
}

.reviews-showing-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.reviews-showing-count span {
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.reviews-no-results {
    margin-top: var(--spacing-lg);
}

/* Responsive */
@media (max-width: 768px) {
    .reviews-filter-section {
        flex-direction: column;
        align-items: stretch;
    }
    
    .reviews-filter-buttons {
        justify-content: center;
    }
    
    .reviews-filter-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    .reviews-showing-count {
        text-align: center;
    }
}

/* ========================================
   WELCOME PAGE - PLATFORM STATISTICS
   ======================================== */

.platform-stats-section {
    padding: var(--spacing-5xl) 0;
}

/* Stats Header */
.stats-header {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}

.stats-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: var(--radius-full);
    color: var(--btn-primary-bg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
}

.stats-badge i {
    font-size: 0.875rem;
}

.stats-title {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.stats-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

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

/* Stats Card */
.stats-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    text-align: center;
    overflow: hidden;
    transition: all var(--transition-base);
}

.stats-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.stats-card-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.12) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.stats-card:hover .stats-card-glow {
    opacity: 1;
}

.stats-card-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--spacing-lg);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.stats-card-icon i {
    font-size: 2rem;
}

/* Icon Color Variants */
.stats-card-icon.sales {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
}
.stats-card-icon.sales i {
    color: #22c55e;
}

.stats-card-icon.members {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
}
.stats-card-icon.members i {
    color: #3b82f6;
}

.stats-card-icon.orders {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
}
.stats-card-icon.orders i {
    color: #a855f7;
}

.stats-card-icon.products {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.05) 100%);
}
.stats-card-icon.products i {
    color: #f97316;
}

.stats-card-number {
    font-size: 2.5rem;
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 1;
}

.stats-card-label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.stats-card-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ========================================
   WELCOME PAGE - TOP MEMBERS (SELLERS/BUYERS)
   ======================================== */

.top-members-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-md);
}

.top-member-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-fast);
    position: relative;
}

.top-member-card:hover {
    border-color: var(--btn-primary-bg);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.top-member-rank {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.top-member-rank.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
}

.top-member-rank.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #1a1a1a;
}

.top-member-rank.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #8B4513);
    color: white;
}

.top-member-rank i {
    font-size: 0.875rem;
}

.top-member-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    position: relative;
    margin-top: var(--spacing-md);
}

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

.top-member-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-primary-bg);
    color: white;
    font-size: 1.25rem;
    font-weight: var(--font-bold);
}

.top-member-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--bg-secondary);
    overflow: hidden;
}

.top-member-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.top-member-info {
    text-align: center;
}

.top-member-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.top-member-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.top-member-stat i {
    color: var(--btn-primary-bg);
}

/* ========================================
   WELCOME PAGE - FEATURED PRODUCTS TABS
   ======================================== */

.featured-products-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.featured-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.featured-tab-btn:hover {
    border-color: var(--btn-primary-bg);
    color: var(--text-primary);
}

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

.featured-tab-btn i {
    font-size: 1.125rem;
}

.featured-tab-count {
    background: var(--overlay-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: var(--font-bold);
}

.featured-tab-btn.active .featured-tab-count {
    background: rgba(255, 255, 255, 0.2);
}

.featured-tab-content {
    display: none;
}

.featured-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

.featured-view-all {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.empty-state-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    text-align: center;
    color: var(--text-secondary);
}

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

.empty-state-small p {
    font-size: var(--font-size-base);
}

/* Responsive - Platform Stats */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .stats-header {
        margin-bottom: var(--spacing-2xl);
    }
    
    .stats-title {
        font-size: 1.75rem;
    }
    
    .stats-description {
        font-size: var(--font-size-base);
    }
    
    .stats-card {
        padding: var(--spacing-xl);
    }
    
    .stats-card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: var(--spacing-md);
    }
    
    .stats-card-icon i {
        font-size: 1.5rem;
    }
    
    .stats-card-number {
        font-size: 2rem;
    }
    
    .stats-card-label {
        font-size: var(--font-size-sm);
    }
    
    .stats-card-desc {
        font-size: var(--font-size-xs);
    }
    
    .featured-products-tabs {
        justify-content: center;
    }
    
    .featured-tab-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .featured-tab-btn i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .top-members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .top-member-avatar {
        width: 48px;
        height: 48px;
    }
    
    .top-member-name {
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   TOP SELLERS PAGE - LEADERBOARD STYLE
   ======================================== */

/* Leaderboard Container */
.leaderboard-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* Leaderboard Header */
.leaderboard-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.leaderboard-title {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.leaderboard-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Podium Section - Top 3 */
.leaderboard-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl) 0;
}

/* Podium Item */
.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: all var(--transition-base);
}

.podium-item:hover {
    transform: translateY(-4px);
}

/* Podium positions */
.podium-item.rank-1 {
    order: 2;
}

.podium-item.rank-2 {
    order: 1;
}

.podium-item.rank-3 {
    order: 3;
}

/* Podium Avatar Container */
.podium-avatar-container {
    position: relative;
    margin-bottom: var(--spacing-sm);
}

/* Crown for #1 */
.podium-crown {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    z-index: 2;
}

.podium-crown i {
    color: var(--btn-primary-bg);
}

/* Podium Avatar */
.podium-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    position: relative;
}

.podium-item.rank-1 .podium-avatar {
    width: 88px;
    height: 88px;
    border-color: var(--btn-primary-bg);
}

.podium-item.rank-2 .podium-avatar,
.podium-item.rank-3 .podium-avatar {
    border-color: var(--text-tertiary);
}

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

.podium-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    color: var(--text-secondary);
}

.podium-item.rank-1 .podium-avatar-placeholder {
    font-size: 1.5rem;
}

/* Podium Rank Badge */
.podium-rank-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    color: var(--bg-primary);
    z-index: 2;
}

.podium-item.rank-1 .podium-rank-badge {
    background: var(--btn-primary-bg);
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
}

.podium-item.rank-2 .podium-rank-badge {
    background: var(--text-secondary);
}

.podium-item.rank-3 .podium-rank-badge {
    background: var(--text-tertiary);
    color: var(--text-primary);
}

/* Podium Info */
.podium-info {
    text-align: center;
    margin-top: var(--spacing-sm);
}

.podium-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--btn-primary-bg);
}

.podium-stats i {
    font-size: 0.625rem;
}

/* Stacked Podium Layout - 1st on top, 2nd & 3rd below */
.leaderboard-podium-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-xl) 0;
}

/* First row - #1 alone at top */
.podium-first-row {
    display: flex;
    justify-content: center;
}

.podium-first-row .podium-item {
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, rgba(5, 150, 105, 0.05) 100%);
    border: 1px solid rgba(5, 150, 105, 0.3);
    border-radius: var(--radius-xl);
}

.podium-first-row .podium-item:hover {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-color: rgba(5, 150, 105, 0.5);
}

/* Second row - #2 & #3 side by side */
.podium-second-row {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
}

.podium-second-row .podium-item {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.podium-second-row .podium-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/* Stacked layout - remove ordering */
.leaderboard-podium-stacked .podium-item.rank-1,
.leaderboard-podium-stacked .podium-item.rank-2,
.leaderboard-podium-stacked .podium-item.rank-3 {
    order: unset;
}

/* Responsive for stacked podium */
@media (max-width: 768px) {
    .leaderboard-podium-stacked {
        gap: var(--spacing-lg);
        padding: var(--spacing-md) 0;
    }
    
    .podium-first-row .podium-item {
        padding: var(--spacing-md) var(--spacing-xl);
    }
    
    .podium-first-row .podium-avatar {
        width: 70px;
        height: 70px;
    }
    
    .podium-first-row .rank-1 .podium-avatar {
        width: 80px;
        height: 80px;
    }
    
    .podium-second-row {
        gap: var(--spacing-md);
        width: 100%;
        justify-content: center;
    }
    
    .podium-second-row .podium-item {
        padding: var(--spacing-sm) var(--spacing-md);
        flex: 0 1 auto;
        min-width: 120px;
    }
    
    .podium-second-row .podium-avatar {
        width: 50px;
        height: 50px;
    }
    
    .podium-second-row .podium-rank-badge {
        width: 20px;
        height: 20px;
        font-size: 0.625rem;
    }
    
    .podium-second-row .podium-name {
        font-size: var(--font-size-xs);
        max-width: 70px;
    }
    
    .podium-second-row .podium-stats {
        font-size: 0.625rem;
    }
}

@media (max-width: 400px) {
    .podium-second-row {
        gap: var(--spacing-sm);
    }
    
    .podium-second-row .podium-item {
        min-width: 100px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .podium-second-row .podium-avatar {
        width: 44px;
        height: 44px;
    }
    
    .podium-second-row .podium-name {
        max-width: 60px;
    }
}

/* Leaderboard List */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Leaderboard Item */
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
}

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

/* Highlighted item (current user) */
.leaderboard-item.highlighted {
    background: rgba(var(--accent-primary-rgb), 0.15);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
}

/* Leaderboard Rank */
.leaderboard-rank {
    width: 24px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    text-align: center;
}

/* Leaderboard Avatar */
.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

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

.leaderboard-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
}

/* Leaderboard Name */
.leaderboard-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* Leaderboard Points/Sales */
.leaderboard-points {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.leaderboard-points span {
    color: var(--text-secondary);
    font-weight: var(--font-regular);
}

/* Mobile Responsive for Leaderboard List */
@media (max-width: 768px) {
    .leaderboard-item {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .leaderboard-rank {
        width: 20px;
        font-size: var(--font-size-xs);
    }
    
    .leaderboard-avatar {
        width: 36px;
        height: 36px;
    }
    
    .leaderboard-name {
        font-size: var(--font-size-xs);
    }
    
    .leaderboard-points {
        font-size: var(--font-size-xs);
    }
}

/* Filters - Pill Style */
.leaderboard-filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.leaderboard-filter-btn {
    padding: var(--spacing-xs) var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.leaderboard-filter-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

/* Load More Button */
.leaderboard-load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

/* Empty State */
.leaderboard-empty {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-lg);
}

.leaderboard-empty-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
}

.leaderboard-empty-icon i {
    font-size: 1.5rem;
    color: var(--text-tertiary);
}

.leaderboard-empty h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.leaderboard-empty p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 480px) {
    .leaderboard-container {
        padding: var(--spacing-md);
    }
    
    .podium-avatar {
        width: 60px;
        height: 60px;
    }
    
    .podium-item.rank-1 .podium-avatar {
        width: 72px;
        height: 72px;
    }
    
    .podium-name {
        max-width: 70px;
        font-size: var(--font-size-xs);
    }
    
    .leaderboard-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .leaderboard-filters {
        gap: var(--spacing-xs);
    }
    
    .leaderboard-filter-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
}