@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Nunito+Sans:wght@300;400;600;700&display=swap");

/* ===== Theme Variables ===== */
:root {
  --primary-color: #000;
  --secondary-color: #fff;
  --accent-color: #000;

  /* Primary font stack */
  --font-family-primary: "Montserrat", Arial, sans-serif;
  --font-family-secondary: "Nunito Sans", Arial, sans-serif;

  --radius: 0px;
}

/* ===== Scrollbar Modal ===== */
html, body {
  scrollbar-width: thin;
}

/* ===== Typography Overrides ===== */
body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  font-family: var(--font-family-secondary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
  text-transform: uppercase;
  font-size: 1.5rem;
}

h1, .headline {
    margin-bottom: 0.3rem;
}

h1,
h2,
.headline {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.5rem;
}

p {
  color: var(--primary-color);
}

a {
    color: var(--accent-color);
}

.headline {
  font-family: (--font-family-primary);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typing 3s steps(30, end) forwards;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* ===== Form Overrides ===== */
.form-control,
.form-select {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-color: var(--primary-color);
  box-shadow: none;
  border-radius: 0px;
}

/* ===== Form Overrides ===== */
.form-control,
.form-select {
  color: var(--primary-color);                   /* light text */
  background-color: var(--secondary-color);      /* dark background */
  border-color: var(--primary-color);            /* light border */
  box-shadow: none;
}

/* ===== Placeholder ===== */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--primary-color) !important;
  opacity: 0.7;
}

/* ===== Input Group (fix cm alignment) ===== */
.input-group {
  border: 1px solid var(--primary-color);
  border-radius: 0;
  background-color: var(--secondary-color);
  display: flex;
  align-items: stretch;
  height: 35px;
}

.input-group .form-control,
.input-group .input-group-text {
  border: none !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
  margin: 0;
  height: 100%;
}

.input-group .form-control {
  padding-left: 12px;
}

.input-group .input-group-text {
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.input-group > :not(:first-child) {
  margin-left: 0 !important;
}

.input-group:focus-within {
  border-color: var(--accent-color) !important;
}

.input-group:focus-within .input-group-text {
  color: var(--accent-color) !important;
}

.mb-3 {
    margin-bottom: .25rem !important;
}

/* Remove number arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ===== Radio override ===== */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  background-color: var(--secondary-color); /* color when not checked */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
  vertical-align: middle;
}

/* Hover effect */
input[type="radio"]:hover {
  border-color: var(--accent-color);
}

/* Checked state (perfectly centered inner dot) */
input[type="radio"]:checked::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--accent-color);
  transition: all 0.2s ease-in-out;
}

/* Optional focus ring for accessibility */
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(145, 137, 62, 0.3);
}

/* Apply the accent color to sliders */
.measurement-controls input[type="range"] {
    accent-color: var(--accent-color);
}

/* ===== Buttons ===== */
.btn-dark,
.btn-solid-fat {
  background: var(--accent-color);
  color: #fff;
  border: none;
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
}

.btn-outline-dark,
.btn-outline-fat {
  background: var(--secondary-color);
  color: var(--primary-color);
  border-radius: var(--radius);
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
}

.btn-dark:hover,
.btn-solid-fat:hover,
.btn-outline-dark:hover,
.btn-outline-fat:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transition: all 0.2s ease-in-out;
}

.feedback-btn {
  color: var(--accent-color);
}

/* ===== Grid Buttons ===== */
.grid-panel button {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.grid-panel button.active {
  color: var(--secondary-color);
  border-color: var(--accent-color);
  background: var(--accent-color);
}

    .grid-row {
        gap: 10px;
    }

/* Containers */
.content,
.form-container,
.result-container {
  border-radius: 0px;
  padding: 1rem;
}

.form-container p {
  margin-bottom: 0;
}

.form-label {
    margin-bottom: 0;
}

/* ===== Misc Elements ===== */
.arrow-icon,
.me-2 {
  color: var(--secondary-color);
}

.form-text {
  color: var(--primary-color);
}

.form-check-input[type=checkbox] {
    border-radius: .25em;
    border: 1px solid #000;
}

button:hover .arrow-icon,
button:hover .me-2,
button:hover .form-text {
  color: var(--primary-color);
}

.how-to-measure-toggle {
  border-radius: 0px;
}

.card-body {
    background-color: var(--secondary-color);
}

/* ----------------------------------------------------------
   MEASUREMENT GUIDE IMAGES
---------------------------------------------------------- */

.measurement-guide img[alt="How to measure image"] {
  display: none !important;
}

.measurement-guide {
  background-image: url("/static/images/how_to_measure_sir_blk.70bac4e66769.png");
  min-height: 300px;
}

.measurement-image-shirt {
    background-image: url("/static/images/shirt_measure_sir_blk.3fc26902fb69.png");
}

/* override figure when model-has-png is present on the stack */
.body-model-stack.model-has-png .png-bottom-layer {
    background-image: url("/static/bodyshape/body-base-white.d69d32195b71.png");
}

.body-model-stack.model-has-png .png-top-layer {
    background-image: url("/static/bodyshape/body-top-dark.f6b39f9555de.png");
}

.modal-content {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

#sizemeModalClose {
    background: none;
    color: #000;
    font-size: 3rem;
}

.grid button {
  padding: 6px 8px;     /* smaller interior spacing */
  font-size: 14px;      /* smaller text */
  min-width: 35px;      /* narrower buttons */
  min-height: 40px;     /* shorter buttons */
  border-radius: 0px;
}

.grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Size Scales*/
.size-scale,
.size-scale * {
    color: #000 !important;
}

/* pointer and track in white */
.size-scale .track {
    background-color: #000;
}

.size-scale .pointer {
  border-top-color: #000; /* or white */
}

.modal-content .btn-primary,
.modal-content button[type="submit"] {
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  border-radius: 0 !important;
}

.modal-content .btn-primary:hover,
.modal-content button[type="submit"]:hover {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  transition: all 0.2s ease-in-out;
}

.modal-body {
  text-align: center;
}

/* ===== Back link ===== */
.back-link {
    color: var(--primary-color) !important;
}

/* ===== Logo Override ===== */
.logo {
  background-image: url("/static/images/logo_icon.a2eb919add2e.png");
}

.add-to-cart {
    position: relative;
    font-size: 0;
}

.add-to-cart::after {
    content: "Add to Cart";
    font-size: 1rem;
    font-weight: 500;
}

/* ========= Test in console ==========
(() => {
  // --- config ---
  const iframeDomain = "sizemeapp.sizeapp.se";
  const domain = "sizeapp.se";
  const externalId = "dam-troja";
  const lang = "en";

  const iframeUrl = `https://${iframeDomain}/sizemeapp/prompt/?domain=${encodeURIComponent(domain)}&external_id=${encodeURIComponent(externalId)}&lang=${encodeURIComponent(lang)}`;

  const addToCartSelector =
    'button.ProductForm__AddToCart[data-action="add-to-cart"]';

  const newButtonText = "Find my size";

  // --- ruler SVG ---
  const svgMarkup = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
      <rect x="8" y="24" width="48" height="16" rx="4"></rect>
      ${[12, 20, 28, 36, 44, 52]
        .map((x, i) => `
          <line x1="${x}" y1="24" x2="${x}" y2="${i % 2 === 0 ? 32 : 28}"></line>
        `).join("")}
    </svg>
  `;

  // --- cleanup ---
  window.__sizemeDrawerCleanup__?.();
  delete window.__sizemeDrawerCleanup__;
  document.getElementById("__sizeme_drawer_modal__")?.remove();
  document.getElementById("__sizeme_drawer_style__")?.remove();
  document.getElementById("__sizeme_button__")?.remove();

  // --- styles ---
  const style = document.createElement("style");
  style.id = "__sizeme_drawer_style__";
  style.textContent = `
    #__sizeme_drawer_modal__{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.45);
      z-index:2147483647;
    }

    #__sizeme_drawer_panel__{
      position:fixed;
      top:0;
      right:0;
      width:min(400px, 90vw);
      height:100vh;
      background:#fff;
      box-shadow:-4px 0 16px rgba(0,0,0,.2);
      transform:translateX(100%);
      transition:transform .35s ease;
      overflow:hidden;
    }

    #__sizeme_drawer_modal__.show #__sizeme_drawer_panel__{
      transform:translateX(0);
    }

    #__sizeme_drawer_close__{
      position:absolute;
      top:1rem;
      right:1rem;
      width:40px;
      height:40px;
      border:none;
      border-radius:50%;
      background:#fff;
      color:#000;
      font-size:2rem;
      cursor:pointer;
      z-index:3;
      line-height:1;
    }

    #__sizeme_drawer_iframe__{
      width:100%;
      height:100%;
      border:0;
      display:block;
      background:#fff;
    }

    body.__sizeme_no_scroll__{
      overflow:hidden !important;
    }

    #__sizeme_button__{
      width:100%;
      margin-top:12px;
      background:#fff;
      color:#000;
      border:1px solid #000;
      border-radius:0;
      padding:10px 20px;
      cursor:pointer;
      font-family: var(--font-family-primary, "Montserrat", Arial, sans-serif);
      text-transform:uppercase;
      letter-spacing:0.05em;
      font-weight:500;
      font-size: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }

    #__sizeme_button__ svg{
      width:18px;
      height:18px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
    }

    #__sizeme_button__:hover{
      background:#000;
      color:#fff;
    }
  `;
  document.head.appendChild(style);

  // --- modal ---
  const modal = document.createElement("div");
  modal.id = "__sizeme_drawer_modal__";
  modal.innerHTML = `
    <div id="__sizeme_drawer_panel__" role="dialog" aria-modal="true" aria-label="Find my size">
      <button id="__sizeme_drawer_close__" type="button">×</button>
      <iframe id="__sizeme_drawer_iframe__"></iframe>
    </div>
  `;
  document.body.appendChild(modal);

  const panel = modal.querySelector("#__sizeme_drawer_panel__");
  const iframe = modal.querySelector("#__sizeme_drawer_iframe__");
  const closeBtn = modal.querySelector("#__sizeme_drawer_close__");

  let ignoreOutsideClickUntil = 0;

  const openModal = () => {
    iframe.src = iframeUrl;
    modal.style.display = "block";
    document.body.classList.add("__sizeme_no_scroll__");
    ignoreOutsideClickUntil = Date.now() + 300;
    requestAnimationFrame(() => modal.classList.add("show"));
  };

  const closeModal = () => {
    modal.classList.remove("show");
    setTimeout(() => {
      modal.style.display = "none";
      document.body.classList.remove("__sizeme_no_scroll__");
      iframe.src = "";
    }, 350);
  };

  closeBtn.addEventListener("click", closeModal);

  modal.addEventListener("click", (e) => {
    if (Date.now() < ignoreOutsideClickUntil) return;
    if (!panel.contains(e.target)) closeModal();
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") closeModal();
  });

  // --- insert button ---
  const insertButton = () => {
    const addToCartButton = document.querySelector(addToCartSelector);
    if (!addToCartButton) return;
    if (document.getElementById("__sizeme_button__")) return;

    const btn = document.createElement("button");
    btn.id = "__sizeme_button__";
    btn.type = "button";

    btn.innerHTML = `
      ${svgMarkup}
      <span>${newButtonText}</span>
    `;

    btn.addEventListener("click", (e) => {
      e.preventDefault();
      openModal();
    });

    addToCartButton.insertAdjacentElement("afterend", btn);
  };

  insertButton();

  const observer = new MutationObserver(insertButton);
  observer.observe(document.body, { childList: true, subtree: true });

  window.__sizemeDrawerCleanup__ = () => {
    observer.disconnect();
    document.getElementById("__sizeme_drawer_modal__")?.remove();
    document.getElementById("__sizeme_drawer_style__")?.remove();
    document.getElementById("__sizeme_button__")?.remove();
    document.body.classList.remove("__sizeme_no_scroll__");
  };

  console.log("SizeMe drawer installed.");
})();
*/