/*
 * Y-Tech front end.
 * Values are carried over from the original design (Main.dc.html): the inline
 * styles became the classes below, the <helmet> rules are kept as they were.
 * Only logical properties are used, so the same sheet serves Arabic (RTL) and English (LTR).
 */

html{background:#0f0f0f}
body{margin:0;background:#0f0f0f}
.yt-root{width:100%;min-height:100vh;background:#0f0f0f;color:#f1f1f1;font-family:'Manrope','Almarai',system-ui,sans-serif;overflow-x:clip}
.yt-root a{color:inherit;text-decoration:none}
.yt-root a:hover{color:#ffffff}
.yt-root button,.yt-root input{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[dir="rtl"] .flip{transform:scaleX(-1)}

/* Top bar (fixed while scrolling) */
.topbar{position:sticky;top:0;z-index:40;background:rgba(15,15,15,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06)}
.site-header{position:relative;max-width:1680px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:16px;box-sizing:border-box}
.site-logo{display:flex;align-items:center;flex:0 0 auto}
.site-logo img{height:36px;width:auto;display:block}
.hdr-search{flex:0 1 620px;margin:0 auto;display:flex;height:44px}
.hdr-search input[type="search"]{flex:1 1 auto;min-width:0;border:1px solid #303030;border-inline-end:0;border-start-start-radius:999px;border-end-start-radius:999px;border-start-end-radius:0;border-end-end-radius:0;background:#121212;color:#fff;font-size:16px;padding:0 20px;outline:none;-webkit-appearance:none;appearance:none}
.hdr-search input[type="search"]:focus{border-color:#3ea6ff}
.hdr-search button{flex:0 0 64px;border:1px solid #303030;border-start-end-radius:999px;border-end-end-radius:999px;background:#222222;color:#ffffff;display:grid;place-items:center;cursor:pointer}
.hdr-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.hdr-icon{display:none;width:48px;height:48px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);place-items:center;color:#ffffff;cursor:pointer}
.lang-btn{height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.14);background:transparent;color:#f1f1f1;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;cursor:pointer;box-sizing:border-box}
.lang-btn[lang="ar"]{font-family:'Almarai','Manrope',system-ui,sans-serif}
.m-search{position:absolute;inset:0;display:none;align-items:center;gap:8px;padding:0 12px;background:#0f0f0f;opacity:0;pointer-events:none;transition:opacity .15s ease}
.m-search-back{flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:#ffffff;display:grid;place-items:center;cursor:pointer}
.m-search input[type="search"]{flex:1 1 auto;min-width:0;height:44px;box-sizing:border-box;border:1px solid rgba(255,255,255,0.16);border-radius:999px;background:#1b1e25;color:#ffffff;font-size:16px;padding:0 18px;outline:none;-webkit-appearance:none;appearance:none}
.m-search input::-webkit-search-cancel-button,.hdr-search input::-webkit-search-cancel-button{display:none}

/* Page */
.page-main{max-width:1440px;margin:0 auto;padding:0 40px 64px;box-sizing:border-box;transition:opacity .15s ease}
.is-loading .page-main{opacity:.72}

/* Banner */
.banner{margin-top:8px;aspect-ratio:2560 / 424;border-radius:16px;overflow:hidden;background:#000000;position:relative}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Channel header */
.profile{margin-top:28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.avatar{flex:0 0 auto;width:160px;height:160px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 3px #0f0f0f,0 0 0 5px rgba(255,255,255,0.85)}
.profile-body{flex:1 1 480px;min-width:0}
.profile-name{margin:0;font-family:'Archivo','Almarai',sans-serif;font-stretch:85%;font-weight:800;font-size:40px;line-height:1.2;color:#fff}
.intro-row{margin-top:10px;max-width:760px;display:flex;align-items:baseline;gap:6px;font-size:15px;line-height:1.7}
.intro{margin:0;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cfcfcf}
.intro-more{flex:0 0 auto;padding:0;border:0;background:transparent;color:#ffffff;font-weight:700;cursor:pointer}
.contact{margin:8px 0 0;font-size:15px}
.yt-root .contact a{color:#3ea6ff}
.socials{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.social-btn{height:40px;padding:0 16px;border-radius:999px;background:#272727;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}

/* Tabs (sticky, scrollable on mobile) */
.tab-band{position:sticky;top:65px;z-index:20;margin:16px -40px 0;padding:12px 40px;background:rgba(15,15,15,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tabscroll{display:flex;align-items:center;width:fit-content;max-width:100%;box-sizing:border-box;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);background:#1b1e25}
.tabscroll::-webkit-scrollbar{display:none}
.tablist{display:flex;flex-wrap:nowrap;gap:4px}
.yt-root .tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;height:44px;padding:0 20px;border:0;border-radius:999px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease;background:transparent;color:rgba(255,255,255,0.88);display:inline-flex;align-items:center;box-sizing:border-box}
.yt-root .tab.is-on{background:#4a4b50;color:#ffffff}
.yt-root .tab-back{gap:8px;padding-inline-start:14px}
.yt-root .tab-back:hover{background:#4a4b50;color:#ffffff}

/* Sections */
.sec{padding-top:32px}
.sec-grid{padding-top:28px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-title{margin:0;font-size:21px;font-weight:700;color:#fff}
.grid-title{margin:0 0 18px}
.sec-count{color:#aaaaaa;font-weight:500;font-size:16px;margin-inline-start:6px}
.sec-rule{margin-top:24px;border-top:1px solid #272727}
.pill-btn{height:36px;padding:0 16px;border-radius:999px;border:1px solid #3f3f3f;background:transparent;color:#f1f1f1;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box}

/* Rows and cards */
.hrow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#3f3f3f transparent}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(130px,calc((100% - 64px) / 5)),1fr));column-gap:16px;row-gap:32px}
.vcard{display:block;min-width:0}
.hcard{flex:0 0 220px;scroll-snap-align:start}
.vthumb{position:relative;aspect-ratio:9 / 16;border-radius:12px;overflow:hidden;background:#272727;transition:border-radius .25s ease}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.vcard:hover .vthumb img{transform:scale(1.04)}
.vcard:hover .vthumb{border-radius:4px}
/* No image available: quiet play mark on the card's own background */
.vthumb.noimg::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 44px 44px no-repeat}
.vtitle{margin:12px 0 0;font-size:15px;font-weight:600;line-height:1.5;color:#f1f1f1}
.vmeta{margin:4px 0 0;font-size:13.5px;color:#aaaaaa}

/* Search results */
.sec-search{padding-top:24px}
.search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.search-title{margin:0;font-size:20px;font-weight:700;color:#ffffff}
.empty-box{border:1px dashed rgba(255,255,255,0.14);border-radius:16px;padding:48px 20px;text-align:center}
.empty-title{margin:0;font-size:18px;font-weight:700;color:#ffffff}
.empty-text{margin:8px 0 0;font-size:14px;color:#aaaaaa}

/* Pop-ups */
.yt-lock{overflow:hidden}
.popup{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;font-family:'Manrope','Almarai',system-ui,sans-serif;color:#f1f1f1;animation:yt-fade .18s ease}
@keyframes yt-fade{from{opacity:0}to{opacity:1}}
.popup-scrim{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(0,0,0,0.78);cursor:pointer}
.popup-about .popup-scrim{background:rgba(0,0,0,0.7)}
.popup-x{position:absolute;top:20px;inset-inline-end:24px;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:#ffffff;cursor:pointer;display:grid;place-items:center}
.detail{position:relative;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;border-radius:16px;background:#1b1e25;box-shadow:0 30px 80px rgba(0,0,0,0.6)}

.detail-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.08)}
.detail-head img{width:40px;height:40px;border-radius:999px;object-fit:cover}
.detail-head div{min-width:0}
.detail-name{margin:0;font-size:15px;font-weight:700;color:#ffffff}
.detail-cat{margin:2px 0 0;font-size:13px;color:#f0b43c}
.detail-body{padding:24px 24px 28px}
.detail-media{position:relative;display:block;width:220px;max-width:60%;aspect-ratio:9 / 16;border-radius:12px;margin:0 auto;background:#000000;overflow:hidden}
.detail-media img,.detail-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}


.detail-title{margin:24px 0 0;font-size:22px;font-weight:800;line-height:1.45;color:#ffffff}
.detail-text{margin:12px 0 0;font-size:16px;line-height:1.85;color:#cfcfcf;white-space:pre-line}
.detail-links{margin:18px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.6}
.detail-links li+li{margin-top:8px}
.detail-links a{color:#3ea6ff;text-decoration:underline;text-underline-offset:3px;font-weight:600;overflow-wrap:anywhere}
.about{position:relative;width:100%;max-width:640px;max-height:85vh;overflow-y:auto;border-radius:14px;background:#212121;box-shadow:0 30px 80px rgba(0,0,0,0.6);padding:28px 28px 32px;box-sizing:border-box}
.about .popup-x{top:14px;inset-inline-end:14px;width:40px;height:40px}
.about-title{margin:0;padding-inline-end:40px;font-size:24px;font-weight:700;color:#ffffff}
.about-text{margin:14px 0 0;font-size:16px;line-height:1.75;color:#f1f1f1;white-space:pre-line}

/* Plain pages */
.page-article{padding-top:40px;max-width:760px}
.page-content{margin-top:16px;font-size:16px;line-height:1.85;color:#cfcfcf}
.yt-root .page-content a{color:#3ea6ff;text-decoration:underline}

/* Keyboard focus */
.yt-root a:focus-visible,.yt-root button:focus-visible,.popup button:focus-visible,.popup a:focus-visible{outline:2px solid #3ea6ff;outline-offset:2px}

/* Logged-in admin bar */
.admin-bar .topbar{top:32px}
.admin-bar .tab-band{top:97px}
@media (max-width: 782px){
  .admin-bar .topbar{top:46px}
  .admin-bar .tab-band{top:111px}
}
@media (max-width: 600px){
  .admin-bar .topbar{top:0}
  .admin-bar .tab-band{top:65px}
}

@media (max-width: 720px){
  .hdr-search{display:none !important}
  .hdr-icon{display:grid}
  .hdr-actions{margin-inline-start:auto}
  .lang-btn{width:48px;height:48px;padding:0;justify-content:center}
  .lang-text{display:none}
  .m-search{display:flex}
  .m-search:focus-within,.m-search.open{opacity:1;pointer-events:auto}
  .site-header{padding:0 16px}
  .page-main{padding:0 16px 48px}
  .tab-band{margin:12px -16px 0;padding:10px 16px}
  .avatar{width:96px;height:96px}
  .profile{gap:18px;margin-top:20px}
  .profile-name{font-size:30px}
  .hcard{flex-basis:160px}
  .popup{padding:16px}
  .banner{border-radius:10px}
}

@media (prefers-reduced-motion: reduce){
  .vthumb img,.vthumb,.popup,.page-main{transition:none;animation:none}
}

/* Pop-up: close button in the header, play button over the thumbnail (opens YouTube) */
.detail-head .detail-x{position:static;flex:0 0 auto;margin-inline-start:auto;width:40px;height:40px;transition:background-color .2s ease}
.detail-head .detail-x:hover{background:rgba(255,255,255,0.1)}
a.detail-media{cursor:pointer}
.detail-media img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
a.detail-media:hover img{transform:scale(1.04)}
.detail-media.noimg-plain,.detail-media.noimg{background:#272727}
.detail-play{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:999px;background:rgba(15,15,15,0.72);color:#ffffff;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,0.85);transition:transform .2s ease,background-color .2s ease}
.detail-play svg{margin-left:3px}
a.detail-media:hover .detail-play{transform:scale(1.08);background:#f0b43c;color:#0f0f0f}