/* =========================================================
   Gift choice - front office
   - card: thumbnail | middle (one block) | right column (2 rows)
   - right column: price, "selected"/status below it
   - the attributes take no room when there are none
   - fixed card height, overflow hidden (long names are cut on purpose)
   ========================================================= */

:root{
  --gc-card-h: 88px;
  --gc-img-w: 64px;
  --gc-right-w: 10ch;          /* fixed width of the right column */
  --gc-gap: 0.75rem;

  --gc-font: 0.7rem;
  --gc-line: 1.2;

  --gc-border: #f1f1f1;
  --gc-muted: #7a7a7a;
  --gc-accent: #24b9d7;
}

/* Base */
.giftchoice + .giftchoice{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gc-border);
}

.giftchoice__title{ margin-bottom: 0.75rem; }

/* Promotion name above its list of gifts: what tells the lists apart */
.giftchoice__promo{
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

/* Options list */
.giftchoice__options{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.giftchoice__item{ width: 100%; }

/* Card (button) */
.giftchoice__option{
  display: flex;
  gap: var(--gc-gap);
  align-items: stretch;

  height: var(--gc-card-h);
  overflow: hidden;

  width: 100%;
  padding: 0.625rem 0.875rem;

  border: 2px solid var(--gc-border);
  border-radius: 6px;

  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;

  font: inherit;

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.giftchoice__option:hover{
  border-color: #bdbdbd;
  background: #fcfcfc;
}

.giftchoice__option:focus-visible{
  outline: none;
  border-color: var(--gc-accent);
  box-shadow: 0 0 0 3px rgba(36, 185, 215, 0.15);
}

.giftchoice__option.is-selected{
  border-color: var(--gc-accent);
  background: #f6fdff;
}

.giftchoice__option:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

/* Image: full card height */
.giftchoice__image{
  flex: 0 0 var(--gc-img-w);
  width: var(--gc-img-w);
  height: 100%;
  object-fit: contain;
}

/* Text area = middle + right column */
.giftchoice__text{
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gc-right-w);
  column-gap: 0.75rem;

  font-size: var(--gc-font);
  line-height: var(--gc-line);
}

/* MIDDLE COLUMN: one block (no grid rows) */
.giftchoice__left{
  min-width: 0;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;   /* centred in the card height, no odd gaps */
  gap: 0.15rem;
}

/* Name: up to 3 lines */
.giftchoice__name{
  min-width: 0;
  overflow: hidden;
  font-weight: 600;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Attributes: 1 line; not rendered at all when there are none */
.giftchoice__attributes{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gc-muted);
}

/* RIGHT COLUMN: two rows (price, then status/selected) */
.giftchoice__right{
  width: var(--gc-right-w);
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0.15rem;

  text-align: right;
}

.giftchoice__price{
  margin: 0;
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-weight: 700;
  color: var(--gc-accent);
}

.giftchoice__status,
.giftchoice__selected{
  margin: 0;
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.giftchoice__status{ color: var(--gc-muted); }

.giftchoice__selected{
  display: none;
  font-weight: 600;
  color: var(--gc-accent);
}

/* "selected" under the price; the status hides to avoid a third line */
.giftchoice__option.is-selected .giftchoice__selected{ display: block; }
.giftchoice__option.is-selected .giftchoice__status{ display: none; }

/* Busy state */
.giftchoice.is-busy .giftchoice__options{
  opacity: 0.6;
  pointer-events: none;
}

/* Error */
.giftchoice__error{ margin: 0.75rem 0 0; }

/* Modal / blockcart placement */
.giftchoice-list--modal{
  margin-top: 1rem;
  text-align: left;
}

.giftchoice-list--blockcart{
  margin: 1rem 0;
  text-align: left;
}

/* classic styles "#blockcart-modal .cart-content p" as flex */
#blockcart-modal .giftchoice-list--blockcart .giftchoice__title,
#blockcart-modal .giftchoice-list--blockcart .giftchoice__promo{
  display: block;
}

.giftchoice-modal__hint{
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--gc-muted);
}

.giftchoice-cart-block .card{ margin-top: 1rem; }

/* Mobile */
@media (max-width: 767.98px){
  :root{
    --gc-card-h: 80px;
    --gc-img-w: 52px;
    --gc-right-w: 9ch;
    --gc-gap: 0.625rem;
  }

  .giftchoice__option{
    padding: 0.5rem 0.625rem;
  }
}
/* Cart summary: promotions listed under one label (theme override of cart-voucher.tpl) */
.giftchoice-applied__list{
  margin: .25rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}