/* TAIF V5 — Price Screen Mobile Group Separator V7
   Adds a light visual separation between the two 3-column numeric groups,
   by inserting a slim spacer track between them. This makes the middle group
   feel slightly closer to the currency name, without causing overflow. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(33px,.44fr)   /* code */
      minmax(66px,.92fr)   /* name */
      minmax(52px,.82fr)   /* group A col 1 */
      minmax(20px,.22fr)   /* group A flag */
      minmax(52px,.82fr)   /* group A col 3 */
      minmax(8px,.10fr)    /* separator gap */
      minmax(52px,.82fr)   /* group B col 1 */
      minmax(20px,.22fr)   /* group B flag */
      minmax(52px,.82fr)   /* group B col 3 */ !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{grid-column:1 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{grid-column:2 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy{grid-column:3 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag{grid-column:4 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell{grid-column:5 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:8 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:9 !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.7px !important;
  }

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

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(32px,.42fr)   /* code */
      minmax(61px,.84fr)   /* name */
      minmax(50px,.80fr)   /* group A col 1 */
      minmax(19px,.20fr)   /* group A flag */
      minmax(50px,.80fr)   /* group A col 3 */
      minmax(7px,.09fr)    /* separator gap */
      minmax(50px,.80fr)   /* group B col 1 */
      minmax(19px,.20fr)   /* group B flag */
      minmax(50px,.80fr)   /* group B col 3 */ !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__name-main{
    font-size:9.2px !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.3px !important;
  }
}