:root {
    --craft-bg: #fdfaf4;
    --craft-paper: #ffffff;
    --craft-text: #3d3d3d;
    --craft-accent: #008080; /* Teal */
    --craft-tape: rgba(0, 128, 128, 0.2);
    --craft-radius: 12px;
    --sticky-header-height: 0px; /* سيتم تحديثه بواسطة JS */
}

body {
    background-color: var(--craft-bg);
    font-family: 'Inter', sans-serif;
    color: var(--craft-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    direction: rtl;
    text-align: right;
}

html {
    scroll-padding-top: 5px;  
    overscroll-behavior: none;
}

.english-name-styling-page, .arabic-name-styling-page, .pubg-name-styling-page, .freefire-name-styling-page {
    background-color: var(--craft-bg);
    border-radius: 0;
    box-shadow: none;
    padding: 10px; 
	padding-top: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}
.tool-introduction {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    padding: 15px 20px;
    border-left: 5px solid #007bff;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	text-align: center;
	margin-bottom: 0;
}

@media (max-width: 768px) {
  .tool-introduction {
        font-size: 1em;
        padding: 10px 15px;
    }
}
.arabic-name-styling-page .Center-H2, .english-name-styling-page .Center-H2, .pubg-name-styling-page .Center-H2, .freefire-name-styling-page .Center-H2 {
    color: var(--craft-text);
    text-align: center;
}
.page-id-5603 h1, .page-id-753 h1 {
    text-align: center;
}

h1 {
    margin-top: 0;
}

.style-results-column p {
    margin: 0; /* هذا سيزيل جميع الهوامش الافتراضية (العلوية والسفلية) من الفقرات */
    padding: 0; /* تأكد من عدم وجود بادينج يسبب مسافة غير مرغوبة */
}


.name-styling-controls {
    position: sticky;
    top: 0;  
    width: 100%;  
    background-color: var(--craft-bg);
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.name-input-section {
    margin-bottom: 0;  
    padding: 0;  
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.name-input-section label {
    display: block;
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
    font-weight: bold;
}

#nameInput {
    width: 100%;
    font-size: 18px;
    border: 1px solid #e0e0e0;
    outline: none;
    border-radius: var(--craft-radius);
    background-color: var(--craft-paper);
    color: var(--craft-text);
    transition: all 0.3s ease;
    resize: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    box-sizing: border-box;
    text-align: right;
}

#nameInput:focus {
    border-color: var(--craft-accent);
    box-shadow: 0 5px 20px rgba(0, 128, 128, 0.1);
}

.symbols-buttons-container {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    justify-content: center;  
}

.insert-symbols-btn,
.rotate-symbols-btn {
    flex: 1; /* لجعل الأزرار تتوزع بالتساوي */
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: var(--craft-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 3px 8px rgba(0, 128, 128, 0.25);
    max-width: 200px; /* تحديد أقصى عرض للأزرار على الشاشات الكبيرة */
}

.insert-symbols-btn:hover,
.rotate-symbols-btn:hover {
    background-color: #1a73e8;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(26, 115, 232, 0.35);
}

.insert-symbols-btn:active,
.rotate-symbols-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}


/* أنماط الـ symbol-insertion-panel (أداة الرموز) */
.symbol-insertion-panel {
    display: none; /* مخفي تمامًا في البداية بواسطة CSS */
    position: fixed;
    z-index: 1000;
    background-color: var(--craft-paper);
    border: 1px solid #e0e0e0;
    border-radius: var(--craft-radius);
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    flex-direction: column; /* العناصر الداخلية تتراص عموديًا */
    align-items: stretch; /* العناصر الداخلية تمتد لملء العرض */
    max-width: 700px; /* أقصى عرض لسطح المكتب */
    width: 90%; /* عرض على الموبايل */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0; /* مخفي للتحولات */
    transform: translateY(10px); /* إزاحة طفيفة للرسوم المتحركة */
    /* left و top سيتم تحديدهما بواسطة JavaScript ديناميكيًا */
}

/* عندما تكون الأداة مرئية */
.symbol-insertion-panel.show-widget {
    opacity: 1;
    transform: translateY(0);
    display: flex; /* لضمان الظهور كـ flexbox */
}

.symbol-insertion-panel .symbol-positioning-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.symbol-insertion-panel .control-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.symbol-insertion-panel label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.symbol-insertion-panel input[type="radio"],
.symbol-insertion-panel input[type="checkbox"] {
    margin-right: 8px;
}

.symbol-insertion-panel input[type="number"] {
    width: 80px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
}

.symbol-insertion-panel .symbol-dropdown {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.symbol-insertion-panel .dropdown-selected {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.symbol-insertion-panel .symbol-options-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin-top: 5px;
    display: none;
    z-index: 1001; /* فوق أداة الرموز */
}

.symbol-insertion-panel .symbol-options-list li {
    padding: 10px;
    cursor: pointer;
}

.symbol-insertion-panel .symbol-options-list li:hover {
    background-color: #f0f0f0;
}

.symbol-insertion-panel .action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.symbol-insertion-panel .action-buttons button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.symbol-insertion-panel .apply-styling-btn {
    background-color: #007bff;
    color: white;
}

.symbol-insertion-panel .apply-styling-btn:hover {
    background-color: #0056b3;
}

.symbol-insertion-panel .clear-symbols-btn {
    background-color: #dc3545;
    color: white;
}

.symbol-insertion-panel .clear-symbols-btn:hover {
    background-color: #c82333;
}

/* أنماط قسم عرض الزخارف */
.name-styles-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* عنصرين متساويين في العرض */
    gap: 25px;
    padding: 10px;
    border: none;
    position: relative; /* لإحتواء زر "إظهار المزيد" */
}

/* أنماط حاوية كل عنصر زخرفة */
.name-style-card {
    display: flex;
    flex-direction: column; /* لجعل الـ p فوق الـ div */
    gap: 8px; /* مسافة بين الـ p والـ div */
}

/* أنماط اسم الخط */
.name-style-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--craft-accent);
    text-align: right;
    margin: 0 5px; /* مسافة صغيرة من الجوانب */
    padding-bottom: 5px; /* مسافة بين الاسم والصندوق */
    border-bottom: 1px dashed rgba(0, 128, 128, 0.2); /* خط منقط خفيف */
    white-space: nowrap; /* منع التفاف النص */
    overflow: hidden; /* إخفاء النص الزائد */
    text-overflow: ellipsis; /* إضافة نقاط (...) للنص الزائد */
}


/* أنماط مربعات الزخرفة */
.styled-name-preview {
    position: relative;
    height: 120px; /* الارتفاع الافتراضي */
    background-color: var(--craft-paper);
    border-radius: var(--craft-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.05);
    flex-grow: 1; /* ليتمدد ويملأ المساحة المتاحة في الـ name-style-card */
    word-break: break-word; /* تفكيك الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
    max-height: 150px; /* ارتفاع أقصى */
    overflow-y: auto; /* تفعيل التمرير عند الحاجة */
    min-height: 120px; /* ارتفاع أدنى */

}

/* لمسة "الشريط اللاصق" من سجل القصاصات */
.styled-name-preview::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 25px;
    background-color: var(--craft-tape);
    backdrop-filter: blur(1px);
    border-radius: 3px;
    transition: all 0.3s ease;
    top: -12px;
    left: 20px;
    transform: rotate(-15deg);
}
/* أيقونة النسخ تظهر دائمًا في الزاوية السفلية اليسرى */
.styled-name-preview::after {
    content: '📝'; /* أيقونة القلم/النسخ */
    position: absolute;
    bottom: 8px; /* مسافة من الأسفل */
    right: 8px; /* مسافة من اليمين (لأن الاتجاه RTL، تظهر في الزاوية السفلية اليمنى) */
    font-size: 20px;
    color: #a0a0a0; /* لون افتراضي باهت */
    transition: all 0.3s;
    opacity: 1; /* جعلها مرئية دائمًا */
    pointer-events: none; /* لضمان أن النقر على النص لا يتأثر بالأيقونة */
}


/* التفاعل يجمع بين الرفع والظلال العميقة */
.styled-name-preview:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1), 0 8px 12px rgba(0,0,0,0.08);
    background-color: #e9e9e9;
}
.styled-name-preview:hover::before { transform: rotate(-20deg) scale(1.1); }
.styled-name-preview:hover::after {
    color: var(--craft-accent); /* لون أكثر وضوحًا عند التمرير */
    transform: translateX(0) translateY(-3px); /* تأثير بسيط عند التمرير */
}

/* اتجاه النص من اليسار لليمين */
.styled-name-preview { direction: ltr; }
.arabic-name-styling-page .styled-name-preview { direction: rtl; }

/* أنماط رسالة الـ popup (التي سيتم إنشاؤها ديناميكيًا) */
.popup-message {
    visibility: hidden; /* مخفي افتراضيًا */
    opacity: 0; /* للتحولات */
    background-color: rgba(0, 0, 0, 0.7); /* خلفية شبه شفافة */
    color: #fff; /* نص أبيض */
    font-family: 'Inter', sans-serif;
    text-align: center;
    border-radius: 8px; /* زوايا مستديرة */
    padding: 10px 15px; /* بادينج بسيط */
    position: fixed;
    bottom: 20px; /* 20 بكسل من الأسفل */
    right: 20px; /* 20 بكسل من اليمين (الاتجاه RTL) */
    z-index: 9999; /* لضمان ظهورها فوق كل شيء */
    transition: opacity 0.3s ease, transform 0.3s ease; /* تحولات سلسة */
    transform: translateY(10px); /* إزاحة طفيفة للرسوم المتحركة */
    white-space: nowrap; /* لمنع النص من الالتفاف */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* ظل خفيف */
}

.popup-message.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* إخفاء عناصر الـ popup الأخرى التي لم تعد مطلوبة */
.popup-message strong,
.popup-message .popup-note,
.popup-message .popup-close {
    display: none !important;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* أنماط زر "إظهار المزيد" الجديد وخلفيته */
.show-more-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; /* ارتفاع المنطقة الشفافة */
    background: linear-gradient(to top, rgba(253, 250, 244, 1) 0%, rgba(253, 250, 244, 0) 100%); /* تدرج شفاف */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* لمحاذاة الزر للأسفل */
    padding-bottom: 20px; /* مسافة للزر من الأسفل */
    pointer-events: none; /* للسماح بالنقر على العناصر خلفها */
    z-index: 10; /* ليكون فوق الديفات المخفية وتحت الزر */
}

.show-more-btn {
        pointer-events: all;
        background-color: var(--craft-accent);
        color: white;
        border: none;
        font-weight: bold;
        cursor: pointer;
        display: flex; /* تأكد أنها موجودة */
        justify-content: center; /* أضف هذا لتوسيط المحتوى الأفقي */
        align-items: center; /* تأكد أنها موجودة */
        gap: 8px; /* تأكد أنها موجودة */
        box-shadow: 0 4px 10px rgba(0, 128, 128, 0.3);
        transition: all 0.3s ease;

        /* === التعديلات الجديدة لمطابقة insert-symbols-btn === */
        padding: 8px 15px;    /* مطابقة البادينج */
        font-size: 14px;      /* مطابقة حجم الخط */
        border-radius: 8px;  /* مطابقة شكل الحواف */
        max-width: 48%;      /* مطابقة العرض الأقصى ليكون متجاوبًا */
}

.show-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(26, 115, 232, 0.4);
}

.show-more-btn .arrow-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 20px;
}

.show-more-btn.expanded .arrow-icon {
    transform: rotate(180deg); /* تدوير السهم عند التوسع */
}

.hidden-styled-name-preview {
    display: none; /* إخفاء العناصر الزائدة */
}

#name-style-generator {
    padding: 20px; /* بادينج عام للحاوية الرئيسية على الموبايل */
    box-sizing: border-box;
}

.style-results-column {
    /* هذا العمود سيحتوي على زخارف النصوص */
}

.preview-column {
    /* هذا العمود سيحتوي على لوحات المعاينة */
    /* على الموبايل: مخفي افتراضيًا */
    display: none; /* سيتم التحكم في إظهاره وإخفائه بواسطة JS على الكمبيوتر */
}
#preview-slider-container {
    display: flex; /* ترتيب العناصر أفقياً */
    overflow-x: scroll; /* تفعيل التمرير الأفقي وجعله مرئيًا دائمًا */
    scroll-snap-type: x mandatory; /* لجعل التمرير يتوقف عند كل معاينة */
    -webkit-overflow-scrolling: touch; /* لتحسين التمرير على iOS */
    gap: 20px; /* مسافة بين المعاينات في السلايدر الأفقي على الموبايل */
    padding: 0 10px; /* بادينج خفيف من الجانبين للسماح بالتمرير */
    
    position: fixed; /* الوضع الافتراضي: ثابت (للموبايل) */
    bottom: 20px;
    left: 50%; /* توسيط أفقي */
    /* تم التعديل هنا لتقليل الاهتزاز على الموبايل */
    transform: translateX(-50%) translateY(20px) translateZ(0);  
    width: calc(100% - 40px); /* عرض كامل مع بادينج من الجانبين */
    max-width: 380px; /* أقصى عرض على الموبايل */
    max-height: 70vh; /* أقصى ارتفاع على الموبايل */
    
    background-color: var(--craft-paper);
    border: 1px solid #dbdbdb;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    z-index: 1000!important;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    display: none; /* مخفي افتراضيًا على الموبايل */
    /* تم الإضافة هنا لتقليل الاهتزاز على الموبايل */
    will-change: transform;  
}

#preview-slider-container.show-panel {
    display: flex; /* يظهر كـ flex عند تفعيله */
    opacity: 1;
    /* تم التعديل هنا لتقليل الاهتزاز على الموبايل */
    transform: translateX(-50%) translateY(0) translateZ(0);
}

/* أنماط كل معاينة فردية داخل السلايدر */
#instagram-profile-preview,
#facebook-post-preview,
#pubg-tool-wrapper { /* تم إضافة pubg-tool-wrapper هنا */
    flex-shrink: 0; /* منع انكماش المعاينات */
    width: calc(100% - 20px); /* كل معاينة تأخذ العرض الكامل للحاوية مطروحًا منها الـ gap */
    scroll-snap-align: start; /* لجعل التمرير يتوقف عند كل معاينة */
    box-sizing: border-box; /* لضمان أن البادينج لا يزيد العرض */
    
    /* إعادة تعيين أي خصائص قد تتعارض مع السلايدر */
    position: static;
    bottom: auto;
    left: auto;
    max-width: none;
    cursor: auto;
    box-shadow: none;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0; /* إزالة أي هوامش قديمة */
}
#pubg-tool-wrapper { 
background: #151515 !important;
width: 100% !important;	
max-height: 350px !important;	
padding: 10px;
overflow-x: none; /* تفعيل التمرير الأفقي وجعله مرئيًا دائمًا */
}
/* أنماط مشتركة لأزرار الإغلاق في لوحات المعاينة */
#instagram-profile-preview .preview-close-btn,
#facebook-post-preview .preview-close-btn,
#pubg-tool-wrapper .preview-close-btn,
	#freefire-tool-wrapper .preview-close-btn
{ /* تم إضافة pubg-tool-wrapper هنا */
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, transform 0.2s;
}
#instagram-profile-preview .preview-close-btn:hover,
#facebook-post-preview .preview-close-btn:hover,
#pubg-tool-wrapper .preview-close-btn:hover,
	#freefire-tool-wrapper .preview-close-btn:hover
{ /* تم إضافة pubg-tool-wrapper هنا */
    background-color: rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

/* أنماط مشتركة لـ right-pane داخل لوحات المعاينة */
#instagram-profile-preview .right-pane,
#facebook-post-preview .right-pane,
#pubg-tool-wrapper .right-pane { /* تم إضافة pubg-tool-wrapper هنا */
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: scroll; /* جعل شريط التمرير الرأسي مرئيًا دائمًا */
    padding-top: 20px; /* بادينج من الأعلى لترك مساحة لزر الإغلاق */
}

/* أنماط مشتركة لـ preview-header */
#instagram-profile-preview .preview-header,
#facebook-post-preview .preview-header,
#pubg-tool-wrapper .preview-header { /* تم إضافة pubg-tool-wrapper هنا */
    font-size: 14px;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 8px;
    text-align: center;
}

/* أنماط معاينة انستجرام */
#instagram-ui {
    flex-grow: 1;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    background: #fafafa;
    overflow: scroll;  
}
#instagram-ui .ig-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #dbdbdb;
    background: #fff;
}
#instagram-ui .ig-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #262626;
    word-break: break-all; /* تكسير الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
    min-width: 0; /* يسمح للعنصر بالانكماش داخل flex container */

}
#instagram-ui .ig-follow-btn {
    color: #fff;
    background: #0095f6;
    border-radius: 4px;
    padding: 5px 9px;
    font-weight: 600;
    font-size: 14px;
    border: none;
}
#instagram-ui .ig-profile-section {
    display: flex;
    align-items: center;
    padding: 20px 16px 24px;
    background: #fff;
}
#instagram-ui .ig-avatar-placeholder {
    width: 77px;
    height: 77px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #dbdbdb;
    background: #f0f0f0;
    background-size: cover;
    flex-shrink: 0;
    background-size: cover;
	margin-left: 10px;
}
#instagram-ui .ig-user-details {
    margin-left: 28px;
    flex: 1;
}
/* تم التعديل هنا: أنماط اسم المستخدم في انستجرام لمنع التمدد الأفقي */
#instagram-ui .ig-username {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 6px;
    color: #262626;
    word-break: break-all; /* تكسير الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
    min-width: 0; /* يسمح للعنصر بالانكماش داخل flex container */
}
/* تم التعديل هنا: أنماط زر التعديل في انستجرام لمنع التمدد الأفقي */
#instagram-ui .ig-edit-btn {
    width: 100%;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    padding: 5px 9px;
    font-weight: 600;
    font-size: 14px;
    color: #262626;
    margin-bottom: 12px;
    box-sizing: border-box; /* لضمان أن البادينج لا يزيد العرض */
    word-break: break-all; /* تكسير الكلمات الطويلة إذا كانت موجودة */
    overflow-wrap: anywhere;
    white-space: normal; /* السماح بتعدد الأسطر */
}
/* تم التعديل هنا: أنماط السيرة الذاتية في انستجرام */
#instagram-ui .ig-bio {
    font-size: 14px;
    line-height: 1.4;
    color: #262626;
    margin-bottom: 8px;
    max-height: 100px; /* أقصى ارتفاع للسماح بالتمرير الرأسي */
    word-break: break-all; /* تكسير الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
}
#instagram-ui .ig-website {
    color: #00376b;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    word-break: break-all; /* تكسير الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
}
#instagram-ui .ig-stats {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    background: #fff;
}
#instagram-ui .ig-stat {
    font-weight: 700;
    display: block;
    color: #262626;
}

/* أنماط معاينة فيسبوك */
#facebook-ui {
    flex-grow: 1;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px; /* مسافة من الـ preview-header */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: flex; /* لجعل المحتوى داخله مرتباً عمودياً */
    flex-direction: column;
    /* إضافة أشرطة التمرير الأفقية والرأسية للمعاينة ككل وجعلها مرئية دائمًا */
    overflow: scroll;  
}
.fb-post {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 12px;
    margin-bottom: 10px; /* مسافة بين المنشورات إذا كان هناك أكثر من واحد */
}

.fb-post-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.fb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0; /* Placeholder color */
    margin-left: 10px; /* Spacing for RTL */
    flex-shrink: 0;
    background-size: cover;
}

.fb-post-info {
    flex-grow: 1;
    text-align: right;
}

/* تم التعديل هنا: أنماط اسم المستخدم في فيسبوك لمنع الخروج عن المعاينة */
.fb-profile-name {
    font-weight: 600;
    color: #050505;
    font-size: 14px;
    word-break: break-all; /* تكسير الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
    min-width: 0; /* يسمح للعنصر بالانكماش داخل flex container */
}

.fb-post-time {
    font-size: 12px;
    color: #65676b;
}

/* تم التعديل هنا: أنماط محتوى المنشور في فيسبوك */
.fb-post-content {
    font-size: 15px;
    color: #1c1e21;
    margin-bottom: 15px;
    line-height: 1.4;
    text-align: right;
    white-space: pre-wrap; /* للحفاظ على تنسيق النص المدخل */
    max-height: 150px; /* أقصى ارتفاع للسماح بالتمرير الرأسي */
    word-break: break-all; /* تكسير الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
}

.fb-engagement {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #65676b;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;
    margin-bottom: 8px;
}
.fb-engagement span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fb-post-actions {
    display: flex;
    justify-content: space-around;
}

.fb-action-btn {
    background: none;
    border: none;
    color: #65676b;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s, color 0.2s;
    flex: 1; /* لجعل الأزرار تتوزع بالتساوي */
    justify-content: center;
}

.fb-action-btn:hover {
    background-color: #f0f2f5;
    color: #050505;
}

/* أنماط معاينة بابجي الجديدة */
.pubg-profile-preview {
    box-sizing: border-box;
    /* تم إزالة الخلفية والحدود والظل والبادينج العامين من هنا */
    /* هذه الخصائص ستُطبق الآن على #pubg-tool-wrapper */
    /* للحفاظ على شكلها الأصلي، فقط الخصائص الخاصة بتصميمها الداخلي هنا */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* الحفاظ على خط ببجي */
    /* أضف أي أنماط أخرى خاصة بشكل بابجي هنا إذا كانت موجودة في تصميمك الأصلي */
}

.pubg-profile-preview .profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px; /* مسافة من الأسفل */
}

.pubg-profile-preview .avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #ffcc00;
    object-fit: cover;
    flex-shrink: 0; /* منع الصورة من الانكماش */
}

.pubg-profile-preview .profile-info {
    flex-grow: 1;
    text-align: right;
    min-width: 0; /* يسمح للعنصر بالانكماش داخل flex container */
}

.pubg-profile-preview .username {
    font-size: 1.4rem;
    margin: 0;
    word-break: break-all; /* لكسر الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
    color: #FFFFFF; /* لون أبيض لاسم المستخدم */
}

.pubg-profile-preview .tagline {
    color: #E0E0E0; /* رمادي فاتح للـ ID */
    font-size: 0.9rem;
    margin: 4px 0 0;
    word-break: break-all; /* لكسر الكلمات الطويلة */
    overflow-wrap: anywhere; /* التفاف النص في أي مكان */
    hyphens: auto; /* وضع شرطة عند الانتقال للسطر */
}

.pubg-profile-preview .profile-details {
    margin-top: 20px;
}

.pubg-profile-preview .rank-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pubg-profile-preview .rank-badge {
    width: 60px;
    height: auto;
    flex-shrink: 0; /* منع الشارة من الانكماش */
}

.pubg-profile-preview .rank-name {
    font-size: 1rem;
    margin: 0;
    font-weight: bold;
    color: #262626; /* لون نص مطابق */
}

.pubg-profile-preview .tier-info {
    font-size: 0.8rem;
    color: #65676b; /* لون نص مطابق للفيسبوك */
    margin: 2px 0 0;
}

.pubg-profile-preview .stats {
    display: flex;
    justify-content: space-between;
    background: #f0f2f5; /* خلفية فاتحة مطابقة للفيسبوك */
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.pubg-profile-preview .stats div {
    flex: 1;
}

.pubg-profile-preview .stats span {
    display: block;
    font-size: 0.8rem;
    color: #65676b; /* لون نص مطابق للفيسبوك */
}

.pubg-profile-preview .stats strong {
    font-size: 1.1rem;
    color: var(--craft-accent); /* استخدام لون التمييز العام */
    margin-top: 4px;
    display: block;
}


/* أنماط الزر العائم للأدوات الثانوية (FAB) - الآن في الزاوية السفلية اليسرى */
.mobile-tool-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    transform: none;
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.mobile-tool-fab .fab-toggle-btn {
    width: 56px; /* حجم قياسي لزر FAB */
    height: 56px;
    border-radius: 50%;
    background-color: #6c757d; /* لون رمادي محايد */
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px; /* حجم أيقونة الترس */
    transition: all 0.3s ease;
}

.mobile-tool-fab .fab-toggle-btn:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
@media (min-width: 769px) {
    #name-style-generator {
        display: grid;
        grid-template-columns: 1fr minmax(380px, 450px); /* عمود الزخارف مرن، عمود المعاينات بعرض أكبر */
        gap: 20px; /* مسافة بين العمودين */
        padding-top: 20px; /* بادينج داخلي للحاوية الرئيسية */
        padding-bottom: 20px; /* بادينج من الأسفل */
    }

    .style-results-column {
        padding-right: 20px; /* مسافة من العمود الأيسر */
        padding-left: 20px; /* بادينج داخلي */
        box-sizing: border-box;
    }

    .preview-column {
        display: block; /* إظهار عمود المعاينات على الكمبيوتر */
        position: sticky; /* يلتصق عند التمرير */
        top: calc(var(--sticky-header-height) + 20px); /* يلتصق أسفل الشريط العلوي بمسافة 20 بكسل */
        height: calc(100vh - var(--sticky-header-height) - 40px); /* يملأ الارتفاع المتبقي */
        overflow-y: hidden; /* إخفاء التمرير العمودي لـ preview-column نفسه */
        padding: 0; /* إزالة البادينج من هنا، سيتم تطبيقه على السلايدر */
        background-color: transparent; /* خلفية شفافة لـ preview-column */
        border-radius: var(--craft-radius);
        box-shadow: none; /* إزالة الظل من preview-column */
        border: none; /* إزالة الحدود */
        box-sizing: border-box;
    }

    /* أنماط حاوية السلايدر على الكمبيوتر */
    #preview-slider-container {
        position: static; /* إزالة التثبيت المطلق على الكمبيوتر */
        bottom: auto;
        left: auto;
        width: 100%; /* السماح له بأخذ العرض الكامل للعمود */
        max-width: none;
        height: auto; /* السماح بالارتفاع التلقائي */
        max-height: none; /* إزالة أقصى ارتفاع */
        transform: none;
        opacity: 1; /* مرئي دائمًا */
        display: flex; /* ترتيب العناصر أفقياً */
        flex-direction: row; /* جعلها أفقية */
        overflow-x: scroll; /* تفعيل التمرير الأفقي وجعله مرئيًا دائمًا */
        overflow-y: hidden; /* لا يوجد تمرير عمودي هنا، التمرير الرأسي سيكون داخل المعاينات الفردية */
        scroll-snap-type: x mandatory; /* لجعل التمرير يتوقف عند كل معاينة */
        -webkit-overflow-scrolling: touch; /* لتحسين التمرير على iOS */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* إضافة الظل هنا */
        border: 1px solid #dbdbdb; /* إضافة الحدود هنا */
        background-color: var(--craft-paper); /* إضافة الخلفية هنا */
        border-radius: var(--craft-radius); /* إضافة الزوايا المستديرة هنا */
        padding: 20px; /* بادينج داخلي للسلايدر نفسه */
        gap: 20px; /* مسافة بين المعاينات على الكمبيوتر */
    }

    #preview-slider-container.show-panel {
        /* هذه الفئة لن يكون لها تأثير كبير على الكمبيوتر لأنها مرئية دائمًا */
        display: flex;
    }

    /* أنماط كل معاينة فردية داخل السلايدر على الكمبيوتر */
    #instagram-profile-preview,
    #facebook-post-preview,
    #pubg-tool-wrapper { /* تم إضافة pubg-tool-wrapper هنا */
        flex-shrink: 0; /* منع انكماش المعاينات */
        width: 350px; /* عرض ثابت لكل معاينة */
        scroll-snap-align: start; /* لجعل التمرير يتوقف عند بداية كل معاينة */
        box-sizing: border-box;
        
        /* إضافة ارتفاع أقصى وتمرير رأسي للمعاينات الفردية على الكمبيوتر */
        max-height: calc(100vh - var(--sticky-header-height) - 80px); /* ارتفاع العمود - بادينج السلايدر (20px top + 20px bottom) - (20px top + 20px bottom) للمين لاي اوت */
        overflow-y: scroll; /* تفعيل شريط التمرير الرأسي وجعله مرئيًا دائمًا */
        
        /* إزالة أي أنماط تثبيت أو ظل كانت موجودة سابقًا هنا */
        margin: 0; /* إزالة الهوامش */
        padding: 0; /* إزالة البادينج من هنا، لأنه سيتم تطبيقه على #preview-slider-container */
        background-color: transparent; /* لجعل الخلفية شفافة داخل السلايدر */
        border: none; /* إزالة الحدود */
        box-shadow: none; /* إزالة الظل */
    }

    /* إخفاء أزرار الإغلاق على الكمبيوتر */
    #instagram-profile-preview .preview-close-btn,
    #facebook-post-preview .preview-close-btn,
    #pubg-tool-wrapper .preview-close-btn,
	#freefire-tool-wrapper .preview-close-btn
	{ /* تم إضافة pubg-tool-wrapper هنا */
        display: none;
    }

    .mobile-tool-fab {
        display: none; /* إخفاء الزر العائم على الكمبيوتر */
    }

    .symbol-insertion-panel {
        max-height: 300px; /* الارتفاع المطلوب على الكمبيوتر */
        overflow-y: scroll;  /* تفعيل شريط التمرير إذا تجاوز المحتوى الارتفاع وجعله مرئيًا دائمًا */
    }

    .name-styles-section {
        grid-template-columns: repeat(2, 1fr);
    }

    /* === التعديل الجديد هنا لحل مشكلة الزرارين في قسم "زخارف عريضة" على الكمبيوتر === */
    .name-styles-section.Custom-Font .styler-mode-tabs,
    .name-styles-section.Custom-Font #font-types {
        grid-column: 1 / -1; /* يجعل العنصر يمتد على جميع الأعمدة المتاحة */
    }
}

@media (max-width: 768px) {
    .show-more-btn {
        padding: 7px 25px; /* قلل الارتفاع (7px) وزد العرض (25px) */
        font-size: 14px;
        max-width: 200px; /* زد العرض الأقصى للزر على الموبايل */
        width: 80%; /* اجعله يأخذ 80% من عرض الحاوية ليكون أعرض ومتجاوبًا */
    }

    .english-name-styling-page, .arabic-name-styling-page, .pubg-name-styling-page, .freefire-name-styling-page {
        padding: 0;
    }
    .name-styling-controls {
        padding: 10px;
    }
    #name-style-generator {
        padding: 10px; /* بادينج أقل على الموبايل */
    }
    .name-style-card {
        gap: 6px; /* مسافة أقل بين الـ p والـ div على الموبايل */
    }
    .name-style-label {
        font-size: 14px; /* خط أصغر على الموبايل */
        margin: 0 2px;
        padding-bottom: 3px;
    }
    .styled-name-preview {
        height: 70px;
        min-height: 70px;
        padding: 10px;
        font-size: 16px;
    }
    .name-styles-section {
        grid-template-columns: 1fr; /* عمود واحد فقط على الموبايل */
        gap: 15px;
    }
    .symbol-insertion-panel {
        padding: 10px;
        max-height: 70vh;
        overflow-y: scroll; /* جعل شريط التمرير مرئيًا دائمًا */
        width: calc(100% - 20px);
        left: 50%; /* لتوسيطها على الموبايل */
        transform: translateX(-50%) translateY(10px); /* لتوسيطها وتأثير الدخول */
    }
    .symbol-insertion-panel.show-widget {
        transform: translateX(-50%) translateY(0);
    }
    .symbol-insertion-panel .symbol-positioning-controls {
        padding: 10px;
        gap: 8px;
        max-height: 200px;
    }
    .symbol-positioning-controls .symbol-type-selector,
    .symbol-positioning-controls .symbol-position-options,
    .symbol-positioning-controls .sequential-styling-toggle,
    .symbol-positioning-controls .symbol-count-input {
        padding: 8px;
    }
    .symbol-positioning-controls .selector-label,
    .symbol-positioning-controls label {
        font-size: 13px;
    }
    .dropdown-selected, .symbol-options-list li {
        padding: 6px 10px;
        font-size: 14px;
    }
    .symbol-positioning-controls input[type="number"] {
        width: 40px;
        padding: 5px;
        font-size: 13px;
    }
    .symbol-positioning-controls .apply-styling-btn,
    .symbol-positioning-controls .clear-symbols-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .symbols-buttons-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 8px;
    }
    .insert-symbols-btn,
    .rotate-symbols-btn {
        flex-grow: 1;
        max-width: 48%;
        padding: 8px 15px;
        font-size: 14px;
    }

    .mobile-tool-fab {
        bottom: 15px;
        left: 15px;
    }
    .mobile-tool-fab .fab-toggle-btn {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    #preview-slider-container {
        flex-direction: row; /* جعلها أفقية */
        overflow-x: scroll; /* تفعيل التمرير الأفقي وجعله مرئيًا دائمًا */
        overflow-y: hidden; /* إخفاء التمرير العمودي */
        scroll-snap-type: x mandatory; /* لجعل التمرير يتوقف عند كل معاينة */
        -webkit-overflow-scrolling: touch; /* لتحسين التمرير على iOS */
        
        /* تقليل الارتفاع */
        max-height: 50vh; /* تم تقليله من 70vh */
        
        width: calc(100% - 30px);  
        padding: 15px;  
        gap: 15px;  
        background-color: var(--craft-paper);
        border: 1px solid #dbdbdb;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        z-index: 900;
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        display: none;  
        transform: translateX(-50%) translateY(20px) translateZ(0);  
        will-change: transform;  
    }

    #preview-slider-container.show-panel {
        display: flex;
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0); /* Ensure hardware acceleration when visible */
    }

    #instagram-profile-preview,
    #facebook-post-preview,
    #pubg-tool-wrapper { /* تم إضافة pubg-tool-wrapper هنا */
        flex-shrink: 0; /* منع انكماش المعاينات */
        width: calc(100vw - 60px); /* عرض ثابت لكل معاينة (100vw - (2*padding + 2*gap)) */
        scroll-snap-align: start; /* لجعل التمرير يتوقف عند بداية كل معاينة */
        box-sizing: border-box;
        
        background-color: var(--craft-paper); /* تم نقلها إلى هنا */
        border: 1px solid #dbdbdb; /* تم نقلها إلى هنا */
        border-radius: 12px; /* تم نقلها إلى هنا */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* ظل خفيف لكل بطاقة - تم نقلها إلى هنا */
        padding: 15px; /* بادينج داخلي لكل بطاقة - تم نقلها إلى هنا */
        margin: 0; /* إزالة الهوامش */
        position: static; /* تأكد أنها static على الموبايل */
            /* === التعديل هنا: تحديد أقصى ارتفاع وتفعيل التمرير العمودي === */
        max-height: calc(50vh - 30px); /* 50vh من ارتفاع الشاشة مطروحًا منها 15px بادينج علوي و 15px بادينج سفلي من #preview-slider-container */
        overflow-y: scroll; /* تفعيل شريط التمرير الرأسي وجعله مرئيًا دائمًا */
        -webkit-overflow-scrolling: touch; /* لتحسين التمرير على iOS */

	}
	
	#pubg-tool-wrapper {
			background: #151515;

	}
}
@media (max-width: 768px) {
    #preview-slider-container {
        overflow-x: auto; /* تفعيل التمرير الأفقي وجعله مرئيًا دائمًا */
        overflow-y: auto; /* إخفاء التمرير العمودي */        
	}
}

/*custom Fonts*/

.name-styles-section .styler-mode-tabs {
    display: flex;
    align-items: center;
    padding: 4px;
    background: #fafafa;
    border: 1px solid #ccc;
    border-radius: 8px;
    gap: 8px;
margin: 0 auto 20px auto;
	max-width: 450px;
}

.name-styles-section .styler-mode-tabs button {
    padding: 12px 24px;
    font-size: 16px;
    background: transparent;
    color: #333;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
    position: relative;
    border-radius: 10px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.name-styles-section .styler-mode-tabs button + button::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #ccc;
}

.name-styles-section .styler-mode-tabs button.active {
    background: linear-gradient(135deg, #ff00cc, #00ccff);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255,0,204,0.4);
}

.name-styles-section .styler-mode-tabs button:active {
    transform: scale(0.97);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

.name-styles-section .styler-mode-tabs button:not(.active):hover {
    background: #eee;
}

#font-types {
    display: none;
    width: 100%;
    overflow-x: auto;
	overflow-y: scroll;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    max-height: 200px;
    background-color: #f9f9f9;
}

#font-types.show {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    column-gap: 16px;
    row-gap: 16px;
}

#font-types.show label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
    height: auto;
    min-height: 50px;
    word-break: break-word;
    line-height: 1.2;
}

#font-types.show input[type="checkbox"] {
    margin: 0;
}

#font-types.show label:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

@media (max-width: 600px) {
    .name-styles-section .styler-mode-tabs {
        width: 100%;
        justify-content: space-between;
    }
    .name-styles-section .styler-mode-tabs button {
        flex: 1;
        padding: 10px 16px;
        font-size: 14px;
    }
    .name-styles-section .styler-mode-tabs button + button::before {
        left: 0;
    }
}

/* CSS for the font style popup */
.font-style-popup-message {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
    background-color: var(--craft-accent);
  color: white;
  padding: 14px 20px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 280px;
  max-width: 90%;
}

.font-style-popup-message.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.font-style-popup-close {
  background-color: white;
  border: none;
  color:var(--craft-accent);
  font-size: 20px;
  cursor: pointer;
  margin-right: 15px;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
}

.font-style-popup-close:hover {
  background-color: #f0f0f0;
  color: #e64a19;
}

@media (max-width: 768px) {
  .font-style-popup-message {
    font-size: 14px;
    min-width: auto;
    max-width: 90%;
  }
	    label[for="nameInput"] {
        font-size: 0.8em; 
    }
.arabic-name-styling-page .Center-H2, .english-name-styling-page .Center-H2, .pubg-name-styling-page .Center-H2, .freefire-name-styling-page .Center-H2 {
	font-size: 20px;
}
} 
/* القاعدة العامة، تأكد أنها موجودة */
.warning-text {
    color: red !important; /* استخدام !important لضمان التجاوز */
    font-weight: bold;
}

/* قواعد أكثر تحديدًا لمعاينات انستجرام */
#instagram-ui .ig-username.warning-text,
#instagram-ui .ig-profile-name.warning-text {
    color: red !important;
}

/* قواعد أكثر تحديدًا لمعاينات فيسبوك (للتأكد فقط) */
#facebook-ui .fb-profile-name.warning-text {
    color: red !important;
}

/* الكلان */
.clan-name {
  font-size: 16px;
  color: #ffd700;
  margin-top: 4px;
  font-weight: 600;
}

/* الشعار الشخصي */
.personal-tag {
  font-size: 14px;
  color: #A9A9A9;
  margin-top: 2px;
  font-style: italic;
}

/* شارات الإنجاز */
.achievements {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.badge {
  background-color: #444;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #777;
  white-space: nowrap;
}
.content-separator {
    border: none;
    height: 3px;
    background-image: linear-gradient(to right, #ff7e5f, #feb47b); // تدرج لوني جذاب
    margin: 40px auto;
    width: 70%;
    max-width: 700px;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); // ظل خفيف
}
hr {
    border: 0;
    height: 1px;
    background-color: #ccc; /* لون افتراضي */
}


.stylish-en-list,
.stylish-ar-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.stylish-en-list {
  direction: ltr;
  text-align: left;
}

.stylish-ar-list {
  direction: rtl;
  text-align: right;
}

.stylish-en-list li,
.stylish-ar-list li {
  position: relative;
  padding: 6px 32px 6px 16px;
  font-family: 'Tangerine', serif;
  font-size: 1.6em;
  line-height: 1.1;
  color: #4a302b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e0d6d1;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stylish-en-list li::before,
.stylish-ar-list li::before {
  content: '✦';
  position: absolute;
  font-size: 0.8em;
  color: #c96;
  top: 50%;
  transform: translateY(-50%);
}

.stylish-en-list li::before {
  right: 12px;
  left: auto;
}

.stylish-ar-list li::before {
  left: 12px;
  right: auto;
}

.stylish-en-list li:hover,
.stylish-ar-list li:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
  .stylish-en-list,
  .stylish-ar-list {
    grid-template-columns: 1fr;
  }
}

.xlist-toast-2025 {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.95em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.xlist-toast-2025.show {
  opacity: 1;
}


/*FreeFire*/
#freefire-tool-wrapper {
    background: #0a0a0a !important;
    width: 95vw !important; /* استخدام عرض الشاشة بالكامل تقريباً */
    max-width: none !important; /* إزالة أي قيود على العرض الأقصى */
	max-height: 80vh !important; /* ارتفاع أكبر مع حدود */
    margin: 0 auto; /* توسيط أفقي */
    padding: 10px;
	overflow-y: auto; /* سكرول بار رأسي عند الحاجة */
    overflow-x: hidden; /* منع التمرير الأفقي */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.profile-container {
    Direction: ltr;
    background-color: #0c0c0c;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    color: #e0e0e0;
    overflow: hidden;
    border: 1px solid #1a1a1a;
	text-align:left;
}

.profile-header-right {
    position: absolute;
    top: 0px;
    right: 20px;
    display: flex;
    align-items: center;
    color: #ccc;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 25;
}

.freefire-logo {
    font-family: 'Impact', sans-serif;
    font-size: 1.7rem;
    color: white;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8), 1px 1px 0px #ffc107;
    letter-spacing: 0.8px;
    position: absolute;
    top: -45px;
    left: 15px;
    z-index: 20;
}

.icon-gear::before {
    content: "\2699";
    font-size: 1.4rem;
    color: #e0e0e0;
    margin-left: 10px;
}
.icon-edit::before {
    content: "\270E";
    font-size: 0.85rem;
    color: #000;
    margin-left: 7px;
}
.icon-calendar::before {
    content: "\1F4C5";
    font-size: 1.05rem;
    color: #000;
}
.icon-globe::before {
    content: "\1F30E";
    font-size: 1.05rem;
    color: #000;
}
.icon-target::before {
    content: "\1F3AF";
    font-size: 1.05rem;
    color: #000;
}
.icon-thumbs-up::before {
    content: "\1F44D";
    font-size: 1.05rem;
    color: #000;
}
.icon-copy::before {
    content: "\1F4CB";
    font-size: 0.85rem;
    color: #000;
    margin-left: 7px;
    cursor: pointer;
}

.top-right-badge {
    width: 25px;
    height: 25px;
    background-color: #7b00d8;
    border-radius: 50%;
    margin-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.6rem;
    color: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.unified-top-section {
    position: relative;
    background: linear-gradient(to bottom, #2a0050, #1a0030);
    border-radius: 0 0 12px 12px;
    padding-bottom: 20px;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    min-height: 250px;
}

.yellow-cutout {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to top, #ffc107, #ff9800);
    transform: skewX(25deg);
    transform-origin: bottom left;
    z-index: 2;
    overflow: hidden;
}
#level-badge-yellow {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #000;
    font-size: 0.9rem;
    font-weight: bold;
    transform: skewX(-25deg);
    transform-origin: bottom left;
    white-space: nowrap;
}

.user-info-main {
    position: relative;
    margin-top: 50px;
    background-color: #e0e0e0;
    border-radius: 10px;
    padding: 15px 18px;
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 8px !important;
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .user-info-main {
        max-width: calc(100% - 30px); /* Adjust based on padding/margin */
    }
}

.avatar-container {
    width: 85px;
    height: 85px;
    background-color: #6a0dad;
    border-radius: 10px;
    border: 3px solid #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    overflow: hidden;
}
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info-text {
    flex-grow: 1;
    color: #222;
}
#freefirename {
    display: flex;
    align-items: center;
    font-size: 1rem; /* Reduced font size */
    font-weight: bold;
    margin-bottom: 3px;
}
#ffname {
    /* No specific styles needed here unless you want to override #freefirename span styles */
}
#fflanguage {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 6px;
}
.social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: #444;
}

.uid-section-bottom {
    position: absolute;
    bottom: 15px;
    right: 20px;
    display: flex;
    align-items: center;
    color: #e0e0e0;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 15;
}

.ranked-tabs-container {
    margin-top: 25px;
    padding: 0 15px;
    position: relative;
}
.ranked-tabs {
    display: flex;
    justify-content: space-around;
    gap: 12px;
}
.ranked-tab {
    flex: 1;
    text-align: center;
    background-color: transparent;
    padding: 10px 0;
    border-radius: 8px;
    font-weight: bold;
    color: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    border: 1px solid #444;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
/* Swapped active/inactive styles */
.ranked-tab:not(.active) {
    background-color: transparent;
    color: #e0e0e0;
    border-color: #444;
}
.ranked-tab.active {
    background-color: #fff;
    color: #000;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    border-color: #fff;
}

.golden-separator {
    height: 2px;
    background: linear-gradient(to right, #ffeb3b, #ffc107, #ffeb3b);
    margin-top: 20px;
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.ranked-details {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: left;
    margin-top: 25px;
    padding: 0 20px;
}
.ranked-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ranked-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ranked-item-text span:first-child {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
    white-space: nowrap;
}
.ranked-item-text span:nth-child(2) {
    font-size: 1.6rem;
    font-weight: bold;
    color: white;
    line-height: 1;
}
.badge-image, .emblem-image {
    width: 50px; /* Reduced size */
    height: 50px; /* Reduced size */
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
    flex-shrink: 0;
}

.separator {
    height: 1px;
    background-color: #2a2a2a;
    margin: 30px 20px;
    border-radius: 0.5px;
}

.placeholder-img-avatar {
    background-color: #6a0dad;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eee;
    font-size: 1.5rem;
    text-align: center;
}
.placeholder-img-badge {
    background-color: #555;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 0.7rem;
    text-align: center;
    border-radius: 8px;
}


/* تنسيقات زر التبديل */
.lang-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    font-weight: bold;
    color: #333;
}

.lang-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.lang-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lang-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4a6cf7;
    transition: .4s;
    border-radius: 34px;
}

.lang-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input:checked + .lang-slider {
    background-color: #ff6b6b;
}

input:checked + .lang-slider:before {
    transform: translateX(26px);
}

/* تخصيص الألوان للنص */
.lang-toggle-container span:first-child {
    color: #4a6cf7;
    font-weight: bold;
}

.lang-toggle-container span:last-child {
    color: #ff6b6b;
    font-weight: bold;
}


@media (max-width: 768px) {
    .user-info-main {
        margin-top: 30px !important;
        padding: 10px 12px !important;
        min-height: unset !important;
        height: auto !important;
        width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .avatar-container {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
    }

    #freefirename {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }

    #fflanguage {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    .social-icons {
        gap: 8px !important;
        font-size: 0.85rem !important;
    }

    .icon-gear::before,
    .icon-edit::before,
    .icon-calendar::before,
    .icon-globe::before,
    .icon-target::before,
    .icon-thumbs-up::before {
        font-size: 0.9rem !important;
    }

    .uid-section-bottom {
        font-size: 0.8rem !important;
        bottom: 10px !important;
        right: 15px !important;
    }

    .ranked-tabs-container {
        margin-top: 15px !important;
    }

    .ranked-tab {
        padding: 6px 0 !important;
        font-size: 0.8rem !important;
    }

    .ranked-details {
        margin-top: 15px !important;
        padding: 0 10px !important;
    }

    .ranked-item-text span:first-child {
        font-size: 0.7rem !important;
    }

    .ranked-item-text span:nth-child(2) {
        font-size: 1.2rem !important;
    }

    .badge-image, .emblem-image {
        width: 40px !important;
        height: 40px !important;
    }
}



/*pubg*/
.pubg-profile-card {
	text-align: left;
	direction: ltr;
	background-color: #282828;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: 100%;
    overflow: hidden;
    color: #E0E0E0;
}

.pubg-profile-header {
    background-color: #353535;
    min-height: 250px;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    position: relative;
}

.pubg-top-info-left {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #A0A0A0;
}

.pubg-top-info-right {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pubg-uid-badge {
    background-color: #3A3A3A;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
}

.pubg-icon-globe, .pubg-icon-settings, .pubg-icon-dropdown, 
.pubg-icon-up, .pubg-icon-like, .pubg-icon-smile, 
.pubg-icon-crown, .pubg-icon-left, .pubg-icon-avatar {
    color: #A0A0A0;
    cursor: pointer;
}

.pubg-icon-crown {
    color: #FCD34D;
}

.pubg-icon-up {
    color: #4CAF50;
}

.pubg-icon-like {
    color: #2196F3;
}

.pubg-icon-smile {
    color: #F44336;
}

.pubg-profile-main {
    display: flex;
    align-items: flex-start;
    margin-top: 3rem;
    padding: 0 1.5rem;
}

.pubg-avatar {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 3px solid #A08040;
    background-color: #4A4A4A;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: #BBBBBB;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    margin-right: 1rem;
}

.pubg-level-badge {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #007BFF;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 0 0 10px 0;
    font-weight: bold;
    line-height: 1;
}

.pubg-player-info {
    flex: 1;
}

.pubg-name-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

#pubg-player-name {
    font-size: 1.25rem;
    font-weight: bold;
}

.pubg-stats-mini {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #A0A0A0;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pubg-mini-stat {
    background-color: #3A3A3A;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
}

.pubg-clan-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #A0A0A0;
}

#pubg-clan-status {
    color: #A0A0A0;
}

.pubg-join-btn {
    background-color: #404040;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.pubg-progress-bars {
    padding: 0 1.5rem;
    margin-top: 1rem;
}

.pubg-progress-item {
    margin-bottom: 0.75rem;
}

.pubg-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #D1D1D1;
}

.pubg-progress-track {
    background-color: #4A4A4A;
    border-radius: 9999px;
    height: 6px;
    margin-top: 0.25rem;
}

.pubg-progress-fill-blue {
    background-color: #007BFF;
    height: 100%;
    border-radius: 9999px;
}

.pubg-progress-fill-orange {
    background-color: #FF4B4B;
    height: 100%;
    border-radius: 9999px;
}

.pubg-tabs {
    display: flex;
    background-color: #282828;
    color: #D1D1D1;
    font-size: 0.875rem;
    font-weight: 600;
    border-bottom: 1px solid #4A4A4A;
}

.pubg-tab {
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    flex-grow: 1;
    text-align: center;
    color: #AAAAAA;
    background-color: transparent;
}

.pubg-tab.active {
    border-color: #007BFF;
    color: #007BFF;
    background-color: #333333;
    border-radius: 5px 5px 0 0;
}

.pubg-stats-grid {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    text-align: center;
}

.pubg-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    position: relative;
}

.pubg-stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 0;
    width: 1px;
    height: 70%;
    background-color: #4A4A4A;
}

@media (min-width: 640px) {
    .pubg-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .pubg-avatar {
        width: 70px;
        height: 70px;
    }
    .pubg-level-badge {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
    .pubg-stat-box {
        padding: 10px 5px;
    }
    .pubg-stat-value {
        font-size: 1.2rem;
    }
    .pubg-stat-label {
        font-size: 0.7rem;
    }
    .pubg-stat-box:not(:last-child)::after {
        top: 10%;
        height: 80%;
    }
}
.pubg-arabic-names .styled-name-preview {
	direction: rtl;
}