/* ═══════════════════════════════════════════════════
   FundedXYZ Portal V2 — mobile-v2.css
   Responsive overrides, all scoped under #fxyz-portal
   ═══════════════════════════════════════════════════ */

/* ─── Tablet & below (< 900px): sidebar is a slide-out DRAWER ─── */
@media (max-width: 900px) {
    #fxyz-portal [data-fxyz="sidebar"], #fxyz-portal[data-sidebar-collapsed="true"] [data-fxyz="sidebar"] { width: var(--fxyz-sidebar-width) !important; transform: translateX(-100%); transition: transform 0.25s ease !important; }
    #fxyz-portal .fxyz-countdown { display: none; }
    #fxyz-portal #fxyz-mobile-countdown-box { display: flex; position: relative; width: 100%; height: auto; padding: 10px 16px; background: linear-gradient(90deg, #6c5ce7, #7d6de8, #6c5ce7); align-items: center; justify-content: center; gap: 14px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em; border-top: 1px solid rgba(255, 255, 255, .08); }
    #fxyz-portal .header__mobile-bar-label { opacity: 0.95; }
    #fxyz-portal .header__mobile-bar-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; letter-spacing: .04em; display: flex; opacity: 1; }
    #fxyz-portal[data-sidebar-open="true"] [data-fxyz="sidebar"] { transform: translateX(0) !important; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
    #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-nav-item { justify-content: flex-start !important; padding: 7px 10px !important; }
    #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-nav-section-label, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-nav-item span, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-nav-item-arrow, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-nav-badge, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-user-name, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-user-rank, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-user-logout, #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-sidebar-logo img { display: revert !important; }
    #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-sidebar-logo { justify-content: space-between !important; padding: 20px 20px 16px !important; }
    #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-user-row { justify-content: flex-start !important; }
    #fxyz-portal[data-sidebar-collapsed="true"] .fxyz-sidebar-nav { padding: 10px !important; }
    #fxyz-portal [data-fxyz="main"], #fxyz-portal[data-sidebar-collapsed="true"] [data-fxyz="main"] { margin-left: 0 !important; max-width: 100vw; min-width: 0; }
    #fxyz-portal .fxyz-sidebar-close { display: flex !important; }
    #fxyz-portal [data-fxyz="header"] { padding: 0 14px !important; }
    #fxyz-portal .fxyz-header-title { font-size: 15px !important; }
    #fxyz-portal [data-fxyz="content"] { padding: 14px !important; }
    #fxyz-portal .fxyz-start-btn-label { display: none; }
    #fxyz-portal .divTableNumberSizeArea { width: 100%; justify-content: flex-end; }

    /* iOS performance: backdrop-filter blur is GPU-heavy and causes page freezes on iPhone.
       Replace with a solid background so touches/taps respond instantly. */
    #fxyz-portal [data-fxyz="header"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10, 9, 17, 0.97) !important; }
}

/* ─── Phone (< 640px): further compaction ─── */
@media (max-width: 640px) {
    /* 1. Force iOS to recognize all items with 'onclick' as fully clickable */
    button, a, [onclick] { cursor: pointer !important; touch-action: manipulation; /* Tells mobile browsers to prioritize clicks over zooming */ }
    /* 2. Prevent inner elements (icons, text, images) from stealing the tap on iOS */
    button > *, a > *, [onclick] > * { pointer-events: none; }
    #fxyz-portal [data-fxyz="header"] { height: 52px !important; }
    #fxyz-portal .fxyz-header-title { font-size: 14px !important; }
    #fxyz-portal [data-fxyz="content"] { padding: 10px !important; }
    #fxyz-portal .fxyz-header-icon-btn, #fxyz-portal .fxyz-profile-btn { width: 32px !important; height: 32px !important; }
    #fxyz-portal .fxyz-countdown { display: none !important; }
    #fxyz-portal #fxyz-profile-wrap { position: initial; }
    #fxyz-portal .fxyz-profile-dropdown { width: calc(100vw - 20px); left: 10px; position: fixed; top: 50px; }
}

/* AUTH LAYOUT APPENDED */
@media (prefers-reduced-motion: reduce) {
  .auth-bg__grad, .auth-bg__orb { animation: none; }
}
@media (max-width: 900px) {
  .auth-top { padding: 14px 18px; }
  .auth-top__brand-img { height: 24px; }
  .auth-top__back { padding: 6px 12px; font-size: 12px; }
  .auth-main { padding: 8px 14px 24px; }
  .auth-main--split { padding: 8px 14px 24px; }
  .auth-card { padding: 28px 22px; max-width: 440px; }
  .auth-card__title { font-size: 22px; }
  .auth-card__subtitle { font-size: 12px; margin-bottom: 22px; }
  .auth-split { grid-template-columns: 1fr; max-width: 440px; border-radius: 16px; }
  .auth-split__hero { padding: 22px 20px 18px; gap: 10px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .auth-split__hero::before { background-size: 20px 20px; }
  .auth-split__badge { font-size: 10px; padding: 3px 10px; }
  .auth-split__title { font-size: 22px; margin: 8px 0 6px; }
  .auth-split__tagline { font-size: 12px; line-height: 1.5; max-width: 100%; }
  .auth-split__features { display: none; }
  .auth-split__form { padding: 22px 20px 24px; }
}

@media (max-width: 480px) {
  .auth-top { padding: 12px 14px; }
  .auth-top__brand-img { height: 22px; }
  .auth-main { padding: 4px 10px 20px; }
  .auth-main--split { padding: 4px 10px 20px; }
  .auth-card { padding: 22px 16px; }
  .auth-card__title { font-size: 20px; }
  .auth-field { margin-bottom: 13px; }
  .auth-input { padding: 11px 12px; font-size: 13px; }
  .auth-input--action { padding-right: 92px; }
  .auth-verify { padding: 10px 12px; margin: 16px 0 14px; }
  .auth-verify__label { font-size: 12px; }
  .auth-verify__tag { font-size: 9px; }
  .auth-submit { padding: 12px; font-size: 13px; }
  .auth-split__hero { padding: 18px 16px 14px; }
  .auth-split__title { font-size: 20px; }
  .auth-split__tagline { font-size: 11.5px; }
  .auth-split__form { padding: 18px 16px 20px; }
  .auth-inline-action { padding: 5px 10px; font-size: 11px; }
  .auth-hint { font-size: 10.5px; }
}

@media (max-width: 480px) {
  .auth-input, .auth-input:focus { font-size: 16px; padding-top: 10px; padding-bottom: 10px; }
}