/**
 * Location: /assets/css/stm-single-product-cta-bar.css
 * Purpose:
 * - CTA layout (desktop inline, mobile stacked)
 * - Mobile sticky bottom bar (app-like) + safe-area support
 * - Prevents overlay by adding body padding when sticky bar is visible
 *
 * UPDATE (2026-02-10):
 * - ✅ Mobile sticky CTA bar DISABLED (hide sticky bar + remove body padding on mobile)
 * - ✅ Normal in-page CTA remains unchanged
 *
 * Related JS:
 * - /assets/js/stm-single-product-cta-bar.js (adds body class + --stm-sp-stickybar-h)
 * Related PHP:
 * - /inc/features/woocommerce/single-product-cta-bar.php (prints sticky bar markup)
 * Loader:
 * - Enqueued only on is_product()
 */

:root{
  --stm-sp-cta-gap: 10px;
  --stm-sp-cta-h: 52px;
  --stm-sp-cta-radius: 14px;

  /* Sticky bar defaults */
  --stm-sp-stickybar-maxw: 520px; /* nice on large phones */
  --stm-sp-stickybar-pad: 12px;
  --stm-sp-stickybar-z: 9999;
}

/* ======================================================
   Sticky Bar (Mobile only)
   - Uses safe-area (iPhone) + prevents overlay via body padding
====================================================== */

/* ✅ DISABLE sticky system on mobile (requested)
   - Hide sticky bar completely
   - Prevent extra bottom spacing even if JS adds class/var
*/
@media (max-width: 767px){
  body.stm-sp-has-stickybar{
    padding-bottom: 0 !important;
  }
  .stm-sp-stickybar{
    display: none !important;
  }
}

/* Body spacing when sticky bar is visible (JS sets --stm-sp-stickybar-h) */
@media (max-width: 767px){
  body.stm-sp-has-stickybar{
    padding-bottom: var(--stm-sp-stickybar-h, 0px);
  }
}

/* Sticky container printed in footer */
.stm-sp-stickybar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--stm-sp-stickybar-z);
  pointer-events: none; /* only inner should be clickable */
}

/* Inner card */
.stm-sp-stickybar__inner{
  pointer-events: auto;
  width: 100%;
  max-width: var(--stm-sp-stickybar-maxw);
  margin: 0 auto;

  /* Padding includes safe-area on iOS */
  padding:
    var(--stm-sp-stickybar-pad)
    var(--stm-sp-stickybar-pad)
    calc(var(--stm-sp-stickybar-pad) + env(safe-area-inset-bottom, 0px))
    var(--stm-sp-stickybar-pad);

  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 -10px 28px rgba(15,23,42,.10);
}

/* Sticky content layout */
.stm-sp-stickybar__qty{
  margin-bottom: var(--stm-sp-cta-gap);
}
.stm-sp-stickybar__qty .quantity{
  width: 100%;
  margin: 0;
}
.stm-sp-stickybar__qty .quantity input.qty{
  width: 100%;
  height: var(--stm-sp-cta-h);
  border-radius: var(--stm-sp-cta-radius);
  font-size: 18px;
  text-align: center;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  box-sizing: border-box;
}

/* Sticky buttons grid: auto 2/3 columns */
.stm-sp-stickybar__btns{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--stm-sp-cta-gap);
  align-items: stretch;
}
.stm-sp-stickybar__btns > *{
  width: 100%;
}

/* Make cloned ATC match your style */
.stm-sp-stickybar__btns button.single_add_to_cart_button{
  width: 100%;
  height: var(--stm-sp-cta-h);
  border-radius: var(--stm-sp-cta-radius);
  font-weight: 800;
  font-size: 13px;
  padding: 0 12px;
  margin: 0 !important;
  white-space: normal;
  line-height: 1.1;
}

/* Force WA/DL look like buttons everywhere */
.single-product a.stm-sp-summary__btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:var(--stm-sp-cta-h) !important;
  padding:0 12px !important;
  border-radius:var(--stm-sp-cta-radius) !important;
  text-decoration:none !important;
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1.1 !important;
  white-space:normal;
  text-align:center;
  border:0 !important;
  box-sizing:border-box;
}
.single-product a.stm-sp-summary__btn--wa{ background:#22c55e !important; color:#fff !important; }
.single-product a.stm-sp-summary__btn--dl{ background:#111827 !important; color:#fff !important; }

/* ======================================================
   In-page CTA (inside form)
====================================================== */

/* -----------------------------
   Mobile / Tablet (CTA stack)
------------------------------ */
@media (max-width: 980px){

  .single-product .stm-sp-summary__cta{
    width:100%;
  }

  /* Whole CTA row becomes vertical: Qty row then Actions row */
  .single-product .stm-sp-summary__cta-row{
    display:flex;
    flex-direction:column;
    gap: var(--stm-sp-cta-gap);
    width:100%;
  }

  /* Row 1: qty full width */
  .single-product .stm-sp-summary__cta-qtyrow{
    width:100%;
  }
  .single-product .stm-sp-summary__cta-qtyrow .quantity{
    width:100%;
    margin:0;
  }
  .single-product .stm-sp-summary__cta-qtyrow .quantity input.qty{
    width:100%;
    height:var(--stm-sp-cta-h);
    border-radius:var(--stm-sp-cta-radius);
    font-size:18px;
    text-align:center;
    border:1px solid rgba(15,23,42,.14);
    background:#fff;
    box-sizing:border-box;
  }

  /* Row 2: actions grid => auto 2 or 3 equal columns */
  .single-product .stm-sp-summary__cta-actions{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--stm-sp-cta-gap);
    width:100%;
    align-items:stretch;
  }

  /* Add to cart button becomes grid item */
  .single-product .stm-sp-summary__cta-actions button.single_add_to_cart_button{
    width:100%;
    height:var(--stm-sp-cta-h);
    border-radius:var(--stm-sp-cta-radius);
    font-weight:800;
    font-size:13px;
    padding:0 12px;
    margin:0 !important;
    white-space:normal;
    line-height:1.1;
  }

  /* IMPORTANT: flatten extra wrapper so WA/DL become grid items */
  .single-product .stm-sp-summary__cta-extra{
    display:contents;
  }

  .single-product .stm-sp-summary__cta-actions a.stm-sp-summary__btn{
    width:100%;
  }
}

/* -----------------------------
   Desktop (inline fixed widths)
------------------------------ */
@media (min-width: 981px){

  :root{
    --stm-sp-cta-h: 67px;
    --stm-sp-btn-w: 160px;
  }

  .single-product .stm-sp-summary__cta-row{
    display:flex;
    align-items:stretch;
    gap:12px;
    flex-wrap:nowrap;
    width:100%;
    justify-content:flex-start;
  }

  .single-product .stm-sp-summary__cta-row .quantity{
    flex:0 0 100px;
    min-width:100px;
    max-width:100px;
  }
  .single-product .stm-sp-summary__cta-row .quantity input.qty{
    width:100%;
    height:var(--stm-sp-cta-h);
    border-radius:14px;
    font-size:16px;
    font-weight:500;
    text-align:center;
    box-sizing:border-box;
  }

  .single-product .stm-sp-summary__cta-actions{
    display:flex;
    gap:12px;
    align-items:stretch;
    flex-wrap:nowrap;
    justify-content:flex-start;
    margin:0;
    margin-right:auto;
  }

  .single-product .stm-sp-summary__cta-actions > *{
    flex:0 0 var(--stm-sp-btn-w);
    width:var(--stm-sp-btn-w);
    max-width:var(--stm-sp-btn-w);
  }

  .single-product .stm-sp-summary__cta-extra{
    display:contents;
  }

  .single-product .stm-sp-summary__cta-actions button.single_add_to_cart_button{
    height:var(--stm-sp-cta-h);
    border-radius:14px;
    font-size:14px;
    font-weight:600;
    padding:0 14px;
    white-space:nowrap;
    margin:0 !important;
  }

  .single-product a.stm-sp-summary__btn{
    height:var(--stm-sp-cta-h) !important;
    border-radius:14px !important;
    font-size:14px !important;
    font-weight:600 !important;
    padding:0 14px !important;
    white-space:nowrap;
    box-sizing:border-box;
  }
}

/* ======================================================
   FORCE 160px width for WA + Download (Desktop only)
====================================================== */
@media (min-width: 981px){
  .single-product .stm-sp-summary__cta-actions a.stm-sp-summary__btn{
    width: var(--stm-sp-btn-w) !important;
    min-width: var(--stm-sp-btn-w) !important;
    max-width: var(--stm-sp-btn-w) !important;
    justify-content: center;
  }
}