/* ── YallaPlayer — Static Styles ── */

/* القيم الافتراضية لحجم "متوسط" (Medium) — موضوعة هنا عمدًا (قبل أصناف
   .y-tabs-lg / .y-tabs-sm وبنفس مستوى التحديد 0,1,0) حتى يحكمها ترتيب
   الظهور داخل هذا الملف نفسه، لا ترتيب <link> مقابل <style> الداخلي في
   رأس الصفحة. سابقًا كانت هذه القيم مكرَّرة في :root داخل <style> بعد
   وسم <link> الخاص بهذا الملف، فكانت تكسب التعارض دائمًا (نفس التحديد
   لكنها لاحقة في الـ cascade) فيظهر حجم "متوسط" دائمًا بدل "كبير" أو
   "صغير" المختارين فعليًا — وهذا هو سبب تبادل الأحجام. تمت إزالة
   التكرار من القالب والاكتفاء بهذا التعريف الوحيد. */
:root {
    --y-btn-h:         42px;
    --y-btn-isz:       18px;
    --y-btn-font-size: 1rem;
    --y-btn-padding:   0.9rem;
}

@media screen and (max-width: 640px) {
    /* قيم "متوسط" (الافتراضي) على الموبايل */
    :root {
        --y-btn-h:         34px;
        --y-btn-font-size: 14px;
    }
}

.y-tabs-lg {
    --y-btn-h:         48px;
    --y-btn-font-size: 1.2rem;
    --y-btn-isz:       22px;
    --y-btn-padding:   1.2rem;
}
.y-tabs-sm {
    --y-btn-h:         34px;
    --y-btn-font-size: .875rem;
    --y-btn-isz:       15px;
    --y-btn-padding:   .7rem;
}
@media screen and (max-width: 640px) {
    /* لكل حجم قيمة موبايل خاصة به حتى يبقى الترتيب
       صغير < متوسط < كبير محفوظًا على الموبايل تمامًا كما في الديسكتوب
       (سابقًا لم يكن لـ "صغير" أي قيمة موبايل خاصة، فبقي بحجم الديسكتوب
       34px بينما أصبح "متوسط" 30px فقط — فظهر متوسط أصغر من صغير،
       وكبير 35px قريبًا جدًا منهما؛ وهذا ما بدا وكأنه تبادل بين
       متوسط وكبير على الموبايل تحديدًا). */
    .y-tabs-sm {
        --y-btn-font-size: 13px;
        --y-btn-h:         30px;
    }
    .y-tabs-lg {
        --y-btn-font-size: 15px;
        --y-btn-h:         38px;
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { display: flex; flex-direction: column; }

.y-wrapper { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; flex: 1; }

.y-menu-bottom .y-menu { order: 2; }
.y-menu-bottom .y-content { order: 1; }

.y-player-caption {
    position: absolute; left: 0; right: 0; bottom: 18%;
    width: 100%; text-align: center; z-index: 5; pointer-events: none;
    color: #fff; font-size: clamp(16px, 3vw, 30px); font-weight: 700; line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 3px rgba(0,0,0,0.6);
    padding: 0 16px;
}
@media (max-width: 500px) {
    .y-player-caption { bottom: 18%; font-size: 13px; z-index: 4; }
}

.y-menu {
    list-style: none; margin: 0; padding: 4px 4px 8px 4px;
    display: flex; align-items: center; gap: 4px; position: relative; clear: both;
    background: #000; min-height: calc(var(--y-btn-h) + 8px);
    overflow-x: scroll; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin; scrollbar-color: #5b5b5b transparent;
    z-index: 101; flex-shrink: 0; flex-wrap: nowrap;
}
.y-menu::-webkit-scrollbar { height: 5px; }
.y-menu::-webkit-scrollbar-track { background: transparent; }
.y-menu::-webkit-scrollbar-thumb { border-radius: 20px; background: #5b5b5b; }

@media (hover: hover) and (pointer: fine) {
    .y-menu { scrollbar-width: none; -ms-overflow-style: none; }
    .y-menu::-webkit-scrollbar { display: none; }
}

.y-menu-li-action {
    flex: 0 0 var(--y-btn-h) !important;
    width: var(--y-btn-h) !important;
    min-width: var(--y-btn-h) !important;
}

.y-menu li { flex: 1; width: 100%; text-align: center; white-space: nowrap; position: relative; z-index: 3; }

.y-tabs-inline .y-menu li { width: auto; flex: 0 0 auto; }

.y-link {
    width: 100%; height: var(--y-btn-h); display: flex; align-items: center; justify-content: center;
    background: var(--y-tab-inact-bg); color: var(--y-tab-inact);
    text-decoration: none; font-size: var(--y-btn-font-size); font-weight: 600; cursor: pointer;
    transition: none; padding: 3px var(--y-btn-padding); gap: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: 0 0 0 #d6d6d6;
    border: solid var(--y-tab-brd) var(--y-tab-inact-bg);
    position: relative; flex: 1;
}
.y-link.active { background: var(--y-tab-act) !important; color: #fff !important; border-color: var(--y-tab-act) !important; z-index: 2; }
.y-link:hover { background: var(--y-tab-act); color: #fff !important; border-color: var(--y-tab-act) !important; }

/* عرض الحدود (--y-tab-brd) موحّد هنا لكل التبويبات في وضع "حدود" بغض
   النظر عن كونها نشطة أو لا. سابقًا كان العرض 2px للتبويب غير النشط
   و0px للنشط (القيمة الافتراضية في :root) — ومع box-sizing: border-box
   لا يتغيّر حجم الصندوق الخارجي، لكن يختفي الإطار الشفّاف المحيط فجأة
   ويمتلئ الصندوق بالكامل بلون الخلفية، فيبدو بصريًا وكأن التبويب
   "تمدّد" لحظة تفعيله. توحيد العرض هنا يجعل الانتقال تلوينًا بحتًا
   (شفاف → معبّأ) بنفس حدود الصندوق تمامًا، بلا أي وميض حجم. */
.y-tabs-outline .y-link { --y-tab-brd: 2px; }
.y-tabs-outline .y-link:not(.active) { background: transparent !important; }

@media screen and (max-width: 640px) {
    .y-menu { min-height: calc(var(--y-btn-h) - 10px); }
    .y-menu li { display: inline-block; vertical-align: middle; }
}

.y-svg { width: var(--y-btn-isz); height: var(--y-btn-isz); fill: currentColor; display: block; }
.y-svg[fill="none"] { fill: none; }

.y-refresh-icon { width: var(--y-btn-isz); height: var(--y-btn-isz); display: flex; align-items: center; justify-content: center; }
.y-refresh-icon svg {
    width: var(--y-btn-isz); height: var(--y-btn-isz); display: block; transform-origin: center;
    transform: rotate(0deg);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
    .y-icon-btn-refresh:hover .y-refresh-icon svg,
    .y-float-refresh:hover .y-refresh-icon svg { transform: rotate(45deg); }
}
.y-icon-btn-refresh.y-pressed .y-refresh-icon svg,
.y-float-refresh.y-pressed .y-refresh-icon svg { transform: rotate(45deg); }

.y-icon-btn {
    width: var(--y-btn-h); height: var(--y-btn-h);
    display: flex; align-items: center; justify-content: center;
    background: var(--y-icon-btn-bg);
    color: var(--y-tab-inact);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
    transform: scale(1);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* تلميحات أداء فقط (بلا أي تأثير بصري): touch-action يلغي انتظار
       المتصفح لتحديد نية اللمسة (سحب/تمرير) قبل تنفيذ استجابة اللمس،
       وwill-change يجهّز طبقة GPU مسبقًا بدل إنشائها لحظة بداية الحركة. */
    touch-action: manipulation;
    will-change: transform;
}

.y-iconbtn-outline .y-icon-btn { background: transparent; border: 2px solid var(--y-icon-btn-bg); }
.y-iconbtn-outline .y-icon-btn-refresh { border-color: var(--y-refresh-bg); }

.y-icon-btn:active,
.y-icon-btn.y-pressed,
.y-icon-btn.y-refresh-spin {
    background: var(--y-tab-act); border-color: var(--y-tab-act);
    color: #fff; outline: none; transform: scale(1.04);
}
@media (hover: hover) {
    .y-icon-btn:hover,
    .y-icon-btn:focus-visible {
        background: var(--y-tab-act); border-color: var(--y-tab-act);
        color: #fff; outline: none; transform: scale(1.04);
    }
}
.y-iconbtn-outline .y-icon-btn:active,
.y-iconbtn-outline .y-icon-btn.y-pressed,
.y-iconbtn-outline .y-icon-btn.y-refresh-spin { background: transparent; border-color: var(--y-tab-act); }
@media (hover: hover) {
    .y-iconbtn-outline .y-icon-btn:hover,
    .y-iconbtn-outline .y-icon-btn:focus-visible { background: transparent; border-color: var(--y-tab-act); }
}

.y-float-btn {
    position: absolute; top: calc(var(--y-btn-h) + 8px + 4px); z-index: 150;
    width: var(--y-btn-h); height: var(--y-btn-h);
    display: flex; align-items: center; justify-content: center;
    background: var(--y-icon-btn-bg);
    color: var(--y-tab-inact);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer; box-shadow: none; transform: scale(1);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    will-change: transform;
}
.y-iconbtn-outline .y-float-btn { background: transparent; border: 2px solid var(--y-icon-btn-bg); }
.y-iconbtn-outline .y-float-refresh { border-color: var(--y-refresh-bg); }

.y-float-btn:active,
.y-float-btn.y-pressed,
.y-float-btn.y-refresh-spin {
    background: var(--y-tab-act); border-color: var(--y-tab-act);
    color: #fff; outline: none; transform: scale(1.04);
}
@media (hover: hover) {
    .y-float-btn:hover,
    .y-float-btn:focus-visible {
        background: var(--y-tab-act); border-color: var(--y-tab-act);
        color: #fff; outline: none; transform: scale(1.04);
    }
}
.y-iconbtn-outline .y-float-btn:active,
.y-iconbtn-outline .y-float-btn.y-pressed,
.y-iconbtn-outline .y-float-btn.y-refresh-spin { background: transparent; border-color: var(--y-tab-act); }
@media (hover: hover) {
    .y-iconbtn-outline .y-float-btn:hover,
    .y-iconbtn-outline .y-float-btn:focus-visible { background: transparent; border-color: var(--y-tab-act); }
}

.y-float-refresh { right: 5px; }
.y-float-share   { left: 5px; }

.y-icon-btn-refresh,
.y-float-refresh { background: var(--y-refresh-bg); border-color: var(--y-refresh-border); }

.y-content { position: relative; flex: 1; width: 100%; height: 100%; overflow: hidden; background: #000 center/contain no-repeat; z-index: 0; }
.psp-frame-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; z-index: 1; overflow: hidden; }
.psp-frame-container video, .psp-frame-container iframe, .psp-frame-container .video-js,
.psp-frame-container .plyr, .psp-frame-container .jwplayer, .psp-frame-container > div { width: 100% !important; height: 100% !important; border: none; display: block; object-fit: contain; }

.player-poster[data-poster], .clappr-watermark { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }

.rmp-container { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
.rmp-container, .rmp-container * { direction: ltr !important; unicode-bidi: isolate; }
#y-content-area, .psp-frame-container { direction: ltr !important; }

.video-js .vjs-big-play-button { background-color: rgba(0,0,0,0.5) !important; border-color: var(--y-player-theme) !important; color: var(--y-player-theme) !important; }
.video-js .vjs-play-progress, .video-js .vjs-volume-level { background-color: var(--y-player-theme) !important; }
.level_selector[data-level-selector] li.current { color: var(--y-player-theme) !important; border-right: 3px solid var(--y-player-theme) !important; }
.media-control-center .bar-fill-1, .media-control-center .bar-fill-2 { background-color: var(--y-player-theme) !important; }
video.y-hls-native { accent-color: var(--y-player-theme); }
.jwplayer { --jw-color-active: var(--y-player-theme) !important; --jw-color-time-slider-progress: var(--y-player-theme) !important; --jw-color-volume-slider-progress: var(--y-player-theme) !important; }
.jw-knob { background-color: var(--y-player-theme) !important; }
.jw-button-color { color: var(--y-player-theme) !important; }
.jw-button-color:hover { color: var(--y-player-theme) !important; filter: brightness(1.3); }
.jw-option.jw-active-option { color: var(--y-player-theme) !important; }
.jw-text-live { color: #fff !important; }
.jw-text-live::before { background-color: #e00 !important; color: #e00 !important; }
.jw-progress { background-color: var(--y-player-theme) !important; }
.jw-volume { background-color: var(--y-player-theme) !important; }
.jw-time-tip .jw-time-stamp { background: var(--y-player-theme) !important; }
.jw-overlay .jw-active-option { color: var(--y-player-theme) !important; }
.jw-icon-tooltip.jw-open .jw-icon-arrow { color: var(--y-player-theme) !important; }

/* أزرار JW السفلية (control bar): على عكس باقي المحركات (Plyr/Video.js/hls
   الأصلي...) التي تعتمد width:100% بسيطة عبر CSS، يقوم JW بحساب عرض شريط
   التحكم بالبكسل ويكتبه inline عبر جافاسكربت وقت التهيئة بناءً على عرض
   الحاوية في تلك اللحظة بالذات. لو حدث التهيّؤ قبل أن يأخذ التخطيط (layout)
   عرضه النهائي — أو حدث تغيّر لاحق في حجم الحاوية ولم يُعِد JW قياسها —
   يبقى الشريط بعرض أصغر من الحاوية الفعلية، فتظهر الأزرار متجمّعة قرب
   الزوايا بدل الامتداد على كامل العرض كما في باقي المشغلات. هذا التجاوز
   يضمن بصريًا أن الشريط وكل عناصره الداخلية تمتد دائمًا لعرض الحاوية
   الكامل بغض النظر عن القيمة التي يحسبها JW بالبكسل. */
.jwplayer .jw-controlbar,
.jwplayer .jw-controlbar .jw-button-container { width: 100% !important; }

/* ===== Bitmovin Player — تلوين الثيم ===== */
/* أسماء الـ classes موثَّقة رسميًا من Bitmovin (Player UI CSS Class Reference):
   https://developer.bitmovin.com/playback/docs/player-ui-css-class-reference
   نستخدم !important لأن CSS الواجهة الافتراضية لـ Bitmovin (bitmovinplayer-ui.css)
   يُحقَن ديناميكيًا عبر جافاسكربت بعد تحميل سكربت اللاعب من CDN — أي أنه قد يظهر
   متأخرًا في الـ cascade بعد ورقة أنماطنا، فنحمي القواعد من نفس مشكلة الترتيب
   التي عالجناها سابقًا في حجم تبويبات JW.
   ملاحظة مهمة: أيقونات أزرار Bitmovin (تشغيل/إيقاف/ملء الشاشة...) هي صور SVG
   بلون ثابت مدمج داخل ملف الصورة نفسه (وليست currentColor) — وهذا موثَّق رسميًا
   من Bitmovin بأن تغيير لونها يتطلب استبدال ملفات الـ SVG نفسها أو استبدال
   background-image بالكامل، وليس مجرد تجاوز CSS بسيط. لذلك هذا القسم يُلوِّن
   كل ما هو قابل للتلوين رسميًا عبر CSS (شريط التقدم وشريط الصوت)، بينما تبقى
   أيقونات الأزرار بلونها الافتراضي (الأزرق المميز لـ Bitmovin) كقيد من المنصة
   نفسها، وليس قصورًا في هذا التنفيذ. */
.bmpui-seekbar-playbackposition,
.bmpui-seekbar-playbackposition-marker,
.bmpui-ui-volumeslider .bmpui-seekbar-playbackposition,
.bmpui-ui-volumeslider .bmpui-seekbar-playbackposition-marker { background-color: var(--y-player-theme) !important; }

.y-logo { display: none !important; position: absolute; z-index: 90; pointer-events: none; height: auto !important; }
@media only screen and (max-width: 768px) and (orientation: portrait) { .y-logo { display: block !important; } }
.y-logo.pos-top-right     { top: 15px;    right: 15px; }
.y-logo.pos-top-left      { top: 15px;    left:  15px; }
.y-logo.pos-bottom-right  { bottom: 60px; right: 15px; }
.y-logo.pos-bottom-left   { bottom: 60px; left:  15px; }
.y-logo.pos-top-center    { top: 15px;    left: 50%; transform: translateX(-50%); }
.y-logo.pos-bottom-center { bottom: 60px; left: 50%; transform: translateX(-50%); }

.y-play-layer { position: absolute; inset: 0; z-index: 50; background: center/contain no-repeat #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.y-play-btn { width: 80px; height: 80px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 2px solid var(--y-player-theme); display: flex; align-items: center; justify-content: center; padding-left: 5px; transition: transform .2s; }
.y-play-icon { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 35px solid var(--y-player-theme); }
.y-play-layer:hover .y-play-btn { transform: scale(1.1); }

.y-embed-holder { position: absolute; inset: 0; z-index: 300; display: none; background: rgba(0,0,0,0.8); opacity: 0; transition: opacity 150ms ease-out; }
.y-embed-holder.y-embed-visible { display: block; opacity: 1; }
.y-embed-holder-inner { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 20px; }
.y-embed-data { position: relative; width: 700px; max-width: 98%; max-height: 94%; padding: 30px; border: 2px solid #3f3f3f; border-radius: 12px; background: #212121; box-shadow: 1px 1px 100px #000; overflow: hidden; }
.y-embed-title { margin-bottom: 20px; color: #fff; font-size: 18px; font-weight: 700; }
.y-embed-box { display: flex; align-items: center; gap: 15px; min-height: 52px; padding: 8px; border: 1px solid #3f3f3f; border-radius: 12px; background: #0f0f0f; }
.y-embed-box textarea { width: 100%; min-height: 90px; padding: 0; border: 0; background: transparent; color: #d7e6eb; direction: ltr; text-align: left; font-size: 15px; font-family: "Roboto", "Noto", sans-serif; resize: vertical; }
.y-embed-copy { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: #3ea6ff; color: #0f0f0f; font: 700 14px/36px "Roboto", Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.y-embed-close { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.y-embed-close svg { width: 18px; height: 18px; transition: transform 0.1s ease-out; }
.y-embed-close:hover svg, .y-embed-close:focus-visible svg { transform: scale(1.2); }
@media screen and (max-width: 640px) {
    .y-embed-data { padding: 20px 15px 30px; }
    .y-embed-box { flex-direction: column; align-items: stretch; }
}

.telegram-widget-container { position: absolute; bottom: 25px; right: 25px; z-index: 999999; background: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); direction: rtl; border: 1px solid #f0f0f0; display: none; }
.y-menu-bottom #social-widget { bottom: calc(var(--y-btn-h) + 8px + 25px); }
@media (max-width: 640px) {
    #social-widget { bottom: calc(var(--y-btn-h) + 20px); }
    .y-menu-bottom #social-widget { bottom: calc(var(--y-btn-h) + 20px); }
}
.telegram-content-link { display: flex; align-items: center; text-decoration: none !important; padding: 12px 16px; color: #333; gap: 12px; position: relative; }
.telegram-icon-box { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow: hidden; }
.telegram-icon-box svg { width: 24px; height: 24px; flex-shrink: 0; }
.telegram-text-box { display: flex; flex-direction: column; line-height: 1.3; text-align: right; }
.tg-title    { font-weight: 700; font-size: 15px; color: #222; }
.tg-subtitle { font-size: 12px; color: #666; font-weight: 400; }
.telegram-close-btn { position: absolute; top: -12px; right: -10px; background: #ff3b30; color: white; border: 2px solid #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); padding: 0; transition: transform .2s; z-index: 10; }
.telegram-close-btn:hover { transform: scale(1.1); background: #d63026; }
.telegram-close-btn svg { width: 16px; height: 16px; }
.telegram-bell-box { color: #f39c12; margin-right: auto; padding-right: 8px; }
.bell-icon { width: 24px; height: 24px; animation: bellShake 3s infinite; transform-origin: top center; }
@keyframes bellShake { 0%,80%{transform:rotate(0)} 82%{transform:rotate(15deg)} 84%{transform:rotate(-15deg)} 86%{transform:rotate(10deg)} 88%{transform:rotate(-10deg)} 90%{transform:rotate(5deg)} 92%{transform:rotate(-5deg)} 100%{transform:rotate(0)} }
@media (max-width: 500px) {
    .telegram-widget-container { right: 15px; bottom: 20px; }
    .telegram-content-link { padding: 10px 12px; gap: 10px; }
    .telegram-icon-box { width: 36px; height: 36px; }
    .tg-title { font-size: 13px; }
    .telegram-close-btn { width: 28px; height: 28px; }
}
.telegram-widget-container.tg-pos-left { right: auto; left: 25px; }
.telegram-widget-container.tg-pos-left .telegram-close-btn { right: auto; left: -10px; }
@media (max-width: 500px) { .telegram-widget-container.tg-pos-left { left: 15px; right: auto; } }

.telegram-widget-container.tg-skin-dark { background: #1f1f1f; border-color: #333; }
.telegram-widget-container.tg-skin-dark .telegram-content-link { color: #eee; }
.telegram-widget-container.tg-skin-dark .tg-title { color: #fff; }
.telegram-widget-container.tg-skin-dark .tg-subtitle { color: #aaa; }

.y-mid-ad-overlay { position: absolute; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); pointer-events: auto; }
.y-mid-ad-box { position: relative; max-width: 100%; max-height: 100%; display: flex; justify-content: center; align-items: center; }
.y-mid-ad-content { display: block; overflow: hidden; }
.y-mid-close { position: absolute; top: -12px; right: -10px; background: #ff3b30; color: white; border: 2px solid #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); padding: 0; cursor: pointer; z-index: 100; transition: transform .2s; }
.y-mid-close:hover { transform: scale(1.1); background: #d63026; }
.y-mid-close svg { width: 16px; height: 16px; }