/* stop iOS/Android auto text inflation */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (max-width: 820px){
  /* --- iOS focus-zoom fix: 16px minimum on every form control --- */
  input[type=text],input[type=email],input[type=password],input[type=search],
  input[type=tel],input[type=number],input[type=url],input[type=date],
  select,textarea,
  .woocommerce form .form-row input.input-text,
  .sb-search input,#promoPhone,#sb_set_code,.sb-code-input input,
  .sb-code-input select,.news-form input{
    font-size:16px !important;
  }

  /* verification gate: comfortable rows + tap target */
  .check{align-items:flex-start;padding:14px 15px}
  .check > label{margin:0;line-height:1.5;flex:1}
  .check input{margin-top:2px}

  /* new promo bar: never clip the code pill; let it wrap cleanly */
  .sb-jb2-inner{padding:9px 40px}
  .sb-jb2-code{padding:3px 12px}

  /* account login/register cards: comfortable padding on phones */
  #customer_login .u-column1,#customer_login .u-column2{padding:26px 20px}

  /* partner dashboard: chart + payout controls stay inside the screen */
  .sb-chart{gap:7px;height:130px}
  .sb-bar-val{font-size:10px}
  .sb-payout-form .sb-code-input{flex-direction:column}
  .sb-payout-form .sb-code-input select,
  .sb-payout-form .sb-code-input input,
  .sb-payout-form .sb-code-input button{width:100%}
  .sb-dash-head{align-items:flex-start}
}

/* Verification gate: scroll instead of trapping the user when the card is
   taller than the viewport (small phones / landscape). margin:auto keeps it
   centered whenever there is room. */
#gate{align-items:flex-start;overflow-y:auto}
.gate-card{margin:auto}

@media (max-width: 480px){
  /* COA empty-state + hero breathing room */
  .sb-coa-hero{margin-bottom:32px}
  .sb-coa-hero h1{font-size:28px}
  /* keep the earnings figures legible when 6 bars share a phone width */
  .sb-chart{gap:5px}
  .sb-bar-label{font-size:10px}
}