/* ===================================================================== *
   SMSaver Frontend Styles
   -----------------------------------------------------
   ملف تنسيقات الواجهة الأمامية لإضافة SMSaver
   مع تعليقات وفواصل فرعية احترافية لكل جزء وأسلوب عمل الشركات الكبرى
 * ===================================================================== */


/* ---------------------------------------------------------------------
   0. متغيرات جذرية للألوان (يمكن تفعيلها لاحقاً)
   --------------------------------------------------------------------- */
/*
:root {
    --smsaver-blue: #288ab9;
    --smsaver-yellow: #f7b32b;
    --smsaver-gray: #414141;
    --smsaver-bg: #f8fafc;
    --smsaver-table-bg: #f7f9fa;
}
*/


/* =====================================================================
   1. Reset & أساسيات الصفحة
   ===================================================================== */
body, html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
input, button {
    font-family: inherit;
}


/* =====================================================================
   2. رأس الصفحة والوصف الرئيسي
   ===================================================================== */

/* --- عنوان الصفحة الرئيسي --- */
#smsaver-page-title {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    color: #111827;
    font-size: 4.5em;
}

/* --- وصف الصفحة الرئيسي --- */
#smsaver-page-desc {
    text-align: center;
    color: #414141;
    font-size: 1.11em;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.6;
    font-weight: bold;
}
#smsaver-page-desc span {
    color: #414141;
    font-size: 0.99em;
    font-weight: 500;
    margin-bottom: 150px;
}


/* =====================================================================
   3. نموذج إدخال الرابط (Form)
   ===================================================================== */

/* --- نموذج النموذج بالكامل --- */
#smsaver-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
}

/* --- حقل إدخال الرابط --- */
#smsaver-url {
    padding: 12px 12px;
    border: 1px solid #288ab9;
    border-radius: 6px;
    font-size: 1.1em;
    width: 900px;
    height: 60px;
    color: #414141;
    background: #f8fafc;
    transition: border-color 0.2s;
}
/* تأثير تركيز الحقل */
#smsaver-url:focus {
    border-color: #f7b32b;
    outline: none;
}

/* --- زر التحميل --- */
#smsaver-form button[type="submit"] {
    width: 900px;
    height: 60px;
    padding: 10px 0;
    background: #288ab9;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.0em;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 400;
    letter-spacing: 0.5px;
}
/* تأثير hover على زر التحميل */
#smsaver-form button[type="submit"]:hover {
    background: #f7b32b;
    color: #212121;
	font-weight: 900;
}


/* =====================================================================
   4. صناديق النتائج والخلفيات الموسعة
   ===================================================================== */

/* --- غلاف الخلفية الممتدة --- */
.smsaver-fullwidth-bg {
    width: 100vw;
    min-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    left: 50%;
    right: 50%;
    position: relative;
    background: #f8fafc;
    box-shadow: 0 1px 10px #288ab90b;
    padding: 32px 0 18px 0;
    z-index: 10;
}

/* --- الحاوية الداخلية للمحتوى --- */
.smsaver-inner-content {
    max-width: 1200px;
    margin: auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
}

/* --- حاوية عرض النتائج بنظام Flex --- */
.smsaver-flex-container {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 24px;
}


/* =====================================================================
   5. معلومات الفيديو (العمود الأيسر)
   ===================================================================== */

/* --- صندوق المعلومات الجانبية --- */
.smsaver-info-left {
    min-width: 200px;
    max-width: 320px;
    flex: 1 1 240px;
}

/* --- الصورة المصغرة --- */
.smsaver-thumbnail {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 1px 8px #288ab929;
    margin-bottom: 10px;
    border: 2px solid #288ab9;
}

/* --- صندوق معلومة واحدة (مدة/رافع/...) --- */
.smsaver-info-item.smsaver-info-vertical {
    display: flex;
    align-items: top;
    gap: 6px;
    color: #288ab9;
    font-weight: 500;
    margin-bottom: 8px;
    background: #f7f9fa;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #288ab92b;
    font-size: 15px;
}

/* --- عنوان المعلومة --- */
.smsaver-info-label {
    font-weight: bold;
    color: #414141;
    font-size: 15.3px;
    margin-right: 2px;
}
/* --- قيمة المعلومة --- */
.smsaver-info-text {
    color: #414141;
    font-weight: 500;
    margin-left: 2px;
}


/* =====================================================================
   6. نتائج التحميل (العمود الأيمن)
   ===================================================================== */

/* --- الحاوية اليمنى للجداول --- */
.smsaver-tables-right {
    flex: 3 1 340px;
    min-width: 280px;
}

/* --- عنوان الفيديو --- */
.smsaver-video-title {
    margin-top: 0;
    color: #414141;
    font-size: 1.15em;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}


/* --- غلاف الجدول (ظل وزوايا) --- */
.smsaver-table-wrapper {
    overflow-x: auto;
    margin-bottom: 18px;
    border-radius: 12px;
    box-shadow: 0 2px 14px #288ab919;
}

/* --- تصميم الجدول الأساسي --- */
.smsaver-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
    font-size: 1em;
    box-shadow: 0 2px 18px #288ab917;
}

/* --- خلايا الجدول ونصوصه --- */
.smsaver-table th,
.smsaver-table td {
	font-size: 0.85em;
    font-weight: 500;
	padding: 04px 20px !important;
    text-align: center;
    border-bottom: 1.2px solid #e4e9ef;
	text-transform: uppercase;

}


/* --- رأس الجدول --- */
/* يبدو انها ليس لها وظيفة 
/*
.smsaver-table th {
    background: #DC2626 !important;   
    color: #288ab9;
    font-weight: 600;
    font-size: 5.99em;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e4e9ef;
    padding: 50px 8px;
    position: relative;
    transition: background 0.15s;
}
*/




/* --- زوايا مستديرة للرأس --- */
/*
.smsaver-table th:first-child { border-top-left-radius: 12px; }
.smsaver-table th:last-child { border-top-right-radius: 12px; }
*/

/* --- تلوين الصفوف بالتبادل --- */
.smsaver-table tr:nth-child(even) td,
.smsaver-table tr:nth-child(odd) td { background: #fff; }


/* --- تأثير hover عند المرور --- */
.smsaver-table tbody tr:hover td {
    background: #e4e9ef;
    transition: background 0.21s;
}

/* --- إزالة الفواصل الرأسية --- */
/*
/* يبدو انه ليس له وظيفة
.smsaver-table th:not(:last-child),
.smsaver-table td:not(:last-child) { border-right: none; }


/* --- زوايا مستديرة لأسفل الجدول --- */
.smsaver-table tr:last-child td:first-child { border-bottom-left-radius: 15px; }
.smsaver-table tr:last-child td:last-child { border-bottom-right-radius: 15px; }

/* --- عنوان الجدول الرئيسي بتدرج وأيقونة --- */
.smsaver-table-title-as-header {
    background: linear-gradient(90deg, #51a7db 0%, #89c6e7 70%) !important;
    color: #fff;
    font-size: 1.0em !important;
    font-weight: bold !important;
    text-align: left !important;
    letter-spacing: 0.25px;
    padding: 8px 0 7px 20px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 4px 16px #51a7db17;
    border-bottom: none;
}

/* --- صف رؤوس الجدول (بعد العنوان) --- */
.smsaver-table-header-row td {
    background: #f8fafc !important;
    color: #414141;
    font-size: 0.90em !important;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.11px;
    padding: 05px 0;
    border-bottom: 2px solid #e4e9ef;
}


/* --- زر التحميل في الجدول --- */
.smsaver-download-btn {
    width: 155px; /* أو أي عرض يناسبك */
	background: #288ab9;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 6px 6px 6px 6px;
    border-radius: 6px;
    border: none;
    font-size: 0.90em !important;
    cursor: pointer;
    transition: background 0.17s, box-shadow 0.18s, transform 0.09s;
    box-shadow: 0 1px 10px #288ab91a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    outline: none;
    letter-spacing: 0.1px;
    gap: 10px;
}

/* --- تأثير زر التحميل عند المرور أو التركيز --- */
.smsaver-download-btn:hover,
.smsaver-download-btn:focus {
    background: #1976a3;
    color: #fff !important;
    box-shadow: 0 2px 20px #288ab926;
    transform: translateY(-2px) scale(1.04);
}

/* --- زر التحويل في الجدول --- */
.smsaver-convert-btn {
    width: 155px; /* أو أي عرض يناسبك */
	background: #f7b32b;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 6px 6px 6px 6px;
    border-radius: 6px;
    border: none;
    font-size: 0.90em !important;
    cursor: pointer;
    transition: background 0.17s, box-shadow 0.18s, transform 0.09s;
    box-shadow: 0 1px 10px #f7b32b1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    outline: none;
    letter-spacing: 0.1px;
    gap: 3px;
}

/* --- تأثير زر التحويل عند المرور أو التركيز --- */
.smsaver-convert-btn:hover,
.smsaver-convert-btn:focus {
    background: #d19219;
    color: #fff !important;
    box-shadow: 0 2px 20px #f7b32b3d;
    transform: translateY(-2px) scale(1.04);
}

/* --- أيقونات SVG في رأس الجدول --- */
.smsaver-table-title-as-header svg {
    vertical-align: middle;
    margin-right: 7px;
    margin-left: 7px;
	margin-bottom: 2px;
}


/* =====================================================================
   8. رسائل الخطأ والتنبيه
   ===================================================================== */

/* --- رسالة الخطأ أو التنبيه --- */
.smsaver-error-message,
.smsaver-error {
    color: #b90000;
    padding: 7px;
    background: #f7b3b32c;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid #f7b32b66;
    font-weight: bold;
}
/* --- رسالة "لا يوجد نتائج" --- */
.smsaver-info {
    background: #f7b32b14;
    color: #288ab9;
    font-weight: bold;
    border-radius: 7px;
    padding: 10px;
    text-align: center;
    margin: 12px 0;
}


/* =====================================================================
   9. مؤشر التحميل (Loader & Spinner)
   ===================================================================== */

/* --- الحاوية الرئيسية لمؤشر التحميل --- */
#smsaver-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 38px auto 24px auto;
    min-height: 90px;
    box-sizing: border-box;
    max-width: 700px;
    padding: 0;
    border: none;
    background: none;
}
/* --- تمركز العناصر داخل مؤشر التحميل --- */
.smsaver-loading-center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- نص مؤشر التحميل --- */
.smsaver-loading-text {
    font-size: 1.07em;
    font-weight: 700;
    color: #414141;
    letter-spacing: 0.4px;
    margin-top: 0;
    margin-bottom: 18px;
    text-align: center;
    width: 100%;
}
/* --- نقاط التحميل المتحركة --- */
.smsaver-spinner-dots-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 20px;
    gap: 8px;
}
.smsaver-spinner-dots-flex span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #288ab9;
    display: block;
    animation: smsaver-dot-bounce 0.95s infinite cubic-bezier(.68,-.55,.27,1.55);
}
.smsaver-spinner-dots-flex span:nth-child(2) {
    background: #f7b32b;
    animation-delay: 0.17s;
}
.smsaver-spinner-dots-flex span:nth-child(3) {
    background: #288ab9;
    animation-delay: 0.34s;
}
@keyframes smsaver-dot-bounce {
    0%, 80%, 100% { transform: scale(.7);}
    40% { transform: scale(1.15);}
}


/* =====================================================================
   10. استجابة الشاشات الصغيرة (Responsive)
   ===================================================================== */

/* --- ترتيب مرن للشاشات الصغيرة --- */
@media (max-width: 850px) {
    .smsaver-flex-container {
        flex-direction: column;
        gap: 18px;
    }
    .smsaver-tables-right,
    .smsaver-info-left {
        max-width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
    .smsaver-table th,
    .smsaver-table td {
        font-size: 14px;
        padding: 6px 2px;
    }
    .smsaver-title {
        font-size: 1.2em;
    }
}




@keyframes smsaver-flash {
    0% { background: #ffeaea; }
    40% { background: #ffd4d4; }
    100% { background: #ffeaea; }
}
.smsaver-error-message.smsaver-flash {
    animation: smsaver-flash 0.5s;
}




.smsaver-download-complete {
    background: #21b16a !important;
    color: #fff !important;
    border: none !important;
}