/**
 * Bhutib Size Chart Popup — scoped styles
 * All rules live under .bhutib-size-popup so nothing leaks into the theme
 * or the Elementor editor. Pixel-matched to Size_Guide_Popup.html.
 * Font: Raleway (served locally via Airlift WOFF2 — no Google Fonts request).
 */

@keyframes bspPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.bhutib-size-popup,
.bhutib-size-popup * { box-sizing: border-box; }

.bhutib-size-popup {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #292929;
  line-height: 1.4;
}

/* ---------- Card ---------- */
.bhutib-size-popup .bsp-card {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden auto;
  max-height: 90vh;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.55);
  animation: bspPop .32s cubic-bezier(.2,.8,.25,1);
}
/* Keep the header (with ✕) pinned while the card scrolls */
.bhutib-size-popup .bsp-head { position: sticky; top: 0; z-index: 2; }

/* ---------- Header (sticky so the ✕ stays reachable while scrolling) ---------- */
.bhutib-size-popup .bsp-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 20px 22px 16px;
  background: #292929;
}
.bhutib-size-popup .bsp-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s;
}
.bhutib-size-popup .bsp-close:hover,
.bhutib-size-popup .bsp-close:focus-visible {
  background: rgba(255,255,255,.18);
  outline: 2px solid #FFC000;
  outline-offset: 2px;
}
.bhutib-size-popup .bsp-eyebrow {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #FFC000;
}
.bhutib-size-popup .bsp-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #fff;
}

/* ---------- Table top row (label + unit toggle) ---------- */
.bhutib-size-popup .bsp-table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bhutib-size-popup .bsp-find-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #292929;
}
.bhutib-size-popup .bsp-unit {
  display: inline-flex;
  background: #F0EEE8;
  border-radius: 8px;
  padding: 2px;
}
.bhutib-size-popup .bsp-unit-btn {
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #8A857D;
  transition: all .15s;
}
.bhutib-size-popup .bsp-unit-btn.is-active {
  background: #FFC000;
  color: #292929;
}
.bhutib-size-popup .bsp-unit-btn:focus-visible {
  outline: 2px solid #292929;
  outline-offset: 1px;
}

/* ---------- Size table ---------- */
.bhutib-size-popup .bsp-table-wrap { padding: 18px 22px 6px; }
.bhutib-size-popup .bsp-table {
  border: 1px solid #E0DDD7;
  border-radius: 11px;
  overflow: hidden;
}
.bhutib-size-popup .bsp-table-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  background: #FFC000;
}
.bhutib-size-popup .bsp-th-size,
.bhutib-size-popup .bsp-th-chest {
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #292929;
}
.bhutib-size-popup .bsp-th-chest { text-align: right; }

.bhutib-size-popup .bsp-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  cursor: pointer;
  border-top: 1px solid #EFEDE8;
  transition: background .15s;
  background: #FFFFFF;
}
.bhutib-size-popup .bsp-row:nth-child(odd) { background: #FBFAF7; }
.bhutib-size-popup .bsp-row:nth-child(even) { background: #FFFFFF; }
.bhutib-size-popup .bsp-row.is-active { background: #FFF6D6; }
.bhutib-size-popup .bsp-row:focus-visible {
  outline: 2px solid #FFC000;
  outline-offset: -2px;
}
.bhutib-size-popup .bsp-row-left {
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bhutib-size-popup .bsp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #D8D4CC;
  transition: background .15s;
}
.bhutib-size-popup .bsp-row.is-active .bsp-dot { background: #FFC000; }
.bhutib-size-popup .bsp-size {
  font-size: 13px;
  font-weight: 700;
  color: #292929;
}
.bhutib-size-popup .bsp-row-chest {
  padding: 11px 14px;
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  color: #4A4540;
}
.bhutib-size-popup .bsp-between {
  margin: 11px 2px 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #4A4540;
}
.bhutib-size-popup .bsp-between strong { color: #292929; }

/* ---------- How to measure (accordion) ---------- */
.bhutib-size-popup .bsp-measure { padding: 8px 22px 0; }
.bhutib-size-popup .bsp-measure-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8F7F3;
  border: 1px solid #E0DDD7;
  border-radius: 10px;
  padding: 13px 15px;
  cursor: pointer;
  font-family: inherit;
}
.bhutib-size-popup .bsp-measure-toggle:focus-visible {
  outline: 2px solid #FFC000;
  outline-offset: 2px;
}
.bhutib-size-popup .bsp-measure-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #292929;
}
.bhutib-size-popup .bsp-chevron {
  font-size: 16px;
  color: #292929;
  transition: transform .3s;
  display: inline-block;
}
.bhutib-size-popup .bsp-chevron.is-open { transform: rotate(180deg); }
.bhutib-size-popup .bsp-measure-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 4px;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.bhutib-size-popup .bsp-measure-body.is-open {
  max-height: 600px;
  opacity: 1;
  padding: 12px 4px 2px;
}
.bhutib-size-popup .bsp-measure-img {
  width: 100%;
  max-width: 220px;
  display: block;
  margin: 2px auto 10px;
  border-radius: 8px;
}
.bhutib-size-popup .bsp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 2px;
}
.bhutib-size-popup .bsp-step-n {
  background: #FFC000;
  color: #292929;
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.bhutib-size-popup .bsp-step p {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  color: #4A4540;
}
.bhutib-size-popup .bsp-step p strong { color: #292929; }

/* ---------- WhatsApp CTA ---------- */
.bhutib-size-popup .bsp-cta-wrap { padding: 16px 22px 22px; }
.bhutib-size-popup .bsp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 9px 16px;
  background: #292929;
  color: #FFC000;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.3;
  transition: background .15s;
}
.bhutib-size-popup .bsp-cta:hover { background: #000; }
.bhutib-size-popup .bsp-cta:focus-visible {
  outline: 2px solid #FFC000;
  outline-offset: 2px;
}
/* White circle behind the glyph so the handset cut-out reads white (correct
   WhatsApp mark) instead of showing the dark button through it. */
.bhutib-size-popup .bsp-cta svg {
  flex-shrink: 0;
  align-self: center;
  width: 18px;
  height: 18px;
  padding: 3px;
  background: #fff;
  border-radius: 50%;
  box-sizing: content-box;
}

/* ---------- Responsive: full-width with 12px gutter ≤480px ---------- */
@media (max-width: 480px) {
  .bhutib-size-popup .bsp-card { max-width: none; }
  .bhutib-size-popup .bsp-head { padding: 18px 18px 14px; }
  .bhutib-size-popup .bsp-table-wrap,
  .bhutib-size-popup .bsp-measure,
  .bhutib-size-popup .bsp-cta-wrap { padding-left: 18px; padding-right: 18px; }
  .bhutib-size-popup .bsp-title { font-size: 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bhutib-size-popup .bsp-card { animation: none; }
  .bhutib-size-popup .bsp-measure-body,
  .bhutib-size-popup .bsp-chevron,
  .bhutib-size-popup .bsp-row,
  .bhutib-size-popup .bsp-dot { transition: none; }
}

/* =====================================================================
 * Size Chart TRIGGER — plain underlined text link next to the Size row.
 * !important is used only to reset theme/Elementor <button> defaults.
 * ===================================================================== */
.bhutib-size-guide-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #292929 !important;
  font-family: 'Raleway', sans-serif;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  box-shadow: none !important;
}
.bhutib-size-guide-link:hover,
.bhutib-size-guide-link:focus-visible {
  color: #000 !important;
  background: transparent !important;
  outline: none !important;
  text-decoration-thickness: 2px;
}
.bhutib-size-guide-link:focus-visible {
  outline: 2px solid #FFC000 !important;
  outline-offset: 3px;
}
/* Ruler glyph — inline SVG (L-shaped scale), inherits the link colour */
.bhutib-size-guide-link .bhutib-ruler {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 2px;
  text-decoration: none !important;
}
.bhutib-size-guide-link .bhutib-ruler svg {
  display: block;
  width: 15px;
  height: 15px;
}

.bhutib-size-guide-link { white-space: nowrap; }

/* Mobile (<=768px): Size label on row 1 with the link pinned right, swatches
   on row 2. Desktop keeps the native table layout (see the >=769px block below). */
@media (max-width: 768px) {
  .woocommerce div.product form.cart .variations tr.bhutib-pa-size-row,
  .variations tr.bhutib-pa-size-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  .woocommerce div.product form.cart .variations tr.bhutib-pa-size-row > th.label,
  .woocommerce div.product form.cart .variations tr.bhutib-pa-size-row > td.value {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  .woocommerce div.product form.cart .variations tr.bhutib-pa-size-row > th.label label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
  }
}

/* Desktop (>=769px): keep the native variations table layout so the Select
   Colour row stays aligned; render the size label inline so the "Size chart"
   link sits right next to "Select Size:". */
@media (min-width: 769px) {
  .woocommerce div.product form.cart .variations tr.bhutib-pa-size-row > th.label,
  .variations tr.bhutib-pa-size-row > th.label { white-space: nowrap; }
  .woocommerce div.product form.cart .variations tr.bhutib-pa-size-row > th.label label,
  .variations tr.bhutib-pa-size-row > th.label label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    margin: 0;
  }
}

/* =====================================================================
 * CHEST + WAIST (dual) variant
 * ===================================================================== */
.bhutib-size-popup--wide .bsp-card { max-width: 460px; }

/* Header subline */
.bhutib-size-popup .bsp-head-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}
.bhutib-size-popup .bsp-head-sub strong { color: #FFC000; font-weight: 600; }

/* 3-column table header + waist column */
.bhutib-size-popup .bsp-table-head--dual {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.2fr;
  background: #FFC000;
}
.bhutib-size-popup .bsp-th-waist {
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: right;
}
.bhutib-size-popup .bsp-table-head--dual .bsp-th-size,
.bhutib-size-popup .bsp-table-head--dual .bsp-th-chest,
.bhutib-size-popup .bsp-table-head--dual .bsp-th-waist { color: #292929; padding: 9px 12px; }
.bhutib-size-popup .bsp-row--dual { grid-template-columns: 0.8fr 1.2fr 1.2fr; }
.bhutib-size-popup .bsp-row--dual .bsp-row-left { padding: 11px 12px; gap: 7px; }
.bhutib-size-popup .bsp-row--dual .bsp-row-chest { padding: 11px 12px; font-size: 12.5px; }
.bhutib-size-popup .bsp-row-waist {
  padding: 11px 12px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 500;
  color: #4A4540;
}

/* =====================================================================
 * Mobile: full-width + full-height, single scroll container so the
 * WhatsApp CTA is always reachable.
 * ===================================================================== */
@media (max-width: 768px) {
  .elementor-popup-modal:has(.bhutib-size-popup) .dialog-widget-content,
  .elementor-popup-modal:has(.bhutib-size-popup) .dialog-message {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: visible !important;
  }
  .bhutib-size-popup { width: 100%; }
  .bhutib-size-popup .bsp-card,
  .bhutib-size-popup--wide .bsp-card {
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Pin to top (not centered) so the full card scrolls into reach */
  .elementor-popup-modal:has(.bhutib-size-popup) { align-items: flex-start !important; }
  .bhutib-size-popup .bsp-cta-wrap { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
 * 4-column variant (single measure + two length columns, e.g. Daura/Suruwal)
 * ===================================================================== */
.bhutib-size-popup .bsp-table-head--cols4 { grid-template-columns: 0.7fr 1.1fr 0.85fr 0.95fr; }
.bhutib-size-popup .bsp-row--cols4 { grid-template-columns: 0.7fr 1.1fr 0.85fr 0.95fr; }
.bhutib-size-popup .bsp-table-head--cols4 .bsp-th-size,
.bhutib-size-popup .bsp-table-head--cols4 .bsp-th-chest,
.bhutib-size-popup .bsp-table-head--cols4 .bsp-th-waist { padding: 9px 8px; }
/* Full-name length headers ("Daura Length") wrap on two tight lines */
.bhutib-size-popup .bsp-table-head--cols4 .bsp-th-waist { letter-spacing: .4px; line-height: 1.3; }
.bhutib-size-popup .bsp-row--cols4 .bsp-row-left { padding: 11px 8px; gap: 6px; }
.bhutib-size-popup .bsp-row--cols4 .bsp-row-chest,
.bhutib-size-popup .bsp-row--cols4 .bsp-row-waist { padding: 11px 8px; font-size: 12px; }
.bhutib-size-popup .bsp-row-len2 {
  padding: 11px 8px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: #4A4540;
}
/* =====================================================================
 * v2.7.0 — Elementor popup chrome guard.
 * If a size-chart popup's Popup Settings are left at defaults, Elementor
 * wraps the card in a white 640px dialog with a shadow and its own close
 * button. Neutralize all of it whenever the popup contains our card, so
 * the design never depends on per-popup settings.
 * ===================================================================== */
.elementor-popup-modal:has(.bhutib-size-popup) .dialog-widget-content {
  background: transparent !important;
  box-shadow: none !important;
}
.elementor-popup-modal:has(.bhutib-size-popup) .dialog-close-button {
  display: none !important;
}
@media (min-width: 769px) {
  .elementor-popup-modal:has(.bhutib-size-popup) .dialog-widget-content,
  .elementor-popup-modal:has(.bhutib-size-popup) .dialog-message {
    width: auto !important;
    max-width: none !important;
  }
  .elementor-popup-modal:has(.bhutib-size-popup) .bhutib-size-popup,
  .elementor-popup-modal:has(.bhutib-size-popup) .bhutib-size-popup--wide {
    width: 640px;
    max-width: calc(100vw - 32px);
  }

  /* Landscape two-column card on desktop: table beside the how-to-measure
     panel, header and WhatsApp CTA span the full width. */
  .bhutib-size-popup .bsp-card,
  .bhutib-size-popup--wide .bsp-card {
    max-width: 640px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "head head"
      "table measure"
      "cta cta";
    align-items: start;
  }
  .bhutib-size-popup .bsp-head { grid-area: head; }
  .bhutib-size-popup .bsp-table-wrap {
    grid-area: table;
    padding: 20px 14px 10px 22px;
  }
  .bhutib-size-popup .bsp-measure {
    grid-area: measure;
    align-self: start;
    padding: 20px 22px 10px 14px;
  }
  .bhutib-size-popup .bsp-cta-wrap { grid-area: cta; }
}