/*
 * Purpose: Property detail page - gallery, lightbox, room inventory, cost
 * breakdown, trust panel, sticky sidebar and the mobile action bar.
 */

.rh-property {
  padding-bottom: var(--space-64);
}

/* ---------------------------------------------------------------- LAYOUT */

.rh-property__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding-top: var(--space-32);
}

@media (min-width: 1024px) {
  .rh-property__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-48);
    align-items: start;
  }
}

.rh-property__main {
  min-width: 0;
}

/*
 * On one column the action card leads, straight after the photographs.
 *
 * Rent is the first question anybody asks, and how recently availability was
 * confirmed is the thing this site is for. Below 1024px both sat underneath
 * About, Rooms, Costs, Amenities and Rules - so a visitor scrolled past the
 * entire listing before learning what it costs or whether it is still free.
 *
 * The sticky bar covers someone already scrolling. It cannot do anything about
 * the first screen, which is where the decision to keep reading is made.
 */
@media (max-width: 1023px) {
  .rh-property__aside {
    order: -1;
  }
}

.rh-property__section {
  padding-block: var(--space-32);
  border-top: 1px solid var(--rh-border);
}

.rh-property__section-title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-20);
}

/* --------------------------------------------------------------- GALLERY */

.rh-gallery {
  position: relative;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  /* Same gap under the breadcrumbs as the college and locality pages use. */
  margin-top: var(--rh-crumbs-gap);
  border-radius: var(--r-media);
  overflow: hidden;
}

@media (min-width: 768px) {
  .rh-gallery {
    grid-template-columns: 2fr 1fr;
  }
}

.rh-gallery__main {
  margin: 0;
  padding: 0;
  background-color: var(--rh-surface);
  overflow: hidden;
}

.rh-gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.rh-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.rh-gallery__main .rh-gallery__image {
  aspect-ratio: 16 / 10;
}

.rh-gallery__open:hover .rh-gallery__image,
.rh-gallery__thumb:hover .rh-gallery__image {
  transform: scale(1.03);
}

.rh-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

@media (max-width: 767px) {
  .rh-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rh-gallery__thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background-color: var(--rh-surface);
  overflow: hidden;
  cursor: zoom-in;
}

.rh-gallery__thumb .rh-gallery__image {
  aspect-ratio: 4 / 3;
}

.rh-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(3, 38, 34, 0.62);
  color: var(--rh-text-inverse);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.rh-gallery__all {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 36px;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--rh-border-strong);
  border-radius: var(--r-button);
  background-color: var(--rh-white);
  color: var(--rh-text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}

.rh-gallery--empty {
  grid-template-columns: 1fr;
  border: 1px dashed var(--rh-border-strong);
  background-color: var(--rh-surface);
}

.rh-gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 280px;
  padding: var(--space-32);
  text-align: center;
  color: var(--rh-text-secondary);
}

.rh-gallery__placeholder p {
  font-weight: var(--fw-semibold);
}

.rh-gallery__placeholder-hint {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  max-width: 34ch;
}

/* -------------------------------------------------------------- LIGHTBOX */

.rh-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(3, 38, 34, 0.94);
  padding: var(--space-16);
}


.rh-lightbox__figure {
  margin: 0;
  max-width: min(100%, 1200px);
  text-align: center;
}

.rh-lightbox__image {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--r-media);
  object-fit: contain;
}

.rh-lightbox__caption {
  margin-top: var(--space-12);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
}

/*
 * Photo-kind tabs.
 *
 * Stopped short of the close button rather than centred on the dialog, because
 * a centring transform puts the last tab under the close control the moment the
 * list is long. Scrolls sideways instead of wrapping: two rows of tabs would
 * push the photograph off centre.
 */
.rh-lightbox__tabs {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  right: 64px;
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  overflow-x: auto;
  padding-bottom: var(--space-4);
}

.rh-lightbox__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
  padding: var(--space-8) var(--space-16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background-color: transparent;
  color: var(--rh-white);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.rh-lightbox__tab:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.rh-lightbox__tab.is-active {
  background-color: var(--rh-white);
  border-color: var(--rh-white);
  color: var(--rh-dark);
}

.rh-lightbox__tab-count {
  opacity: 0.7;
  font-size: var(--fs-12);
}

/* Give the tab strip its own room rather than letting it sit over the photo. */
.rh-lightbox:has(.rh-lightbox__tabs) .rh-lightbox__image {
  max-height: 72vh;
}

.rh-lightbox__close,
.rh-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--rh-white);
  border: 0;
}

.rh-lightbox__close:hover,
.rh-lightbox__nav:hover {
  background-color: rgba(255, 255, 255, 0.26);
}

.rh-lightbox__close {
  top: var(--space-16);
  right: var(--space-16);
}

.rh-lightbox__nav--prev {
  left: var(--space-16);
  transform: rotate(180deg);
}

.rh-lightbox__nav--next {
  right: var(--space-16);
}

/* ---------------------------------------------------------------- HEADER */

/*
 * No top padding. The only thing that ever sits above this is the demo notice,
 * and that carries its own margin-block - so this padding was either doubling
 * that gap or, on a real listing, pushing the title down from nothing.
 */
.rh-property__header {
  padding-top: 0;
}

.rh-property__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.rh-property__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.rh-property__location,
.rh-property__near {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-12);
  color: var(--rh-text-secondary);
  font-size: var(--fs-small);
}

.rh-property__location .rh-icon,
.rh-property__near .rh-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------------------------------------------------------- AVAILABILITY */

.rh-availability {
  margin-top: var(--space-24);
  /*
   * The next element is a section with a border-top, which without this sat
   * flush against the strip and read as an underline belonging to it.
   */
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-left-width: 4px;
  border-radius: var(--r-card);
  background-color: var(--rh-surface);
}

.rh-availability--fresh {
  border-left-color: var(--rh-success);
  background-color: var(--rh-teal-light);
}

.rh-availability--ageing {
  border-left-color: var(--rh-warning);
}

.rh-availability--stale {
  border-left-color: var(--rh-error);
}

.rh-availability__state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8) var(--space-12);
}

.rh-availability__state strong {
  font-size: var(--fs-lead);
}

.rh-availability__state span {
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-availability__hint {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

/* ----------------------------------------------------------------- ROOMS */

.rh-rooms {
  display: grid;
  gap: var(--space-12);
}

.rh-room {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
}

.rh-room--full {
  background-color: var(--rh-surface);
}

.rh-room__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
}

.rh-room__name {
  font-size: var(--fs-h5);
}

.rh-room__price strong {
  font-size: var(--fs-price);
  color: var(--rh-text-primary);
}

.rh-room__price span {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-room__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-room__free {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--rh-success);
}

.rh-room__none {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--rh-text-secondary);
}

/* ----------------------------------------------------------------- COSTS */

.rh-costs {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .rh-costs {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
}

.rh-costs__table {
  width: 100%;
  border-collapse: collapse;
}

.rh-costs__table th,
.rh-costs__table td {
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--rh-border);
  font-size: var(--fs-small);
  text-align: left;
}

.rh-costs__table th {
  font-weight: var(--fw-regular);
  color: var(--rh-text-secondary);
}

.rh-costs__table td {
  text-align: right;
  font-weight: var(--fw-semibold);
}

.rh-costs__unknown {
  color: var(--rh-text-secondary);
  font-weight: var(--fw-regular);
  font-style: italic;
}

.rh-costs__included {
  color: var(--rh-success);
}

.rh-costs__summary {
  display: grid;
  gap: var(--space-12);
}

.rh-costs__estimate {
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-teal-light);
}

.rh-costs__estimate--unknown {
  background-color: var(--rh-surface);
}

.rh-costs__estimate-label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-costs__estimate-value {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
}

.rh-costs__estimate--unknown .rh-costs__estimate-value {
  font-size: var(--fs-body);
  color: var(--rh-text-secondary);
}

.rh-costs__estimate-note {
  display: block;
  margin-top: var(--space-8);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/* ----------------------------------------------------------------- FACTS */

.rh-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .rh-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rh-facts__item {
  display: grid;
  gap: var(--space-4);
}

.rh-facts__icon {
  color: var(--rh-teal);
}

.rh-facts__label {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-facts__value {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  margin: 0;
}

/* ------------------------------------------------------------- AMENITIES */

.rh-amenities {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .rh-amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-amenities__title {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--rh-text-secondary);
  margin-bottom: var(--space-12);
}

.rh-amenities__list {
  display: grid;
  gap: var(--space-8);
}

.rh-amenities__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
}

.rh-amenities__item .rh-icon {
  color: var(--rh-success);
  flex-shrink: 0;
}

/*
 * The .rh-rules definition list lives in components/sections.css, because the
 * account profile screen uses the same pattern and this stylesheet only loads
 * on a property.
 */

/* -------------------------------------------------------------- LOCATION */

.rh-location {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .rh-location {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
}

.rh-location__map {
  width: 100%;
  height: 320px;
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-surface);
}

.rh-location__note {
  grid-column: 1 / -1;
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

@media (min-width: 768px) {
  .rh-location__note {
    grid-column: 1;
  }
}

.rh-nearby__title {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--rh-text-secondary);
  margin-bottom: var(--space-12);
}

.rh-nearby__list {
  display: grid;
  gap: var(--space-8);
}

.rh-nearby__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
}

.rh-nearby__item .rh-icon {
  color: var(--rh-teal);
  flex-shrink: 0;
}

.rh-nearby__name {
  flex: 1;
  min-width: 0;
}

.rh-nearby__distance {
  color: var(--rh-text-secondary);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- TRUST */

.rh-trust {
  padding: var(--space-20);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-surface);
}

.rh-trust__list {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .rh-trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rh-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
}

.rh-trust__item .rh-icon {
  flex-shrink: 0;
}

.rh-trust__item--done {
  color: var(--rh-text-primary);
}

.rh-trust__item--done .rh-icon {
  color: var(--rh-success);
}

.rh-trust__item--pending {
  color: var(--rh-text-secondary);
}

.rh-trust__item--pending .rh-icon {
  color: var(--rh-border-strong);
}

.rh-trust__note {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--rh-border);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/* ---------------------------------------------------------------- REPORT */

.rh-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
}

.rh-report__title {
  font-size: var(--fs-body);
}

.rh-report__text {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
  max-width: 52ch;
}

/* ----------------------------------------------------------- ACTION CARD */

.rh-property__aside {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 1024px) {
  .rh-property__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-24));
  }
}

.rh-action-card,
.rh-owner-card {
  padding: var(--space-20);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-white);
  box-shadow: var(--shadow-sm);
}

/*
 * One rhythm, set here, rather than a margin on each child.
 *
 * This card was display:block with ad-hoc margins on individual pieces - 4px,
 * 16px, 15px, then 0. That last one is why the explanation under a disabled
 * button sat directly on top of the button below it with no gap at all. A flex
 * column with a single gap cannot drift like that, and the exceptions below are
 * the two places a different gap is genuinely meant.
 */
.rh-action-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.rh-action-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.rh-action-card__amount {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.rh-action-card__period {
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

/* The deposit belongs to the price above it, so it sits closer than the rest. */
.rh-action-card__price + .rh-action-card__deposit {
  margin-top: calc(var(--space-4) - var(--space-16));
}

.rh-action-card__deposit {
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
}

.rh-action-card__availability {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-input);
  background-color: var(--rh-surface);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.rh-action-card__availability--fresh {
  background-color: var(--rh-teal-light);
  color: var(--rh-success);
}

.rh-action-card__availability--stale {
  color: var(--rh-warning-text);
}

/* Stacked buttons are one control group, so they sit tighter than the gap. */
.rh-action-card .rh-btn + .rh-btn {
  margin-top: calc(var(--space-8) - var(--space-16));
}

/* A hint explains the control directly above it and belongs to it. */
.rh-action-card__hint {
  margin-top: calc(var(--space-8) - var(--space-16));
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
}

.rh-action-card__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-16);
  border-top: 1px solid var(--rh-border);
}

.rh-action-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--touch-target);
  padding: var(--space-8) var(--space-4);
  border: 0;
  border-radius: var(--r-button);
  background: none;
  color: var(--rh-text-secondary);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.rh-action-card__action:hover {
  background-color: var(--rh-surface);
  color: var(--rh-teal);
  text-decoration: none;
}

.rh-action-card__action.is-comparing {
  color: var(--rh-teal);
}

/*
 * Compare, plus the way through to the comparison once something is on it.
 *
 * The group is the grid cell, so the button still fills its third of the row
 * and the link sits over the corner rather than stealing width from it.
 */
.rh-action-card__compare-group {
  position: relative;
  display: flex;
}

.rh-action-card__compare-group .rh-action-card__action {
  flex: 1;
}

/*
 * Once the place is on the shortlist the arrow takes the icon's place, rather
 * than appearing next to it. Two controls side by side read as two things to
 * do; a swap reads as one thing that has changed state.
 *
 * The button underneath still toggles, so the place can be taken back off.
 */
.rh-action-card__compare-link {
  position: absolute;
  top: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-button);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

/* The icon it replaces keeps its space, so the label does not jump. */
.rh-action-card__compare-group .rh-action-card__action.is-comparing > .rh-icon {
  opacity: 0;
}

.rh-action-card__compare-link:hover {
  background-color: var(--rh-teal);
  color: var(--rh-text-inverse);
  text-decoration: none;
}

/* Saved is red here too, so the state reads the same as it does on a card. */
.rh-action-card__action.is-saved {
  color: var(--rh-saved-text);
}

.rh-action-card__action.is-saved .rh-icon {
  fill: var(--rh-saved);
  color: var(--rh-saved);
}

/* ------------------------------------------------------------ OWNER CARD */

.rh-owner-card__title {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--rh-text-secondary);
  margin-bottom: var(--space-12);
}

.rh-owner-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.rh-owner-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
  flex-shrink: 0;
}

.rh-owner-card__name {
  font-weight: var(--fw-semibold);
}

.rh-owner-card__role {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-owner-card__checks {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.rh-owner-card__checks li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-owner-card__checks li.is-done {
  color: var(--rh-success);
}

.rh-owner-card__note {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--rh-border);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/* ------------------------------------------------------------ STICKY BAR */

.rh-sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rh-border);
  background-color: var(--rh-white);
  box-shadow: var(--shadow-lg);
}

/* The bar overlays the page, so the page reserves matching space beneath it. */
@media (max-width: 1023px) {
  .rh-property {
    padding-bottom: calc(var(--space-80) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1024px) {
  .rh-sticky-bar {
    display: none;
  }
}

.rh-sticky-bar__price strong {
  font-size: var(--fs-lead);
}

.rh-sticky-bar__price span {
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

/*
 * The .rh-notice rules moved to components/sections.css. They are used by the
 * owner plan screen and the OTP form as well as this page, and neither of those
 * loads this stylesheet - so on both the notice lost its flex row and the icon
 * stacked above the text with no gap below it.
 */

/* ---------------------------------------------------------------- MODALS */

.rh-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}


@media (min-width: 768px) {
  .rh-modal {
    align-items: center;
  }
}

.rh-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(3, 38, 34, 0.5);
}

.rh-modal__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90dvh;
  overflow-y: auto;
  background-color: var(--rh-white);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
  .rh-modal__panel {
    border-radius: var(--r-card);
  }
}

.rh-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--rh-border);
}

.rh-modal__title {
  font-size: var(--fs-h5);
}

.rh-modal__body {
  padding: var(--space-20);
  padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom, 0px));
}

.rh-modal__intro {
  margin-bottom: var(--space-16);
  font-size: var(--fs-small);
  color: var(--rh-text-secondary);
  line-height: var(--lh-relaxed);
}

.rh-modal__note {
  margin-top: var(--space-12);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
}

.rh-modal__body .rh-field + .rh-field {
  margin-top: var(--space-16);
}

.rh-modal__body button[type="submit"] {
  margin-top: var(--space-20);
}

.rh-contact-reveal {
  padding: var(--space-16);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-card);
  background-color: var(--rh-teal-light);
  margin-bottom: var(--space-12);
}

.rh-contact-reveal__label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--rh-text-secondary);
}

.rh-contact-reveal__name {
  margin-block: var(--space-4) var(--space-12);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.rh-contact-reveal .rh-btn + .rh-btn {
  margin-top: var(--space-8);
}

/*
 * When the owner card shows a real photo it uses the shared avatar component,
 * which brings its own sizing - this keeps it the same size as the icon state
 * so the card does not jump between the two.
 */
.rh-avatar.rh-owner-card__avatar {
  width: 48px;
  height: 48px;
}