/* calling the font style from google*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ---------------------------------------------------- */
/* --------------------------------------------------- */
/*----------------- GENERAL STYLES -------------------*/
/* ---------------------------------------------------- */
/* --------------------------------------------------- */
.custom-rug-wrapper{
  /* css variables specific to the custom-rug-wrapper*/
  --cr-font-family: "Outfit", sans-serif;

  --cr-font-size-base: clamp(0.875rem, 0.5901rem + 0.5944vw, 1.125rem);
  --cr-font-size-base-height: 1.5;


  --cr-font-size-heading: clamp(1.125rem, 0.6976rem + 0.8915vw, 1.5rem);
  --cr-font-size-heading-height: 1.3;

  --cr-font-weight-300: 300;
  --cr-font-weight-400: 400;
  --cr-font-weight-500: 500;
  --cr-font-style: normal;
  --cr-optical-sizing: auto;
 
  --cr-gap-xsm: 0.25rem; /* 4px */
  --cr-gap-sm: 0.5rem; /* 8px */
  --cr-gap-x: 0.625rem; /* 10px */
  --cr-gap-xmd: 0.75rem; /* 12px */
  --cr-gap-md: 1rem; /* 16px */
  --cr-gap-lg: 1.5rem; /* 24px */
  --cr-gap-xl: 2rem; /* 32px */
  --cr-gap-2xl: 2rem; /* 64px */


  --cr-white-clr:#fff;
  --cr-pry-clr:#D07E5A;
  --cr-txt-clr:#1E1E1E;
  --cr-hd-clr:#0E0E0E;
  --cr-bdr-clr:#9A998E;
  --cr-dark-clr:#B25E42;

  --cr-transition: all 0.3s ease;
  --cr-selected-shadow: 0 0 5px #333;

  --cr-button-height: 2.5rem; /* 40px */
  --cr-preview-height: 9.375rem; /* 150px */
  --cr-preview-width:18.75rem; /* 300px */



}
.custom-rug-wrapper * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--cr-font-family);
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/
.custom-rug-wrapper .selected {
  box-shadow: var(--cr-selected-shadow);
  transform: none !important;
}

.custom-rug-wrapper .visible {
  display: flex !important; /* Override any conflicting styles */
}
/*-----------------------------------------------------*/
/*-----------------------------------------------------*/

.custom-rug-wrapper .navigation {
  display: flex;
  gap: var(--cr-gap-md);
  margin-top: var(--cr-gap-xl); 
}



/* Tablet: 768px – 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper {
    --cr-padding: 1rem;
    --cr-button-padding: 0.5rem 1rem;
  }
}

@media (max-width: 767px) {
  .custom-rug-wrapper {
    --cr-padding: 0.75rem;
    --cr-button-padding: 0.5rem 0.75rem;
  }
}


.custom-rug-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* General styles for buttons --1 */
.custom-rug-wrapper .next-btn,
.custom-rug-wrapper .proceedCheckoutBtn,
.custom-rug-wrapper #buyNowBtn,
.custom-rug-wrapper #resetBtn{
  color:var(--cr-white-clr);
  background-color: var(--cr-pry-clr);
  border: 1px solid var(--cr-pry-clr);
  cursor: pointer;
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base);
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-500);
  padding: var(--cr-gap-sm) var(--cr-gap-lg);
  transition: var(--cr-transition);
}


.custom-rug-wrapper .next-btn:hover,
.custom-rug-wrapper .proceedCheckoutBtn:hover,
.custom-rug-wrapper #buyNowBtn:hover,
.custom-rug-wrapper #resetBtn:hover{
  color:var(--cr-white-clr);
  background-color: var(--cr-dark-clr);
  border: 1px solid var(--cr-dark-clr);
  transform:scale(1.05);
}

/* -----General styles for buttons --2 -----*/
.custom-rug-wrapper .prev-btn,
.custom-rug-wrapper #getPriceBtn{
  color:var(--cr-hd-clr);
  background-color: transparent;
  border: 1px solid var(--cr-bdr-clr);
  cursor: pointer;
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base) !important;
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-500);
  padding: var(--cr-gap-sm) var(--cr-gap-lg);
  transition: var(--cr-transition);
}

.custom-rug-wrapper .prev-btn:hover,
.custom-rug-wrapper #getPriceBtn:hover{
  color:var(--cr-white-clr);
  background-color: var(--cr-bdr-clr);
  transform:scale(1.05);
}


.custom-rug-wrapper label,
.custom-rug-wrapper .visual_preview_title,
.custom-rug-wrapper h2{
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-heading);
  line-height: var(--cr-font-size-heading-height);
  font-weight: var(--cr-font-weight-400);
  color: var(--cr-hd-clr);
  margin: 0;
  margin-bottom: var(--cr-gap-md);
  display: block;
}

.custom-rug-wrapper .priceAnnouncer{
  margin-bottom: 0;
  font-family: var(--cr-font-family)!important;
}

/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/*----------------- MAIN SECTION STYLES ---------------*/
/* -------------------------------------------------- */
/* ------------------------------------------------- */
.custom-rug-wrapper .mainSection {
  display: flex;
  flex-direction: row;
  min-height: 100vh; /* Full viewport height */
  max-width: 100%;
  gap: var(--cr-gap-xl); /* 24px */
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper .mainSection{
    gap:var(--cr-gap-lg); /* 24px */
  }
}

@media (max-width: 767px) {
  .custom-rug-wrapper .mainSection {
    flex-direction: column-reverse; /* Stack form and preview on smaller screens */
    gap: 0; /* No gap on mobile */
  }
}

/* ---------------------------------------------------- */
/*----------------- FORM SECTION ---------------*/
/* -------------------------------------------------- */
.custom-rug-wrapper .formWrapper {
  flex: 1;
  overflow-y: auto; /* Scrollable content */
  overflow-x: hidden; /* Scrollable content */
  max-height: 100vh; /* Prevent overflow */
  padding: 0; 
  border:none;
  display: flex;
  flex-direction: column;
  z-index: 11;
  background: var(--cr-white-clr);
}


/* typebtn: for material styles optionbtn:for materials*/
.custom-rug-wrapper .optionBtn,
.custom-rug-wrapper .typeBtn {
  width: 100%;
  font-family: var(--cr-font-family);
  padding: 0;
  border: 1px solid var(--cr-bdr-clr);
  background: transparent;
  cursor: pointer;
  transition: var(--cr-transition);
  display: flex;
  gap: var(--cr-gap-sm);
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-size: var(--cr-font-size-base);
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-400);
  color: var(--cr-txt-clr);
}

.custom-rug-wrapper .optionBtn img {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  object-fit: cover;
}

.custom-rug-wrapper .typeBtn {
  padding: var(--cr-gap-sm) var(--cr-gap-lg);
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper .typeBtn {
    padding: var(--cr-gap-sm) var(--cr-gap-md); /* 16px */
  }
}

@media (max-width: 767px) {
  .custom-rug-wrapper .typeBtn {
    padding: var(--cr-gap-sm) 2px; /* 16px */
  }
}

.custom-rug-wrapper .optionBtn:hover,
.custom-rug-wrapper .typeBtn:hover {
  border: 1px solid var(--cr-dark-clr);
  background-color: var(--cr-dark-clr);
  color: var(--cr-white-clr);
  transform: scale(1.05); /* Slightly enlarge the button */
}

/* Active state & Selected state for option buttons */
.custom-rug-wrapper .optionBtn.active,
.custom-rug-wrapper .typeBtn.selected {
  border: 1px solid var(--cr-dark-clr);
  background-color: var(--cr-dark-clr);
  color: var(--cr-white-clr);
  transform: none !important; /* Override any scaling */
}



.custom-rug-wrapper .borderTypeBtn.selected,
.custom-rug-wrapper .borderTypeBtn.selected div {
  background:var(--cr-dark-clr);
  color: var(--cr-white-clr);
}

/* ---------------------------------------------------- */
/*----------------- STEPS AND NAVIGATION---------------*/
/* -------------------------------------------------- */
.custom-rug-wrapper .step {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-rug-wrapper .step.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
  
}

.custom-rug-wrapper .formWrapper .step-indicator {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  width: 100%;
  margin-bottom: var(--cr-gap-xl);
}

.custom-rug-wrapper .formWrapper .step-indicator::-webkit-scrollbar {
  display: none;
}
.custom-rug-wrapper .step-dot {
  flex: 1 1 0;
  scroll-snap-align: center;
  min-width: 0; /* required for flex children in scroll containers */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cr-white-clr);
  background-color: var(--cr-bdr-clr);
  border: 1px solid var(--cr-bdr-clr);
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base);
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-500);
  padding: var(--cr-gap-xmd);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--cr-transition);
}

/* Mobile: Each step = 1/3 width */
@media (max-width: 1024px) {
  .custom-rug-wrapper .formWrapper .step-dot {
    flex: 0 0 calc(100% / 3);
  }
}

.custom-rug-wrapper .step-dot.active {
  background:var(--cr-pry-clr);
  border-color:var(--cr-pry-clr);
  color: white;
}

.custom-rug-wrapper .step-dot.hidden {
  display: none !important; /* Hide the step dot */
}

.custom-rug-wrapper .step {
  transition: opacity 0.3s ease, display 0.3s ease;
}


/* ---------------------------------------------------- */
/*----------------- STEP ONE---------------*/
/* -------------------------------------------------- */
.custom-rug-wrapper .mainRug {
  display: flex;
  flex-direction: column !important;
  gap: 0!important;
  
}

/* Material options grid */
.custom-rug-wrapper .materialOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cr-gap-lg);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper .materialOptions {
    grid-template-columns: repeat(2, 1fr);/* Adjust for tablet screens */
    gap: var(--cr-gap-md); /* 16px */
  }
}


@media (max-width: 767px) {
  .custom-rug-wrapper .materialOptions,
  .custom-rug-wrapper .typesWrapper {
    grid-template-columns: repeat(2, 1fr); /* Stack form and preview on smaller screens */
    gap: var(--cr-gap-md); /* 16px */
  }
}


/* Types wrapper */
.custom-rug-wrapper .typesWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cr-gap-lg);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper .typesWrapper {
    gap: var(--cr-gap-md); /* 16px */
  }
}

@media (max-width: 767px) {
  .custom-rug-wrapper .typesWrapper {
    gap: var(--cr-gap-md); /* 16px */
  }
}

.custom-rug-wrapper .typesBtnWrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

/* Material types and color selections */
.custom-rug-wrapper .materialTypesSelections,
.custom-rug-wrapper .typeColors {
  display: flex;
  flex-direction: column;
  margin-top: var(--cr-gap-xl); /* 32px */
}

.custom-rug-wrapper .materialTypes {
  display: none; /* Hidden by default */
  flex-direction: column;
  gap: 0 !important;
}

.custom-rug-wrapper .typeColors {
  display: none; /* Hidden by default */
  margin-top: 0.75rem; /* 12px */
}


/*-----------------------------------------------------*/
/*---------------------COLOR GROUP--------------------------------*/
.custom-rug-wrapper .colorGroup {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cr-gap-sm);
}

.custom-rug-wrapper .colorGroup button {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: var(--cr-transition);
}
.custom-rug-wrapper .colorGroup button:hover {
  transform: scale(1.05);
  border: 1px solid var(--cr-dark-clr);
}

.custom-rug-wrapper .colorGroup button.selected {
  border: 3px solid var(--cr-dark-clr);
}

.custom-rug-wrapper label.colorTitle {
  text-align: center;
  font-size: var(--cr-font-size-base) !important; /* 18px */
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-400);
  margin-bottom: var(--cr-gap-sm); /* 8px */
  color: var(--cr-txt-clr);
  opacity: 0.8;
}

/*-----------------------------------------------------*/
/*---------------------END COLOR GROUP--------------------------------*/



/* ---------------------------------------------------- */
/*----------------- STEP TWO---------------*/
/* -------------------------------------------------- */

.custom-rug-wrapper .borderTypeBtnsWrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cr-gap-lg);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper .borderTypeBtnsWrapper {
    grid-template-columns: repeat(2, 1fr);/* Adjust for tablet screens */
    gap: var(--cr-gap-md); /* 16px */
  }
}

@media (max-width: 767px) {
  .custom-rug-wrapper .borderTypeBtnsWrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cr-gap-md); /* 16px */
  }
}

.custom-rug-wrapper .borderTypeBtn {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: var(--cr-transition);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base);
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-400);
  border: 1px solid var(--cr-bdr-clr);
  color: var(--cr-txt-clr);
}

.custom-rug-wrapper .borderTypeBtn span {
  opacity: 0.8;
}


.custom-rug-wrapper .borderTypeBtn img {
  width: 100%;
  height: fit-content;
  object-fit: cover;
}


.custom-rug-wrapper .borderTypeBtn div {
  padding: var(--cr-gap-sm); /* 12px */
  display: flex;
  flex-direction: column;
  gap: var(--cr-gap-xsm);
  align-items: center;
  justify-content: center;
  height: 100%;
}

.custom-rug-wrapper .borderTypeBtn.selected { 
  background: var(--cr-dark-clr); 
  color: var(--cr-white-clr); 
  border-color:var(--cr-dark-clr);
}

/* ---------------------------------------------------- */
/*----------------- END STEP TWO---------------*/
/* -------------------------------------------------- */



/* ---------------------------------------------------- */
/*----------------- RESULTS SECTION ---------------*/
/* -------------------------------------------------- */

/* Results section (fixed/sticky) */
.custom-rug-wrapper .previewWrapper {
  flex: 1;
  position: sticky;
  top: 0;
  overflow-y: auto; /* Scroll if content overflows */
  display: flex;
  height: 100vh; /* Full viewport height */
  flex-direction: column;
  gap: var(--cr-gap-2xl);
  text-align: center;
  background-color: var(--cr-white-clr);
  z-index: 10; /* Ensure it stays above other content */
}

@media (max-width: 767px) {
  .custom-rug-wrapper .previewWrapper {
    height: 0 !important; }/* Allow natural height on mobile */
}




/* Visual preview */
.custom-rug-wrapper .visualPreview {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: 11;
  
}


/* Preview displays */
.custom-rug-wrapper .mainRugDisplay,
.custom-rug-wrapper .innerBorderDisplay,
.custom-rug-wrapper .outerBorderDisplay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-size: cover;
  background-position: center;
}



.custom-rug-wrapper .mainRugDisplay {
  height: var(--cr-preview-height);
  background: var(--cr-bdr-clr);
}

.custom-rug-wrapper .innerBorderDisplay,
.custom-rug-wrapper .outerBorderDisplay {
  padding: var(--cr-gap-md); /* 16px, overridden by JS for innerBorderDisplay */
}

/* Ensure outerBorderDisplay max-width for clarity */
.custom-rug-wrapper .outerBorderDisplay {
  max-width: var(--cr-preview-width); /* 300px */
  width: var(--cr-preview-width); /* 300px */
  background: var(--cr-hd-clr);
}

.custom-rug-wrapper .innerBorderDisplay {
  background: var(--cr-txt-clr);
}

.custom-rug-wrapper .measurementUnitWrapper {
  display: flex;
  gap: var(--cr-gap-xl, 2rem); /* 32px */
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin-bottom: var(--cr-gap-md, 1rem); /* 24px */
}



@media (max-width: 767px) {
  .custom-rug-wrapper .measurementUnitWrapper {
    gap: var(--cr-gap-lg, 1.5rem); /* 24px */
  }
}

.custom-rug-wrapper .measurementUnitWrapper .cr-flex-2col {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center; /* center horizontally */
  justify-content: start; /* center vertically */
  text-align: center;
  width: auto;
  gap: var(--cr-gap-xsm);

}

.custom-rug-wrapper .measurementUnitWrapper .cr-flex-2col.centimeterWrapper {
  justify-content: end; /* center vertically */

}
.custom-rug-wrapper .cr-flex-2col{
  display: flex;
  flex-direction: row;
  gap: var(--cr-gap-sm, 0.5rem);
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base) !important; /* 18px */
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-300);
  color: var(--cr-txt-clr);
}

.custom-rug-wrapper .cr-flex-2col label {
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base, 1rem) !important;
  line-height: var(--cr-font-size-base-height, 1.5);
  font-weight: var(--cr-font-weight-300, 300);
  color: var(--cr-txt-clr, #1E1E1E);
  margin: 0 !important;
  cursor: pointer;
}

/* Radio input itself */
.custom-rug-wrapper .cr-flex-2col input[type="radio"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--cr-bdr-clr, #9A998E);
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  margin-top: -1px;
}



.custom-rug-wrapper .cr-flex-2col input[type="radio"]:checked {
  border-color: var(--cr-pry-clr, #D07E5A);
  background-color: var(--cr-pry-clr, #D07E5A);
}

.custom-rug-wrapper .cr-flex-2col input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


/* Input input itself */
.custom-rug-wrapper .meaInputsWrapper label {
  width: 116px;
  text-align: start;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-rug-wrapper .meaInputsWrapper label {
    width: 90px;
  }
}

@media (max-width: 767px) {
  .custom-rug-wrapper .meaInputsWrapper label {
    width: 88px;
  }
}

.custom-rug-wrapper .cr-flex-2col input[type="number"],
.custom-rug-wrapper .cr-flex-2col input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--cr-gap-sm) var(--cr-gap-xmd); /* 16px */
  font-family: var(--cr-font-family);
  font-size: var(--cr-font-size-base, 1rem);
  line-height: var(--cr-font-size-base-height, 1.5);
  color: var(--cr-txt-clr, #1E1E1E);
  background-color: var(--cr-white-clr, #fff);
  border: 1px solid var(--cr-bdr-clr, #9A998E);
  transition: var(--cr-transition, all 0.3s ease);
  box-sizing: border-box;
}

.custom-rug-wrapper .cr-flex-2col input[type="number"]:focus,
.custom-rug-wrapper .cr-flex-2col input[type="text"]:focus {
  outline: none;
  border-color: var(--cr-dark-clr, #D07E5A);
  box-shadow: 0 0 0 2px rgba(208, 126, 90, 0.2);
}

.custom-rug-wrapper .calcDimensionField {
  display: flex;
  flex-direction: column;
  gap: var(--cr-gap-xmd);
}

.custom-rug-wrapper .formCtaWrappers{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--cr-gap-lg);
  margin-top: var(--cr-gap-xmd); /* 16px */
}

.custom-rug-wrapper #finalPriceDisplay{
  margin-top: var(--cr-gap-xmd); /* 16px */
  font-family: var(--cr-font-family)!important;
  font-size: clamp(1.25rem, 0.6802rem + 1.1887vw, 1.75rem);
  font-weight: var(--cr-font-weight-500);
  margin-bottom: 0;
}

.custom-rug-wrapper .formFooter {
  display: flex;
  flex-direction: column;
  gap: var(--cr-gap-lg);
  justify-content: center;
  align-content: center;
}

@media (max-width: 767px) {
  .custom-rug-wrapper #rugForm {
  margin-bottom: -32px;
}
}

/* Table wrapper */
.custom-rug-wrapper .tableWrapper {
  display: flex;
  flex-direction: column;
  gap: var(--cr-gap-xl);
  width: 100%;
  
}

@media (max-width: 767px) {
  .custom-rug-wrapper .tableWrapper {
    display: none; /* Hide table on mobile */
  }

}

.custom-rug-wrapper .tableWrapper table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: var(--cr-font-size-base);
  line-height: var(--cr-font-size-base-height);
  font-weight: var(--cr-font-weight-300);
  color: var(--cr-txt-clr);
}

.custom-rug-wrapper .tableWrapper th,
.custom-rug-wrapper .tableWrapper td {
  border: 1px solid var(--cr-bdr-clr);
  padding: var(--cr-gap-sm);
}

.custom-rug-wrapper .tableWrapper th{
  font-weight: var(--cr-font-weight-400);
}


.feedback-error {
  color: red;
  font-size: 0.9em;
  margin-top: 10px;
}


/* assets/css/customrug.css */