/*
 producte-modal.css
 Purpose: Styles for the product bottom-sheet modal (#producteModal).
 Sections:
 1) Variables
 2) Modal positioning
 3) Modal surface
 4) Typography
 5) Controls (parada chip, share, stepper)
 6) Close button
 7) Responsive
 8) Page z-index fixes
*/

/* 1) Variables */
:root{--pm-stepper-height:var(--stepper-height,34px);--pm-color-pine:var(--color-pine,#5B7065);--pm-font-title:1.25rem;--pm-font-price:1.5rem}

/* 2) Modal positioning */
.modal.modal-bottom .modal-dialog{position:fixed;left:0;right:0;bottom:0;margin:0;width:100vw;max-width:100vw;box-sizing:border-box;z-index:2301;transform:translateY(100%);transition:transform 260ms ease}
.modal.modal-bottom.show .modal-dialog{transform:translateY(0)}
.modal.modal-bottom+.modal-backdrop,.modal-backdrop.show{z-index:2299}
@media (prefers-reduced-motion:reduce){.modal.modal-bottom .modal-dialog{transition:none!important}}

/* 3) Modal surface */
.modal.modal-bottom .modal-content{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-left-radius:0;border-bottom-right-radius:0;border:none;overflow:hidden;position:relative}
.modal.modal-bottom .modal-header{padding:0;border-bottom:0}
.modal-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
body.modal-open{padding-right:0!important}

/* 4) Typography */
.modal-product-title{margin-bottom:.25rem}
.modal-product-title-text{font-size:var(--pm-font-title);font-weight:600;color:var(--color-forest,#04202C);line-height:1.1}
.modal-product-desc{margin-bottom:1rem;color:#6c757d}
.modal-product-preu-valor{font-size:var(--pm-font-title);font-weight:600;color:var(--color-forest,#04202C);display:inline-block;line-height:1;margin-top:.5rem}
.modal-product-unitat{font-size:.95rem;color:#6c757d}

/* 5) Controls */
.pm-btn{display:inline-flex;align-items:center;gap:8px;height:var(--pm-stepper-height);box-sizing:border-box;padding:0 .9rem;border-radius:calc(var(--pm-stepper-height)/2);font-weight:700;font-size:.95rem}
#modal-parada-link{display:inline-flex;align-items:center;gap:8px;height:var(--pm-stepper-height);box-sizing:border-box;padding:0 10px;border-radius:calc(var(--pm-stepper-height)/2);color:var(--pm-color-pine);background-color:rgba(91,112,101,0.06);border:1px solid rgba(91,112,101,0.22);text-decoration:none}
/* Make share button a rounded pill and give extra left padding so the
  WhatsApp SVG never collides with the curved corner on small screens. */
#modal-share-wa{display:inline-flex;align-items:center;gap:6px;height:var(--pm-stepper-height);padding:0 16px 0 18px;box-sizing:border-box;background:var(--bs-success,#198754);color:#fff;border:none;font-weight:700;overflow:visible;border-radius:calc(var(--pm-stepper-height) / 2)}
/* Ensure the SVG icon fits inside the pill and isn't clipped by rounding.
  Use slightly smaller icon size and extra left padding to avoid overlap
  with the pill's curved corner on narrow viewports. */
/* keep the icon slightly smaller than the button height and away from edges */
/* Support SVG or icon class (`bi bi-whatsapp`). Prefer sizing the icon
  via font-size for icon fonts and width/height for inline SVGs. */
#modal-share-wa svg,
#modal-share-wa i.bi {
  display:block;
  flex:0 0 auto;
  width:calc(var(--pm-stepper-height) * 0.44);
  height:calc(var(--pm-stepper-height) * 0.44);
  margin-right:8px;
  box-sizing:content-box;
}

/* When using the `bi` markup (Bootstrap Icons), scale via font-size so
  the icon aligns vertically and inherits color. */
#modal-share-wa i.bi { font-size: calc(var(--pm-stepper-height) * 0.44); line-height: 1; }

@media (max-width:480px){
  #modal-share-wa{padding-left:20px;padding-right:14px}
  #modal-share-wa svg{width:calc(var(--pm-stepper-height) * 0.42);height:calc(var(--pm-stepper-height) * 0.42)}
}
#modal-stepper{display:inline-block}

/* 6) Close button */
#producteModal .modal-content>.btn-close,#producteModal .btn-close{position:absolute!important;top:12px!important;right:12px!important;width:40px;height:40px;padding:0;border-radius:50%;background-color:rgba(255,255,255,0.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,0.06);box-shadow:0 6px 18px rgba(0,0,0,0.12);background-repeat:no-repeat;background-position:center;background-size:56%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='4' y1='4' x2='20' y2='20' stroke='%2304202C' stroke-width='2.6' stroke-linecap='round'/><line x1='20' y1='4' x2='4' y2='20' stroke='%2304202C' stroke-width='2.6' stroke-linecap='round'/></svg>");color:transparent}
@media (max-width:480px){#producteModal .modal-content>.btn-close{width:36px;height:36px;background-size:60%}}

/* 7) Responsive */
@media (max-width:480px){:root{--pm-stepper-height:34px}.pm-btn{font-size:.95rem}}

/* 8) Page z-index fixes */
body.is-mercat-root #producteModal.modal.show{z-index:10005!important}
body.is-mercat-root .modal-backdrop.show{z-index:10004!important;background-color: rgba(0,0,0,0.75) !important;opacity:1 !important}

/* Ensure product listing pages (`productes-page`) get the same z-index
  treatment as parada pages so the product modal is above any backdrop
  injected by other components. This keeps backdrop opaque but the modal
  accessible and interactive. */
body.productes-page #producteModal.modal.show { z-index: 10005 !important; }
body.productes-page .modal-backdrop.show { z-index: 10004 !important; background-color: rgba(0,0,0,0.75) !important; opacity: 1 !important; }

/* Strong enforcement for product modal stacking to avoid other page styles
  accidentally placing the backdrop above the modal. This uses the modal's
  id for high specificity and large z-index values. */
#producteModal.modal.show { z-index: 999999 !important; }
body.productes-page .modal-backdrop.show, .modal-backdrop.show { z-index: 999998 !important; background-color: rgba(0,0,0,0.75) !important; opacity: 1 !important; }

/* compatibility shim (preserve existing spacing for older selectors) */
.modal-body #modal-parada-link{margin-bottom:12px}

/* ------------------------------------------------------------------ */
/* Page-scoped z-index fix for mercat (avoid navbar/overlays blocking modal) */
/* Scoped to body.is-mercat-root so it only affects the mercat listing page */
body.is-mercat-root #producteModal.modal.show { z-index: 10005 !important; }
body.is-mercat-root .modal-backdrop.show { z-index: 10004 !important; background-color: rgba(0,0,0,0.75) !important; opacity: 1 !important; }


/* Minimal compatibility shim for previous selectors */
.modal-body #modal-parada-link { margin-bottom: 12px; }

/*
  producte-modal.css
  -------------------
  *** End Patch

/* ------------------------------------------------------------------ */
/* Close button: circular white 'glass' positioned 12px from modal edge */
/* Scoped to #producteModal to avoid affecting other modals */
/* Top/right use !important to override any inline positioning set in templates */
#producteModal .modal-content > .btn-close,
#producteModal .btn-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='4' y1='4' x2='20' y2='20' stroke='%2304202C' stroke-width='2.6' stroke-linecap='round'/><line x1='20' y1='4' x2='4' y2='20' stroke='%2304202C' stroke-width='2.6' stroke-linecap='round'/></svg>");
  color: transparent; /* hide any button text */
}
@media (max-width:480px){ #producteModal .modal-content > .btn-close{ width:36px; height:36px; background-size:60%; } }