/* Main CSS - الأنماط غير الحرجة - تحميل مؤجل */
/* يُحمّل بعد critical.css باستخدام preload */

/* متغيرات إضافية */
:root{--secondary-light:#9b68cc;--success-dark:#059669;--error:#ef4444;--error-dark:#dc2626;--warning:#f59e0b;--info:#3b82f6;--gray-900:#0f172a;--gray-800:#1e293b;--gray-700:#334155;--gray-500:#64748b;--gray-300:#cbd5e1;--gray-100:#f1f5f9;--space-2xl:4rem;--radius-xs:6px;--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 2px 8px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.12);--transition-slow:.5s ease;--z-dropdown:100;--z-fixed:300;--z-modal:400;--z-popover:500;--z-tooltip:600;--z-toast:9999}

/* العناصر المساعدة */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* نتيجة التحميل - تحسين الاحتواء */
#result-container {
    max-width: 850px;
    margin: var(--space-lg) auto;
    min-height: 1px;
    /* ✅ عزل التخطيط لمنع التأثير على العناصر الخارجية */
    contain: layout style;
}

.video-info-new {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-xl);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
    /* ✅ موجودة مسبقاً وهي ممتازة للأداء */
    contain: layout style paint; 
}

.video-info-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--success));
}

.video-thumbnail {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-100);
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    
    /* ✅ تحسين الأداء: تحديد الحركة */
    transition: transform var(--transition-normal);
    /* ✅ تحسين الأداء: نقل المعالجة للـ GPU */
    will-change: transform;
    /* ✅ تحسين الأداء: عزل عملية الرسم */
    contain: paint layout; 
}

.video-thumbnail:hover {
    transform: scale(1.02);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* ✅ تحسين الأداء: تحديد الحركة */
    transition: transform var(--transition-slow);
    /* ✅ تحسين الأداء: تجهيز الصورة للحركة */
    will-change: transform;
    /* ✅ منع الحواف الخشنة أثناء التحجيم */
    backface-visibility: hidden; 
}

.video-thumbnail:hover img {
    transform: scale(1.05);
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, .9);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    /* ✅ النص ثابت لا يحتاج لإعادة حساب */
    contain: content; 
}

body.rtl .video-duration {
    right: auto;
    left: 10px;
}

.quality-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    color: white;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .4);
    /* ✅ النص ثابت */
    contain: content; 
}

body.rtl .quality-badge {
    right: auto;
    left: 10px;
}

.video-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: flex-start;
    min-height: 0;
}

.video-title-new {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.68em;
    word-break: break-word;
    hyphens: auto;
}

.creator-info {
    color: var(--gray-500);
    font-size: .95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.creator-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.creator-name::before {
    content: '👤';
    font-size: 1rem;
    flex-shrink: 0;
}
/* أزرار التحميل */
.download-buttons-new {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .85rem;
    direction: ltr;
    flex-shrink:0
}

.download-link-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    
    /* ✅ التعديل هنا: تحديد الخواص بدقة لتحسين الأداء */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* ✅ التعديل هنا: تحسين سرعة المعالجة الرسومية */
    will-change: transform;
    
    box-shadow: 0 4px 16px rgba(102, 126, 234, .35);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    contain: layout style
}

.download-link-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, .45)
}

.download-link-new:active {
    transform: translateY(-2px)
}

.download-link-new:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.download-link-new.watermark {
    background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
    box-shadow: 0 4px 16px rgba(100, 116, 139, .35)
}

.download-link-new.watermark:hover {
    box-shadow: 0 8px 24px rgba(100, 116, 139, .45)
}

/* Skeleton Loading */
.skeleton{background:var(--gray-200);border-radius:var(--radius-md)}

.skeleton-video{max-width:850px;margin:var(--space-lg) auto;background:white;border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-xl);display:grid;grid-template-columns:320px 1fr;gap:var(--space-lg)}

.skeleton-thumb{height:200px;border-radius:var(--radius-md)}

.skeleton-text{height:24px;margin-bottom:12px;border-radius:var(--radius-sm)}

.skeleton-text.short{width:60%}

.skeleton-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-top:var(--space-md)}

.skeleton-button{height:45px;border-radius:var(--radius-md)}

/* Toast Notifications */
.toast{position:fixed;bottom:30px;right:30px;background:white;padding:1rem 1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:12px;transform:translateX(400px);transition:transform var(--transition-bounce);z-index:var(--z-toast);min-width:300px;max-width:400px;border-left:4px solid var(--success)}

body.rtl .toast{right:auto;left:30px;border-left:none;border-right:4px solid var(--success);transform:translateX(-400px)}

.toast.show{transform:translateX(0)}

.toast-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}

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

body.rtl .toast-success{border-right-color:var(--success)}

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

.toast-success .toast-icon::before{content:'✓'}

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

body.rtl .toast-error{border-right-color:var(--error)}

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

.toast-error .toast-icon::before{content:'✕'}

.toast-message{flex:1;color:var(--dark);font-weight:600;font-size:.95rem;line-height:1.4}

/* رسائل الخطأ */
.error-message,.success-message,.info-message{padding:1.25rem 1.5rem;border-radius:var(--radius-lg);margin:var(--space-md) 0;font-weight:600;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px}

.error-message{background:#fee;border:2px solid var(--error);color:#991b1b}

.error-message::before{content:'⚠️';font-size:1.5rem}

.success-message{background:#d1fae5;border:2px solid var(--success);color:#065f46}

.success-message::before{content:'✅';font-size:1.5rem}

.info-message{background:#dbeafe;border:2px solid var(--info);color:#1e40af}

.info-message::before{content:'ℹ️';font-size:1.5rem}

/* المنصات المدعومة - نسخة محسنة الأداء */
.platform-section {
    margin: var(--space-xl) 0;
    padding: var(--space-xl) 0;
    background: white;
    border-radius: var(--radius-xl);
    text-align: center
}

.platform-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: var(--space-lg);
    color: var(--dark);
    text-align: center
}

.platform-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-md)
}

.platform-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-md);
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--dark);
    font-weight: 700;
    font-size: .9rem;
    min-height: 120px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

.platform-box:hover {
    /* تغيير اللون والظل فوراً ليعرف المستخدم أنه زر قابل للضغط */
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(102, 126, 234, .25);
}


.platform-box .icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}


/* قسم المميزات */
.features-section,.how-to-section{padding:var(--space-2xl) 0}

.section-title{text-align:center;margin-bottom:var(--space-xl)}

.section-title h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;color:var(--dark);margin-bottom:var(--space-md);letter-spacing:-.02em}

.section-title p{font-size:1.125rem;color:var(--gray-500);max-width:650px;margin:0 auto;line-height:1.7}

.features-grid,.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg);max-width:1100px;margin:0 auto}

.feature-item {
    text-align: center;
    padding: var(--space-lg);
    /* ✅ تحديد الحركة بدقة */
    transition: transform var(--transition-normal);
    /* ✅ تحسين الأداء */
    will-change: transform;
    contain: layout style;
}

.feature-item:hover{transform:translateY(-5px)}

.step-item {
    background: white;
    border-radius: var(--radius-xl);
    border-top: 5px solid var(--success);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
    text-align: center;
    position: relative;
    
    /* ✅ استبدال transition: all بخصائص محددة */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    
    /* ✅ تحسين الأداء: نقل المعالجة لكرت الشاشة */
    will-change: transform;
    contain: layout style;
}

.step-item:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl)}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg,var(--primary-light),var(--primary));
    color: white;
    border-radius: 50%;
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-md);
    
    transition: transform var(--transition-bounce);
    /* ✅ تحسين دوران الأيقونة */
    will-change: transform;
}

.feature-item:hover .feature-icon{transform:scale(1.1) rotate(10deg)}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg,var(--success) 0%,var(--success-dark) 100%);
    color: white;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 900;
    margin: -4rem auto var(--space-md);
    border: 6px solid white;
    box-shadow: var(--shadow-lg);
    
    transition: transform var(--transition-bounce);
    /* ✅ تحسين دوران الرقم */
    will-change: transform;
}

.step-item:hover .step-number{transform:scale(1.15) rotate(-10deg)}

.feature-item h3,.step-item h3{font-size:1.35rem;font-weight:700;color:var(--dark);margin-bottom:var(--space-sm);letter-spacing:-.01em}

.feature-item p,.step-item p{color:var(--gray-500);line-height:1.7;font-size:1rem}

/* الأسئلة الشائعة */
.faq-section {
    padding: var(--space-2xl) 0;
    background: var(--light-bg)
}

.faq-accordion {
    max-width: 850px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

.faq-item {
    border-bottom: 1px solid var(--gray-200);
    /* تم حذف transition: background */
}

.faq-item:last-child {
    border-bottom: none
}

.faq-item:hover {
    background: #f9fafb
}

.faq-question {
    width: 100%;
    padding: var(--space-lg);
    background: none;
    border: none;
    text-align: right;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    /* تم حذف transition: all */
}

body:not(.rtl) .faq-question {
    text-align: left
}

.faq-question:hover {
    color: var(--primary)
}

.faq-question i,
.faq-question .icon {
    /* تم حذف transition: transform */
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0
}

.faq-question[aria-expanded="true"] i,
.faq-question[aria-expanded="true"] .icon {
    /* سيتغير الاتجاه فوراً بدون دوران */
    transform: rotate(180deg)
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    /* تم حذف transition الخاص بالارتفاع والحشوة */
    padding: 0 var(--space-lg)
}

.faq-question[aria-expanded="true"]+.faq-answer {
    max-height: 500px; /* سيظهر المحتوى فوراً */
    padding: 0 var(--space-lg) var(--space-lg)
}

.faq-answer p {
    color: var(--gray-600);
    line-height: 1.8;
    margin: 0;
    font-size: 1rem
}

/* قسم الختام */
.closing-section{padding:var(--space-xl) 0;text-align:center}

.closing-section p{max-width:900px;margin:0 auto;color:var(--gray-600);line-height:1.8;font-size:1rem}

/* الفوتر */
.site-footer{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%);color:white;padding:var(--space-2xl) 0 var(--space-lg);margin-top:var(--space-2xl);position:relative;overflow:hidden}

.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--success))}

.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-xl);margin-bottom:var(--space-xl)}

.footer-section h3{font-size:1.35rem;margin-bottom:var(--space-md);color:white;font-weight:800;letter-spacing:-.01em}

.footer-section ul{list-style:none}

.footer-section ul li{margin-bottom:.85rem}

.footer-section a{color:#e2e8f0;text-decoration:none;transition:all var(--transition-fast);font-size:.95rem;display:inline-block}

.footer-section a:hover{color:var(--primary-light);transform:translateX(5px)}

body.rtl .footer-section a:hover{transform:translateX(-5px)}

.footer-section p{color:#cbd5e1;line-height:1.8;font-size:.95rem}

.language-selector,.footer-section select,#lang-select{padding:.85rem 1.1rem;border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.15);color:white!important;font-weight:600;font-size:.95rem;cursor:pointer;transition:all var(--transition-normal);width:100%;max-width:220px;backdrop-filter:blur(10px)}

.language-selector:hover,.footer-section select:hover,#lang-select:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}

.language-selector option,.footer-section select option,#lang-select option{background:#1a202c;color:white;padding:.75rem}

.language-selector label{display:block;margin-bottom:.75rem;font-weight:700;color:white;font-size:.95rem}

.social-links{display:flex;gap:var(--space-md);margin-top:var(--space-md)}

.social-links a{display:inline-flex;align-items:center;justify-content:center;width:45px;height:45px;background:rgba(255,255,255,.1);border-radius:50%;color:white;font-size:1.2rem;transition:all var(--transition-bounce);backdrop-filter:blur(10px)}

.social-links a:hover{background:var(--primary);transform:translateY(-5px) rotate(5deg);box-shadow:0 8px 20px rgba(102,126,234,.4)}

.footer-bottom{text-align:center;padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.1);color:#94a3b8;font-size:.9rem;margin-top:var(--space-lg)}

.footer-bottom p{margin:0}

/* Progress Bar */
.download-progress{position:relative;height:10px;background:var(--gray-200);border-radius:var(--radius-full);overflow:hidden;margin-top:var(--space-sm)}

.download-progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:var(--radius-full);transition:width .3s ease;position:relative;overflow:hidden}

.progress-text{text-align:center;margin-top:var(--space-xs);font-size:.85rem;color:var(--gray-500);font-weight:600}

/* تحسينات إضافية */
::selection{background:var(--primary);color:white}

::-moz-selection{background:var(--primary);color:white}

::-webkit-scrollbar{width:12px}

::-webkit-scrollbar-track{background:var(--gray-100)}

::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-full);border:3px solid var(--gray-100)}

::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}

html{scroll-padding-top:80px}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
}
/* Responsive */
@media (max-width:992px){
  .video-info-new{grid-template-columns:1fr;gap:var(--space-md)}
  .download-buttons-new{grid-template-columns:repeat(2,1fr)}
  .skeleton-video{grid-template-columns:1fr}
}

@media (max-width:768px){
  :root{--space-xl:2rem;--space-2xl:2.5rem}
  .platform-links{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
  .platform-box{font-size:.8rem;padding:var(--space-md) var(--space-xs);min-height:100px}
  .platform-box .icon{width:36px;height:36px}
  .features-grid,.steps-grid{grid-template-columns:1fr;gap:var(--space-md)}
  .footer-content{grid-template-columns:1fr;text-align:center;gap:var(--space-lg)}
  .social-links{justify-content:center}
  .language-selector,#lang-select{max-width:100%}
  .toast{left:15px;right:15px;bottom:15px;min-width:auto}
  body.rtl .toast{left:15px;right:15px}
}

@media (max-width:640px){
  .platform-title{font-size:1.5rem}
  .section-title h2{font-size:1.75rem}
  .video-title-new{font-size:1.1rem}
  .download-buttons-new{grid-template-columns:1fr}
}

@media (max-width:480px){
  .platform-box{font-size:.75rem;padding:.85rem .5rem;min-height:90px}
  .platform-box .icon{width:32px;height:32px}
  .download-link-new{font-size:.9rem;padding:.85rem .75rem}
  .video-info-new{padding:var(--space-md)}
}

/* طباعة */
@media print{
  .site-header,.site-footer,#tiktok-form,.download-buttons-new,.platform-section,.paste-btn{display:none!important}
  .video-info-new{box-shadow:none;border:1px solid #000}
}

/* زر نسخ العنوان - تصميم خفيف للأداء */
.copy-caption-btn {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.copy-caption-btn:hover {
    background: var(--gray-100);
    color: var(--primary);
    border-color: var(--primary);
}

/* تأثير عند النسخ بنجاح */
.copy-caption-btn.copied {
    border-color: var(--success);
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

/* =========================================
   تصميم القائمة المنسدلة المدمجة (Modern Style)
   ========================================= */
:root {
    --dl-primary: #10b981;       /* أخضر حديث */
    --dl-primary-dark: #059669;  /* درجة أغمق للتحويم */
    --dl-border: #d1d5db;        /* لون حدود عصري */
    --dl-bg: #ffffff;
    --dl-text: #374151;
}

.download-control-group {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 450px; /* زيادة بسيطة للعرض */
    margin: 20px auto 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* ظل ناعم */
    border-radius: 8px; /* حواف أكثر دائرية */
    overflow: hidden;
    font-family: inherit;
    border: 1px solid var(--dl-border); /* إطار خارجي رقيق */
}

/* زر التحميل (الأساسي) */
.btn-download-trigger {
    background: linear-gradient(135deg, var(--dl-primary) 0%, var(--dl-primary-dark) 100%); /* تدرج لوني */
    color: white;
    border: none;
    padding: 15px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* تحسين قراءة النص */
    
    /* منع تكسر النص */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}


/* دعم العربية في حركة التحويم */
body.rtl .btn-download-trigger:hover {
    padding-right: 24px;
    padding-left: 28px;
}

.btn-download-trigger:active {
    transform: translateY(1px); /* تأثير الضغط */
}

/* تحسين وضع التعطيل ليكون النص واضحاً */
.btn-download-trigger:disabled {
    background: #cbd5e1;       /* رمادي متوسط (واضح كخلفية) */
    color: #1e293b;            /* نص كحلي داكن جداً (تباين عالي للقراءة) */
    cursor: not-allowed;
    transform: none;           /* إلغاء تأثيرات الحركة */
    box-shadow: none;          /* إزالة الظل ليظهر أنه مسطح */
    opacity: 1;                /* إلغاء الشفافية لضمان وضوح النص */
}

/* القائمة المنسدلة (الخيارات) */
.select-quality-dropdown {
    flex-grow: 1;
    background-color: var(--dl-bg);
    border: none; /* إزالة الحدود لأن المجموعة محاطة بحدود */
    border-left: 1px solid var(--dl-border); /* فاصل خفيف */
    color: var(--dl-text);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0 25px 0 15px; /* مساحة للسهم */
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    
    /* سهم SVG حديث (Chevron Down) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    transition: background-color 0.2s;
}

.select-quality-dropdown:hover {
    background-color: #f9fafb; /* لون خلفية خفيف جداً عند التحويم */
}

.select-quality-dropdown:focus {
    background-color: #f3f4f6;
}

/* تحسينات للعربية (RTL) */
body.rtl .select-quality-dropdown {
    border-left: none;
    border-right: 1px solid var(--dl-border);
    padding: 0 15px 0 40px;
    background-position: left 12px center;
}

/* تنسيق الخيارات داخل القائمة */
.select-quality-dropdown option {
    color: var(--dl-text);
    padding: 12px;
    font-size: 1rem;
    background: white;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 480px) {
    .download-control-group {
        max-width: 100%; /* عرض كامل */
        margin: 15px 10px;
    }
    
    .btn-download-trigger {
        padding: 15px 28px;
        font-size: 0.9rem;
    }
    
    .select-quality-dropdown {
        font-size: 0.9rem;
    }
}

.progress-container-external {
    margin-top: 15px;
    padding: 0 10px;
    animation: fadeIn 0.3s ease;
}

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