/* AirMaxTV — addons.2026.css
   Small, safe overrides for Hub Tools (A) + Consent Banner + Toast
   (kept separate to avoid touching your main design)
*/
:root{color-scheme:dark;}

/* ===== 2026 Hub Tools (A) ===== */
.hub-tools{padding:0 .25rem}
.hub-tools__inner{display:flex;align-items:center;gap:12px;padding:10px;border-radius:999px;background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.18);box-shadow:0 12px 40px rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hub-search{flex:1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.14)}
.hub-search__icon{opacity:.85}
.hub-search__input{width:100%;background:transparent;border:0;outline:none;color:#fff;font-weight:800;letter-spacing:.2px}
.hub-search__input::placeholder{color:rgba(148,163,184,.92);font-weight:700}
.hub-actions{display:flex;align-items:center;gap:10px}
.hub-icon-btn{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.16);color:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.hub-icon-btn:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.55);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.hub-icon-btn:active{transform:translateY(0) scale(.98)}
.hub-icon-btn--ghost{background:rgba(2,6,23,.25)}
.hub-icon-btn--install{background:linear-gradient(135deg,rgba(59,130,246,.75),rgba(168,85,247,.75));border-color:rgba(255,255,255,.18)}
.hub-tools__hint{margin-top:10px;font-size:12px;color:rgba(148,163,184,.95);text-align:center}
.hub-kbd{display:inline-block;padding:2px 8px;border-radius:10px;background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.18);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:11px;line-height:1.7;color:#fff}

/* ===== Consent Banner (GA4) ===== */
.consent{position:fixed;inset:auto 0 18px 0;z-index:9999;display:flex;justify-content:center;padding:0 14px}
.consent.hidden{display:none}
.consent__card{width:min(980px,100%);border-radius:22px;padding:14px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.20);box-shadow:0 18px 60px rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.consent__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.consent__title{font-weight:900;color:#fff;letter-spacing:.2px}
.consent__text{margin-top:8px;color:rgba(226,232,240,.92);font-size:13px;line-height:1.6}
.consent__actions{margin-top:12px;display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap}
.consent__btn{padding:10px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.20);background:rgba(59,130,246,.85);color:#fff;font-weight:900;cursor:pointer}
.consent__btn--ghost{background:rgba(2,6,23,.35)}
.consent__link{color:rgba(191,219,254,.95);text-decoration:none;font-weight:800}
.consent__link:hover{text-decoration:underline}

/* ===== Toast ===== */
.airmax-toast{position:fixed;bottom:94px;left:50%;transform:translateX(-50%) translateY(12px);opacity:0;padding:10px 14px;border-radius:999px;background:rgba(2,6,23,.82);border:1px solid rgba(148,163,184,.20);color:#fff;z-index:9999;transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-weight:900}
.airmax-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){.hub-icon-btn,.consent__card,.airmax-toast{transition:none!important}}


/* ===== Download Integrity Seal (SHA-256) ===== */
.hub-sha{margin-top:12px;padding:10px 12px;border-radius:18px;background:rgba(2,6,23,.32);border:1px solid rgba(148,163,184,.14)}
.hub-sha__row{display:flex;align-items:center;gap:10px}
.hub-sha__label{font-size:11px;color:rgba(148,163,184,.95);font-weight:900;letter-spacing:.4px}
.hub-sha__value{flex:1;direction:ltr;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:11px;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-sha__btn{padding:6px 10px;border-radius:999px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.16);color:#fff;font-weight:900;font-size:11px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease}
.hub-sha__btn:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.55);background:rgba(99,102,241,.18)}
.hub-sha__btn:active{transform:translateY(0) scale(.98)}
.hub-sha__btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.hub-sha__btn--copy{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.22)}
.hub-sha__meta{margin-top:8px;font-size:11px;color:rgba(148,163,184,.92);min-height:14px}


/* --- Responsive Hub Tools + Accessibility (v2025.12.23) --- */
.skip-link{
  position:absolute;
  top:-60px;
  right:1rem;
  z-index:9999;
  background:rgba(15,23,42,.9);
  color:#fff;
  padding:.75rem 1rem;
  border:1px solid rgba(148,163,184,.25);
  border-radius:1rem;
  transition:transform .2s ease, top .2s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.skip-link:focus{
  top:1rem;
}

.noscript-banner{
  margin:0;
  padding:.9rem 1rem;
  background:rgba(30,41,59,.55);
  border-bottom:1px solid rgba(148,163,184,.18);
  color:rgba(226,232,240,.95);
  text-align:center;
  font-weight:800;
  font-size:.9rem;
}

@media (max-width: 560px){
  .hub-tools{ border-radius: 1.5rem; }
  .hub-tools__inner{
    flex-direction:column;
    align-items:stretch;
    gap:.85rem;
    padding:.9rem;
    border-radius:1.5rem;
  }
  .hub-search{
    width:100%;
    min-width:0;
  }
  .hub-actions{
    width:100%;
    justify-content:space-between;
  }
  .hub-icon-btn{
    width:100%;
    flex:1;
    height:46px;
    border-radius:1rem;
  }
  .hub-search__input{
    padding-inline-start:2.75rem;
    padding-inline-end:2.75rem;
    height:46px;
  }
  .hub-search__icon{ left:1rem; right:auto; }
}

.hub-app-icon{
  width:88px;
  height:88px;
}
@media (max-width: 560px){
  .hub-app-icon{ width:76px; height:76px; }
  .hub-app-title{ font-size:1.45rem; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .animate-pulse{ animation:none !important; }
  .cursor-blink{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}


/* Video modal (Vimeo) — stable across mobile/desktop */
#videoModal{display:flex;align-items:center;justify-content:center;}
#videoModal.hidden{display:none;}

/* Inline tutorial player: show on desktop + vertical on phones (better for this video) */
.tutorial-player{
  position:relative;
  overflow:hidden;
  background:#020617;
  width:100%;
  aspect-ratio:16/9;
  max-height:72vh;
}
.tutorial-player > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

/* Tutorial poster (thumbnail): reuse .tutorial-player sizing but render an image */
.tutorial-poster{ cursor:pointer; }
.tutorial-poster picture,
.tutorial-poster img{ width:100%; height:100%; display:block; }
/* If the image fails, keep a clean premium gradient (no broken-image icon) */
.tutorial-poster.thumb-failed{
  background: radial-gradient(1200px 420px at 20% 20%, rgba(59,130,246,.22), transparent 55%),
              radial-gradient(1200px 420px at 80% 40%, rgba(168,85,247,.18), transparent 60%),
              linear-gradient(180deg, rgba(2,6,23,.9), rgba(2,6,23,.98));
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16/9){
  .tutorial-player{height:0;padding-top:56.25%;}
  .tutorial-player > iframe{position:absolute;inset:0;width:100%;height:100%;}
}

@media (max-width: 640px){
  .tutorial-player{aspect-ratio:9/16;max-height:78vh;}
  @supports not (aspect-ratio: 9/16){
    .tutorial-player{height:0;padding-top:177.777%;}
    .tutorial-player > iframe{position:absolute;inset:0;width:100%;height:100%;}
  }
}
/* Avoid Android/WebView glitches: disable backdrop-filter when video modal is open */
@media (max-width: 900px){
  #videoModal{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}


/* preloader-autohide: if JS fails, don't get stuck on LOADING */
#preloader{
  animation: preloader_autohide .55s ease forwards;
  animation-delay: 6.5s;
}
@keyframes preloader_autohide{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* Video modal: close button must ALWAYS be visible (mobile + desktop)
   Some WebViews render the iframe but hide the modal header due to layout bugs.
   A fixed close FAB is the most reliable, cross-device solution. */
#videoModal .video-close-fab{
  position:fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  left: auto;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Video Modal z-index override: ensure it sits فوق أي شريط علوي/هيدر */
#videoModal{
  z-index: 2147483000 !important;
}
#videoModal .video-close-fab{
  z-index: 2147483647 !important;
}



/* Close pill: واضح جدًا على كل الأجهزة، بدون تغطية أدوات Vimeo بالأسفل */
#videoModal .video-close-pill{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  z-index: 2147483647;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
#videoModal .video-close-pill__icon{
  display:inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 22px;
  line-height: 1;
}
#videoModal .video-close-pill__text{
  font-size: 14px;
  letter-spacing: .2px;
}

/* --- Vimeo UX hardening (r13) --- */
/* When video modal is open, hide floating UI that can cover Vimeo controls */
html.video-modal-open, html.video-modal-open body{
  overflow:hidden !important;
}
html.video-modal-open [data-hide-when-modal]{
  display:none !important;
}

/* Inline tutorial player: robust sizing even if aspect-ratio is not supported */
.tutorial-player{
  position:relative;
}
.tutorial-player::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 fallback */
}
@supports (aspect-ratio: 1/1){
  .tutorial-player::before{ display:none; padding-top:0; }
}

/* Prevent the mobile sticky footer from covering Vimeo controls */
@media (max-width: 767px){
  #tutorial .tutorial-player{ margin-bottom: 104px; }
}

/* Small "Expand" button on the inline player (helps users avoid UI overlap) */
.video-quick-open{
  position:absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: #fff;
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-quick-open:active{ transform: scale(.98); }

/* Modal: remove any accidental backdrop-filter usage that can break WebView rendering */
#videoModal, #videoModal *{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}


/* --- Vimeo modal sizing (r16): Vertical video, big on mobile + desktop --- */
#videoModal .vimeo-stage{
  /* Prefer height-driven sizing so vertical videos stay large */
  height: min(82vh, 860px);
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 92vw;
}
@media (min-width: 1024px){
  #videoModal .vimeo-stage{ height: min(86vh, 920px); }
}
/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 9 / 16){
  #videoModal .vimeo-stage{
    width: min(92vw, 520px);
    height: 0;
    padding-top: 177.777%;
    max-width: 92vw;
  }
}



/* ==========================================================
   Tutorial Video Modal (Vimeo) — Video Only (Cross‑Device)
   - No blur / no backdrop-filter (prevents audio-only issues)
   - Close button ALWAYS visible (mobile + desktop)
   - Vertical-friendly sizing (9:16) with safe max-height
   ========================================================== */
#tutorialVideoModal{
  z-index: 2147483000 !important;
}
#tutorialVideoModal .tutorial-modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.86);
}
#tutorialVideoModal .tutorial-modal-stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
#tutorialVideoModal .tutorial-modal-card{
  position:relative;
  width: min(92vw, 460px);
  aspect-ratio: 9 / 16;
  max-height: 86vh;
  background:#000;
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
@media (min-width: 900px){
  #tutorialVideoModal .tutorial-modal-card{
    width: min(520px, 72vw);
    max-height: 88vh;
  }
}
#tutorialVideoModal iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
#tutorialVideoModal .tutorial-modal-close{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 2147483647;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#tutorialVideoModal .tutorial-modal-close:hover{
  background: rgba(0,0,0,.72);
}
#tutorialVideoModal .tutorial-modal-fallback{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight: 800;
  text-align:center;
}