/* =========================================================
   Meddbee — Mobile Product Detail Page (PDP)
   File: mb-pdp.css
   Scope: product pages only via body.mb-pdp
   Notes:
   - Uses in-page CTA stack (Add to Cart / Buy Now / Chat)
   - Disables MPB + theme sticky bars to prevent duplicates
   - App-style gallery + summary cards
   - Dark minimal custom footer
   - Bottom section = strongest overrides (higher precedence)
   ========================================================= */

/* =========================================================
   MOBILE PDP BASE
   ========================================================= */
   @media (max-width: 767px){

    /* -------- Base / layout -------- */
    body.mb-pdp{
      background:#f5f7fb !important;
    }
  
    body.mb-pdp .mb-pdp-wrap{
      max-width: 520px;
      margin: 0 auto;
    }
  
    /* Keep spacing simple (no sticky bars) */
    body.mb-pdp,
    body.mb-pdp .site-content{
      padding-bottom: 24px !important;
    }
  
    /* Hide breadcrumbs / back link */
    body.mb-pdp .woocommerce-breadcrumb,
    body.mb-pdp a.back-to-category,
    body.mb-pdp .back-to-category{
      display:none !important;
    }
  
    /* -------- HARD STOP: disable MPB + theme sticky bars -------- */
    #mpb-bottom-bar{ display:none !important; }
  
    body.mb-pdp .mf-sticky-add-to-cart,
    body.mb-pdp .sticky-add-to-cart,
    body.mb-pdp .woocommerce-sticky-add-to-cart,
    body.mb-pdp .woo-sticky-add-to-cart,
    body.mb-pdp .product-toolbar,
    body.mb-pdp .mf-mobile-product-bar,
    body.mb-pdp .footer-mobile-bar,
    body.mb-pdp .mf-product-action-buttons{
      display:none !important;
    }
  
    /* -------- Product wrapper spacing -------- */
    body.mb-pdp .product{
      margin: 0 !important;
      padding: 12px 12px 0 !important;
    }
  
    /* =========================================================
       GALLERY CARD
       ========================================================= */
    body.mb-pdp div.product div.images,
    body.mb-pdp .woocommerce-product-gallery{
      background:#fff !important;
      border-radius: 18px !important;
      padding: 12px !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
      margin: 0 0 12px 0 !important;
      overflow:hidden !important;
    }
  
    body.mb-pdp .woocommerce-product-gallery__wrapper img,
    body.mb-pdp div.product div.images img{
      border-radius: 14px !important;
      width:100% !important;
      height:260px !important;
      object-fit:contain !important;
    }
  
    /* Thumbnails (horizontal) */
    body.mb-pdp .flex-control-thumbs,
    body.mb-pdp .woocommerce-product-gallery .flex-control-nav{
      display:flex !important;
      gap: 10px !important;
      overflow-x:auto !important;
      padding: 10px 6px 2px !important;
      margin: 0 !important;
      -webkit-overflow-scrolling: touch;
    }
  
    body.mb-pdp .flex-control-thumbs li,
    body.mb-pdp .woocommerce-product-gallery .flex-control-nav li{
      flex: 0 0 auto !important;
      width: 58px !important;
      margin: 0 !important;
    }
  
    body.mb-pdp .flex-control-thumbs img,
    body.mb-pdp .woocommerce-product-gallery .flex-control-nav img{
      width: 58px !important;
      height: 58px !important;
      object-fit: cover !important;
      border-radius: 12px !important;
      border: 2px solid #e6eaf2 !important;
      padding: 2px !important;
      background:#fff !important;
      opacity: 1 !important;
    }
  
    body.mb-pdp .flex-control-thumbs img.flex-active,
    body.mb-pdp .flex-control-thumbs .flex-active,
    body.mb-pdp .woocommerce-product-gallery .flex-control-nav .flex-active{
      border-color:#1aa7ec !important;
    }
  
    /* =========================================================
       SUMMARY CARD
       ========================================================= */
    body.mb-pdp div.product div.summary{
      background:#fff !important;
      border-radius: 18px !important;
      padding: 14px !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
      margin: 0 0 12px 0 !important;
    }
  
    body.mb-pdp .product_title{
      font-size: 20px !important;
      line-height: 1.25 !important;
      margin: 0 0 8px 0 !important;
      font-weight: 800 !important;
      color:#0f172a !important;
    }
  
    body.mb-pdp .summary p.price,
    body.mb-pdp .summary span.price{
      font-size: 22px !important;
      font-weight: 900 !important;
      color:#1aa7ec !important;
      margin: 0 0 10px 0 !important;
    }
  
    body.mb-pdp .summary p.price del,
    body.mb-pdp .summary span.price del{
      opacity: .55 !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      margin-right: 6px !important;
      color:#64748b !important;
    }
  
    body.mb-pdp .summary p.price ins,
    body.mb-pdp .summary span.price ins{
      text-decoration:none !important;
    }
  
    body.mb-pdp .woocommerce-product-rating{
      display:flex !important;
      align-items:center !important;
      gap: 10px !important;
      margin: 0 0 12px 0 !important;
    }
  
    body.mb-pdp .woocommerce-review-link{
      font-size: 13px !important;
      color:#64748b !important;
      text-decoration:none !important;
    }
  
    /* Variations / selects */
    body.mb-pdp table.variations{
      margin: 10px 0 6px !important;
    }
  
    body.mb-pdp table.variations td,
    body.mb-pdp table.variations th{
      padding: 6px 0 !important;
    }
  
    body.mb-pdp table.variations select{
      width: 100% !important;
      height: 44px !important;
      border-radius: 12px !important;
      border: 1px solid #e2e8f0 !important;
      background: #f8fafc !important;
      padding: 0 12px !important;
      outline: none !important;
    }
  
    /* =========================================================
       TABS (ACCORDION LOOK)
       (Your JS converts them into accordion headers)
       ========================================================= */
    body.mb-pdp .woocommerce-tabs{
      background:#fff !important;
      border-radius: 18px !important;
      padding: 8px 14px 12px !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
      margin: 0 12px 12px !important;
      overflow:hidden !important;
    }
  
    body.mb-pdp .woocommerce-tabs ul.tabs{
      display:none !important; /* cleaner list-style accordion */
    }
  
    body.mb-pdp .woocommerce-tabs .woocommerce-Tabs-panel{
      display:block !important;
      padding: 14px 0 !important;
      border-bottom: 1px solid #eef2f7 !important;
      margin: 0 !important;
    }
  
    body.mb-pdp .woocommerce-tabs .woocommerce-Tabs-panel:last-child{
      border-bottom: 0 !important;
    }
  
    body.mb-pdp .woocommerce-tabs .woocommerce-Tabs-panel h2{
      font-size: 15px !important;
      font-weight: 900 !important;
      margin: 0 0 10px !important;
      color:#111827 !important;
    }
  
    /* =========================================================
       CTA STACK (IN-PAGE)
       - Add to Cart: real Woo button (moved via JS into [data-mb-atc-slot])
       - Buy Now + Chat: rendered via .mb-pdp-cta markup
       ========================================================= */
  
    /* Cart form spacing */
    body.mb-pdp .summary form.cart{
      margin-top: 14px !important;
      display:block !important;
    }
  
    /* Quantity row */
    body.mb-pdp .summary form.cart .quantity{
      width:100% !important;
      margin: 0 0 12px 0 !important;
    }
  
    body.mb-pdp .summary form.cart .quantity input,
    body.mb-pdp .summary form.cart .quantity .qty{
      width:100% !important;
      height:44px !important;
      border-radius:12px !important;
    }
  
    /* Default Woo Add to Cart (if NOT moved) */
    body.mb-pdp .summary form.cart .single_add_to_cart_button,
    body.mb-pdp .summary form.cart button.single_add_to_cart_button{
      width: 100% !important;
      height: 54px !important;
      border-radius: 16px !important;
      font-weight: 900 !important;
      font-size: 16px !important;
      background:#1aa7ec !important;
      border:1px solid #1aa7ec !important;
      color:#fff !important;
      box-shadow:none !important;
      margin: 0 0 12px 0 !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
    }
  
    /* CTA wrapper (Buy Now + Chat) */
    body.mb-pdp .mb-pdp-cta{
      display:flex !important;
      flex-direction:column !important;
      gap:12px !important;
      margin-top: 0 !important;
    }
  
    body.mb-pdp .mb-pdp-cta__btn{
      width:100% !important;
      height:54px !important;
      border-radius:16px !important;
      font-weight:900 !important;
      font-size:16px !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      text-decoration:none !important;
      box-shadow:none !important;
    }
  
    body.mb-pdp .mb-pdp-cta__btn--ghost{
      background:#fff !important;
      border:1px solid #cfd6df !important;
      color:#111827 !important;
    }
  
    body.mb-pdp .mb-pdp-cta__btn--primary{
      background:#1aa7ec !important;
      border:1px solid #1aa7ec !important;
      color:#fff !important;
    }
  
    /* =========================================================
       FOOTER — DARK MINIMAL (TARGET LOOK)
       ========================================================= */
    body.mb-pdp .mb-footer-mobile{
      background: #0b1220 !important;
      color: rgba(255,255,255,.82) !important;
      border-top: 1px solid rgba(255,255,255,.06) !important;
      padding: 28px 18px 22px !important;
      margin-top: 18px !important;
    }
  
    body.mb-pdp .mb-footer-brand-title{
      color:#ffffff !important;
      font-size: 28px !important;
      font-weight: 900 !important;
      margin: 0 0 6px !important;
    }
  
    body.mb-pdp .mb-footer-brand-sub{
      color: rgba(255,255,255,.60) !important;
      font-size: 15px !important;
      line-height: 1.45 !important;
      margin: 0 !important;
    }
  
    body.mb-pdp .mb-footer-cols{
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 28px !important;
      margin-top: 18px !important;
    }
  
    body.mb-pdp .mb-footer-col-title{
      color: rgba(255,255,255,.92) !important;
      font-size: 18px !important;
      font-weight: 800 !important;
      margin: 0 0 12px !important;
    }
  
    body.mb-pdp .mb-footer-links{
      list-style:none !important;
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
      background:transparent !important;
    }
  
    body.mb-pdp .mb-footer-links li{
      margin: 10px 0 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }
  
    body.mb-pdp .mb-footer-links li:first-child{
      margin-top: 0 !important;
    }
  
    body.mb-pdp .mb-footer-links a{
      color: rgba(255,255,255,.70) !important;
      font-size: 16px !important;
      font-weight: 500 !important;
      text-decoration:none !important;
    }
  
    body.mb-pdp .mb-footer-links a:hover{
      color: rgba(255,255,255,.92) !important;
    }
  
    body.mb-pdp .mb-footer-divider{
      height:1px !important;
      background: rgba(255,255,255,.08) !important;
      margin: 22px 0 18px !important;
    }
  
    body.mb-pdp .mb-footer-social{
      display:flex !important;
      justify-content:center !important;
      align-items:center !important;
      gap: 14px !important;
      margin: 6px 0 14px !important;
    }
  
    body.mb-pdp .mb-footer-social .mb-social{
      width: 46px !important;
      height: 46px !important;
      border-radius: 999px !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      background: rgba(255,255,255,.08) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      color: rgba(255,255,255,.88) !important;
      text-decoration:none !important;
    }
  
    body.mb-pdp .mb-footer-copy{
      text-align:center !important;
      color: rgba(255,255,255,.45) !important;
      font-size: 14px !important;
      margin-top: 8px !important;
    }
  
    /* =========================================================
       STRONG OVERRIDES — KEEP LAST (HIGHEST PRECEDENCE)
       ========================================================= */
  
    /* Kill stray MPB "Buy Now" label that can appear inside content */
    body.mb-pdp .mpb-buy-now:not(#mpb-bottom-bar .mpb-buy-now){
      display:none !important;
    }
  
    /* Hide extra/duplicate Buy Now buttons in summary — keep only .mb-pdp-cta */
    body.mb-pdp .summary .buy-now,
    body.mb-pdp .summary button.buy-now,
    body.mb-pdp .summary a.buy-now{
      display:none !important;
    }
  
    /* Hide random tiny "chat" buttons if any appear */
    body.mb-pdp .summary .chat,
    body.mb-pdp .summary a.chat{
      display:none !important;
    }
  
    /* Hide wishlist/compare row on mobile PDP */
    body.mb-pdp .mf-product-buttons,
    body.mb-pdp .wishlist,
    body.mb-pdp .compare{
      display:none !important;
    }
  
    /* If JS moved the real Add to Cart into the CTA slot, style it there */
    body.mb-pdp .mb-pdp-cta [data-mb-atc-slot] .single_add_to_cart_button{
      width:100% !important;
      height:54px !important;
      border-radius:16px !important;
      font-weight:900 !important;
      font-size:16px !important;
      background:#1aa7ec !important;
      border:1px solid #1aa7ec !important;
      color:#fff !important;
      box-shadow:none !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      margin:0 !important;
    }
  
      form.cart .mb-hide-woo-atc { display: none !important; }
    
  body.single-product {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* 2) Sticky bar container (adjust selector if yours differs) */
  .mb-pdp-sticky,
  .mb-pdp-sticky-atc,
  .mb-sticky-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 9999;

    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);

    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  }

  /* 3) Make the button look sleek (not huge) */
  .mb-pdp-sticky .single_add_to_cart_button,
  .mb-pdp-sticky-atc .single_add_to_cart_button,
  .mb-sticky-atc .single_add_to_cart_button {
    width: 100%;
    height: 48px;             /* slimmer */
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
  }

  /* 4) If the sticky is the only CTA, hide the big CTA stack above it */
  .mb-pdp-cta {
    display: none !important;
  }

  /* 5) Optional: if your theme has another fixed widget bottom-right, move it up */
  .tawk-min-container,
  .tawk-bubble-container,
  .tawk-custom-color {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  }