/* Mobile styles for landing page */

/* Slide sidebar in from the left on mobile when body has sidebar-mobile-open.
   This works regardless of viewport width (we use !important to beat the
   default left-[-100%] inline-utility) so the same class is also useful on
   tablet sizes.

   We animate transform (GPU-composited) rather than `left`: pin the panel at
   left:0 and push it fully off-screen with translateX(-100%), then slide it in
   to translateX(0). Animating `left` from -100% triggered a layout on every
   frame, which made the open feel fast/janky on phones. transform is smooth
   and we give it its own slightly longer easing instead of the global 0.15s
   transition-all. */
@media (max-width: 1023px) {
    aside.sidebar {
        left: 0 !important;
        transform: translateX(-100%);
        will-change: transform;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    body.sidebar-mobile-open aside.sidebar {
        transform: translateX(0);
        z-index: 50 !important;
    }
    /* When the sidebar slides in it gets bumped to z-50 (above) — the same z as
       the header bar — and, coming later in the DOM, it paints over the centered
       mobile logo and slices off its left half (the panel is 280px wide on the
       left, the logo is centered). Lift the header bar above the open sidebar so
       the logo stays fully visible on top while you navigate/scroll the sidebar. */
    body.sidebar-mobile-open .nx-headerbar {
        z-index: 60 !important;
    }
}

/* iOS Safari miscomputes `right: -100%` on a fixed+w-full element, leaving
   the navbar bell button visible on the right edge. Hide the navbar wrapper
   entirely with display:none when not open. */
@media (max-width: 1023px) {
    .fixed.right-\[-100\%\] {
        display: none !important;
    }
    body.navbar-collapsed .fixed.right-\[-100\%\] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        right: 0 !important;
        padding: 24px !important;
    }
    /* Each inner row inside the navbar (user info row, utilities row) renders
       as a single centered horizontal flex row that wraps cleanly without the
       bell jumping to its own line on iOS. */
    body.navbar-collapsed .fixed.right-\[-100\%\] > div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Backdrop scrim behind whichever menu is open. */
    body.sidebar-mobile-open::before,
    body.navbar-collapsed::before {
        content: "";
        position: fixed;
        inset: 83px 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 4;
        pointer-events: none;
    }
}

/* Hide cursor animations on mobile */
@media (max-width: 767px) {
  /* Dashboard cards: the absolutely-positioned radial-gradient overlay
     (decorative yellow glow) renders as a solid black rectangle on iOS
     Safari due to a transform + border-radius:50% bug. It's purely
     cosmetic so just nuke it on mobile. */
  .blur-reveal > .card-hover > div[style*="radial-gradient"] {
    display: none !important;
  }

  .cursor {
    display: none !important;
  }
  .cursor2 {
    display: none !important;
  }

  /* Hero video: undo scale-[2] on mobile */
  #tsparticles video {
    scale: 1 !important;
    width: 100% !important;
  }

  /* Keys section: reset 3D transforms */
  .flex-wrap.gap-1[style*="perspective"] {
    transform: none !important;
    rotate: 0deg !important;
  }
  .card.keys[style*="perspective"],
  .card.keys[style*="translateY"] {
    transform: none !important;
  }

  /* Notifications panel: reset perspective transform */
  .space-y-4[style*="perspective"] {
    width: 100% !important;
    transform: none !important;
  }

  /* Reseller info card */
  .w-full.lg\:w-1\/2.max-w-md[style*="min-height"] {
    min-height: auto !important;
    padding-right: 1rem !important;
    margin-bottom: 30px !important;
  }

  /* Pricing / buying-keys section */
  #buying-keys-section .flex-col.items-center[style*="margin-left"] {
    margin-left: 0 !important;
  }
  #buying-keys-section .grid[style*="rotate"] {
    rotate: 0deg !important;
    transform: none !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Header */
  header .container-sm .flex.items-center {
    height: auto !important;
    min-height: 100px;
    padding: 15px 0;
  }
  

  
  header .logox {
    height: 50px !important;
  }
  
  /* Text sizes */
  h2, .text-3xl, .text-4xl {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  .text-2xl {
    font-size: 1.1rem !important;
  }
  
  .text-lg {
    font-size: 0.95rem !important;
  }
  
  /* Container padding */
  .container-sm, .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Why Us section */
  #why-us .grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  /* Support section - ticket card */
  #whyus .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  #whyus .w-full.lg\:w-1\/2 {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    padding: 0 !important;
  }
  
  .tckt {
    transform: none !important;
    scale: 1 !important;
    padding: 0 !important;
    rotate: 0deg !important;
  }
  
  /* Keys cards */
  .flex-wrap.gap-1 {
    transform: none !important;
    rotate: 0deg !important;
    gap: 10px !important;
  }
  
  .card.keys {
    transform: none !important;
    width: 100% !important;
  }
  
  /* Notifications section */
  #notifications .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  #notifications .w-full.lg\:w-1\/2 {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    padding: 10px !important;
  }
  
  #notifications .space-y-4[style*="transform"] {
    width: 100% !important;
    transform: none !important;
    rotate: 0deg !important;
  }
  
  /* Reseller section */
  #notifications .w-full.lg\:w-1\/2.max-w-md {
    min-height: auto !important;
    margin-bottom: 30px !important;
    padding: 15px !important;
  }
  
  #notifications .flex-wrap.gap-1 {
    gap: 8px !important;
  }
  
  #notifications .box {
    width: 100% !important;
    flex-grow: 1 !important;
  }
  
  /* Buying keys section */
  #buying-keys-section {
    border-right: none !important;
    padding: 15px !important;
    overflow: visible !important;
  }
  
  #buying-keys-section h2 {
    text-align: center !important;
    margin-top: 20px !important;
  }
  
  #buying-keys-section .flex.flex-col.items-center.text-center {
    margin-left: 0 !important;
  }
  
  #buying-keys-section .grid {
    grid-template-columns: 1fr !important;
    transform: none !important;
    rotate: 0deg !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    gap: 20px !important;
  }
  
  /* Hide product card preview on mobile */
  #buying-keys-section .card.product {
    display: none !important;
  }
  
  /* Pricing card */
  .cardlanding.priceng {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  
  .cardlanding.priceng .xl\:w-\[360px\] {
    width: 100% !important;
  }
  
  /* Success card */
  .cardlanding.succs {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  
  /* Products section */
  #products .grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  #products .card {
    max-width: 100% !important;
  }
  
  /* Footer */
  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 30px !important;
  }
  
  footer .space-y-4,
  footer .space-y-6 {
    text-align: center !important;
  }
  
  footer img {
    margin: 0 auto !important;
  }
  
  footer .flex.justify-center.gap-16 {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* Fix: allow touch scrolling over hero section */
  #tsparticles canvas {
    touch-action: pan-y !important;
    pointer-events: none !important;
  }

  #tsparticles video {
    transform: scale(1) !important;
    pointer-events: none !important;
  }

  #tsparticles {
    pointer-events: none !important;
  }

  /* ...but the hero CTAs live INSIDE #tsparticles, so the rule above made
     them untappable on mobile. The canvas/video already block their own
     pointer events for scroll pass-through, so re-enable taps on the actual
     interactive children (the two buttons + the logo link). */
  #tsparticles #button1,
  #tsparticles #button2,
  #tsparticles .logoshine {
    pointer-events: auto !important;
  }

  /* Hide decorative elements */
  .de-gradient-edge-bottom {
    display: none !important;
  }

  /* Hero buttons */
  .btn.button.btn-2xl {
    min-width: 160px !important;
    font-size: 1rem !important;
    padding: 10px 16px !important;
  }
  
  .flex.justify-center.gap-6.flex-wrap {
    gap: 12px !important;
    flex-direction: column !important;
    align-items: center !important;
  }

}

/* Medium mobile and small tablets */
@media (min-width: 481px) and (max-width: 767px) {
  /* Fix: allow touch scrolling over hero section */
  #tsparticles canvas {
    touch-action: pan-y !important;
    pointer-events: none !important;
  }

  #tsparticles video {
    transform: scale(1.2) !important;
    pointer-events: none !important;
  }

  #tsparticles {
    pointer-events: none !important;
  }

  /* Re-enable taps on the hero CTAs inside #tsparticles (see the <=480px
     block above for the full rationale). */
  #tsparticles #button1,
  #tsparticles #button2,
  #tsparticles .logoshine {
    pointer-events: auto !important;
  }

  header nav {
    display: none !important;
  }
  
  h2, .text-3xl, .text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  /* Why Us section */
  #why-us .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
  }
  
  /* Support section */
  #whyus .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  #whyus .w-full.lg\:w-1\/2 {
    width: 100% !important;
    border-right: none !important;
  }
  
  .tckt {
    transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
  }
  
  .flex-wrap.gap-1 {
    transform: none !important;
    rotate: 0deg !important;
  }
  
  .card.keys {
    transform: none !important;
  }
  
  /* Notifications section */
  #notifications .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  #notifications .w-full.lg\:w-1\/2 {
    width: 100% !important;
    border-right: none !important;
  }
  
  #notifications .space-y-4[style*="transform"] {
    width: 100% !important;
    transform: none !important;
    rotate: 0deg !important;
  }
  
  /* Buying keys section */
  #buying-keys-section {
    border-right: none !important;
  }
  
  #buying-keys-section .grid {
    grid-template-columns: 1fr !important;
    transform: none !important;
    rotate: 0deg !important;
  }
  
  #buying-keys-section .card.product {
    display: none !important;
  }
  
  .cardlanding.priceng {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  .cardlanding.succs {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  /* Products section */
  #products .grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Footer */
  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Why Us section */
  #why-us .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Support section */
  #whyus .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  #whyus .w-full.lg\:w-1\/2 {
    width: 100% !important;
    border-right: none !important;
  }
  
  .tckt {
    transform: perspective(500px) rotateX(5deg) !important;
    scale: 0.95 !important;
  }
  
  /* Notifications section */
  #notifications .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
  }
  
  #notifications .w-full.lg\:w-1\/2 {
    width: 100% !important;
    border-right: none !important;
  }
  
  /* Buying keys section - simplified transform */
  #buying-keys-section .grid {
    transform: perspective(2000px) rotateX(10deg) rotateY(15deg) !important;
  }
  
  .cardlanding.succs {
    display: none !important;
  }
  
  /* Products section */
  #products .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Footer */
  footer .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================
   GLOBAL MOBILE HARDENING
   Goal: no page should require horizontal swiping on a phone.
   These rules are additive and scoped to small screens, so they
   don't change the desktop layout.
   ============================================================ */
@media (max-width: 1023px) {
  /* Kill horizontal overflow at the root. Anything that tries to be wider
     than the screen gets clipped/scrolled within its own box instead of
     pushing the whole page sideways. */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Media never exceeds the viewport width. */
  img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* (canvas height is driven by its own container, don't force auto there) */
  canvas { height: auto; }

  /* Wide data tables: scroll *inside* their wrapper, not the page.
     Most panel pages put tables in .datatable-wrapper or .table-responsive;
     cover both, plus the DataTables-generated wrapper. */
  .datatable-wrapper,
  .table-responsive,
  .dataTables_wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .datatable-wrapper table,
  .table-responsive table,
  .dataTables_wrapper table.dataTable {
    width: 100% !important;
  }

  /* Long unbroken strings (license keys, hashes, URLs) must wrap. */
  .break-anywhere,
  .license-key,
  .key-string {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Generic safety: cards and the fluid container can't exceed the screen. */
  .container-fluid {
    max-width: 100vw !important;
  }
}

/* ------------------------------------------------------------
   MODALS on phones — fit the screen, scroll internally, never
   overflow. Applies to every .modal (upgrade, reset-HWID, error
   / success popups, etc.). The bell + language dropdowns are NOT
   .modal elements so they're unaffected.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .modal > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
  }
  .modal .card {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Modal body scrolls within the viewport instead of growing past it. */
  .modal .card-body {
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Upgrade modal: stack the duration grid into a single column so the
     option cards aren't cramped on narrow screens. */
  #upgrade-extend-list {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------
   PANEL PAGE BODY — the main content sits to the right of a fixed
   280px sidebar on desktop (lg:pl-[280px]). On phones the sidebar
   is off-canvas, so the left padding is already removed by the
   utility; we just make sure the content area can't overflow.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  main.body-bg {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Search/filter bars and any flex row that was forced wide can wrap. */
  .search-form {
    max-width: 100% !important;
  }
  /* The magnifying-glass is a Lottie container (.search) with width:auto
     and — unlike the status icons — no `svg { width:100% }` clamp, so the
     injected SVG expands to its native width and drifts toward the middle
     of the search bar instead of sitting at left-[16px]. Pin the container
     to an 18px square and make the SVG fill exactly that. */
  .search-form .search {
    width: 18px !important;
    height: 18px !important;
  }
  .search-form .search svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}

/* ------------------------------------------------------------
   BUY-KEY / RESELLER product + Rebrands cards.
   Desktop markup is left untouched (flex gap-6 / w-[124px] avatar),
   so the desktop proportions match the reference exactly. Below we
   only shrink the avatar column + gap as the viewport narrows so the
   image never dwarfs the grid box on phones, and let the details
   column keep its full width (min-w-0 prevents overflow).
   .rk-row = the avatar+details flex row, .rk-avatar = the avatar col.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .rk-row {
    gap: 1rem !important;
  }
  .rk-avatar {
    width: 104px !important;
  }
}
@media (max-width: 420px) {
  .rk-row {
    gap: 0.75rem !important;
  }
  .rk-avatar {
    width: 84px !important;
  }
}
@media (max-width: 360px) {
  .rk-avatar {
    width: 72px !important;
  }
}

/* ------------------------------------------------------------
   BUY-KEY product cards — phone overflow fix + title centering.

   Root cause of the card shooting off the right edge: CSS grid and
   flex items default to min-width:auto (their intrinsic content
   width), so a track/item never shrinks below its content. The
   #productList grid track, the .rk-row flex, the details column and
   the stepper controls all have to be told they may shrink, otherwise
   the widest piece of content (e.g. the "In Development" badge with
   white-space:nowrap, or the number input) blows the card wider than
   the screen. We also clamp the card itself to the viewport as a
   hard backstop. All phone-only; desktop proportions untouched.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* 1) Let the single-column grid track shrink to the viewport. */
  #productList {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* 2) Let every nested flex container/item shrink instead of forcing
        its intrinsic width up the tree. Covers both the dynamic product
        cards and the static "Rebrands" cards (same .rk-row markup). */
  #productList > .card,
  #productList .card-body,
  .rk-row,
  .rk-row > div,
  .rk-row form,
  .rk-row .relative.flex,
  .rk-row input,
  .rk-row .form-select,
  .rk-row .versionSelect,
  .rk-row .quantityInput {
    min-width: 0 !important;
  }
  /* 3) Hard backstop: a card can never exceed the column it sits in. */
  #productList > .card {
    max-width: 100% !important;
  }
  /* 4) The status badge uses white-space:nowrap; on the narrowest
        phones a long label ("In Development") is what forces the
        avatar column — and the whole card — too wide. Let it wrap. */
  .rk-avatar .btn-xs {
    white-space: normal !important;
  }
}

/* Center the game category + version title above the dropdown on ALL
   viewports (desktop + mobile), for every product card. This also keeps
   the title clear of the long "In Development" status badge, so the old
   desktop-only right-nudge is no longer needed. */
#productList .rk-title {
  justify-content: center !important;
  text-align: center !important;
}

/* ------------------------------------------------------------
   SUPPORT / GUIDE page (support/guide.php).

   (A) Non-scrollable on desktop: lock <main> to exactly the
       viewport height (minus the 83px fixed header) and hide
       overflow so the page can never scroll. Make the inner stack
       a flex column and give the book image margin-top:auto so it
       is ALWAYS pinned to the bottom, scaling into whatever space
       is left under the cards. min-height:0 lets the flex children
       shrink instead of overflowing.
   (B) Equal-size cards: the three cards sit in a CSS grid whose
       rows already stretch, but each .card only took its content
       height, so unequal text made them look different sizes
       (most visible when the sidebar is expanded and the columns
       are narrow). Force the cell + card + card-body to fill the
       row height and push the button to the bottom, so all three
       are identical regardless of text length.
   Both scoped to xl+ (1280px), where the grid actually lays the
   cards out 3-across (xl:grid-cols-3). Below that the cards stack
   in a single column, so the page is left scrollable as normal.
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  /* (A) lock the page to the viewport, no scroll */
  .guide-main {
    height: 100vh !important;
    overflow: hidden !important;
  }
  .guide-container {
    height: calc(100vh - 83px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .guide-stack {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* image always at the bottom, filling the leftover space */
  .guide-bookbg {
    margin-top: auto !important;
    min-height: 0 !important;
    max-height: 45vh !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* (B) make the three cards identical in size */
  .guide-stack .grid > .up2 {
    display: flex !important;
  }
  .guide-stack .grid > .up2 > .card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .guide-stack .grid > .up2 > .card > .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Guarantee a gap beneath the description before the button. The button
     has margin-top:auto, so on the SHORT card it floats far down (big gap)
     but on the card with the longest description there's almost no leftover
     auto-space, leaving the desc sitting directly on top of the button. A
     fixed margin-bottom on the title/desc block is a floor the auto-margin
     can't eat into, so every card keeps a consistent gap under card-desc. */
  .guide-stack .grid > .up2 > .card > .card-body > .space-y-1 {
    margin-bottom: 1.5rem !important;
  }
  /* push the download/go-to button to the bottom of every card so the
     differing description lengths don't change the button position */
  .guide-stack .grid > .up2 > .card > .card-body > .btn {
    margin-top: auto !important;
  }
}