/* Modal BG */
.modal-bg {
  position: fixed;
  z-index: 10;
  inset: 0;
  background: rgba(11,24,39,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Content */
.modal-content {
  background: #172646;
  border-radius: 18px;
  padding: 38px 38px 30px 38px;
  min-width: 900px;
  box-shadow: 0 4px 38px #0be4bb44;
}

.modal-content h2 {
  margin: 0 0 20px 0;
  color: #21ea9b;
  letter-spacing: 0.04em;
}

/* Config Form Grid */
#segment-config-form {
  width: 100%;
  max-width: 98vw;
}
.config-row {
  display: flex;
  gap: 22px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.config-group {
  flex: 1 1 175px;
  display: flex;
  flex-direction: column;
  min-width: 150px;
}
.config-group label {
  color: #eaffff !important;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 1.09em;
  letter-spacing: 0.01em;
}
.config-group input,
.config-group select {
  border: 1.7px solid #35f3b9 !important;
  background: #24345a !important;
  color: #eaffff !important;
  font-size: 1.09em;
  padding: 10px 14px;
  border-radius: 7px;
  font-weight: 600;
  outline: none;
  transition: border 0.18s;
}
.config-group input:focus,
.config-group select:focus {
  border-color: #1fb88e !important;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 18px;
}
.btn-cancel,
.btn-save {
  padding: 10px 28px;
  font-size: 1.1em;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.16s;
}
.btn-cancel { background: #e1e7fa; color: #1c283c; }
.btn-save { background: #21ea9b; color: #102c1e; }
.btn-cancel:hover { background: #c7cfe6; }
.btn-save:hover { background: #16c882; }



/*phone view*/
/* ---------- tablets: switch to 2 columns ---------- */
@media (max-width: 1024px) {
  #segments-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
  }

  /* make chips behave as centered cards in the grid cell */
  #segments-list > .segment-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    gap: 6px;
  }

  /* Stock Options (no price line) — keep Edit aligned */
  #segments-list .segment-chip:not(:has(.chip-price)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }
  #segments-list .segment-chip:not(:has(.chip-price)) .edit-btn {
    margin-left: 0 !important;
  }
  #segments-list .segment-chip:not(:has(.chip-price))::before {
    content: "–";
    visibility: hidden;
    display: block;
    min-height: 1.2em;
    line-height: 1;
    font-weight: 700;
  }
}

/* ---------- phones: 1 column + modal tweaks ---------- */
@media (max-width: 640px) {
  .assigned-segments {
    margin: 16px auto 0;
    padding: 16px;
    border-radius: 16px;
  }

  #segments-list {
    grid-template-columns: 1fr; /* single column */
  }

  .assigned-segments h3 { font-size: 1.15rem; }
  .segment-chip { font-size: 1rem; }
  .segment-chip .chip-price { font-size: 0.95rem; }

  .modal-bg {
    padding: 12px;
    align-items: flex-start;
    overflow: auto;
  }
  .modal-content {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-radius: 14px;
    padding: 18px;
  }
  .form-row { gap: 14px 12px; }
  .form-col { min-width: 0; flex: 1 1 100%; }
}