/* ===================================
   Settings Profile Styles
   Modern Sidebar Layout with Fixed Header
   Dark Theme with RTL/LTR Support
   =================================== */

/* ==================== MAIN WRAPPER ==================== */
.settings-page-wrapper {
    @apply min-h-screen bg-gray-900;
}

/* ==================== FIXED HEADER ==================== */
.settings-header-fixed {
    @apply relative bg-gray-800 shadow-xl;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

/* Banner Section */
.settings-banner {
    @apply relative h-48 md:h-64 overflow-hidden;
}

.banner-image {
    @apply w-full h-full object-cover;
}

.banner-overlay {
    @apply absolute inset-0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* Profile Info Section */
.settings-profile-info {
    @apply relative px-4 md:px-8 pb-6;
    margin-top: -80px; /* Pull up to overlap banner */
}

.profile-content-wrapper {
    @apply flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6;
}

/* RTL Support for Profile Content */
[dir="rtl"] .profile-content-wrapper {
    @apply md:flex-row-reverse;
}

/* Avatar */
.profile-avatar-container {
    @apply relative;
    z-index: 10;
}

.profile-avatar-img {
    @apply w-40 h-40 rounded-full object-cover;
    border: 5px solid rgba(17, 24, 39, 1); /* Solid dark border */
    box-shadow:
        0 0 0 2px rgba(139, 92, 246, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.5);
    background-color: rgba(31, 41, 55, 1);
}

.avatar-status-badge {
    @apply absolute w-6 h-6 rounded-full;
    border: 3px solid rgba(31, 41, 55, 0.95);
    animation: pulse 2s infinite;
}

/* RTL: Badge position */
[dir="rtl"] .avatar-status-badge {
    left: 1px;
    right: auto;
}

[dir="ltr"] .avatar-status-badge {
    bottom: 1px;
    right: 1px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.status-active {
    @apply bg-green-500;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

.status-inactive {
    @apply bg-gray-600;
}

/* User Info */
.profile-user-info {
    @apply flex-1 text-center md:text-left;
}

/* RTL Support for User Info */
[dir="rtl"] .profile-user-info {
    @apply md:text-right;
}

.user-display-name {
    @apply text-2xl md:text-3xl font-bold text-white mb-2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.user-meta {
    @apply flex flex-wrap items-center justify-center md:justify-start gap-3 text-sm text-gray-300;
}

/* RTL Support for Meta */
[dir="rtl"] .user-meta {
    @apply md:justify-end;
}

.meta-item {
    @apply flex items-center gap-2;
}

.meta-item i {
    @apply text-purple-400;
}

/* Quick Stats Grid */
.profile-stats-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3 w-full max-w-4xl;
}

.stat-card {
    @apply relative flex flex-col items-center p-2.5 md:p-3 rounded-lg md:rounded-xl;
    background: rgba(31, 41, 55, 0.6);
    border: 1.5px solid;
    transition: all 0.3s ease;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.8;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Posts Card - Blue */
.stat-posts {
    border-color: rgba(59, 130, 246, 0.4);
}

.stat-posts::before {
    background: linear-gradient(to right, #3b82f6, #2563eb);
}

.stat-posts:hover {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

/* Likes Card - Pink/Red */
.stat-likes {
    border-color: rgba(236, 72, 153, 0.4);
}

.stat-likes::before {
    background: linear-gradient(to right, #ec4899, #db2777);
}

.stat-likes:hover {
    background: rgba(236, 72, 153, 0.1);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
}

/* Thanks Card - Green */
.stat-thanks {
    border-color: rgba(34, 197, 94, 0.4);
}

.stat-thanks::before {
    background: linear-gradient(to right, #22c55e, #16a34a);
}

.stat-thanks:hover {
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
}

/* Broken Rules Card - Warning/Danger */
.stat-rules {
    border-color: rgba(251, 191, 36, 0.4);
}

.stat-rules::before {
    background: linear-gradient(to right, #fbbf24, #f59e0b);
}

.stat-rules:hover {
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}

/* Critical State (5/5 rules) - Red */
.stat-critical {
    border-color: rgba(239, 68, 68, 0.6) !important;
    animation: pulseWarning 2s infinite;
}

.stat-critical::before {
    background: linear-gradient(to right, #ef4444, #dc2626) !important;
}

.stat-critical:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5) !important;
}

@keyframes pulseWarning {
    0%, 100% {
        border-color: rgba(239, 68, 68, 0.6);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        border-color: rgba(239, 68, 68, 0.9);
        box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.3);
    }
}

/* Stat Icon */
.stat-icon {
    @apply w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center mb-1 md:mb-2;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.stat-icon i {
    @apply text-base md:text-xl;
}

.stat-posts .stat-icon i {
    color: #3b82f6;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.stat-likes .stat-icon i {
    color: #ec4899;
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}

.stat-thanks .stat-icon i {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.stat-rules .stat-icon i {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.stat-critical .stat-icon i {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Stat Content */
.stat-content {
    @apply flex flex-col items-center;
}

.stat-value {
    @apply text-base md:text-xl font-bold text-white mb-0.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.stat-label {
    @apply text-[9px] md:text-[10px] text-gray-300 uppercase tracking-wider;
}

/* Warning Message for Critical */
.stat-warning {
    @apply mt-1.5 pt-1.5 border-t border-red-500/30 text-center w-full;
}

.stat-warning {
    @apply flex items-center justify-center gap-1 text-[9px] md:text-[10px] text-red-400;
    animation: blink 1.5s infinite;
}

.stat-warning i {
    @apply text-[8px] md:text-xs;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.6; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .profile-stats-grid {
        @apply grid-cols-2 gap-2;
    }

    .stat-card {
        @apply p-2;
    }

    .stat-icon {
        @apply w-8 h-8;
    }

    .stat-icon i {
        @apply text-sm;
    }

    .stat-value {
        @apply text-sm;
    }

    .stat-label {
        @apply text-[8px];
    }
}

@media (max-width: 640px) {
    .stat-warning {
        @apply text-[9px] gap-0.5;
    }

    .stat-warning span {
        @apply hidden;
    }

    .stat-warning::after {
        content: 'Account at Risk!';
        @apply text-[9px];
    }
}

/* ==================== MAIN CONTAINER ==================== */
.settings-main-container {
    @apply max-w-7xl mx-auto px-4 md:px-8 py-8;
}

.settings-layout-grid {
    @apply grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6;
}

/* RTL: Reverse grid columns */
[dir="rtl"] .settings-layout-grid {
    @apply lg:grid-cols-[1fr_280px];
}

/* ==================== SIDEBAR ==================== */
.settings-sidebar {
    @apply bg-gray-800 rounded-xl shadow-xl p-4;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Desktop: Sticky Sidebar */
@media (min-width: 1024px) {
    .settings-sidebar {
        @apply sticky top-4 h-fit;
    }
}

.sidebar-nav {
    @apply space-y-2;
}

.sidebar-nav-item {
    @apply w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-all duration-300;
    @apply text-gray-300;
    position: relative;
    overflow: hidden;
}

/* RTL Support for Sidebar Items */
[dir="rtl"] .sidebar-nav-item {
    @apply text-right flex-row-reverse;
}

.sidebar-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #a855f7, #3b82f6);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

/* LTR: Border on left */
[dir="ltr"] .sidebar-nav-item::before {
    left: 0;
}

/* RTL: Border on right */
[dir="rtl"] .sidebar-nav-item::before {
    right: 0;
}

.sidebar-nav-item:hover {
    @apply bg-gray-700 text-purple-300;
}

.sidebar-nav-item:hover::before {
    transform: scaleY(1);
}

.sidebar-nav-item.active {
    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
    @apply text-purple-300 font-semibold;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* RTL: Reverse gradient direction */
[dir="rtl"] .sidebar-nav-item.active {
    background: linear-gradient(to left, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1));
}

/* LTR: Active border on left */
[dir="ltr"] .sidebar-nav-item.active {
    box-shadow: inset 4px 0 0 0 #a855f7;
}

/* RTL: Active border on right */
[dir="rtl"] .sidebar-nav-item.active {
    box-shadow: inset -4px 0 0 0 #a855f7;
}

.sidebar-nav-item i {
    @apply text-lg w-5 text-center;
}

.sidebar-nav-item span {
    @apply font-medium;
}

/* Mobile: Horizontal Tabs */
@media (max-width: 1023px) {
    .settings-sidebar {
        @apply sticky top-0 z-10 rounded-none shadow-xl;
        background: rgba(31, 41, 55, 0.98);
        backdrop-filter: blur(10px);
        padding: 0.5rem 0.75rem;
    }

    .sidebar-nav {
        @apply flex overflow-x-auto gap-1.5 pb-0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .sidebar-nav::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .sidebar-nav-item {
        @apply flex-shrink-0 min-w-max px-3 py-2 text-sm gap-2;
        border-radius: 0.5rem;
    }

    .sidebar-nav-item::before {
        display: none;
    }

    .sidebar-nav-item i {
        @apply text-base;
    }

    .sidebar-nav-item span {
        @apply text-xs font-medium;
    }

    .sidebar-nav-item.active {
        @apply text-white shadow-lg;
        background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    }

    /* RTL: Reverse gradient on mobile */
    [dir="rtl"] .sidebar-nav-item.active {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    }
}

/* ==================== CONTENT AREA ==================== */
.settings-content-area {
    @apply bg-gray-800 rounded-xl shadow-xl p-6 md:p-8;
    min-height: 500px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Alerts */
.alert {
    @apply flex items-center gap-3 p-4 rounded-lg mb-6;
    animation: fadeIn 0.3s ease-in-out;
}

/* RTL Support for Alerts */
[dir="rtl"] .alert {
    @apply flex-row-reverse;
}

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

.alert-success {
    @apply bg-green-900/30 border border-green-600/50 text-green-300;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.alert-error {
    @apply bg-red-900/30 border border-red-600/50 text-red-300;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.alert i {
    @apply text-xl;
}

/* Tab Content */
.tab-content-wrapper {
    @apply space-y-6;
}

.content-section {
    @apply space-y-2;
}

.section-title {
    @apply text-2xl font-bold text-white flex items-center gap-3;
}

/* RTL Support for Section Title */
[dir="rtl"] .section-title {
    @apply flex-row-reverse;
}

.section-title::before {
    content: '';
    @apply w-1 h-8 bg-gradient-to-b from-purple-500 to-blue-500 rounded;
}

.section-description {
    @apply text-sm text-gray-400 mt-1;
}

/* ==================== INFO GRID (Profile Tab) ==================== */
.info-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4 mt-6;
}

.info-card {
    @apply flex items-center gap-4 p-4 rounded-lg;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.3);
    transition: all 0.3s ease;
}

.info-card:hover {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateX(4px);
}

[dir="rtl"] .info-card:hover {
    transform: translateX(-4px);
}

.info-card-highlight {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.info-card-highlight:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
}

.info-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0;
    background: rgba(255, 255, 255, 0.05);
}

.info-icon i {
    @apply text-xl text-purple-400;
}

.info-content {
    @apply flex flex-col flex-1 min-w-0;
}

.info-label {
    @apply text-xs text-gray-400 uppercase tracking-wide mb-1;
}

.info-value {
    @apply text-base text-white font-medium truncate;
}

/* Role Badges */
.role-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
}

/* Staff Roles - Red Shades */
.role-admin {
    @apply bg-red-500/20 text-red-400 border border-red-500/30;
}

.role-owner {
    @apply bg-red-600/25 text-red-300 border border-red-600/40;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
}

.role-developer {
    @apply bg-purple-600/20 text-purple-300 border border-purple-600/30;
}

.role-supervisor {
    @apply bg-orange-500/20 text-orange-400 border border-orange-500/30;
}

/* Game Masters - Blue/Cyan Shades */
.role-gm {
    @apply bg-blue-500/20 text-blue-400 border border-blue-500/30;
}

.role-ga {
    @apply bg-cyan-500/20 text-cyan-400 border border-cyan-500/30;
}

.role-em {
    @apply bg-teal-500/20 text-teal-400 border border-teal-500/30;
}

/* Special Roles - Gold/Green Shades */
.role-premium {
    @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30;
}

.role-creator {
    @apply bg-pink-500/20 text-pink-400 border border-pink-500/30;
}

.role-supporter {
    @apply bg-green-500/20 text-green-400 border border-green-500/30;
}

/* Regular Users - Gray Shades */
.role-user {
    @apply bg-gray-500/20 text-gray-400 border border-gray-500/30;
}

/* Responsive for Info Cards */
@media (max-width: 768px) {
    .info-grid {
        @apply grid-cols-1 gap-3;
    }

    .info-card {
        @apply p-3 gap-3;
    }

    .info-icon {
        @apply w-10 h-10;
    }

    .info-icon i {
        @apply text-lg;
    }

    .info-value {
        @apply text-sm;
    }

    .info-label {
        @apply text-[10px];
    }
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    .settings-banner {
        @apply h-32;
    }

    .settings-profile-info {
        margin-top: -60px;
    }

    .profile-avatar-img {
        @apply w-32 h-32;
        border-width: 4px;
    }

    .avatar-status-badge {
        @apply w-5 h-5;
    }

    .user-display-name {
        @apply text-xl;
    }

    .profile-stats-inline {
        @apply gap-4;
    }

    .stat-number {
        @apply text-lg;
    }

    .stat-text {
        @apply text-[10px];
    }

    .settings-content-area {
        @apply p-4 rounded-t-none;
    }

    .section-title {
        @apply text-xl;
    }
}

@media (max-width: 640px) {
    .profile-content-wrapper {
        @apply gap-3;
    }

    .profile-stats-grid {
        @apply grid-cols-2 gap-1.5;
    }

    .stat-card {
        @apply p-1.5;
    }

    .stat-icon {
        @apply w-7 h-7 mb-1;
    }

    .stat-icon i {
        @apply text-xs;
    }

    .stat-value {
        @apply text-xs;
    }

    .stat-label {
        @apply text-[7px];
    }

    .stat-warning {
        @apply text-[8px] gap-0.5 mt-1 pt-1;
    }

    .stat-warning span {
        display: none;
    }

    .stat-warning::after {
        content: 'Banned!';
        @apply text-[8px] font-bold;
    }

    .user-meta {
        @apply flex-col gap-2;
    }

    .settings-content-area {
        @apply p-3;
    }
}

/* ============================================
   PRIVACY SETTINGS STYLES
   ============================================ */

/* Privacy Toggle Card */
.privacy-toggle-card {
    @apply bg-gray-800/50 rounded-lg p-6 border border-gray-700/50;
    @apply transition-all duration-300;
}

.privacy-toggle-card:hover {
    @apply border-purple-500/30 bg-gray-800/70;
}

/* Privacy Icon */
.privacy-icon {
    @apply w-14 h-14 rounded-full flex items-center justify-center;
    @apply bg-gray-700/50 transition-all duration-300;
}

.privacy-toggle-card:hover .privacy-icon {
    @apply scale-110;
}

/* Toggle Switch Styles */
.toggle-switch {
    @apply relative inline-block w-14 h-7 cursor-pointer;
}

.toggle-switch input {
    @apply opacity-0 w-0 h-0;
}

.toggle-slider {
    @apply absolute cursor-pointer inset-0 bg-gray-600 rounded-full;
    @apply transition-all duration-300;
}

.toggle-slider:before {
    @apply absolute content-[''] h-5 w-5 left-1 bottom-1;
    @apply bg-white rounded-full transition-all duration-300;
}

.toggle-switch input:checked + .toggle-slider {
    @apply bg-green-500;
}

.toggle-switch input:checked + .toggle-slider:before {
    @apply translate-x-7;
}

.toggle-switch input:focus + .toggle-slider {
    @apply ring-2 ring-purple-500/50;
}

/* RTL Support for Toggle */
[dir="rtl"] .toggle-slider:before {
    @apply left-auto right-1;
}

[dir="rtl"] .toggle-switch input:checked + .toggle-slider:before {
    @apply -translate-x-7;
}

/* Responsive Privacy Settings */
@media (max-width: 768px) {
    .privacy-toggle-card {
        @apply p-4;
    }

    .privacy-icon {
        @apply w-12 h-12;
    }

    .privacy-icon i {
        @apply text-xl;
    }

    .toggle-switch {
        @apply w-12 h-6;
    }

    .toggle-slider:before {
        @apply h-4 w-4;
    }

    .toggle-switch input:checked + .toggle-slider:before {
        @apply translate-x-6;
    }

    [dir="rtl"] .toggle-switch input:checked + .toggle-slider:before {
        @apply -translate-x-6;
    }
}

/* ==================== SECURITY TAB FORMS ==================== */
.form-group {
    @apply space-y-2;
}

.form-label {
    @apply flex items-center gap-2 text-sm font-medium text-gray-300;
}

.form-label i {
    @apply text-purple-400;
}

.form-input {
    @apply w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500;
    @apply focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20;
    @apply transition-all duration-200;
}

.form-input:hover {
    @apply border-gray-600;
}

.form-error {
    @apply text-red-400 text-xs mt-1 flex items-center gap-1;
}

.form-error::before {
    content: '⚠';
    @apply text-red-500;
}

.form-grid {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

/* Upload Section */
.upload-section {
    @apply flex flex-col md:flex-row gap-6 p-6 bg-gray-800/30 border border-gray-700/50 rounded-xl;
}

[dir="rtl"] .upload-section {
    @apply md:flex-row-reverse;
}

.upload-preview {
    @apply flex-shrink-0 w-full md:w-40 h-40 bg-gray-800 border-2 border-dashed border-gray-700 rounded-lg overflow-hidden;
    @apply flex items-center justify-center;
}

.upload-preview.banner-preview {
    @apply w-full md:w-80 h-32;
}

.preview-image {
    @apply w-full h-full object-cover;
}

.preview-image-banner {
    @apply w-full h-full object-cover;
}

.preview-placeholder {
    @apply flex flex-col items-center justify-center gap-2 text-gray-600;
}

.preview-placeholder i {
    @apply text-4xl;
}

.preview-placeholder span {
    @apply text-sm;
}

.upload-controls {
    @apply flex-1 flex flex-col justify-center gap-4;
}

.upload-button {
    @apply inline-flex items-center gap-2 px-6 py-3 bg-purple-600/20 hover:bg-purple-600/30 border border-purple-500/30;
    @apply text-purple-400 rounded-lg cursor-pointer transition-all duration-200;
    @apply hover:border-purple-500/50 hover:shadow-lg hover:shadow-purple-500/10;
}

.upload-button:hover {
    transform: translateY(-1px);
}

.upload-button i {
    @apply text-lg;
}

.upload-loading {
    @apply text-purple-400 text-sm flex items-center gap-2;
}

.upload-loading i {
    @apply animate-spin;
}

/* Submit Button */
.form-actions {
    @apply flex justify-end pt-6 border-t border-gray-700/50;
}

.submit-button {
    @apply px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600;
    @apply text-white font-semibold rounded-lg shadow-lg shadow-purple-500/30;
    @apply hover:shadow-xl hover:shadow-purple-500/40 transition-all duration-200;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
}

.submit-button i {
    @apply mr-2;
}

[dir="rtl"] .submit-button i {
    @apply mr-0 ml-2;
}

.section-subtitle {
    @apply text-lg font-semibold text-white mb-2;
}

/* Success/Error Messages */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    @apply bg-green-500/20 border border-green-500/30 text-green-400 px-4 py-3 rounded-lg;
    animation: slideInDown 0.3s ease-out;
}

.alert-error {
    @apply bg-red-500/20 border border-red-500/30 text-red-400 px-4 py-3 rounded-lg;
    animation: slideInDown 0.3s ease-out;
}