.elementor-5023 .elementor-element.elementor-element-85eb2e8{--display:flex;--overlay-opacity:0.75;--margin-top:-38px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5023 .elementor-element.elementor-element-85eb2e8:not(.elementor-motion-effects-element-type-background), .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D80F0F00;background-image:url("https://princestream.com/wp-content/uploads/2026/06/49e57a7f0bacd76c886b443efcdaf304.jpg");background-position:center center;}.elementor-5023 .elementor-element.elementor-element-85eb2e8::before, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-background-video-container::before, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .e-con-inner > .elementor-background-video-container::before, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-background-slideshow::before, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:radial-gradient(at center center, #000000 0%, var( --e-global-color-4e8693e ) 100%);}.elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-shape-top .elementor-shape-fill, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#02010100;}.elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-shape-bottom .elementor-shape-fill, .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#0201016B;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5023 .elementor-element.elementor-element-4149005 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:230px 0px 130px 0px;}.elementor-5023 .elementor-element.elementor-element-4149005.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-5023 .elementor-element.elementor-element-4149005{text-align:center;}.elementor-5023 .elementor-element.elementor-element-4149005 .elementor-heading-title{font-family:"Paprika", Sans-serif;font-weight:600;text-shadow:0px 0px 22px #B4B4B4;color:#FFFFFF;}.elementor-5023 .elementor-element.elementor-element-4149005 .elementor-heading-title a:hover, .elementor-5023 .elementor-element.elementor-element-4149005 .elementor-heading-title a:focus{color:#000000;}.elementor-5023 .elementor-element.elementor-element-4149005 .elementor-heading-title a{transition-duration:3s;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5023 .elementor-element.elementor-element-d1a86b3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:22px 0px 0px 0px;}.elementor-5023 .elementor-element.elementor-element-d1a86b3.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-5023 .elementor-element.elementor-element-d1a86b3{text-align:center;font-family:"Paprika", Sans-serif;font-weight:400;text-shadow:0px 0px 10px rgba(255, 255, 255, 0.3);color:#FFFFFF;}.elementor-5023 .elementor-element.elementor-element-d1a86b3 p{margin-block-end:43px;}.elementor-5023 .elementor-element.elementor-element-06c0cdd{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:30px;--padding-left:150px;--padding-right:0px;}.elementor-5023 .elementor-element.elementor-element-4b8eee3.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-5023 .elementor-element.elementor-element-b1e96f0{--display:flex;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-image-wrap::before{background-color:transparent;background-image:linear-gradient(360deg, #381932FA 0%, #00000000 100%);}.elementor-5023 .elementor-element.elementor-element-829b91e{width:var( --container-widget-width, 103.585% );max-width:103.585%;--container-widget-width:103.585%;--container-widget-flex-grow:0;}.elementor-5023 .elementor-element.elementor-element-829b91e > .elementor-widget-container{margin:27px 40px 27px 0px;}.elementor-5023 .elementor-element.elementor-element-829b91e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-5023 .elementor-element.elementor-element-829b91e.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-content-wrap{padding:28px 28px 28px 28px;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-item{border-radius:18px 18px 18px 18px;clip-path:inset(10% 0 10% 0 round 18px 18px 18px 18px);}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-title:hover, .elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-title a:hover{color:#000000;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-title{font-family:"Della Respira", Sans-serif;font-size:26px;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-title, .elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-title a{text-shadow:0px 0px 17px #000000;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .swiper-pagination .swiper-pagination-bullet{background:#02010100;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#02010100;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn-a{background-color:#02010103;margin-right:calc(0px/2);justify-content:center;color:#FFFFFF;border-radius:7px 7px 7px 7px;overflow:hidden;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn-a:hover{background-color:#361B4373;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn-b{background-color:#361B4373;margin-left:calc(0px/2);justify-content:center;border-radius:7px 7px 7px 7px;overflow:hidden;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn-b:hover{background-color:#C43DA000;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-separator{background-color:#FFFFFF;--sa-sep-ring-w:5px;--sa-sep-ring-color:#FFFFFF26;}.elementor-5023 .elementor-element.elementor-element-834c390 > .elementor-widget-container{padding:0px 0px 100px 0px;}.elementor-5023 .elementor-element.elementor-element-834c390.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-dual-button{justify-content:center !important;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-dual-button-container{width:30%;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn{font-family:"Paprika", Sans-serif;box-shadow:0px 0px 10px 0px rgba(255, 255, 255, 0.5);}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn-a svg *{fill:#FFFFFF;}.elementor-5023 .elementor-element.elementor-element-834c390 .sa-btn.sa-btn-a:hover{box-shadow:0px 0px 10px 0px rgba(255, 255, 255, 0.5);}@media(max-width:767px){.elementor-5023 .elementor-element.elementor-element-829b91e > .elementor-widget-container{margin:-8px 0px 0px 0px;}.elementor-5023 .elementor-element.elementor-element-829b91e.elementor-element{--align-self:flex-start;}.elementor-5023 .elementor-element.elementor-element-829b91e .bdt-prime-slider-tango .bdt-item{border-radius:3px 3px 3px 3px;clip-path:inset(10% 0 10% 0 round 3px 3px 3px 3px);}}@media(min-width:1025px){.elementor-5023 .elementor-element.elementor-element-85eb2e8:not(.elementor-motion-effects-element-type-background), .elementor-5023 .elementor-element.elementor-element-85eb2e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-4b8eee3 *//* ==========================================================================
   تغيير لون شريط التمرير (Scrollbar) لكل المتصفحات
   ========================================================================== */

/* أولاً: لمتصفحات Chrome و Edge و Safari */

/* 1. تحديد حجم ومساحة شريط التمرير بالكامل */
.continent-group::-webkit-scrollbar,
.countries::-webkit-scrollbar,
.channels::-webkit-scrollbar,
.countryChannels::-webkit-scrollbar,
#countryList::-webkit-scrollbar,
#stationList::-webkit-scrollbar {
    width: 8px; /* عرض الشريط العمودي */
    height: 8px; /* ارتفاع الشريط الأفقي (إن وجد) */
}

/* 2. تغيير لون الخلفية التي يتحرك عليها الشريط (الخلفية هنا شفافة لتبدو أجمل) */
.continent-group::-webkit-scrollbar-track,
.countries::-webkit-scrollbar-track,
.channels::-webkit-scrollbar-track,
.countryChannels::-webkit-scrollbar-track,
#countryList::-webkit-scrollbar-track,
#stationList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03); /* خلفية داكنة خفيفة جداً */
    border-radius: 10px;
}

/* 3. تغيير لون "المقبض" أو الزر المتحرك (العنصر الأبيض الذي تراه حالياً) */
.continent-group::-webkit-scrollbar-thumb,
.countries::-webkit-scrollbar-thumb,
.channels::-webkit-scrollbar-thumb,
.countryChannels::-webkit-scrollbar-thumb,
#countryList::-webkit-scrollbar-thumb,
#stationList::-webkit-scrollbar-thumb {
    background: #8a2be2; /* تغيير اللون الأبيض إلى البنفسجي (يمكنك كتابة أي لون هنا) */
    border-radius: 10px; /* جعل زوايا الشريط دائرية ناعمة */
    border: 2px solid #13111a; /* يضيف فراغاً بسيطاً حول الشريط ليعطيه مظهراً احترافياً */
}

/* 4. تغيير اللون عند وضع مؤشر الماوس (Hover) فوق شريط التمرير */
.continent-group::-webkit-scrollbar-thumb:hover,
.countries::-webkit-scrollbar-thumb:hover,
.channels::-webkit-scrollbar-thumb:hover,
.countryChannels::-webkit-scrollbar-thumb:hover,
#countryList::-webkit-scrollbar-thumb:hover,
#stationList::-webkit-scrollbar-thumb:hover {
    background: #a046fe; /* يصبح بنفسجي أفتح عند تقريب الماوس */
}


/* ثانياً: لمتصفح Firefox (يدعم طريقة أبسط) */
.continent-group,
.countries,
.channels,
.countryChannels,
#countryList,
#stationList {
    scrollbar-width: thin; /* جعل الشريط نحيفاً */
    scrollbar-color: #8a2be2 rgba(255, 255, 255, 0.03); /* [لون الشريط] ثم [لون الخلفية] */
}
/* ==========================================================================
   1. Alignement global de la page (Centrage absolu)
   ========================================================================== */
html, body {
    background-color: #; /* Couleur sombre extérieure */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;  /* Centre horizontalement */
margin: auto    box-sizing: border-box;
}

/* ==========================================================================
   2. Le Tableau Principal (Boîtier centré avec marges tout autour)
   ========================================================================== */
body .iptv-wrapper {
    background: #13111a;       /* Couleur sombre intérieure */
    border: 1px solid #231f33; /* Bordure fine du tableau */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); /* Ombre pour donner du relief */
    
    /* Dimensions fixes pour laisser les espaces vides autour */
    width: 85%;                
    max-width: 1150px;         
    height: 80vh;              
    max-height: 650px;         
    
    padding: 30px;
    border-radius: 20px;
    color: white;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;    /* Aligne recherche, continents et chaînes verticalement */
    box-sizing: border-box;
}

/* Barre de recherche */
.iptv-wrapper .search-box input {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 15px;
    background: #252535;
    color: white;
    font-size: 17px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

/* Boutons des Continents */
.iptv-wrapper .continents {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.iptv-wrapper .continent {
    background: #28283b;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 30px;
    cursor: pointer;
}

.iptv-wrapper .active {
    background: linear-gradient(90deg, #ff4dff, #4da6ff);
}

/* ==========================================================================
   3. Zone de Contenu Interne (Pays à gauche, Chaînes à droite)
   ========================================================================== */
.iptv-wrapper .content {
    display: flex;
    gap: 30px;
    flex-grow: 1;             /* Remplit le reste de l'espace dans le tableau */
    overflow: hidden;         /* Bloque les débordements */
    height: calc(100% - 150px); 
}

/* Liste des pays (Sidebar gauche) */
.content .continent-group, 
.content .countries {
    width: 25%;
    height: 100%;             /* S'adapte à la hauteur du tableau */
    overflow-y: auto;         /* Active le scroll uniquement pour les pays */
    display: none;
    flex-direction: column;
    gap: 12px;
    padding-right: 5px;       
}

#america-countries {
    display: flex;
}

.content .country {
    background: #252535;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* Zone des Chaînes (Grille droite) */
.content .channels {
    width: 75%;
    height: 100%;             /* S'adapte à la hauteur du tableau */
    overflow-y: auto;         /* Active le scroll uniquement pour les chaînes */
    padding-right: 5px;
}

/* Grille à 3 colonnes pour les chaînes */
.channels .countryChannels {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes comme demandé */
    gap: 15px;
    align-content: start;
}

.countryChannels .channel {
    display: block;
    width: 100%;
    padding: 15px;
    margin-bottom: 0px;       /* Supprim/* End custom CSS */