/* ONTALA_MOBILE_LAYOUT_FIX_V2 */

@media (max-width:620px){

  html,
  body.bb-body{
    max-width:100% !important;
    overflow-x:clip !important;
  }

  .bb-wrap{
    width:100% !important;
    max-width:100% !important;
    padding:8px !important;
  }

  .bb-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    row-gap:8px !important;
    column-gap:8px !important;
  }

  .bb-grid > .bb-card{
    min-width:0 !important;
    overflow:hidden !important;
  }

  /*
    چهار کارت ابتدای تابلو:
    مثقال، گرم 18، خرید آبشده و خرید اتحادیه.
    در موبایل تمام عرض میشوند تا مبلغ و تومان بیرون نزند.
  */
  .bb-grid > .bb-card:nth-child(-n+4){
    grid-column:1 / -1 !important;
    min-height:88px !important;
    padding:11px 14px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-card-title{
    min-height:0 !important;
    margin-bottom:4px !important;
    font-size:13px !important;
    line-height:1.4 !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line{
    display:flex !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:5px !important;
    min-width:0 !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    min-width:0 !important;
    max-width:calc(100% - 48px) !important;
    overflow:visible !important;
    white-space:nowrap !important;
    font-size:clamp(24px,7vw,30px) !important;
    line-height:1.12 !important;
    letter-spacing:-.7px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > small{
    flex:0 0 auto !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-size:11px !important;
  }

  /*
    کارت های دو ستونه بعدی:
    سکه، ارز، یورو و درهم، حباب و طلای جهانی.
  */
  .bb-grid > .bb-card:nth-child(n+5){
    min-height:0 !important;
    padding:10px !important;
  }

  .bb-grid > .bb-card:nth-child(n+5) .bb-card-title{
    min-height:32px !important;
    margin-bottom:4px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .bb-card-title{
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
  }

  .bb-rate-row{
    min-width:0 !important;
    gap:6px !important;
  }

  .bb-rate-row span{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:10px !important;
  }

  .bb-rate-row strong{
    min-width:0 !important;
    white-space:nowrap !important;
    font-size:clamp(13px,3.8vw,15px) !important;
    line-height:1.35 !important;
    letter-spacing:-.35px !important;
  }

  .bb-card .bb-price-line{
    min-width:0 !important;
  }

  .bb-card .bb-price-line > strong{
    min-width:0 !important;
  }
}

@media (max-width:390px){

  .bb-wrap{
    padding:7px !important;
  }

  .bb-grid{
    gap:7px !important;
    row-gap:7px !important;
    column-gap:7px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4){
    padding:10px 12px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    font-size:clamp(22px,6.4vw,26px) !important;
  }

  .bb-rate-row strong{
    font-size:13px !important;
  }
}

/* ONTALA_MOBILE_TOP4_GRID_FIX_V3 */

@media (max-width:620px){

  /*
    چهار کارت اول:
    مثقال، گرم 18، خرید آبشده و خرید اتحادیه
    در دو ردیف دوتایی باقی میمانند.
  */
  .bb-grid > .bb-card:nth-child(-n+4){
    grid-column:auto !important;
    min-height:82px !important;
    padding:9px 10px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-card-title{
    min-height:22px !important;
    margin-bottom:3px !important;
    font-size:11px !important;
    line-height:1.35 !important;
    text-align:right !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line{
    display:flex !important;
    direction:rtl !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap:3px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:visible !important;
    white-space:nowrap !important;
    font-size:clamp(18px,5.15vw,21px) !important;
    line-height:1.15 !important;
    letter-spacing:-.85px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > small{
    flex:0 0 auto !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-size:9px !important;
    line-height:1.2 !important;
  }
}

@media (max-width:390px){

  .bb-grid > .bb-card:nth-child(-n+4){
    min-height:79px !important;
    padding:8px 9px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-card-title{
    font-size:10.5px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    font-size:clamp(17px,4.9vw,19px) !important;
    letter-spacing:-1px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > small{
    font-size:8.5px !important;
  }
}

@media (max-width:360px){

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    font-size:16px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-card-title{
    font-size:10px !important;
  }
}

/* ONTALA_MOBILE_POLISH_V4 */

@media (max-width:620px){

  /*
    تومان باید کنار عدد بماند، نه در لبه مخالف کارت.
  */
  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line{
    justify-content:flex-start !important;
    gap:4px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    flex:0 1 auto !important;
    max-width:calc(100% - 42px) !important;
    font-size:clamp(17px,4.95vw,20px) !important;
    letter-spacing:-.9px !important;
  }

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > small{
    flex:0 0 auto !important;
    font-size:9px !important;
  }

  /*
    کارت حباب با مبلغ طولانی در موبایل تمام عرض نمایش داده میشود.
  */
  .bb-grid > .bb-card.bb-mobile-wide-rate{
    grid-column:1 / -1 !important;
    min-height:88px !important;
    padding:10px 12px !important;
  }

  .bb-grid > .bb-card.bb-mobile-wide-rate .bb-card-title{
    min-height:22px !important;
    margin-bottom:4px !important;
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .bb-grid > .bb-card.bb-mobile-wide-rate .bb-price-line{
    display:flex !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:5px !important;
    min-width:0 !important;
  }

  .bb-grid > .bb-card.bb-mobile-wide-rate .bb-price-line > strong{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:calc(100% - 44px) !important;
    white-space:nowrap !important;
    font-size:clamp(18px,5.3vw,22px) !important;
    letter-spacing:-.9px !important;
  }

  .bb-grid > .bb-card.bb-mobile-wide-rate .bb-price-line > small{
    flex:0 0 auto !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-size:10px !important;
  }

  /*
    تابلوهایی که شعار ندارند، نوار سفید خالی نمایش ندهند.
  */
  .bb-slogan.bb-mobile-empty-slogan{
    display:none !important;
  }
}

@media (max-width:390px){

  .bb-grid > .bb-card:nth-child(-n+4) .bb-price-line > strong{
    font-size:clamp(16px,4.7vw,18px) !important;
  }

  .bb-grid > .bb-card.bb-mobile-wide-rate .bb-price-line > strong{
    font-size:clamp(17px,5vw,20px) !important;
  }
}


/* ONTALA_BUBBLE_MOBILE_SIZE_MATCH_GREEN_V1 */
@media (max-width: 767px){
  /*
   * کارت حباب تک ردیفی است و نباید از کارت چندردیفی يورو و درهم تاثير بگيرد.
   * اندازه عدد مانند کارت يک گرم طلاي 18 عيار در رديف اول موبایل تنظيم ميشود.
   */
  .bb-grid > article.bb-card.orange:not(.bb-multi) .bb-price-line > strong{
    font-size:var(--bb-price) !important;
    line-height:1.16 !important;
  }
}

/* ONTALA_BUBBLE_MOBILE_SIZE_MATCH_JIGAR_V2 */
@media (max-width: 767px){
  /*
   * Bubble card number matches normal single-rate cards,
   * such as "خرید آبشده گرمی", while keeping orange color.
   */
  .bb-grid > article.bb-card.orange:not(.bb-multi) .bb-price-line > strong{
    font-size:calc(var(--bb-price) * .50) !important;
    line-height:1.2 !important;
  }
}