/* =========================
   FULL-PAGE MODAL (INSET)
========================= */
#itemModal {
  position: fixed;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  display: none;
  z-index: 9999;
  background: rgba(0, 0, 0, 0); /* fully transparent backdrop */
  border-radius: 12px;
}

/* =========================
   MODAL SHEET
========================= */
.modal-sheet {
  position: relative;
  background: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* =========================
   SCROLLABLE CONTENT
========================= */
.modal-content-column {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

/* =========================
   ITEM HEADER
========================= */
.modal-sheet h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
}

.modal-sheet p {
  margin: 0 0 12px 0;
  color: #555;
}

/* =========================
   ITEM IMAGE & LABELS
========================= */
.modal-item-image {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  margin-bottom: 12px;
  border-radius: 8px;
}

.item-labels {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.item-labels img {
  width: 24px;
  height: 24px;
}

/* =========================
   VARIANTS & MODIFIERS
========================= */
.variation-set,
.modifier-set {
  margin-bottom: 16px;
}

.variation-set h5,
.modifier-set h5 {
  font-size: 16px;
  margin-bottom: 6px;
}

.variation,
.modifier {
  margin-bottom: 6px;
  font-size: 16px; /* match variants */
}

/* =========================
   MODIFIERS SETS WITH LIGHT GREY BACKGROUND
========================= */
.modifier-set {
  background: #f0f0f0;
  padding: 8px;
  border-radius: 6px;
}

/* =========================
   BUTTONS (STICKY)
========================= */
.modal-buttons {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: env(safe-area-inset-bottom); /* safe area for iOS */
}

.modal-buttons .add-button,
.modal-buttons .close-button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}

.modal-buttons .add-button {
  background: #2ecc71;
  color: white;
}

.modal-buttons .close-button {
  background: #e74c3c;
  color: white;
}

/* =========================
   SCROLL CUE (BOUNCING ARROW)
========================= */
.scroll-cue {
  position: absolute;
  bottom: 70px; /* above buttons */
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #888;
  animation: bounce 1.2s infinite;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}