/* Reset html/body to allow full-width hero */
html, body {
  margin: 0;
  padding: 0 20px;
  width: 90%;
  overflow-x: visible; /* Allow shadows to extend beyond viewport */
}

/* Body styling */
@font-face {
  font-family: 'Lao Sangam';
  src: url('fonts/LaoSangam-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Lao Sangam', serif;
  background: #f3f4eb;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0; /* Reduced top padding */
  overflow-x: visible; /* Allow horizontal shadows to extend */
}

#chain-buttons, #length-buttons, #builder {
   position: relative;
   z-index: 1; 
}

/* Hero builder section: allow overflow for overlapping beads */
/* Set builder area to properly contain beads */
#builder {
  position: relative;
  margin-top: 0px; /* Reduced to bring closer to top */
  padding-top: 0;
  width: 80%;  
  height: 50vh; /* Reduced from 60vh to 50vh */
  max-width: 1200px;
  background: transparent;
  overflow: visible; /* Allow shadows to extend beyond container */
  flex-shrink: 0;
  margin-bottom: 0; /* Keep at 0 as you set */
  padding: 20px; /* Add padding to give shadows space to render */
  margin-left: -20px; /* Offset the padding so visual size stays the same */
  margin-right: -20px;
}

/* Center the chain image absolutely within builder */
#chain-img {
  position: absolute;
  top: 40%; /* Moved up from 50% to 40% */
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 60vh;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; 
  pointer-events: none;
  z-index: 0; /* Behind beads (beads have z-index: 1) */
  display: none; /* Hidden until chain is selected */
}

#chain-img.visible {
  display: block; /* Show when chain is selected */
}

h1 {
  margin: 5px 10px 10px 10px; /* Reduced top margin from 10px to 5px */
  text-align: center;
  font-size: 1.5rem; /* Reduced from 2rem to 1.5rem */
}

/* Header image styling */
.site-title, h1 img {
  max-width: 600px; /* Limit width */
  max-height: 90px; /* Limit height */
  height: auto;
  width: auto;
  margin: 10px auto;
  display: block;
}

#controls {
  margin-top: 0; /* Reduced from default */
  margin-bottom: 5px; /* Reduced to bring builder closer */
}

h2 {
  margin: 0.5rem 0;
  text-align: left;
  font-size: 1.2rem;
}

#placeholder-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 40vh;
  max-width: 100%;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1; /* Ensure it's visible but below other elements */
}

#placeholder-img.hidden {
  display: none !important;
}

/* Chain and length button groups */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.5rem 0;
}

.button-group button {
  background: transparent;
  border: 1px solid #3B2A1A;
  border-radius: 4px;
  padding: 0.3rem .6rem;
  font-size: .9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.button-group button.active {
  background: transparent;
  border-color: #3B2A1A;
  color: #3B2A1A;
}

#chain-buttons,
#length-buttons {
   margin-bottom: 0;
}

#total-price {
  position: relative;
  margin: 0.5rem 0;
  font-size: 1rem; /* Updated to 1rem as requested */
  font-weight: bold;
  text-align: center;
  color: #3B2A1A;
}

/* Actions (Reset + Auto-Align buttons) under the generator */
#builder-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: -30px 0 1rem 0; /* Moved up from -70px to -30px */
  position: relative;
  z-index: 100; /* Ensure buttons are above everything else */
  pointer-events: auto; /* Make sure buttons can be clicked */
}

#builder-actions button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  background-color: #fdd9b5;
  border: 1px solid #3b2a1a;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
  z-index: 101; /* Ensure individual buttons are clickable */
  position: relative;
}

#user-email {
  padding: 0.5rem;
  border: 1px solid #3b2a1a;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Bead carousel sections: tighter spacing */
#bead-sections {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  margin-bottom: 0.25rem;
}

.section h2 {
  margin: 0 0 0.15rem;
}

/* Carousel container setup */
.glider-contain {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 20px;
}

/* Previous and next buttons */
.glider-prev, .glider-next {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: #000;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: color 0.3s ease;
  z-index: 100;
}

.glider-prev {
  left: 10px;
}

.glider-next {
  right: 10px;
}

/* Carousel track setup for horizontal scrolling */
.glider {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1px;
  padding: 0;
}

.glider::-webkit-scrollbar {
  display: none; /* Safari / Chrome */
}

/* Individual carousel slides setup */
.glider-track .glider-slide,
.glider-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  transition: transform 0.3s ease;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
}

/* Bead image style */
.bead-img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* Bead info (name and price) */
.bead-info {
  font-size: 1rem;
  color: #3B2A1A;
  text-align: center;
  margin-top: 8px;
}

/* Ensure image and title are centered */
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* Style the image */
.card-content img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  margin-bottom: 1px;
}

/* Style the title */
.card-content div {
  font-size: 9px;
  font-weight: bold;
  text-align: center;
  color: #000;
  padding: 0;
  margin-top: 5px;
}

/* Price & cart bar */
.price-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 1rem auto;
  font-size: 1.2rem;
  text-align: center;
}

.glider > div {
   flex: 0 0 auto;
}

.generator-bead {
  position: absolute !important;
  cursor: grab;
  /* Removed fixed width/height to allow JavaScript control */
  overflow: hidden !important;
  z-index: 1;
  pointer-events: auto;
}

.generator-bead.pendant {
  width: 220px !important;
  height: 220px !important;
}

.generator-bead-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
}

.generator-bead:active {
  cursor: grabbing;
}

.filter-buttons {
  display: flex;
  gap: .0px; /* Reduced from 0.5rem (8px) to 4px */
  margin-bottom: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0;
  width: 32px;
  height: 32px;
  border: none; /* Removed black border */
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
  body {
    padding: 0 10px;
  }
  
  h1 {
    font-size: 1.5rem;
    margin: 5px 5px 10px 5px;
  }
  
  #builder {
    width: 95%;
    height: 40vh; /* Reduced from 50vh to 40vh on mobile */
  }
  
  /* MOBILE CHAIN IMAGE - EXTRA LARGE SIZE */
  #chain-img.visible {
    height: 90vh !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    top: 30% !important;
  }
  
  #total-price {
    font-size: 1rem;
  }
  
  /* Much smaller chain type and length buttons on mobile */
  .button-group button {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    min-height: 32px;
    color: black !important;
  }
  
  #builder-actions {
    margin: -20px 0 1rem 0; /* Moved up from -50px to -20px */
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  
  /* Much smaller builder action buttons */
  #builder-actions button {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem; /* Bigger font size */
    min-height: 32px;
    flex: 1;
    min-width: 70px;
    color: black !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
  }
  
  #user-email {
    font-size: 0.7rem;
    padding: 0.3rem;
    min-height: 32px;
    flex: 1;
    min-width: 120px;
  }
  
  .filter-buttons {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  
  .filter-btn.color-filter {
    width: 24px !important;
    height: 24px !important;
  }
  
  .bead-img {
    width: 95px !important;
    height: 95px !important;
  }
  
  .section {
    margin-bottom: 1rem;
  }
  
  .section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
  #builder {
    width: 100%;
    height: 35vh; /* Reduced from 45vh to 35vh on small phones */
  }
  
  /* MOBILE CHAIN IMAGE - HUGE SIZE FOR SMALL PHONES */
  #chain-img.visible {
    height: 85vh !important;
    max-width: 100% !important;
    top: 25% !important;
  }
  
  #builder-actions {
    margin: -15px 0 1rem 0; /* Moved up from -30px to -15px */
  }
  
  .button-group button {
    padding: 0.15rem 0.3rem;
    font-size: 0.65rem;
    min-height: 30px;
    color: black !important;
  }
  
  #builder-actions button {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem; /* Bigger font size */
    min-width: 60px;
    min-height: 30px;
    color: black !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
  }
  
  #user-email {
    font-size: 0.65rem;
    padding: 0.25rem;
    min-height: 30px;
    min-width: 100px;
  }
  
  .button-group {
    justify-content: center;
    gap: 0.25rem;
  }
  
  .filter-btn.color-filter {
    width: 22px !important;
    height: 22px !important;
  }
}