/* =========================================================
   CARE COLLECTIVE — PUBLIC PARTNER DIRECTORY
   Extends style.css. Reuses existing design tokens (--teal,
   --teal-dark, --sand, --gold, --bg, --panel, --muted, --line).
   ========================================================= */

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  z-index:99999;
  background:#fff;
  color:var(--teal-dark);
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow:var(--shadow);
}

.skip-link:focus{left:16px}

.section-kicker{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--teal);
  background:#e8f7f7;
  border-radius:999px;
  padding:7px 16px;
  margin-bottom:16px;
}

.directory-hero h1{
  margin:0 0 12px;
  font-size:clamp(28px,3.4vw,42px);
  color:var(--teal-dark);
  font-weight:800;
  letter-spacing:-0.02em;
}

.directory-intro{
  max-width:760px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
  margin:0 0 26px;
}

.directory-search-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.directory-search-form input[type="search"]{
  flex:1 1 280px;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:15px;
  color:var(--teal-dark);
}

/* An explicit, clearly visible focus ring for the search controls:
   the default outline is easy to miss on a rounded, light field, and
   this form is the main way into the directory. */
.directory-search-form input[type="search"]:focus-visible,
.directory-search-form select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

.directory-search-form select{
  min-height:48px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:15px;
  color:var(--teal-dark);
}

.directory-results{padding-top:0}

.directory-count{
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  margin:0 0 18px;
}

.directory-empty{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  text-align:center;
  color:var(--teal-dark);
}

.directory-empty strong{display:block;margin-bottom:8px;font-size:18px}
.directory-empty p{color:var(--muted);margin:0 0 16px}

.directory-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

@media (max-width:980px){
  .directory-grid{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:640px){
  .directory-grid{grid-template-columns:1fr}
}

.directory-pagination{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:28px;
}

.directory-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--soft-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}

.directory-card:hover,
.directory-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.directory-card-image{
  aspect-ratio:16 / 10;
  width:100%;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  overflow:hidden;
}

.directory-card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.directory-card-image--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}

.directory-card-image-icon{
  width:56px;
  height:56px;
}

.directory-card-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 24px 24px;
  flex:1;
}

.directory-card-head h2,
.directory-card-head h3{
  margin:0 0 4px;
  font-size:19px;
  color:var(--teal-dark);
  font-weight:800;
}

.directory-card-location{
  margin:0;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.directory-card-desc{
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
}

.directory-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.directory-tag{
  background:#eef2f2;
  color:var(--teal-dark);
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  min-height:auto;
  height:auto;
}

.directory-card-offers{
  margin:0;
  font-size:13px;
  color:var(--teal-dark);
  font-weight:600;
}

.directory-card-cta{
  margin-top:auto;
  font-size:13px;
  font-weight:800;
  color:var(--teal);
}

.directory-back-link{
  display:inline-block;
  margin-bottom:16px;
  color:var(--teal-dark);
  font-weight:700;
  text-decoration:none;
}

.directory-back-link:hover,
.directory-back-link:focus-visible{color:var(--teal)}

/* Profile page */

.profile-hero-media{
  border-radius:24px;
  overflow:hidden;
  margin:0 0 22px;
  box-shadow:var(--soft-shadow);
}

.profile-hero-media .directory-card-image{
  aspect-ratio:21 / 8;
}

.profile-hero-media .directory-card-image-icon{
  width:72px;
  height:72px;
}

@media (max-width:640px){
  .profile-hero-media .directory-card-image{aspect-ratio:16 / 10}
}

.profile-hero h1{
  margin:0 0 8px;
  font-size:clamp(28px,3.6vw,42px);
  color:var(--teal-dark);
  font-weight:800;
}

.profile-location{
  margin:0 0 14px;
  color:var(--muted);
  font-weight:700;
}

/* Temporary whole-organisation closure banner (see the final-backend-
   polish-block task) — purely a display notice; never changes the
   organisation's own approval status. */
.profile-closure-notice{
  max-width:760px;
  margin:4px 0 14px;
  padding:12px 16px;
  border-radius:12px;
  background:#fdf1de;
  color:#8a5a12;
  font-size:14.5px;
  line-height:1.5;
}

.profile-offer-closed-tag{
  background:#fdf1de;
  color:#8a5a12;
}

.profile-description{
  max-width:760px;
  color:var(--teal-dark);
  font-size:16px;
  line-height:1.6;
  margin:18px 0;
}

.profile-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

/* Email/phone shown as real, copyable text (see BACKEND_MASTER_SPEC.md
   section 23, profile UX polish) — never a mailto:/tel: link on the
   value itself, so a click can never silently open the mail client or
   dialer. See public/assets/js/contact-copy.js. */

.profile-contact-detail{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 8px 8px 18px;
  /* A long address used to make this card wider than the phone screen
     (measured 383px inside a 320px viewport), cutting the value off.
     The card now stays within its container and the value wraps. */
  max-width:100%;
  min-width:0;
}

.profile-contact-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.profile-contact-value{
  font-size:14.5px;
  font-weight:700;
  color:var(--teal-dark);
  text-decoration:none;
  /* Break inside a long address rather than pushing the card off the
     screen. `anywhere` rather than break-all so ordinary words still
     break at sensible points. The value itself is never altered — only
     where the line turns. */
  overflow-wrap:anywhere;
  min-width:0;
}

@media (max-width:560px){
  /* Wrapped text inside a full pill looks broken; a softer rectangle
     reads correctly over two or three lines. Copy and Call stay in the
     card and keep their touch target. */
  .profile-contact-detail{
    border-radius:16px;
    width:100%;
    padding:12px 12px 12px 16px;
  }
}

.profile-contact-copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--teal-dark);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.profile-contact-copy:hover,
.profile-contact-copy:focus-visible{
  background:#e8f7f7;
  border-color:var(--teal);
}

/* Phone only — an explicit, additional tap-to-call affordance for
   mobile, kept separate from the copyable text so tapping the number
   itself never unexpectedly starts a call on desktop. */
.profile-contact-call{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:var(--teal);
  color:#fff;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

@media (max-width:640px){
  .profile-contact-call{display:inline-flex}
}

.profile-locations{padding-top:0}
.profile-locations h2,
.profile-offers h2{
  margin:0 0 18px;
  font-size:24px;
  color:var(--teal-dark);
  font-weight:800;
}

.profile-location-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:20px;
}

.profile-location-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 24px;
  min-width:0;
}

.profile-location-card h3{margin:0 0 6px;font-size:18px;color:var(--teal-dark)}
.profile-location-card p{margin:0;color:var(--muted);font-size:14px}
.profile-location-hours{margin-top:4px !important}

/* Readable grouped accessibility presentation — Languages, Facilities,
   Accessibility & support (see PublicAccessibilityPresenter and
   partials/accessibility-summary.php). Shared by location cards, offer
   cards and their accessible units — one consistent visual language. */

.profile-info-disclaimer{
  max-width:var(--max);
  margin:0 auto 22px;
  padding:0 20px;
  color:var(--muted);
  font-size:13px;
}

.access-group{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.profile-location-card > .access-group:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.access-group-title{
  margin:0 0 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal-dark);
}

/* Public accessibility STATUS GROUPING (see the public-accessibility-
   status-grouping task): within an existing Languages/Facilities/
   "at a glance"/"full details" section, items are further grouped by
   status — Available / Partially available / Not available / Not
   confirmed / Not applicable — each its own labelled subsection so the
   status is never conveyed by colour alone (heading text + icon glyph
   + the item's own existing status word all agree). Reuses the exact
   same soft-green/grey/amber palette already used for
   .status-approved/.status-archived/.status-paused pills elsewhere in
   this app (see partner-portal.css) rather than inventing new colours. */
.access-status-subgroup{margin-top:14px}
.access-status-subgroup:first-child{margin-top:0}

.access-status-subgroup-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}

.access-status-subgroup-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.access-status-subgroup--available .access-status-subgroup-title{color:#1f7a4d}
.access-status-subgroup--available .access-status-subgroup-icon{background:#e4f4ea; color:#1f7a4d}

.access-status-subgroup--partial .access-status-subgroup-title,
.access-status-subgroup--not_confirmed .access-status-subgroup-title{color:#8a5a12}
.access-status-subgroup--partial .access-status-subgroup-icon,
.access-status-subgroup--not_confirmed .access-status-subgroup-icon{background:#fdf1de; color:#8a5a12}

.access-status-subgroup--not_available .access-status-subgroup-title,
.access-status-subgroup--not_applicable .access-status-subgroup-title{color:var(--muted)}
.access-status-subgroup--not_available .access-status-subgroup-icon,
.access-status-subgroup--not_applicable .access-status-subgroup-icon{background:#eef0ef; color:var(--muted)}

.access-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.access-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background:#eef2f2;
  color:var(--muted);
}

.access-chip-icon{font-size:12px}

.access-chip--yes{background:#e4f4ea;color:#1f7a4d}
.access-chip--partial{background:#fdf1de;color:#8a5a12}
.access-chip--no{background:#eef0ef;color:var(--muted)}
.access-chip--unknown{background:#fdf1de;color:#8a5a12}
.access-chip--na{background:#eef0ef;color:var(--muted);font-style:italic}

/* "Accessibility at a glance" — compact icon+label+status chips for
   the catalogue's own "core question" subset (is_common), so a
   traveller sees the important answers immediately, without opening
   "View full accessibility details" (see BACKEND_MASTER_SPEC.md
   section 23, profile UX polish). Same status colour language as
   .access-chip above — yes = teal, partial = gold, no/unknown = muted. */

.glance-chip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}

.glance-chip{
  display:flex;
  align-items:center;
  gap:10px;
  /* Tighter than before: the icon carries the weight now, so the chip
     needs less padding and far less vertical space on a phone. */
  padding:8px 12px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  background:#eef2f2;
  color:var(--muted);
}

/* A big icon that genuinely fills its coloured status area, rather
   than a small glyph floating in it. */
.glance-chip-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:20px;
  font-weight:800;
  letter-spacing:0;
}

.glance-chip-icon svg{width:28px;height:28px}

.glance-chip-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}

.glance-chip-label{
  line-height:1.25;
  font-size:13px;
  overflow-wrap:anywhere;
}

/* The status in words, always visible — never colour alone. */
.glance-chip-status{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  opacity:.9;
}

/* Shown only for the deficit-phrased questions whose displayed status
   is the opposite of the stored answer (see
   PublicAccessibilityPresenter::isPolarityFlipped) — "Entrance steps
   present: No" is green/Available, so the literal answer has to be
   readable and not implied by colour alone. */
.glance-chip-answer{
  margin-left:6px;
  padding-left:6px;
  border-left:1px solid currentColor;
  font-weight:600;
  opacity:.85;
}

.glance-chip--yes{background:#e4f4ea;color:#1f7a4d}
.glance-chip--partial{background:#fdf1de;color:#8a5a12}
.glance-chip--no{background:#eef0ef;color:var(--muted)}
.glance-chip--unknown{background:#fdf1de;color:#8a5a12}
.glance-chip--na{background:#eef0ef;color:var(--muted);font-style:italic}

.glance-chip .profile-accessibility-photo{display:inline-flex}
.glance-chip .profile-accessibility-photo img{
  width:24px;
  height:24px;
  border-radius:6px;
  object-fit:cover;
  margin:0;
}

.access-item-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.access-item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
}

.access-item-label{
  font-size:14px;
  color:var(--teal-dark);
  flex:1 1 220px;
}

.access-status{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.access-status--yes{background:#e4f4ea;color:#1f7a4d}
.access-status--partial{background:#fdf1de;color:#8a5a12}
.access-status--no{background:#eef0ef;color:var(--muted)}
.access-status--unknown{background:#fdf1de;color:#8a5a12}
.access-status--na{background:#eef0ef;color:var(--muted);font-style:italic}

.access-note{
  margin:8px 0 0;
  font-size:13.5px;
  color:var(--muted);
}

.access-full-details{
  margin-top:14px;
}

.access-full-details summary{
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:var(--teal);
  text-decoration:underline;
  text-underline-offset:2px;
}

.access-full-details summary:hover,
.access-full-details summary:focus-visible{color:var(--teal-dark)}

.access-full-details .access-item-list{margin-top:14px}

.access-measurement-list{
  list-style:none;
  margin:14px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13.5px;
  color:var(--muted);
}

.access-measurement-list strong{color:var(--teal-dark)}

.access-notes{
  margin:14px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
  color:var(--muted);
}

.access-notes strong{color:var(--teal-dark)}

.profile-offers{padding-top:0}

/* Public Offer cards (see the public-profile offer-card work) — a
   responsive grid: as many ~300px+ columns as fit, one column on
   mobile. A single Offer gets its own wider single-column layout
   instead of being squeezed into a narrow grid track. */
.profile-offer-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
}

.profile-offer-list--single{
  display:block;
  max-width:640px;
}

@media (max-width:640px){
  .profile-offer-list{grid-template-columns:1fr}
}

.profile-offer-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--soft-shadow);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}

.profile-offer-card:hover,
.profile-offer-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.profile-offer-card-price{
  margin:8px 0 0;
  font-size:17px;
  font-weight:800;
  color:var(--teal-dark);
}

/* Shown only when no single price can lead (several price units) —
   the full list instead of an invented headline. */
.profile-offer-card-prices{
  margin:8px 0 0;
  padding-left:18px;
  font-size:14px;
  color:var(--teal-dark);
}

.profile-offer-card-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:20px 22px 22px;
}

.profile-offer-card h3{margin:0;font-size:18px;color:var(--teal-dark);font-weight:800}
.profile-offer-card p{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}

.profile-offer-search{
  margin:0 0 18px;
}

.profile-offer-search input{
  width:100%;
  max-width:420px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:14.5px;
}

.profile-offer-empty{display:none}

.profile-offer-meta{font-size:14px !important}
.profile-offer-meta strong{color:var(--teal-dark)}

.profile-offer-prices{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.profile-offer-prices li{
  background:#eef8f8;
  color:var(--teal-dark);
  font-weight:700;
  font-size:13px;
  padding:6px 14px;
  border-radius:999px;
}

.profile-accessibility-photo img{
  max-width:90px;
  max-height:90px;
  border-radius:10px;
  margin:6px 6px 0 0;
  object-fit:cover;
}

/* "View menu" — Food, Dining & Bars offer menu-page gallery (see the
   category-specific-offer-fields task). Same details/summary reveal
   pattern as "View full accessibility details" above; each page links
   to its own full-size image via the same public media route the card
   image itself already uses. */
.profile-offer-menu{margin-top:14px}
.profile-offer-menu summary{cursor:pointer}

.profile-menu-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
  margin-top:12px;
}

.profile-menu-photo{
  display:block;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
}

.profile-menu-photo img{
  display:block;
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
}

.profile-menu-photo-caption{
  display:block;
  padding:6px 8px;
  font-size:12.5px;
  color:var(--muted);
  background:#fff;
}

/* Offer detail page — full public media gallery (see the public-
   offer-details-and-booking-request task, item 3): a large primary
   viewer, a thumbnail strip beneath it (image or video), and a simple
   lightbox overlay for enlarging an image. See
   public/assets/js/offer-gallery.js for the (purely presentational)
   thumb-switching/lightbox behaviour. */
.offer-gallery{margin-bottom:18px}

.offer-gallery-viewer{
  border-radius:18px;
  overflow:hidden;
  background:#000;
  aspect-ratio:16 / 10;
}

.offer-gallery-viewer img,
.offer-gallery-viewer video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  cursor:zoom-in;
  background:#000;
}

.offer-gallery-viewer video{cursor:default}

.offer-gallery-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:8px;
  margin-top:10px;
}

.offer-gallery-thumb{
  position:relative;
  display:block;
  padding:0;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:1 / 1;
  background:none;
}

.offer-gallery-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.offer-gallery-thumb.active{border-color:var(--teal)}

.offer-gallery-thumb--video::after{
  content:"▶";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
  background:rgba(0,0,0,.35);
}

.offer-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  z-index:1000;
}

/* The class rule above and the browser's own [hidden] rule have equal
   specificity, so display:flex was winning regardless of the hidden
   attribute/property — permanently darkening the page with the
   backdrop stuck open (see the offer-page-overlay-bug task). This
   attribute+class selector is strictly more specific, so it always
   wins over the display:flex rule above whenever hidden is set. */
.offer-lightbox[hidden]{display:none}

.offer-lightbox-content img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 64px);
  margin:0 auto;
  border-radius:8px;
}

.offer-lightbox-close{
  position:absolute;
  top:16px;
  right:20px;
  background:none;
  border:none;
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}

[data-lightbox-open]{cursor:zoom-in}

/* Accommodation Offer detail page — hotel-room layout (see the
   accommodation-offer-detail-ux-polish task). Each named section
   (About this room, Amenities, Accessibility, Seasonal pricing,
   Transfers) gets consistent vertical rhythm and a heading, only ever
   rendered when that section actually has data. */
.room-section{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.room-section h2{
  margin:0 0 10px;
  font-size:19px;
  color:var(--teal-dark);
}

/* Room amenities — a clean icon grid instead of a comma-separated
   paragraph (item 3). Desktop: multi-column; mobile: compact 2-column. */
.room-amenity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px 16px;
}

.room-amenity-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  color:var(--teal-dark);
}

.room-amenity-icon{
  flex:0 0 auto;
  width:24px;
  height:24px;
  color:var(--teal);
}

.room-amenity-icon svg{display:block; width:100%; height:100%}

.room-amenity-other{
  margin-top:14px;
  font-size:13.5px;
  color:var(--muted);
}

@media (max-width:480px){
  .room-amenity-grid{grid-template-columns:repeat(2, 1fr)}
}

/* Full structured room accessibility list (item 4/5) — one row per
   feature: icon, label, status/measurement value, optional notes, and
   a photo slot (a real thumbnail opening the shared lightbox, or a
   neutral "No photo provided" placeholder — never a broken image). */
.access-feature-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
}

.access-feature-item{
  display:grid;
  grid-template-columns:28px 1fr 64px;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.access-feature-icon{
  width:24px;
  height:24px;
  color:var(--teal);
}

.access-feature-icon svg{display:block; width:100%; height:100%}

.access-feature-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.access-feature-label{font-weight:700; color:var(--teal-dark); font-size:14.5px}

.access-feature-value{font-size:13.5px; color:var(--muted)}
.access-feature-value--yes{color:#1f7a4d}
.access-feature-value--no{color:var(--muted)}
.access-feature-value--partial{color:#8a5a12}
.access-feature-value--unknown{color:#8a5a12}
.access-feature-value--na{color:var(--muted); font-style:italic}

.access-feature-notes{font-size:12.5px; color:var(--muted); font-style:italic}

.access-feature-photo{
  width:56px;
  height:56px;
  border-radius:10px;
  overflow:hidden;
}

.access-feature-photo-btn{
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:none;
  cursor:zoom-in;
}

.access-feature-photo-btn img{display:block; width:100%; height:100%; object-fit:cover}

.access-feature-photo-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:#f1f3f2;
  color:var(--muted);
  border-radius:10px;
}

.access-feature-photo-placeholder svg{width:18px; height:18px}
.access-feature-photo-placeholder span{font-size:8px; line-height:1.1; text-align:center}

@media (max-width:480px){
  .access-feature-item{grid-template-columns:24px 1fr; grid-template-areas:"icon body" "photo photo"}
  .access-feature-icon{grid-area:icon}
  .access-feature-body{grid-area:body}
  .access-feature-photo{grid-area:photo; width:100%; height:120px; margin-top:8px}
}

/* "Request to book" card — presentation polish only (item 7); the
   form's own fields/validation/action are completely unchanged. */
.booking-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px 28px 30px;
  box-shadow:var(--soft-shadow);
  max-width:640px;
}

.booking-card h2{margin:0 0 8px; color:var(--teal-dark)}

.booking-card-intro{
  margin:0 0 4px;
  color:var(--muted);
  font-size:14.5px;
}

.booking-card-disclaimer{
  margin:0 0 18px;
  color:var(--teal-dark);
  font-size:13.5px;
}

/* The shared .review-form styling already draws its own card
   (background/border/shadow) — avoid a redundant nested-card look now
   that it renders inside .booking-card above; every other user of
   .review-form (e.g. the public "Leave feedback" form) is completely
   unaffected since this only applies inside .booking-card. */
.booking-card .review-form{
  border:none;
  box-shadow:none;
  padding:0;
  margin-top:0;
}

.booking-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px;
}

.booking-form-field--full{grid-column:1 / -1}

@media (max-width:560px){
  .booking-form-grid{grid-template-columns:1fr}
}

.booking-form-cta{
  width:100%;
  font-size:16px;
  padding-top:16px;
  padding-bottom:16px;
}

.profile-accessible-units{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.profile-accessible-unit h4{
  margin:0;
  font-size:14.5px;
  color:var(--teal-dark);
}

.profile-accessible-unit p{
  margin:4px 0 0;
}

.profile-disclaimer{
  max-width:var(--max);
  margin:0 auto 60px;
  padding:0 20px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

/* "Care Collective partners" live preview — partners-community*.html
   (see public/assets/js/partner-preview.js). Reuses .directory-grid/
   .directory-card exactly as rendered by the PHP directory, so a card
   looks identical everywhere it appears. */

.live-partners-loading,
.live-partners-empty{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  text-align:center;
  color:var(--muted);
  font-size:15px;
}

.live-partners-actions{
  margin-top:22px;
  text-align:center;
}

/* "Partners in this category" mini-cards — inside each expanded
   category panel on partners-community*.html (see
   public/assets/js/partner-preview.js). Deliberately smaller/more
   compact than .directory-grid/.directory-card above: an image, name
   and city/region only, no description/tags/CTA text. */

.mini-partners-title{
  margin:18px 0 10px;
  font-size:13px;
  font-weight:800;
  color:var(--teal-dark);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.mini-partner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.mini-partner-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}

.mini-partner-card:hover,
.mini-partner-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--soft-shadow);
}

.mini-partner-card-image{
  display:block;
  aspect-ratio:4 / 3;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  overflow:hidden;
}

.mini-partner-card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.mini-partner-card-image--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-partner-card-image--placeholder svg{width:24px;height:24px}

.mini-partner-card-body{
  display:block;
  padding:8px 10px 10px;
}

.mini-partner-card-name{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--teal-dark);
  line-height:1.3;
}

.mini-partner-card-location{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  color:var(--muted);
}

.mini-partners-more{margin:0 0 4px}

@media (max-width:400px){
  .mini-partner-grid{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:340px){
  .mini-partner-grid{grid-template-columns:1fr}
}

/* Consumer feedback & reviews (see PublicAccessibilityPresenter's
   sibling feature — BACKEND_MASTER_SPEC.md section 23, consumer
   feedback Phase 1). */

.profile-flash-wrap{padding-top:20px}

.flash{
  margin:0 0 20px;
  padding:16px 20px;
  border-radius:18px;
  font-size:15px;
  line-height:1.5;
  border:1px solid var(--line);
}

.flash-success{
  background:#eef8f4;
  border-color:#bfe4d2;
  color:var(--teal-dark);
}

.flash-error{
  background:#fdf1ee;
  border-color:#f0c9bd;
  color:#a3402a;
}

.profile-reviews{padding-top:0}

.profile-reviews-empty{
  color:var(--muted);
  margin:0 0 20px;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
  margin-bottom:26px;
}

.review-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:var(--soft-shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.review-card-stars{
  color:var(--gold);
  font-size:18px;
  letter-spacing:2px;
}

.review-card-text{
  margin:0;
  color:var(--teal-dark);
  font-size:14.5px;
  line-height:1.55;
}

.review-card-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.review-card-badge{
  align-self:flex-start;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
}

.review-card-badge--unverified{background:#eef2f2;color:var(--muted)}
.review-card-badge--verified{background:#e3f6f6;color:var(--teal-dark)}

.review-form-toggle{margin-top:4px}

.review-form-toggle summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  list-style:none;
}

.review-form-toggle summary::-webkit-details-marker{display:none}
.review-form-toggle summary::marker{content:""}

.review-form{
  max-width:560px;
  margin-top:18px;
  padding:22px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.review-form label{
  font-size:13.5px;
  font-weight:700;
  color:var(--teal-dark);
  margin-top:12px;
}

/* Every input type the booking forms actually use. Before, only
   email/text/textarea/select were styled, so the phone, number, date
   and time fields rendered as bare browser boxes
   (docs/booking-test/MOBILE_FINDINGS.md MF3). The date and time ones
   are usually replaced by the picker, but they remain the fallback
   without JavaScript and must not look broken there either. */
.review-form input[type="email"],
.review-form input[type="text"],
.review-form input[type="tel"],
.review-form input[type="number"],
.review-form input[type="date"],
.review-form input[type="time"],
.review-form textarea,
.review-form select{
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:14.5px;
  font-family:inherit;
  color:var(--teal-dark);
}

.review-form textarea{resize:vertical;min-height:96px}

/* ---- Collapsible detail sections on the public pages -------------
   Native <details>/<summary>, closed by default, so a phone shows the
   name, place, price and the request action without first scrolling
   past opening hours and accessibility tables. */
.public-accordion{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  margin-top:10px;
}

.public-accordion > summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
  color:var(--teal-dark);
}

.public-accordion > summary::-webkit-details-marker{display:none}
.public-accordion > summary::marker{content:""}

/* A clear open/closed indicator that is not colour alone. */
.public-accordion > summary::after{
  content:"+";
  font-size:20px;
  line-height:1;
  color:var(--teal);
}

.public-accordion[open] > summary::after{content:"–"}

.public-accordion > summary:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:-2px;
  border-radius:14px;
}

.public-accordion-body{padding:0 16px 16px}

/* ---- Opening hours: one weekday per row -------------------------- */
.opening-hours{margin:0;display:grid;gap:2px}

.opening-hours-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
}

.opening-hours-row:last-child{border-bottom:0}
.opening-hours dt{font-weight:600;color:var(--teal-dark)}
.opening-hours dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.opening-hours-closed{color:var(--muted)}

/* ---- Choosing between several locations -------------------------- */
.location-chooser{
  border:0;
  padding:0;
  margin:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.location-chooser legend{
  padding:0;
  margin-bottom:8px;
  font-weight:700;
  color:var(--teal-dark);
}

/* The radio itself stays in the accessibility tree and keeps keyboard
   behaviour — it is only visually replaced by its label. */
.location-radio{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.location-radio-label{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--teal-dark);
  font-weight:600;
  cursor:pointer;
}

.location-radio:checked + .location-radio-label{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}

.location-radio:focus-visible + .location-radio-label{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

.location-name{margin:0 0 6px}
.location-panel-address{margin:0 0 4px}
.location-panel-place{display:block;color:var(--muted)}

/* The headline price: next to the title on an offer page, and leading
   the offer card. Deliberately prominent — it was previously buried
   below the description, or missing from the detail page entirely. */
.offer-headline-price{
  margin:10px 0 0;
  font-size:22px;
  font-weight:800;
  color:var(--teal-dark);
}

.booking-form-cta-price{font-weight:800}
.booking-form-cta-sep{opacity:.65}

@media (max-width:560px){
  .offer-headline-price{font-size:20px}
  /* The price and the action stack rather than squeezing onto one
     cramped line, and nothing is hidden behind them. */
  .booking-form-cta{line-height:1.4}
  .booking-form-cta-sep{display:none}
  .booking-form-cta-price{display:block}
}

/* A rejected field and its reason. Same class names the Partner portal
   already uses, so the two look and behave alike. The message is
   referenced by the field's aria-describedby, so a screen reader reads
   it together with the field. */
.review-form .input-error{
  border-color:#b3261e;
  background:#fff8f7;
}

.review-form .input-error:focus-visible{
  outline:2px solid #b3261e;
  outline-offset:2px;
}

.field-error{
  margin:6px 0 0;
  color:#b3261e;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}

/* Every rejected field in one place, above the form, each entry a link
   straight to the box that needs attention. */
.booking-error-summary{
  margin-top:12px;
  padding:14px 16px;
  border:1px solid #f0c4c0;
  border-left:4px solid #b3261e;
  border-radius:12px;
  background:#fff8f7;
}

.booking-error-summary-title{
  margin:0 0 8px;
  font-weight:700;
  color:#b3261e;
}

.booking-error-summary ul{margin:0;padding-left:20px}
.booking-error-summary li{margin:4px 0}
.booking-error-summary a{color:#b3261e}

.booking-reference{
  margin:10px 0 0;
  font-size:16px;
}

.booking-reference strong{
  display:inline-block;
  margin-left:6px;
  padding:2px 10px;
  border-radius:8px;
  background:#e3f6f6;
  color:var(--teal-dark);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}

/* The "how many people" stepper (src/components/public/people-count.tsx).
   The buttons are a comfortable 48px touch target on a phone; the input
   keeps its own min/max so typing and the buttons agree. */
.people-count{
  display:flex;
  align-items:stretch;
  gap:8px;
  max-width:200px;
}

.people-count-step{
  flex:0 0 48px;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--teal-dark);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.people-count-step:hover{background:#f3fafa}
.people-count-step:active{background:#e3f6f6}

.review-form .people-count-input{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  text-align:center;
  /* Keeps the native spinner out of the way — the buttons replace it —
     while arrow keys and typing still work. */
  -moz-appearance:textfield;
  appearance:textfield;
}

.review-form .people-count-input::-webkit-outer-spin-button,
.review-form .people-count-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.review-form .people-count-hint{margin-top:6px}

.field-hint{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.review-form .field-hint{margin:4px 0 0;font-size:12.5px}

.review-form .btn{margin-top:18px;align-self:flex-start}

.star-rating-input{border:0;padding:0;margin:0 0 6px}

.star-rating-input legend{
  font-size:13.5px;
  font-weight:700;
  color:var(--teal-dark);
  padding:0;
}

.star-rating-stars{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:4px;
  margin-top:4px;
}

.star-rating-stars input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
}

.star-rating-stars label{
  font-size:30px;
  line-height:1;
  color:#dfe3e2;
  cursor:pointer;
  padding:4px;
  border-radius:8px;
  transition:color .1s ease;
}

.star-rating-stars input:checked ~ label,
.star-rating-stars input:checked ~ label ~ label,
.star-rating-stars label:hover,
.star-rating-stars label:hover ~ label{
  color:var(--gold);
}

.star-rating-stars input:focus-visible + label{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

@media (max-width:760px){
  .directory-search-form{flex-direction:column;align-items:stretch}
  .directory-search-form input[type="search"],
  .directory-search-form select,
  .directory-search-form button,
  .directory-search-form a{width:100%}
  /* Once the form is a COLUMN the main axis is vertical, so the
     `flex:1 1 280px` written for the horizontal layout set the search
     field's HEIGHT to 280px and let it grow further — a single-line
     input rendered as a screen-filling lozenge on every phone. The
     selects, button and link were given width:100% here; the search
     field was missed. Reset its flex shorthand so it keeps its own
     48px line height. Scoped to this form on purpose — no global
     input rule. */
  .directory-search-form input[type="search"]{flex:0 0 auto}

  .profile-location-grid{grid-template-columns:1fr}
  .profile-location-card{padding:18px}
  .access-item{align-items:flex-start}
  .access-item-label{flex-basis:100%}

  .review-form{padding:18px;max-width:100%}
  .star-rating-stars label{font-size:34px;padding:6px}
}

/* Outcome of an email-booking submission, shown inside the request
   section where the customer lands after submitting (#request-feedback)
   instead of at the top of the page
   (docs/booking-test/MOBILE_FINDINGS.md, MF1). */
.booking-feedback{
  margin:18px 0 6px;
  scroll-margin-top:110px;
}

.booking-feedback:focus{
  outline:none;
}

.booking-feedback .flash{
  margin:0 0 14px;
}

.booking-feedback-hint{
  margin:0 0 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}