@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v30/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fitting-room-primary-font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --fitting-room-secondary-font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --fitting-room-button-font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

.fitting-room-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fitting-room-primary-font);
  width: 100%;
  /* Variables except fonts */
  --fitting-room-button-background: white;
  --fitting-room-button-border-width: 2.5px;
  --fitting-room-button-border-color: #7f7f7f;
  --fitting-room-button-border-radius: 10px;
  --fitting-room-button-hover-background: #424242;
  --fitting-room-button-hover-border: 2.5px solid #424242;
  --fitting-room-button-width: 100%;
  --fitting-room-button-max-width: 500px;
  --fitting-room-logo-color: grayscale(1);
  --fitting-room-logo-hover-color: brightness(0) invert(1);
  --fitting-room-widget-background: rgb(255 255 255 / 90%);
  --fitting-room-widget-border: 3px solid #595959;
  --fitting-room-widget-border-radius: 10px;
  --fitting-room-upload-hover-text-color: white;
  --fitting-room-upload-hover-border: 2.5px solid #9C9C9C;
  --fitting-room-upload-background: #ffffff;
  --fitting-room-tryon-background: #ffffff;
}

.fitting-room-button {
  all: unset; 
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: white;
  border: 2.5px solid #7f7f7f;
  border-radius: 10px;
}

.fitting-room-button img.fitting-room-icon {
  display: block;
  margin: 0 auto;
  transition: filter 0.2s ease;
  filter: var(--fitting-room-logo-color);
}

.fitting-room-button:hover .fitting-room-icon {
  filter: var(--fitting-room-logo-hover-color);
}

/* Main container styling */
.fitting-room-try-on {
  display: flex;
  width: 100%;
  margin: 1rem auto;
  text-align: center;
}

#openModalBtn {
  width: var(--fitting-room-button-width);                           
  max-width: var(--fitting-room-button-max-width);                   
  padding: 12px;
  background: var(--fitting-room-button-background);
  border: var(--fitting-room-button-border-width) solid var(--fitting-room-button-border-color);
  border-radius: var(--fitting-room-button-border-radius);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--fitting-room-button-font);
  color: #4A4A4A;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none !important;
  display: block;
}

#openModalBtn:hover {
  background: var(--fitting-room-button-hover-background);
  border-color: var(--fitting-room-button-hover-border);
  color: white;
}

#openModalBtn:focus {
  outline: none !important;
}

.fitting-room-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999999;
  -webkit-tap-highlight-color: transparent;
}

.fitting-room-modal-content {
  /* Base styles only, will be overridden by JavaScript */
  background: rgb(255 255 255 / 90%);
  padding: 10px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 3px solid #595959;
  font-family: var(--fitting-room-primary-font);
  z-index: 1000000000; /* Highest z-index to ensure it appears on top */
}
 
.fitting-room-modal-header {
  text-align: right;
  margin-bottom: 10px;
  position: relative;
  height: 20px;
  cursor: grab;
}

.fitting-room-modal-header.dragging {
  cursor: grabbing;
}

.fitting-room-close-button {
  position: absolute;
  top: -8px;
  right: -30px;
  font-size: 26px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.fitting-room-image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

#fitting-room-upload-area {
  /* Base styles only, will be overridden by JavaScript */
  width: 100%;
  aspect-ratio: 4/5;
  border: var(--fitting-room-upload-border, 2.5px solid #7f7f7f);
  border-radius: var(--fitting-room-upload-border-radius, 10px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: var(--fitting-room-upload-background, #ffffff);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}

#fitting-room-upload-area:hover {
  /* Base hover styles, will be overridden by JavaScript */
  background: var(--fitting-room-upload-hover-background);
  border: var(--fitting-room-upload-hover-border);
}

#fitting-room-upload-area p {
  /* Base text styles, will be overridden by JavaScript */
  color: #4A4A4A;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 700;
  font-family: var(--fitting-room-primary-font);
  margin: 0;
  letter-spacing: 1px;     
  line-height: 1.4;
  text-align: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.fitting-room-hover-instructions {
  display: none;
  position: absolute;
  top: 50%;
  /* Default position for English */
  left: 53%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: left;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: var(--fitting-room-primary-font);
}

/* Spanish and Portuguese (similar language characteristics) */
:lang(es) .fitting-room-hover-instructions,
:lang(pt) .fitting-room-hover-instructions {
  left: 50%;
}

/* Chinese, Japanese (CJK languages - more compact) */
:lang(zh) .fitting-room-hover-instructions,
:lang(ja) .fitting-room-hover-instructions {
  left: 68%;
}

/* French and German (typically longer words) */
:lang(fr) .fitting-room-hover-instructions,
:lang(de) .fitting-room-hover-instructions {
  left: 52%;
}

/* Italian (medium length) */
:lang(it) .fitting-room-hover-instructions {
  left: 51%;
}

.fitting-room-hover-instructions p {
  color: var(--fitting-room-upload-hover-text-color);
  font-size: clamp(9px, 2vw, 11px) !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;
  position: relative;
  font-family: var(--fitting-room-primary-font) !important;
  letter-spacing: 0.3px !important;
  line-height: 1.6 !important;
  width: 100% !important;
  padding: 0 !important;
}

.fitting-room-hover-instructions ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  position: relative;
  color: var(--fitting-room-upload-hover-text-color);
  width: 100%;
  box-sizing: border-box;
}

.fitting-room-hover-instructions li {
  color: var(--fitting-room-upload-hover-text-color);
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 600;
  margin: 4px 0;
  letter-spacing: 0.3px;
  line-height: 1.5;
  position: relative;
  font-family: var(--fitting-room-primary-font);
  text-align: left;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

#fitting-room-upload-area:hover p:not(.fitting-room-hover-instructions p):not(.fitting-room-privacy-message p) {
  display: none;
}

#fitting-room-upload-area:hover .fitting-room-hover-instructions {
  display: block;
}

#fitting-room-upload-area:hover .fitting-room-hover-instructions p,
#fitting-room-upload-area:hover .fitting-room-hover-instructions li,
#fitting-room-upload-area:hover .fitting-room-privacy-message p {
  color: var(--fitting-room-upload-hover-text-color);
}

.fitting-room-privacy-message {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.fitting-room-privacy-message p {
  color: #4A4A4A;
  font-size: clamp(7px, 1.5vw, 8px) !important;
  font-weight: 700 !important;
  font-family: var(--fitting-room-primary-font) !important;
  margin: 4px 0 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  width: 100% !important;
  padding: 0 !important;
}

#fitting-room-upload-area:hover p {
  /* Base hover text styles, using the variable */
  color: var(--fitting-room-upload-hover-text-color);
}

#fitting-room-upload-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease;
}

.fitting-room-patience-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1005;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
  pointer-events: none;
  transform: translateZ(0);
}

.fitting-room-patience-message.visible {
  opacity: 1;
}

.fitting-room-patience-message p {
  color: rgb(70, 70, 70);
  font-size: clamp(8px, 1.8vw, 10px) !important;
  font-weight: 700 !important;
  font-family: var(--fitting-room-primary-font);
  margin: 3.5px 0 !important;
  letter-spacing: 0.5px;
  line-height: 1.5;
  overflow: hidden;
  max-width: 100%;
}

/* Add extra margin to the percentage text (third paragraph) */
.fitting-room-patience-message p:nth-child(3) {
  margin-top: 8px !important;
}

.fitting-room-try-on-button {
  /* Base styles only, will be overridden by JavaScript */
  max-width: 250px;
  width: auto;
  min-width: auto;
  box-sizing: border-box;
  padding: 12px 24px;
  background: var(--fitting-room-tryon-background, #ffffff);
  border: var(--fitting-room-tryon-border, 2.5px solid #7f7f7f);
  border-radius: var(--fitting-room-tryon-border-radius, 10px);
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 700;
  font-family: var(--fitting-room-button-font);
  letter-spacing: 1px;   
  line-height: 1.2;  
  color: var(--fitting-room-tryon-text-color, #4A4A4A);
  cursor: pointer;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none !important;
  margin: 0 auto;
  display: block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fitting-room-try-on-button:hover {
  /* Base hover styles, will be overridden by JavaScript */
  background: var(--fitting-room-tryon-hover-background);
  border: var(--fitting-room-tryon-hover-border);
  color: var(--fitting-room-tryon-hover-text-color);
}

.fitting-room-try-on-button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.fitting-room-eye-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  min-width: auto;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fitting-room-eye-button svg {
  width: 24px;
  height: 24px;
  fill: #666;
}

.fitting-room-modal-header h2 {
  font-family: var(--fitting-room-secondary-font);
  font-weight: 700;
}

.fitting-room-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 0;
}

.fitting-room-loading-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 1000;
  opacity: 0.7;
  display: block;
  transition: opacity 1s ease-out;
  will-change: opacity;
  transform: translateZ(0);
}

.fitting-room-loading-container.fade-out {
  opacity: 0;
  pointer-events: none;
}

.fitting-room-upload-area.highlight {
  border: 2px dashed #7f7f7f;
  background-color: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0 10px rgba(120, 120, 120, 0.5);
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(120, 120, 120, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
  }
}

/* Remove default browser styling for choose file button */
.fitting-room-modal input:empty {
    display: none !important;
}

.fitting-room-button-text {
  display: block;
  font-family: var(--fitting-room-button-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--fitting-room-text-color);
  letter-spacing: 0.5px;
  line-height: 1.2;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}

#openModalBtn:hover .fitting-room-button-text {
  color: var(--fitting-room-text-hover-color);
}

/* Add specific adjustments for CJK (Chinese, Japanese, Korean) text */
:lang(zh) .fitting-room-hover-instructions p,
:lang(zh) .fitting-room-hover-instructions li,
:lang(ja) .fitting-room-hover-instructions p,
:lang(ja) .fitting-room-hover-instructions li {
  letter-spacing: normal !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
}

:lang(zh) .fitting-room-privacy-message p,
:lang(ja) .fitting-room-privacy-message p {
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}

/* Specific adjustments for languages with longer text */
:lang(de) .fitting-room-try-on-button,
:lang(fr) .fitting-room-try-on-button,
:lang(it) .fitting-room-try-on-button {
  padding: 12px 20px;
  font-size: clamp(9px, 1.8vw, 11px);
}

/* Specific adjustments for CJK languages */
:lang(zh) .fitting-room-try-on-button,
:lang(ja) .fitting-room-try-on-button {
  letter-spacing: normal;
  font-weight: 500;
}