@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111111;--panel:#202020;--text:#f5f5f3;--muted:#b2b2b2;--yellow:#f3ce00;--line:#383838;font-family:'Space Grotesk','Noto Sans Arabic',sans-serif;font-size:16px;scroll-behavior:smooth;scroll-padding-top:2rem}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}button{cursor:pointer}a:hover{text-decoration:underline;text-underline-offset:5px}.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}.header{min-height:114px;display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;direction:ltr}.brand:hover{text-decoration:none}.monogram{font-size:2.7rem;font-weight:700;letter-spacing:-.2rem}.monogram span{color:var(--yellow)}.brand-name{font-size:.75rem;font-weight:700;line-height:1.4;letter-spacing:.11em}.header nav{display:flex;gap:36px;font-size:.95rem}.languages{border:1px solid var(--line);border-radius:100px;display:flex;padding:4px;gap:2px;direction:rtl}.languages button{border:0;background:transparent;color:var(--muted);border-radius:100px;padding:7px 14px;min-height:38px;font-size:.875rem;font-weight:600}.languages button[aria-pressed=true]{background:var(--yellow);color:var(--bg)}.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;padding-block:76px 84px}.eyebrow{font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);display:flex;gap:12px;align-items:center;margin:0 0 28px}.short-line{width:25px;height:2px;background:var(--yellow)}h1{font-size:clamp(4rem,6.7vw,6.6rem);line-height:1.02;letter-spacing:-.065em;margin:0;font-weight:700}.accent{color:var(--yellow)}.intro{font-size:1.1rem;line-height:1.9;max-width:370px;margin:28px 0 32px;color:var(--muted)}.button{display:inline-flex;justify-content:center;align-items:center;gap:13px;min-height:56px;padding:14px 24px;font-size:1rem;font-weight:600;border-radius:4px;transition:transform .18s}.button:hover{transform:translateY(-2px);text-decoration:none}.primary{background:var(--yellow);color:var(--bg)}.button svg{width:22px;height:22px}.feature{min-width:0;padding-top:20px}.feature-heading{display:flex;justify-content:space-between;color:var(--muted);font-size:.8125rem;font-weight:500;letter-spacing:.05em;margin-bottom:14px}.player{aspect-ratio:16/9;background:#080808;border:1px solid var(--line);overflow:hidden}.player iframe{width:100%;height:100%;border:0;display:block}.feature-caption{display:flex;justify-content:space-between;align-items:center;padding-block:23px 14px;border-bottom:1px solid var(--line);gap:20px}.small-label{font-size:.75rem;color:var(--muted);letter-spacing:.1em;margin:0 0 9px}.feature-caption h2{font-size:1.6rem;margin:0;font-weight:500}.round-link{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:1.5rem;flex-shrink:0}.round-link:hover{background:var(--yellow);color:var(--bg);text-decoration:none}.video-help{font-size:.8125rem;line-height:1.8;color:var(--muted);margin:12px 0 0}.video-help a{text-decoration:underline;text-underline-offset:3px}.channel-strip{background:var(--yellow);color:var(--bg)}.strip-content{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:25px}.strip-content p{font-size:1.45rem;font-weight:600;margin:0}.strip-content a{display:flex;gap:24px;font-weight:600;font-size:.95rem}.about{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-block:80px}.about h2,.contact h2{font-size:clamp(2rem,3vw,3rem);line-height:1.3;letter-spacing:-.04em;margin:0;max-width:460px}.about .eyebrow{margin-bottom:20px}.about-copy{align-self:center}.about-copy p,.contact p:not(.eyebrow){font-size:1.0625rem;color:var(--muted);line-height:1.9;margin:0 0 22px}.text-link{display:inline-flex;gap:26px;color:var(--yellow);font-weight:500}.contact{background:var(--panel);border:1px solid var(--line);padding:40px;display:flex;justify-content:space-between;align-items:center;gap:40px;border-radius:6px}.contact .eyebrow{color:var(--yellow);margin-bottom:16px}.contact h2{max-width:none}.contact p:not(.eyebrow){margin:18px 0 0;max-width:650px}.light{background:var(--text);color:var(--bg);flex-shrink:0}footer{display:flex;justify-content:space-between;align-items:center;gap:22px;padding-block:40px;font-size:.8125rem;color:var(--muted)}.footer-name{font-weight:700;letter-spacing:.04em;color:var(--text)}.footer-name span{color:var(--yellow);padding-inline-start:4px}.skip{position:fixed;top:-200px;background:var(--yellow);color:var(--bg);padding:16px;z-index:3}.skip:focus{top:10px;inset-inline-start:10px}html[dir=rtl] body{font-family:'Noto Sans Arabic','Space Grotesk',sans-serif}html[dir=rtl] h1{line-height:1.5;letter-spacing:0;font-size:clamp(4rem,6vw,6rem)}html[dir=rtl] .eyebrow,html[dir=rtl] h2{letter-spacing:0}html[dir=rtl] .hero{padding-block:45px 65px}html[dir=rtl] .intro{margin-top:10px}html[dir=rtl] .brand,html[dir=rtl] [dir=ltr]{font-family:'Space Grotesk',sans-serif}
@media(min-width:1600px){.hero{padding-block:100px}}@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero{gap:32px}.header nav{gap:22px}.brand-name{display:none}.about{gap:45px}.contact{padding:32px}.contact h2{font-size:2rem}.contact p:not(.eyebrow){max-width:430px}}@media(max-width:720px){.wrap{width:calc(100% - 36px)}.header{min-height:88px;gap:18px;flex-wrap:wrap;padding-block:16px}.brand{order:0}.languages{order:1}.header nav{order:2;flex-basis:100%;justify-content:center;border-top:1px solid var(--line);padding-top:15px;gap:35px}.monogram{font-size:2.2rem}.hero,html[dir=rtl] .hero{grid-template-columns:1fr;padding-block:40px 36px;gap:24px}h1{font-size:clamp(3.5rem,14vw,6rem)}html[dir=rtl] h1{font-size:clamp(3.5rem,13vw,5.5rem);line-height:1.4}.hero .eyebrow{margin-bottom:20px}.intro{max-width:100%;margin-block:22px}.feature{padding-top:14px}.feature-caption h2{font-size:1.35rem}.strip-content{flex-direction:column;align-items:flex-start;gap:16px;padding-block:25px}.strip-content p{font-size:1.2rem}.strip-content a{font-size:.875rem}.about{grid-template-columns:1fr;gap:26px;padding-block:45px}.about h2{font-size:2.2rem}.about-copy p{font-size:1rem}.contact{padding:26px;flex-direction:column;align-items:flex-start;gap:25px}.contact h2{font-size:2rem}.contact .button{width:100%}footer{flex-wrap:wrap;justify-content:space-between;padding-block:28px}footer p{order:2;flex-basis:100%;margin:0}html[dir=rtl] .about h2,html[dir=rtl] .contact h2{font-size:1.85rem}.eyebrow{font-size:.875rem}.feature-heading{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.button{transition:none}}
.site-banner{width:100%;background:#0d202c;line-height:0;direction:ltr}.site-banner img{display:block;width:100%;height:auto;max-width:1855px;margin-inline:auto}

/* Animated menu labels, shared by both reading directions. */
.header nav{gap:8px;flex-wrap:wrap}
.header nav a{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:8px;line-height:1.6;transition:color .2s ease,transform .25s ease;text-decoration:none}
.header nav a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);border-radius:inherit;opacity:0;transform:translateY(6px) scale(.9);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.header nav a:focus-visible,.header nav a:active{color:var(--bg);transform:translateY(-2px);text-decoration:none}
.header nav a:focus-visible::before,.header nav a:active::before{opacity:1;transform:translateY(0) scale(1)}
@media(hover:hover){.header nav a:hover{color:var(--bg);transform:translateY(-2px);text-decoration:none}.header nav a:hover::before{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:720px){.header nav{gap:4px}.header nav a{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.header nav a,.header nav a::before{transition:none}.header nav a:hover,.header nav a:focus-visible,.header nav a:active{transform:none}}

.brand-logo{display:block;width:58px;height:58px;object-fit:cover;border-radius:50%;border:2px solid var(--yellow)}.about-identity{display:flex;align-items:center;gap:28px}.portrait{display:block;width:164px;height:164px;object-fit:cover;border-radius:8px;flex-shrink:0}.about-identity h2{font-size:clamp(1.75rem,2.4vw,2.6rem)}@media(max-width:1000px){.about-identity{flex-direction:column;align-items:flex-start}.portrait{width:140px;height:140px}}@media(max-width:720px){.brand-logo{width:48px;height:48px}.about-identity{flex-direction:row;align-items:center;gap:20px}.portrait{width:100px;height:100px}.about-identity .eyebrow{margin-bottom:12px}.about-identity h2,html[dir=rtl] .about-identity h2{font-size:1.55rem}}@media(max-width:380px){.about-identity{flex-direction:column;align-items:flex-start}}

.content-section{padding-block:40px;border-bottom:1px solid var(--line)}.content-section h2{font-size:2rem}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px}.video-card{display:block;max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}.video-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.video-card strong{display:block;padding:18px;font-size:1.1rem}.social-list{display:flex;gap:12px;flex-wrap:wrap}.social-list a{padding:14px 22px;border:1px solid var(--yellow);border-radius:8px;color:var(--yellow)}.social-list a:hover{background:var(--yellow);color:var(--bg)}.header{gap:18px}.header nav a{padding-inline:12px}.header nav{justify-content:center}

:is(#all-videos,#popular-list){grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}:is(#all-videos,#popular-list) .video-card{max-width:none;min-width:0;border-radius:8px;background:#222;border:1px solid #3c3c3c;transition:transform .2s ease,border-color .2s ease}:is(#all-videos,#popular-list) .video-card img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover}:is(#all-videos,#popular-list) .video-card strong{padding:16px 18px;font-size:1.05rem;line-height:1.65;overflow-wrap:anywhere}:is(#all-videos,#popular-list) .video-card:hover{transform:translateY(-4px);border-color:var(--yellow);text-decoration:none}.more-videos{text-align:center;margin-top:32px}.more-videos button{border:0;min-width:180px}.more-videos button[hidden]{display:none}@media(max-width:900px){:is(#all-videos,#popular-list){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}@media(max-width:560px){:is(#all-videos,#popular-list){grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){:is(#all-videos,#popular-list) .video-card{transition:none}:is(#all-videos,#popular-list) .video-card:hover{transform:none}}


[data-view][hidden]{display:none!important}.header nav a[aria-current="page"]{color:var(--bg)}.header nav a[aria-current="page"]::before{opacity:1;transform:none}main{min-height:45vh}


#socials{padding-block:48px 64px;border-bottom:0}#socials>h2{margin-top:0;margin-bottom:30px}.social-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.social-list .social-card{--platform:#f3ce00;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:26px;border:1px solid #383838;border-radius:16px;background:linear-gradient(145deg,#262626,#191919);color:#f5f5f5;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.social-card::after{content:"";position:absolute;inset:auto 26px 0;height:3px;background:var(--platform);transform:scaleX(0);transition:transform .25s ease;transform-origin:center}.social-list .social-facebook{--platform:#75aaff}.social-list .social-snapchat{--platform:#ffef00}.social-list .social-tiktok{--platform:#69eeee}.social-list .social-telegram{--platform:#68c8fa}.social-list .social-youtube{--platform:#ff7474}.social-card-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:28px;direction:ltr}.social-badge{display:grid;place-items:center;width:52px;height:52px;background:var(--platform);color:#111;border-radius:13px;font:bold 23px/1 system-ui,sans-serif;letter-spacing:-1px}.social-facebook .social-badge{font-size:38px}.social-arrow{font:24px/1 system-ui,sans-serif;color:#999;transition:transform .25s ease,color .25s ease}.social-name{font-size:1.4rem;line-height:1.5}.social-handle{font:14px/1.7 "Space Grotesk",sans-serif;color:#b5b5b5;margin-top:5px;overflow-wrap:anywhere}.social-action{color:var(--platform);font-size:14px;font-weight:600;margin-top:26px}.social-list .social-card:hover{background:linear-gradient(145deg,#2b2b2b,#202020);color:#fff;text-decoration:none;border-color:var(--platform);transform:translateY(-5px);box-shadow:0 12px 26px #0004}.social-card:hover::after{transform:scaleX(1)}.social-card:hover .social-arrow{color:var(--platform);transform:translate(3px,-3px)}@media(max-width:900px){.social-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.social-list{grid-template-columns:1fr}.social-card-top{margin-bottom:18px}.social-list .social-card{padding:22px}}@media(prefers-reduced-motion:reduce){.social-list .social-card,.social-card::after,.social-arrow{transition:none}.social-list .social-card:hover,.social-card:hover .social-arrow{transform:none}}


.video-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:28px 0}.video-pagination[hidden]{display:none}.video-pagination button{font:inherit;min-width:46px;min-height:46px;padding:10px 16px;border-radius:8px;border:1px solid #444;background:#222;color:var(--text);cursor:pointer}.video-pagination button:hover:not(:disabled),.video-pagination button[aria-current="page"]{background:var(--yellow);color:#111;border-color:var(--yellow)}.video-pagination button:disabled{opacity:.4;cursor:default}


.video-toolbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;margin:24px 0}.video-toolbar label span{display:block;margin-bottom:8px}.video-toolbar input,.video-toolbar select{width:100%;padding:12px;background:#222;color:#fff;border:1px solid #555;border-radius:8px;font:inherit}.video-count{color:var(--muted)}@media(max-width:700px){.video-toolbar{grid-template-columns:1fr}}

.home-showcase{padding-block:50px 60px}.home-showcase .eyebrow{margin-bottom:14px}.home-showcase h1{font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.04em;line-height:1.25;max-width:1000px}.home-showcase h2{font-size:1.1rem;font-weight:500;color:var(--muted);margin:24px 0 18px}html[dir=rtl] .home-showcase h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.7;letter-spacing:0}.home-slider{position:relative;max-width:1100px;margin:auto;border-radius:20px;overflow:hidden;background:#151515;box-shadow:0 20px 60px #0004}.home-slider>a{display:block;position:relative;color:#fff}.home-slider img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.slide-caption{position:absolute;inset:auto 0 0;padding:65px 32px 28px;background:linear-gradient(transparent,#000e);display:grid;gap:10px}.slide-caption strong{font-size:clamp(1.1rem,2.5vw,2rem);line-height:1.5}.slide-caption>span{font-size:14px;color:#eee}.slide-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#f3ce00e8;color:#111;font-size:26px;transition:scale .2s}.home-slider a:hover .slide-play{scale:1.12}.slide-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:24px;direction:ltr}.slide-controls button{cursor:pointer;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:50%;min-width:42px;height:42px;font-size:20px}#slide-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}#slide-dots button{min-width:16px;width:16px;height:16px;padding:0;background:var(--muted);border:0}#slide-dots button[aria-pressed=true]{background:var(--yellow);width:30px;border-radius:10px}.slide-enter img{animation:slideReveal .65s ease-out}.slide-enter .slide-caption{animation:captionReveal .6s ease-out}@keyframes slideReveal{from{opacity:.35;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@keyframes captionReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.theme-toggle{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:50%;width:44px;height:44px;font-size:25px;flex-shrink:0;cursor:pointer}.menu-icon{font-family:system-ui,sans-serif;font-size:20px;display:inline-block;margin-inline-end:9px}.header nav a{transition:transform .25s ease,color .25s ease,text-shadow .25s ease}.header nav a::before{background:linear-gradient(115deg,#ffe866,#f5ae39,#ef8fda);background-size:200% 200%}.header nav a:nth-child(2)::before{background-image:linear-gradient(115deg,#73e1ed,#7ab9ff,#b4a2f9)}.header nav a:nth-child(3)::before{background-image:linear-gradient(115deg,#fdabc9,#dd9cf1,#ffe08c)}.header nav a:nth-child(4)::before{background-image:linear-gradient(115deg,#99e9d9,#72cef5,#c9beff)}.header nav a:nth-child(5)::before{background-image:linear-gradient(115deg,#ffd16b,#ffa18b,#f9addd)}.header nav a:hover{transform:scale(1.075);font-weight:700;z-index:2}.header nav a:hover::before{animation:menuFlow 2s ease infinite alternate}.header nav a[aria-current=page]{font-weight:700}@keyframes menuFlow{to{background-position:100% 50%}}.video-toolbar{grid-template-columns:2fr 1fr}.video-toolbar label>span::before{display:inline-block;margin-inline-end:8px;font-size:20px;content:'⌕'}.video-toolbar label:nth-child(2)>span::before{content:'☷'}.card-views{display:block;padding:0 18px 18px;color:var(--muted);font-size:14px}html[data-theme=light]{color-scheme:light;--bg:#f6f7f9;--panel:#fff;--text:#17212c;--muted:#505d6d;--line:#d4dbe2;--yellow:#efc400}html[data-theme=light] .video-card,html[data-theme=light] #all-videos .video-card,html[data-theme=light] #popular-list .video-card{background:#fff;border-color:#d1d8e0}html[data-theme=light] .video-toolbar input,html[data-theme=light] .video-toolbar select,html[data-theme=light] .video-pagination button{background:#fff;color:#17212c;border-color:#ccd3dc}html[data-theme=light] .video-pagination button[aria-current=page],html[data-theme=light] .video-pagination button:hover:not(:disabled){background:#efc400;color:#111}html[data-theme=light] .social-list .social-card{background:linear-gradient(145deg,#fff,#eef2f7);color:#17212c;border-color:#ccd4df}html[data-theme=light] .social-handle{color:#505d6d}html[data-theme=light] .social-action{color:#17212c}html[data-theme=light] .social-list .social-card:hover{background:#fff;color:#17212c}html[data-theme=light] .text-link{color:#665000}html[data-theme=light] .contact .eyebrow{color:#665000}@media(max-width:720px){.video-toolbar{grid-template-columns:1fr}.home-showcase{padding-block:30px}.slide-caption{padding:45px 18px 16px}.slide-controls{gap:8px}.slide-controls button{min-width:36px;height:36px}.slide-play{width:48px;height:48px;font-size:20px}.theme-toggle{order:1}.header nav a{padding-inline:10px}.menu-icon{margin-inline-end:5px}.home-slider{border-radius:12px}}@media(prefers-reduced-motion:reduce){.slide-enter img,.slide-enter .slide-caption,.header nav a:hover::before{animation:none}.header nav a,.slide-play{transition:none}.header nav a:hover{transform:none}}


html[data-theme=light] .header nav a:hover,html[data-theme=light] .header nav a[aria-current=page]{color:#111}

.search-wrap{display:flex;gap:8px}.search-wrap input{min-width:0;flex:1}.search-submit{min-width:48px;background:var(--yellow);color:#111;border:0;border-radius:8px;font-size:28px;cursor:pointer}.card-views{display:inline-flex;align-items:center;gap:7px;margin:0 18px 18px;padding:7px 12px;border-radius:100px;background:linear-gradient(120deg,#6a501b,#29231a);color:#ffe79d;font-weight:700;font-size:14px;border:1px solid #826724}.card-views::before{content:'◉';font-size:16px;color:#ffd85c}.channel-strip{background:linear-gradient(110deg,#5d3b05 0%,#aa7410 25%,#f1ca52 62%,#c58a14 100%);color:#fff5d7;border-block:1px solid #b38a39}.strip-content{padding-block:32px}.strip-content a{background:#1b140dbf;padding:12px 20px;border-radius:8px;color:#fff2c2}.contact{flex-wrap:wrap}.visitor-contact{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:28px}.visitor-contact label{display:block;font-size:15px}.visitor-contact input,.visitor-contact textarea{display:block;width:100%;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:13px;color:var(--text);font:inherit}.visitor-contact .wide{grid-column:1/-1}.visitor-contact .honeypot{display:none}.visitor-contact button{border:0;cursor:pointer}.visitor-contact button:disabled{opacity:.6}.visitor-contact input:focus,.visitor-contact textarea:focus{outline:2px solid var(--yellow)}html[data-theme=light] .card-views{background:linear-gradient(110deg,#fff0bb,#ffe19a);color:#654500;border-color:#d4ab47}html[data-theme=light] .card-views::before{color:#866000}@media(max-width:600px){.visitor-contact{grid-template-columns:1fr}.channel-strip .strip-content{align-items:stretch}}

:is(#all-videos,#popular-list) .video-card{position:relative;padding-bottom:70px;height:100%;box-sizing:border-box}:is(#all-videos,#popular-list) .video-card .card-views{position:absolute;left:18px;right:auto;bottom:18px;margin:0;max-width:calc(100% - 36px);white-space:nowrap}:is(#all-videos,#popular-list) .video-card strong{padding-bottom:14px}.video-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#111}.video-media img{width:100%;height:100%!important;object-fit:cover;transition:transform .6s ease}.hover-preview{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:transparent}.preview-active .video-media img{transform:scale(1.035)}@media(prefers-reduced-motion:reduce){.video-media img{transition:none}}

.home-slider>#slide-prev,.home-slider>#slide-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:62px;border:1px solid #ffffff70;border-radius:12px;background:#111b;color:#fff;font:40px/1 system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,box-shadow .2s}.home-slider>#slide-prev{left:16px}.home-slider>#slide-next{right:16px}.home-slider>#slide-prev:hover,.home-slider>#slide-next:hover{background:#f3ce00;color:#111;box-shadow:0 4px 18px #0004}.slide-controls{max-width:1100px;margin:16px auto 0;align-items:center;gap:12px}#slide-dots{display:flex;flex:1;min-width:0;flex-wrap:nowrap;gap:8px;justify-content:flex-start;overflow-x:auto;padding:4px;scroll-snap-type:x proximity;direction:ltr}#slide-dots button{flex:1 0 75px;min-width:75px;width:auto;height:auto;aspect-ratio:16/9;border:2px solid transparent;padding:0;border-radius:7px;background:#222;overflow:hidden;opacity:.6;scroll-snap-align:center;transition:opacity .2s,border-color .2s}#slide-dots button img{display:block;width:100%;height:100%;object-fit:cover}#slide-dots button:hover{opacity:1}#slide-dots button[aria-pressed=true]{width:auto;border:2px solid var(--yellow);border-radius:7px;background:#222;opacity:1;box-shadow:0 0 0 1px #0003}#slide-toggle{flex-shrink:0}@media(max-width:720px){.home-slider>#slide-prev,.home-slider>#slide-next{width:36px;height:46px;font-size:30px;border-radius:8px}.home-slider>#slide-prev{left:8px}.home-slider>#slide-next{right:8px}#slide-dots button{flex:0 0 90px;min-width:90px}.slide-controls{gap:6px}}@media(prefers-reduced-motion:reduce){#slide-dots button,.home-slider>#slide-prev,.home-slider>#slide-next{transition:none}}


.slide-caption #slide-views{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;background:linear-gradient(120deg,#6a501b,#29231a);color:#ffe79d;font-size:14px;font-weight:700;border:1px solid #826724;line-height:1.6}.slide-caption #slide-views::before{content:"◉";font-size:16px;color:#ffd85c}.slide-caption #slide-views:empty{display:none}


.drawer-trigger{display:none;border:1px solid #7776;background:var(--panel,#242424);color:var(--text,#fff);width:48px;height:48px;border-radius:12px;font-size:26px;align-items:center;justify-content:center;padding:0;cursor:pointer}.side-menu{box-sizing:border-box;position:fixed;inset:0 0 0 auto;margin:0;width:min(340px,88vw);height:100dvh;max-height:100dvh;border:0;border-inline-start:1px solid #8884;background:var(--bg,#181818);color:var(--text,#fff);padding:26px;box-shadow:-15px 0 60px #0005}.side-menu::backdrop{background:#0009;backdrop-filter:blur(3px)}.side-menu>strong{display:block;margin:26px 0;font:700 18px system-ui}.drawer-close{display:block;margin-inline-start:auto;background:transparent;color:inherit;border:1px solid #8885;border-radius:10px;width:44px;height:44px;padding:0;font-size:30px;cursor:pointer}.side-menu nav{display:grid;gap:10px}.side-menu nav a{display:block;padding:16px;border-radius:10px;background:#8881;text-decoration:none;font-size:17px}.side-menu nav a:hover,.side-menu nav a:focus-visible{background:#f3ce00;color:#111}.menu-open{overflow:hidden}

.site-preferences{display:flex;align-items:center;justify-content:center;gap:16px;flex-basis:100%;padding:24px 0;direction:ltr}.site-preferences .languages{direction:ltr}.site-preferences button{min-height:44px}.site-preferences .languages button[aria-pressed=true]{color:#111}footer{flex-wrap:wrap}.header{gap:20px}.header nav{flex-wrap:wrap}.video-grid>*{min-width:0}.home-showcase h1{overflow-wrap:anywhere}
@media(max-width:1100px){.header{display:flex;flex-direction:row;min-height:86px;justify-content:space-between;flex-wrap:nowrap}.header>nav{display:none}.header .drawer-trigger{display:flex;flex-shrink:0;order:2}.wrap{width:calc(100% - 40px)}.video-grid,#all-videos,#popular-list{grid-template-columns:repeat(2,minmax(0,1fr))}.social-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.header{min-height:78px}.brand-logo{width:44px;height:44px}.video-grid,#all-videos,#popular-list,.social-list{grid-template-columns:minmax(0,1fr)}.home-showcase h1{font-size:clamp(28px,7vw,42px);line-height:1.35}.home-showcase h2{font-size:20px}.slide-caption strong{font-size:16px}.slide-caption{padding:20px 12px 12px}.slide-play{width:42px;height:42px}.video-toolbar{grid-template-columns:1fr}.video-toolbar input,.video-toolbar select{font-size:16px;max-width:100%}.video-pagination{flex-wrap:wrap}.about{grid-template-columns:1fr}.about-identity{flex-wrap:wrap}.contact{display:flex;flex-direction:column;align-items:stretch}.visitor-contact{width:100%;grid-template-columns:1fr}.strip-content{flex-direction:column;gap:16px}footer{gap:16px;padding-bottom:20px}.site-preferences{padding-bottom:env(safe-area-inset-bottom,12px)}}
@media(prefers-reduced-motion:no-preference){.side-menu[open]{animation:drawer-in .22s ease-out}@keyframes drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}}

.side-menu nav a[aria-current=page]{background:#f3ce00;color:#111;font-weight:700}

/* Absolute True-Center for Navigation Menu */
.header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.header nav,
nav[aria-label="Main navigation"],
nav[data-label="navigation"] {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 0 !important;
}

@media (max-width: 850px) {
  .header nav {
    position: static !important;
    transform: none !important;
    margin: 10px auto 0 !important;
    flex-wrap: wrap !important;
  }
  .header {
    flex-direction: column !important;
  }
}

/* Fix Video Slider Arrow Directions in RTL (Kurdish) */
[dir="rtl"] .slider-btn,
[dir="rtl"] .carousel-btn,
[dir="rtl"] .slider-nav button,
[dir="rtl"] .carousel-control,
[dir="rtl"] button[aria-label*="prev"],
[dir="rtl"] button[aria-label*="next"],
html[lang="ku"] .slider-btn,
html[lang="ku"] .carousel-btn,
html[lang="ku"] .slider-nav button,
html[lang="ku"] button[aria-label*="prev"],
html[lang="ku"] button[aria-label*="next"] {
  transform: none !important;
}

[dir="rtl"] .slider-btn-prev svg,
[dir="rtl"] .carousel-btn-prev svg,
[dir="rtl"] button[aria-label*="prev"] svg,
html[lang="ku"] .slider-btn-prev svg,
html[lang="ku"] .carousel-btn-prev svg,
html[lang="ku"] button[aria-label*="prev"] svg {
  transform: scaleX(1) !important;
}

[dir="rtl"] .slider-btn-next svg,
[dir="rtl"] .carousel-btn-next svg,
[dir="rtl"] button[aria-label*="next"] svg,
html[lang="ku"] .slider-btn-next svg,
html[lang="ku"] .carousel-btn-next svg,
html[lang="ku"] button[aria-label*="next"] svg {
  transform: scaleX(1) !important;
}

/* Welcome Headline Custom Style */
.hero h1,
.hero-title,
[data-key="homeWelcome"],
h1:has(+ * + *),
main h1 {
  color: #ff2a2a !important;
  font-weight: bold !important;
  text-align: center !important;
  text-shadow: 0 0 20px rgba(255, 42, 42, 0.35);
}

/* Dynamic Welcome Label Styling */
.hero-label,
.welcome-label,
[data-key="homeWelcomeLabel"] {
  display: inline-block !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
}

/* Video card view badge styling */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--yellow, #eab308) !important;
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  padding: 5px 10px !important;
  border-radius: 9999px !important;
  margin-top: 8px !important;
  width: fit-content !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Metallic Gold Gradient with Glow for View Count */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
  color: #1a1202 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  margin-top: 8px !important;
  width: fit-content !important;
  letter-spacing: 0.03em !important;
  border: 1px solid rgba(255, 223, 0, 0.6) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6), 0 0 20px rgba(218, 165, 32, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.video-card:hover .video-card-views,
.video-card:hover .video-views {
  transform: scale(1.04) !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.85), 0 0 24px rgba(218, 165, 32, 0.5) !important;
}

/* Card Flex Alignment and Identical View Count Positioning */
.video-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.video-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding-bottom: 14px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.video-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.8em !important;
  max-height: 2.8em !important;
  line-height: 1.4em !important;
  margin: 10px 0 12px 0 !important;
}

/* Larger Gold Shimmer Badge in Uniform Position */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: auto !important; /* Locks view count to the exact same bottom position */
  align-self: flex-start !important;
  background: linear-gradient(135deg, #d4af37 0%, #fff7b0 45%, #b38728 75%, #f1d77a 100%) !important;
  color: #1a1202 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important; /* Increased font size */
  line-height: 1 !important;
  padding: 6px 14px !important; /* Increased pill size */
  border-radius: 9999px !important;
  width: fit-content !important;
  letter-spacing: 0.03em !important;
  border: 1px solid rgba(255, 235, 120, 0.8) !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.75), 0 0 22px rgba(218, 165, 32, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Tighten Layout Gap & Style 1-10 + First/Last Pagination */
.video-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 18px 0 40px 0 !important;
  flex-wrap: wrap !important;
}

.video-pagination button {
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.2s ease !important;
}

.video-pagination button[aria-current="page"] {
  background: var(--yellow, #eab308) !important;
  color: #111111 !important;
  border-color: var(--yellow, #eab308) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.6) !important;
}

.video-pagination button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* 4 COLUMNS x 5 ROWS (20 VIDEOS PER PAGE) */
.video-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: 1fr !important;
  }
}

/* CARD CONTAINER & FULL VISIBLE TITLE */
.video-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.video-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 12px 14px 16px 14px !important;
}

/* PREVENT TITLE FROM CUTTING OFF OR HIDING UNDER VIEW BADGE */
.video-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  min-height: 3.2em !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 0 16px 0 !important;
  color: #ffffff !important;
  word-break: break-word !important;
  padding-bottom: 2px !important;
}

/* GOLD SHIMMER BADGE AT PINNED BOTTOM */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  background: linear-gradient(135deg, #d4af37 0%, #fff7b0 45%, #b38728 75%, #f1d77a 100%) !important;
  color: #1a1202 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  width: fit-content !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(255, 235, 120, 0.8) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.65), 0 0 18px rgba(218, 165, 32, 0.35) !important;
}

/* Pagination Hover Zoom & Cursor Interaction */
.video-pagination button {
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  will-change: transform !important;
}

/* Hover Zoom Effect on Page Numbers & Nav Buttons */
.video-pagination button:not(:disabled):hover {
  transform: scale(1.18) translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: var(--yellow, #f59e0b) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
  z-index: 2 !important;
}

/* Hover on the currently active page */
.video-pagination button[aria-current="page"]:hover {
  transform: scale(1.18) translateY(-2px) !important;
  background: var(--yellow, #eab308) !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.75) !important;
}

/* Click / Press Active Feel */
.video-pagination button:not(:disabled):active {
  transform: scale(1.02) translateY(0) !important;
}

/* Unified Hover Zoom & Focus for Theme, Language, and Search */
.theme-toggle,
[data-theme-toggle],
.site-preferences button,
.languages button,
.search-submit {
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  will-change: transform !important;
}

/* 1. Theme Button Hover */
.theme-toggle:hover,
[data-theme-toggle]:hover,
.site-preferences button:hover {
  transform: scale(1.15) translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  z-index: 5 !important;
}

/* 2. Language Switcher Buttons (KU / EN) Hover */
.languages button:hover {
  transform: scale(1.12) translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.45) !important;
  z-index: 5 !important;
}

.languages button[aria-pressed="true"]:hover {
  transform: scale(1.12) translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.75) !important;
}

/* 3. Search Submit Button Hover */
.search-submit:hover {
  transform: scale(1.14) translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.7) !important;
  z-index: 5 !important;
}

/* Active / Click Press Effect */
.theme-toggle:active,
[data-theme-toggle]:active,
.site-preferences button:active,
.languages button:active,
.search-submit:active {
  transform: scale(1.02) translateY(0) !important;
}

/* Sort Select Dropdown Hover Zoom & Golden Glow */
.video-toolbar select,
.video-sort-select,
.toolbar select,
select[name="sort"],
label:has(select) {
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  will-change: transform !important;
}

/* Hover on Sort Menu */
.video-toolbar select:hover,
.video-sort-select:hover,
.toolbar select:hover,
select[name="sort"]:hover {
  transform: scale(1.06) translateY(-2px) !important;
  border-color: var(--yellow, #f59e0b) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
  z-index: 10 !important;
}

/* Focus State */
.video-toolbar select:focus,
.video-sort-select:focus,
.toolbar select:focus,
select[name="sort"]:focus {
  outline: none !important;
  border-color: var(--yellow, #eab308) !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.65) !important;
}

/* Dark Styled Options Dropdown */
.video-toolbar select option,
.video-sort-select option,
.toolbar select option,
select[name="sort"] option {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
}

.video-toolbar select option:hover,
.video-toolbar select option:focus,
.video-toolbar select option:checked {
  background: var(--yellow, #eab308) linear-gradient(0deg, var(--yellow, #eab308) 0%, var(--yellow, #eab308) 100%) !important;
  color: #111111 !important;
}

/* ===================================================
   ULTRA-PREMIUM GOLD VIEW BADGE (MODERN STUDIO LOOK)
   =================================================== */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  
  /* Frosted Glass + Deep Gold Tint */
  background: linear-gradient(
    135deg, 
    rgba(32, 24, 10, 0.82) 0%, 
    rgba(18, 14, 6, 0.94) 100%
  ) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  /* Polished Gold Gradient Border */
  border: 1px solid transparent !important;
  border-image: linear-gradient(
    120deg, 
    #ffd700 0%, 
    #b8860b 40%, 
    rgba(255, 215, 0, 0.3) 70%, 
    #d4af37 100%
  ) 1 !important;
  border-radius: 8px !important; /* Elegant softened rect instead of a round pill */
  
  /* High-End Typography */
  color: #f7df94 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  padding: 6px 13px !important;
  width: fit-content !important;

  /* Ambient Gold Glow & Depth */
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(212, 175, 55, 0.22),
    inset 0 1px 1px rgba(255, 235, 160, 0.25) !important;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Micro Eye Icon Accent */
.video-card-views::before,
.video-card .video-views::before,
.video-views::before {
  content: "" !important;
  display: inline-block !important;
  width: 13px !important;
  height: 9px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  opacity: 0.85 !important;
}

/* Card Hover Elevation */
.video-card:hover .video-card-views,
.video-card:hover .video-views {
  color: #fff2b8 !important;
  border-color: #ffd700 !important;
  background: linear-gradient(
    135deg, 
    rgba(45, 33, 12, 0.9) 0%, 
    rgba(22, 16, 6, 0.98) 100%
  ) !important;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(255, 215, 0, 0.45),
    inset 0 1px 2px rgba(255, 245, 190, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ===================================================
   CYBERPUNK NEON GLOW BADGE (ELECTRIC CYAN & PURPLE)
   =================================================== */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  align-self: flex-start !important;

  /* Deep space backdrop with angled glass cut */
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.92) 0%, rgba(18, 10, 35, 0.95) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* Neon Cyan-to-Purple dual border */
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
  position: relative !important;
  border-radius: 6px !important;
  
  /* Modern Chamfer Cutout / High-Tech Silhouette */
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)) !important;

  /* Electric Typography */
  color: #00f2fe !important;
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  padding: 6px 14px !important;
  width: fit-content !important;

  /* Dual Neon Radiance */
  box-shadow: 
    0 0 10px rgba(0, 242, 254, 0.35),
    0 0 20px rgba(157, 0, 255, 0.2),
    inset 0 0 8px rgba(0, 242, 254, 0.15) !important;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Pulsing Cyber Dot / Radar Accent */
.video-card-views::before,
.video-card .video-views::before,
.video-views::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #00f2fe !important;
  box-shadow: 0 0 8px #00f2fe, 0 0 14px #00f2fe !important;
  animation: pulse-neon 2s infinite ease-in-out !important;
}

@keyframes pulse-neon {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
    box-shadow: 0 0 6px #00f2fe;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 12px #00f2fe, 0 0 18px #a855f7;
  }
}

/* Card Hover Elevation */
.video-card:hover .video-card-views,
.video-card:hover .video-views {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(168, 85, 247, 0.3) 100%) !important;
  box-shadow: 
    0 0 16px rgba(0, 242, 254, 0.7),
    0 0 30px rgba(168, 85, 247, 0.5),
    inset 0 0 12px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* ===================================================
   CRIMSON TITANIUM STUDIO BADGE
   =================================================== */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  align-self: flex-start !important;
  
  /* Brushed Titanium with Dark Carbon Hue */
  background: linear-gradient(180deg, #1f2228 0%, #121417 100%) !important;
  
  /* Precision Anodized Aluminum Edge */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 3px solid #ff2a44 !important; /* Bold crimson status indicator */
  border-radius: 4px !important;
  
  /* Typography */
  color: #e5e7eb !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;

  padding: 6px 12px 6px 9px !important;
  width: fit-content !important;

  /* Subtle Mechanical Shadow */
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(255, 42, 68, 0.15) !important;

  transition: all 0.22s ease !important;
}

/* Play/View Flare Indicator */
.video-card-views::before,
.video-card .video-views::before,
.video-views::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #ff2a44 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #ff2a44 !important;
}

/* Hover Elevation */
.video-card:hover .video-card-views,
.video-card:hover .video-views {
  background: linear-gradient(180deg, #282c34 0%, #171a1f 100%) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  border-left-color: #ff4760 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(255, 42, 68, 0.45) !important;
}

/* ===================================================
   EMERALD QUARTZ LIQUID GLASS BADGE
   =================================================== */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  align-self: flex-start !important;

  /* Frosted Deep Obsidian Glass */
  background: radial-gradient(120% 120% at 0% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(6, 15, 12, 0.88) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  /* Emerald Neon Hairline Border */
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  border-radius: 9999px !important; /* Full modern pill capsule */

  /* Crisp Typography */
  color: #34d399 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;

  padding: 6px 14px 6px 10px !important;
  width: fit-content !important;

  /* Ambient Emerald Bloom */
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(16, 185, 129, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;

  transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Play Diamond / Gemstone Micro-Icon */
.video-card-views::before,
.video-card .video-views::before,
.video-views::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  background: #10b981 !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 0 8px #34d399, 0 0 14px rgba(16, 185, 129, 0.6) !important;
  border-radius: 1px !important;
}

/* Hover State */
.video-card:hover .video-card-views,
.video-card:hover .video-views {
  color: #a7f3d0 !important;
  border-color: #10b981 !important;
  background: radial-gradient(120% 120% at 0% 0%, rgba(52, 211, 153, 0.3) 0%, rgba(6, 20, 16, 0.95) 100%) !important;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(16, 185, 129, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* ===================================================
   EMERALD QUARTZ LIQUID GLASS BADGE
   =================================================== */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  align-self: flex-start !important;

  /* Frosted Deep Obsidian Glass */
  background: radial-gradient(120% 120% at 0% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(6, 15, 12, 0.88) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  /* Emerald Neon Hairline Border */
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  border-radius: 9999px !important; /* Full modern pill capsule */

  /* Crisp Typography */
  color: #34d399 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;

  padding: 6px 14px 6px 10px !important;
  width: fit-content !important;

  /* Ambient Emerald Bloom */
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(16, 185, 129, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;

  transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Play Diamond / Gemstone Micro-Icon */
.video-card-views::before,
.video-card .video-views::before,
.video-views::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  background: #10b981 !important;
  transform: rotate(45deg) !important;
  box-shadow: 0 0 8px #34d399, 0 0 14px rgba(16, 185, 129, 0.6) !important;
  border-radius: 1px !important;
}

/* Hover State */
.video-card:hover .video-card-views,
.video-card:hover .video-views {
  color: #a7f3d0 !important;
  border-color: #10b981 !important;
  background: radial-gradient(120% 120% at 0% 0%, rgba(52, 211, 153, 0.3) 0%, rgba(6, 20, 16, 0.95) 100%) !important;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(16, 185, 129, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* ===================================================
   ELECTRIC SAPPHIRE & GLASS BADGE
   =================================================== */
.video-card-views,
.video-card .video-views,
.video-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  align-self: flex-start !important;

  /* Midnight translucent glass base */
  background: linear-gradient(135deg, rgba(10, 25, 55, 0.88) 0%, rgba(5, 12, 28, 0.95) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* Electric sapphire border */
  border: 1px solid rgba(59, 130, 246, 0.6) !important;
  border-radius: 7px !important;

  /* High-legibility typography */
  color: #ffffff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;

  padding: 6px 12px !important;
  width: fit-content !important;

  /* Deep glow shadow */
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(37, 99, 235, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

  transition: all 0.22s ease !important;
}

/* Sapphire Play Icon */
.video-card-views::before,
.video-card .video-views::before,
.video-views::before {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  border-left: 7px solid #60a5fa !important;
  filter: drop-shadow(0 0 5px #3b82f6) !important;
}

/* Hover State */
.video-card:hover .video-card-views,
.video-card:hover .video-views {
  border-color: #60a5fa !important;
  background: linear-gradient(135deg, rgba(20, 45, 90, 0.92) 0%, rgba(8, 20, 45, 0.98) 100%) !important;
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(59, 130, 246, 0.65),
    inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ===================================================
   LIGHT THEME ADAPTIVE TITLE & CARD COLORING
   =================================================== */
/* Dark Theme (Default) Title */
.video-card-title {
  color: #f8fafc !important;
}

/* Light Theme Title Visibility */
[data-theme="light"] .video-card-title,
html[data-theme="light"] .video-card-title,
body.light-theme .video-card-title {
  color: #0f172a !important; /* Crisp deep slate, perfectly legible on light backgrounds */
  font-weight: 700 !important;
}

[data-theme="light"] .video-card,
html[data-theme="light"] .video-card,
body.light-theme .video-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

/* ===================================================
   TWO-TONE DUAL COLOR VIEW BADGE
   =================================================== */
.video-card-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  align-self: flex-start !important;

  /* Frosted Obsidian Glass Container */
  background: linear-gradient(145deg, rgba(20, 24, 33, 0.9) 0%, rgba(10, 12, 18, 0.96) 100%) !important;
  border: 1px solid rgba(250, 204, 21, 0.35) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  line-height: 1 !important;
  transition: all 0.22s ease !important;
}

/* 1. View Number (Glowing Golden Ember) */
.video-card-views .view-num {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  font-variant-numeric: tabular-nums !important;
  color: #fbbf24 !important; /* Bright Gold */
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.45) !important;
  letter-spacing: 0.02em !important;
}

/* 2. View Label ("views" / "بینین") (Clean Icy Platinum) */
.video-card-views .view-label {
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 0.76rem !important;
  color: #94a3b8 !important; /* Soft muted silver/blue-grey */
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Card Hover Accent */
.video-card:hover .video-card-views {
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-1px) !important;
}

.video-card:hover .video-card-views .view-num {
  color: #fef08a !important;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.7) !important;
}

.video-card:hover .video-card-views .view-label {
  color: #e2e8f0 !important;
}

/* Light Theme Variant of Badge */
[data-theme="light"] .video-card-views,
html[data-theme="light"] .video-card-views {
  background: #f8fafc !important;
  border-color: rgba(202, 138, 4, 0.4) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .video-card-views .view-num {
  color: #facc15 !important; /* Rich deep amber for contrast on white */
  text-shadow: none !important;
}

[data-theme="light"] .video-card-views .view-label {
  color: #64748b !important;
}

/* ===================================================
   LIGHT THEME PAGINATION NUMBER VISIBILITY
   =================================================== */
[data-theme="light"] .video-pagination button,
html[data-theme="light"] .video-pagination button,
body.light-theme .video-pagination button {
  background: #ffffff !important;
  color: #1e293b !important; /* High-contrast dark charcoal text */
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Hover state in Light Theme */
[data-theme="light"] .video-pagination button:not(:disabled):hover,
html[data-theme="light"] .video-pagination button:not(:disabled):hover,
body.light-theme .video-pagination button:not(:disabled):hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

/* Active current page button in Light Theme */
[data-theme="light"] .video-pagination button[aria-current="page"],
html[data-theme="light"] .video-pagination button[aria-current="page"],
body.light-theme .video-pagination button[aria-current="page"] {
  background: #f59e0b !important;
  color: #0f172a !important; /* Bold dark text on warm gold */
  border-color: #d97706 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45) !important;
}

/* Disabled buttons in Light Theme */
[data-theme="light"] .video-pagination button:disabled,
html[data-theme="light"] .video-pagination button:disabled,
body.light-theme .video-pagination button:disabled {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  opacity: 0.6 !important;
}

/* ===================================================
   SEARCH INPUT FIELD - GOLDEN FOCUS STROKE & GLOW
   =================================================== */
.video-toolbar input[type="search"],
.video-toolbar input[type="text"],
.search-wrap input,
#videos input[type="search"] {
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Hover State */
.video-toolbar input[type="search"]:hover,
.video-toolbar input[type="text"]:hover,
.search-wrap input:hover,
#videos input[type="search"]:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

/* Click / Focus State - Identical to Sort Dropdown */
.video-toolbar input[type="search"]:focus,
.video-toolbar input[type="text"]:focus,
.search-wrap input:focus,
#videos input[type="search"]:focus {
  outline: none !important;
  border-color: var(--yellow, #eab308) !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.65) !important;
}

/* Light Theme Adaptive Focus Glow */
[data-theme="light"] .video-toolbar input[type="search"]:focus,
[data-theme="light"] .search-wrap input:focus,
html[data-theme="light"] .video-toolbar input[type="search"]:focus,
html[data-theme="light"] .search-wrap input:focus {
  border-color: #d97706 !important;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.45) !important;
}

/* ===================================================
   ULTRA-PREMIUM SOCIAL MEDIA CARDS
   =================================================== */
#socials,
.socials-section,
section:has(.social-links),
section:has([href*="facebook.com"]),
section:has([href*="snapchat.com"]) {
  position: relative;
  padding: 40px 0 60px 0;
}

/* Container Grid */
.social-links,
.social-grid,
section#socials .grid,
section[id*="social"] div:has(> a[href*="http"]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  margin-top: 24px !important;
}

@media (max-width: 900px) {
  .social-links,
  .social-grid,
  section#socials .grid,
  section[id*="social"] div:has(> a[href*="http"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 540px) {
  .social-links,
  .social-grid,
  section#socials .grid,
  section[id*="social"] div:has(> a[href*="http"]) {
    grid-template-columns: 1fr !important;
  }
}

/* Individual Social Media Card Link */
#socials a,
.social-links a,
.social-grid a,
a.social-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  
  /* Dark Mode Frosted Ceramic Base */
  background: linear-gradient(145deg, rgba(28, 32, 42, 0.7) 0%, rgba(15, 17, 24, 0.85) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  
  color: #f1f5f9 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
  overflow: hidden !important;
}

/* Arrow indicator on the outer edge */
#socials a::after,
.social-links a::after,
.social-grid a::after {
  content: "↗" !important;
  margin-inline-start: auto !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  opacity: 0.4 !important;
  transform: translateX(0) translateY(0);
  transition: all 0.22s ease !important;
}

#socials a:hover::after,
.social-links a:hover::after,
.social-grid a:hover::after {
  opacity: 1 !important;
  transform: translateX(3px) translateY(-3px) !important;
}

[dir="rtl"] #socials a:hover::after,
[dir="rtl"] .social-links a:hover::after,
[dir="rtl"] .social-grid a:hover::after {
  transform: translateX(-3px) translateY(-3px) !important;
}

/* SVG Icon Capsule */
#socials a .social-icon-box,
.social-links a .social-icon-box {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
}

#socials a .social-icon-box svg,
.social-links a .social-icon-box svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

/* Brand Specific Colors & Hover Effects */

/* 1. YouTube */
#socials a[href*="youtube.com"]:not([href*="shorts"]):hover,
.social-links a[href*="youtube.com"]:not([href*="shorts"]):hover {
  border-color: rgba(255, 0, 0, 0.6) !important;
  box-shadow: 0 6px 24px rgba(255, 0, 0, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}
#socials a[href*="youtube.com"]:not([href*="shorts"]) .social-icon-box,
.social-links a[href*="youtube.com"]:not([href*="shorts"]) .social-icon-box {
  color: #ff0000 !important;
}

/* 2. YouTube Shorts */
#socials a[href*="shorts"]:hover,
.social-links a[href*="shorts"]:hover {
  border-color: rgba(255, 75, 75, 0.6) !important;
  box-shadow: 0 6px 24px rgba(255, 75, 75, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}
#socials a[href*="shorts"] .social-icon-box,
.social-links a[href*="shorts"] .social-icon-box {
  color: #ff334b !important;
}

/* 3. Facebook */
#socials a[href*="facebook.com"]:hover,
.social-links a[href*="facebook.com"]:hover {
  border-color: rgba(24, 119, 242, 0.65) !important;
  box-shadow: 0 6px 24px rgba(24, 119, 242, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}
#socials a[href*="facebook.com"] .social-icon-box,
.social-links a[href*="facebook.com"] .social-icon-box {
  color: #1877f2 !important;
}

/* 4. Snapchat */
#socials a[href*="snapchat.com"]:hover,
.social-links a[href*="snapchat.com"]:hover {
  border-color: rgba(255, 252, 0, 0.7) !important;
  box-shadow: 0 6px 24px rgba(255, 252, 0, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}
#socials a[href*="snapchat.com"] .social-icon-box,
.social-links a[href*="snapchat.com"] .social-icon-box {
  color: #fffc00 !important;
}

/* 5. Telegram */
#socials a[href*="t.me"]:hover,
#socials a[href*="telegram.org"]:hover,
.social-links a[href*="t.me"]:hover,
.social-links a[href*="telegram.org"]:hover {
  border-color: rgba(36, 161, 222, 0.65) !important;
  box-shadow: 0 6px 24px rgba(36, 161, 222, 0.35) !important;
  transform: translateY(-3px) scale(1.02) !important;
}
#socials a[href*="t.me"] .social-icon-box,
#socials a[href*="telegram.org"] .social-icon-box,
.social-links a[href*="t.me"] .social-icon-box {
  color: #24a1de !important;
}

/* 6. TikTok */
#socials a[href*="tiktok.com"]:hover,
.social-links a[href*="tiktok.com"]:hover {
  border-color: rgba(0, 242, 234, 0.7) !important;
  box-shadow: 0 6px 24px rgba(254, 44, 85, 0.35), 0 0 16px rgba(0, 242, 234, 0.25) !important;
  transform: translateY(-3px) scale(1.02) !important;
}
#socials a[href*="tiktok.com"] .social-icon-box,
.social-links a[href*="tiktok.com"] .social-icon-box {
  color: #00f2ea !important;
}

/* ===================================================
   LIGHT THEME ADAPTATION
   =================================================== */
[data-theme="light"] #socials a,
[data-theme="light"] .social-links a,
html[data-theme="light"] #socials a,
html[data-theme="light"] .social-links a,
body.light-theme #socials a,
body.light-theme .social-links a {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #socials a .social-icon-box,
[data-theme="light"] .social-links a .social-icon-box,
html[data-theme="light"] #socials a .social-icon-box,
html[data-theme="light"] .social-links a .social-icon-box {
  background: #f1f5f9 !important;
}

[data-theme="light"] #socials a:hover,
[data-theme="light"] .social-links a:hover,
html[data-theme="light"] #socials a:hover,
html[data-theme="light"] .social-links a:hover {
  background: #ffffff !important;
}

/* ===================================================
   LUXURY GOLD & ONYX SOCIAL MEDIA CARDS
   =================================================== */
#socials a,
.social-links a,
.social-grid a,
a.social-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 16px 22px !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  border-radius: 9999px !important; /* Elegant pill silhouette */

  /* Dark Onyx Glass with Gold Warmth */
  background: linear-gradient(135deg, rgba(24, 21, 16, 0.85) 0%, rgba(12, 11, 9, 0.96) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  /* Thin Metallic Gold Rim */
  border: 1px solid rgba(212, 175, 55, 0.3) !important;

  color: #f8fafc !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;

  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 235, 160, 0.15) !important;

  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease, 
              background 0.25s ease !important;
}

/* Gold Vector Icon Disc */
#socials a .social-icon-box,
.social-links a .social-icon-box {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(180, 130, 20, 0.05) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #eab308 !important; /* Warm brand gold */
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

#socials a .social-icon-box svg,
.social-links a .social-icon-box svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* Subtle Golden Corner Arrow Indicator */
#socials a::after,
.social-links a::after,
.social-grid a::after {
  content: "↗" !important;
  margin-inline-start: auto !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #eab308 !important;
  opacity: 0.45 !important;
  transition: transform 0.22s ease, opacity 0.22s ease !important;
}

/* Hover Elevation & Radial Glow */
#socials a:hover,
.social-links a:hover,
.social-grid a:hover,
a.social-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background: linear-gradient(135deg, rgba(38, 32, 20, 0.95) 0%, rgba(18, 15, 10, 0.98) 100%) !important;
  border-color: #ffd700 !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.65),
    0 0 20px rgba(234, 179, 8, 0.35),
    inset 0 1px 2px rgba(255, 245, 180, 0.3) !important;
}

#socials a:hover .social-icon-box,
.social-links a:hover .social-icon-box {
  transform: scale(1.1) !important;
  background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%) !important;
  color: #111111 !important; /* Invert icon fill on hover */
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.5) !important;
}

#socials a:hover::after,
.social-links a:hover::after,
.social-grid a:hover::after {
  opacity: 1 !important;
  transform: translateX(3px) translateY(-3px) !important;
}

[dir="rtl"] #socials a:hover::after,
[dir="rtl"] .social-links a:hover::after,
[dir="rtl"] .social-grid a:hover::after {
  transform: translateX(-3px) translateY(-3px) !important;
}

/* ===================================================
   LIGHT THEME ADAPTATION
   =================================================== */
[data-theme="light"] #socials a,
[data-theme="light"] .social-links a,
html[data-theme="light"] #socials a,
html[data-theme="light"] .social-links a,
body.light-theme #socials a,
body.light-theme .social-links a {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #socials a:hover,
[data-theme="light"] .social-links a:hover,
html[data-theme="light"] #socials a:hover,
html[data-theme="light"] .social-links a:hover {
  background: #fffdf5 !important;
  border-color: #d97706 !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.25) !important;
}

[data-theme="light"] #socials a .social-icon-box,
[data-theme="light"] .social-links a .social-icon-box,
html[data-theme="light"] #socials a .social-icon-box,
html[data-theme="light"] .social-links a .social-icon-box {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #facc15 !important;
}

/* Direct styling for social links with embedded SVG */
a:has(.social-icon-box) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
}

.social-icon-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(212, 175, 55, 0.15) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #eab308 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

.social-icon-box svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

.social-label {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: inherit !important;
}

a:has(.social-icon-box):hover .social-icon-box {
  transform: scale(1.1) !important;
  background: #ffd700 !important;
  color: #111111 !important;
}

/* ===================================================
   VERTICAL CARD GRID LAYOUT (3 COLUMNS x 2 ROWS)
   =================================================== */
#socials .grid,
.social-links,
.social-grid,
section[id*="social"] div:has(> .social-vertical-card) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin-top: 30px !important;
}

@media (max-width: 960px) {
  #socials .grid,
  .social-links,
  .social-grid,
  section[id*="social"] div:has(> .social-vertical-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 520px) {
  #socials .grid,
  .social-links,
  .social-grid,
  section[id*="social"] div:has(> .social-vertical-card) {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================
   VERTICAL SOCIAL CARD DESIGN
   =================================================== */
.social-vertical-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 32px 20px 24px 20px !important;
  min-height: 190px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  /* Glass Surface with Deep Midnight Backing */
  background: linear-gradient(160deg, rgba(28, 33, 44, 0.75) 0%, rgba(13, 16, 23, 0.92) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease, 
              background 0.25s ease !important;
}

/* Large Icon Badge */
.social-card-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.28s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.social-card-icon svg {
  width: 30px !important;
  height: 30px !important;
  fill: currentColor !important;
  display: block !important;
}

/* Social Platform Name */
.social-card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.02em !important;
}

/* Action Link ("Follow ↗") */
.social-card-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  transition: color 0.22s ease !important;
}

.social-card-action .arrow {
  font-size: 1rem !important;
  transition: transform 0.22s ease !important;
}

/* Card Hover Elevation */
.social-vertical-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

.social-vertical-card:hover .social-card-icon {
  transform: scale(1.12) !important;
}

.social-vertical-card:hover .social-card-action .arrow {
  transform: translate(3px, -3px) !important;
}

/* Brand Identity Accent Glows */

/* 1. YouTube */
.social-youtube .social-card-icon { color: #ff0000 !important; }
.social-youtube:hover {
  border-color: rgba(255, 0, 0, 0.6) !important;
  box-shadow: 0 14px 34px rgba(255, 0, 0, 0.35) !important;
}
.social-youtube:hover .social-card-action { color: #ff4d4d !important; }

/* 2. YouTube Shorts */
.social-shorts .social-card-icon { color: #ff334b !important; }
.social-shorts:hover {
  border-color: rgba(255, 51, 75, 0.6) !important;
  box-shadow: 0 14px 34px rgba(255, 51, 75, 0.35) !important;
}
.social-shorts:hover .social-card-action { color: #ff667a !important; }

/* 3. Facebook */
.social-facebook .social-card-icon { color: #1877f2 !important; }
.social-facebook:hover {
  border-color: rgba(24, 119, 242, 0.6) !important;
  box-shadow: 0 14px 34px rgba(24, 119, 242, 0.35) !important;
}
.social-facebook:hover .social-card-action { color: #4b97f5 !important; }

/* 4. Snapchat */
.social-snapchat .social-card-icon { color: #fffc00 !important; }
.social-snapchat:hover {
  border-color: rgba(255, 252, 0, 0.6) !important;
  box-shadow: 0 14px 34px rgba(255, 252, 0, 0.35) !important;
}
.social-snapchat:hover .social-card-action { color: #fffca0 !important; }

/* 5. Telegram */
.social-telegram .social-card-icon { color: #24a1de !important; }
.social-telegram:hover {
  border-color: rgba(36, 161, 222, 0.6) !important;
  box-shadow: 0 14px 34px rgba(36, 161, 222, 0.35) !important;
}
.social-telegram:hover .social-card-action { color: #53b8e7 !important; }

/* 6. TikTok */
.social-tiktok .social-card-icon { color: #00f2fe !important; }
.social-tiktok:hover {
  border-color: rgba(0, 242, 254, 0.6) !important;
  box-shadow: 0 14px 34px rgba(254, 44, 85, 0.35), 0 0 20px rgba(0, 242, 254, 0.25) !important;
}
.social-tiktok:hover .social-card-action { color: #00f2fe !important; }

/* ===================================================
   LIGHT THEME ADAPTATION
   =================================================== */
[data-theme="light"] .social-vertical-card,
html[data-theme="light"] .social-vertical-card,
body.light-theme .social-vertical-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .social-card-title,
html[data-theme="light"] .social-card-title {
  color: #0f172a !important;
}

[data-theme="light"] .social-card-icon,
html[data-theme="light"] .social-card-icon {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ===================================================
   VERTICAL CARD GRID LAYOUT (3 COLUMNS x 2 ROWS)
   =================================================== */
#socials .grid,
.social-links,
.social-grid,
section:has(.social-vertical-card) .grid,
div:has(> .social-vertical-card) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  margin-top: 24px !important;
}

@media (max-width: 900px) {
  #socials .grid,
  .social-links,
  .social-grid,
  div:has(> .social-vertical-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 540px) {
  #socials .grid,
  .social-links,
  .social-grid,
  div:has(> .social-vertical-card) {
    grid-template-columns: 1fr !important;
  }
}

/* Vertical Social Card Design */
.social-vertical-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 30px 20px 22px 20px !important;
  min-height: 180px !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  position: relative !important;
  box-sizing: border-box !important;

  /* Frosted Onyx Backing */
  background: linear-gradient(145deg, rgba(28, 33, 44, 0.8) 0%, rgba(13, 16, 23, 0.95) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
}

/* Icon Container */
.social-card-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.25s ease !important;
}

.social-card-icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  display: block !important;
}

/* Platform Title */
.social-card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  margin-bottom: 10px !important;
}

/* Follow CTA */
.social-card-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

.social-card-action .arrow {
  font-size: 1rem !important;
  transition: transform 0.2s ease !important;
}

/* Hover Lift */
.social-vertical-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

.social-vertical-card:hover .social-card-icon {
  transform: scale(1.1) !important;
}

.social-vertical-card:hover .social-card-action .arrow {
  transform: translate(3px, -3px) !important;
}

/* Platform Colors & Glows */
.social-youtube .social-card-icon { color: #ff0000 !important; }
.social-youtube:hover {
  border-color: rgba(255, 0, 0, 0.6) !important;
  box-shadow: 0 12px 32px rgba(255, 0, 0, 0.35) !important;
}

.social-shorts .social-card-icon { color: #ff334b !important; }
.social-shorts:hover {
  border-color: rgba(255, 51, 75, 0.6) !important;
  box-shadow: 0 12px 32px rgba(255, 51, 75, 0.35) !important;
}

.social-facebook .social-card-icon { color: #1877f2 !important; }
.social-facebook:hover {
  border-color: rgba(24, 119, 242, 0.6) !important;
  box-shadow: 0 12px 32px rgba(24, 119, 242, 0.35) !important;
}

.social-snapchat .social-card-icon { color: #fffc00 !important; }
.social-snapchat:hover {
  border-color: rgba(255, 252, 0, 0.6) !important;
  box-shadow: 0 12px 32px rgba(255, 252, 0, 0.35) !important;
}

.social-telegram .social-card-icon { color: #24a1de !important; }
.social-telegram:hover {
  border-color: rgba(36, 161, 222, 0.6) !important;
  box-shadow: 0 12px 32px rgba(36, 161, 222, 0.35) !important;
}

.social-tiktok .social-card-icon { color: #00f2fe !important; }
.social-tiktok:hover {
  border-color: rgba(0, 242, 254, 0.6) !important;
  box-shadow: 0 12px 32px rgba(254, 44, 85, 0.35), 0 0 16px rgba(0, 242, 234, 0.25) !important;
}

/* Light Theme */
[data-theme="light"] .social-vertical-card,
html[data-theme="light"] .social-vertical-card,
body.light-theme .social-vertical-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .social-card-title,
html[data-theme="light"] .social-card-title {
  color: #0f172a !important;
}

[data-theme="light"] .social-card-icon,
html[data-theme="light"] .social-card-icon {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ===================================================
   UNIFORM SOCIAL CARDS GRID (3x2)
   =================================================== */
#socials .grid,
#socials > div:not(header),
.socials-grid,
section[id="socials"] div:has(> .social-vertical-card) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  max-width: 1100px !important;
  margin: 30px auto 0 auto !important;
  padding: 0 16px !important;
}

@media (max-width: 960px) {
  #socials .grid,
  #socials > div:not(header),
  .socials-grid,
  section[id="socials"] div:has(> .social-vertical-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 540px) {
  #socials .grid,
  #socials > div:not(header),
  .socials-grid,
  section[id="socials"] div:has(> .social-vertical-card) {
    grid-template-columns: 1fr !important;
  }
}

/* Card Shape & Glass Texture */
.social-vertical-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 28px 20px 22px 20px !important;
  min-height: 180px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;

  /* Frosted Glass Base */
  background: linear-gradient(150deg, rgba(28, 33, 44, 0.75) 0%, rgba(13, 16, 23, 0.95) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
}

/* Icon Box */
.social-vertical-card .social-card-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.26s ease !important;
}

.social-vertical-card .social-card-icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  display: block !important;
}

/* Title */
.social-vertical-card .social-card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}

/* Action Label */
.social-vertical-card .social-card-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

.social-vertical-card .social-card-action .arrow {
  font-size: 1rem !important;
  transition: transform 0.2s ease !important;
}

/* Lift on Hover */
.social-vertical-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

.social-vertical-card:hover .social-card-icon {
  transform: scale(1.12) !important;
}

.social-vertical-card:hover .social-card-action .arrow {
  transform: translate(3px, -3px) !important;
}

/* Brand Colors */
.social-youtube .social-card-icon { color: #ff0000 !important; }
.social-youtube:hover {
  border-color: rgba(255, 0, 0, 0.6) !important;
  box-shadow: 0 12px 30px rgba(255, 0, 0, 0.35) !important;
}
.social-youtube:hover .social-card-action { color: #ff4d4d !important; }

.social-shorts .social-card-icon { color: #ff334b !important; }
.social-shorts:hover {
  border-color: rgba(255, 51, 75, 0.6) !important;
  box-shadow: 0 12px 30px rgba(255, 51, 75, 0.35) !important;
}
.social-shorts:hover .social-card-action { color: #ff667a !important; }

.social-facebook .social-card-icon { color: #1877f2 !important; }
.social-facebook:hover {
  border-color: rgba(24, 119, 242, 0.6) !important;
  box-shadow: 0 12px 30px rgba(24, 119, 242, 0.35) !important;
}
.social-facebook:hover .social-card-action { color: #4b97f5 !important; }

.social-snapchat .social-card-icon { color: #fffc00 !important; }
.social-snapchat:hover {
  border-color: rgba(255, 252, 0, 0.6) !important;
  box-shadow: 0 12px 30px rgba(255, 252, 0, 0.35) !important;
}
.social-snapchat:hover .social-card-action { color: #fffca0 !important; }

.social-telegram .social-card-icon { color: #24a1de !important; }
.social-telegram:hover {
  border-color: rgba(36, 161, 222, 0.6) !important;
  box-shadow: 0 12px 30px rgba(36, 161, 222, 0.35) !important;
}
.social-telegram:hover .social-card-action { color: #53b8e7 !important; }

.social-tiktok .social-card-icon { color: #00f2fe !important; }
.social-tiktok:hover {
  border-color: rgba(0, 242, 254, 0.6) !important;
  box-shadow: 0 12px 30px rgba(254, 44, 85, 0.35), 0 0 16px rgba(0, 242, 254, 0.25) !important;
}
.social-tiktok:hover .social-card-action { color: #00f2fe !important; }

/* Light Theme Support */
[data-theme="light"] .social-vertical-card,
html[data-theme="light"] .social-vertical-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .social-vertical-card .social-card-title {
  color: #0f172a !important;
}
[data-theme="light"] .social-vertical-card .social-card-icon {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* ===================================================
   PERFECT 3x2 SOCIAL CARDS REPLACEMENT
   =================================================== */
#socials .grid,
#socials .social-links,
section#socials div:has(> .custom-social-box) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 960px !important;
  margin: 36px auto !important;
  padding: 0 16px !important;
}

@media (max-width: 820px) {
  #socials .grid,
  #socials .social-links,
  section#socials div:has(> .custom-social-box) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 500px) {
  #socials .grid,
  #socials .social-links,
  section#socials div:has(> .custom-social-box) {
    grid-template-columns: 1fr !important;
  }
}

/* Identical Card Styling to YouTube Widget */
.custom-social-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 18px 20px 18px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  min-height: 165px !important;
  box-sizing: border-box !important;

  /* Frosted Dark Navy / Charcoal Glass */
  background: #131722 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.custom-social-box .box-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: #1c2230 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  transition: transform 0.25s ease !important;
}

.custom-social-box .box-icon-wrap svg {
  width: 26px !important;
  height: 26px !important;
  fill: currentColor !important;
}

.custom-social-box .box-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 6px !important;
}

.custom-social-box .box-title .box-arr {
  font-size: 0.95rem !important;
  opacity: 0.8 !important;
}

.custom-social-box .box-follow {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #818cf8 !important;
  opacity: 0.9 !important;
}

/* Hover Interaction */
.custom-social-box:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.6) !important;
}

.custom-social-box:hover .box-icon-wrap {
  transform: scale(1.1) !important;
}

/* Brand Icon Accent Colors */
.brand-youtube .box-icon-wrap { color: #ff0000 !important; }
.brand-shorts .box-icon-wrap { color: #ff334b !important; }
.brand-facebook .box-icon-wrap { color: #1877f2 !important; }
.brand-snapchat .box-icon-wrap { color: #fffc00 !important; }
.brand-telegram .box-icon-wrap { color: #24a1de !important; }
.brand-tiktok .box-icon-wrap { color: #00f2fe !important; }

/* Light Theme Parity */
[data-theme="light"] .custom-social-box,
html[data-theme="light"] .custom-social-box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .custom-social-box .box-icon-wrap {
  background: #f1f5f9 !important;
}

[data-theme="light"] .custom-social-box .box-title {
  color: #0f172a !important;
}

/* ===================================================
   CENTERED 3x2 SOCIAL CARDS GRID
   =================================================== */
.socials-unified-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  max-width: 900px !important;
  margin: 36px auto 60px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  position: static !important;
}

@media (max-width: 860px) {
  .socials-unified-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .socials-unified-container {
    grid-template-columns: 1fr !important;
  }
}

/* Individual Card */
.premium-social-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 30px 20px 22px 20px !important;
  min-height: 175px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;

  /* Frosted Charcoal Midnight Glass */
  background: #11141c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
}

/* Icon Capsule */
.premium-social-card .card-icon-box {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: #1c2230 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  transition: transform 0.25s ease !important;
}

.premium-social-card .card-icon-box svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  display: block !important;
}

/* Title */
.premium-social-card .card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

/* Subtitle ("Follow ↗") */
.premium-social-card .card-subtitle {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
}

/* Card Hover Lift */
.premium-social-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65) !important;
}

.premium-social-card:hover .card-icon-box {
  transform: scale(1.12) !important;
}

/* Platform Colors & Glows */
.card-youtube .card-icon-box { color: #ff0000 !important; }
.card-youtube:hover {
  border-color: rgba(255, 0, 0, 0.6) !important;
  box-shadow: 0 14px 34px rgba(255, 0, 0, 0.35) !important;
}
.card-youtube:hover .card-subtitle { color: #ff4d4d !important; }

.card-facebook .card-icon-box { color: #1877f2 !important; }
.card-facebook:hover {
  border-color: rgba(24, 119, 242, 0.6) !important;
  box-shadow: 0 14px 34px rgba(24, 119, 242, 0.35) !important;
}
.card-facebook:hover .card-subtitle { color: #4b97f5 !important; }

.card-snapchat .card-icon-box { color: #fffc00 !important; }
.card-snapchat:hover {
  border-color: rgba(255, 252, 0, 0.6) !important;
  box-shadow: 0 14px 34px rgba(255, 252, 0, 0.35) !important;
}
.card-snapchat:hover .card-subtitle { color: #fffca0 !important; }

.card-tiktok .card-icon-box { color: #00f2fe !important; }
.card-tiktok:hover {
  border-color: rgba(0, 242, 254, 0.6) !important;
  box-shadow: 0 14px 34px rgba(254, 44, 85, 0.35), 0 0 18px rgba(0, 242, 254, 0.25) !important;
}
.card-tiktok:hover .card-subtitle { color: #00f2fe !important; }

.card-telegram .card-icon-box { color: #24a1de !important; }
.card-telegram:hover {
  border-color: rgba(36, 161, 222, 0.6) !important;
  box-shadow: 0 14px 34px rgba(36, 161, 222, 0.35) !important;
}
.card-telegram:hover .card-subtitle { color: #53b8e7 !important; }

.card-shorts .card-icon-box { color: #ff334b !important; }
.card-shorts:hover {
  border-color: rgba(255, 51, 75, 0.6) !important;
  box-shadow: 0 14px 34px rgba(255, 51, 75, 0.35) !important;
}
.card-shorts:hover .card-subtitle { color: #ff667a !important; }

/* Light Mode Adaptation */
[data-theme="light"] .premium-social-card,
html[data-theme="light"] .premium-social-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .premium-social-card .card-icon-box,
html[data-theme="light"] .premium-social-card .card-icon-box {
  background: #f1f5f9 !important;
}

[data-theme="light"] .premium-social-card .card-title,
html[data-theme="light"] .premium-social-card .card-title {
  color: #0f172a !important;
}

/* ===================================================
   MATCH PRECISE BOTTOM-RIGHT SQUIRCLE CARD STYLE
   =================================================== */

/* 1. Hide the standalone duplicate corner card */
body > .social-vertical-card,
body > div > .social-vertical-card:last-child,
.social-vertical-card[style*="position: fixed"],
.social-vertical-card[style*="position: absolute"] {
  display: none !important;
}

/* 2. Grid container layout */
.socials-unified-container {
  display: grid !important;
  grid-template-columns: repeat(3, 220px) !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 32px auto 60px auto !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .socials-unified-container {
    grid-template-columns: repeat(2, 180px) !important;
    gap: 16px !important;
  }
}

@media (max-width: 440px) {
  .socials-unified-container {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
  }
}

/* 3. Exact Squircle Card Body */
.premium-social-card,
.social-vertical-card {
  width: 100% !important;
  aspect-ratio: 1 / 1.08 !important;
  min-height: auto !important;
  padding: 24px 16px 20px 16px !important;
  border-radius: 24px !important; /* Authentic squircle shape */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;

  /* Deep obsidian glass with subtle top rim highlight */
  background: linear-gradient(180deg, #181d28 0%, #0f121a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;

  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
}

/* 4. Rounded Icon Capsule */
.premium-social-card .card-icon-box,
.social-vertical-card .social-card-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: #1e2433 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.25s ease !important;
}

.premium-social-card .card-icon-box svg,
.social-vertical-card .social-card-icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  display: block !important;
}

/* 5. Typography */
.premium-social-card .card-title,
.social-vertical-card .social-card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.premium-social-card .card-subtitle,
.social-vertical-card .social-card-action,
.social-vertical-card .box-follow {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #717d96 !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

/* 6. Smooth Card Hover */
.premium-social-card:hover,
.social-vertical-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

.premium-social-card:hover .card-icon-box,
.social-vertical-card:hover .social-card-icon {
  transform: scale(1.08) !important;
}

.premium-social-card:hover .card-subtitle,
.social-vertical-card:hover .social-card-action {
  color: #a0aec0 !important;
}

/* 7. Brand Icon Colors */
.card-youtube .card-icon-box, .social-youtube .social-card-icon { color: #ff0000 !important; }
.card-facebook .card-icon-box, .social-facebook .social-card-icon { color: #1877f2 !important; }
.card-snapchat .card-icon-box, .social-snapchat .social-card-icon { color: #fffc00 !important; }
.card-tiktok .card-icon-box, .social-tiktok .social-card-icon { color: #00f2fe !important; }
.card-telegram .card-icon-box, .social-telegram .social-card-icon { color: #24a1de !important; }
.card-shorts .card-icon-box, .social-shorts .social-card-icon { color: #ff334b !important; }

/* ===================================================
   ROUNDED RECTANGLE CARDS (EXACT MATCH TO CORNER WIDGET)
   =================================================== */

/* Hide the duplicate floating widget at bottom-right */
body > a[href*="youtube.com"],
body > div[style*="fixed"] {
  display: none !important;
}

/* 3x2 Grid Setup */
#socials .grid,
#socials .social-links,
.socials-unified-container,
section#socials div:has(> a) {
  display: grid !important;
  grid-template-columns: repeat(3, 210px) !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 36px auto 60px auto !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  #socials .grid,
  #socials .social-links,
  .socials-unified-container,
  section#socials div:has(> a) {
    grid-template-columns: repeat(2, 170px) !important;
    gap: 16px !important;
  }
}

@media (max-width: 420px) {
  #socials .grid,
  #socials .social-links,
  .socials-unified-container,
  section#socials div:has(> a) {
    grid-template-columns: 200px !important;
  }
}

/* Force Rectangle with Rounded Corners (Overriding Oval / Pill) */
#socials a,
.socials-unified-container a,
.custom-social-box,
.premium-social-card,
.social-vertical-card {
  width: 100% !important;
  max-width: 210px !important;
  height: 190px !important;
  min-height: unset !important;
  border-radius: 20px !important; /* Rounded rectangle corners */
  padding: 24px 16px 18px 16px !important;
  box-sizing: border-box !important;
  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;

  /* Obsidian Slate Surface */
  background: #141824 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

/* Rounded Icon Box */
#socials a .card-icon-box,
#socials a .box-icon-wrap,
#socials a .social-card-icon,
.socials-unified-container .card-icon-box {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background: #1d2232 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

#socials a svg,
.socials-unified-container svg {
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

/* Card Title */
#socials a .card-title,
#socials a .box-title,
#socials a .social-card-title,
.socials-unified-container .card-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Follow Label */
#socials a .card-subtitle,
#socials a .box-follow,
#socials a .social-card-action,
.socials-unified-container .card-subtitle {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #717d96 !important;
  margin: 0 !important;
}

/* Card Hover */
#socials a:hover,
.socials-unified-container a:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.65) !important;
}

#socials a:hover .card-subtitle,
.socials-unified-container a:hover .card-subtitle {
  color: #a0aec0 !important;
}

/* ===================================================
   EXACT YOUTUBE CARD CLONES FOR ALL 6 SOCIALS
   =================================================== */

/* 1. Eliminate any remaining bottom-right floating clone */
body > a.social-vertical-card,
body > .social-vertical-card,
div[style*="fixed"]:has(svg) {
  display: none !important;
}

/* 2. Centered 3x2 Grid */
.match-youtube-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 160px) !important;
  justify-content: center !important;
  gap: 20px !important;
  margin: 36px auto 60px auto !important;
  padding: 0 !important;
  max-width: 600px !important;
}

@media (max-width: 640px) {
  .match-youtube-grid {
    grid-template-columns: repeat(2, 150px) !important;
    gap: 14px !important;
  }
}

@media (max-width: 360px) {
  .match-youtube-grid {
    grid-template-columns: 160px !important;
  }
}

/* 3. The exact card geometry copied from the YouTube widget */
.match-youtube-card {
  width: 160px !important;
  height: 160px !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px 14px 12px !important;

  /* Card Background & Border */
  background: #12151e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
  
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

/* Rounded Icon Box */
.match-youtube-card .myc-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: #1b1f2b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
}

.match-youtube-card .myc-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* Card Title */
.match-youtube-card .myc-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* Subtitle ("Follow ↗") */
.match-youtube-card .myc-follow {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #717d96 !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

/* Smooth Lift on Hover */
.match-youtube-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65) !important;
}

.match-youtube-card:hover .myc-follow {
  color: #94a3b8 !important;
}

/* Light Theme */
[data-theme="light"] .match-youtube-card,
html[data-theme="light"] .match-youtube-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .match-youtube-card .myc-icon {
  background: #f1f5f9 !important;
}

[data-theme="light"] .match-youtube-card .myc-title {
  color: #0f172a !important;
}

/* ===================================================
   EXACT PORTRAIT CARD MATCH (COPIED FROM CORNER WIDGET)
   =================================================== */

/* 1. Eliminate the floating duplicate corner card */
body > a[href*="youtube"],
body > div.social-vertical-card,
.social-vertical-card[style*="fixed"],
.social-vertical-card[style*="absolute"] {
  display: none !important;
}

/* 2. Grid Container - Centered and compact portrait columns */
#socials .grid,
#socials .social-links,
.socials-unified-container,
.match-youtube-grid,
section#socials div:has(> a) {
  display: grid !important;
  grid-template-columns: repeat(3, 140px) !important; /* Authentic portrait card width */
  justify-content: center !important;
  gap: 20px !important;
  max-width: 520px !important;
  margin: 32px auto 60px auto !important;
  padding: 0 !important;
}

@media (max-width: 560px) {
  #socials .grid,
  #socials .social-links,
  .socials-unified-container,
  .match-youtube-grid,
  section#socials div:has(> a) {
    grid-template-columns: repeat(2, 136px) !important;
    gap: 14px !important;
  }
}

/* 3. Portrait Card Body: 140px width x 175px height */
#socials a,
.match-youtube-card,
.premium-social-card,
.social-vertical-card,
.custom-social-box {
  width: 140px !important;
  height: 175px !important; /* Portrait height - taller than wide */
  max-width: 140px !important;
  min-height: 175px !important;
  max-height: 175px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 10px 16px 10px !important;

  /* Deep obsidian navy matte glass */
  background: #11141c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

/* 4. Remove any stray arrow in the bottom corner of the card */
#socials a::after,
.match-youtube-card::after,
.premium-social-card::after,
.social-vertical-card::after {
  display: none !important;
}

/* 5. Portrait Icon Capsule */
#socials a .card-icon-box,
#socials a .social-card-icon,
#socials a .myc-icon,
#socials a .box-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  background: #191e2b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 14px 0 !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.2s ease !important;
}

#socials a svg,
.match-youtube-card svg,
.premium-social-card svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* 6. Card Title: Centered with subtle inline arrow */
#socials a .card-title,
#socials a .social-card-title,
#socials a .myc-title,
#socials a .box-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

/* 7. Card Subtitle ("Follow ↗") */
#socials a .card-subtitle,
#socials a .social-card-action,
#socials a .myc-follow,
#socials a .box-follow {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #717d96 !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  transition: color 0.2s ease !important;
}

/* 8. Subtle Hover Lift */
#socials a:hover,
.match-youtube-card:hover,
.premium-social-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65) !important;
}

#socials a:hover .card-subtitle,
#socials a:hover .social-card-action,
#socials a:hover .myc-follow {
  color: #a0aec0 !important;
}

/* Hide any description / intro text inside the socials section */
#socials p,
#socials .section-description,
#socials .socials-desc,
#socials header p {
  display: none !important;
}

/* Ensure the header and grid remain centered */
#socials header,
#socials h2 {
  text-align: center !important;
  margin: 0 auto 24px auto !important;
}

/* ===================================================
   NAVBAR RTL ALIGNMENT (LOGO & NAME TO TOP-RIGHT IN KU)
   =================================================== */

/* When document or body is in RTL (Kurdish) */
html[dir="rtl"] nav,
body[dir="rtl"] nav,
html[lang*="ku"] nav,
body[data-lang*="ku"] nav,
html[dir="rtl"] .navbar,
body[dir="rtl"] .navbar,
html[dir="rtl"] header,
body[dir="rtl"] header {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

/* Brand container (Logo + Name) in RTL */
html[dir="rtl"] .brand,
html[dir="rtl"] .logo,
html[dir="rtl"] .nav-brand,
html[dir="rtl"] [class*="brand"],
html[dir="rtl"] [class*="logo"],
body[dir="rtl"] .brand,
body[dir="rtl"] .logo,
body[dir="rtl"] .nav-brand,
body[dir="rtl"] [class*="brand"],
body[dir="rtl"] [class*="logo"] {
  order: -1 !important;
  margin-left: unset !important;
  margin-right: 0 !important;
  flex-direction: row !important;
}

/* Navigation links center / left in RTL */
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-menu,
body[dir="rtl"] .nav-links,
body[dir="rtl"] .nav-menu {
  direction: rtl !important;
}

/* ===================================================
   HEADER RTL LAYOUT FOR CKB / KURDISH
   =================================================== */

/* Header container direction flip */
html[lang="ckb"] .header,
html[dir="rtl"] .header,
body[data-lang="ckb"] .header {
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Brand element (Logo + Name) pushed to the right */
html[lang="ckb"] .header .brand,
html[dir="rtl"] .header .brand,
body[data-lang="ckb"] .header .brand {
  order: 1 !important;
  margin-left: unset !important;
  margin-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Nav links in the center */
html[lang="ckb"] .header nav,
html[dir="rtl"] .header nav,
body[data-lang="ckb"] .header nav {
  order: 2 !important;
  direction: rtl !important;
}

/* Controls (Theme + Language toggles) moved to the left */
html[lang="ckb"] .header .theme-toggle,
html[lang="ckb"] .header .languages,
html[dir="rtl"] .header .theme-toggle,
html[dir="rtl"] .header .languages,
body[data-lang="ckb"] .header .theme-toggle,
body[data-lang="ckb"] .header .languages {
  order: 3 !important;
}

/* Fix text direction of brand name text */
html[lang="ckb"] .brand-name,
html[dir="rtl"] .brand-name {
  text-align: right !important;
}

/* ===================================================
   LOCK BRAND LOGO ON LEFT IN BOTH LANGUAGES
   =================================================== */

/* Keep the header flex direction fixed LTR */
header.header.wrap,
html[lang="ckb"] header.header.wrap,
html[dir="rtl"] header.header.wrap,
body[dir="rtl"] header.header.wrap {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Force brand logo and name to stay at the left */
header.header .brand,
html[lang="ckb"] header.header .brand,
html[dir="rtl"] header.header .brand {
  order: 1 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  direction: ltr !important;
}

/* Keep central navigation centered */
header.header nav,
html[lang="ckb"] header.header nav,
html[dir="rtl"] header.header nav {
  order: 2 !important;
  margin: 0 auto !important;
}

/* Keep language switcher & theme toggle on the right */
header.header .theme-toggle,
header.header .languages,
html[lang="ckb"] header.header .theme-toggle,
html[lang="ckb"] header.header .languages,
html[dir="rtl"] header.header .languages {
  order: 3 !important;
}

/* ===================================================
   MOVE LANGUAGE SWITCHER TO TOP RIGHT CORNER
   =================================================== */

/* Dock language & theme controls fixed to the top right */
.languages,
div[role="group"][aria-label*="Language"],
.theme-toggle {
  position: fixed !important;
  top: 18px !important;
  right: 24px !important;
  bottom: unset !important;
  left: unset !important;
  transform: none !important;
  z-index: 9999 !important;
}

/* If wrapped in a pill container with theme toggle */
.languages {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#theme-toggle,
button[id="theme-toggle"],
.theme-toggle {
  right: 120px !important; /* sits cleanly beside the language pill */
}

/* Ensure mobile header stays responsive */
@media (max-width: 640px) {
  .languages,
  div[role="group"][aria-label*="Language"] {
    top: 14px !important;
    right: 14px !important;
    scale: 0.9 !important;
  }
  #theme-toggle,
  button[id="theme-toggle"],
  .theme-toggle {
    right: 100px !important;
    top: 14px !important;
    scale: 0.9 !important;
  }
}

/* ===================================================
   PLACE LANGUAGE & THEME TOGGLE BESIDE CONTACT MENU
   =================================================== */

/* 1. Header layout to align nav and controls together */
header.header.wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  flex-direction: row !important;
}

/* 2. Logo stays pinned to the left */
header.header .brand {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 3. Navigation menu bar */
header.header nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* 4. Reset fixed positioning and dock beside Contact */
.languages,
div[role="group"][aria-label*="Language"],
#theme-toggle,
button[id="theme-toggle"],
.theme-toggle {
  position: static !important;
  top: unset !important;
  right: unset !important;
  bottom: unset !important;
  left: unset !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* 5. Group toggles neatly to the right of Contact */
header.header .languages {
  margin-left: 14px !important;
  margin-right: 6px !important;
}

header.header #theme-toggle,
header.header .theme-toggle {
  margin-left: 6px !important;
}

/* Handle responsive view */
@media (max-width: 860px) {
  header.header nav {
    gap: 4px !important;
  }
  header.header .languages {
    margin-left: 8px !important;
  }
}

/* ===================================================
   PLACE LANGUAGE & THEME TOGGLE BESIDE CONTACT MENU
   =================================================== */

/* 1. Header layout to align nav and controls together */
header.header.wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  flex-direction: row !important;
}

/* 2. Logo stays pinned to the left */
header.header .brand {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 3. Navigation menu bar */
header.header nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* 4. Reset fixed positioning and dock beside Contact */
.languages,
div[role="group"][aria-label*="Language"],
#theme-toggle,
button[id="theme-toggle"],
.theme-toggle {
  position: static !important;
  top: unset !important;
  right: unset !important;
  bottom: unset !important;
  left: unset !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* 5. Group toggles neatly to the right of Contact */
header.header .languages {
  margin-left: 14px !important;
  margin-right: 6px !important;
}

header.header #theme-toggle,
header.header .theme-toggle {
  margin-left: 6px !important;
}

/* Handle responsive view */
@media (max-width: 860px) {
  header.header nav {
    gap: 4px !important;
  }
  header.header .languages {
    margin-left: 8px !important;
  }
}

/* ===================================================
   INLINE LANGUAGE & THEME TOGGLE INSIDE NAVBAR MENU
   =================================================== */

/* Ensure the navbar pill displays all items in a single clean row */
header.header nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Force override any fixed bottom positioning */
header.header nav .languages,
header.header nav #theme-toggle,
header.header nav .theme-toggle,
.languages,
#theme-toggle {
  position: static !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 0 0 6px !important;
  z-index: auto !important;
}

/* Make language buttons compact and matching nav style */
header.header nav .languages {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 9999px !important;
}

header.header nav #theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Allow rich text and formatting inside dynamic content containers */
#socials .card-title,
#socials .myc-title,
#main p,
.section-description,
[data-i18n] {
  white-space: normal !important;
}

/* Ensure formatting tags render properly */
b, strong {
  font-weight: 700 !important;
}

i, em {
  font-style: italic !important;
}

/* ===================================================
   CENTER WELCOME SECTION & ADD RED NEON GLOW
   =================================================== */

/* 1. Center the section container and all header text */
#home,
.hero,
section:has(h1) {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. Center the uppercase WELCOME tag */
.hero .tag,
.hero-tag,
span:has(+ h1),
p:has(+ h1) {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* 3. Red Title: Center + High-Impact Neon Glow */
h1,
.hero h1,
.hero-title,
[data-i18n*="welcome"],
[data-i18n*="title"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  color: #ff2222 !important;
  /* Multi-layered neon red text-shadow for a clean glow */
  text-shadow:
    0 0 5px rgba(255, 34, 34, 0.9),
    0 0 12px rgba(255, 0, 0, 0.7),
    0 0 25px rgba(255, 0, 0, 0.5),
    0 0 45px rgba(230, 0, 0, 0.3) !important;
  letter-spacing: 0.5px !important;
}

/* 4. Center the "My latest 10 videos" subtext */
.hero p,
.hero-subtitle,
h1 + p,
[data-i18n*="latest"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ===================================================
   DECREASE WELCOME TITLE FONT SIZE
   =================================================== */

h1,
.hero h1,
.hero-title,
[data-i18n*="welcome"],
[data-i18n*="title"] {
  font-size: 1.85rem !important; /* adjust down to taste (e.g. 1.6rem to 2rem) */
  line-height: 1.25 !important;
}

/* Ensure neat scaling on mobile screens */
@media (max-width: 640px) {
  h1,
  .hero h1,
  .hero-title,
  [data-i18n*="welcome"],
  [data-i18n*="title"] {
    font-size: 1.4rem !important;
  }
}

/* ===================================================
   LUXURY GOLD/YELLOW GRADIENT & GLOW FOR WELCOME TITLE
   =================================================== */

h1,
.hero h1,
.hero-title,
[data-i18n*="welcome"],
[data-i18n*="title"] {
  /* Rich amber to pale-gold metallic gradient */
  background: linear-gradient(135deg, #FFF3B0 0%, #FFD700 35%, #FDB931 70%, #D48806 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;

  /* Ambient multi-layered warm yellow/gold drop shadow */
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.75))
          drop-shadow(0 0 20px rgba(245, 166, 35, 0.45))
          drop-shadow(0 0 35px rgba(212, 136, 6, 0.25)) !important;
  
  /* Reset text-shadow so it doesn't conflict with background-clip */
  text-shadow: none !important;
  font-weight: 800 !important;
}

/* ===================================================
   ADAPTIVE CONTRAST: WELCOME TEXT FOR LIGHT & DARK THEMES
   =================================================== */

/* 1. WELCOME pill tag - high contrast badge */
.hero .tag,
.hero-tag,
span:has(+ h1),
p:has(+ h1) {
  display: inline-block !important;
  color: #d97706 !important; /* Rich amber readable on light and dark */
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  margin-bottom: 10px !important;
}

/* 2. Main Title: Rich Sunset Gold with Edge Definition */
h1,
.hero h1,
.hero-title,
[data-i18n*="welcome"],
[data-i18n*="title"] {
  /* Warm Sunset Gold gradient: bright highlights, rich deep-amber lowlights */
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 45%, #facc15 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;

  /* Subtle drop shadow providing a crisp edge in light mode and a warm glow in dark mode */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 14px rgba(245, 158, 11, 0.4)) !important;
  font-weight: 900 !important;
}

/* 3. Automatic Boost for Explicit Light Theme Classes */
html[data-theme="light"] h1,
body.light-theme h1,
.light h1 {
  background: linear-gradient(135deg, #d97706 0%, #facc15 60%, #facc15 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15)) !important;
}

html[data-theme="light"] .hero .tag,
body.light-theme .hero .tag {
  color: #facc15 !important;
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}

/* ===================================================
   CAROUSEL CONTROLS: RTL ARROWS, HOVER ZOOM, & PAUSE ICON
   =================================================== */

/* 1. Base styles & hover zoom for carousel arrows */
.carousel-btn,
.slider-btn,
.swiper-button-prev,
.swiper-button-next,
button[class*="prev"],
button[class*="next"],
.carousel-control-prev,
.carousel-control-next {
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.carousel-btn:hover,
.slider-btn:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover,
button[class*="prev"]:hover,
button[class*="next"]:hover,
.carousel-control-prev:hover,
.carousel-control-next:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(245, 158, 11, 0.8) !important;
}

/* 2. Reverse arrow directions specifically when page is in Kurdish (RTL) */
html[dir="rtl"] .carousel-btn svg,
html[dir="rtl"] .slider-btn svg,
html[lang="ckb"] .carousel-btn svg,
html[lang="ckb"] .slider-btn svg,
[dir="rtl"] button[class*="prev"] svg,
[dir="rtl"] button[class*="next"] svg,
[dir="rtl"] .swiper-button-prev,
[dir="rtl"] .swiper-button-next,
body.rtl .carousel-btn,
html[dir="rtl"] [class*="prev"] i,
html[dir="rtl"] [class*="next"] i {
  transform: scaleX(-1) !important;
}

/* Keep zoom scale when hovering inverted RTL arrows */
html[dir="rtl"] .carousel-btn:hover svg,
html[dir="rtl"] .slider-btn:hover svg,
html[lang="ckb"] .carousel-btn:hover svg,
html[lang="ckb"] .slider-btn:hover svg,
[dir="rtl"] button[class*="prev"]:hover svg,
[dir="rtl"] button[class*="next"]:hover svg {
  transform: scaleX(-1) scale(1.18) !important;
}

/* 3. Restyle and align the Carousel Pause / Autoplay toggle button */
.carousel-pause,
.slider-pause,
button[class*="pause"],
button[aria-label*="pause" i],
button[aria-label*="play" i],
.pause-btn {
  position: absolute !important;
  bottom: 12px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(18, 18, 18, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  z-index: 25 !important;
}

/* Position adjustment for Kurdish (RTL) layout */
html[dir="rtl"] .carousel-pause,
html[dir="rtl"] .slider-pause,
html[lang="ckb"] .carousel-pause,
html[dir="rtl"] button[class*="pause"],
html[lang="ckb"] button[class*="pause"],
[dir="rtl"] .pause-btn {
  right: auto !important;
  left: 14px !important;
}

/* Pause button hover state */
.carousel-pause:hover,
.slider-pause:hover,
button[class*="pause"]:hover,
.pause-btn:hover {
  transform: scale(1.15) !important;
  background: rgba(245, 158, 11, 0.9) !important;
  color: #111827 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.8) !important;
}

/* ===================================================
   EXPAND MAIN WEBSITE CONTAINER & HERO SECTION WIDTH
   =================================================== */

/* 1. Expand the main page containers */
main,
.container,
.main-content,
.content-wrapper,
#home,
#root,
.app-container {
  width: 95% !important;
  max-width: 1440px !important; /* Increase from ~900px to standard wide desktop */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Expand carousel and video presentation wrapper */
.carousel,
.slider,
.swiper,
.video-slider,
.hero-carousel,
section:has(.carousel) {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===================================================
   MOBILE RESPONSIVE LAYOUT FIXES (SCREENS <= 768px)
   =================================================== */

@media (max-width: 768px) {
  /* 1. Prevent horizontal overflow & fit screen edge-to-edge */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2. Responsive page containers */
  main,
  .container,
  .main-content,
  .content-wrapper,
  #home,
  #root,
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* 3. Scale down headers for phone displays */
  h1,
  .hero h1,
  .hero-title,
  [data-i18n*="welcome"],
  [data-i18n*="title"] {
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
    padding: 0 8px !important;
    word-break: break-word !important;
  }

  .hero .tag,
  .hero-tag {
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
    letter-spacing: 1.5px !important;
  }

  /* 4. Fit carousel and video display cleanly on mobile */
  .carousel,
  .slider,
  .swiper,
  .video-slider,
  .hero-carousel,
  section:has(.carousel) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 5. Ensure media thumbnails and video cards don't blow out mobile width */
  img,
  iframe,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Compact carousel thumbnails strip on phone */
  .carousel-thumbnails,
  .slider-nav,
  .thumbnails-container {
    gap: 4px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
  }
}

/* ===================================================
   RESPONSIVE NAVIGATION: DESKTOP BAR vs MOBILE DRAWER
   =================================================== */

/* 1. Desktop & PC View (screens wider than 768px) */
@media (min-width: 769px) {
  /* Ensure the horizontal navigation bar is visible */
  nav,
  .navbar,
  .nav-menu,
  .nav-links,
  .desktop-nav {
    display: flex !important;
    align-items: center !important;
  }

  /* Hide mobile hamburger toggle button on PC */
  .menu-toggle,
  .mobile-menu-btn,
  .hamburger,
  button[aria-label*="menu" i],
  button:has(svg):has(~ nav),
  .navbar-toggler {
    display: none !important;
  }
}

/* 2. Mobile Phone View (screens up to 768px) */
@media (max-width: 768px) {
  /* Keep the header bar clean: show logo and hamburger toggle only */
  header,
  .header-container,
  .top-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 14px !important;
  }

  /* Hide the horizontal row of nav pills (Home, Videos, Socials, etc.) */
  header nav:not(.drawer):not(.mobile-nav):not([class*="sidebar"]):not([class*="drawer"]),
  .nav-links:not(.drawer-links),
  .header-menu,
  nav:not([class*="drawer"]):not([class*="side"]):not([class*="mobile"]):not(.video-pagination) {
    display: none !important;
  }

  /* Show the hamburger menu icon button on the right */
  .menu-toggle,
  .mobile-menu-btn,
  .hamburger,
  button[aria-label*="menu" i],
  .navbar-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    z-index: 50 !important;
  }

  /* Ensure the slide-out mobile drawer stays properly structured */
  .side-drawer,
  .mobile-drawer,
  .drawer,
  aside[class*="drawer"],
  div[class*="mobile-menu"] {
    width: 280px !important;
    max-width: 80vw !important;
    height: 100vh !important;
  }
}

/* ===================================================
   HEADER & MOBILE DRAWER NAVIGATION
   =================================================== */

/* Desktop / PC: Show horizontal nav bar, hide mobile toggles */
@media (min-width: 769px) {
  header.header nav[data-label="navigation"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* Mobile: Hide horizontal nav in header bar, show links inside drawer */
@media (max-width: 768px) {
  /* Hide the horizontal navigation links sitting directly inside the header bar */
  header.header > nav[data-label="navigation"] {
    display: none !important;
  }

  /* Keep the drawer and all its menu items visible and styled */
  [class*="drawer"] nav,
  [class*="drawer"] [data-label="navigation"],
  [class*="side"] nav,
  aside nav,
  .mobile-menu nav {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 20px 10px !important;
    gap: 15px !important;
  }

  /* Format links inside the open drawer */
  [class*="drawer"] a,
  aside a,
  .mobile-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1rem !important;
    color: #f3f4f6 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ===================================================
   DESKTOP BAR vs MOBILE DRAWER (#site-menu-drawer)
   =================================================== */

/* 1. Desktop screens: Show horizontal bar, hide mobile drawer button */
@media (min-width: 769px) {
  header.header > nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .drawer-trigger {
    display: none !important;
  }
  #site-menu-drawer {
    display: none !important;
  }
}

/* 2. Mobile screens: Hide header nav links, show drawer button */
@media (max-width: 768px) {
  /* Hide the horizontal navbar links sitting directly inside the header bar */
  header.header > nav {
    display: none !important;
  }

  /* Make sure the hamburger button is visible */
  .drawer-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: inherit !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
  }

  /* Force display of the cloned nav and links inside the slide-out drawer */
  #site-menu-drawer[open] {
    display: flex !important;
    flex-direction: column !important;
    background: #121212 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.6) !important;
  }

  #site-menu-drawer nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 15px !important;
    gap: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #site-menu-drawer nav a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    font-size: 1.05rem !important;
    color: #f3f4f6 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #site-menu-drawer nav a:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
  }

  /* Hide language/theme toggle if duplicated inside the drawer list */
  #site-menu-drawer nav .theme-toggle,
  #site-menu-drawer nav .languages {
    display: none !important;
  }
}

/* ===================================================
   REMOVE BRAND LOGO & NAME FROM HEADER (PC & MOBILE)
   =================================================== */

header.header a.brand,
header.header .brand,
header.header .brand-logo,
header.header .brand-name {
  display: none !important;
}

/* Center the menu navigation bar horizontally across the header */
header.header {
  justify-content: center !important;
}

/* ===================================================
   MOBILE DRAWER: REMOVE HEADER & DOCK BY LANGUAGE
   =================================================== */

/* 1. Remove the "DARAWAN AGHA" text inside the slide-out drawer */
#site-menu-drawer strong,
#site-menu-drawer h2,
#site-menu-drawer h3,
#site-menu-drawer .drawer-heading,
dialog[id*="drawer"] > strong {
  display: none !important;
}

/* 2. English (LTR): Position drawer and trigger on the LEFT */
html[lang="en"] #site-menu-drawer,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer {
  left: 0 !important;
  right: auto !important;
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

html[lang="en"] .drawer-trigger,
html:not([dir="rtl"]):not([lang="ckb"]) .drawer-trigger {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 3. Kurdish (RTL): Position drawer and trigger on the RIGHT */
html[dir="rtl"] #site-menu-drawer,
html[lang="ckb"] #site-menu-drawer {
  right: 0 !important;
  left: auto !important;
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html[dir="rtl"] .drawer-trigger,
html[lang="ckb"] .drawer-trigger {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* 4. Keep close button cleanly docked in corner opposite the slide direction */
#site-menu-drawer .drawer-close {
  cursor: pointer !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 4px 10px !important;
  align-self: flex-end !important;
}

html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  align-self: flex-start !important;
}

/* ===================================================
   MOBILE DRAWER CLOSE BUTTON (RED + CORNER POSITIONED)
   =================================================== */

#site-menu-drawer {
  position: fixed !important;
  padding-top: 18px !important;
}

/* 1. Base Close Button: Red background, white text, round corners */
#site-menu-drawer .drawer-close,
dialog[id*="drawer"] .drawer-close {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.45) !important;
  margin-bottom: 14px !important;
  transition: transform 0.18s ease, background-color 0.18s ease !important;
}

#site-menu-drawer .drawer-close:hover,
#site-menu-drawer .drawer-close:active {
  background: #b91c1c !important;
  transform: scale(1.08) !important;
}

/* 2. English (LTR): Position close button in TOP-LEFT corner above Home */
html[lang="en"] #site-menu-drawer .drawer-close,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer .drawer-close {
  align-self: flex-start !important;
  margin-right: auto !important;
  margin-left: 12px !important;
}

/* 3. Kurdish (RTL): Position close button in TOP-RIGHT corner above سەرەکی */
html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  align-self: flex-start !important;
  margin-left: auto !important;
  margin-right: 12px !important;
}

/* ===================================================
   MOBILE DRAWER: RED FRAMED CLOSE (X) & SPACED MENU
   =================================================== */

/* 1. Transparent background + red border frame + red (X) */
#site-menu-drawer .drawer-close,
dialog[id*="drawer"] .drawer-close {
  background: transparent !important;
  color: #ef4444 !important; /* Vibrant red X */
  border: 2px solid #ef4444 !important; /* Red frame */
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25) !important;
  margin-bottom: 24px !important; /* Pushes the menu list down */
  transition: all 0.2s ease !important;
}

#site-menu-drawer .drawer-close:hover,
#site-menu-drawer .drawer-close:active {
  background: rgba(239, 68, 68, 0.12) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
  transform: scale(1.05) !important;
}

/* 2. Add extra top clearance for the menu list in both languages */
#site-menu-drawer nav,
#site-menu-drawer [data-label="navigation"] {
  margin-top: 18px !important; /* Prevents overlap with close button */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ===================================================
   MOBILE DRAWER: CLOSE BUTTON FRAME THEME & POSITIONING
   =================================================== */

/* 1. Remove yellow focus ring/stroke on close button */
#site-menu-drawer .drawer-close,
dialog[id*="drawer"] .drawer-close {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #ef4444 !important; /* Pure red (X) */
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#site-menu-drawer .drawer-close:focus,
#site-menu-drawer .drawer-close:focus-visible,
#site-menu-drawer .drawer-close:active {
  outline: none !important;
  box-shadow: none !important;
}

/* 2. Theme-adaptive Frame: White in Dark mode */
html:not([data-theme="light"]) #site-menu-drawer .drawer-close,
body:not(.light-theme) #site-menu-drawer .drawer-close {
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
}

/* 3. Theme-adaptive Frame: Black in Light mode */
html[data-theme="light"] #site-menu-drawer .drawer-close,
body.light-theme #site-menu-drawer .drawer-close {
  border: 1.5px solid rgba(0, 0, 0, 0.85) !important;
}

/* 4. Position: Push further LEFT for English */
html[lang="en"] #site-menu-drawer .drawer-close,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer .drawer-close {
  align-self: flex-start !important;
  margin-left: 6px !important; /* Moved closer to the left edge */
  margin-right: auto !important;
}

/* 5. Position: Push further RIGHT for Kurdish */
html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  align-self: flex-start !important;
  margin-right: 6px !important; /* Moved closer to the right edge */
  margin-left: auto !important;
}

/* ===================================================
   PUSH CLOSE (X) BUTTON FURTHER INTO CORNERS
   =================================================== */

/* 1. English (LTR): Shift further LEFT */
html[lang="en"] #site-menu-drawer .drawer-close,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer .drawer-close {
  margin-left: 0 !important;
  transform: translateX(-4px) !important;
}

/* 2. Kurdish (RTL): Shift further RIGHT */
html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  margin-right: 0 !important;
  transform: translateX(4px) !important;
}

/* ===================================================
   PUSH CLOSE BUTTON DEEPER INTO CORNERS (BOTH LANGUAGES)
   =================================================== */

/* English (LTR): Push significantly further LEFT */
html[lang="en"] #site-menu-drawer .drawer-close,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer .drawer-close {
  margin-left: 0 !important;
  transform: translateX(-12px) !important;
}

/* Kurdish (RTL): Push significantly further RIGHT */
html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  margin-right: 0 !important;
  transform: translateX(12px) !important;
}

/* ===================================================
   PUSH CLOSE BUTTON UPWARD & INTO CORNERS
   =================================================== */

/* Reduce dialog top padding so button can sit higher */
#site-menu-drawer {
  padding-top: 10px !important;
}

/* English (LTR): Push UP and LEFT */
html[lang="en"] #site-menu-drawer .drawer-close,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer .drawer-close {
  margin-top: 0 !important;
  transform: translate(-12px, -8px) !important;
}

/* Kurdish (RTL): Push UP and RIGHT */
html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  margin-top: 0 !important;
  transform: translate(12px, -8px) !important;
}

/* ===================================================
   PUSH CLOSE BUTTON UPWARD & INTO CORNERS
   =================================================== */

/* Reduce dialog top padding so button can sit higher */
#site-menu-drawer {
  padding-top: 10px !important;
}

/* English (LTR): Push UP and LEFT */
html[lang="en"] #site-menu-drawer .drawer-close,
html:not([dir="rtl"]):not([lang="ckb"]) #site-menu-drawer .drawer-close {
  margin-top: 0 !important;
  transform: translate(-12px, -8px) !important;
}

/* Kurdish (RTL): Push UP and RIGHT */
html[dir="rtl"] #site-menu-drawer .drawer-close,
html[lang="ckb"] #site-menu-drawer .drawer-close {
  margin-top: 0 !important;
  transform: translate(12px, -8px) !important;
}


/* ===================================================
   ACTIVE TAB: VIBRANT SKY-BLUE SHINE (DESKTOP & MOBILE)
   =================================================== */

/* Desktop & Mobile Drawer: Active Tab Styling */
header.header nav a[aria-current="page"],
header.header nav a.active,
#site-menu-drawer nav a[aria-current="page"],
#site-menu-drawer nav a.active,
#site-menu-drawer [data-label="navigation"] a[aria-current="page"],
#site-menu-drawer [data-label="navigation"] a.active {
  background: #38bdf8 !important; /* Vibrant sky-blue */
  color: #0f172a !important; /* Deep dark text */
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid #7dd3fc !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

/* Ensure icons and text inside the active tab turn dark */
header.header nav a[aria-current="page"] *,
#site-menu-drawer nav a[aria-current="page"] *,
#site-menu-drawer [data-label="navigation"] a[aria-current="page"] * {
  color: #0f172a !important;
  fill: #0f172a !important;
}

/* ===================================================
   MOBILE HEADER: LANGUAGE & THEME IN TOP BAR
   =================================================== */

@media (max-width: 768px) {
  /* 1. Ensure header is a flex row that accommodates the controls */
  header.header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    position: relative !important;
    min-height: 56px !important;
  }

  /* 2. Unhide preference controls in header */
  header.header .theme-toggle,
  header.header #theme-toggle,
  header.header .languages,
  header.header div[role="group"][aria-label*="Language"],
  header.header .site-preferences {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 40 !important;
  }

  /* Style preference buttons to look compact on mobile */
  header.header #theme-toggle,
  header.header .theme-toggle {
    padding: 5px 9px !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
  }

  header.header .languages button,
  header.header div[role="group"] button {
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
  }

  /* 3. English (LTR): Menu on left, Lang & Theme docked on RIGHT */
  html[lang="en"] header.header,
  html:not([dir="rtl"]):not([lang="ckb"]) header.header {
    flex-direction: row !important;
  }

  html[lang="en"] .drawer-trigger,
  html:not([dir="rtl"]):not([lang="ckb"]) .drawer-trigger {
    order: 1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  html[lang="en"] header.header #theme-toggle,
  html[lang="en"] header.header .theme-toggle,
  html:not([dir="rtl"]):not([lang="ckb"]) header.header #theme-toggle {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 6px !important;
  }

  html[lang="en"] header.header .languages,
  html[lang="en"] header.header div[role="group"][aria-label*="Language"],
  html:not([dir="rtl"]):not([lang="ckb"]) header.header .languages {
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4. Kurdish (RTL): Menu on right, Lang & Theme docked on LEFT */
  html[dir="rtl"] header.header,
  html[lang="ckb"] header.header {
    flex-direction: row !important;
  }

  html[dir="rtl"] .drawer-trigger,
  html[lang="ckb"] .drawer-trigger {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  html[dir="rtl"] header.header #theme-toggle,
  html[dir="rtl"] header.header .theme-toggle,
  html[lang="ckb"] header.header #theme-toggle {
    order: 2 !important;
    margin-right: auto !important;
    margin-left: 6px !important;
  }

  html[dir="rtl"] header.header .languages,
  html[dir="rtl"] header.header div[role="group"][aria-label*="Language"],
  html[lang="ckb"] header.header .languages {
    order: 3 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* ===================================================
   SWAP ORDER: EN AND KU LANGUAGE BUTTONS
   =================================================== */

.languages,
div[role="group"][aria-label*="Language"] {
  display: inline-flex !important;
}

/* Place EN first, then KU */
.languages button[data-language="en"],
div[role="group"][aria-label*="Language"] button[data-language="en"] {
  order: 1 !important;
}

.languages button[data-language="ckb"],
div[role="group"][aria-label*="Language"] button[data-language="ckb"] {
  order: 2 !important;
}

/* ===================================================
   REMOVE PLAIN DUPLICATE SOCIAL LIST
   =================================================== */
#social-list,
.social-list {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ===================================================
   SOCIAL CARDS: LIGHT THEME TEXT & BACKGROUND FIX
   =================================================== */

/* Target light theme on html / body or root attribute */
[data-theme="light"] .match-youtube-grid a,
html.light .match-youtube-grid a,
body.light .match-youtube-grid a,
html[data-theme="light"] .match-youtube-card,
body[data-theme="light"] .match-youtube-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Fix platform name text (e.g. YouTube, Facebook, Snapchat) */
[data-theme="light"] .match-youtube-grid .myc-title,
html.light .match-youtube-grid .myc-title,
body.light .match-youtube-grid .myc-title,
[data-theme="light"] .match-youtube-card .myc-title,
html.light .match-youtube-card .myc-title {
  color: #0f172a !important; /* Deep dark readable slate */
  font-weight: 700 !important;
}

/* Fix subtitle / action text (e.g. Subscribe ↗, Follow ↗) */
[data-theme="light"] .match-youtube-grid .myc-follow,
html.light .match-youtube-grid .myc-follow,
body.light .match-youtube-grid .myc-follow,
[data-theme="light"] .match-youtube-card .myc-follow,
html.light .match-youtube-card .myc-follow {
  color: #64748b !important; /* Muted slate gray */
}

/* Hover state on light theme */
[data-theme="light"] .match-youtube-grid a:hover,
html.light .match-youtube-grid a:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}


/* ===================================================
   FORCE SOCIAL CARD TITLE TO DARK COLOR IN LIGHT THEME
   =================================================== */

/* Match any light mode indicator on html, body, or root */
html[data-theme="light"] .myc-title,
body[data-theme="light"] .myc-title,
html.light .myc-title,
body.light .myc-title,
[data-theme="light"] a.match-youtube-card .myc-title,
[data-theme="light"] .match-youtube-grid a .myc-title,
html:not([data-theme="dark"]):not(.dark) .match-youtube-grid .myc-title,
html:not([data-theme="dark"]):not(.dark) .match-youtube-card .myc-title {
  color: #0f172a !important;
  fill: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Ensure link wrapper doesn't force white text onto children */
html[data-theme="light"] .match-youtube-card,
body[data-theme="light"] .match-youtube-card,
html.light .match-youtube-card,
body.light .match-youtube-card,
html:not([data-theme="dark"]):not(.dark) .match-youtube-card {
  color: #0f172a !important;
}


/* ===================================================
   SOCIAL NAMES: PURE BLACK IN LIGHT THEME
   =================================================== */

/* Match any light mode attribute, class, or color-scheme */
:root[data-theme="light"] .match-youtube-card .myc-title,
html[data-theme="light"] .match-youtube-card .myc-title,
body[data-theme="light"] .match-youtube-card .myc-title,
html.light .match-youtube-card .myc-title,
body.light .match-youtube-card .myc-title,
html[data-color-scheme="light"] .match-youtube-card .myc-title,


.video-channel-badge.channel-darawan .channel-badge-icon svg {
  fill: #facc15 !important;
  stroke: none !important;
}

/* Jegr Medya circular badge icon - Dark Theme */
.video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.22) !important;
  color: #38bdf8 !important;
}

.video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}

/* Light Theme Icons */




.video-channel-badge.channel-darawan .channel-badge-icon svg {
  fill: #facc15 !important;
  stroke: none !important;
}

.video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.25) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
}

.video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}

/* =========================================
   LIGHT THEME ICONS (Solid Bold & Sharp White)
   ========================================= */












html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
  stroke-width: 3 !important;
}

html.dark body .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.22) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
}

html.dark body .video-channel-badge.channel-jegr .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}


/* ===================================================
   UNIFIED ICON STYLING (SAME AS DARK THEME)
   =================================================== */

/* Clear any unwanted pseudo-elements or badges */
.video-channel-badge::before,
.video-channel-badge::after,
.video-channel-badge .flag,
.video-channel-badge .channel-flag {
  display: none !important;
  content: none !important;
}

/* Base circular icon container */
.video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
}

/* 1. Darawan Agha: Semi-translucent yellow backdrop + glowing amber/yellow checkmark */
.video-channel-badge.channel-darawan .channel-badge-icon,


.video-channel-badge.channel-darawan .channel-badge-icon svg,


/* Light Theme: Vibrant golden-yellow stroke matching Dark Theme */


.video-channel-badge.channel-darawan .channel-badge-icon svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
}

/* Dark Theme: Vibrant glowing yellow verified badge */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  fill: #facc15 !important;
  stroke: none !important;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.45)) !important;
}

/* Light Theme: Vibrant golden yellow verified badge */


.video-channel-badge.channel-darawan .channel-badge-icon svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
}

/* Dark Theme: Vibrant yellow checkmark */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.45)) !important;
}

/* Light Theme: Sharp golden-yellow checkmark matching text */


.video-channel-badge.channel-darawan .channel-badge-icon svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
}

/* Dark Theme: Vibrant yellow checkmark */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.45)) !important;
}

/* Light Theme: Sharp golden-yellow checkmark matching text */


.video-channel-badge.channel-darawan .channel-badge-icon svg {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
}

/* Light Theme: Sharp, clear yellow checkmark matching text */


html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
  stroke-width: 3.2 !important;
}

/* --- Light Theme: Translucent pill circle + sharp yellow checkmark --- */




html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
  stroke-width: 3 !important;
}

/* 3. Darawan Agha: Light Theme styling (EXACT CLONE of Dark Theme circular aesthetic) */




/* SVG checkmark styling: exact copy of dark theme */
.video-channel-badge.channel-darawan .channel-badge-icon svg,


/* SVG Checkmark: Pure #facc15 in both Light and Dark themes */
.video-channel-badge.channel-darawan .channel-badge-icon svg,



/* ===================================================
   FIX DARAWAN AGHA ICON IN LIGHT THEME
   =================================================== */

/* Prevent the container from painting a solid yellow dot */
.video-channel-badge.channel-darawan .channel-badge-icon,
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Make sure nothing overrides the SVG strokes or fills it solid */
.video-channel-badge.channel-darawan .channel-badge-icon svg path {
  fill: none !important;
  stroke: #facc15 !important;
}


/* ===================================================
   RESTORED BADGES (CLEAN, SOLID, MULTI-THEME)
   =================================================== */

/* Single-row horizontal footer layout */
.video-card-footer,
.video-card .video-card-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Base pill shape */
.video-channel-badge {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  gap: 6px !important;
  border-radius: 9999px !important;
}

.channel-text-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}

.video-channel-badge .channel-word {
  display: block !important;
  font-size: 0.56rem !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
  opacity: 0.9 !important;
}

.video-channel-badge .channel-value {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Circular icon containers */
.video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

.video-channel-badge .channel-badge-icon svg {
  display: block !important;
}

/* ---------------------------------------------------
   DARAWAN AGHA (Yellow theme)
   --------------------------------------------------- */
/* Dark theme */
.video-channel-badge.channel-darawan {
  background: rgba(250, 204, 21, 0.14) !important;
  color: #facc15 !important;
  border: 1px solid rgba(250, 204, 21, 0.5) !important;
}

.video-channel-badge.channel-darawan .channel-badge-icon {
  color: #facc15 !important;
}

/* Light theme (#595757 0.78 opacity background) */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan,
body.light .video-channel-badge.channel-darawan,
[data-theme="light"] .video-channel-badge.channel-darawan {
  background: rgba(89, 87, 87, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #F2DB00 !important;
  border: 1px solid rgba(242, 219, 0, 0.5) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  color: #F2DB00 !important;
}

/* ---------------------------------------------------
   JEGR MEDYA (Cyan theme)
   --------------------------------------------------- */
/* Dark theme */
.video-channel-badge.channel-jegr {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
}

.video-channel-badge.channel-jegr .channel-badge-icon {
  color: #38bdf8 !important;
}

/* Light theme (#595757 0.78 opacity background) */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr,
body.light .video-channel-badge.channel-jegr,
[data-theme="light"] .video-channel-badge.channel-jegr {
  background: rgba(89, 87, 87, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon,
body.light .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon {
  color: #38bdf8 !important;
}


/* ===================================================
   CHECKMARK CONTRAST FIX (BOTH THEMES)
   =================================================== */

/* Clear unwanted borders, squares, or default backgrounds */
.video-channel-badge.channel-darawan .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 5px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.video-channel-badge.channel-darawan .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
}

/* Dark Theme: Soft amber circle + radiant yellow checkmark */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.22) !important;
  border: 1px solid rgba(250, 204, 21, 0.6) !important;
  color: #facc15 !important;
  box-shadow: 0 0 5px rgba(250, 204, 21, 0.35) !important;
}

html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
}

/* Light Theme: Distinct golden-amber pill disc + sharp white checkmark */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: #f59e0b !important;
  border: 1px solid #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 3 !important;
}


/* ===================================================
   MATCHED BADGE ICONS (IDENTICAL MUSIC & VERIFY STYLE)
   =================================================== */

/* Shared container: exact same 18x18 circle, centered, no distortion */
.video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 4px !important;
  flex-shrink: 0 !important;
}

.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
}

/* --- LIGHT THEME STYLING --- */
/* Darawan Agha (Yellow/Amber translucent circle + bright yellow checkmark) */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(242, 219, 0, 0.2) !important;
  border: 1px solid rgba(242, 219, 0, 0.5) !important;
  color: #F2DB00 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #F2DB00 !important;
  fill: none !important;
}

/* Jegr Medya (Cyan translucent circle + bright cyan music note) */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon,
body.light .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon svg,
body.light .video-channel-badge.channel-jegr .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}

/* --- DARK THEME STYLING --- */
.video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.18) !important;
  border: 1px solid rgba(250, 204, 21, 0.45) !important;
  color: #facc15 !important;
}

.video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
}

.video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
}

.video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}


/* ===================================================
   MATCHED BADGE ICONS: EXACT SAME SIZE, STYLE & POSITION
   =================================================== */

/* Shared container: absolute identical sizing, spacing, and shape */
.video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  flex-shrink: 0 !important;
}

/* SVG icons centered and scaled equally */
.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: auto !important;
}

/* ---------------------------------------------------
   LIGHT THEME (#595757 BADGE BACKGROUND)
   --------------------------------------------------- */
/* Darawan Agha: verify checkmark */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(242, 219, 0, 0.22) !important;
  border: 1px solid rgba(242, 219, 0, 0.55) !important;
  color: #F2DB00 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #F2DB00 !important;
  fill: none !important;
}

/* Jegr Medya: music note */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon,
body.light .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.22) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #38bdf8 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon svg,
body.light .video-channel-badge.channel-jegr .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}

/* ---------------------------------------------------
   DARK THEME
   --------------------------------------------------- */
/* Darawan Agha: verify checkmark */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.18) !important;
  border: 1px solid rgba(250, 204, 21, 0.45) !important;
  color: #facc15 !important;
}

html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
}

/* Jegr Medya: music note */
html.dark body .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
}

html.dark body .video-channel-badge.channel-jegr .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}


/* ===================================================
   PERFECT 1:1 CIRCLE SCALE FIX (BOTH THEMES)
   =================================================== */

/* Ensure the outer badge gives adequate vertical height */
.video-channel-badge {
  min-height: 28px !important;
  align-items: center !important;
}

/* Force perfect 1:1 circular aspect ratio with absolute no squishing */
.video-channel-badge .channel-badge-icon,
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge .channel-badge-icon,
body.light .video-channel-badge .channel-badge-icon,
[data-theme="light"] .video-channel-badge .channel-badge-icon,
html.dark body .video-channel-badge .channel-badge-icon,
[data-theme="dark"] .video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  overflow: hidden !important;
}

/* Centered inner checkmark SVG */
.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
  margin: auto !important;
}

/* ---------------------------------------------------
   DARAWAN AGHA: EXACT COPY OF DARK THEME STYLE FOR LIGHT THEME
   --------------------------------------------------- */

/* Dark Theme */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.2) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.6) !important;
  color: #facc15 !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.35) !important;
}

html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
}

/* Light Theme: Identical circular backdrop, border, and glow */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(242, 219, 0, 0.22) !important;
  border: 1.5px solid rgba(242, 219, 0, 0.65) !important;
  color: #F2DB00 !important;
  box-shadow: 0 0 6px rgba(242, 219, 0, 0.3) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #F2DB00 !important;
  fill: none !important;
}


/* ===================================================
   LOCKED FOOTER LAYOUT: CONSISTENT POSITIONS FOR ALL CARDS
   =================================================== */

/* Enforce rigid full-width row with fixed padding */
.video-card-footer,
.video-card .video-card-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  margin-top: auto !important;
  gap: 8px !important;
}

/* Hide any unexpected 3rd element that might push views inward */
.video-card-footer > :not(.views-badge):not([class*="view"]):not(.video-channel-badge) {
  display: none !important;
}

/* 1. Views Count: Always anchored firmly to the start (left) */
.video-card-footer > :first-child,
.video-card-footer .views-badge,
.video-card-footer [class*="view"] {
  margin: 0 !important;
  margin-inline-end: auto !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* 2. Channel Badge: Always anchored firmly to the end (right) */
.video-card-footer > .video-channel-badge,
.video-channel-badge {
  margin: 0 !important;
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  min-width: 110px !important;
  justify-content: space-between !important;
}


/* ===================================================
   LOCKED FOOTER LAYOUT (SAFE FLEX ALIGNMENT)
   =================================================== */

.video-card-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  margin-top: auto !important;
}

.video-card-footer > :first-child {
  margin-inline-end: auto !important;
  flex-shrink: 0 !important;
}

.video-card-footer > :last-child {
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
}


/* ===================================================
   STABLE RESTORED FOOTER & BADGES
   =================================================== */

.video-card-footer,
.video-card .video-card-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  margin-top: auto !important;
  gap: 8px !important;
}

.video-card-footer > :first-child {
  margin: 0 !important;
  margin-inline-end: auto !important;
  flex-shrink: 0 !important;
}

.video-card-footer > :last-child {
  margin: 0 !important;
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
}

/* Badge base */
.video-channel-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 3px 8px !important;
  gap: 6px !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  min-height: 26px !important;
}

.channel-text-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}

.video-channel-badge .channel-word {
  display: block !important;
  font-size: 0.56rem !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
  opacity: 0.9 !important;
}

.video-channel-badge .channel-value {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Circular icon container */
.video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  flex: 0 0 18px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 4px !important;
}

.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: auto !important;
}

/* ---------------------------------------------------
   THEMES STYLING
   --------------------------------------------------- */
/* Dark Theme */
html.dark body .video-channel-badge.channel-darawan,
[data-theme="dark"] .video-channel-badge.channel-darawan {
  background: rgba(250, 204, 21, 0.14) !important;
  color: #facc15 !important;
  border: 1px solid rgba(250, 204, 21, 0.5) !important;
}

html.dark body .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.2) !important;
  border: 1px solid rgba(250, 204, 21, 0.55) !important;
  color: #facc15 !important;
}

html.dark body .video-channel-badge.channel-jegr,
[data-theme="dark"] .video-channel-badge.channel-jegr {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
}

html.dark body .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #38bdf8 !important;
}

/* Light Theme */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan,
body.light .video-channel-badge.channel-darawan,
[data-theme="light"] .video-channel-badge.channel-darawan {
  background: rgba(89, 87, 87, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #F2DB00 !important;
  border: 1px solid rgba(242, 219, 0, 0.5) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(242, 219, 0, 0.2) !important;
  border: 1px solid rgba(242, 219, 0, 0.55) !important;
  color: #F2DB00 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #F2DB00 !important;
  fill: none !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr,
body.light .video-channel-badge.channel-jegr,
[data-theme="light"] .video-channel-badge.channel-jegr {
  background: rgba(89, 87, 87, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon,
body.light .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #38bdf8 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon svg,
body.light .video-channel-badge.channel-jegr .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}


/* ===================================================
   STABLE RESTORED FOOTER & BADGES
   =================================================== */

.video-card-footer,
.video-card .video-card-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  margin-top: auto !important;
  gap: 8px !important;
}

.video-card-footer > :first-child {
  margin: 0 !important;
  margin-inline-end: auto !important;
  flex-shrink: 0 !important;
}

.video-card-footer > :last-child {
  margin: 0 !important;
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
}

/* Badge base */
.video-channel-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 3px 8px !important;
  gap: 6px !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  min-height: 26px !important;
}

.channel-text-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}

.video-channel-badge .channel-word {
  display: block !important;
  font-size: 0.56rem !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
  opacity: 0.9 !important;
}

.video-channel-badge .channel-value {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Circular icon container */
.video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  flex: 0 0 18px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 4px !important;
}

.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: auto !important;
}

/* ---------------------------------------------------
   THEMES STYLING
   --------------------------------------------------- */
/* Dark Theme */
html.dark body .video-channel-badge.channel-darawan,
[data-theme="dark"] .video-channel-badge.channel-darawan {
  background: rgba(250, 204, 21, 0.14) !important;
  color: #facc15 !important;
  border: 1px solid rgba(250, 204, 21, 0.5) !important;
}

html.dark body .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.2) !important;
  border: 1px solid rgba(250, 204, 21, 0.55) !important;
  color: #facc15 !important;
}

html.dark body .video-channel-badge.channel-jegr,
[data-theme="dark"] .video-channel-badge.channel-jegr {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
}

html.dark body .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #38bdf8 !important;
}

/* Light Theme */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan,
body.light .video-channel-badge.channel-darawan,
[data-theme="light"] .video-channel-badge.channel-darawan {
  background: rgba(89, 87, 87, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #F2DB00 !important;
  border: 1px solid rgba(242, 219, 0, 0.5) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(242, 219, 0, 0.2) !important;
  border: 1px solid rgba(242, 219, 0, 0.55) !important;
  color: #F2DB00 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #F2DB00 !important;
  fill: none !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr,
body.light .video-channel-badge.channel-jegr,
[data-theme="light"] .video-channel-badge.channel-jegr {
  background: rgba(89, 87, 87, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon,
body.light .video-channel-badge.channel-jegr .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon {
  background: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #38bdf8 !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-jegr .channel-badge-icon svg,
body.light .video-channel-badge.channel-jegr .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-jegr .channel-badge-icon svg {
  fill: #38bdf8 !important;
  stroke: none !important;
}


/* ===================================================
   STATE BEFORE POSITION LOCKS (1:1 CIRCULAR BADGES)
   =================================================== */

.video-channel-badge {
  min-height: 28px !important;
  align-items: center !important;
}

.video-channel-badge .channel-badge-icon,
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge .channel-badge-icon,
body.light .video-channel-badge .channel-badge-icon,
[data-theme="light"] .video-channel-badge .channel-badge-icon,
html.dark body .video-channel-badge .channel-badge-icon,
[data-theme="dark"] .video-channel-badge .channel-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  overflow: hidden !important;
}

.video-channel-badge .channel-badge-icon svg {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
  margin: auto !important;
}

/* Dark Theme */
html.dark body .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(250, 204, 21, 0.2) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.6) !important;
  color: #facc15 !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.35) !important;
}

html.dark body .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="dark"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #facc15 !important;
  fill: none !important;
}

/* Light Theme */
html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon,
body.light .video-channel-badge.channel-darawan .channel-badge-icon,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon {
  background: rgba(242, 219, 0, 0.22) !important;
  border: 1.5px solid rgba(242, 219, 0, 0.65) !important;
  color: #F2DB00 !important;
  box-shadow: 0 0 6px rgba(242, 219, 0, 0.3) !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-channel-badge.channel-darawan .channel-badge-icon svg,
body.light .video-channel-badge.channel-darawan .channel-badge-icon svg,
[data-theme="light"] .video-channel-badge.channel-darawan .channel-badge-icon svg {
  stroke: #F2DB00 !important;
  fill: none !important;
}


/* ===================================================
   LIGHT THEME VIDEO CARD OUTLINE STROKE
   =================================================== */

html:not(.dark):not([data-theme="dark"]) body .video-card,
body.light .video-card,
[data-theme="light"] .video-card {
  border: 1px solid rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-card:hover,
body.light .video-card:hover,
[data-theme="light"] .video-card:hover {
  border: 1px solid #000000 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}


/* ===================================================
   LIGHT THEME VIDEO CARD BACKGROUND & OUTLINE
   =================================================== */

/* Match video card background directly to website body background */
html:not(.dark):not([data-theme="dark"]) body .video-card,
body.light .video-card,
[data-theme="light"] .video-card {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html:not(.dark):not([data-theme="dark"]) body .video-card:hover,
body.light .video-card:hover,
[data-theme="light"] .video-card:hover {
  border-color: #000000 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

/* Ensure the body/details section inside the card also stays transparent */
html:not(.dark):not([data-theme="dark"]) body .video-card-body,
html:not(.dark):not([data-theme="dark"]) body .video-card-content,
body.light .video-card-body,
body.light .video-card-content,
[data-theme="light"] .video-card-body,
[data-theme="light"] .video-card-content {
  background: transparent !important;
  background-color: transparent !important;
}


/* ===================================================
   VISITORS COUNTER STYLING (MODERN PILL + GLOW)
   =================================================== */

/* Target common visitor counter classes and IDs */
#visitor-counter,
.visitor-counter,
.footer-visitors,
[class*="visitor"]:where(:not(.visitor-contact)),
[id*="visitor"]:where(:not(#visitor-contact)) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
  transition: all 0.25s ease !important;
}

/* Dark Theme: Soft dark-slate pill with emerald green pulse */
html.dark body #visitor-counter,
html.dark body .visitor-counter,
html.dark body [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="dark"] #visitor-counter,
[data-theme="dark"] .visitor-counter,
[data-theme="dark"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.15) !important;
}

/* Light Theme: Subtle neutral pill with defined emerald accent */
html:not(.dark):not([data-theme="dark"]) body #visitor-counter,
html:not(.dark):not([data-theme="dark"]) body .visitor-counter,
html:not(.dark):not([data-theme="dark"]) body [class*="visitor"]:where(:not(.visitor-contact)),
body.light #visitor-counter,
body.light .visitor-counter,
body.light [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="light"] #visitor-counter,
[data-theme="light"] .visitor-counter,
[data-theme="light"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #1e293b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Animated dot inside the visitor counter */
#visitor-counter::before,
.visitor-counter::before,
.footer-visitors::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  box-shadow: 0 0 6px #10b981 !important;
  animation: visitorPulse 2s infinite ease-in-out !important;
}

@keyframes visitorPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}


/* ===================================================
   VISITORS COUNTER STYLING (MINIMAL GLASS BADGE)
   =================================================== */

#visitor-counter,
.visitor-counter,
.footer-visitors,
[class*="visitor"]:where(:not(.visitor-contact)),
[id*="visitor"]:where(:not(#visitor-contact)) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
  transition: all 0.25s ease !important;
}

/* Remove default before dot */
#visitor-counter::before,
.visitor-counter::before,
.footer-visitors::before {
  display: none !important;
}

/* Dark Theme: Soft charcoal glass with subtle golden amber text */
html.dark body #visitor-counter,
html.dark body .visitor-counter,
html.dark body [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="dark"] #visitor-counter,
[data-theme="dark"] .visitor-counter,
[data-theme="dark"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(250, 204, 21, 0.25) !important;
  color: #facc15 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html.dark body #visitor-counter:hover,
html.dark body .visitor-counter:hover,
[data-theme="dark"] #visitor-counter:hover,
[data-theme="dark"] .visitor-counter:hover {
  border-color: rgba(250, 204, 21, 0.6) !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.2) !important;
}

/* Light Theme: Clean soft gray border with muted charcoal text */
html:not(.dark):not([data-theme="dark"]) body #visitor-counter,
html:not(.dark):not([data-theme="dark"]) body .visitor-counter,
html:not(.dark):not([data-theme="dark"]) body [class*="visitor"]:where(:not(.visitor-contact)),
body.light #visitor-counter,
body.light .visitor-counter,
body.light [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="light"] #visitor-counter,
[data-theme="light"] .visitor-counter,
[data-theme="light"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  color: #334155 !important;
}

html:not(.dark):not([data-theme="dark"]) body #visitor-counter:hover,
body.light #visitor-counter:hover,
[data-theme="light"] #visitor-counter:hover {
  border-color: rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}


/* ===================================================
   VISITORS COUNTER STYLING (HIGH-CONTRAST BOLD PILL)
   =================================================== */

#visitor-counter,
.visitor-counter,
.footer-visitors,
[class*="visitor"]:where(:not(.visitor-contact)),
[id*="visitor"]:where(:not(#visitor-contact)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-transform: uppercase !important;
  transition: all 0.25s ease !important;
}

/* Eye / Signal Icon representation */
#visitor-counter::before,
.visitor-counter::before,
.footer-visitors::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ---------------------------------------------------
   DARK THEME: Rich Slate with Cyber-Cyan Accent
   --------------------------------------------------- */
html.dark body #visitor-counter,
html.dark body .visitor-counter,
html.dark body [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="dark"] #visitor-counter,
[data-theme="dark"] .visitor-counter,
[data-theme="dark"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid #0284c7 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

html.dark body #visitor-counter::before,
html.dark body .visitor-counter::before,
html.dark body [class*="visitor"]:where(:not(.visitor-contact))::before,
[data-theme="dark"] #visitor-counter::before,
[data-theme="dark"] .visitor-counter::before,
[data-theme="dark"] [class*="visitor"]:where(:not(.visitor-contact))::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 8px #38bdf8 !important;
}

/* ---------------------------------------------------
   LIGHT THEME: Solid Dark Charcoal with Sharp White/Cyan Text
   --------------------------------------------------- */
html:not(.dark):not([data-theme="dark"]) body #visitor-counter,
html:not(.dark):not([data-theme="dark"]) body .visitor-counter,
html:not(.dark):not([data-theme="dark"]) body [class*="visitor"]:where(:not(.visitor-contact)),
body.light #visitor-counter,
body.light .visitor-counter,
body.light [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="light"] #visitor-counter,
[data-theme="light"] .visitor-counter,
[data-theme="light"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1.5px solid #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

html:not(.dark):not([data-theme="dark"]) body #visitor-counter::before,
html:not(.dark):not([data-theme="dark"]) body .visitor-counter::before,
html:not(.dark):not([data-theme="dark"]) body [class*="visitor"]:where(:not(.visitor-contact))::before,
body.light #visitor-counter::before,
body.light .visitor-counter::before,
body.light [class*="visitor"]:where(:not(.visitor-contact))::before,
[data-theme="light"] #visitor-counter::before,
[data-theme="light"] .visitor-counter::before,
[data-theme="light"] [class*="visitor"]:where(:not(.visitor-contact))::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 6px #38bdf8 !important;
}


/* ===================================================
   VISITORS COUNTER STYLING (RESTORED ORIGINAL STYLE)
   =================================================== */

#visitor-counter,
.visitor-counter,
.footer-visitors,
[class*="visitor"]:where(:not(.visitor-contact)),
[id*="visitor"]:where(:not(#visitor-contact)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  gap: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

/* Original cyan/teal dot with subtle glow */
#visitor-counter::before,
.visitor-counter::before,
.footer-visitors::before {
  content: "" !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background-color: #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.7) !important;
  flex-shrink: 0 !important;
}

/* Dark Theme: Soft dark-teal/slate backdrop with cyan border */
html.dark body #visitor-counter,
html.dark body .visitor-counter,
html.dark body [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="dark"] #visitor-counter,
[data-theme="dark"] .visitor-counter,
[data-theme="dark"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #e2e8f0 !important;
}

/* Light Theme: Clean readable pill matching the original look */
html:not(.dark):not([data-theme="dark"]) body #visitor-counter,
html:not(.dark):not([data-theme="dark"]) body .visitor-counter,
html:not(.dark):not([data-theme="dark"]) body [class*="visitor"]:where(:not(.visitor-contact)),
body.light #visitor-counter,
body.light .visitor-counter,
body.light [class*="visitor"]:where(:not(.visitor-contact)),
[data-theme="light"] #visitor-counter,
[data-theme="light"] .visitor-counter,
[data-theme="light"] [class*="visitor"]:where(:not(.visitor-contact)) {
  background: rgba(30, 41, 59, 0.08) !important;
  border: 1px solid rgba(14, 165, 233, 0.45) !important;
  color: #0f172a !important;
}


/* ===================================================
   VISITOR COUNTER RTL / DIRECTION FIX
   =================================================== */

/* Remove any nested inner duplicate pill or dot wrapper */
#visitor-counter > span:first-child:has(::before),
.visitor-counter > span:first-child:has(::before),
#visitor-counter .badge-dot-wrapper,
.visitor-counter .badge-dot-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* English / LTR mode: [Dot] Visitors 16 */
html[lang="en"] #visitor-counter,
html[dir="ltr"] #visitor-counter,
html[lang="en"] .visitor-counter,
html[dir="ltr"] .visitor-counter {
  flex-direction: row !important;
}

/* Kurdish / RTL mode: 16  ژمارەی سەردانکەران  [Dot] */
html[lang="ckb"] #visitor-counter,
html[dir="rtl"] #visitor-counter,
html[lang="ckb"] .visitor-counter,
html[dir="rtl"] .visitor-counter,
body.rtl #visitor-counter,
body.rtl .visitor-counter {
  direction: rtl !important;
  flex-direction: row !important;
}

/* Ensure the dot sits next to the Kurdish text on the right */
html[lang="ckb"] #visitor-counter::before,
html[dir="rtl"] #visitor-counter::before,
html[lang="ckb"] .visitor-counter::before,
html[dir="rtl"] .visitor-counter::before {
  order: -1 !important;
  margin-left: 6px !important;
  margin-right: 0 !important;
}


/* ===================================================
   KURDISH NRT FONT HIERARCHY
   Titles / Menus: Bold | Regular content: Normal
   =================================================== */

@font-face {
  font-family: 'NRT-Reg';
  src: local('NRT Reg'), local('NRT-Reg'), local('NRT Regular'),
       url('fonts/NRT-Reg.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Base text for Kurdish language: Regular */
html[lang="ckb"],
html[dir="rtl"],
body.rtl,
[lang="ckb"] body {
  font-family: 'NRT-Reg', 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 400;
}

/* Titles, Header navigation, Menus, Buttons, Headings: BOLD */
html[lang="ckb"] h1,
html[lang="ckb"] h2,
html[lang="ckb"] h3,
html[lang="ckb"] h4,
html[lang="ckb"] h5,
html[lang="ckb"] h6,
html[lang="ckb"] nav,
html[lang="ckb"] nav a,
html[lang="ckb"] .nav-link,
html[lang="ckb"] .menu-item,
html[lang="ckb"] header a,
html[lang="ckb"] .title,
html[lang="ckb"] [class*="title"],
html[lang="ckb"] .channel-value,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] nav,
html[dir="rtl"] nav a,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .menu-item,
html[dir="rtl"] header a,
html[dir="rtl"] .title,
html[dir="rtl"] [class*="title"],
html[dir="rtl"] .channel-value,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  font-family: 'NRT-Reg', 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 700 !important;
}

/* Paragraphs, descriptions, view counts, footer notes: REGULAR */
html[lang="ckb"] p,
html[lang="ckb"] span:not(.channel-value):not([class*="title"]),
html[lang="ckb"] small,
html[lang="ckb"] .views-badge,
html[lang="ckb"] #visitor-counter,
html[lang="ckb"] .footer,
html[dir="rtl"] p,
html[dir="rtl"] span:not(.channel-value):not([class*="title"]),
html[dir="rtl"] small,
html[dir="rtl"] .views-badge,
html[dir="rtl"] #visitor-counter,
html[dir="rtl"] .footer {
  font-family: 'NRT-Reg', 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 400 !important;
}


/* ===================================================
   PAGINATION SPACING FIX (COMPACT & CENTERED)
   =================================================== */

/* Container: Center-aligned, natural width, tight gap */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 28px auto !important;
  padding: 0 !important;
}

/* Individual buttons: Compact size, no auto-expansion */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}


/* ===================================================
   PAGINATION SPACING FIX (STRICT KURDISH RTL LAYOUT)
   =================================================== */

/* کانتینەری ژمارەی پەڕەکان: لە ناوەڕاست و بە بۆشایی کەم */
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
html[lang="ckb"] .video-pagination,
html[dir="rtl"] .video-pagination,
body.rtl .video-pagination,
html[lang="ckb"] #pagination,
html[dir="rtl"] #pagination,
body.rtl #pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  direction: rtl !important;
  gap: 5px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 30px auto !important;
  padding: 0 10px !important;
  overflow-x: auto !important;
}

/* دوگمەکانی ژمارە: قەبارەی دیاریکراو و یەکسان */
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a,
body.rtl .pagination button,
body.rtl .pagination a,
html[lang="ckb"] .video-pagination button,
html[lang="ckb"] .video-pagination a,
html[dir="rtl"] .video-pagination button,
html[dir="rtl"] .video-pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 0.82rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* ڕێکخستنی دەقی دوگمەکانی پێشوو و دواتر و سەرەتا و کۆتایی */
html[lang="ckb"] .pagination button:has-text,
html[dir="rtl"] .pagination button:has-text {
  min-width: 55px !important;
  padding: 0 12px !important;
}


/* ===================================================
   PAGINATION: MATCH ENGLISH BEHAVIOR IN KURDISH
   =================================================== */

/* کانتینەری سەرەکی لە هەردوو زماندا: تەواو لە ناوەڕاست بە شێوەی ئینگلیزی */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 26px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* دوگمەکانی ژمارە و دەقەکان: ڕێگری لە کشانی زیادە و دیاریکردنی بەرزی و پانی یەکسان */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* دوگمەکانی سەرەتا، پێشوو، دواتر، کۆتایی بۆ ئەوەی دەقەکەیان تێک نەچێت */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
html[lang="ckb"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]) {
  min-width: 50px !important;
  padding: 0 10px !important;
}


/* ===================================================
   PAGINATION: IDENTICAL ENGLISH & KURDISH LAYOUT
   =================================================== */

/* Container: Kill all scrollbars, exact gap, centered */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 28px auto !important;
  padding: 4px 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Hide scrollbar on WebKit */
.pagination::-webkit-scrollbar,
.video-pagination::-webkit-scrollbar,
#pagination::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Buttons: Exactly identical sizing and gap in both languages */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a,
body.rtl .pagination button,
body.rtl .pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Word buttons (First, Back, Next, Last / یەکەم, پێشوو, دواتر, کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  min-width: 52px !important;
  padding: 0 12px !important;
}


/* ===================================================
   PAGINATION ACTIVE OUTLINE & BUTTON WIDTH FIX
   =================================================== */

/* Give container vertical breathing room so top/bottom glow is visible */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  padding: 8px 6px !important;
  gap: 7px !important;
}

/* Base button rules: prevent border squishing */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  position: relative !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
}

/* 1. All text buttons (First, Back, Next, Last / یەکەم, پێشوو, دواتر, کۆتایی)
      Force exact identical width and height across all 4 buttons */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Standardize number buttons */
.pagination button[data-page],
.pagination a[data-page],
.pagination .page-num,
html[lang="ckb"] .pagination button[data-page],
html[dir="rtl"] .pagination button[data-page] {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. Active outline: Elevated z-index, complete 4-sided border and glow */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  z-index: 10 !important;
  border: 1.5px solid #facc15 !important;
  outline: none !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.45) !important;
}


/* ===================================================
   PERFECT KURDISH & ENGLISH PAGINATION ALIGNMENT
   =================================================== */

/* کانتینەری ژمارەی پەڕەکان: هەمیشە بە LTR بهێڵەرەوە تا وەک ئینگلیزی لە چەپەوە بۆ ڕاست بڕوات */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: inline-flex !important;
  flex-direction: row !important;
  direction: ltr !important; /* ناچارکردنی ڕیزبەندی چەپ بۆ ڕاست بۆ ئەوەی ژمارەکان تێک نەچن */
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 30px auto !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* دوگمە ئاساییەکان: قەبارەی تەواو یەکسان و خاوێن */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

/* دوگمەی دەقی وشەکان (First/Back/Next/Last یان یەکەم/پێشوو/دواتر/کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 40px !important;
  padding: 0 6px !important;
}

/* دوگمەی چالاک (Active Button): هەموو چوارچێوەکەی بە تەواوی دەرکەوێت و نەبڕدرێت */
.pagination button.active,
.pagination a.active,
.pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  z-index: 5 !important;
  border: 1.8px solid #facc15 !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.5) !important;
  outline: none !important;
  background-color: #27272a !important;
}

/* ===================================================
   VISITORS COUNTER: UNIFIED CAPSULE IN BOTH LANGUAGES
   =================================================== */

#visitor-counter,
.visitor-counter,
.footer-visitors,
[class*="visitor"]:where(:not(.visitor-contact)),
[id*="visitor"]:where(:not(#visitor-contact)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 12px !important;
  padding: 8px 24px !important;
  min-height: 42px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

/* لابردنی دووڕیان و کانتینەری ناوەکی ناڕێک */
#visitor-counter .badge-dot-wrapper,
.visitor-counter .badge-dot-wrapper,
#visitor-counter > span:has(span) {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* دۆخی کوردی: ژمارە و دەق و نیشاندەر بە یەک ئاراستەی جوان بن */
html[lang="ckb"] #visitor-counter,
html[dir="rtl"] #visitor-counter,
body.rtl #visitor-counter {
  direction: rtl !important;
}

/* دۆخی تاریک */
html.dark body #visitor-counter,
[data-theme="dark"] #visitor-counter {
  background: rgba(24, 24, 27, 0.8) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  color: #f4f4f5 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.15) !important;
}

/* دۆخی ڕووناک */
html:not(.dark):not([data-theme="dark"]) body #visitor-counter,
body.light #visitor-counter,
[data-theme="light"] #visitor-counter {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.5) !important;
  color: #09090b !important;
}


/* ===================================================
   DISABLE PAGINATION HOVER ZOOM
   =================================================== */

/* Prevent any scaling/resizing on hover for all pagination buttons */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  transform: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  transform: none !important;
  scale: none !important;
}


/* ===================================================
   RESTORED PAGINATION HOVER ZOOM EFFECT
   =================================================== */

.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  will-change: transform;
}

.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  transform: scale(1.08) !important;
  z-index: 12 !important;
}


/* ===================================================
   PERFECT KURDISH & ENGLISH PAGINATION ALIGNMENT
   =================================================== */

/* کانتینەری ژمارەی پەڕەکان: هەمیشە بە LTR بهێڵەرەوە تا وەک ئینگلیزی لە چەپەوە بۆ ڕاست بڕوات */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: inline-flex !important;
  flex-direction: row !important;
  direction: ltr !important; /* ناچارکردنی ڕیزبەندی چەپ بۆ ڕاست بۆ ئەوەی ژمارەکان تێک نەچن */
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 30px auto !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* دوگمە ئاساییەکان: قەبارەی تەواو یەکسان و خاوێن */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

/* دوگمەی دەقی وشەکان (First/Back/Next/Last یان یەکەم/پێشوو/دواتر/کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 40px !important;
  padding: 0 6px !important;
}

/* دوگمەی چالاک (Active Button): هەموو چوارچێوەکەی بە تەواوی دەرکەوێت و نەبڕدرێت */
.pagination button.active,
.pagination a.active,
.pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  z-index: 5 !important;
  border: 1.8px solid #facc15 !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.5) !important;
  outline: none !important;
  background-color: #27272a !important;
}

/* ===================================================
   VISITORS COUNTER: UNIFIED CAPSULE IN BOTH LANGUAGES
   =================================================== */

#visitor-counter,
.visitor-counter,
.footer-visitors,
[class*="visitor"]:where(:not(.visitor-contact)),
[id*="visitor"]:where(:not(#visitor-contact)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 12px !important;
  padding: 8px 24px !important;
  min-height: 42px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

/* لابردنی دووڕیان و کانتینەری ناوەکی ناڕێک */
#visitor-counter .badge-dot-wrapper,
.visitor-counter .badge-dot-wrapper,
#visitor-counter > span:has(span) {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* دۆخی کوردی: ژمارە و دەق و نیشاندەر بە یەک ئاراستەی جوان بن */
html[lang="ckb"] #visitor-counter,
html[dir="rtl"] #visitor-counter,
body.rtl #visitor-counter {
  direction: rtl !important;
}

/* دۆخی تاریک */
html.dark body #visitor-counter,
[data-theme="dark"] #visitor-counter {
  background: rgba(24, 24, 27, 0.8) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  color: #f4f4f5 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.15) !important;
}

/* دۆخی ڕووناک */
html:not(.dark):not([data-theme="dark"]) body #visitor-counter,
body.light #visitor-counter,
[data-theme="light"] #visitor-counter {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.5) !important;
  color: #09090b !important;
}


/* ===================================================
   IDENTICAL ENGLISH-KURDISH PAGINATION FOOTPRINT
   =================================================== */

/* Container footprint is 100% identical */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 30px auto !important;
  padding: 4px 0 !important;
  overflow: visible !important;
}

/* Base button geometry copied directly from English */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Text buttons: identical width across English and Kurdish labels */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 0 !important;
}


/* ===================================================
   PAGINATION HOVER OUTLINE STACKING FIX
   =================================================== */

/* 1. Ensure the container has extra vertical padding so the zoom/glow never cuts off top/bottom */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  padding: 12px 10px !important;
  overflow: visible !important;
}

/* 2. Position all pagination buttons relatively with an explicit default z-index */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
}

/* 3. When hovered in ANY language (English or Kurdish):
      - Elevate z-index to 99 so it renders on TOP of all sibling buttons
      - Force full 4-sided outline and glow without clipping */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 99 !important;
  transform: scale(1.1) !important;
  border: 1.8px solid #facc15 !important;
  outline: none !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.5) !important;
}

/* Keep active button styled underneath a hovered neighbor */
.pagination button.active,
.pagination a.active,
.pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  z-index: 5 !important;
}

/* If the active button itself is hovered, elevate it to top */
.pagination button.active:hover,
.pagination a.active:hover,
.pagination .active:hover,
html[lang="ckb"] .pagination .active:hover,
html[dir="rtl"] .pagination .active:hover {
  z-index: 100 !important;
}


/* ===================================================
   PAGINATION HOVER OUTLINE STACKING FIX (DEEP RESOLUTION)
   =================================================== */

/* 1. Prevent parent and pagination containers from clipping transformed buttons */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
.pagination-container,
#pagination-container {
  overflow: visible !important;
  clip-path: none !important;
  isolation: isolate !important;
  padding: 16px 10px !important;
  gap: 8px !important;
}

/* 2. Neutralize negative margins and set isolated button flow */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* 3. Force elevated layer when hovered so nothing can overlap or clip it */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border: 2px solid #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.65) !important;
  outline: none !important;
}

/* Keep selected active button below the currently hovered button */
.pagination button.active,
.pagination a.active,
.pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  z-index: 10 !important;
}

/* If the active button itself is hovered, lift it to the very top */
.pagination button.active:hover,
.pagination a.active:hover,
.pagination .active:hover,
html[lang="ckb"] .pagination .active:hover,
html[dir="rtl"] .pagination .active:hover {
  z-index: 10000 !important;
}


/* ===================================================
   PAGINATION PADDING & BREATHING ROOM FIX
   =================================================== */

/* Add generous vertical & horizontal breathing room around the container */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  padding: 20px 16px !important;
  margin: 20px auto !important;
  gap: 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Individual buttons: add explicit safe margin so zoom never collides */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  margin: 4px 2px !important;
  box-sizing: border-box !important;
}

/* On hover: ensure outline and shadow have full clearance */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.12) !important;
  outline: 2px solid #facc15 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.55) !important;
}


/* ===================================================
   PAGINATION COMPLETE ZOOM & STROKE DISPLAY
   =================================================== */

/* Container: Ensure full vertical clearance and prevent scroll/crop */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 12px !important;
  margin: 25px auto !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Base button properties */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  border-radius: 6px !important;
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border: 1.5px solid transparent !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  cursor: pointer !important;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1), 
              border-color 0.18s ease, 
              box-shadow 0.18s ease,
              background-color 0.18s ease !important;
  transform-origin: center center !important;
}

/* Navigation buttons (First, Back, Next, Last / یەکەم, پێشوو, دواتر, کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav {
  width: 64px !important;
  min-width: 64px !important;
  padding: 0 6px !important;
}

/* Active Page Indicator */
.pagination button.active,
.pagination a.active,
.pagination .active {
  background-color: #facc15 !important;
  color: #09090b !important;
  border-color: #facc15 !important;
  font-weight: 700 !important;
  z-index: 5 !important;
}

/* HOVER STATE: Smooth Zoom + Full Unclipped 4-Sided Stroke */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover {
  z-index: 999 !important;
  transform: scale(1.15) !important;
  border: 1.5px solid #facc15 !important;
  box-shadow: 0 0 0 1px #facc15, 0 0 12px rgba(250, 204, 21, 0.5) !important;
  background-color: #27272a !important;
  color: #ffffff !important;
}

/* If active button is hovered */
.pagination button.active:hover,
.pagination a.active:hover,
.pagination .active:hover {
  background-color: #facc15 !important;
  color: #09090b !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.7) !important;
}


/* ===================================================
   PAGINATION (RESTORED ORIGINAL BASELINE)
   =================================================== */

.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 25px auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  direction: rtl !important;
}

.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid #27272a !important;
  background-color: #18181b !important;
  color: #e4e4e7 !important;
  font-size: 0.85rem !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Active Button */
.pagination button.active,
.pagination a.active,
.pagination .active {
  background-color: #facc15 !important;
  color: #000000 !important;
  border-color: #facc15 !important;
  font-weight: 700 !important;
}

/* Static clean hover (no scaling, no layout shifting) */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover {
  background-color: #27272a !important;
  border-color: #3f3f46 !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ===================================================
   PAGINATION (EXACT RESTORED BASELINE)
   =================================================== */

.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 28px auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid #27272a !important;
  background-color: #18181b !important;
  color: #e4e4e7 !important;
  font-size: 0.85rem !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Active Page Indicator */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background-color: #facc15 !important;
  color: #000000 !important;
  border-color: #facc15 !important;
  font-weight: 700 !important;
}

/* Light Theme */
html:not(.dark):not([data-theme="dark"]) body .pagination button,
body.light .pagination button,
[data-theme="light"] .pagination button {
  background-color: transparent !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
}

html:not(.dark):not([data-theme="dark"]) body .pagination button.active,
body.light .pagination button.active,
[data-theme="light"] .pagination button.active {
  background-color: #facc15 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

/* Disable hover zooming */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover {
  transform: none !important;
  scale: none !important;
}


/* ===================================================
   MODERN PREMIUM PAGINATION DESIGN (DARK & LIGHT)
   =================================================== */

/* کانتینەری سەرەکی: پەڕاوێزی فراوان و نەرمی لە ناوەڕاست */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 12px 18px !important;
  background: rgba(18, 18, 20, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمە ژمارەکان: هاوچەرخ و کەمپەکت */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  border-radius: 9px !important;
  background: rgba(39, 39, 42, 0.65) !important;
  color: #d4d4d8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* دوگمەکانی نووسین (First, Back, Next, Last / یەکەم، پێشوو، دواتر، کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav {
  width: auto !important;
  min-width: 60px !important;
  padding: 0 12px !important;
  font-size: 0.82rem !important;
}

/* کاتی بردنەسەری ماوس (Hover): بەرزبوونەوەی نەرم بەبێ شێواندنی تەنیشتەکان */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover {
  z-index: 10 !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
  border-color: rgba(250, 204, 21, 0.8) !important;
  background: rgba(63, 63, 70, 0.8) !important;
  box-shadow: 0 6px 14px rgba(250, 204, 21, 0.25) !important;
}

/* دوگمەی پەڕەی چالاک (Active Page): درەوشاوەی تەواو */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #09090b !important;
  border: 1px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(250, 204, 21, 0.45) !important;
  z-index: 5 !important;
}

.pagination button.active:hover,
.pagination a.active:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(250, 204, 21, 0.6) !important;
}

/* پشتگیری دۆخی ڕووناک (Light Theme) */
html:not(.dark):not([data-theme="dark"]) body .pagination,
body.light .pagination,
[data-theme="light"] .pagination {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark):not([data-theme="dark"]) body .pagination button,
body.light .pagination button,
[data-theme="light"] .pagination button {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark):not([data-theme="dark"]) body .pagination button:hover,
body.light .pagination button:hover,
[data-theme="light"] .pagination button:hover {
  background: #e4e4e7 !important;
  border-color: #eab308 !important;
  box-shadow: 0 6px 14px rgba(234, 179, 8, 0.25) !important;
}


/* ===================================================
   FLAWLESS UNCLIPPED PAGINATION (ENGLISH & KURDISH)
   =================================================== */

/* 1. کانتینەری سەرەکی: پەڕاوێزی گەورەی سەرەوە و خوارەوە تا چوارچێوەکە نەبڕدرێت */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 36px auto !important;
  padding: 16px 22px !important; /* فەزای پێویست بۆ سەرەوە و خوارەوە */
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* 2. قەبارەی ڕێکوپێکی دوگمەکان */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.7) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}

/* دوگمە وشەکان: قەبارەی نەگۆڕ لە هەردوو زماندا */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: auto !important;
  min-width: 64px !important;
  padding: 0 12px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

/* 3. دوگمەی پەڕەی چالاک (Active Page): تەواوی چوارچێوە لە هەموو لایەکەوە بە ڕوونی دەبینرێت */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.5) !important;
  z-index: 10 !important;
}

/* 4. بردنەسەری ماوس (Hover): زوومی نەرم و چوارچێوەی تەواو بەبێ بڕانی سەر و خوار */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 99 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  background-color: #27272a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px #facc15, 0 0 14px rgba(250, 204, 21, 0.45) !important;
}

.pagination button.active:hover,
.pagination a.active:hover,
.pagination .active:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 0 0 1px #fde047, 0 0 20px rgba(250, 204, 21, 0.7) !important;
}

/* 5. دۆخی ڕووناک (Light Mode) */
html:not(.dark):not([data-theme="dark"]) body .pagination,
body.light .pagination,
[data-theme="light"] .pagination {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark):not([data-theme="dark"]) body .pagination button,
body.light .pagination button,
[data-theme="light"] .pagination button {
  background: #f4f4f5 !important;
  color: #18181b !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark):not([data-theme="dark"]) body .pagination button:hover,
body.light .pagination button:hover,
[data-theme="light"] .pagination button:hover {
  background: #ffffff !important;
  border-color: #eab308 !important;
  box-shadow: 0 0 0 1px #eab308, 0 4px 14px rgba(234, 179, 8, 0.3) !important;
}


/* ===================================================
   PAGINATION: 100% UNCLIPPED TOP, BOTTOM & SIDES
   =================================================== */

/* فراوانکردنی کانتینەر و زیادکردنی بەرزی بۆ ئەوەی سەر و خوار بە هیچ جۆرێک نەبڕدرێن */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important; /* زیادکردنی بۆشایی نێوان دوگمەکان تا لە چەپ و ڕاست بەیەکدا نەکەون */
  width: fit-content !important;
  max-width: 100% !important;
  margin: 35px auto !important;
  padding: 14px 24px !important; /* بەرزکردنەوەی پەڕاوێزی سەرەوە و خوارەوە */
  height: auto !important;
  min-height: 68px !important; /* زامنکردنی بەرزیی تەواو بۆ کانتینەرەکە */
  overflow: visible !important; /* ڕێگری لە هەر جۆرە بڕینێک */
  box-sizing: border-box !important;
  isolation: isolate !important;
}

/* دوگمەکانی ژمارە: دانانی قەبارەی ستاندارد و جێگیر */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  transform-origin: center center !important;
}

/* کاتی هاتنەسەر بە ماوس (Hover): بەرزکردنەوەی چینی چینبەندی و نیشاندانی چوارچێوەی ۳٦۰ پلە */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important; /* دەکەوێتە سەرووی هەموو دراوسێکانی */
  transform: scale(1.12) !important;
  border: 1.8px solid #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.6) !important;
}


/* ===================================================
   RESPONSIVE PAGINATION: FITTED TO VIDEO GRID & MOBILE
   =================================================== */

/* 1. کانتینەری سەرەکی لەسەر دێسکتۆپ: هاوتا لەگەڵ ڕیزی ڤیدیۆکان و کەوتنە ناوەڕاست */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  margin: 28px auto !important;
  padding: 12px 18px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمەکانی دێسکتۆپ */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: rgba(39, 39, 42, 0.7) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1),
              border-color 0.18s ease,
              box-shadow 0.18s ease !important;
}

/* دوگمەکانی وشە (First, Back, Next, Last / یەکەم، پێشوو، دواتر، کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: auto !important;
  min-width: 58px !important;
  padding: 0 10px !important;
  font-size: 0.8rem !important;
}

/* دوگمەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.45) !important;
  z-index: 5 !important;
}

/* Hover: چوارچێوەی تەواو بێ بڕین */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   2. گونجاندن لەگەڵ شاشەی مۆبایل و تابلێت (MOBILE VERSION)
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    max-width: 95% !important;
    gap: 5px !important;
    padding: 8px 10px !important;
    margin: 20px auto !important;
    overflow-x: auto !important; /* ڕێگەدان بە پەڕینەوەی دەستی نەرم لەسەر مۆبایل */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* شاردنەوەی سکرۆڵبار */
  }

  .pagination::-webkit-scrollbar {
    display: none !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.78rem !important;
    border-radius: 7px !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav {
    min-width: 44px !important;
    font-size: 0.72rem !important;
    padding: 0 6px !important;
  }
}

@media (max-width: 480px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    gap: 4px !important;
    padding: 6px 8px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 0.72rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]) {
    min-width: 38px !important;
    font-size: 0.68rem !important;
    padding: 0 4px !important;
  }
}


/* ===================================================
   PAGINATION: FIT VIDEO WIDTH & ZERO HORIZONTAL SCROLL
   =================================================== */

/* 1. کانتینەری سەرەکی: هاوتای تەواوی پانی ڕیزی ڤیدیۆکان (هێڵە سەوزەکە) */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;               /* هاوتا لەگەڵ پانی کانتینەری ڤیدیۆکان */
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 14px 16px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;          /* قەدەغەکردنی هەر جۆرە سکرۆڵێکی ئاسۆیی */
  overflow-x: visible !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

/* 2. دوگمەکانی دێسکتۆپ */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق (First/Back/Next/Last - یەکەم/پێشوو/دواتر/کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: auto !important;
  min-width: 60px !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
}

/* دوگمەی پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* بردنەسەری ماوس (Hover) بێ بڕینی سەر و خوار */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   3. تایبەت بە مۆبایل: هیچ جۆرە سکرۆڵێکی ئاسۆیی نابێت
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    width: 100% !important;
    gap: 4px !important;
    padding: 10px 6px !important;
    margin: 22px auto !important;
    overflow: visible !important;
    overflow-x: visible !important; /* قەدەغەکردنی سکرۆڵ لەسەر مۆبایل */
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a {
    flex: 1 1 0px !important;       /* هەموو دوگمەکان خۆیان ڕێکدەخەن لە یەک دێڕدا */
    width: auto !important;
    min-width: 22px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.76rem !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav {
    flex: 1.6 1 0px !important;
    min-width: 36px !important;
    max-width: 48px !important;
    font-size: 0.68rem !important;
    padding: 0 2px !important;
  }
}

@media (max-width: 480px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    gap: 2px !important;
    padding: 8px 4px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a {
    min-width: 18px !important;
    height: 29px !important;
    min-height: 29px !important;
    font-size: 0.7rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]) {
    min-width: 28px !important;
    font-size: 0.62rem !important;
  }
}


/* ===================================================
   PAGINATION: DESKTOP ROW & MOBILE TWO-ROW LAYOUT
   =================================================== */

/* 1. کانتینەری سەرەکی لەسەر دێسکتۆپ: هەمووی لە یەک دێڕدا و هاوتای پانی ڤیدیۆکان */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 14px 16px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمەکانی دێسکتۆپ */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق لەسەر دێسکتۆپ */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: auto !important;
  min-width: 60px !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
}

/* دوگمەی پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* Hover */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   2. مۆبایل: ژمارەکان لە سەرەوە و دوگمەکانی وشە لە خوارەوە
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;          /* ڕێگەدان بە دابەشبوون بۆ دوو دێڕ */
    gap: 10px 6px !important;
    padding: 14px 10px !important;
    overflow: visible !important;
    overflow-x: visible !important;
  }

  /* دێڕی سەرەوە: ژمارەکان دەچنە سەرەوە (order: 1) */
  .pagination button[data-page],
  .pagination a[data-page],
  .video-pagination button[data-page],
  .video-pagination a[data-page],
  .pagination button:not(.nav-btn):not(.page-btn-nav),
  .pagination a:not(.nav-btn):not(.page-btn-nav) {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
    border-radius: 7px !important;
  }

  /* دێڕی ژێرەوە: دوگمەکانی دەق دەچنە ژێرەوە (order: 2) */
  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important; /* هەر ٤ دوگمەکە بە یەکسانی دێڕی خوارەوە پڕ دەکەنەوە */
    min-width: 55px !important;
    max-width: 120px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.78rem !important;
    margin-top: 4px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 420px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    gap: 8px 4px !important;
    padding: 12px 6px !important;
  }

  .pagination button[data-page],
  .pagination a[data-page] {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 0.76rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]) {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.72rem !important;
  }
}


/* ===================================================
   PAGINATION: 100% IDENTICAL FOR ENGLISH & KURDISH
   =================================================== */

/* 1. کانتینەری سەرەکی لەسەر دێسکتۆپ */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important; /* هەردوو زمان لە چەپەوە بۆ ڕاست ڕێکدەخرێن */
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 14px 16px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمەکان لە هەردوو زمانی ئینگلیزی و کوردی */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق (First/Back/Next/Last و یەکەم/پێشوو/دواتر/کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: auto !important;
  min-width: 60px !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
}

/* دوگمەی پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* بردنەسەری ماوس (Hover) */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   2. مۆبایل: تەواو هاوشێوەی ئینگلیزی بۆ هەردوو زمان
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    direction: ltr !important; /* هێشتنەوەی هەمان ئاراستە بۆ ڕێکوپێکی دوو دێڕەکە */
    gap: 8px 5px !important;
    padding: 12px 8px !important;
    overflow: visible !important;
    overflow-x: visible !important;
  }

  /* ڕیزی سەرەوە: هەموو ژمارەکان لە چەپەوە بۆ ڕاست بە یەکسانی */
  .pagination button[data-page],
  .pagination a[data-page],
  .video-pagination button[data-page],
  .video-pagination a[data-page],
  .pagination button:not(.nav-btn):not(.page-btn-nav),
  .pagination a:not(.nav-btn):not(.page-btn-nav),
  html[lang="ckb"] .pagination button[data-page],
  html[lang="ckb"] .pagination a[data-page] {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
    border-radius: 7px !important;
  }

  /* ڕیزی خوارەوە: ٤ دوگمەی دەق (یەکەم، پێشوو، دواتر، کۆتایی) هاوشێوەی ئینگلیزی */
  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 120px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.78rem !important;
    margin-top: 4px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 420px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    gap: 6px 3px !important;
    padding: 10px 4px !important;
  }

  .pagination button[data-page],
  .pagination a[data-page],
  html[lang="ckb"] .pagination button[data-page] {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 0.76rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  html[lang="ckb"] .pagination button:not([data-page]) {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.72rem !important;
  }
}


/* ===================================================
   PAGINATION: STRICT TWO-ROW LAYOUT ON MOBILE
   =================================================== */

/* کانتینەری سەرەکی */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 14px 16px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمەکانی ژمارە لەسەر دێسکتۆپ */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق لەسەر دێسکتۆپ */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  width: auto !important;
  min-width: 60px !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
}

/* پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* ===================================================
   مۆبایل: دوگمەکانی دەق بە تەواوی دەکەونە ژێر ژمارەکان
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-content: center !important;
    row-gap: 12px !important;
    column-gap: 5px !important;
    padding: 14px 8px !important;
    direction: ltr !important;
  }

  /* 1. هەموو دوگمە ژمارەکان (سەرەوە: order 1) */
  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
    border-radius: 7px !important;
  }

  /* 2. دوگمەکانی دەقی کوردی و ئینگلیزی (خوارەوە: order 2) */
  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  .pagination [data-nav],
  .pagination [aria-label*="Next"],
  .pagination [aria-label*="Previous"],
  .pagination [aria-label*="First"],
  .pagination [aria-label*="Last"],
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important; /* هەر ٤ دوگمەکە بە یەکسانی ڕیزی خوارەوە پڕ دەکەنەوە */
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.76rem !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 420px) {
  .pagination button,
  .pagination a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    width: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
    height: 31px !important;
    font-size: 0.76rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]) {
    height: 32px !important;
    font-size: 0.7rem !important;
    min-width: 45px !important;
  }
}


/* ===================================================
   PAGINATION: FULL PC GRID FIT (ENGLISH & KURDISH)
   =================================================== */

/* 1. کانتینەری سەرەکی لەسەر کۆمپیوتەر: پانیی تەواو بە هاوتای چوار کارتی ڤیدیۆکان */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important; /* دابەشکردنی یەکسان بە تەواوی پانی چوار کارتەکە */
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 12px 18px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* 2. دوگمەکان لەسەر دێسکتۆپ: گەورەتر، خوێندەوارتر و بەستراو بە پانایی گشتی */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important; /* پڕکردنەوەی هاوسەنگی تەواوی هێڵەکە */
  max-width: 46px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق (First, Back, Next, Last / یەکەم، پێشوو، دواتر، کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  flex: 1.8 1 auto !important;
  max-width: 85px !important;
  min-width: 68px !important;
  padding: 0 10px !important;
  font-size: 0.84rem !important;
}

/* پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* بردنەسەری ماوس (Hover) بەبێ کڕان */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   3. وەشانی مۆبایل: دوگمەکانی دەق لە ژێر ژمارەکاندا
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 5px !important;
    padding: 14px 8px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
    border-radius: 7px !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.76rem !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   PAGINATION: 100% IDENTICAL FULL PC GRID (KU & EN)
   =================================================== */

/* کانتینەری سەرەکی: تەواوی پانی ٤ کارتی ڤیدیۆکان لە هەردوو زمانی کوردی و ئینگلیزی */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
html[lang="en"] .pagination,
html[dir="ltr"] .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important; /* هەردوو زمان لە چەپەوە بۆ ڕاست ڕێکدەخرێن */
  flex-wrap: nowrap !important;
  justify-content: space-between !important; /* دابەشکردنی یەکسانی دوگمەکان بە درێژایی هێڵەکە */
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 32px auto !important;
  padding: 12px 18px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمەکانی ژمارە لەسەر کۆمپیوتەر بۆ هەردوو زمانی کوردی و ئینگلیزی */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important; /* درێژبوونەوەی هاوسەنگ بە درێژایی پانییەکە */
  max-width: 48px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەقی کوردی (یەکەم، پێشوو، دواتر، کۆتایی) و ئینگلیزی (First, Back, Next, Last) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  flex: 1.8 1 auto !important;
  max-width: 88px !important;
  min-width: 68px !important;
  padding: 0 10px !important;
  font-size: 0.84rem !important;
}

/* دوگمەی پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* کاتی هاتنەسەر بە ماوس (Hover) بە چوارچێوەی ۳٦۰ پلە */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   مۆبایل: هەردوو زمانی کوردی و ئینگلیزی بە دوو دێڕ
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 5px !important;
    padding: 14px 8px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
    border-radius: 7px !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.76rem !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   PAGINATION: FORCED FULL PC GRID FOR KURDISH & ENGLISH
   =================================================== */

/* گرنگترین بەش: سەپاندنی پانی 100% بەسەر html[lang="ckb"] و هەموو دۆخە کوردییەکان */
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
body[dir="rtl"] .pagination,
.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 32px 0 !important;
  padding: 12px 18px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

/* دوگمەکانی ژمارە لەسەر کۆمپیوتەر بۆ زمانی کوردی و ئینگلیزی */
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a,
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  max-width: 48px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەقی کوردی (یەکەم، پێشوو، دواتر، کۆتایی) */
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]),
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav {
  flex: 1.8 1 auto !important;
  max-width: 88px !important;
  min-width: 68px !important;
  padding: 0 10px !important;
  font-size: 0.84rem !important;
}

/* دوگمەی پەڕەی چالاک */
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active,
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* بردنەسەری ماوس (Hover) */
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover,
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover {
  z-index: 9999 !important;
  transform: scale(1.1) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   مۆبایل بۆ هەردوو زمان
   =================================================== */

@media (max-width: 768px) {
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination,
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 5px !important;
    padding: 14px 8px !important;
  }

  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a,
  .pagination button,
  .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    font-size: 0.82rem !important;
  }

  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  .pagination button:not([data-page]),
  .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    font-size: 0.76rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   PAGINATION: 100% UNIFIED FULL WIDTH (KU & EN)
   =================================================== */

/* کانتینەری سەرەکی: پڕکردنەوەی تەواوی پانی ڕیزی چوار کارتەکە */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
html[lang="en"] .pagination,
html[dir="ltr"] .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 32px 0 !important;
  padding: 12px 16px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* دوگمەکانی ژمارە لەسەر کۆمپیوتەر: درێژبوونەوە بە یەکسانی بە درێژایی باڕەکە */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;            /* دابەشکردنی یەکسانی هەموو فەزاکە */
  width: auto !important;
  min-width: 38px !important;
  max-width: none !important;           /* لابردنی بەربەستی قەبارە */
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق (یەکەم، پێشوو، دواتر، کۆتایی / First, Back, Next, Last) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  flex: 1.8 1 0px !important;         /* بۆشاییەکی کەمێک فراوانتر بۆ وشەکان */
  min-width: 68px !important;
  max-width: none !important;
  padding: 0 10px !important;
  font-size: 0.84rem !important;
}

/* پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* بردنەسەری ماوس (Hover) */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.08) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   مۆبایل بۆ هەردوو زمانی کوردی و ئینگلیزی
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 5px !important;
    padding: 14px 8px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.76rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   PAGINATION: MAXIMUM FULL-WIDTH STRETCH (KU & EN)
   =================================================== */

.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: stretch !important;
  align-items: center !important;
  gap: 12px !important;                 /* زیادکردنی بۆشایی نێوان دوگمەکان تا هەموو باڕەکە بگرنەوە */
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  margin: 35px 0 !important;
  padding: 14px 20px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
}

/* هەموو دوگمە ژمارەکان دەبێت پانیی باڕەکە بە یەکسانی دابەش بکەن بەبێ هیچ سنوردارکردنێک */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;            /* دابەشکردنی یەکسانی ڕووبەرەکە */
  width: auto !important;
  min-width: 42px !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەقی کوردی و ئینگلیزی فراوانتر دەکرێن */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  flex: 2 1 0px !important;            /* وەرگرتنی ڕووبەری زیاتر بۆ وشەکان */
  min-width: 80px !important;
  max-width: 100% !important;
  font-size: 0.88rem !important;
  padding: 0 12px !important;
}

/* پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* کاتی هاتنەسەر بە ماوس (Hover) */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.08) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* مۆبایل */
@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 5px !important;
    padding: 14px 8px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    font-size: 0.82rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    font-size: 0.76rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   PAGINATION: ULTRA-WIDE GRID STRETCH (PC & MOBILE)
   =================================================== */

/* 1. کانتینەری سەرەکی: دابەشکردن بە شێوازی Grid لەسەر PC تا ۱۰۰٪ـی پانی پڕبکاتەوە */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: grid !important;
  grid-template-columns: 1.4fr 1.4fr repeat(10, 1fr) 1.4fr 1.4fr !important; /* هەر ١٤ دوگمەکە بە یەکسانی پانییەکە پڕ دەکەنەوە */
  gap: 12px !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  margin: 36px 0 !important;
  padding: 16px 20px !important;
  background: rgba(18, 18, 22, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  overflow: visible !important;
  direction: ltr !important;
}

/* 2. قەبارەی دوگمەکان: گەورە، فراوان و تەواو پڕکراوە */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;               /* پڕکردنەوەی تەواوی خانەی گریدەکە */
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;              /* بەرزییەکی باشتر و دیارتر */
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 1.05rem !important;        /* قەبارەی فۆنتی گەورەتر */
  font-weight: 700 !important;
  border-radius: 11px !important;
  background: rgba(39, 39, 42, 0.75) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* دوگمەکانی دەق (First/Back/Next/Last و یەکەم/پێشوو/دواتر/کۆتایی) */
.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav,
html[lang="ckb"] .pagination button:not([data-page]),
html[lang="ckb"] .pagination a:not([data-page]),
html[dir="rtl"] .pagination button:not([data-page]),
html[dir="rtl"] .pagination a:not([data-page]) {
  font-size: 0.9rem !important;
  padding: 0 6px !important;
}

/* پەڕەی چالاک */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active,
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border: 1.5px solid #fde047 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.5) !important;
  z-index: 5 !important;
}

/* Hover بێ بڕین */
.pagination button:hover,
.pagination a:hover,
.video-pagination button:hover,
.video-pagination a:hover,
[class*="pagination"] button:hover,
[class*="pagination"] a:hover,
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
html[dir="rtl"] .pagination button:hover,
html[dir="rtl"] .pagination a:hover {
  z-index: 9999 !important;
  transform: scale(1.06) !important;
  border-color: #facc15 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5) !important;
}

/* ===================================================
   3. دۆخی مۆبایل: دوو دێڕی ڕێکخراو
   =================================================== */

@media (max-width: 860px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 6px !important;
    padding: 14px 10px !important;
  }

  .pagination button,
  .pagination a,
  .video-pagination button,
  .video-pagination a,
  [class*="pagination"] button,
  [class*="pagination"] a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  .pagination button:not([data-page]),
  .pagination a:not([data-page]),
  .pagination .nav-btn,
  .pagination .page-btn-nav,
  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  html[dir="rtl"] .pagination button:not([data-page]),
  html[dir="rtl"] .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    font-size: 0.76rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   PAGINATION: HARD OVERRIDE ULTRA WIDE (KU & EN)
   =================================================== */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
div:has(> .pagination) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 36px 0 !important;
  padding: 14px 18px !important;
  background: rgba(18, 18, 22, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
}

.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: rgba(39, 39, 42, 0.8) !important;
  color: #f4f4f5 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.pagination button:not([data-page]),
.pagination a:not([data-page]),
.pagination .nav-btn,
.pagination .page-btn-nav {
  flex: 2 1 0px !important;
  font-size: 0.86rem !important;
}

.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #000000 !important;
  border-color: #fde047 !important;
  font-weight: 800 !important;
}


/* ===================================================
   DISTINCT COLORS: FIRST/LAST vs NEXT/BACK (EN & KU)
   =================================================== */

/* 1. Next & Back / دواتر & پێشوو (هەمان ڕەنگ) */
.pagination [data-nav="next"],
.pagination [data-nav="prev"],
.pagination [data-nav="back"],
.pagination .btn-next,
.pagination .btn-prev,
.pagination button:has-text("Next"),
.pagination button:has-text("Back"),
.pagination button:has-text("دواتر"),
.pagination button:has-text("پێشوو"),
[class*="pagination"] button[aria-label*="Next"],
[class*="pagination"] button[aria-label*="Previous"],
[class*="pagination"] button[aria-label*="Back"] {
  background: #27272a !important;
  color: #e4e4e7 !important;
  border: 1.5px solid #52525b !important;
}

.pagination [data-nav="next"]:hover,
.pagination [data-nav="prev"]:hover,
.pagination [data-nav="back"]:hover,
.pagination .btn-next:hover,
.pagination .btn-prev:hover {
  background: #3f3f46 !important;
  color: #ffffff !important;
  border-color: #a1a1aa !important;
  box-shadow: 0 0 12px rgba(161, 161, 170, 0.4) !important;
}

/* 2. First & Last / یەکەم & کۆتایی (هەمان ڕەنگی جیاواز) */
.pagination [data-nav="first"],
.pagination [data-nav="last"],
.pagination .btn-first,
.pagination .btn-last,
.pagination button:has-text("First"),
.pagination button:has-text("Last"),
.pagination button:has-text("یەکەم"),
.pagination button:has-text("کۆتایی"),
[class*="pagination"] button[aria-label*="First"],
[class*="pagination"] button[aria-label*="Last"] {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
}

.pagination [data-nav="first"]:hover,
.pagination [data-nav="last"]:hover,
.pagination .btn-first:hover,
.pagination .btn-last:hover {
  background: #1e293b !important;
  color: #7dd3fc !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
}


/* ===================================================
   NAV_COLORS: FIRST/LAST VS NEXT/BACK
   =================================================== */

/* First & Last (یەکەم و کۆتایی) - ڕەنگی شینی نیلی مۆدێرن */
.pagination button.btn-first-last,
.pagination button[data-action="first"],
.pagination button[data-action="last"],
.pagination button:first-child,
.pagination button:last-child {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid #0284c7 !important;
}

.pagination button.btn-first-last:hover,
.pagination button[data-action="first"]:hover,
.pagination button[data-action="last"]:hover,
.pagination button:first-child:hover,
.pagination button:last-child:hover {
  background: #1e293b !important;
  color: #7dd3fc !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45) !important;
}

/* Next & Back (دواتر و پێشوو) - ڕەنگی مۆر/ڕەساسی تۆخ و جیاواز */
.pagination button.btn-next-back,
.pagination button[data-action="next"],
.pagination button[data-action="back"],
.pagination button:nth-child(2),
.pagination button:nth-last-child(2) {
  background: #27272a !important;
  color: #fb923c !important; /* ڕەنگی پرتەقاڵی/برۆنزی دیار بۆ ئەوەی ڕوون جیا بێتەوە */
  border: 1.5px solid #ea580c !important;
}

.pagination button.btn-next-back:hover,
.pagination button[data-action="next"]:hover,
.pagination button[data-action="back"]:hover,
.pagination button:nth-child(2):hover,
.pagination button:nth-last-child(2):hover {
  background: #3f3f46 !important;
  color: #fdba74 !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.45) !important;
}


/* ===================================================
   PAGINATION: COMPLETELY REMOVED & HIDDEN
   =================================================== */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
.pagination-container,
#pagination-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}


/* ===================================================
   FLOATING STUDIO DOCK PAGINATION (PC & MOBILE)
   =================================================== */

/* کانتینەری سەرەکی: تەواوی پانی ٤ کارتەکە دەگرێت لە هەردوو زمانی ئینگلیزی و کوردی */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 35px 0 !important;
  padding: 14px 20px !important;
  background: linear-gradient(180deg, rgba(24, 24, 28, 0.92) 0%, rgba(14, 14, 16, 0.95) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(250, 204, 21, 0.22) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  overflow: visible !important;
}

/* بنەمای هەموو دوگمەکان */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 36px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  background: rgba(36, 36, 42, 0.75) !important;
  color: #e2e8f0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* دوگمەکانی First و Last (یەکەم و کۆتایی): شینباوی مۆدێرن */
.pagination button.nav-first,
.pagination button.nav-last,
.pagination button:first-child,
.pagination button:last-child {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.pagination button.nav-first:hover,
.pagination button.nav-last:hover,
.pagination button:first-child:hover,
.pagination button:last-child:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* دوگمەکانی Next و Back (دواتر و پێشوو): ماتی تاریک بە لێواری پڕشنگدار */
.pagination button.nav-next,
.pagination button.nav-back,
.pagination button:nth-child(2),
.pagination button:nth-last-child(2) {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  color: #cbd5e1 !important;
  border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
  font-size: 0.82rem !important;
}

.pagination button.nav-next:hover,
.pagination button.nav-back:hover,
.pagination button:nth-child(2):hover,
.pagination button:nth-last-child(2):hover {
  background: #334155 !important;
  color: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* ژمارەی پەڕەی چالاک (Active State): زێڕینی شاهانە */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #050505 !important;
  border: 1.5px solid #fef08a !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.55) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

/* Hover بۆ ژمارەکان */
.pagination button:hover,
.pagination a:hover {
  background: rgba(55, 65, 81, 0.9) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ===================================================
   وەشانی مۆبایل: دوو باڕی کەمپەکت و بێ کێشە
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 5px !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  /* ڕیزی ژمارەکان لە سەرەوە */
  .pagination button,
  .pagination a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 35px !important;
    min-height: 35px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
  }

  /* ڕیزی دوگمەکانی دەق لە خوارەوە */
  .pagination button.nav-first,
  .pagination button.nav-last,
  .pagination button.nav-next,
  .pagination button.nav-back,
  .pagination button:first-child,
  .pagination button:last-child,
  .pagination button:nth-child(2),
  .pagination button:nth-last-child(2) {
    order: 2 !important;
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.74rem !important;
    margin-top: 4px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 420px) {
  .pagination button,
  .pagination a {
    width: 28px !important;
    min-width: 28px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.75rem !important;
  }
}


/* ===================================================
   CYBER-GLASS MINIMAL PAGINATION (KU & EN)
   =================================================== */

/* کانتینەری سەرەکی: تەواوی پانی ٤ کارتەکە دەگرێت بە شێوازی شووشەیی مۆدێرن */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 34px 0 !important;
  padding: 12px 16px !important;
  background: rgba(15, 15, 18, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 2px solid #eab308 !important; /* هێڵی شیکی زێڕین لە سەرەوە */
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6) !important;
  overflow: visible !important;
}

/* دوگمەکانی ژمارە: شێوازی کپسولی باریک و خاوێن */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 34px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important; /* شێوەی کپسولی تەواو خڕ */
  background: rgba(255, 255, 255, 0.04) !important;
  color: #a1a1aa !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transition: all 0.2s ease !important;
}

/* دوگمەی پەڕەی چالاک: زێڕینی تەواو پڕشنگدار */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: #facc15 !important;
  color: #000000 !important;
  border: 1px solid #fef08a !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.6) !important;
}

/* کاتی هاتنەسەر بە ماوس (Hover) */
.pagination button:hover,
.pagination a:hover {
  background: rgba(250, 204, 21, 0.15) !important;
  color: #facc15 !important;
  border-color: #facc15 !important;
}

/* دوگمەکانی First و Last (یەکەم و کۆتایی) - ڕەنگی شینی نیۆن */
.pagination button.nav-first,
.pagination button.nav-last,
.pagination button:first-child,
.pagination button:last-child {
  flex: 1.6 1 0px !important;
  min-width: 60px !important;
  background: rgba(56, 189, 248, 0.08) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  font-size: 0.82rem !important;
  border-radius: 10px !important;
}

.pagination button.nav-first:hover,
.pagination button.nav-last:hover,
.pagination button:first-child:hover,
.pagination button:last-child:hover {
  background: #38bdf8 !important;
  color: #000000 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
}

/* دوگمەکانی Next و Back (دواتر و پێشوو) - ڕەنگی پەمەیی/سوورباوی نیۆن */
.pagination button.nav-next,
.pagination button.nav-back,
.pagination button:nth-child(2),
.pagination button:nth-last-child(2) {
  flex: 1.6 1 0px !important;
  min-width: 60px !important;
  background: rgba(244, 63, 94, 0.08) !important;
  color: #f43f5e !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
  font-size: 0.82rem !important;
  border-radius: 10px !important;
}

.pagination button.nav-next:hover,
.pagination button.nav-back:hover,
.pagination button:nth-child(2):hover,
.pagination button:nth-last-child(2):hover {
  background: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.5) !important;
}

/* ===================================================
   وەشانی مۆبایل: دابەشکردنی دوو ڕیزی خاوێن
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 4px !important;
    padding: 12px 8px !important;
  }

  /* ڕیزی ژمارەکان لە سەرەوە */
  .pagination button,
  .pagination a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.82rem !important;
  }

  /* ڕیزی دەقەکان لە خوارەوە */
  .pagination button.nav-first,
  .pagination button.nav-last,
  .pagination button.nav-next,
  .pagination button.nav-back,
  .pagination button:first-child,
  .pagination button:last-child,
  .pagination button:nth-child(2),
  .pagination button:nth-last-child(2) {
    order: 2 !important;
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 50px !important;
    max-width: 90px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.72rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   NO-BACKGROUND CLICKABLE PAGINATION (KU & EN)
   =================================================== */

/* کانتینەری سەرەکی: تەواو بێ باکگراوند و بێ چوارچێوە */
.pagination,
.video-pagination,
#pagination,
[class*="pagination"],
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  direction: ltr !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 32px 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;       /* هیچ باکگراوندێک نییە */
  background-color: transparent !important;
  border: none !important;                 /* هیچ چوارچێوەیەک نییە */
  box-shadow: none !important;             /* هیچ سێبەرێک نییە */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* دوگمەکانی ژمارە: تەواو کارا بۆ کلیک و دیار */
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a,
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 36px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: rgba(36, 36, 42, 0.85) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;             /* نیشاندەری پەنجەی ماوس بۆ کلیک */
  pointer-events: auto !important;        /* زامنکردنی وەرگرتنی کلیک */
  z-index: 10 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: all 0.18s ease !important;
}

/* پەڕەی چالاک (Active Page) */
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: #facc15 !important;
  color: #000000 !important;
  border-color: #fde047 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.55) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* کاتی هاتنەسەر (Hover) */
.pagination button:hover,
.pagination a:hover {
  background: rgba(63, 63, 70, 0.95) !important;
  color: #facc15 !important;
  border-color: #facc15 !important;
  transform: translateY(-2px) !important;
}

/* دوگمەکانی First و Last (یەکەم و کۆتایی) - شینباو */
.pagination button.nav-first,
.pagination button.nav-last,
.pagination button:first-child,
.pagination button:last-child {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  font-size: 0.84rem !important;
}

.pagination button.nav-first:hover,
.pagination button.nav-last:hover,
.pagination button:first-child:hover,
.pagination button:last-child:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
}

/* دوگمەکانی Next و Back (دواتر و پێشوو) - پرتەقاڵی/مات */
.pagination button.nav-next,
.pagination button.nav-back,
.pagination button:nth-child(2),
.pagination button:nth-last-child(2) {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: #27272a !important;
  color: #fb923c !important;
  border: 1.5px solid rgba(251, 146, 60, 0.4) !important;
  font-size: 0.84rem !important;
}

.pagination button.nav-next:hover,
.pagination button.nav-back:hover,
.pagination button:nth-child(2):hover,
.pagination button:nth-last-child(2):hover {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.5) !important;
}

/* ===================================================
   مۆبایل: دوو دێڕی تەواو بێ باکگراوند
   =================================================== */

@media (max-width: 768px) {
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"],
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 5px !important;
    padding: 10px 0 !important;
  }

  .pagination button,
  .pagination a,
  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 35px !important;
    min-height: 35px !important;
    font-size: 0.84rem !important;
  }

  .pagination button.nav-first,
  .pagination button.nav-last,
  .pagination button.nav-next,
  .pagination button.nav-back,
  .pagination button:first-child,
  .pagination button:last-child,
  .pagination button:nth-child(2),
  .pagination button:nth-last-child(2) {
    order: 2 !important;
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.74rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   NO-BACKGROUND CLICKABLE PAGINATION: 100% KU & EN MATCH
   =================================================== */

/* کانتینەر لە هەردوو زمانی ئینگلیزی و کوردی لەسەر PC بە تەواوی پانی ٤ کارتەکە دەگرێت بێ باکگراوند */
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
html[lang="en"] .pagination,
html[dir="ltr"] .pagination,
.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  direction: ltr !important; /* هەردوو زمان بە هەمان ئاراستەی هاوتا لە چەپەوە بۆ ڕاست ڕێکدەخرێن */
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 32px 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* دوگمەکانی ژمارە لەسەر PC بۆ زمانی کوردی و ئینگلیزی */
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a,
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 36px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: rgba(36, 36, 42, 0.85) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: all 0.18s ease !important;
}

/* دوگمەی پەڕەی چالاک */
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active,
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: #facc15 !important;
  color: #000000 !important;
  border-color: #fde047 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.55) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hover لەسەر دوگمەکان */
html[lang="ckb"] .pagination button:hover,
html[lang="ckb"] .pagination a:hover,
.pagination button:hover,
.pagination a:hover {
  background: rgba(63, 63, 70, 0.95) !important;
  color: #facc15 !important;
  border-color: #facc15 !important;
  transform: translateY(-2px) !important;
}

/* دوگمەکانی First و Last (یەکەم و کۆتایی) - شینباوی مۆدێرن */
html[lang="ckb"] .pagination button.nav-first,
html[lang="ckb"] .pagination button.nav-last,
html[lang="ckb"] .pagination button:first-child,
html[lang="ckb"] .pagination button:last-child,
.pagination button.nav-first,
.pagination button.nav-last,
.pagination button:first-child,
.pagination button:last-child {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  font-size: 0.84rem !important;
}

html[lang="ckb"] .pagination button.nav-first:hover,
html[lang="ckb"] .pagination button.nav-last:hover,
html[lang="ckb"] .pagination button:first-child:hover,
html[lang="ckb"] .pagination button:last-child:hover,
.pagination button.nav-first:hover,
.pagination button.nav-last:hover,
.pagination button:first-child:hover,
.pagination button:last-child:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
}

/* دوگمەکانی Next و Back (دواتر و پێشوو) - پرتەقاڵی مات */
html[lang="ckb"] .pagination button.nav-next,
html[lang="ckb"] .pagination button.nav-back,
html[lang="ckb"] .pagination button:nth-child(2),
html[lang="ckb"] .pagination button:nth-last-child(2),
.pagination button.nav-next,
.pagination button.nav-back,
.pagination button:nth-child(2),
.pagination button:nth-last-child(2) {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: #27272a !important;
  color: #fb923c !important;
  border: 1.5px solid rgba(251, 146, 60, 0.4) !important;
  font-size: 0.84rem !important;
}

html[lang="ckb"] .pagination button.nav-next:hover,
html[lang="ckb"] .pagination button.nav-back:hover,
html[lang="ckb"] .pagination button:nth-child(2):hover,
html[lang="ckb"] .pagination button:nth-last-child(2):hover,
.pagination button.nav-next:hover,
.pagination button.nav-back:hover,
.pagination button:nth-child(2):hover,
.pagination button:nth-last-child(2):hover {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.5) !important;
}

/* ===================================================
   مۆبایل بۆ کوردی و ئینگلیزی: دوو دێڕی ڕێک
   =================================================== */

@media (max-width: 768px) {
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination,
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 5px !important;
    padding: 10px 0 !important;
  }

  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a,
  .pagination button,
  .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 35px !important;
    min-height: 35px !important;
    font-size: 0.84rem !important;
  }

  html[lang="ckb"] .pagination button.nav-first,
  html[lang="ckb"] .pagination button.nav-last,
  html[lang="ckb"] .pagination button.nav-next,
  html[lang="ckb"] .pagination button.nav-back,
  html[lang="ckb"] .pagination button:first-child,
  html[lang="ckb"] .pagination button:last-child,
  html[lang="ckb"] .pagination button:nth-child(2),
  html[lang="ckb"] .pagination button:nth-last-child(2),
  .pagination button.nav-first,
  .pagination button.nav-last,
  .pagination button.nav-next,
  .pagination button.nav-back,
  .pagination button:first-child,
  .pagination button:last-child,
  .pagination button:nth-child(2),
  .pagination button:nth-last-child(2) {
    order: 2 !important;
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.74rem !important;
    margin-top: 4px !important;
  }
}


/* ===================================================
   FORCE VISIBILITY: 100% UNIFIED (KURDISH & ENGLISH)
   =================================================== */

/* گرنگترین خاڵ: بە هیچ جۆرێک لە زمانی کوردیدا ناشاردرێتەوە */
html[lang="ckb"] .pagination,
html[dir="rtl"] .pagination,
body.rtl .pagination,
body[dir="rtl"] .pagination,
.pagination,
.video-pagination,
#pagination,
[class*="pagination"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 44px !important;
  flex-direction: row !important;
  direction: ltr !important; /* هەمیشە LTR بۆ هەردوو زمان تا لە یەک دێڕدا بمێننەوە */
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 32px 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* دوگمەکان لە هەردوو زمانی کوردی و ئینگلیزی */
html[lang="ckb"] .pagination button,
html[lang="ckb"] .pagination a,
html[dir="rtl"] .pagination button,
html[dir="rtl"] .pagination a,
.pagination button,
.pagination a,
.video-pagination button,
.video-pagination a,
[class*="pagination"] button,
[class*="pagination"] a {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 36px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: rgba(36, 36, 42, 0.85) !important;
  color: #e4e4e7 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  transition: all 0.18s ease !important;
}

/* پەڕەی چالاک */
html[lang="ckb"] .pagination .active,
html[dir="rtl"] .pagination .active,
.pagination button.active,
.pagination a.active,
.pagination .active,
.video-pagination .active {
  background: #facc15 !important;
  color: #000000 !important;
  border-color: #fde047 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.55) !important;
}

/* دوگمەکانی First و Last (یەکەم و کۆتایی) */
html[lang="ckb"] .pagination button.nav-first,
html[lang="ckb"] .pagination button.nav-last,
html[lang="ckb"] .pagination button:first-child,
html[lang="ckb"] .pagination button:last-child,
.pagination button.nav-first,
.pagination button.nav-last,
.pagination button:first-child,
.pagination button:last-child {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  font-size: 0.84rem !important;
}

/* دوگمەکانی Next و Back (دواتر و پێشوو) */
html[lang="ckb"] .pagination button.nav-next,
html[lang="ckb"] .pagination button.nav-back,
html[lang="ckb"] .pagination button:nth-child(2),
html[lang="ckb"] .pagination button:nth-last-child(2),
.pagination button.nav-next,
.pagination button.nav-back,
.pagination button:nth-child(2),
.pagination button:nth-last-child(2) {
  flex: 1.8 1 0px !important;
  min-width: 65px !important;
  background: #27272a !important;
  color: #fb923c !important;
  border: 1.5px solid rgba(251, 146, 60, 0.4) !important;
  font-size: 0.84rem !important;
}

/* مۆبایل */
@media (max-width: 768px) {
  html[lang="ckb"] .pagination,
  html[dir="rtl"] .pagination,
  body.rtl .pagination,
  .pagination,
  .video-pagination,
  #pagination,
  [class*="pagination"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 5px !important;
    padding: 10px 0 !important;
  }

  html[lang="ckb"] .pagination button,
  html[lang="ckb"] .pagination a,
  .pagination button,
  .pagination a {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 35px !important;
    font-size: 0.84rem !important;
  }

  html[lang="ckb"] .pagination button:not([data-page]),
  html[lang="ckb"] .pagination a:not([data-page]),
  .pagination button:not([data-page]),
  .pagination a:not([data-page]) {
    order: 2 !important;
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 55px !important;
    max-width: 100px !important;
    height: 34px !important;
    font-size: 0.74rem !important;
    margin-top: 4px !important;
  }
}

/* Kurdish pagination order only */
html[lang="ckb"] .video-pagination {
  direction: ltr !important;
}

html[lang="ckb"] .video-pagination .page-nav-text {
  direction: rtl;
  unicode-bidi: isolate;
}

/* KURDISH PAGINATION MATCHES ENGLISH */
html[lang="ckb"] body .video-pagination {
  display: flex !important;
  direction: ltr !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 32px 0 !important;
  padding: 8px 0 !important;
  overflow: visible !important;
}

html[lang="ckb"] body .video-pagination > button {
  order: 0 !important;
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 36px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
}

html[lang="ckb"] body .video-pagination > .page-nav-text {
  direction: rtl !important;
  unicode-bidi: isolate;
}

@media (max-width: 800px) {
  html[lang="ckb"] body .video-pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    margin: 16px auto !important;
  }

  html[lang="ckb"] body .video-pagination > button {
    flex: 0 0 auto !important;
    min-width: 40px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
}

/* MOBILE PAGINATION: SEVEN BUTTONS PER ROW */
@media (max-width: 700px) {
  html[lang="ckb"] body .video-pagination,
  html[lang="en"] body .video-pagination {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    direction: ltr !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 0 !important;
  }

  html[lang="ckb"] body .video-pagination > button,
  html[lang="en"] body .video-pagination > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 2px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  html[lang="ckb"] body .video-pagination > .page-nav-text {
    direction: rtl !important;
    font-size: 10px !important;
  }
}

/* MATCHED PAGINATION NAV COLORS */
html body .video-pagination > button.page-nav-text:is(:first-child, :last-child) {
  background: #123b48 !important;
  background-color: #123b48 !important;
  color: #9ae9f1 !important;
  border: 1px solid #3894a5 !important;
}

html body .video-pagination > button.page-nav-text:is(:nth-child(2), :nth-last-child(2)) {
  background: #35284e !important;
  background-color: #35284e !important;
  color: #e0c8ff !important;
  border: 1px solid #8064ae !important;
}

html body .video-pagination > button.page-nav-text:is(:first-child, :last-child):hover:not(:disabled) {
  background: #1b5667 !important;
  background-color: #1b5667 !important;
  color: #ffffff !important;
}

html body .video-pagination > button.page-nav-text:is(:nth-child(2), :nth-last-child(2)):hover:not(:disabled) {
  background: #503b73 !important;
  background-color: #503b73 !important;
  color: #ffffff !important;
}

/* KURDISH FOOTER THREE POSITIONS */
html[lang="ckb"] body footer.wrap {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 16px !important;
  direction: ltr !important;
}

html[lang="ckb"] body footer.wrap > .footer-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  white-space: nowrap !important;
}

html[lang="ckb"] body footer.wrap > .visitor-counter {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
}

html[lang="ckb"] body footer.wrap > p:not(.visitor-counter) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html[lang="ckb"] body footer.wrap > .site-preferences {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}

@media (max-width: 700px) {
  html[lang="ckb"] body footer.wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    row-gap: 18px !important;
  }

  html[lang="ckb"] body footer.wrap > .visitor-counter {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
  }

  html[lang="ckb"] body footer.wrap > .footer-name {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 11px !important;
  }

  html[lang="ckb"] body footer.wrap > p:not(.visitor-counter) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 11px !important;
  }

  html[lang="ckb"] body footer.wrap > .site-preferences {
    grid-row: 3 !important;
  }
}

/* ENGLISH FOOTER THREE POSITIONS */
html[lang="en"] body footer.wrap {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 16px !important;
  direction: ltr !important;
}

html[lang="en"] body footer.wrap > .footer-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  white-space: nowrap !important;
}

html[lang="en"] body footer.wrap > .visitor-counter {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
}

html[lang="en"] body footer.wrap > p:not(.visitor-counter) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  margin: 0 !important;
  direction: ltr !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html[lang="en"] body footer.wrap > .site-preferences {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
}

@media (max-width: 700px) {
  html[lang="en"] body footer.wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    row-gap: 18px !important;
  }

  html[lang="en"] body footer.wrap > .visitor-counter {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
  }

  html[lang="en"] body footer.wrap > .footer-name {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 11px !important;
  }

  html[lang="en"] body footer.wrap > p:not(.visitor-counter) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 11px !important;
  }

  html[lang="en"] body footer.wrap > .site-preferences {
    grid-row: 3 !important;
  }
}




/* MOBILE FOOTER: SCALE PC VISITOR PILL */
@media (max-width: 700px) {
  html[lang="ckb"] body footer.wrap,
  html[lang="en"] body footer.wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 4px !important;
    direction: ltr !important;
  }

  html[lang="ckb"] body footer.wrap > .footer-name,
  html[lang="en"] body footer.wrap > .footer-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    font-size: 10px !important;
    white-space: normal !important;
  }

  html[lang="ckb"] body footer.wrap > .visitor-counter,
  html[lang="en"] body footer.wrap > .visitor-counter {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    display: inline-flex !important;
    flex-direction: row !important;
    width: fit-content !important;
    max-width: none !important;
    margin: 0 !important;
    zoom: 0.45;
  }

  html[lang="ckb"] body footer.wrap > p:not(.visitor-counter),
  html[lang="en"] body footer.wrap > p:not(.visitor-counter) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  html[lang="ckb"] body footer.wrap > .site-preferences,
  html[lang="en"] body footer.wrap > .site-preferences {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
  }
}

@media (max-width: 360px) {
  html[lang="ckb"] body footer.wrap > .visitor-counter,
  html[lang="en"] body footer.wrap > .visitor-counter {
    zoom: 0.36;
  }
}


/* HOME BADGES MATCH VIDEO CARDS */
.home-slider .slide-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}

/* BEGIN MOBILE FOOTER FULL VISITOR */

@media (max-width: 700px) {
  html[lang="ckb"] body footer.wrap,
  html[lang="en"] body footer.wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
    direction: ltr !important;
  }

  html[lang="ckb"] body footer.wrap > .footer-name,
  html[lang="en"] body footer.wrap > .footer-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    font-size: 12px !important;
    white-space: normal !important;
  }

  html[lang="ckb"] body footer.wrap > p:not(.visitor-counter),
  html[lang="en"] body footer.wrap > p:not(.visitor-counter) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 12px !important;
    text-align: right !important;
    white-space: normal !important;
  }

  html[lang="ckb"] body footer.wrap > .visitor-counter,
  html[lang="en"] body footer.wrap > .visitor-counter {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    zoom: 1 !important;
  }

  html[lang="ckb"] body footer.wrap > .site-preferences,
  html[lang="en"] body footer.wrap > .site-preferences {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
  }
}

/* END MOBILE FOOTER FULL VISITOR */

/* BEGIN MOBILE WELCOME TEXT FIX */
@media (max-width: 700px) {
  html[lang="ckb"] body .home-showcase [data-i18n="homeWelcomeLabel"] {
    display: inline-block !important;
    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: auto !important;
    padding: 7px 18px !important;
    font-size: 15px !important;
    line-height: 2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html[lang="en"] body .home-showcase [data-i18n="homeWelcome"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    font-size: clamp(12px, 3.55vw, 17px) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }
}
/* END MOBILE WELCOME TEXT FIX */

/* BEGIN NRT WEB FONTS */
@font-face {
  font-family: 'NRT Web';
  src: url('fonts/NRT-Reg.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'NRT Web';
  src: url('fonts/NRT-Bd.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Apply the same downloadable fonts on desktop and mobile. */
html[lang="ckb"] body,
html[lang="ckb"] body :is(p, a, button, label, input, textarea, select, option, span, strong, b, em, small, li, dt, dd, div, section, article, h1, h2, h3, h4, h5, h6):not([dir="ltr"]):not(.footer-name) {
  font-family: 'NRT Web', Tahoma, sans-serif !important;
}

/* Headings and titles use the actual Bold font file. */
html[lang="ckb"] body :is(h1, h2, h3, h4, h5, h6, nav a, button, .title, [class*="title"], .video-card-title) {
  font-family: 'NRT Web', Tahoma, sans-serif !important;
  font-weight: 700 !important;
}

/* Keep Latin branding and deliberately left-to-right text unchanged. */
html[lang="ckb"] body :is([dir="ltr"], [dir="ltr"] *, .footer-name, .footer-name *) {
  font-family: 'Space Grotesk', Arial, sans-serif !important;
}

/* Kurdish letterforms join correctly at narrow viewport widths. */
html[lang="ckb"] body :is(h1, h2, h3, h4, h5, h6, p, .eyebrow, .video-card-title) {
  letter-spacing: 0 !important;
}
/* END NRT WEB FONTS */


/* BEGIN BOLD MENU TEXT */
html[lang="ckb"] body header.header nav a span[data-i18n],
html[lang="ckb"] body #site-menu-drawer nav a span[data-i18n],
html[lang="ckb"] body .side-menu nav a span[data-i18n] {
  font-family: 'NRT Web', Tahoma, sans-serif !important;
  font-weight: 700 !important;
}
html[lang="en"] body header.header nav a span[data-i18n],
html[lang="en"] body #site-menu-drawer nav a span[data-i18n],
html[lang="en"] body .side-menu nav a span[data-i18n] {
  font-weight: 700 !important;
}
/* END BOLD MENU TEXT */


/* BEGIN NRT BOTH LANGUAGES */
@font-face {
  font-family: 'NRT Kurdish Script';
  src: url('fonts/NRT-Reg.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'NRT Kurdish Script';
  src: url('fonts/NRT-Bd.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF;
}
html[lang="en"] body,
html[lang="en"] body :is(p, a, button, label, input, textarea,
  select, option, span, strong, b, em, small, li, div, section,
  article, h1, h2, h3, h4, h5, h6):not(.menu-icon) {
  font-family: 'NRT Kurdish Script', 'Space Grotesk',
               'Noto Sans Arabic', sans-serif !important;
}
/* END NRT BOTH LANGUAGES */


/* BEGIN LIGHT SOCIAL TEXT FIX */
html[data-theme="light"] body #socials a .myc-title,
html[data-theme="light"] body #socials a .card-title,
html[data-theme="light"] body #socials a .social-card-title,
html[data-theme="light"] body #socials a .box-title {
  color: #17212c !important;
  -webkit-text-fill-color: #17212c !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}
/* END LIGHT SOCIAL TEXT FIX */

/* DARAWAN HOME SLIDESHOW LAYOUT V3 START */

/* Compact title bar at the bottom, away from faces and artwork text. */
html body #home-slider .slide-caption {
  position: absolute !important;
  inset: auto 18px 18px 18px !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 10px 14px !important;
  width: auto !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 14px !important;
  background: rgba(10,12,15,.78) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.36) !important;
  backdrop-filter: blur(13px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(13px) saturate(135%) !important;
  direction: ltr !important;
}

html body #home-slider #slide-position {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 62px !important;
  min-height: 34px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  white-space: nowrap !important;
}

html body #home-slider #slide-title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: start !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.75) !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: clip !important;
}

/* Fixed metadata group: always the same size and always on the physical right. */
html body #home-slider .slide-caption .slide-meta-row {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  flex: 0 0 226px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 226px !important;
  min-width: 226px !important;
  max-width: 226px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  direction: ltr !important;
  box-sizing: border-box !important;
}

html body #home-slider #home-slide-views,
html body #home-slider #slide-views {
  justify-self: end !important;
  margin: 0 !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 3px 7px !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

html body #home-slider .slide-caption .slide-meta-row > .video-channel-badge {
  display: inline-flex !important;
  flex: 0 0 122px !important;
  width: 122px !important;
  min-width: 122px !important;
  max-width: 122px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #home-slider .slide-caption .slide-meta-row .channel-text-stack {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body #home-slider .slide-caption .slide-meta-row .channel-value {
  display: block !important;
  max-width: 86px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The autoplay control now lives inside the main image. */
html body #home-slider > #slide-toggle {
  position: absolute !important;
  z-index: 6 !important;
  top: 14px !important;
  right: 14px !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 15px !important;
  background: rgba(12,14,17,.78) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease !important;
}

html body #home-slider > #slide-toggle:hover,
html body #home-slider > #slide-toggle:focus-visible {
  transform: translateY(-2px) !important;
  border-color: #f3ce00 !important;
  background: #f3ce00 !important;
}

/* Pause icon. */
html body #home-slider > #slide-toggle::before {
  content: "" !important;
  display: block !important;
  width: 15px !important;
  height: 19px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg,#fff 0 34%,transparent 34% 66%,#fff 66% 100%) !important;
}

/* Play icon in English or Kurdish. */
html body #home-slider > #slide-toggle[aria-label*="Play" i]::before,
html body #home-slider > #slide-toggle[aria-label*="پیشاندانی"]::before {
  width: 0 !important;
  height: 0 !important;
  margin-left: 3px !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 16px solid #fff !important;
  border-radius: 2px !important;
  background: transparent !important;
}

html body #home-slider > #slide-toggle:hover::before,
html body #home-slider > #slide-toggle:focus-visible::before {
  filter: brightness(0) !important;
}

html body .slide-controls {
  max-width: 1100px !important;
}

html body .slide-controls #slide-dots {
  width: 100% !important;
  flex: 1 1 100% !important;
}

html[data-theme="light"] body #home-slider .slide-caption {
  background: rgba(18,22,28,.78) !important;
}

@media (max-width: 720px) {
  html body #home-slider .slide-caption {
    inset: auto 9px 9px 9px !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 5px 10px !important;
    min-height: 64px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }

  html body #home-slider #slide-position {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 52px !important;
    min-height: 32px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  html body #home-slider #slide-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  html body #home-slider .slide-caption .slide-meta-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  html body #home-slider > #slide-toggle {
    top: 9px !important;
    right: 9px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  html body #home-slider > #slide-toggle::before {
    transform: scale(.88) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #home-slider > #slide-toggle { transition: none !important; }
}

/* DARAWAN HOME SLIDESHOW LAYOUT V3 END */


/* SLIDE NUMBER POSITION V4 START */
html body #home-slider .slide-caption #slide-position {
    position: absolute !important;
    z-index: 8 !important;
    left: 14px !important;
    right: auto !important;
    bottom: calc(100% + 40px) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
}

@media (max-width: 720px) {
    html body #home-slider .slide-caption #slide-position {
        left: 8px !important;
        right: auto !important;
        bottom: calc(100% + 30px) !important;
        min-width: 48px !important;
        min-height: 27px !important;
        padding: 3px 7px !important;
        font-size: 9px !important;
    }
}
/* SLIDE NUMBER POSITION V4 END */

/* SLIDESHOW COUNTER BADGE V9 START */
html body #home-slider > #slide-position {
  position: absolute !important;
  z-index: 8 !important;
  top: auto !important;
  left: 18px !important;
  right: auto !important;
  bottom: 112px !important;
  display: inline-flex !important;
  width: max-content !important;
  max-width: max-content !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
  align-self: auto !important;
  justify-self: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 720px) {
  html body #home-slider > #slide-position {
    top: auto !important;
    left: 10px !important;
    right: auto !important;
    bottom: 82px !important;
    width: max-content !important;
    max-width: max-content !important;
    height: 27px !important;
    min-width: 48px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }
}
/* SLIDESHOW COUNTER BADGE V9 END */

/* LIGHT SOCIAL BRAND HOVER V1 START */
@media (hover: hover) {
  html[data-theme="light"] body #socials .match-youtube-grid > a.match-youtube-card:hover {
    transform: translateY(-4px) !important;
  }

  html[data-theme="light"] body #socials .match-youtube-grid > a.brand-youtube:hover {
    background: #fffafa !important;
    border-color: #ff0000 !important;
    box-shadow: 0 14px 30px rgba(255, 0, 0, .30) !important;
  }
  html[data-theme="light"] body #socials a.brand-youtube:hover .myc-follow {
    color: #d90000 !important;
  }

  html[data-theme="light"] body #socials .match-youtube-grid > a.brand-facebook:hover {
    background: #f8fbff !important;
    border-color: #1877f2 !important;
    box-shadow: 0 14px 30px rgba(24, 119, 242, .30) !important;
  }
  html[data-theme="light"] body #socials a.brand-facebook:hover .myc-follow {
    color: #1877f2 !important;
  }

  html[data-theme="light"] body #socials .match-youtube-grid > a.brand-snapchat:hover {
    background: #fffef2 !important;
    border-color: #d6c800 !important;
    box-shadow: 0 14px 30px rgba(255, 220, 0, .38) !important;
  }
  html[data-theme="light"] body #socials a.brand-snapchat:hover .myc-follow {
    color: #8a8000 !important;
  }

  html[data-theme="light"] body #socials .match-youtube-grid > a.brand-tiktok:hover {
    background: #f7feff !important;
    border-color: #00bfc9 !important;
    box-shadow: 0 14px 30px rgba(254, 44, 85, .27), 0 0 20px rgba(0, 242, 254, .30) !important;
  }
  html[data-theme="light"] body #socials a.brand-tiktok:hover .myc-follow {
    color: #008e98 !important;
  }

  html[data-theme="light"] body #socials .match-youtube-grid > a.brand-telegram:hover {
    background: #f6fcff !important;
    border-color: #24a1de !important;
    box-shadow: 0 14px 30px rgba(36, 161, 222, .32) !important;
  }
  html[data-theme="light"] body #socials a.brand-telegram:hover .myc-follow {
    color: #1684ba !important;
  }

  html[data-theme="light"] body #socials .match-youtube-grid > a.brand-shorts:hover {
    background: #fff8fa !important;
    border-color: #ff334b !important;
    box-shadow: 0 14px 30px rgba(255, 51, 75, .32) !important;
  }
  html[data-theme="light"] body #socials a.brand-shorts:hover .myc-follow {
    color: #e51d38 !important;
  }
}
/* LIGHT SOCIAL BRAND HOVER V1 END */



/* SLIDESHOW VIEWS SPACING V1 START */

/* More room for VIEWS and a clear gap before the channel badge. */
html body #home-slider .slide-caption .slide-meta-row {
  flex: 0 0 258px !important;
  width: 258px !important;
  min-width: 258px !important;
  max-width: 258px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  gap: 14px !important;
  overflow: visible !important;
}

html body #home-slider #home-slide-views,
html body #home-slider #slide-views {
  display: inline-flex !important;
  flex: 0 0 116px !important;
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

html body #home-slider #home-slide-views > *,
html body #home-slider #slide-views > * {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

html body #home-slider .slide-caption .slide-meta-row > .video-channel-badge {
  flex: 0 0 128px !important;
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}

html body #home-slider .slide-caption .slide-meta-row .channel-value {
  max-width: 92px !important;
}

@media (max-width: 720px) {
  html body #home-slider .slide-caption .slide-meta-row {
    flex-basis: 230px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    gap: 10px !important;
  }

  html body #home-slider #home-slide-views,
  html body #home-slider #slide-views {
    flex-basis: 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    gap: 5px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  html body #home-slider .slide-caption .slide-meta-row > .video-channel-badge {
    flex-basis: 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  html body #home-slider .slide-caption .slide-meta-row .channel-value {
    max-width: 76px !important;
  }
}

@media (max-width: 390px) {
  html body #home-slider .slide-caption .slide-meta-row :is(.video-card-views, .video-channel-badge) {
    transform: none !important;
  }
}

/* SLIDESHOW VIEWS SPACING V1 END */

/* PROFESSIONAL CLEAN MENU V7 START */
:root {
  --pro-menu-cyan: #39d7ff;
  --pro-menu-yellow: #f3ce00;
  --pro-menu-dark: #10151e;
}

/* Desktop navigation: quiet by default, clear on hover, unmistakable when selected. */
.header nav a {
  color: var(--text) !important;
  border: 1px solid transparent !important;
  font-weight: 650 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}

.header nav a::before {
  background: rgba(16, 21, 30, .88) !important;
  border: 1px solid rgba(57, 215, 255, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  opacity: 0 !important;
  animation: none !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.header nav a::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline: 18px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: var(--pro-menu-cyan);
  opacity: 0;
  transform: scaleX(.25);
  transform-origin: center;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .header nav a:hover {
    color: #72e3ff !important;
    font-weight: 700 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 22px rgba(57, 215, 255, .18) !important;
  }

  .header nav a:hover::before {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .header nav a:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }
}

.header nav a:focus-visible {
  color: #72e3ff !important;
  outline: 2px solid var(--pro-menu-cyan) !important;
  outline-offset: 3px !important;
  transform: translateY(-2px) !important;
}

.header nav a:focus-visible::before,
.header nav a:focus-visible::after {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.header nav a[aria-current="page"] {
  color: #111 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  transform: none !important;
  box-shadow: 0 7px 22px rgba(243, 206, 0, .27) !important;
}

.header nav a[aria-current="page"]::before {
  background: var(--pro-menu-yellow) !important;
  border-color: #ffe66d !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.header nav a[aria-current="page"]::after {
  background: #111 !important;
  opacity: .32 !important;
  transform: scaleX(.48) !important;
  animation: none !important;
}

html[data-theme="light"] .header nav a::before {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(0, 166, 209, .52) !important;
  box-shadow: 0 8px 20px rgba(0, 119, 153, .12) !important;
}

html[data-theme="light"] .header nav a:hover,
html[data-theme="light"] .header nav a:focus-visible {
  color: #007e9f !important;
}

html[data-theme="light"] .header nav a[aria-current="page"]::before {
  background: var(--pro-menu-yellow) !important;
  border-color: #d9af00 !important;
}

html[data-theme="light"] .header nav a[aria-current="page"] {
  color: #111 !important;
}

/* Mobile drawer follows the same visual language. */
.side-menu nav a {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(127, 148, 173, .20) !important;
  box-shadow: none !important;
  font-weight: 680 !important;
  transform: none !important;
  animation: none !important;
  transition: color .22s ease, background .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s ease !important;
}

@media (hover: hover) {
  .side-menu nav a:hover {
    color: #72e3ff !important;
    background: rgba(57, 215, 255, .09) !important;
    border-color: rgba(57, 215, 255, .70) !important;
    box-shadow: 0 7px 20px rgba(57, 215, 255, .16) !important;
    transform: translateY(-2px) !important;
    animation: none !important;
  }
}

.side-menu nav a:focus-visible {
  color: #72e3ff !important;
  border-color: var(--pro-menu-cyan) !important;
  outline: 2px solid var(--pro-menu-cyan) !important;
  outline-offset: 2px !important;
}

.side-menu nav a[aria-current="page"] {
  color: #111 !important;
  background: var(--pro-menu-yellow) !important;
  border-color: #ffe66d !important;
  box-shadow: 0 7px 22px rgba(243, 206, 0, .25) !important;
  font-weight: 800 !important;
  transform: none !important;
  animation: none !important;
}

html[data-theme="light"] .side-menu nav a {
  background: rgba(255, 255, 255, .84) !important;
  border-color: rgba(23, 33, 44, .14) !important;
}

html[data-theme="light"] .side-menu nav a:hover,
html[data-theme="light"] .side-menu nav a:focus-visible {
  color: #007e9f !important;
  background: #fff !important;
  border-color: rgba(0, 166, 209, .60) !important;
}

html[data-theme="light"] .side-menu nav a[aria-current="page"] {
  color: #111 !important;
  background: var(--pro-menu-yellow) !important;
  border-color: #d9af00 !important;
}

@media (hover: none) {
  .header nav a,
  .side-menu nav a {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header nav a,
  .header nav a::before,
  .header nav a::after,
  .side-menu nav a {
    transition: none !important;
    animation: none !important;
  }
}
/* PROFESSIONAL CLEAN MENU V7 END */

/* SLIDESHOW FULL IMAGE FIX START */
html body .home-showcase #home-slider > #slide-link {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    background: #111 !important;
    overflow: hidden !important;
}

html body .home-showcase #home-slider #slide-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
}
/* SLIDESHOW FULL IMAGE FIX END */

/* SLIDESHOW TOOLBAR WIDTH FIX START */

/* Match slideshow width with yellow toolbar */
html body .home-showcase #home-slider {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* Match thumbnail gallery with slideshow and yellow toolbar */
html body .home-showcase .slide-controls {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    margin-top: 14px !important;
}

html body .home-showcase #slide-dots {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
}

/* Keep everything responsive on mobile */
@media (max-width: 720px) {
    html body .home-showcase #home-slider,
    html body .home-showcase .slide-controls,
    html body .home-showcase #slide-dots {
        width: 100% !important;
        max-width: none !important;
    }
}

/* SLIDESHOW TOOLBAR WIDTH FIX END */

/* PROFESSIONAL CUSTOM CURSOR START */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.custom-cursor-enabled body,
    html.custom-cursor-enabled a,
    html.custom-cursor-enabled button,
    html.custom-cursor-enabled select,
    html.custom-cursor-enabled label,
    html.custom-cursor-enabled [role="button"] {
        cursor: none !important;
    }

    html.custom-cursor-enabled input,
    html.custom-cursor-enabled textarea,
    html.custom-cursor-enabled [contenteditable="true"] {
        cursor: text !important;
    }

    #darawan-custom-cursor {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        pointer-events: none;
        opacity: 1;
        transform: translate3d(-100px, -100px, 0);
        transition: opacity .18s ease;
    }

    #darawan-custom-cursor::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        border: 2px solid #151515;
        border-radius: 50%;
        background: #f3ce00;
        box-shadow:
            0 0 0 1px rgba(255,255,255,.55),
            0 0 10px rgba(243,206,0,.65);
        transform: translate(-50%, -50%);
        transition:
            width .18s ease,
            height .18s ease,
            background .18s ease,
            transform .12s ease;
    }

    #darawan-custom-cursor::after {
        content: "";
        position: absolute;
        width: 29px;
        height: 29px;
        border: 1.5px solid rgba(57,215,255,.9);
        border-radius: 50%;
        background: rgba(57,215,255,.04);
        box-shadow:
            0 0 14px rgba(57,215,255,.32),
            inset 0 0 10px rgba(57,215,255,.08);
        transform: translate(-50%, -50%);
        transition:
            width .2s ease,
            height .2s ease,
            background .2s ease,
            border-color .2s ease,
            transform .12s ease;
    }

    #darawan-custom-cursor.is-hover::before {
        width: 7px;
        height: 7px;
        background: #ffffff;
    }

    #darawan-custom-cursor.is-hover::after {
        width: 43px;
        height: 43px;
        border-color: #39d7ff;
        background: rgba(57,215,255,.13);
        box-shadow:
            0 0 22px rgba(57,215,255,.48),
            inset 0 0 14px rgba(57,215,255,.12);
    }

    #darawan-custom-cursor.is-down::before {
        transform: translate(-50%, -50%) scale(.72);
    }

    #darawan-custom-cursor.is-down::after {
        transform: translate(-50%, -50%) scale(.78);
        background: rgba(243,206,0,.16);
        border-color: #f3ce00;
    }

    #darawan-custom-cursor.is-hidden {
        opacity: 0;
    }
}
/* PROFESSIONAL CUSTOM CURSOR END */

/* CUSTOM CURSOR FIX V2 START */
@media (pointer: fine) {
    html.custom-cursor-active body,
    html.custom-cursor-active a,
    html.custom-cursor-active button,
    html.custom-cursor-active select,
    html.custom-cursor-active [role="button"] {
        cursor: none !important;
    }

    html.custom-cursor-active input,
    html.custom-cursor-active textarea,
    html.custom-cursor-active [contenteditable="true"] {
        cursor: text !important;
    }

    #darawan-cursor {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        pointer-events: none;
        transform: translate3d(-100px,-100px,0);
        transition: opacity .15s ease;
    }

    #darawan-cursor::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        border: 2px solid #111;
        border-radius: 50%;
        background: #f3ce00;
        box-shadow:
            0 0 0 1px rgba(255,255,255,.7),
            0 0 10px rgba(243,206,0,.7);
        transform: translate(-50%,-50%);
        transition: transform .12s ease, background .18s ease;
    }

    #darawan-cursor::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border: 2px solid #39d7ff;
        border-radius: 50%;
        background: rgba(57,215,255,.05);
        box-shadow:
            0 0 16px rgba(57,215,255,.42),
            inset 0 0 10px rgba(57,215,255,.10);
        transform: translate(-50%,-50%);
        transition:
            width .2s ease,
            height .2s ease,
            transform .12s ease,
            background .2s ease;
    }

    #darawan-cursor.cursor-hover::before {
        background: #fff;
    }

    #darawan-cursor.cursor-hover::after {
        width: 45px;
        height: 45px;
        background: rgba(57,215,255,.14);
        box-shadow:
            0 0 24px rgba(57,215,255,.55),
            inset 0 0 12px rgba(57,215,255,.14);
    }

    #darawan-cursor.cursor-down::before {
        transform: translate(-50%,-50%) scale(.65);
    }

    #darawan-cursor.cursor-down::after {
        transform: translate(-50%,-50%) scale(.76);
        border-color: #f3ce00;
    }

    #darawan-cursor.cursor-hidden {
        opacity: 0;
    }
}
/* CUSTOM CURSOR FIX V2 END */

/* MENU UNIFIED BOLD + MODERN CURSOR V3 START */
.header nav a,
.header nav a:hover,
.header nav a:focus-visible,
.header nav a[aria-current="page"],
.side-menu nav a,
.side-menu nav a:hover,
.side-menu nav a:focus-visible,
.side-menu nav a[aria-current="page"] {
  font-weight: 800 !important;
}

@media (pointer: fine) {
  #darawan-cursor::before {
    width: 18px !important;
    height: 23px !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 2px 11px 11px 11px !important;
    background: linear-gradient(145deg,#ffffff 0%,#dff8ff 58%,#39d7ff 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.5),0 0 9px rgba(57,215,255,.35) !important;
    clip-path: polygon(0 0,100% 62%,60% 68%,78% 100%,61% 100%,44% 72%,16% 100%) !important;
    transform: translate(-2px,-2px) rotate(-7deg) !important;
    transform-origin: 2px 2px !important;
    transition: transform .14s ease,filter .18s ease !important;
  }
  #darawan-cursor::after {
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #darawan-cursor.cursor-hover::before {
    background: linear-gradient(145deg,#fff8c7 0%,#f3ce00 72%,#e7b900 100%) !important;
    filter: drop-shadow(0 0 6px rgba(243,206,0,.65)) !important;
    transform: translate(-2px,-2px) rotate(-7deg) scale(1.12) !important;
  }
  #darawan-cursor.cursor-down::before {
    transform: translate(-2px,-2px) rotate(-7deg) scale(.88) !important;
  }
}
/* MENU UNIFIED BOLD + MODERN CURSOR V3 END */