/* TAIF V5 — Mobile Price Screen One Row V1
   Base: TAIF-V5-CLOUDFLARE-MOBILE-TOPBAR-FOUR-SECTIONS-V1.zip
   Scope: شاشة الأسعار فقط في وضع الموبايل. */

@media (max-width: 860px){
  body.taif-mobile-mode .panel[data-view="price-screen"]{
    overflow:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:4px 2px 6px !important;
    gap:4px !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-head{
    display:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:stretch !important;
    align-items:stretch !important;
    gap:4px !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    display:grid !important;
    /* desktop order without pair column */
    grid-template-columns:
      minmax(34px,.56fr)
      minmax(68px,1.42fr)
      minmax(41px,.66fr)
      minmax(24px,.30fr)
      minmax(41px,.66fr)
      minmax(41px,.66fr)
      minmax(24px,.30fr)
      minmax(41px,.66fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:40px !important;
    gap:2px !important;
    margin:0 !important;
    padding:2px !important;
    border-radius:10px !important;
    border:1px solid rgba(148,163,184,.18) !important;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row--usd{
    background:linear-gradient(180deg,#f7fbff 0%,#fff 100%) !important;
    border-color:rgba(37,99,235,.16) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 2px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    line-height:1 !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
  }

  /* kill the 2-row mobile layout from earlier files */
  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:6 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{grid-column:7 !important;}
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{grid-column:8 !important;}

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-col,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__pair-badge{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *::before{
    display:none !important;
    content:none !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__code{
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    background:linear-gradient(180deg,#f8fafc,#eef2f7) !important;
    border:1px solid rgba(15,23,42,.10) !important;
    color:#1f2937 !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name{
    align-items:center !important;
    justify-content:flex-end !important;
    padding-inline:4px !important;
    background:#fff !important;
    border:1px solid rgba(148,163,184,.16) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    width:100% !important;
    max-width:100% !important;
    font-size:10.4px !important;
    font-weight:800 !important;
    line-height:1 !important;
    color:#0f172a !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num{
    font-size:10px !important;
    font-weight:900 !important;
    font-variant-numeric:tabular-nums !important;
    padding:0 2px !important;
    border-width:1px !important;
    border-style:solid !important;
    text-overflow:ellipsis !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--buy,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-buy{
    border-color:#17994a !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--sell,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__num--dollar-sell{
    border-color:#b91820 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__flag,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__usd-flag{
    padding:0 !important;
    border:1px solid rgba(148,163,184,.16) !important;
    background:#fff !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:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
  }
}

@media (max-width: 430px){
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen{
    padding:3px 1px 6px !important;
    gap:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__board-body,
  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__list{
    gap:3px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row{
    grid-template-columns:
      minmax(31px,.54fr)
      minmax(58px,1.34fr)
      minmax(37px,.62fr)
      minmax(22px,.28fr)
      minmax(37px,.62fr)
      minmax(37px,.62fr)
      minmax(22px,.28fr)
      minmax(37px,.62fr) !important;
    min-height:37px !important;
    padding:2px !important;
    gap:2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__row > *{
    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;
    border-radius:6px !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.2px !important;
  }

  body.taif-mobile-mode .panel[data-view="price-screen"] .price-screen__name-main{
    font-size:9.6px !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;
  }
}