/* ==================== تخصيص زر الرجوع للأعلى ==================== */

/* الأشكال - 8 أنماط */

/* 1. دائري - النمط الافتراضي */
.scroll-top-shape-circle {
    border-radius: 50% !important;
}

/* 2. مربع */
.scroll-top-shape-square {
    border-radius: 8px !important;
}

/* 3. مربع دائري */
.scroll-top-shape-rounded {
    border-radius: 15px !important;
}

/* 4. ماسي */
.scroll-top-shape-diamond {
    border-radius: 8px !important;
    transform: rotate(45deg);
}

.scroll-top-shape-diamond i {
    transform: rotate(-45deg);
}

/* 5. سداسي */
.scroll-top-shape-hexagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    border-radius: 0 !important;
}

/* 6. مثلث */
.scroll-top-shape-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 0 !important;
}

.scroll-top-shape-triangle i {
    margin-top: 10px;
}

/* 7. نجمة */
.scroll-top-shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0 !important;
}

/* 8. قلب */
.scroll-top-shape-heart {
    clip-path: polygon(50% 90%, 10% 35%, 10% 20%, 30% 5%, 50% 15%, 70% 5%, 90% 20%, 90% 35%);
    border-radius: 0 !important;
}

/* الأحجام - 4 أحجام */
.scroll-top-size-small {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
}

.scroll-top-size-medium {
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
}

.scroll-top-size-large {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
}

.scroll-top-size-xlarge {
    width: 70px !important;
    height: 70px !important;
    font-size: 28px !important;
}

/* المواقع - 6 مواقع */

/* 1. أسفل يسار (افتراضي) */
.scroll-top-position-bottom-left .scroll-top-btn {
    bottom: 30px;
    left: 30px;
    right: auto;
}

/* 2. أسفل يمين */
.scroll-top-position-bottom-right .scroll-top-btn {
    bottom: 30px;
    right: 30px;
    left: auto;
}

/* 3. أسفل وسط */
.scroll-top-position-bottom-center .scroll-top-btn {
    bottom: 30px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* 4. أعلى يسار */
.scroll-top-position-top-left .scroll-top-btn {
    top: 80px;
    left: 30px;
    bottom: auto;
    right: auto;
}

/* 5. أعلى يمين */
.scroll-top-position-top-right .scroll-top-btn {
    top: 80px;
    right: 30px;
    bottom: auto;
    left: auto;
}

/* 6. يمين وسط */
.scroll-top-position-middle-right .scroll-top-btn {
    top: 50%;
    right: 30px;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
}

/* الأنماط - 10 أنماط */

/* 1. تدرج (افتراضي) */
.scroll-top-style-gradient .scroll-top-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
}

/* 2. لون صلب */
.scroll-top-style-solid .scroll-top-btn {
    background: var(--primary-color);
    border: none;
}

/* 3. شفاف */
.scroll-top-style-transparent .scroll-top-btn {
    background: rgba(102, 126, 234, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid var(--primary-color);
}

/* 4. محدد */
.scroll-top-style-outlined .scroll-top-btn {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.scroll-top-style-outlined .scroll-top-btn:hover {
    background: var(--primary-color);
    color: white;
}

/* 5. ثلاثي الأبعاد */
.scroll-top-style-3d .scroll-top-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    box-shadow: 0 8px 0 #5a6fd8, 0 15px 30px rgba(102, 126, 234, 0.4);
    border: none;
}

.scroll-top-style-3d .scroll-top-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 0 #5a6fd8, 0 20px 35px rgba(102, 126, 234, 0.5);
}

/* 6. متوهج */
.scroll-top-style-glowing .scroll-top-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color);
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color); }
    50% { box-shadow: 0 0 30px var(--primary-color), 0 0 60px var(--primary-color); }
}

/* 7. زجاجي */
.scroll-top-style-glass .scroll-top-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 8. نيون */
.scroll-top-style-neon .scroll-top-btn {
    background: transparent;
    border: 3px solid var(--primary-color);
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--primary-color);
    box-shadow: 0 0 20px var(--primary-color), inset 0 0 20px rgba(102, 126, 234, 0.2);
}

/* 9. ظل طويل */
.scroll-top-style-long-shadow .scroll-top-btn {
    background: var(--primary-color);
    border: none;
    box-shadow: 
        2px 2px 0 #5a6fd8,
        4px 4px 0 #5465c7,
        6px 6px 0 #4e5bb6,
        8px 8px 0 #4851a5,
        10px 10px 20px rgba(0, 0, 0, 0.3);
}

/* 10. حدود متدرجة */
.scroll-top-style-gradient-border .scroll-top-btn {
    background: white;
    color: var(--primary-color);
    border: 3px solid transparent;
    background-image: 
        linear-gradient(white, white),
        linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* الحركات - 8 حركات */

/* 1. تلاشي */
.scroll-top-animation-fade .scroll-top-btn {
    animation: fadeIn 0.5s ease;
}

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

/* 2. انزلاق للأعلى */
.scroll-top-animation-slide-up .scroll-top-btn {
    animation: slideUp 0.5s ease;
}

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

/* 3. تكبير */
.scroll-top-animation-scale .scroll-top-btn {
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* 4. قفز */
.scroll-top-animation-bounce .scroll-top-btn {
    animation: bounceIn 0.8s ease;
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* 5. دوران */
.scroll-top-animation-rotate .scroll-top-btn {
    animation: rotateIn 0.6s ease;
}

@keyframes rotateIn {
    from { transform: rotate(-360deg) scale(0); opacity: 0; }
    to { transform: rotate(0) scale(1); opacity: 1; }
}

/* 6. اهتزاز */
.scroll-top-animation-shake .scroll-top-btn {
    animation: shakeIn 0.8s ease;
}

@keyframes shakeIn {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* 7. نبض */
.scroll-top-animation-pulse .scroll-top-btn {
    animation: pulseIn 1s ease infinite;
}

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

/* 8. وميض */
.scroll-top-animation-flash .scroll-top-btn {
    animation: flashIn 1.5s ease infinite;
}

@keyframes flashIn {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.4; }
}

/* Hover Effects */
.scroll-top-btn:hover {
    transform: translateY(-5px);
}

.scroll-top-position-bottom-center .scroll-top-btn:hover {
    transform: translateX(-50%) translateY(-5px);
}

.scroll-top-position-middle-right .scroll-top-btn:hover {
    transform: translateY(-50%) translateX(-5px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .scroll-top-btn {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }
    
    .scroll-top-position-bottom-left .scroll-top-btn,
    .scroll-top-position-bottom-right .scroll-top-btn,
    .scroll-top-position-bottom-center .scroll-top-btn {
        bottom: 20px;
    }
    
    .scroll-top-position-bottom-left .scroll-top-btn {
        left: 20px;
    }
    
    .scroll-top-position-bottom-right .scroll-top-btn {
        right: 20px;
    }
    
    .scroll-top-position-top-left .scroll-top-btn,
    .scroll-top-position-top-right .scroll-top-btn {
        top: 70px;
    }
    
    .scroll-top-position-top-left .scroll-top-btn {
        left: 20px;
    }
    
    .scroll-top-position-top-right .scroll-top-btn {
        right: 20px;
    }
    
    .scroll-top-position-middle-right .scroll-top-btn {
        right: 20px;
    }
}