/*
 * Outlined field with a floating label (.hs-field), and our own select popover
 * (.hs-picker). Shared by the shop's forms: the gift finder, the catalogue's sort
 * (Core\Field registers it; stylesheets that use it depend on it). docs/DESIGN.md
 * "Çerçeveli alan". Markup:
 *
 *   <div class="hs-field hs-field--outlined">
 *     <label class="hs-field__label" for="x">Kime hediye?</label>
 *     <select class="hs-field__control" id="x" name="…"><option value=""></option>…</select>
 *   </div>
 *
 * (a text input works too: <input class="hs-field__control" placeholder=" ">, the
 * space placeholder makes :placeholder-shown mean "empty").
 *
 * Empty and closed: the label sits inside the field like a placeholder. Open (list
 * shown), focused text input, or with a value: the label moves up onto the outline,
 * which is notched behind it (the label's background is --hs-field-bg, the surface
 * the field sits on). A select that is closed again without a choice gets its label
 * back inside; browsers without :open keep it up while the select has focus.
 *
 * Contrast on white: outline #8a90ab 3.15:1 (≥ 3:1), label #5b6180 6.06:1, floated
 * label on focus #0070e0 4.78:1, value #1f2547 14.85:1.
 *
 * Custom properties: --hs-field-bg (surface under the field), --hs-field-r (radius),
 * --hs-field-h (height), --hs-field-pad (inline padding).
 */
.hs-field {
  position: relative;
}

.hs-field--outlined {
  --hs-field-h: 3.25rem;
  --hs-field-pad: 0.875rem;
  --hs-field-border: var(--hs-border-strong, #8a90ab);
  --hs-field-accent: var(--hs-blue-600, #0070e0);
}

.hs-field--outlined .hs-field__control {
  display: block;
  width: 100%;
  min-height: var(--hs-field-h);
  margin: 0;
  padding: 0 2.5rem 0 var(--hs-field-pad);
  color: var(--hs-ink, #1f2547);
  font: inherit;
  font-size: 1rem; /* 16 px: no zoom on focus in iOS */
  font-weight: 600;
  line-height: 1.3;
  background-color: var(--hs-field-bg, #fff);
  border: 1px solid var(--hs-field-border);
  border-radius: var(--hs-field-r, var(--hs-r-md, 14px));
  corner-shape: var(--hs-corner-shape, round);
  box-shadow: none;
  text-overflow: ellipsis;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hs-field--outlined select.hs-field__control {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem 1.125rem;
}

.hs-field--outlined select.hs-field__control option {
  color: var(--hs-ink, #1f2547);
  font-weight: 500;
}

.hs-field--outlined .hs-field__control:hover {
  border-color: var(--hs-ink, #1f2547);
}

/*
 * Focus: a 2 px outline in the accent colour (border + inset shadow; 4.78:1 on white),
 * plus the ring for keyboard users on a select. Text fields take :focus-visible on a
 * click too, so they keep the 2 px outline alone: a second ring would cross the label
 * on the outline.
 */
.hs-field--outlined .hs-field__control:focus {
  border-color: var(--hs-field-accent);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--hs-field-accent);
}

.hs-field--outlined select.hs-field__control:focus-visible {
  outline: 3px solid var(--hs-field-accent);
  outline-offset: 2px;
}

.hs-field--outlined .hs-field__label {
  position: absolute;
  top: calc(var(--hs-field-h) / 2);
  left: calc(var(--hs-field-pad) - 0.3125rem);
  z-index: 1;
  max-width: calc(100% - var(--hs-field-pad) - 2rem);
  margin: 0;
  padding: 0 0.3125rem;
  overflow: hidden;
  color: var(--hs-muted, #5b6180);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--hs-field-bg, #fff);
  border-radius: var(--hs-r-min, 4px);
  transform: translateY(-50%);
  transform-origin: left center;
  pointer-events: none; /* clicks reach the control */
  transition:
    top 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

/* Floated: on the outline, smaller (12 px), wider so the smaller text still fits. */
.hs-field--outlined:has(option:checked:not([value=''])) .hs-field__label,
.hs-field--outlined:has(.hs-field__control:not(select):focus) .hs-field__label,
.hs-field--outlined:has(.hs-field__control:not(select):not(:placeholder-shown)) .hs-field__label {
  top: 0;
  max-width: calc((100% - 2 * var(--hs-field-pad)) / 0.8);
  color: var(--hs-ink, #1f2547);
  transform: translateY(-50%) scale(0.8);
}

/* An open select: where :open works, only while its list is shown; elsewhere while focused. */
@supports selector(:open) {
  .hs-field--outlined:has(select.hs-field__control:open) .hs-field__label {
    top: 0;
    max-width: calc((100% - 2 * var(--hs-field-pad)) / 0.8);
    color: var(--hs-field-accent);
    transform: translateY(-50%) scale(0.8);
  }
}

@supports not selector(:open) {
  .hs-field--outlined:has(select.hs-field__control:focus) .hs-field__label {
    top: 0;
    max-width: calc((100% - 2 * var(--hs-field-pad)) / 0.8);
    color: var(--hs-field-accent);
    transform: translateY(-50%) scale(0.8);
  }
}

.hs-field--outlined:has(.hs-field__control:focus) .hs-field__label {
  color: var(--hs-field-accent);
}

/* Inside and empty, a focused field keeps its label in the text colour (it is the placeholder). */
.hs-field--outlined:has(option[value='']:checked):has(select.hs-field__control:focus):not(:has(:open))
  .hs-field__label {
  color: var(--hs-muted, #5b6180);
}

/*
 * The list as our own popover (customizable select, appearance: base-select:
 * Chromium 135+, Safari 27+). Other browsers (Firefox in 2026) keep their native
 * list. The browser still does the rest: keyboard, typing to jump, screen readers,
 * the form value. The popover is in the top layer, so the card's clipping does not
 * cut it; it opens below the field, or above it when there is more room there.
 *
 * Concentric: the popover has radius --hs-picker-r and inset --hs-picker-p; its
 * options use R − p. The empty option ("any") shows its data-any text here. A select
 * with the class hs-picker gets the popover alone (e.g. one hidden over a button).
 */
@supports (appearance: base-select) {
  select.hs-picker {
    --hs-field-accent: var(--hs-blue-600, #0070e0);
  }

  .hs-field--outlined select.hs-field__control,
  select.hs-picker {
    --hs-picker-r: var(--hs-radius-lg, 20px);
    --hs-picker-p: 6px;
    --hs-picker-hover: color-mix(in srgb, var(--hs-field-accent) 9%, var(--hs-surface, #fff));

    appearance: base-select;
    display: flex;
    align-items: center;
    padding-right: var(--hs-field-pad);
    background-image: none;
  }

  .hs-field--outlined select.hs-field__control::picker-icon,
  select.hs-picker::picker-icon {
    content: '';
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: auto;
    background-color: var(--hs-ink, #1f2547);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
      center / contain no-repeat;
    transition: rotate 0.2s ease;
  }

  .hs-field--outlined select.hs-field__control:open::picker-icon,
  select.hs-picker:open::picker-icon {
    rotate: 180deg;
  }

  .hs-field--outlined select.hs-field__control::picker(select),
  select.hs-picker::picker(select) {
    appearance: base-select;
    box-sizing: border-box;
    min-inline-size: anchor-size(inline);
    max-inline-size: min(24rem, calc(100vw - 2rem));
    max-block-size: min(24rem, 60vh);
    margin-block: 0.5rem;
    padding: var(--hs-picker-p);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--hs-ink, #1f2547);
    background: var(--hs-surface, #fff);
    border: 1px solid var(--hs-line, #e6e9f0);
    border-radius: calc(var(--hs-picker-r) * var(--hs-corner-scale, 1));
    corner-shape: var(--hs-corner-shape, round);
    box-shadow:
      0 24px 48px -16px rgba(31, 37, 71, 0.28),
      0 4px 12px -4px rgba(31, 37, 71, 0.08);
    scrollbar-width: thin;
    scrollbar-color: var(--hs-border-strong, #8a90ab) transparent;
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.16s ease,
      translate 0.16s ease,
      display 0.16s allow-discrete,
      overlay 0.16s allow-discrete;
  }

  .hs-field--outlined select.hs-field__control:not(:open)::picker(select),
  select.hs-picker:not(:open)::picker(select) {
    opacity: 0;
    translate: 0 -0.25rem;
  }

  @starting-style {
    .hs-field--outlined select.hs-field__control:open::picker(select),
    select.hs-picker:open::picker(select) {
      opacity: 0;
      translate: 0 -0.25rem;
    }
  }

  .hs-field--outlined select.hs-field__control option,
  select.hs-picker option {
    box-sizing: border-box; /* options in the popover do not inherit it */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem; /* 44 px touch target */
    padding: 0.5rem 0.75rem;
    color: var(--hs-ink, #1f2547);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: max(
      calc((var(--hs-picker-r) - var(--hs-picker-p)) * var(--hs-corner-scale, 1)),
      var(--hs-r-min, 4px)
    );
    corner-shape: var(--hs-corner-shape, round);
    cursor: pointer;
    transition:
      background-color 0.12s ease,
      color 0.12s ease;
  }

  .hs-field--outlined select.hs-field__control option + option,
  select.hs-picker option + option {
    margin-top: 2px;
  }

  .hs-field--outlined select.hs-field__control option:hover,
  .hs-field--outlined select.hs-field__control option:focus-visible,
  select.hs-picker option:hover,
  select.hs-picker option:focus-visible {
    background-color: var(--hs-picker-hover);
    outline: none;
  }

  /* Keyboard: a 2 px ring inside the option (the popover would clip one outside). */
  .hs-field--outlined select.hs-field__control option:focus-visible,
  select.hs-picker option:focus-visible {
    box-shadow: inset 0 0 0 2px var(--hs-field-accent);
  }

  /* Chosen: darker blue (6.8:1 on white, 6.1:1 on the hover tint) and a check at the end. */
  .hs-field--outlined select.hs-field__control option:checked,
  select.hs-picker option:checked {
    color: var(--hs-blue-700, #185c9f);
    font-weight: 700;
  }

  .hs-field--outlined select.hs-field__control option::checkmark,
  select.hs-picker option::checkmark {
    order: 1;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: auto;
    content: '';
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  .hs-field--outlined select.hs-field__control option[value='']::before,
  select.hs-picker option[value='']::before {
    content: attr(data-any);
  }

  /* A choice that must be made: its empty option (`hidden`) is not in the list. */
  .hs-field--outlined select.hs-field__control option[hidden],
  select.hs-picker option[hidden] {
    display: none;
  }

  .hs-field--outlined select.hs-field__control option[value='']:not(:checked),
  select.hs-picker option[value='']:not(:checked) {
    color: var(--hs-muted, #5b6180);
  }

  @media (prefers-reduced-motion: reduce) {
    .hs-field--outlined select.hs-field__control::picker(select),
    .hs-field--outlined select.hs-field__control::picker-icon,
    .hs-field--outlined select.hs-field__control option,
    select.hs-picker::picker(select),
    select.hs-picker::picker-icon,
    select.hs-picker option {
      transition: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-field--outlined .hs-field__control,
  .hs-field--outlined .hs-field__label {
    transition: none;
  }
}