/* TAIF V5 — Price Screen Mobile Wider Capsules V6
   Goal: use the free space near the currency name by widening the red/green
   number capsules horizontally, without allowing overflow outside the phone width. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    /* Rebalance width: slightly smaller name/code/flags, wider number capsules */
    grid-template-columns:
      minmax(34px,.48fr)
      minmax(76px,1.18fr)
      minmax(54px,.84fr)
      minmax(21px,.24fr)
      minmax(54px,.84fr)
      minmax(54px,.84fr)
      minmax(21px,.24fr)
      minmax(54px,.84fr) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    padding-inline:1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.8px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    padding:0 3px !important;
    font-size:10px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
    max-width:17px !important;
    max-height:17px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    /* This exact balance is tuned for narrow phones like the user's screenshot */
    grid-template-columns:
      minmax(33px,.46fr)
      minmax(68px,1.02fr)
      minmax(51px,.82fr)
      minmax(20px,.22fr)
      minmax(51px,.82fr)
      minmax(51px,.82fr)
      minmax(20px,.22fr)
      minmax(51px,.82fr) !important;
    gap:2px !important;
    padding:2px 1px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:9.5px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.4px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag-image,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag .price-screen__flag-image{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    max-width:16px !important;
    max-height:16px !important;
  }
}