/* Sprint 649
   1) Fix cart promo text/button overlap.
   2) Make sponsored section more visually premium using solid colors only.
   3) Fix ACTUAL mobile cart dock classes from app.php:
      .tf-mobile-market-dock / .tf-mobile-cart-float
*/

/* ============================================================
   DESKTOP CART PROMOS
   ============================================================ */
@media(min-width:1024px){

  /* The previous CTA was absolute-positioned and could collide with copy.
     Make every card a real vertical layout instead. */
  .tf-cart-offers-647 article,
  .tf-cart-offers-647 article.is-primary{
    min-height:172px!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    padding:18px 20px!important;
    overflow:hidden!important;
  }

  .tf-cart-offers-647 article strong{
    max-width:27ch!important;
    margin:0 0 7px!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  .tf-cart-offers-647 article small{
    max-width:52ch!important;
    margin:0!important;
    padding:0!important;
    font-size:9px!important;
    line-height:1.48!important;
  }

  .tf-cart-offers-647 article b{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    margin-top:auto!important;
    transform:none!important;
  }

  /* Attractive sponsored block, still solid-color only. */
  .tf-cart-sponsored-647{
    position:relative!important;
    grid-template-columns:minmax(0,1.38fr) minmax(410px,.86fr)!important;
    gap:20px!important;
    min-height:210px!important;
    padding:26px 28px!important;
    border:1px solid #efcf6a!important;
    border-radius:18px!important;
    background:#fff0b8!important;
    background-image:none!important;
    overflow:hidden!important;
  }

  /* solid decorative panel, not gradient */
  .tf-cart-sponsored-647::after{
    content:"SPONSORED"!important;
    position:absolute!important;
    right:20px!important;
    top:18px!important;
    display:inline-flex!important;
    align-items:center!important;
    min-height:25px!important;
    padding:0 9px!important;
    border:1px solid #143c68!important;
    border-radius:999px!important;
    background:#143c68!important;
    color:#fff!important;
    font-size:7px!important;
    font-weight:900!important;
    letter-spacing:.11em!important;
  }

  .tf-cart-sponsored-copy{
    max-width:720px!important;
    padding-right:18px!important;
  }

  .tf-cart-sponsored-copy h2{
    max-width:22ch!important;
    margin-bottom:10px!important;
    font-size:30px!important;
    line-height:1.05!important;
  }

  .tf-cart-sponsored-copy p{
    max-width:70ch!important;
    margin-bottom:18px!important;
    font-size:10px!important;
    line-height:1.55!important;
  }

  .tf-cart-sponsored-copy>div{
    gap:9px!important;
  }

  .tf-cart-sponsored-copy a{
    min-height:41px!important;
    padding:0 15px!important;
    border-radius:10px!important;
  }

  /* Stats become three distinct solid marketplace cards */
  .tf-cart-sponsored-stats{
    align-self:stretch!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(3,1fr)!important;
    gap:8px!important;
    padding-top:34px!important;
  }

  .tf-cart-sponsored-stats article{
    min-height:0!important;
    padding:12px 15px!important;
    display:grid!important;
    grid-template-columns:86px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    border-radius:11px!important;
    box-shadow:none!important;
  }

  .tf-cart-sponsored-stats article:nth-child(1){
    border:1px solid #123b68!important;
    background:#123b68!important;
  }
  .tf-cart-sponsored-stats article:nth-child(2){
    border:1px solid #d95757!important;
    background:#d95757!important;
  }
  .tf-cart-sponsored-stats article:nth-child(3){
    border:1px solid #efc64e!important;
    background:#fff8df!important;
  }

  .tf-cart-sponsored-stats article:nth-child(1) strong,
  .tf-cart-sponsored-stats article:nth-child(2) strong{
    color:#fff!important;
  }
  .tf-cart-sponsored-stats article:nth-child(1) small,
  .tf-cart-sponsored-stats article:nth-child(2) small{
    color:rgba(255,255,255,.82)!important;
  }
  .tf-cart-sponsored-stats article:nth-child(3) strong{
    color:#17304f!important;
  }
  .tf-cart-sponsored-stats article:nth-child(3) small{
    color:#66758a!important;
  }

  .tf-cart-sponsored-stats strong{
    font-size:20px!important;
    line-height:1!important;
  }

  .tf-cart-sponsored-stats small{
    margin:0!important;
    font-size:8px!important;
  }

  /* lower benefit row a little richer */
  .tf-cart-desktop-insights-646 article{
    position:relative!important;
    overflow:hidden!important;
    border-top:3px solid #1768cf!important;
  }
  .tf-cart-desktop-insights-646 article:nth-child(2){
    border-top-color:#d95757!important;
  }
  .tf-cart-desktop-insights-646 article:nth-child(3){
    border-top-color:#e7b128!important;
  }
  .tf-cart-desktop-insights-646 article:nth-child(4){
    border-top-color:#143c68!important;
  }
}

/* ============================================================
   MOBILE: ACTUAL MARKET DOCK / CART FLOAT
   ============================================================ */
@media(max-width:767px){

  /*
   * Important: child elements are explicitly isolated from generic
   * cart/product SVG and anchor rules. This fixes the giant black cart.
   */
  .tf-mobile-market-dock{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    gap:7px!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  .tf-mobile-cart-float{
    width:100%!important;
    min-width:0!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:7px 8px 7px 10px!important;
    overflow:hidden!important;
    border:1px solid #d9e3ed!important;
    border-radius:17px!important;
    background:#fff!important;
    box-shadow:0 12px 30px rgba(11,31,58,.15)!important;
  }

  .tf-mobile-cart-float-copy{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
  }

  .tf-mobile-cart-float-copy>span{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:11px!important;
    background:#fff4cf!important;
    color:#10355f!important;
  }

  .tf-mobile-cart-float-copy>span>svg{
    display:block!important;
    width:21px!important;
    min-width:21px!important;
    max-width:21px!important;
    height:21px!important;
    min-height:21px!important;
    max-height:21px!important;
    margin:0!important;
    padding:0!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    transform:none!important;
  }

  .tf-mobile-cart-float-copy>div{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }

  .tf-mobile-cart-float-copy strong{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    color:#173250!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  .tf-mobile-cart-float-copy small{
    display:block!important;
    max-width:100%!important;
    margin:3px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    color:#71849a!important;
    font-size:8px!important;
    font-weight:650!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  .tf-mobile-cart-float>a{
    position:static!important;
    width:auto!important;
    min-width:88px!important;
    max-width:110px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    margin:0!important;
    padding:0 10px!important;
    overflow:hidden!important;
    border:1px solid #123f79!important;
    border-radius:11px!important;
    background:#123f79!important;
    color:#fff!important;
    box-shadow:none!important;
    text-decoration:none!important;
    font-size:9px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    transform:none!important;
  }

  .tf-mobile-cart-float>a b{
    display:grid!important;
    place-items:center!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%!important;
    background:#ffbf2f!important;
    color:#0b2b52!important;
    font-size:8px!important;
    line-height:1!important;
  }

  /* Keep dock navigation stable underneath compact cart rail */
  .tf-mobile-market-dock-row{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) 68px!important;
    gap:7px!important;
  }

  .tf-mobile-market-pill{
    min-height:64px!important;
    max-height:64px!important;
    border-radius:19px!important;
  }

  .tf-mobile-rfq-side{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    border-radius:19px!important;
  }
}

@media(max-width:390px){
  .tf-mobile-cart-float{
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
  }
  .tf-mobile-cart-float-copy{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:7px!important;
  }
  .tf-mobile-cart-float-copy>span{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
  }
  .tf-mobile-cart-float-copy>span>svg{
    width:19px!important;
    min-width:19px!important;
    max-width:19px!important;
    height:19px!important;
    min-height:19px!important;
    max-height:19px!important;
  }
  .tf-mobile-cart-float-copy strong{font-size:11px!important}
  .tf-mobile-cart-float-copy small{font-size:7px!important}
  .tf-mobile-cart-float>a{
    min-width:78px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0 8px!important;
    font-size:8px!important;
  }
}