/* ===========================================================================
   The public property page (Views/Pages/property.php).

   Its own stylesheet rather than more rules in style.css: this page is one
   screen with one job, and everything here is prefixed .pp so it cannot reach
   into the rest of the theme or be reached by it.

   Sizes follow the product's floor — 16px body text, nothing below it — so the
   page is readable on a phone held at arm's length, which is where most people
   choose a hotel.
   =========================================================================== */

.pp {
    --pp-navy: #002d77;
    --pp-green: #1e7a38;
    --pp-line: #e3e7f0;
    --pp-muted: #6b7280;
    --pp-bg: #f7f8fb;
    font-size: 16px;
    color: #24324b;
    line-height: 1.6;
    padding-bottom: 60px;
}

.pp__wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.pp__h2 { font-size: 26px; font-weight: 700; color: var(--pp-navy); margin: 38px 0 14px; }
.pp__h3 { font-size: 18px; font-weight: 700; color: var(--pp-navy); margin: 0 0 8px; }
.pp__body { font-size: 16px; margin: 0 0 12px; }

/* ---- header -------------------------------------------------------------- */
.pp__head { padding: 26px 0 10px; }
.pp__headrow { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; }
.pp__stars { color: #f0a500; font-size: 18px; letter-spacing: 2px; }
.pp__name { font-size: 34px; font-weight: 800; color: var(--pp-navy); margin: 2px 0 6px; }
.pp__headline { font-size: 18px; color: var(--pp-muted); margin: 0 0 8px; }
.pp__address { font-size: 16px; margin: 0; }
.pp__maplink { color: var(--pp-navy); font-weight: 600; margin-left: 8px; text-decoration: underline; }
.pp__headside { display: flex; align-items: center; gap: 14px; }

.pp__score { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.pp__scorenum {
    background: var(--pp-navy); color: #fff; font-weight: 700; font-size: 18px;
    border-radius: 8px 8px 8px 0; padding: 6px 10px; min-width: 44px; text-align: center;
}
.pp__scorenum--big { font-size: 26px; padding: 10px 14px; }
.pp__scoretext b { display: block; font-size: 16px; }
.pp__scoretext small { display: block; font-size: 16px; color: var(--pp-muted); }

.pp__btn {
    display: inline-block; border: 1px solid var(--pp-line); background: #fff; color: var(--pp-navy);
    border-radius: 8px; padding: 11px 22px; font-size: 16px; font-weight: 700; cursor: pointer;
    text-decoration: none; line-height: 1.3;
}
.pp__btn--primary { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }
.pp__btn--primary:hover { background: #00204f; color: #fff; }
.pp__btn--sm { padding: 8px 16px; }

/* ---- sticky sub-nav ------------------------------------------------------ */
.pp__nav {
    position: sticky; top: 0; z-index: 40; background: #fff;
    border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); margin-top: 14px;
}
.pp__navrow { display: flex; align-items: center; gap: 22px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; }
/* :not(.pp__btn) matters — the row's own link colour is navy, and the Reserve
   button in the same row is navy-on-navy without it. */
.pp__navrow a:not(.pp__btn) { font-size: 16px; font-weight: 600; color: var(--pp-navy); text-decoration: none; white-space: nowrap; }
.pp__navrow a:not(.pp__btn):hover { text-decoration: underline; }
.pp__navspacer { flex: 1 1 auto; }
.pp__navprice { font-size: 16px; color: var(--pp-muted); white-space: nowrap; }
.pp__navprice b { color: var(--pp-navy); font-size: 18px; }
.pp__navprice small { display: block; font-size: 16px; }
.pp__navrow .pp__btn { text-decoration: none; }

/* ---- gallery ------------------------------------------------------------- */
/* The mosaic only works when there is a mosaic's worth of photos. With one,
   two or three it falls back to an even row rather than leaving holes where
   the missing shots would have been. */
.pp__gallery {
    display: grid; gap: 8px; margin-top: 18px;
    grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 150px;
}
.pp__gallery--4 .pp__shot:first-child,
.pp__gallery--5 .pp__shot:first-child { grid-row: span 2; }
.pp__gallery--1 { grid-template-columns: 1fr; grid-auto-rows: 360px; }
.pp__gallery--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 300px; }
.pp__gallery--3 { grid-template-columns: 2fr 1fr; grid-auto-rows: 146px; }
.pp__gallery--3 .pp__shot:first-child { grid-row: span 2; }
.pp__shot {
    position: relative; padding: 0; border: 0; background: #0f172a; cursor: pointer;
    border-radius: 8px; overflow: hidden;
}
.pp__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp__more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .55); color: #fff; font-size: 16px; font-weight: 700;
}

.pp__lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, .92);
    align-items: center; justify-content: center; gap: 14px;
}
.pp__lightbox img { max-width: 84vw; max-height: 86vh; object-fit: contain; }
.pp__lightbox button {
    background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 8px;
    width: 46px; height: 46px; font-size: 26px; cursor: pointer; line-height: 1;
}
.pp__lbclose { position: absolute; top: 20px; right: 20px; }

/* ---- description + nearby ------------------------------------------------ */
.pp__cols { display: flex; gap: 34px; flex-wrap: wrap; }
.pp__col { flex: 1 1 520px; min-width: 0; }
.pp__side { flex: 0 1 300px; background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: 10px; padding: 18px 20px; margin-top: 38px; }
.pp__nearby { list-style: none; margin: 0; padding: 0; }
.pp__nearby li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--pp-line); font-size: 16px; }
.pp__nearby li:last-child { border-bottom: 0; }
.pp__highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pp__chip { background: #eef3fd; color: var(--pp-navy); border-radius: 16px; padding: 5px 14px; font-size: 16px; font-weight: 600; }

/* ---- availability -------------------------------------------------------- */
.pp__search {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    background: var(--pp-navy); border-radius: 10px; padding: 16px 18px;
}
.pp__search label { display: flex; flex-direction: column; gap: 4px; color: #fff; font-size: 16px; font-weight: 600; }
.pp__search input {
    border: 0; border-radius: 6px; padding: 9px 12px; font-size: 16px; min-width: 150px; color: #24324b;
}
.pp__search .pp__btn { background: #28a745; border-color: #28a745; color: #fff; }
.pp__search .pp__btn:hover { background: #23913e; }
.pp__stayline { font-size: 16px; color: var(--pp-muted); margin: 10px 0 16px; }
.pp__empty {
    background: #fff8e6; border: 1px solid #f2dfae; border-radius: 8px;
    padding: 16px 18px; font-size: 16px; color: #7a5c12;
}

/* "Nothing available" is the one answer a guest cannot act on, so it is given
   the room to say which dates, why, and what to press next. */
.pp__noavail {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff8e6; border: 1px solid #f2dfae; border-radius: 10px;
    padding: 20px 22px; color: #7a5c12;
}
.pp__noavail-mark {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    background: #e0a800; color: #fff; font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.pp__noavail-body { min-width: 0; }
.pp__noavail-head { display: block; font-size: 19px; color: #6b4f0d; margin-bottom: 4px; }
.pp__noavail-sub { margin: 0; font-size: 16px; line-height: 1.5; }
.pp__noavail-next { margin: 10px 0 12px; font-size: 16px; line-height: 1.5; }
.pp__noavail .pp__btn { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }

/* While a search is running the old answer is still on screen; dimming it says
   the figures below are the previous search's, not this one's. */
#pp-results.pp--busy { opacity: .45; transition: opacity .12s ease; pointer-events: none; }
.pp__searching {
    display: none; align-items: center; gap: 9px;
    margin: 10px 0 0; font-size: 16px; color: var(--pp-muted);
}
.pp__searching.pp--on { display: flex; }
.pp__spin {
    width: 15px; height: 15px; border: 2px solid #c9d4e8; border-top-color: var(--pp-navy);
    border-radius: 50%; animation: pp-spin .7s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pp__spin { animation: none; } }

.pp__tablewrap { overflow-x: auto; border: 1px solid var(--pp-line); border-radius: 10px; }
.pp__table { width: 100%; border-collapse: collapse; min-width: 900px; background: #fff; }
/* Dark header, as on the booking sites guests arrive from: it holds the column
   labels apart from the room blocks under it, which carry their own boxes. */
.pp__table th {
    background: var(--pp-navy); color: #fff; text-align: left; font-size: 16px; font-weight: 700;
    padding: 12px 14px; border-bottom: 1px solid var(--pp-line);
}
.pp__table td { padding: 14px; border-bottom: 1px solid var(--pp-line); vertical-align: top; font-size: 16px; }
.pp__rowfirst td { border-top: 2px solid var(--pp-line); }
.pp__rowpicked .pp__cell--room { background: #f5f9ff; }

/* Icons sit slightly below the cap height of the line they label, which is
   where a 16px glyph reads as part of the sentence rather than above it. */
.pp__ico { vertical-align: -3px; margin-right: 6px; }

.pp__cell--room { width: 330px; }
.pp__thumb { width: 100%; max-width: 290px; height: 150px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 8px; }
/* The name is a link to this room's own view of the page, so it is styled as
   one. --plain is for the part-stay table, where it is a heading only. */
.pp__roomname { display: block; font-size: 18px; font-weight: 700; color: #0057b8; text-decoration: underline; }
.pp__roomname:hover { color: #003d87; }
.pp__roomname--plain { color: var(--pp-navy); text-decoration: none; }
.pp__roommeta { display: block; font-size: 16px; color: #4b5563; }
.pp__left { display: block; margin: 6px 0 2px; color: #b02a37; font-size: 16px; font-weight: 700; }

/* Who the room sleeps and what it sleeps them in — the two facts that used to
   need a column of their own, now read in the room's own block. */
.pp__sleeps { display: block; font-size: 16px; color: #24324b; margin-top: 4px; }
.pp__sleeps .pp__ico { margin-right: 1px; }
.pp__beds { display: block; font-size: 16px; color: #24324b; margin-top: 4px; }

.pp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp__fchip {
    border: 1px solid var(--pp-line); border-radius: 4px; padding: 3px 8px;
    font-size: 14px; color: #24324b; background: #fff; white-space: nowrap;
}
.pp__faclist {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 2px 12px;
}
.pp__faclist li { font-size: 14px; color: #4b5563; padding-left: 16px; position: relative; }
.pp__faclist li::before { content: "✓"; position: absolute; left: 0; color: var(--pp-green); font-weight: 700; }
.pp__facmore { margin-top: 8px; }
.pp__facmore summary { font-size: 14px; color: #0057b8; cursor: pointer; text-decoration: underline; }

.pp__cell--price { width: 190px; white-space: nowrap; }
.pp__cell--price b { display: block; font-size: 22px; color: var(--pp-navy); }
.pp__cell--price small { display: block; font-size: 16px; color: var(--pp-muted); }
.pp__tax { font-size: 14px; }

.pp__cell--choices { min-width: 280px; }
.pp__planname { display: block; font-size: 16px; color: var(--pp-navy); }
.pp__planline { display: block; font-size: 16px; color: #4b5563; }
.pp__good { display: block; font-size: 16px; color: var(--pp-green); font-weight: 600; }
.pp__warn { display: block; font-size: 16px; color: #b02a37; font-weight: 600; }
/* Non-refundable is a term of the rate, not a problem with it, so it is set in
   grey behind a circle-slash instead of alarming the guest in red. */
.pp__norefund { display: block; font-size: 16px; color: #6b7280; font-weight: 600; }
/* A plain bullet for terms that are neither a win nor a warning. */
.pp__bullet { display: block; font-size: 16px; color: #4b5563; position: relative; padding-left: 14px; margin-top: 2px; }
.pp__bullet::before { content: "•"; position: absolute; left: 2px; }

.pp__cell--action { width: 190px; }
/* Full width of its column: the one thing in the row that is meant to be
   pressed should not have to be aimed at. */
.pp__reserve { display: block; text-align: center; }
.pp__reassure { list-style: none; margin: 10px 0 0; padding: 0; }
.pp__reassure li { font-size: 14px; color: #4b5563; position: relative; padding-left: 14px; line-height: 1.45; }
.pp__reassure li::before { content: "•"; position: absolute; left: 2px; }

/* ---- facilities ---------------------------------------------------------- */
.pp__facgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.pp__facgroup ul { list-style: none; margin: 0; padding: 0; }
.pp__facgroup li { font-size: 16px; padding: 4px 0 4px 22px; position: relative; }
.pp__facgroup li::before { content: "✓"; position: absolute; left: 0; color: var(--pp-green); font-weight: 700; }

/* ---- things to do & around the hotel ------------------------------------- */
.pp__aroundgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.pp__aroundgroup { border: 1px solid var(--pp-line); border-radius: 10px; padding: 14px 16px; }
.pp__around { list-style: none; margin: 0; padding: 0; }
.pp__around li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--pp-line); font-size: 16px; }
.pp__around li:last-child { border-bottom: 0; }
.pp__around b { white-space: nowrap; color: var(--pp-navy); font-size: 15px; }

/* ---- house rules --------------------------------------------------------- */
.pp__rules { width: 100%; border-collapse: collapse; border: 1px solid var(--pp-line); border-radius: 10px; }
.pp__rules th {
    text-align: left; width: 220px; padding: 14px; font-size: 16px; font-weight: 700;
    color: var(--pp-navy); background: var(--pp-bg); border-bottom: 1px solid var(--pp-line);
}
.pp__rules td { padding: 14px; font-size: 16px; border-bottom: 1px solid var(--pp-line); }
.pp__rules tr:last-child th, .pp__rules tr:last-child td { border-bottom: 0; }

/* ---- reviews ------------------------------------------------------------- */
.pp__revsummary {
    display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start;
    background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: 10px; padding: 22px 24px;
}
.pp__revscore { text-align: center; }
.pp__revscore b { display: block; font-size: 18px; margin-top: 6px; }
.pp__revscore small { display: block; font-size: 16px; color: var(--pp-muted); }
.pp__revcats { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 26px; }
.pp__revcat { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.pp__revcat > span:first-child { flex: 0 0 130px; }
.pp__bar { flex: 1 1 auto; height: 6px; background: #dfe4ef; border-radius: 4px; overflow: hidden; }
.pp__bar i { display: block; height: 100%; background: var(--pp-navy); }

.pp__revlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 18px; }
.pp__rev { border: 1px solid var(--pp-line); border-radius: 10px; padding: 16px 18px; }
.pp__rev header { display: flex; align-items: center; gap: 10px; }
.pp__rev header b { font-size: 16px; }
.pp__revdate { font-size: 16px; color: var(--pp-muted); flex: 1 1 auto; }
.pp__revnum { background: var(--pp-navy); color: #fff; border-radius: 6px 6px 6px 0; padding: 3px 9px; font-size: 16px; font-weight: 700; }
.pp__rev h4 { font-size: 16px; font-weight: 700; margin: 10px 0 6px; }
.pp__revpos { font-size: 16px; color: var(--pp-green); margin: 0 0 4px; }
.pp__revneg { font-size: 16px; color: #b02a37; margin: 0 0 4px; }
.pp__revreply { font-size: 16px; color: #4b5563; background: var(--pp-bg); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; }

/* ---- faq + map ----------------------------------------------------------- */
.pp__faq details { border: 1px solid var(--pp-line); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.pp__faq summary { font-size: 16px; font-weight: 700; color: var(--pp-navy); cursor: pointer; }
.pp__faq p { font-size: 16px; margin: 10px 0 0; }
.pp__map { width: 100%; height: 380px; border: 1px solid var(--pp-line); border-radius: 10px; }
.pp__contact a { color: var(--pp-navy); font-weight: 700; }

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 767px) {
    .pp__name { font-size: 26px; }
    .pp__gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
    .pp__gallery .pp__shot:first-child { grid-column: span 2; }
    .pp__headside { width: 100%; justify-content: space-between; }
    .pp__search label, .pp__search input { width: 100%; }
    .pp__side { margin-top: 10px; }
}

/* Partial-availability offers (2026-08-19): the section that replaces "no
   rooms" when a shorter stay from the same check-in is still bookable. */
.pp__partialhead { margin: 26px 0 10px; }
.pp__partialnote { margin-top: 6px; line-height: 1.4; }