/*
  BaitoCrypto.fun Mobile Ultra
  ------------------------
  Goals:
  - Best-in-class mobile readability for faucet flows.
  - Keep actions thumb-friendly.
  - Make the left ad rail collapsible on tablet/mobile (off-canvas).
  - Prevent "button wraps" and broken layouts.
*/

:root{
  --m-pad: 14px;
  --m-gap: 12px;
  --m-radius: 18px;
  --m-tap: 44px; /* minimum tap target */
}

/* =============================
   Global mobile rhythm
   ============================= */
@media (max-width: 820px){
  .cf-main-inner{ padding-bottom: 96px; }
  .cf-page{ padding: 0; }
  .cf-flash-stack{ margin-top: 6px; }

  /* Cards and sections: consistent radius + spacing */
  .cf-card,
  .ds-card,
  .db-card,
  .owx-hero,
  .owx-feature,
  .owx-panel-head,
  .launch-card,
  .lb-hero,
  .settings-shell,
  .withdraw-shell{
    border-radius: var(--m-radius) !important;
  }

  /* Make common button rows wrap cleanly */
  .btn-row,
  .db-actions,
  .launch-actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-gap);
  }
  .btn-row > *,
  .db-actions > *,
  .launch-actions > *{
    flex: 1 1 calc(50% - var(--m-gap));
    min-width: 0;
  }

  /* Tap target */
  button,
  .btn,
  .cf-btn,
  .hx-btn,
  .btn-neon,
  a.btn,
  a.cf-btn{
    min-height: var(--m-tap);
  }
}

/* Offerwall onboarding block (works desktop + mobile) */
.owx-onboard{
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.16);
}
.owx-onboard-title{ font-weight: 800; letter-spacing: .2px; margin-bottom: 8px; }
.owx-onboard-steps{ margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.owx-onboard-steps li{ display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: rgba(226,232,240,.92); }
.owx-onboard-steps .n{
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.32);
  font-weight: 800; font-size: 12px;
}
.owx-onboard-actions{ margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.owx-onboard-actions > a{ flex: 1 1 220px; min-width: 0; justify-content: center; }

@media (max-width: 520px){
  :root{ --m-pad: 12px; }
  .btn-row > *,
  .db-actions > *,
  .launch-actions > *{ flex: 1 1 100%; }
}


/* =============================
   Offerwalls (mobile)
   ============================= */
@media (max-width: 820px){
  .offerwalls-page{ padding: 0 var(--m-pad) !important; }
  .owx-hero{ padding: 16px !important; }
  .owx-hero{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .owx-feature{ order: 2; }

  /* Tabs become scrollable pills */
  .owx-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px;
  }
  .owx-tabs::-webkit-scrollbar{ height: 0; }
  .offerwall-tab{ white-space: nowrap; }

  /* Frames: keep within viewport */
  .offerwall-frame iframe{
    height: min(72vh, 720px) !important;
  }
}


/* =============================
   Left ads rail: sticky desktop, collapsible mobile/tablet
   ============================= */

/* Floating toggle button */
.cf-ads-fab{
  position: fixed;
  left: 14px;
  bottom: 92px; /* above mobile sticky + bottom nav */
  z-index: 10050;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(10px);
  color: rgba(226,232,240,.95);
  font-weight: 700;
  letter-spacing: .2px;
}
.cf-ads-fab__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.9);
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}

/* Backdrop */
.cf-ads-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: none;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(2px);
}

/* Off-canvas rail behavior */
@media (max-width: 1100px){
  .cf-ads-fab{ display: inline-flex; }

  /* Prevent stacking rail above content */
  .cf-page-grid{ grid-template-columns: 1fr !important; max-width: 980px; }

  .cf-rail-left{
    position: fixed !important;
    top: var(--cf-topnav-safe) !important;
    left: 0;
    height: calc(100vh - var(--cf-topnav-safe)) !important;
    width: min(360px, 88vw) !important;
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 10060;
    background: rgba(2,6,23,.72);
    backdrop-filter: blur(14px);
    border-right: 1px solid rgba(148,163,184,.22);
    padding: 12px;
    overflow: auto;
  }

  .cf-rail-left .cf-rail-inner{ width: 100% !important; transform: none !important; }

  body.cf-ads-open .cf-rail-left{ transform: translateX(0); }
  body.cf-ads-open .cf-ads-backdrop{ display: block; }
  body.cf-ads-open{ overflow: hidden; }
}


/* =============================
   Micro-fixes: prevent label wrapping on small buttons
   ============================= */
@media (max-width: 820px){
  .btn, .cf-btn, .btn-neon{ white-space: nowrap; }
  .btn.small, .cf-btn.small{ padding-left: 12px; padding-right: 12px; }
}