@layer components {
  /* =============================================================
     Postulia — Concours Search Filter Component
     - Structure identical to job-search
     - Regions-only enhanced .c-select (no inner search)
     - Token-first (relies on tokens.css)
     ============================================================= */

  /* Filter Card Wrapper */
  .filter {
    margin-top: clamp(16px, 4vw, 28px);
  }

  .filter__card {
    position: relative;
    z-index: 10;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4);
  }

  /* Form Layout */
  .filter__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: stretch;
  }

  .filter__keywords { flex: 1 1 280px; }
  .filter__location { flex: 1 1 260px; }
  .filter__submit   { flex: 0 0 56px; }

  /* Shared Input Styles */
  .filter .input {
    width: 100%;
    height: 56px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding-inline: 14px;
    font-size: var(--fs-16);
    background: var(--surface, #fff);
    color: var(--text-default);
  }

  .filter .input::placeholder {
    opacity: 1;
    color: var(--text-muted);
  }

  .filter .input:focus {
    outline: none;
    box-shadow:
      0 0 0 var(--ring-offset, 2px) var(--surface, #fff),
      0 0 0 calc(var(--ring-width, 3px) + var(--ring-offset, 2px)) var(--ring-color);
  }

  /* =============================================================
     Enhanced Select Component (regions only)
     ============================================================= */
  .c-select {
    position: relative;
    isolation: isolate;
    z-index: 10;
  }

  .c-select__button {
    height: 56px;
    width: 100%;
    text-align: left;
    padding: 0 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface, #fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
  }

  .c-select__button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 var(--ring-offset, 2px) var(--surface, #fff),
      0 0 0 calc(var(--ring-width, 3px) + var(--ring-offset, 2px)) var(--ring-color);
  }

  .c-select__value {
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .c-select__chev { opacity: .6; }

  .c-select__panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    max-inline-size: 100%;
    background: var(--surface, #fff);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: none;
    overflow: hidden;
    z-index: 1000; /* match job-search */
  }

  .c-select.open .c-select__panel { display: block; }

  /* No internal search UI in concours version */

  .c-select__list {
    list-style: none;
    margin: 0;
    padding: 0 var(--sp-4) var(--sp-4);
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  }

  .c-select__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-radius: 10px;
    cursor: pointer;
  }

  /* Ensure hidden items stay hidden if ever used */
  .c-select__list [hidden] { display: none !important; }

  .c-select__list li:hover { background: var(--brand-100); }

  .c-select__item-main {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .c-select__item-main label { cursor: pointer; }

  .c-select__list .region {
    font-weight: var(--fw-bold);
    color: var(--text-default);
    margin-top: var(--sp-2);
  }

  .c-select__list .region:first-child { margin-top: 0; }

  /* Removed city indentation rules (no .ville in this component) */

  .c-select__list .item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .c-select__list .chip {
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    padding: 2px 8px;
    border-radius: var(--round);
    background: var(--border-default);
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .c-select__list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-500);
    cursor: pointer;
  }

  /* =============================================================
     Submit Button
     ============================================================= */
  .filter__submit .button {
    height: 56px;
    width: 56px;
    padding: 0;
  }

  .filter__submit .button svg {
    width: 22px;
    height: 22px;
  }

  /* =============================================================
     Responsive Adjustments
     ============================================================= */
  @media (min-width: 1000px) {
    .filter__form { flex-wrap: nowrap; }
  }

  @media (max-width: 999.98px) {
    .filter__form { flex-direction: column; }
    .filter__keywords,
    .filter__location { flex: 0 0 auto; }

    .filter__submit { flex: 0 0 auto; width: 100%; }
    .filter__submit .button { width: 100%; height: 56px; }
  }
}