/* =========================================================
IFS RUSSIA
CODE: IFS Standard ST200 UI — Styles
VERSION: 0.2.1
STATUS: Testing
UPDATED: 13.09.2026 00:29 МСК

DISTRIBUTION
- External runtime asset for public /events/* pages.
- Intended object: runtime/standard-st200-ui-v0.2.1.css
- Presentation only. No commerce/access/purchase authority.

CHANGELOG v0.2.1
- Typography patch: explicit IBM Plex Sans applied to all UI-owned
  ST200 presentation elements, including availability and metadata.
- No commerce/access/CTA behavior change.

PREVIOUS v0.2.0
- Distribution architecture moved from combined T123 <style>+<script>
  to external versioned CSS + JS assets.
- Visual/behavior contract preserved from v0.1.4 Testing.
========================================================= */

/* ==========================================================
   ROOT
   ========================================================== */

.ifs-standard-st200-ui
.js-product-controls-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);

  align-items: start;
  justify-content: stretch;

  row-gap: 12px;

  margin-top: 16px !important;
}


/* ==========================================================
   TYPOGRAPHY — UI-OWNED ELEMENTS
   ========================================================== */

/*
 * Explicitly pin the presentation layer to the IFS site font.
 * This fixes mobile/browser fallback on generated availability
 * and metadata elements while avoiding unrelated external notices.
 */
.ifs-standard-st200-ui
.ifs-st200-option--selectable,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.js-product-edition-option-name,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-title,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-title_buttons,

.ifs-standard-st200-ui
.ifs-st200-availability,

.ifs-standard-st200-ui
.ifs-st200-meta-grid,

.ifs-standard-st200-ui
.ifs-st200-meta-label,

.ifs-standard-st200-ui
.ifs-st200-meta-value {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
}


/* ==========================================================
   ALL NATIVE OPTION GROUPS
   ========================================================== */

.ifs-standard-st200-ui
.js-product-controls-wrapper
> .js-product-edition-option {
  min-width: 0;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ==========================================================
   INTERACTIVE OPTION GROUPS
   ========================================================== */

.ifs-standard-st200-ui
.ifs-st200-option--selectable {
  grid-column: 1;

  box-sizing: border-box;

  width: 100%;

  padding: 12px 14px 13px;

  background: #FAF8F4;

  border: 1px solid #EEE7DF;
  border-radius: 6px;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.js-product-edition-option-name {
  margin-bottom: 8px !important;

  color: #241005 !important;

  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-variants_buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}


/* ==========================================================
   INTERACTIVE VARIANT — UNSELECTED
   ========================================================== */

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons {
  position: relative;

  box-sizing: border-box;

  min-height: 40px !important;
  min-width: 0 !important;

  margin: 0 !important;

  padding: 9px 12px 9px 38px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;

  background: #FFFFFF !important;

  border: 1px solid #D7D2CE !important;
  border-radius: 4px !important;

  color: #241005 !important;

  cursor: pointer;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons::before {
  content: '';

  position: absolute;

  left: 12px;
  top: 50%;

  width: 16px;
  height: 16px;

  box-sizing: border-box;

  transform: translateY(-50%);

  background: #FFFFFF;

  border: 1.5px solid #AFA9A4;
  border-radius: 50%;
}


/* ==========================================================
   INTERACTIVE VARIANT — NATIVE UNAVAILABLE
   ========================================================== */

/*
 * IMPORTANT:
 * JS adds this class only when Tilda has already made the
 * native option unavailable/disabled. This UI does not create
 * business unavailability by itself.
 */
.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons.ifs-st200-variant--unavailable {
  cursor: not-allowed !important;

  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  min-height: 48px !important;
  padding: 7px 12px 7px 38px !important;

  background: #FFF9F8 !important;
  border-color: #D9B8B5 !important;
  box-shadow: none !important;

  color: #766D67 !important;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons.ifs-st200-variant--unavailable::before {
  content: '×';

  display: flex;
  align-items: center;
  justify-content: center;

  background: #FFFFFF;
  border-color: #962329;

  color: #962329;

  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons.ifs-st200-variant--unavailable
.t-product__option-title,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons.ifs-st200-variant--unavailable
.t-product__option-title_buttons {
  color: #766D67 !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #BFA8A5;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_buttons.ifs-st200-variant--unavailable::after {
  content: attr(data-ifs-unavailable-text);

  display: block;

  margin-top: 2px;

  color: #962329;

  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;

  text-decoration: none;
  white-space: normal;
}

/* Never apply hover affordance to a native disabled variant. */
@media (hover: hover) {
  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons.ifs-st200-variant--unavailable:hover {
    background: #FFF9F8 !important;
    border-color: #D9B8B5 !important;
  }
}


/* ==========================================================
   INTERACTIVE VARIANT — SELECTED
   ========================================================== */

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_active {
  background: #EDF5F6 !important;

  border-color: #4D8A99 !important;

  box-shadow: inset 0 0 0 1px #4D8A99;

  color: #3E7E8D !important;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_active::before {
  content: '✓';

  display: flex;
  align-items: center;
  justify-content: center;

  background: #4D8A99;
  border-color: #4D8A99;

  color: #FFFFFF;

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-title,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-title_buttons {
  font-size: 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_active
.t-product__option-title,

.ifs-standard-st200-ui
.ifs-st200-option--selectable
.t-product__option-item_active
.t-product__option-title_buttons {
  color: #3E7E8D !important;
  font-weight: 500 !important;
}

@media (hover: hover) {
  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons:not(
    .t-product__option-item_active
  ):not(
    .ifs-st200-variant--unavailable
  ):hover {
    border-color: #7FA8B2 !important;
    background: #F8FBFB !important;
  }
}


/* ==========================================================
   NATIVE INFORMATION SOURCES
   ========================================================== */

/*
 * Single-value native options remain in the DOM for Tilda,
 * but presentation is handled by .ifs-st200-meta-grid.
 */
.ifs-standard-st200-ui
.ifs-st200-option--info-source {
  display: none !important;
}


/* ==========================================================
   PAGE-CONFIG HIDDEN OPTIONS
   ========================================================== */

.ifs-standard-st200-ui
.ifs-st200-option--hidden {
  display: none !important;
}


/* ==========================================================
   AVAILABILITY — PRESENTATION ONLY
   ========================================================== */

.ifs-standard-st200-ui
.ifs-st200-availability {
  grid-column: 1;

  display: flex;
  align-items: center;
  gap: 7px;

  min-height: 22px;

  margin: 1px 0 0;
  padding: 0;

  color: #3E7E8D;

  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.ifs-standard-st200-ui
.ifs-st200-availability::before {
  content: '';

  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  background: #4D8A99;
  border-radius: 50%;
}

.ifs-standard-st200-ui
.ifs-st200-availability.is-empty {
  color: #962329;
}

.ifs-standard-st200-ui
.ifs-st200-availability.is-empty::before {
  background: #962329;
}


/* ==========================================================
   ACADEMIC READ-ONLY FACTS PANEL
   ========================================================== */

.ifs-standard-st200-ui
.ifs-st200-meta-grid {
  grid-column: 1;

  display: grid;

  grid-template-columns:
    repeat(
      var(--ifs-st200-info-columns, 3),
      minmax(0, 1fr)
    );

  column-gap: 28px;
  row-gap: 15px;

  align-items: start;

  margin: 2px 0 0;
  padding: 12px 0 13px;

  border-top: 1px solid #E8E2DC;
  border-bottom: 1px solid #E8E2DC;
}

.ifs-standard-st200-ui
.ifs-st200-meta-item {
  min-width: 0;
}

.ifs-standard-st200-ui
.ifs-st200-meta-label {
  margin: 0 0 3px;

  color: #766D67;

  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}

.ifs-standard-st200-ui
.ifs-st200-meta-value {
  margin: 0;
  padding: 0;

  color: #241005;

  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;

  overflow-wrap: anywhere;
}


/* ==========================================================
   UNKNOWN / EXTERNAL CHILDREN
   ========================================================== */

/*
 * We do not style or reorder external notices/controllers.
 * If something else is inserted inside controls-wrapper,
 * leave it full width.
 */
.ifs-standard-st200-ui
.js-product-controls-wrapper
> :not(
  .js-product-edition-option
):not(
  .ifs-st200-meta-grid
):not(
  .ifs-st200-availability
) {
  grid-column: 1;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 641px) and (max-width: 960px) {

  .ifs-standard-st200-ui
  .ifs-st200-meta-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 24px;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons.ifs-st200-variant--unavailable {
    min-height: 50px !important;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons.ifs-st200-variant--unavailable::after {
    font-size: 12px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 640px) {

  .ifs-standard-st200-ui
  .js-product-controls-wrapper {
    row-gap: 11px;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable {
    padding: 11px 12px 12px;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-variants_buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons {
    width: 100%;
    min-height: 42px !important;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons.ifs-st200-variant--unavailable {
    min-height: 52px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .ifs-standard-st200-ui
  .ifs-st200-option--selectable
  .t-product__option-item_buttons.ifs-st200-variant--unavailable::after {
    margin-top: 3px;
    font-size: 12px;
  }

  .ifs-standard-st200-ui
  .ifs-st200-meta-grid {
    grid-template-columns: minmax(0, 1fr);

    row-gap: 12px;
    padding: 11px 0 12px;
  }

  .ifs-standard-st200-ui
  .ifs-st200-availability {
    font-size: 13px;
  }

}