/**
 * Payment page - continuation of plata.css.
 *
 * A second file rather than more rules in plata.css: that sheet sits at
 * ~14.9 KB and this host refuses FTP uploads past roughly 15 KB, answering
 * 451 and leaving the file at zero bytes. It has emptied plata.css twice,
 * taking all payment-form styling down with it, so anything new goes here.
 *
 * Enqueued after plata.css by guru_plata_styles() in functions.php.
 *
 * GuruMedia - https://gurumedia.ro
 */

/* ==========================================================================
   Sold-out participation option - CURRENTLY INACTIVE

   Nothing on the form carries these classes today: the in-person option is
   open again, and assets/js/plata-soldout.js is switched off by default.
   The rules are kept because seats may fill again - see the header of that
   file for the one-line switch that turns the state back on.

   When active, the JS disables the radio and appends the badge; these rules
   only carry the look.

   The label colour below overrides a rule in plata.css that sets navy with
   !important on every option label, hence the !important here too.
   ========================================================================== */

.select_participare .ff-el-form-check.gm-soldout .ff-el-form-check-label {
  flex-wrap: wrap;
  background: #F7F4EE;
  border-color: rgba(45, 42, 38, 0.14);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
}

.select_participare .ff-el-form-check.gm-soldout .ff-el-form-check-label,
.select_participare .ff-el-form-check.gm-soldout .ff-el-form-check-label span {
  color: #8a857e !important;
  font-weight: 400 !important;
}

/* No hover lift - nothing here responds to the pointer. */
.select_participare .ff-el-form-check.gm-soldout .ff-el-form-check-label:hover {
  border-color: rgba(45, 42, 38, 0.14);
  box-shadow: none;
}

.select_participare .ff-el-form-check.gm-soldout .ff-el-form-check-input {
  opacity: 0.4;
  cursor: not-allowed;
}

/*
 * Sits directly after the option text rather than against the right edge -
 * floated right it read as a separate control instead of a note about this
 * option. The label's own 11px flex gap provides the spacing.
 */
.select_participare .gm-soldout-badge {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(45, 42, 38, 0.08);
  color: #6b6660 !important;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

/*
 * Too narrow for the badge to sit beside the option text, so it wraps to its
 * own line. Indent it to the text's left edge - 18px radio plus the label's
 * 11px gap - instead of letting it land under the radio. No flex-basis here:
 * that would stretch the pill across the whole line.
 */
@media (max-width: 767px) {
  .select_participare .gm-soldout-badge {
    margin: 6px 0 0 29px;
  }
}