/* ===== نظام الأزرار الموحد والمحسن ===== */

/* متغيرات الألوان للأزرار */
:root {
    /* ألوان الأزرار الأساسية */
    --btn-primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-primary-hover: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    --btn-primary-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    --btn-primary-shadow-hover: 0 12px 35px rgba(102, 126, 234, 0.4);
    
    --btn-secondary-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --btn-secondary-hover: linear-gradient(135deg, #e085e7 0%, #e54b5f 100%);
    --btn-secondary-shadow: 0 8px 25px rgba(240, 147, 251, 0.3);
    --btn-secondary-shadow-hover: 0 12px 35px rgba(240, 147, 251, 0.4);
    
    --btn-accent-bg: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --btn-accent-hover: linear-gradient(135deg, #43a1f4 0%, #00e6f4 100%);
    --btn-accent-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
    --btn-accent-shadow-hover: 0 12px 35px rgba(79, 172, 254, 0.4);
    
    --btn-success-bg: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --btn-success-hover: linear-gradient(135deg, #3dd870 0%, #32e8c8 100%);
    --btn-success-shadow: 0 8px 25px rgba(67, 233, 123, 0.3);
    --btn-success-shadow-hover: 0 12px 35px rgba(67, 233, 123, 0.4);
    
    --btn-warning-bg: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --btn-warning-hover: linear-gradient(135deg, #f9658a 0%, #fdd830 100%);
    --btn-warning-shadow: 0 8px 25px rgba(250, 112, 154, 0.3);
    --btn-warning-shadow-hover: 0 12px 35px rgba(250, 112, 154, 0.4);
    
    --btn-danger-bg: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    --btn-danger-hover: linear-gradient(135deg, #ff5a5a 0%, #e54a14 100%);
    --btn-danger-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
    --btn-danger-shadow-hover: 0 12px 35px rgba(255, 107, 107, 0.4);
    
    --btn-ghost-bg: transparent;
    --btn-ghost-hover: rgba(102, 126, 234, 0.1);
    --btn-ghost-border: rgba(102, 126, 234, 0.3);
    --btn-ghost-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    --btn-ghost-shadow-hover: 0 8px 25px rgba(102, 126, 234, 0.2);
    
    /* ألوان الأزرار الشفافة */
    --btn-white-bg: rgba(255, 255, 255, 0.9);
    --btn-white-hover: rgba(255, 255, 255, 1);
    --btn-white-text: #333;
    --btn-white-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    --btn-white-shadow-hover: 0 12px 35px rgba(255, 255, 255, 0.4);
    
    --btn-outline-white-bg: transparent;
    --btn-outline-white-hover: rgba(255, 255, 255, 0.1);
    --btn-outline-white-text: #fff;
    --btn-outline-white-border: rgba(255, 255, 255, 0.5);
    --btn-outline-white-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    --btn-outline-white-shadow-hover: 0 8px 25px rgba(255, 255, 255, 0.2);
    
    /* أحجام الأزرار */
    --btn-xs-padding: 0.5rem 1rem;
    --btn-sm-padding: 0.75rem 1.5rem;
    --btn-md-padding: 1rem 2rem;
    --btn-lg-padding: 1.25rem 2.5rem;
    --btn-xl-padding: 1.5rem 3rem;
    
    /* أحجام الخطوط */
    --btn-xs-text: 0.75rem;
    --btn-sm-text: 0.875rem;
    --btn-md-text: 1rem;
    --btn-lg-text: 1.125rem;
    --btn-xl-text: 1.25rem;
    
    /* نصف قطر الحواف */
    --btn-radius: 1rem;
    --btn-radius-lg: 1.5rem;
    --btn-radius-xl: 2rem;
    
    /* مؤثرات الحركة */
    --btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --btn-transform-hover: translateY(-3px) scale(1.02);
    --btn-transform-active: translateY(-1px) scale(0.98);
}

/* ===== الأزرار الأساسية ===== */

/* الزر الأساسي */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: white;
    background: var(--btn-primary-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-primary-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-primary:hover::before {
    left: 100%;
}

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

.btn-primary:focus {
    outline: none;
    box-shadow: var(--btn-primary-shadow-hover), 0 0 0 4px rgba(102, 126, 234, 0.3);
}

/* الزر الثانوي */
.btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: white;
    background: var(--btn-secondary-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-secondary-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
    box-shadow: var(--btn-secondary-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-secondary:hover::before {
    left: 100%;
}

.btn-secondary:active {
    transform: var(--btn-transform-active);
}

.btn-secondary:focus {
    outline: none;
    box-shadow: var(--btn-secondary-shadow-hover), 0 0 0 4px rgba(240, 147, 251, 0.3);
}

/* الزر المميز */
.btn-accent {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: white;
    background: var(--btn-accent-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-accent-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-accent:hover {
    background: var(--btn-accent-hover);
    box-shadow: var(--btn-accent-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-accent:hover::before {
    left: 100%;
}

.btn-accent:active {
    transform: var(--btn-transform-active);
}

.btn-accent:focus {
    outline: none;
    box-shadow: var(--btn-accent-shadow-hover), 0 0 0 4px rgba(79, 172, 254, 0.3);
}

/* ===== أزرار الحالة ===== */

/* زر النجاح */
.btn-success {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: white;
    background: var(--btn-success-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-success-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-success:hover {
    background: var(--btn-success-hover);
    box-shadow: var(--btn-success-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-success:hover::before {
    left: 100%;
}

.btn-success:active {
    transform: var(--btn-transform-active);
}

.btn-success:focus {
    outline: none;
    box-shadow: var(--btn-success-shadow-hover), 0 0 0 4px rgba(67, 233, 123, 0.3);
}

/* زر التحذير */
.btn-warning {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: white;
    background: var(--btn-warning-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-warning-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-warning:hover {
    background: var(--btn-warning-hover);
    box-shadow: var(--btn-warning-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-warning:hover::before {
    left: 100%;
}

.btn-warning:active {
    transform: var(--btn-transform-active);
}

.btn-warning:focus {
    outline: none;
    box-shadow: var(--btn-warning-shadow-hover), 0 0 0 4px rgba(250, 112, 154, 0.3);
}

/* زر الخطر */
.btn-danger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: white;
    background: var(--btn-danger-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-danger-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-danger:hover {
    background: var(--btn-danger-hover);
    box-shadow: var(--btn-danger-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-danger:hover::before {
    left: 100%;
}

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

.btn-danger:focus {
    outline: none;
    box-shadow: var(--btn-danger-shadow-hover), 0 0 0 4px rgba(255, 107, 107, 0.3);
}

/* ===== الأزرار الشفافة ===== */

/* زر الشفاف */
.btn-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: #667eea;
    background: var(--btn-ghost-bg);
    border: 2px solid var(--btn-ghost-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-ghost-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s;
}

.btn-ghost:hover {
    background: var(--btn-ghost-hover);
    box-shadow: var(--btn-ghost-shadow-hover);
    transform: var(--btn-transform-hover);
    border-color: #667eea;
}

.btn-ghost:hover::before {
    left: 100%;
}

.btn-ghost:active {
    transform: var(--btn-transform-active);
}

.btn-ghost:focus {
    outline: none;
    box-shadow: var(--btn-ghost-shadow-hover), 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* زر الإطار */
.btn-outline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: #667eea;
    background: transparent;
    border: 2px solid #667eea;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-ghost-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s;
}

.btn-outline:hover {
    background: #667eea;
    color: white;
    box-shadow: var(--btn-primary-shadow);
    transform: var(--btn-transform-hover);
}

.btn-outline:hover::before {
    left: 100%;
}

.btn-outline:active {
    transform: var(--btn-transform-active);
}

.btn-outline:focus {
    outline: none;
    box-shadow: var(--btn-primary-shadow), 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* ===== الأزرار الشفافة للخلفيات الملونة ===== */

/* زر أبيض */
.btn-white {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: var(--btn-white-text);
    background: var(--btn-white-bg);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-white-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    backdrop-filter: blur(10px);
}

.btn-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-white:hover {
    background: var(--btn-white-hover);
    box-shadow: var(--btn-white-shadow-hover);
    transform: var(--btn-transform-hover);
}

.btn-white:hover::before {
    left: 100%;
}

.btn-white:active {
    transform: var(--btn-transform-active);
}

.btn-white:focus {
    outline: none;
    box-shadow: var(--btn-white-shadow-hover), 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* زر إطار أبيض */
.btn-outline-white {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-text);
    font-weight: 600;
    color: var(--btn-outline-white-text);
    background: var(--btn-outline-white-bg);
    border: 2px solid var(--btn-outline-white-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-outline-white-shadow);
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    backdrop-filter: blur(10px);
}

.btn-outline-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.btn-outline-white:hover {
    background: var(--btn-outline-white-hover);
    box-shadow: var(--btn-outline-white-shadow-hover);
    transform: var(--btn-transform-hover);
    border-color: rgba(255, 255, 255, 0.8);
}

.btn-outline-white:hover::before {
    left: 100%;
}

.btn-outline-white:active {
    transform: var(--btn-transform-active);
}

.btn-outline-white:focus {
    outline: none;
    box-shadow: var(--btn-outline-white-shadow-hover), 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* ===== أحجام الأزرار ===== */

/* حجم صغير جداً */
.btn-xs {
    padding: var(--btn-xs-padding);
    font-size: var(--btn-xs-text);
    border-radius: calc(var(--btn-radius) * 0.75);
}

/* حجم صغير */
.btn-sm {
    padding: var(--btn-sm-padding);
    font-size: var(--btn-sm-text);
    border-radius: calc(var(--btn-radius) * 0.875);
}

/* حجم كبير */
.btn-lg {
    padding: var(--btn-lg-padding);
    font-size: var(--btn-lg-text);
    border-radius: var(--btn-radius-lg);
}

/* حجم كبير جداً */
.btn-xl {
    padding: var(--btn-xl-padding);
    font-size: var(--btn-xl-text);
    border-radius: var(--btn-radius-xl);
}

/* ===== حالات الأزرار ===== */

/* زر معطل */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-accent:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-danger:disabled,
.btn-ghost:disabled,
.btn-outline:disabled,
.btn-white:disabled,
.btn-outline-white:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-accent:disabled:hover,
.btn-success:disabled:hover,
.btn-warning:disabled:hover,
.btn-danger:disabled:hover,
.btn-ghost:disabled:hover,
.btn-outline:disabled:hover,
.btn-white:disabled:hover,
.btn-outline-white:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* زر التحميل */
.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== مؤثرات إضافية ===== */

/* تأثير النبض */
.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

/* تأثير التوهج */
.btn-glow {
    position: relative;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-glow:hover::after {
    opacity: 1;
}

/* تأثير الموجة */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-ripple:active::before {
    width: 300px;
    height: 300px;
}

/* ===== استجابة للشاشات الصغيرة ===== */

@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary,
    .btn-accent,
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-ghost,
    .btn-outline,
    .btn-white,
    .btn-outline-white {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .btn-xl {
        padding: 1.25rem 2.5rem;
        font-size: 1.125rem;
    }
}

/* ===== دعم الوضع المظلم ===== */

@media (prefers-color-scheme: dark) {
    .btn-ghost {
        color: #8b9eff;
        border-color: rgba(139, 158, 255, 0.3);
    }
    
    .btn-outline {
        color: #8b9eff;
        border-color: #8b9eff;
    }
    
    .btn-outline:hover {
        background: #8b9eff;
    }
}

/* ===== تحسينات إمكانية الوصول ===== */

@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .btn-secondary,
    .btn-accent,
    .btn-success,
    .btn-warning,
    .btn-danger,
    .btn-ghost,
    .btn-outline,
    .btn-white,
    .btn-outline-white {
        transition: none;
    }
    
    .btn-primary::before,
    .btn-secondary::before,
    .btn-accent::before,
    .btn-success::before,
    .btn-warning::before,
    .btn-danger::before,
    .btn-ghost::before,
    .btn-outline::before,
    .btn-white::before,
    .btn-outline-white::before {
        display: none;
    }
    
    .btn-loading::after {
        animation: none;
    }
    
    .btn-pulse {
        animation: none;
    }
}

/* ===== تحسينات التركيز العالي ===== */

@media (prefers-contrast: high) {
    .btn-primary,
    .btn-secondary,
    .btn-accent,
    .btn-success,
    .btn-warning,
    .btn-danger {
        border: 2px solid currentColor;
    }
    
    .btn-ghost,
    .btn-outline,
    .btn-outline-white {
        border-width: 3px;
    }
}