/* general styles */
:root {
	--xpv-main-font: "futura-pt", sans-serif;
    --xpv-primary-magenta: #C0087F;
    --xpv-primary-magenta-hover: #e01194;
    --xpv-primary-dark-purple: #192039;
    --xpv-primary-dark-purple-hover: #6C3387;
    --xpv-dark-blue: #22408A;
    --xpv-white: #fff;
    --xpv-black: #000;
    --xpv-viewer-bg: #F4F4F4;
    --xpv-button-text: #959696; 
	--xpv-accent-light-blue: #8AA7F9;

      --xpv-text: #111;
  --xpv-muted: #6b7280;
  --xpv-gray-300: #d1d5db;
  --xpv-gray-400: #9ca3af;
  --xpv-gray-500: #9ca3af;

  --xpv-orange-500: #E89D0A;
  --xpv-accent: #E89D0A;
  --xpv-accent-hover: #E89D0A;

  --xpv-bg-selected: #F8F8FA;
  /*
  --xpv-radius-sm: 4px;
  --xpv-radius-md: 6px 0 6px 6px;
  --xpv-radius-lg: 8px 0 8px 8px;
  
  --xpv-radius-full: 9999px;*/

  --xpv-space-2: 8px;
  --xpv-space-3: 12px;
  --xpv-space-4: 16px;
  --xpv-space-6: 24px;

  --xpv-text-sm: 14px;
  --xpv-text-base: 16px;
  --xpv-text-lg: 18px;

  --xpv-transition: all .2s ease-in-out;
}

* {
    border: 1px dotted red!important;
}

@media only screen and (max-width: 600px) {
  div#logo-icon-container {
    width: 36px!important;
    height: 36px!important;
    top: 16px!important;
    left: 16px!important;
  }
  .viewer-container {
    height: 40vh!important;
  }
  .sticky-container {
    padding-bottom: 40vh!important;
  }
  .configurator-container .option-container {
    padding-bottom: 120px!important;
  }

  .xpv-bottom-panel {
    width: 96vw!important;
        left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 0.5rem 0.5rem 1.5rem 0.5rem!important;
  }
  .xpv-panel-buttons {
    display: flex;
    flex-direction: row!important;
    width: 100%;
    gap: 10px!important;
  }
  .xpv-panel-buttons #mobile-pricing {
    display: flex;
  }
  .xpv-panel-header {
    display: none!important;
  }
  #xpv-bottom-panel button {
    padding: 0.5rem 0.8rem!important;
  }
  .xpv-btn-black, .xpv-btn-black p {
    font-size: 1rem;
   }
  .xpv-bottom-panel .expivi-product-price {
    display: block!important;
  }
  .xpv-btn {
    flex: unset!important;
  }
  .xpv-price-value p.original-price {
    color: #fff!important;
    font-weight: 400 !important;
  }

  .v-slide-group {
    top: 40vh!important;
    position: fixed !important;
    padding: 10px !important;
    left: 0;
    width: 100vw!important;
  }
  .v-tabs.v-tabs--grow {
    padding-top: 44px!important;
  }
  #saveDesignBtn .label {
    display:none!important;
  }
  .grid, .grid--center {
    gap: 12px;
  }
  button#xpv-toolbar-item-fullscreen {
    display: none!important;
  }
  .iconsUI { 
    gap: 8px!important;
  }
  .ui-icon-svg svg { 
    height: 14px!important;
    width: 14px!important;
  }

  .xpv-footer-nav button {
    font-size: 0.9rem!important;
    border-radius: 100px!important;
  }

}

@media only screen and (min-width: 601px) {
  .grid-cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr))!important;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
}
}


/* original theme things */
footer, .expivi-closer, .announcement-bar-static, header#SiteHeader, div.product__selectors, [data-block-id="variant_picker"], [data-block-id="quantity_selector"]  {
 
  display: none!important;
}

.child-flex>*, .flex {
    flex: unset;
}

div#logo-icon-container {
  z-index:9999;
  position: fixed;
  top: 28px;
  left: 28px;
  height: 48px;
  width: 48px;
}
div#logo-icon-container img {
  max-width: 100%;

}

/* structure */
.configurator-container .option-container {
  padding-bottom: 220px;
}
.sticky-container .bottom-content {
  display: none!important;
  
}

/* cart */

p[xpv-value-name="Configuration Link"] #option-name {
  display:none;
}

/* add to cart button */

#xpv-summary-form .expivi-add-to-cart {

}

/* right bottom panel */
#xpv-bottom-panel button {
  padding: 0.75rem 1rem;
}
/* XPV Floating Panel */
.xpv-bottom-panel {
  position: fixed;
  bottom: -1rem;
  right: 1rem;
  width: 460px;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  padding: 1rem 1rem 2rem 1rem;
  z-index: 9999;
  font-family: Arial, sans-serif;
}

.xpv-panel-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}

.xpv-panel-title {
  font-family: monospace;
  font-weight: bold;
  font-size: 1.125rem;
}

.xpv-panel-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.xpv-panel-price p {

  font-family: monospace;
  font-weight: bold;
  font-size: 1.5rem;
}
.xpv-panel-price p.original-price, .xpv-price-value p.original-price {
  text-decoration: line-through;
  color: #C0087F;
  font-weight: 300;
}
.xpv-panel.expivi-product-price {
    display: none;
  }

.xpv-price-value {
  font-size: 1.5rem;
  font-weight: bold;
}

.xpv-price-value .expivi-product-price {
  display: flex; 
  flex-direction: row; 
  gap: 20px;
}

.xpv-panel-subtext {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.xpv-panel-buttons {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.xpv-btn {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  flex: 1;
  padding: 0.5rem 1rem;
  font-weight: bold;
  border-radius: 10rem;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  
}

.xpv-btn-orange {
  background-color: #C0087F;
}

.xpv-btn-orange:hover {
  background-color: #e01194;
}

.xpv-btn-black {
  background-color: #000;
  justify-content: center;
}

.xpv-btn-black:hover {
  background-color: #111827;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
#saveDesignBtn {
  display: flex;
  flex-direction: row;
  
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* tailwind css overwrite */

.text-white {
  color: white!important;
}

.bg-orange-500 {
    background-color: #C0087F!important;
}

.bg-black {
    background-color: var(--color-black)!important;
}

#expivi-screenshot-container {
  position: relative!important;
  top: -100px!important;
  display: flex!important;
  align-content: center!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 20px!important;
}
#expivi-screenshot-container:hover {
  cursor: pointer!important;
}

#expivi-screenshot-button {
  border: 1px solid black!important;
  border-radius: 100px!important;
  padding: 10px 20px!important;
}


/* Ensure scrollable container */
.x-p-v .container:has(> .v-slide-group) {
  /*height: 100vh;  */
  overflow-y: auto!important;
  position: relative!important; /* Needed for sticky to work inside */
}

/* === STEP NAV CONTAINER === */
.v-slide-group {
  position: fixed;
  top: 0px;
  z-index: 9999; /* Ensure it stays above other content */
  width: 480px;
  background-color: white; /* Prevent content bleed-through */
  padding: 1.5rem 1rem;
  overflow-x: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
}

.v-slide-group::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

div[role=tablist].v-slide-group {
  display: none;
}


/* === HORIZONTAL BUTTONS === */
.v-slide-group__content > .v-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px; /* full rounded */
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: #e5e7eb; /* Tailwind's bg-gray-200 */
  color: #1f2937; /* Tailwind's text-gray-800 */
}

.v-slide-group__content > .v-btn:hover {
  background-color: #d1d5db; /* hover:bg-gray-300 */
}

/* === ACTIVE STEP BUTTON === */
.v-slide-group__content > .v-btn.v-btn--active {
  background-color: #C0087F!important; /* Tailwind's bg-orange-500 */

}


.v-slide-group__content > .v-btn.v-btn--active:last-of-type {
  background-color: black;

}
.v-slide-group__content > .v-btn.v-btn--active span, .v-slide-group__content > .v-btn.v-btn--active:last-of-type span {
  color: white;
}

/* --- Style the left/right arrow buttons --- */
.v-slide-group__prev button,
.v-slide-group__next button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px!important;
  min-width: unset!important;
  height: 40px!important;
  border-radius: 9999px;
  background-color: black;
  border: 1px solid #dddddd;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.v-slide-group__prev svg path,
.v-slide-group__next svg path {
  fill: #fff;

}
.v-slide-group__prev button:hover,
.v-slide-group__next button:hover {
  background-color: #f0f0f0;
}
.v-slide-group__prev button:hover svg path,
.v-slide-group__next button:hover svg path {
  fill: #000;
}

/* --- Position the buttons --- */
.v-slide-group__prev {
  position: absolute;
  left: 0.25rem; /* Adjust as needed */
}

.v-slide-group__next {
  position: absolute;
  right: 0.25rem; /* Adjust as needed */
}

/* --- Ensure container has relative positioning --- */
.v-slide-group {
  /*position: relative;*/
}

.v-tabs.v-tabs--grow {
 padding-top: 72px;
}

/* --- Optional: prevent hidden overflow --- */
.v-slide-group__wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  position: relative;
    /* Hide scrollbar for Chrome, Safari, and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.v-slide-group__wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* === Remove inner margin from buttons (if exists) === */
.v-slide-group__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* options container */
.v-window.v-item-group {
  padding-top: 26px;
}
.xpv-footer-nav button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  border: 1px solid #C0087F;
  color: #fff!important;
  background-color: #C0087F!important;
}
.xpv-footer-nav button svg path {
  fill: #fff!important;
}
.xpv-footer-nav button.rounded-lg {
  border-radius: 10rem!important;
}

.xpv-footer-nav button:hover {
  background-color: #d9259a!important;
  color: white!important;
}
.xpv-footer-nav button:hover svg path {
  fill: #fff!important;
}

.xpv-footer-nav #xpv-finish-btn {
  background-color: #C0087F;
  cursor: default;
  color: #fff!important;
}


/* modal */
#save-modal-wrapper.hidden {
  display: none !important;
}

#save-modal-wrapper {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;

  /* Animation defaults */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.save-modal {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  /* Animation defaults */
  transform: translateY(-20px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.save-modal h2 {
  font-size: 24px;
  margin-bottom: 16px;
}

.save-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
}

.save-modal-body {
  display: flex;
  gap: 16px;
  flex-direction: row;
  flex-wrap: wrap;
}

.save-modal img {
  max-width: 100%;
  border-radius: 4px;
  width: 100%;
}

.save-modal-attributes {
  flex: 1;
  font-size: 14px;
}

.save-modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .save-modal-privacy {
    font-size: 13px;
    color: #666;
    flex: 1;
    padding-right: 16px;
  }

.save-modal-footer button {
  padding: 8px 16px;
  margin-left: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background: #ddd;
}

.btn-confirm {
  /*background: #007bff;*/
  color: white;
}

.save-modal-email,
.save-modal-name {
  margin-top: 16px;
}

.save-modal-email label,
.save-modal-name label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}

.save-modal-email input,
.save-modal-name input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Light grey placeholder for both name and email fields */
#saveModalName::placeholder,
#saveModalEmail::placeholder {
  color: #aaa;
  opacity: 1;
}
#saveModalName::-webkit-input-placeholder,
#saveModalEmail::-webkit-input-placeholder {
  color: #aaa;
  opacity: 1;
}
#saveModalName::-moz-placeholder,
#saveModalEmail::-moz-placeholder {
  color: #aaa;
  opacity: 1;
}
#saveModalName:-moz-placeholder,
#saveModalEmail:-moz-placeholder {
  color: #aaa;
  opacity: 1;
}
#saveModalName:-ms-input-placeholder,
#saveModalEmail:-ms-input-placeholder {
  color: #aaa;
  opacity: 1;
}
#saveModalName::-ms-input-placeholder,
#saveModalEmail::-ms-input-placeholder {
  color: #aaa;
  opacity: 1;
}

/* === Animation states === */
#save-modal-wrapper.show {
  display: flex;
  opacity: 1;
}

#save-modal-wrapper.show .save-modal {
  opacity: 1;
  transform: translateY(0);
}

#save-modal-wrapper.hide {
  opacity: 0;
}

#save-modal-wrapper.hide .save-modal {
  opacity: 0;
  transform: translateY(-20px);
}

/* ===== UI icons  ===== */
:root {
  --ui-accent: #C0087F; /* Brand orange */
  --ui-fg: #fff;        /* Foreground (icon/text color) */
  --ui-bg: #a4a4a4;     /* Default background */
  --ui-expand-max: 500px; /* kept for future use */
}

/* Container positioning beside the viewer */
.iconsUI {
  position: absolute;
  display: flex;
  flex-direction: row;
  border-radius: 10px 0 0 10px;
  z-index: 99;
  justify-content: center;
  gap: 20px;
  bottom: 8px;
  right: 74px;
}

/* Base button: mobile = 32px, desktop = 48px; NO EXPANSION */
.ui-button {
  background-color: var(--ui-bg);
  color: var(--ui-fg) !important;
  text-decoration: none;
  border-radius: 60px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;          /* options stay clipped inside */
  width: auto;
  max-width: 32px;           /* fixed compact width */
  border: 1px solid rgb(209, 213, 219);
  transition: background-color 0.2s ease, border-color 0.2s ease; /* no width transition */
}

.ui-text {
  font-size: 14px;
}

/* Desktop size bump (still compact) */
@media (min-width: 768px) {
  .ui-button {
    height: 48px;
    max-width: 48px;         /* fixed compact width */
  }
}

/* Active/pressed = orange (NO width change) */
.ui-button-active,
#arButton:active {
  background-color: var(--ui-accent);
  color: #ffffff !important;
  border-color: transparent;
}

/* Hover = just color change (NO width change) */
.ui-button:hover {
  background-color: var(--ui-accent);
  color: #ffffff !important;
  border-color: transparent;
  /* no max-width/min-width here */
}

/* Icon wrapper */
.ui-icon {
  font-family: "FontAwesome";
  font-size: 16px;
  margin-right: 12px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}

.ui-icon-svg {
  margin-right: 12px;
  padding: 0 10px 0 6px;
  display: flex;
  align-items: center;
}

/* SVG sizes: mobile smaller, desktop larger */
.ui-icon-svg svg {
  width: 18px;
  height: 18px;
  margin: 0 0 0 2px;
}
@media (min-width: 768px) {
  .ui-icon-svg svg {
    width: 26px;
    height: 26px;
    margin: 0 0 0 4px;
  }
}

#arButton .ui-icon-svg svg {
  margin: 0;
}

/* Options remain in DOM, but will be clipped by overflow (for future use) */
.ui-options {
  display: inline-flex;
  gap: 10px;
  padding-right: 12px;
  font-size: 13px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .ui-options {
    font-size: 14px;
  }
}

/* Active chip style (only when env is ON, controlled by JS) */
.ui-option-active {
  background-color: white;
  color: #a4a4a4 !important;
  padding: 0 6px;
  border-radius: 100px;
}

/* Pointer */
.singleIcons:hover {
  cursor: pointer;
}

/* Hide native AR control; we proxy it */
#xpv-toolbar-item-web-ar {
  display: none !important;
}

/* Keep fullscreen control at the end if needed */
#xpv-toolbar-item-fullscreen {
  align-self: flex-end;
  margin-left: auto;
}

/* Ensure all text/icons inside UI are white by default */
.iconsUI *,
#xpv-toolbar-loader *,
#xpv-toolbar-ar-qr * {
  color: #fff;
}

/* ===== END UI icons  ===== */