* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
}

/* Loader */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#loader-text {
  font-size: 15px;
  margin-bottom: 20px;
}
#loader-bar {
  width: 250px;
  height: 10px;
  background: #ffffff;
  border: 1px solid #000000;
  overflow: hidden;
}
#loader-bar-fill {
  width: 0%;
  height: 100%;
  background: #000000;
  transition: width 0.1s ease-in-out;
}

/* Canvas */
#canvas {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
}
.icons_visibility_setter {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}
.icons_visibility_setter button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 35px;
  height: 35px;
  border: none;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
}
.icons_visibility_setter img {
  width: 20px;
  height: 20px;
}

/* Icons container */
.modal_container {
  width: 100vw;
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icons_container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: fixed;
  z-index: 100;
  bottom: 15px;
  padding: 7px 25px;
  border-radius: 10px;
  background-color: #dadada;
  min-width: 350px;
}

.icons_container div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.first_set {
  border-right: 1px solid #aaaaaa;
  padding-right: 20px;
}
.modal_button {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
}
.modal_icons {
  width: 20px;
  height: 20px;
}
.icon_container_closer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7e7e7e;
  font-size: 20px;
  cursor: pointer;
  margin-left: 5px;
  background: none;
  border: none;
  font-weight: lighter;
}

/* New styles for the rotation button */
.rotation_button {
  position: relative;
}

.rotation_button.active {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.rotation_button::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #52c41a;
  border-radius: 50%;
  top: 0;
  right: 0;
  display: none;
}

.rotation_button.active::after {
  display: block;
}

/* ======================================================= */
/* Shoe & Color Modals: 300×300 boxes above icon container */
/* ======================================================= */
.shoe_modal_container,
.color_modal_container {
  position: fixed;
  bottom: 80px;  /* 30px (icon bar) + 20px gap = ~50 or 60 for spacing */
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  z-index: 200;
  display: none; /* hidden by default */
  overflow: hidden;
  padding:  10px 30px;
  min-width: 350px;
}

/* Close X in top-right corner for shoe/color modals */
.shoe_modal_close,
.color_modal_close {
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 300;
  color: #7e7e7e;
  margin-left: 10px;
}
.color_modal_close {
  margin-left: 15x;
}

/* Shoe container */
.shoes_container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.shoe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.9rem;
  padding: 5px;
}
.shoe img {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
}
.shoes_container .shoe.selected {
  background: rgb(190, 190, 190);
  border-radius: 5px;
  padding: 5px;
}
.radio_cont {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.color_modal_container {
  display: none;
  align-items: center;
  justify-content: center;
}
/* Color modal .shoe_colors block */
.shoe_colors {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.9rem;
  width: 100%;
  /* gap: 10px; */
}
.color_cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
}
.color_cont.selected {
  background: rgb(190, 190, 190);
  border-radius: 5px;
}
.color {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid #000;
}

/* ================================== */
/* Strap (Edit) Modal - Full Screen  */
/* ================================== */
.edit_modal_container {
  width: 100vw;
  min-height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  background: #fff;
  overflow-x: hidden;
}
.edit_modal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 30px 0;
  max-width: 500px;
}
.edit_heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}
.edit_heading h2 {
  font-size: 1.5rem;
  font-weight: 500;
}
.edit_modal_close {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 300 !important;
}

/* Strap Container */
.strap_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 10px;
  margin-top: 30px;
}
.strap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.strap.selected {
  background: rgb(190, 190, 190); /* highlight color */
  border-radius: 5px;
  transition: all 0.2s ease;
}
.strapimg {
  display: flex;
  justify-content: center;
  align-items: center;
}
.strap img {
  width: 120px;
  height: auto;
  border: 1px solid #000;
}
.default_box {
  width: 120px;
  height: 50px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
}

/* Upload Strap */
.upload-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 120px;
  height: 50px;
  border: 1px solid #000000;
}
.upload-btn {
  width: 20px;
  height: 20px;
  border: 1px solid #000000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}
.upload-btn:hover {
  background-color: #dadada;
  border-color: #1a1a1a;
}
.upload-btn span {
  font-size: 20px;
  font-weight: 300;
  color: #000000;
  transition: color 0.3s;
}
.upload-btn:hover span {
  color: #202020;
}
.upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
#uploadedImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

/* Edit submit buttons */
.edit_submit_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
}
.edit_submit_btns button {
  padding: 10px 30px;
  cursor: pointer;
  border: none;
  background-color: #fff;
  border: 1px solid #000;
}
.edit_submit_btns button:hover {
  background-color: #000;
  color: #fff;
}

/* ======================= */
/* View / Background Modal */
/* ======================= */
.view_modal_container {
  width: 100vw;
  min-height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  background: #fff;
  overflow-x: hidden;
}
.view_modal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 30px 0;
  max-width: 500px;
}
.view_heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}
.view_heading h2 {
  font-size: 1.5rem;
  font-weight: 500;
}
.view_modal_close {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 300 !important;
}
.angles_container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  width: 90%;
}
.angle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.angle img {
  width: 80px;
  height: 80px;
  border: 1px solid #000;
}
.angles_container .angle.selected {
  background: rgb(190, 190, 190);
  border-radius: 5px;
  padding: 10px;
}
.view_heading2 {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 90%;
  margin-top: 50px;
}
.background_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
  width: 80%;
}
.color_picker_cont {
  display: flex;
  align-items: center;
  gap: 10px;
}
.view_heading3 {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 90%;
  margin-top: 50px;
}
.auto_rotation_cont {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-top: 30px;
  width: 80%;
}
.view_submit_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
}
.view_submit_btns button {
  padding: 10px 30px;
  cursor: pointer;
  border: none;
  background-color: #fff;
  border: 1px solid #000;
}
.view_submit_btns button:hover {
  background-color: #000;
  color: #fff;
}