/* Shared-partials recipes (.sp-*) for the Pages/Shared partials:
   _ListingCard, _EmptyState, _PartnerStrip, _LicensingNote, _DateRangePicker,
   _GuestPicker, _ResortPicker. Token-consuming only: every design value resolves
   through a --dvc-* custom property - raw literals appear exclusively in the
   component-local token block below (this file's tokenization point), mirroring
   the RCL partial convention. Pages link this file from their Styles section:
   <link rel="stylesheet" href="~/css/shared-partials.css" />. */

:root {
  /* --- shared micro-spacing scale (ported from the prototype's px values) --- */
  --dvc-sp-gap-2: 2px;
  --dvc-sp-gap-5: 5px;
  --dvc-sp-gap-6: 6px;
  --dvc-sp-gap-7: 7px;
  --dvc-sp-gap-8: 8px;
  --dvc-sp-gap-10: 10px;
  --dvc-sp-gap-12: 12px;
  --dvc-sp-gap-14: 14px;
  --dvc-sp-gap-16: 16px;
  --dvc-sp-gap-18: 18px;
  --dvc-sp-gap-24: 24px;

  /* --- listing card --- */
  --dvc-sp-photo-height: 172px;
  --dvc-sp-photo-height-compact: 140px;
  --dvc-sp-heart-size: 34px;
  --dvc-sp-heart-inset: 12px;
  --dvc-sp-heart-bg: rgba(255, 255, 255, 0.92);
  --dvc-sp-tag-inset: 14px;
  --dvc-sp-body-pad: 16px;
  --dvc-sp-body-pad-compact: 13px;
  --dvc-sp-name-size: 15px;
  --dvc-sp-meta-size: 12.5px;
  --dvc-sp-price-size: 19px;
  --dvc-sp-save-size: 12px;
  --dvc-sp-line-height: 1.5;

  /* --- empty state --- */
  --dvc-sp-empty-pad-block: 52px;
  --dvc-sp-empty-pad-inline: 20px;
  --dvc-sp-empty-icon-size: 56px;
  --dvc-sp-empty-title-size: 17px;
  --dvc-sp-empty-body-size: 14px;
  --dvc-sp-empty-body-width: 360px;

  /* --- fail-loud error banner --- */
  --dvc-sp-error-icon-size: 30px;
  --dvc-sp-error-text-size: 14px;

  /* --- partner strip + licensing note --- */
  --dvc-sp-partner-gap: 22px;
  --dvc-sp-partner-gap-compact: 16px;
  --dvc-sp-partner-size: 12.5px;
  --dvc-sp-partner-size-compact: 12px;
  --dvc-sp-licensing-size: 12.5px;
  --dvc-sp-licensing-line-height: 1.55;

  /* --- pickers (details popovers) --- */
  --dvc-sp-trigger-label-size: 10px;
  --dvc-sp-trigger-tracking: 0.06em;
  --dvc-sp-trigger-value-size: 14px;
  --dvc-sp-panel-width: 320px;
  --dvc-sp-panel-pad: 20px;
  --dvc-sp-title-size: 17px;
  --dvc-sp-sub-size: 13px;
  --dvc-sp-month-width: 280px;
  --dvc-sp-month-label-size: 15px;
  --dvc-sp-guest-input-width: 76px;
  --dvc-sp-guest-name-size: 15px;
  --dvc-sp-guest-sub-size: 12.5px;
  --dvc-sp-resort-photo: 44px;
  --dvc-sp-resort-name-size: 14.5px;
  --dvc-sp-resort-list-height: 320px;
  --dvc-sp-resort-pad-block: 9px;
  --dvc-sp-resort-pad-inline: 10px;
  --dvc-sp-z-overlay: 30;
}

/* ---------- _ListingCard ---------- */

.sp-listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sp-listing-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.sp-listing-photo {
  position: relative;
  display: block;
}

.sp-listing-photo .dvc-photo {
  block-size: var(--dvc-sp-photo-height);
  border-radius: 0;
}

.sp-listing-card[data-compact="true"] .sp-listing-photo .dvc-photo {
  block-size: var(--dvc-sp-photo-height-compact);
}

.sp-listing-save {
  position: absolute;
  inset-block-start: var(--dvc-sp-heart-inset);
  inset-inline-end: var(--dvc-sp-heart-inset);
  z-index: 2;
}

.sp-heart {
  inline-size: var(--dvc-sp-heart-size);
  block-size: var(--dvc-sp-heart-size);
  border: none;
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-sp-heart-bg);
  color: var(--dvc-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--dvc-shadow-sm);
}

.sp-heart[data-saved="true"] {
  color: var(--dvc-color-action);
}

.sp-heart[data-saved="true"] .dvc-icon {
  fill: var(--dvc-color-action);
}

.sp-listing-tag {
  position: absolute;
  inset-block-start: var(--dvc-sp-tag-inset);
  inset-inline-start: var(--dvc-sp-tag-inset);
  background: var(--dvc-surface);
  box-shadow: var(--dvc-shadow-sm);
}

.sp-listing-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--dvc-sp-body-pad);
}

.sp-listing-card[data-compact="true"] .sp-listing-body {
  padding: var(--dvc-sp-body-pad-compact);
}

.sp-listing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dvc-sp-gap-8);
}

.sp-listing-name {
  font-size: var(--dvc-sp-name-size);
}

.sp-listing-loc {
  font-size: var(--dvc-sp-meta-size);
  color: var(--dvc-muted);
  margin-block-start: var(--dvc-sp-gap-2);
}

.sp-listing-room {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-sp-gap-6);
  font-size: var(--dvc-sp-meta-size);
  color: var(--dvc-muted);
  margin-block-start: var(--dvc-sp-gap-7);
  margin-block-end: var(--dvc-sp-gap-14);
}

.sp-listing-foot {
  display: block;
  margin-block-start: auto;
  padding-block-start: var(--dvc-sp-gap-12);
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.sp-listing-price {
  font-size: var(--dvc-sp-price-size);
  font-weight: 800;
}

.sp-listing-nights {
  font-size: var(--dvc-sp-meta-size);
  font-weight: 600;
  color: var(--dvc-muted);
}

.sp-listing-points {
  display: flex;
  align-items: center;
  gap: var(--dvc-sp-gap-6);
  margin-block-start: var(--dvc-sp-gap-6);
}

.sp-listing-save-line {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-sp-gap-5);
  margin-block-start: var(--dvc-sp-gap-7);
  font-size: var(--dvc-sp-save-size);
  font-weight: 700;
  color: var(--dvc-color-success);
}

/* ---------- _EmptyState ---------- */

.sp-empty {
  text-align: center;
  padding-block: var(--dvc-sp-empty-pad-block);
  padding-inline: var(--dvc-sp-empty-pad-inline);
}

.sp-empty-icon {
  inline-size: var(--dvc-sp-empty-icon-size);
  block-size: var(--dvc-sp-empty-icon-size);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-sand);
  color: var(--dvc-faint);
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-block-end: var(--dvc-sp-gap-16);
}

.sp-empty-title {
  margin: 0;
  font-size: var(--dvc-sp-empty-title-size);
  font-weight: 800;
}

.sp-empty-body {
  margin-block: var(--dvc-sp-gap-6) 0;
  margin-inline: auto;
  max-inline-size: var(--dvc-sp-empty-body-width);
  font-size: var(--dvc-sp-empty-body-size);
  color: var(--dvc-muted);
  line-height: var(--dvc-sp-line-height);
}

.sp-empty-cta {
  margin-block-start: var(--dvc-sp-gap-18);
}

/* ---------- _OwnerErrorBanner (fail-loud) ---------- */

.sp-error {
  display: flex;
  align-items: flex-start;
  gap: var(--dvc-sp-gap-12);
  background: var(--dvc-coral-soft);
  border-color: var(--dvc-coral);
}

.sp-error-icon {
  flex: none;
  inline-size: var(--dvc-sp-error-icon-size);
  block-size: var(--dvc-sp-error-icon-size);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-surface);
  color: var(--dvc-coral-ink);
  display: grid;
  place-items: center;
}

.sp-error-text {
  margin: 0;
  font-size: var(--dvc-sp-error-text-size);
  font-weight: 600;
  color: var(--dvc-coral-ink);
  line-height: var(--dvc-sp-line-height);
}

/* ---------- native select (owner forms; matches .dvc-input) ---------- */

.osb-select {
  inline-size: 100%;
  font-family: inherit;
  font-size: var(--dvc-input-font-size);
  color: var(--dvc-ink);
  padding: var(--dvc-input-pad-block) var(--dvc-input-pad-inline);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-input-radius);
  background: var(--dvc-surface);
}

.osb-select:focus {
  outline: none;
  border-color: var(--dvc-coral);
  box-shadow: var(--dvc-input-ring);
}

/* ---------- _PartnerStrip ---------- */

.sp-partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dvc-sp-partner-gap);
}

.sp-partner-strip[data-compact="true"] {
  gap: var(--dvc-sp-partner-gap-compact);
}

.sp-partner {
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-sp-gap-8);
  font-size: var(--dvc-sp-partner-size);
  color: var(--dvc-muted);
}

.sp-partner-strip[data-compact="true"] .sp-partner {
  font-size: var(--dvc-sp-partner-size-compact);
}

.sp-partner .dvc-icon {
  color: var(--dvc-color-trust);
  flex: none;
}

.sp-partner strong {
  color: var(--dvc-ink-2);
}

/* ---------- _LicensingNote ---------- */

.sp-licensing {
  display: flex;
  align-items: flex-start;
  gap: var(--dvc-sp-gap-12);
  background: var(--dvc-sand);
}

.sp-licensing .dvc-icon {
  color: var(--dvc-color-trust);
  flex: none;
}

.sp-licensing-copy {
  margin: 0;
  font-size: var(--dvc-sp-licensing-size);
  color: var(--dvc-ink-2);
  line-height: var(--dvc-sp-licensing-line-height);
}

/* ---------- pickers (shared shell) ---------- */

.sp-picker {
  position: relative;
}

.sp-picker > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--dvc-sp-gap-10);
  cursor: pointer;
}

.sp-picker > summary::-webkit-details-marker {
  display: none;
}

.sp-picker > summary > .dvc-icon {
  color: var(--dvc-color-action);
  flex: none;
}

.sp-picker-trigger-label {
  display: block;
  font-size: var(--dvc-sp-trigger-label-size);
  font-weight: 700;
  letter-spacing: var(--dvc-sp-trigger-tracking);
  text-transform: uppercase;
  color: var(--dvc-faint);
}

.sp-picker-trigger-value {
  font-size: var(--dvc-sp-trigger-value-size);
  font-weight: 600;
  color: var(--dvc-ink);
  white-space: nowrap;
}

.sp-picker-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--dvc-sp-z-overlay);
  min-inline-size: var(--dvc-sp-panel-width);
  inline-size: max-content;
  max-inline-size: 92vw;
  margin-block-start: var(--dvc-sp-gap-8);
  padding: var(--dvc-sp-panel-pad);
  background: var(--dvc-surface);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line);
  border-radius: var(--dvc-radius-lg);
  box-shadow: var(--dvc-shadow-lg);
}

.sp-picker-title {
  margin: 0;
  font-size: var(--dvc-sp-title-size);
  font-weight: 800;
}

.sp-picker-sub {
  margin-block: var(--dvc-sp-gap-2) 0;
  font-size: var(--dvc-sp-sub-size);
  color: var(--dvc-muted);
}

.sp-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dvc-sp-gap-10);
  margin-block-start: var(--dvc-sp-gap-18);
  padding-block-start: var(--dvc-sp-gap-18);
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.sp-picker-foot > :last-child {
  margin-inline-start: auto;
}

.sp-picker-summary {
  font-size: var(--dvc-sp-sub-size);
  font-weight: 600;
  color: var(--dvc-muted);
}

/* ---------- _DateRangePicker ---------- */

.sp-cal-nav {
  display: flex;
  justify-content: space-between;
  margin-block: var(--dvc-sp-gap-12);
}

.sp-cal-months {
  display: flex;
  gap: var(--dvc-sp-gap-24);
}

.sp-cal-month {
  inline-size: var(--dvc-sp-month-width);
}

.sp-cal-month-label {
  margin-block: 0 var(--dvc-sp-gap-12);
  margin-inline: 0;
  text-align: center;
  font-size: var(--dvc-sp-month-label-size);
  font-weight: 700;
}

.sp-cal-blank {
  display: block;
}

.sp-cal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dvc-sp-gap-8);
  margin-block-start: var(--dvc-sp-gap-18);
}

/* ---------- _GuestPicker ---------- */

.sp-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dvc-sp-gap-14);
  padding-block: var(--dvc-sp-gap-14);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.sp-guest-row:last-of-type {
  border-block-end: none;
}

.sp-guest-name {
  display: block;
  font-size: var(--dvc-sp-guest-name-size);
  font-weight: 600;
}

.sp-guest-sub {
  font-size: var(--dvc-sp-guest-sub-size);
  color: var(--dvc-muted);
}

.sp-guest-row .dvc-input {
  inline-size: var(--dvc-sp-guest-input-width);
  text-align: center;
}

/* ---------- _ResortPicker ---------- */

.sp-resort-list {
  display: flex;
  flex-direction: column;
  gap: var(--dvc-sp-gap-2);
  max-block-size: var(--dvc-sp-resort-list-height);
  overflow-y: auto;
}

.sp-resort-option {
  display: flex;
  align-items: center;
  gap: var(--dvc-sp-gap-12);
  padding-block: var(--dvc-sp-resort-pad-block);
  padding-inline: var(--dvc-sp-resort-pad-inline);
  border-radius: var(--dvc-radius-md);
  color: inherit;
  text-decoration: none;
}

.sp-resort-option:hover,
.sp-resort-option[aria-current="true"] {
  background: var(--dvc-sand);
}

.sp-resort-option .dvc-photo {
  inline-size: var(--dvc-sp-resort-photo);
  block-size: var(--dvc-sp-resort-photo);
  flex: none;
}

.sp-resort-option > .dvc-icon {
  color: var(--dvc-color-action);
  margin-inline-start: auto;
  flex: none;
}

.sp-resort-name {
  display: block;
  font-size: var(--dvc-sp-resort-name-size);
  font-weight: 700;
}

.sp-resort-loc {
  font-size: var(--dvc-sp-guest-sub-size);
  color: var(--dvc-muted);
}

/* ---------- narrow viewports ---------- */

@media (max-width: 48rem) {
  .sp-cal-months {
    flex-direction: column;
  }
}