/* ===== Boutique Page Base ===== */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Kanit", sans-serif;
  background: #0056ff;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* ===== Main Layout ===== */
main.boutique-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding: 10px 20px;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}

/* ===== Canvas + Controls Section ===== */
.canvas-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: #fff200;
}

/* ===== Controls ===== */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 50px;
  text-align: center;
}

input[type="text"] {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  outline: none;
  font-size: 16px;
  width: 200px;
  text-align: center;
}

button {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background-color: #fff200;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
}

/* ===== Canvas Frame ===== */
.canvas-frame {
  position: relative;
  display: inline-block;
  width: 600px;
  max-width: 90vw;
  aspect-ratio: 1 / 1;
}

#canvas {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: #0056ff;
  display: block;
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Frame overlay */
.canvas-frame::before {
  content: "";
  position: absolute;
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  background: url('images/frame.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ===== Skins Section ===== */
.skins-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 400px;
  margin-top: 75px;
  margin-left: 75px;
}

.skins-section h3 {
  color: #fff200;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

.skins {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  justify-items: center;
}

.skins img {
  width: 70px;
  height: 70px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, border 0.2s ease, background-color 0.2s ease;
}

.skins img:hover {
  transform: scale(1.1);
  border-color: #fff200;
  background-color: rgba(255, 255, 255, 0.2);
}

.skins img.selected {
  border-color: #fff200;
  background-color: rgba(255, 242, 0, 0.2);
}

/* ===== Download Button ===== */
.download-btn {
  background-color: #fff200;
  color: #000;
  font-weight: 700;
  font-size: 18px;
  padding: 12px 22px;
  border-radius: 8px;
  margin-top: 60px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.download-btn:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
}

/* ===== Info Button ===== */
.token-label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: #fff200;
  margin-bottom: 8px;
  gap: 6px;
}

input[type="text"] {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  outline: none;
  font-size: 16px;
  width: 200px;
  text-align: center;
  height: 44px; /* Explicit height for consistency */
  box-sizing: border-box;
}

.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff200;
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  height: 44px; /* Match input height exactly */
  width: 44px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.1s ease;
  position: relative;
  vertical-align: middle;
}

.info-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* Tooltip */
.info-btn::after {
  content: "You can find your Token ID on your NFT’s details page on ME or in your wallet under 'Token ID'. It will not be the same as the number of the Chump!";
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  width: 180px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.info-btn::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-btn:hover::after,
.info-btn:hover::before {
  opacity: 1;
}

/* ===== Responsive Adjustments ===== */

/* Tablet */
@media (max-width: 900px) {
  main.boutique-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .canvas-frame {
    width: 80vw;
  }

  .skins-section {
    margin: 20px 0 0 0;
    align-items: center;
  }

  .skins {
    grid-template-columns: repeat(4, 1fr);
  }

  .skins img {
    width: 90px;
    height: 90px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .canvas-frame {
    width: 90vw;
    max-width: 360px;
  }

  .skins {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .skins img {
    width: 100px;
    height: 100px;
  }

  /* Horizontal controls layout */
  .controls {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 25px;
  }

  .controls input[type="text"],
  .controls button {
    width: auto;
    flex: 0 1 auto;
    font-size: 14px;
    padding: 8px 12px;
  }

  .controls input[type="text"] {
    width: 120px;
  }

  .info-btn {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .download-btn {
    margin-top: 50px;
  }
}

/* Desktop: Controls in a row above canvas */
@media (min-width: 901px) {
  .controls {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 60px;
  }

  .skins-section {
    margin-top: 75px;
    margin-left: 75px;
  }
}