@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&display=swap");

/* ===== Theme Variables ===== */
:root {
  --primary-color: #3a3a3a;
  --secondary-color: #fff;
  --accent-color: #747c51;
  --font-family: 'Playfair Display', serif;
  --radius: 0px;
}


/* ===== Scrollbar Modal ===== */
html, body {
  scrollbar-width: thin;
  scrollbar-color: #2a1f47 #18112c;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: #18112c;
}

::-webkit-scrollbar-thumb {
  background-color: #2a1f47;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #3a2d5f;
}

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

h1, h2, h3, h4, h6 {
  color: var(--primary-color);
      font-size: 1.8rem;
}

.h5, h5 {
    font-size: 1.1rem;
}

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

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

h1,
h2,
.headline {
  font-weight: 300;
}

.headline {
  font-family: "Playfair Display", serif;
  font-size: 3rem;

  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 .form-control,
.input-group .input-group-text {
  height: 40px;
  border-color: var(--primary-color);
}

.input-group .form-control {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-right: none;
  box-shadow: none;
}

.input-group .input-group-text {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-left: none;
}

/* ===== Focus state (accent text + accent border) ===== */
.form-control:focus,
.input-group .form-control:focus {
  background-color: var(--secondary-color) !important; /* stay dark */
  color: var(--accent-color) !important;               /* accent text */
  border-color: var(--accent-color) !important;        /* accent border */
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder while focused */
.form-control:focus::placeholder,
.input-group .form-control:focus::placeholder {
  color: var(--accent-color) !important;
  opacity: 0.7 !important;
}

/* ===== Filled but not focused ===== */
.form-control:not(:focus),
.input-group .form-control:not(:focus),
.form-control:not(:placeholder-shown):not(:focus),
.input-group .form-control:not(:placeholder-shown):not(:focus) {
  background-color: var(--secondary-color) !important; /* dark background */
  color: var(--primary-color) !important;               /* light text */
  border-color: var(--primary-color) !important;        /* light border */
  box-shadow: none !important;
}

/* ===== Prevent Chrome autofill from changing colors ===== */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--secondary-color) inset !important;
  -webkit-text-fill-color: var(--primary-color) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== Input-group accent handling ===== */
.input-group:focus-within .input-group-text {
  background-color: var(--secondary-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.input-group:not(:focus-within) .input-group-text {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ===== Hide number input arrows (cross-browser) ===== */

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
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-solid-fat,
.btn-outline-dark {
  background: var(--secondary-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius) !important;
}

.btn-dark,
.btn-outline-fat {
  background: var(--primary-color);
  color: var(--secondary-color);
  border-radius: var(--radius) !important;
}

.btn-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;
}

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

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

#confirmContinueModal .confirm-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 12px;
    width: 100%;
    margin-top: 1rem;
}

/* Make buttons identical in shape */
#confirmContinueModal .confirm-buttons-grid .btn {
    width: 100%;
    padding: 12px 0 !important;
    border-radius: 0 !important;
    text-align: center;
}

/* ===== 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);
}

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

.form-container p {
    margin-bottom: 12px;
}

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

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

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

.measurement-guide {
  background-image: url("/static/images/adult_seat_moe.4c7cf4c2f8af.png");
}

.measurement-guide {
  position: relative;
  overflow: hidden;
  background-image: none;
}

.measurement-guide .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 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: 35px;     /* 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;
}

/* ===== Neem test in console ===== 
(() => {
  // -----------------------------
  // Config
  // -----------------------------
  const iframeDomain = "sizemeapp.iknw.se";
  const shop = "iknw.se";
  const handle = "waltz";
  const iframeUrl = `https://${iframeDomain}/shopify_integration/shopify_prompt/?shop=${shop}&handle=${handle}`;

  const BUTTON_SELECTOR = "button.hmc-app-button";
  const WAIT_TIMEOUT = 15000;

  // -----------------------------
  // Cleanup previous install
  // -----------------------------
  window.__sizemeDrawerCleanup__?.();
  delete window.__sizemeDrawerCleanup__;
  document.getElementById("__sizeme_drawer_modal__")?.remove();
  document.getElementById("__sizeme_drawer_style__")?.remove();

  // -----------------------------
  // Helpers
  // -----------------------------
  function findButton() {
    return (
      document.querySelector(BUTTON_SELECTOR) ||
      [...document.querySelectorAll("button, a, [role='button']")].find((el) =>
        /size finder/i.test((el.textContent || "").trim())
      )
    );
  }

  function waitForElement(getElement, callback, timeout = 15000) {
    const existing = getElement();
    if (existing) {
      callback(existing);
      return;
    }

    const start = Date.now();

    const observer = new MutationObserver(() => {
      const el = getElement();
      if (el) {
        observer.disconnect();
        callback(el);
        return;
      }

      if (Date.now() - start > timeout) {
        observer.disconnect();
        console.warn('Could not find the existing "Size Finder" button within timeout.');
      }
    });

    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
    });

    setTimeout(() => {
      observer.disconnect();
      const el = getElement();
      if (el) {
        callback(el);
      } else {
        console.warn('Could not find the existing "Size Finder" button within timeout.');
      }
    }, timeout);
  }

  // -----------------------------
  // Wait for the real button
  // -----------------------------
  waitForElement(findButton, (btn) => {
    console.log("Size Finder button found:", btn);

    // -----------------------------
    // 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:33vw;
        max-width:500px;
        min-width:320px;
        height:100vh;
        background:#fff;
        box-shadow:-4px 0 16px rgba(0,0,0,.2);
        transform:translateX(100%);
        transition:transform .4s ease;
      }

      #__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:#111;
        color:#fff;
        font-size:2rem;
        cursor:pointer;
        z-index:2;
        line-height:1;
      }

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

      body.__sizeme_no_scroll__{
        overflow:hidden !important;
      }

      @media (max-width: 900px) {
        #__sizeme_drawer_panel__{
          width:100vw;
          max-width:none;
          min-width:0;
        }
      }
    `;
    document.head.appendChild(style);

    // -----------------------------
    // Markup
    // -----------------------------
    const modal = document.createElement("div");
    modal.id = "__sizeme_drawer_modal__";
    modal.innerHTML = `
      <div id="__sizeme_drawer_panel__" role="dialog" aria-modal="true" aria-label="Size Finder">
        <button id="__sizeme_drawer_close__" type="button" aria-label="Close">×</button>
        <iframe
          id="__sizeme_drawer_iframe__"
          src=""
          allow="clipboard-read; clipboard-write">
        </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;

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

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

    // -----------------------------
    // Events
    // -----------------------------
    function onCloseClick(e) {
      e.preventDefault();
      e.stopPropagation();
      closeModal();
    }

    function onOverlayClick(e) {
      if (Date.now() < ignoreOutsideClickUntil) return;
      if (!panel.contains(e.target)) closeModal();
    }

    function onKeyDown(e) {
      if (e.key === "Escape" && modal.style.display !== "none") {
        closeModal();
      }
    }

    function hijackPointerDown(e) {
      const clicked = e.target?.closest?.("button, a, [role='button']");
      if (clicked !== btn) return;

      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
    }

    function hijackClick(e) {
      const clicked = e.target?.closest?.("button, a, [role='button']");
      if (clicked !== btn) return;

      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();

      setTimeout(openModal, 0);
    }

    closeBtn.addEventListener("click", onCloseClick);
    modal.addEventListener("click", onOverlayClick);
    document.addEventListener("keydown", onKeyDown, true);
    document.addEventListener("pointerdown", hijackPointerDown, true);
    document.addEventListener("click", hijackClick, true);

    // -----------------------------
    // Cleanup hook
    // -----------------------------
    window.__sizemeDrawerCleanup__ = () => {
      closeBtn.removeEventListener("click", onCloseClick);
      modal.removeEventListener("click", onOverlayClick);
      document.removeEventListener("keydown", onKeyDown, true);
      document.removeEventListener("pointerdown", hijackPointerDown, true);
      document.removeEventListener("click", hijackClick, true);
      document.getElementById("__sizeme_drawer_modal__")?.remove();
      document.getElementById("__sizeme_drawer_style__")?.remove();
      document.body.classList.remove("__sizeme_no_scroll__");
      console.log("SizeMe drawer cleaned up.");
    };

    console.log("SizeMe drawer modal installed successfully.");
  }, WAIT_TIMEOUT);
})(); -->
*/