/**
 * css/rparties.css
 * Roller Parties: the live site's party page look, ported.
 *
 * WHY A FILE OF ITS OWN, rather than a journey theme or additions to
 * newapp.css. This route is a stopgap that is expected to be withdrawn, and the
 * brief is "very very similar to the current live page", not "consistent with
 * the new app". Those two pull in opposite directions, so its styling is kept
 * where it can be deleted in one move along with the rest of rparties/.
 *
 * The route carries no journey THEME, so none of the new journey's component
 * skinning (blue card borders, blue buttons, the step pills) reaches it. The
 * live page has its own look, gold and near-black on photographic room panels,
 * and dressing it in the new journey's skin would make it resemble neither the
 * thing it replaces nor the thing it precedes.
 *
 * The BACKGROUND is the deliberate exception, added 2026-09-14 on request: the
 * same orange as the new Parties journey, so both party routes sit on one
 * colour. Only the ground is shared, not the furniture on it.
 *
 * PORTED, not re-designed. Every rule below is taken from the inline <style>
 * block in the live site's src/sections/parties.php (see
 * C:\VSCodeRepos\4kphotolivetemp), keeping its class names so the two can be
 * compared side by side. Values are the live ones, not approximations. The one
 * intentional difference is that the live page's `.logotopcorner` and `#menu`
 * overrides are dropped: those exist to fight the old site's own chrome, which
 * this app does not have.
 *
 * NOTE for anyone tidying later: theme-parties.css carries its own ported copy
 * of the same room-panel/ticket-row CSS under na-cabin-* names, for the NEW
 * journey's cabin picker. They look alike because they came from the same
 * original. They are deliberately not shared: one is a stopgap that will be
 * deleted, the other is the real journey, and coupling them would mean the
 * deletion breaks the survivor.
 */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;800;900&display=swap');

/* ── The orange ground ──────────────────────────────────────────────────────
   Matches the new Parties journey (#FC9B13, theme-parties.css) by request, so
   the two party routes sit on the same colour even though everything above the
   background differs.

   Styled on `body` DIRECTLY, with no theme class, which is safe only because
   this stylesheet ships on one page: rparties/index.php loads it itself rather
   than the shared head loading it everywhere. The route is otherwise unthemed on
   purpose, so there is no theme-rparties class to hang this on.

   --bs-body-bg is rebound as well as `background` set. Bootstrap 5.3 repaints
   surfaces from that variable for itself, and setting only `background` left
   white showing through wherever it did. That cost an afternoon on the Parties
   theme; the fix is recorded here so it is not rediscovered a third time. The
   panels and rows below keep their own explicit backgrounds, so none of them
   picks up the orange. */
html {
  background: #FC9B13;
}
body {
  background: #FC9B13;
  --bs-body-bg: #FC9B13;
  --bs-body-bg-rgb: 252, 155, 19;
  min-height: 100vh;
}
/* Panels that must stay white, re-pinned so rebinding the variable above cannot
   tint them. Same belt-and-braces as theme-parties.css. */
.modal-content,
.dropdown-menu,
.list-group-item {
  --bs-body-bg: #fff;
  background-color: #fff;
}

.party-page {
  font-family: 'Lato', sans-serif;
  padding: 1rem 1rem 3rem;
  width: 80%;
  margin: 0 auto;
  color: #1a1a1a;
  /* NO position/z-index here, unlike the live page.
     The live rule was `position: relative; z-index: 1`, paired with a
     `#menu { z-index: 2 }` to keep the old site's chrome above the page. That
     chrome does not exist here, and the pairing was already dropped; keeping
     half of it created a STACKING CONTEXT that the Bootstrap modal could not
     escape, so its backdrop (z-index 1050) covered the dialog and the whole
     screen greyed out with nothing clickable. The live page never hit this
     because its confirmation was a hand-rolled fixed-position overlay, not a
     Bootstrap modal. */
}

.party-page .step-header { margin-bottom: 1.25rem; }
.party-page .step-header h4 { font-weight: 800; margin-bottom: .15rem; }
.party-page .step-header p { color: #666; font-size: .9rem; margin-bottom: 0; }

/* ── Date nav ── */
.party-date-nav {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-bottom: .75rem;
}
.party-nav-btn {
  flex-shrink: 0;
  width: 44px;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #555;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.party-nav-btn:hover:not(:disabled) { border-color: #d4af37; color: #a88820; background: #fffbe8; }
.party-nav-btn:disabled { opacity: .3; cursor: not-allowed; }

.party-date-group { flex: 1; display: flex; gap: .4rem; min-width: 0; align-items: stretch; }
.party-date-btn {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1.5px solid #ddd;
  color: #555;
  font-family: 'Lato', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  padding: .5rem .4rem;
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
/* Weekends are bigger and gold-edged: most parties are on one, so they are the
   thing the eye should land on first. Straight from the live page. */
.party-date-btn.is-weekend {
  flex: 1.4;
  font-size: 1rem;
  padding: .7rem .5rem;
  border-color: #c8a82a;
  color: #7a6010;
}
.party-date-btn:hover:not(.active) { border-color: #d4af37; color: #a88820; }
.party-date-btn.active {
  background: #d4af37;
  border-color: #d4af37;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(212, 175, 55, .35);
}

/* ── Exact-date picker ── */
.party-date-input-wrap { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.party-date-input-wrap label { font-size: .82rem; color: #888; white-space: nowrap; }
.party-date-input-wrap input[type="date"] {
  background: #fff;
  border: 1.5px solid #ddd;
  color: #1a1a1a;
  font-family: 'Lato', sans-serif;
  font-size: .82rem;
  padding: .32rem .6rem;
  border-radius: 8px;
  cursor: pointer;
}
.party-date-input-wrap input[type="date"]:focus { outline: none; border-color: #d4af37; }

/* ── Loading ── */
.party-loading {
  text-align: center;
  color: #666;
  font-size: .9rem;
  padding: .6rem 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.party-loading.is-on { display: flex; }
.ptr-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid #ddd;
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: ptr-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ── Room group panel ── */
.room-panel {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
  margin-bottom: 1.75rem;
  background: #2a2a2a;
  background-size: cover;
  background-position: center;
  position: relative;
  border: 3px solid #d4af37;
}
/* No overlay: the photo fills the panel and the rows are solid cards on top. */
.room-panel-overlay {
  background: none;
  padding: 1rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.party-panel-title {
  align-self: flex-start;
  background: rgba(255, 255, 255, .93);
  color: #1a1a1a;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: .01em;
  padding: .45rem 1.3rem;
  border-radius: 30px;
  border: none;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
  margin-bottom: 4.5rem;   /* holds the title clear of the rows so the photo shows */
}

/* ── Package rows inside a panel ──
   Image small, name compact, sessions get the most room: the times are what the
   customer came to read. */
.ptr-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) minmax(0, 2.5fr);
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  min-height: 80px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
}
.ptr-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem;
  background: rgba(240, 240, 240, .8);
}
.ptr-img img {
  width: 132px;
  height: 99px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .08);
  flex-shrink: 0;
}
.ptr-img .ptr-no-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f0ecd8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a88820;
  font-size: 2.4rem;
}
.ptr-info {
  padding: .6rem .75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  background: rgba(255, 255, 255, .8);
  border-left: 1px solid rgba(0, 0, 0, .07);
  min-width: 0;
  cursor: default;
}
.ptr-name { font-size: 1.056rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; white-space: normal; word-break: break-word; }
.ptr-desc { font-size: .75rem; color: #444; line-height: 1.35; white-space: normal; word-break: break-word; cursor: help; }
.ptr-sessions {
  padding: .7rem .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  background: rgba(248, 248, 248, .8);
  border-left: 1px solid rgba(0, 0, 0, .07);
  min-height: 80px;
  min-width: 0;
}
.ptr-sessions-empty { font-size: .82rem; color: #888; font-style: italic; }

/* ── Session pills ── */
.party-session-btn {
  background: #1a1a1a;
  border: 1.5px solid #333;
  border-radius: 24px;
  padding: .55rem 1.2rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.party-session-btn:hover { background: #333; border-color: #d4af37; transform: translateY(-1px); }
.party-session-btn .sess-time { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.party-session-btn .sess-hire { font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .75); line-height: 1.2; }
.party-session-btn .sess-eat  { font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .7); line-height: 1.2; }
.party-session-btn .sess-cap  { font-size: .75rem; color: rgba(255, 255, 255, .6); margin-top: .1rem; }
.party-session-btn.sold-out {
  background: #ccc;
  border-color: #bbb;
  color: #888;
  cursor: not-allowed;
  transform: none !important;
}
.party-session-btn.sold-out .sess-cap { color: #aaa; }

/* ── "Call us" notice, for dates inside the notice period ── */
.party-call-notice {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  background: rgba(212, 175, 55, .15);
  border: 1.5px solid rgba(212, 175, 55, .5);
  color: #444;
  border-radius: 8px;
  padding: .5rem 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── Tablet ── */
@media (max-width: 860px) {
  .party-page { width: 94%; }
  .ptr-row { grid-template-columns: 110px minmax(0, 1fr); }
  .ptr-sessions { grid-column: 1 / -1; border-left: none; border-top: 1px solid rgba(0, 0, 0, .07); }
  .ptr-img img { width: 96px; height: 72px; }
  .party-panel-title { margin-bottom: 2.5rem; font-size: 1.2rem; }
}

/* ── Phone ── */
@media (max-width: 640px) {
  .party-page { width: 98%; padding: .75rem .6rem 3rem; }
  .party-date-btn { padding: .55rem .2rem; font-size: .72rem; border-radius: 14px; }
  .party-date-btn.is-weekend { font-size: .82rem; padding: .65rem .25rem; }
  .party-session-btn { padding: .4rem .75rem; font-size: .82rem; min-height: 44px; }
  .party-session-btn .sess-cap { font-size: .68rem; }
  .ptr-row { grid-template-columns: 1fr; }
  .ptr-img { display: none; }   /* the photo is on the panel behind; the row needs the width more */
  .ptr-info { border-left: none; }
}

@media (max-width: 400px) {
  .party-page { padding: .5rem .4rem 3rem; }
  .party-date-btn { font-size: .65rem; padding: .5rem .1rem; border-radius: 12px; }
  .party-date-btn.is-weekend { font-size: .75rem; padding: .6rem .15rem; }
  .party-nav-btn { width: 40px; min-width: 40px; font-size: 1.4rem; }
  .party-panel-title { font-size: 1rem; margin-bottom: 1.5rem; }
  .party-session-btn { padding: .38rem .65rem; font-size: .78rem; min-height: 44px; }
}