/* ==========================================================================
   Nordra design-system components.
   Each block corresponds to a component in the Claude Design project's
   _ds bundle; measurements are carried over from those sources.
   ========================================================================== */

/* --- Logo ----------------------------------------------------------------- */
.logo { display: block; height: 32px; width: auto; color: var(--text-primary); }
.logo--footer { color: var(--nordra-mid-grey); }

/* --- Button --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  height: var(--control-height-lg);
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font: var(--type-button);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn .icon { --icon-size: 18px; }

.btn--primary { background: var(--nordra-black); color: var(--nordra-white); }
.btn--secondary { background: var(--nordra-light-grey); color: var(--nordra-black); }


/* --- Filter chip ---------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--control-height-sm);
  padding: 2px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--nordra-light-grey);
  color: var(--nordra-mid-grey);
  font: var(--type-chip);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.chip[aria-pressed="true"] { background: var(--nordra-black); color: var(--nordra-white); }
/* Used only for chips drawn on a photograph, which must not invert with the
   theme. See the on-image tokens in tokens.css. */
.chip--on-light { background: var(--on-image-chip-bg); color: var(--on-image-chip-text); }
.chip--static { cursor: default; }

/* --- Field ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label { font: var(--type-label); color: var(--text-primary); }
.field__control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  height: var(--control-height-lg);
  padding: 12px 20px 12px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--nordra-light-grey);
  text-align: left;
  cursor: pointer;
}
.field__control .icon { --icon-size: 24px; color: var(--icon-default); }
.field__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: var(--type-input);
  color: var(--nordra-dark-grey);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field__value:empty::before,
.field__value[data-empty="true"] { color: var(--text-placeholder); }

/* --- Segmented control ---------------------------------------------------- */
.segmented {
  display: inline-flex;
  gap: var(--space-2h);
  padding: 2px;
  height: 43px;
  border-radius: var(--radius-sm);
  background: var(--nordra-light-grey);
  overflow: hidden;
}
.segmented__option {
  flex: 1;
  height: 39px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--nordra-light-mid-grey);
  font: var(--weight-medium) 16px/100% var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.segmented__option[aria-pressed="true"] {
  background: var(--nordra-white);
  color: var(--nordra-black);
}
.segmented__option .icon { --icon-size: 24px; color: currentColor; }

.segmented--icon-only { height: var(--control-height-lg); }
.segmented--icon-only .segmented__option { flex: 0 0 auto; width: 44px; height: 44px; }
.segmented--icon-only .segmented__option[aria-pressed="true"] .icon { color: var(--icon-default); }

/* --- Stepper -------------------------------------------------------------- */
.stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 125px;
  height: var(--control-height-lg);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--nordra-light-grey);
}
.stepper__btn {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  color: var(--icon-default);
  cursor: pointer;
}
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper__btn .icon { --icon-size: 18px; }
.stepper__btn--down .icon { transform: rotate(90deg); }
.stepper__btn--up .icon { transform: rotate(-90deg); }
.stepper__value { font: var(--type-input); color: var(--nordra-black); }

/* --- Slider --------------------------------------------------------------- */
.slider {
  position: relative;
  width: 100%;
  height: 24px;
  cursor: pointer;
  touch-action: none;
}
.slider__track,
.slider__fill {
  position: absolute;
  top: 9px;
  left: 0;
  height: 6px;
  border-radius: 5px;
}
.slider__track { right: 0; background: var(--nordra-light-mid-grey); }
.slider__fill { width: 50%; background: var(--nordra-black); }
.slider__thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  border: 3.5px solid var(--nordra-black);
  border-radius: var(--radius-full);
  background: var(--nordra-white);
  transform: translateX(-50%);
}

/* --- Checkbox ------------------------------------------------------------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: 1px solid var(--nordra-light-mid-grey);
  border-radius: var(--radius-sm);
  background: var(--nordra-white);
  color: var(--nordra-white);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.checkbox[aria-checked="true"] {
  border-color: transparent;
  background: var(--nordra-black);
}
.checkbox .icon { --icon-size: 16px; opacity: 0; }
.checkbox[aria-checked="true"] .icon { opacity: 1; }

/* --- USP ------------------------------------------------------------------ */
.usp { display: flex; flex-direction: row; align-items: center; gap: var(--space-9); }
.usp > .icon { --icon-size: 44px; color: var(--nordra-dark-grey); }
.usp__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.usp__title { font: var(--type-usp-title); color: var(--text-primary); }
.usp__body {
  font: var(--weight-regular) 16px/var(--line-height-body) var(--font-sans);
  color: var(--text-primary);
  text-wrap: pretty;
}

/* --- Section header ------------------------------------------------------- */
.section-header { display: flex; flex-direction: column; gap: var(--space-7); }
.section-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
}
.section-header__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.section-header__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: none;
  color: var(--nordra-black);
  font: var(--weight-medium) 16px/100% var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.section-header__action .icon { --icon-size: 18px; transform: rotate(-90deg); }

/* --- Package card --------------------------------------------------------- */
.card { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* Guide and blog cards run a shorter, landscape media block. */
.card--wide { --card-media-height: 228px; --card-media-ratio: 342 / 228; }

.card__media {
  position: relative;
  height: var(--card-media-height, 342px);
  border-radius: var(--radius-lg);
  background: var(--surface-media-placeholder) center / cover no-repeat;
  overflow: hidden;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-card-bottom);
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__save {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--on-image-control-bg);
  color: var(--on-image-control-ink);
  cursor: pointer;
}
.card__save .icon { --icon-size: 22px; }
.card__save[aria-pressed="true"] .icon { fill: var(--on-image-control-ink); }

.card__overlay {
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.card__place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 2px 12px;
  border-radius: var(--radius-sm);
  background: var(--on-image-chip-bg);
  color: var(--on-image-chip-text);
  font: var(--type-chip);
}
.card__place .icon { --icon-size: 16px; }

.card__dots { display: inline-flex; align-items: center; gap: var(--space-3); }
.card__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-on-image);
  opacity: 0.5;
}
.card__dot[aria-current="true"] { opacity: 1; }

.card__body { display: flex; flex-direction: column; gap: var(--space-6); padding: 0 12px; }
.card__text { display: flex; flex-direction: column; gap: var(--space-2); }
.card__title {
  font: var(--type-card-title);
  color: var(--text-primary);
  text-wrap: pretty;
}
.card__title--sans { font: var(--weight-bold) 20px/100% var(--font-sans); }
.card__tags { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.card__copy {
  font: var(--weight-regular) 14px/var(--line-height-body) var(--font-sans);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.card__price-group { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.card__price { font: var(--type-price); color: var(--text-primary); }
.card__price-unit {
  font: var(--weight-regular) 13px/100% var(--font-sans);
  color: var(--text-secondary);
}
.card__rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.card__rating .icon { --icon-size: 18px; color: var(--nordra-black); }
.card__rating span {
  font: var(--weight-bold) 14px/15px var(--font-sans);
  color: var(--text-primary);
}

/* --- Date picker ---------------------------------------------------------- */
.datepicker {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}
.datepicker .segmented { align-self: stretch; }

.calendar__dow {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid var(--nordra-light-grey);
}
.calendar__dow span {
  flex: 1;
  text-align: center;
  font: var(--weight-regular) 16px/24px var(--font-sans);
  color: var(--nordra-mid-grey);
}
.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 53px;
  padding: 12px;
}
.calendar__month {
  font: var(--weight-medium) 24px/100% var(--font-sans);
  color: var(--nordra-dark-grey);
}
.calendar__controls { display: inline-flex; align-items: center; gap: var(--space-7); }
.calendar__controls button {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  color: var(--icon-default);
  cursor: pointer;
}
.calendar__controls .icon { --icon-size: 18px; }
.calendar__prev .icon { transform: rotate(90deg); }
.calendar__next .icon { transform: rotate(-90deg); }
.calendar__today { font: var(--type-label); color: var(--nordra-black); }

.calendar__grid { display: flex; flex-direction: column; gap: var(--space-6); }
.calendar__week { display: flex; align-items: center; height: 48px; }
.calendar__day {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* The band that joins the two ends of a selected range. It fills the whole cell
   so neighbouring days meet with no seam, and only rounds off where the run
   breaks — at the ends of the range and at the start/end of each week row. */
.calendar__day::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
.calendar__day.is-in-range::before { background: var(--surface-subtle); }
.calendar__day.is-in-range:first-child::before,
.calendar__day.is-range-start::before {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}
.calendar__day.is-in-range:last-child::before,
.calendar__day.is-range-end::before {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.calendar__day span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--nordra-black);
  font: var(--weight-medium) 14px/24px var(--font-sans);
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.calendar__day:not([disabled]):hover span { background: var(--surface-subtle); }
.calendar__day.is-range-start span,
.calendar__day.is-range-end span,
.calendar__day.is-range-start:hover span,
.calendar__day.is-range-end:hover span {
  background: var(--nordra-black);
  color: var(--nordra-white);
}
.calendar__day[disabled] { cursor: default; }
.calendar__day[disabled] span { color: var(--nordra-light-mid-grey); }

.datepicker__nights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--control-height-lg);
  padding: 0 12px;
}
.datepicker__nights span { font: var(--type-label); color: var(--nordra-black); }
/* The preferred-season checklist. `.option-list` is the same pattern reused for
   the hero's region dropdown, which has no icons — `.usp` simply drops its
   leading glyph and the text block starts at the edge. */
.datepicker__seasons,
.option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 0 12px;
}
.datepicker__seasons > span { font: var(--type-label); color: var(--nordra-black); }
.datepicker__seasons hr,
.option-list hr {
  align-self: stretch;
  height: 1px;
  margin: 0;
  border: none;
  background: var(--nordra-light-grey);
}
.datepicker__seasons .usp,
.option-list .usp { padding: 12px 0; }