/**
 * ===========================================
 * MULTI-CAMPAIGN — CURRENCY PICKER
 * ===========================================
 * Styles for the currency list of the first payment modal, shown only when the
 * campaign has child events (see /shared/multi-campaign/multi-campaign.js).
 *
 * Deliberately built on the same pieces as the monthly installment picker sitting
 * a few lines below it in the same modal (.h-btn.h-btn2 + .select__marker), so the
 * two selects look like siblings in all three templates.
 */

/* One row: the two stacked lines of text on the left, the picker on its right.
   nowrap keeps them side by side, and the label is the only part allowed to
   shrink (min-width:0 lets it — a flex item refuses to go below its content
   width otherwise). */
.currency-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  margin-bottom: 20px;
}

/* Two stacked parts, same font size: the question in black on top, the
   consequence greyed out underneath. Left aligned, so the block keeps a clean
   edge instead of hugging the picker. */
.currency-selector__label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  text-align: left;
}

/* Campaign theme colour, like the totals of the same modal. The fallback is the
   default theme colour of the app (server/app.js, render404Page), not black — a
   campaign without css_variables must still look like the product, not like
   plain text. */
.currency-selector__title {
  display: block;
  /* 15% larger than the hint below it */
  font-size: 1.15em;
  font-weight: 700;
  color: var(--theme_color, #5956E9);
}

.currency-selector__hint {
  display: block;
  font-weight: 400;
  color: var(--gray-AEACAC, #9a9a9a);
}

.currency-selector .h-btn.h-btn2 {
  position: relative;
  flex: 0 0 auto;
  min-width: 118px;
}

/* nice-select replaces the native <select> with its own markup */
.currency-selector .h-btn.h-btn2 .nice-select {
  line-height: 33px;
  padding: 0 38px 0 16px;
  color: var(--darkGray, #333333);
  font-weight: 600;
}

.currency-selector .h-btn.h-btn2 .nice-select .list {
  z-index: 1000;
  width: 100%;
}

/* Fallback when nice-select is not applied: the native select stays usable */
.currency-selector select#currency-select {
  width: 100%;
  border: 0.75px solid var(--gray-AEACAC, #aeacac);
  border-radius: 10px;
  padding: 6px 24px;
  font-weight: 600;
  background-color: transparent;
}

@media (max-width: 480px) {
  .currency-selector {
    gap: 3px;
    margin-bottom: 16px;
  }

  .currency-selector__label {
    font-size: 13px;
  }

  .currency-selector .h-btn.h-btn2 {
    min-width: 100px;
  }
}