/* Custom Fixes */

/* Hide the step progress bar */
.progress-bar-animated,
.step-pulse,
[class*="progress-bar"],
[class*="step-indicator"] {
  display: none !important;
}

/* Hide "You are in the queue!" text on queue page */
h1:contains("You are in the queue"),
h1[style*="font-size:32px"]:contains("queue") {
  display: none !important;
}

/* Alternative approach - hide by content */
[style*="font-size:32px"][style*="font-weight:700"] {
  &:has-text("You are in the queue") {
    display: none !important;
  }
}

/* Optimize Mobile Touch Targets - Minimum 44x44px */
@media (max-width: 768px) {
  /* Ensure all buttons have minimum touch target size */
  button,
  a[role="button"],
  [class*="button"],
  [class*="btn"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
  }

  /* Quest buttons - ensure proper tap targets */
  .quest-button-gradient,
  .quest-button-waiting,
  .primary-button-gradient,
  .success-button-gradient,
  .danger-button-gradient {
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }

  /* Interactive icons and small buttons */
  [class*="icon"],
  [role="button"][class*="icon"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
  }

  /* Links that act as buttons */
  a:not([href^="http"]):not([href^="/"]):not([href^="#"]) {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    padding: 10px 12px !important;
  }

  /* Form inputs for better usability */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 12px !important;
    /* Fix for username input weirdness */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Add padding for icon/spinner on right */
    padding-right: 44px !important;
  }

  /* Fix loading spinner/icon overlap on username input */
  input[type="text"] + *[class*="spin"],
  input[type="text"] ~ *[class*="spin"],
  [class*="animate-spin"] {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  /* Container for input with icon */
  div:has(> input[type="text"]) {
    position: relative !important;
  }

  /* Fix Next/Continue button size changing on mobile */
  button[type="submit"],
  button[class*="next"],
  button[class*="continue"],
  button:contains("Next"),
  button:contains("Continue") {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    flex-shrink: 0 !important;
    /* Prevent size changes */
    flex-grow: 0 !important;
    box-sizing: border-box !important;
  }

  /* Prevent layout shifts when input is focused */
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid #335fff !important;
    outline-offset: 2px !important;
  }

  /* Fix container that holds username input and button */
  form,
  [class*="form"],
  [class*="input-container"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Ensure snowflakes are behind content on all devices including mobile */
.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1 !important;
  overflow: hidden;
}

/* Reorder mobile GUI: Choose Reward → Live Chat → Help */
@media (max-width: 768px) {
  /* Target the main container that holds the tabs/sections */
  [class*="flex"][class*="xl:flex-row"]:has([class*="xl:w-80"]),
  [class*="container"]:has([class*="tab"]),
  [class*="navigation"]:has([class*="tab"]) {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Reorder sections using flexbox order property */
  /* Choose Reward - First (order: 1) */
  [class*="tab"]:has([href*="reward"]),
  [class*="step"]:has([class*="reward"]),
  section:has([class*="reward"]),
  div:has(> *:contains("Choose")) {
    order: 1 !important;
  }

  /* Live Chat - Second (order: 2) */
  [class*="tab"]:has([href*="chat"]),
  [class*="chat"],
  section:has([class*="chat"]),
  div:has(> *:contains("Live Chat")) {
    order: 2 !important;
  }

  /* Help - Third (order: 3) */
  [class*="tab"]:has([href*="help"]),
  [class*="help"],
  section:has([class*="help"]),
  div:has(> *:contains("Help")) {
    order: 3 !important;
  }
}

/* Fix for mobile offer scraping - ensure proper iframe and container sizing */
@media (max-width: 768px) {
  /* Ensure snowflakes stay in background on mobile */
  .snowflakes {
    z-index: -1 !important;
  }

  /* Fix offer iframe on mobile */
  iframe[src*="offer"],
  iframe[id*="offer"],
  .offer-container iframe,
  .offer-frame {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    min-height: 600px !important;
    border: none !important;
  }

  /* Ensure offer containers are full width on mobile */
  .offer-container,
  [class*="offer-wrapper"],
  [class*="offerwall"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Ensure all offer links open in new tab on mobile */
  a[href*="offer"],
  a[id*="offer"],
  [class*="quest"] a,
  [class*="offer"] a {
    /* Force new window behavior */
    target: _blank !important;
  }
}