/* === Monogram row: stable across widths === */
.wm-monogram-wrapper{
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;          /* πιο κοντά στον τίτλο */
  row-gap: 10px;
  width: 100%;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid #E4E4E4;
  border-bottom:1px solid #E4E4E4;
}

/* Mid widths (wider): keep 2-column layout so note stays under the fields */
@media (max-width: 1543px) and (min-width: 1261px){
  .wm-monogram-wrapper{
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
  }

  .wm-monogram-title{
    padding-top: 2px;
  }

  .wm-monogram-note{
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    justify-self: start;
    margin-top: 6px;
  }
}

/* Mid widths (narrow summary): stack title above fields to avoid collisions */
@media (max-width: 1260px) and (min-width: 1025px){
  .wm-monogram-wrapper{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wm-monogram-title,
  .wm-monogram-fields,
  .wm-monogram-note{
    grid-column: 1 / -1 !important;
  }

  .wm-monogram-title{ grid-row: 1 !important; }
  .wm-monogram-fields{ grid-row: 2 !important; }
  .wm-monogram-note{ grid-row: 3 !important; }

  .wm-monogram-fields{
    grid-template-columns: 1fr 1fr;
  }

  .wm-monogram-note{
    grid-row: 3 !important;            /* always below fields */
    margin-top: 6px;
  }
}

/* Title: remove big empty space */
.wm-monogram-title{
  font-weight: 300;
  text-transform: uppercase;
  white-space: nowrap;       /* να μην σπάει σε 2 γραμμές */
  margin: 0;
  padding-right: 6px;
}

/* Fields: responsive, never cut */
.wm-monogram-fields{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* input | select */
  gap: 10px;
  min-width: 0;              /* επιτρέπει σωστό shrink μέσα σε grid */
  max-width: 100%;
}

/* Inputs/select fill their grid cell */
.wm-monogram-fields input[type="text"],
.wm-monogram-fields select{
  width: 100%;
  max-width: 100%;
}

/* Allow inputs to shrink without overflowing the ? column */
.wm-monogram-fields input[type="text"]{
  min-width: 100px;
}

.wm-monogram-fields select{
  min-width: 120px;
}

.wm-monogram-note{
  grid-column: 2 / 3;       /* under the fields (2nd column) on wide layout */
  grid-row: 2;              /* directly below the first row */
  font-size: 13px;
  opacity: 0.7;
  margin-top: -6px;
  white-space: normal;
}

/* Tablet: όταν δεν χωράει σε 1 γραμμή, κάνε wrap σωστά */
@media (max-width: 860px){
  .wm-monogram-wrapper{
    grid-template-columns: 1fr;
  }
  .wm-monogram-title,
  .wm-monogram-fields,
  .wm-monogram-note{
    grid-column: 1 / -1 !important;
  }
  .wm-monogram-fields{
    grid-template-columns: 1fr 1fr;
  }
  .wm-monogram-note{
    grid-row: auto;
  }
}

/* Mobile: title πάνω, fields κάτω full width */
@media (max-width: 520px){
  .wm-monogram-wrapper{
    grid-template-columns: 1fr;
  }
  .wm-monogram-title,
  .wm-monogram-fields,
  .wm-monogram-note{
    grid-column: 1 / -1 !important;
  }
  .wm-monogram-fields{
    grid-template-columns: 1fr 1fr; /* keep inline on mobile */
    gap: 10px;
  }
  .wm-monogram-note{
    grid-row: auto;
  }
}