/* Pause Live Availability — front end
   Every colour, radius and font is a variable in this one block.
   Change them here to match the site theme; nothing below needs editing. */

.pause-avail {
  --pa-accent: #447E72;
  --pa-accent-dark: #3a6c62;
  --pa-accent-tint: #f0f5f4;
  --pa-warm: #6D5036;
  --pa-warm-tint: #f7f4f1;
  --pa-hairline: #e6ded6;
  --pa-ink: #000;
  --pa-body: #2b2b2b;
  --pa-muted: #6a6a6a;
  --pa-paper: #fff;
  --pa-radius-card: 4px 32px 4px 32px;
  --pa-radius-btn: 4px;
  --pa-columns: 3;

  color: var(--pa-body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.pause-avail *,
.pause-avail *::before,
.pause-avail *::after { box-sizing: border-box; }

/* ---- Filters ---- */

.pause-avail-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

.pause-avail .pa-filter {
  appearance: none;
  background: var(--pa-paper);
  border: 1px solid var(--pa-hairline);
  border-radius: 999px;
  color: var(--pa-muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.2px;
  padding: 8px 18px;
  transition: color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1), background .2s cubic-bezier(.4,0,.2,1);
}

.pause-avail .pa-filter:hover { color: var(--pa-accent); border-color: var(--pa-accent); }

.pause-avail .pa-filter.is-on {
  background: var(--pa-accent);
  border-color: var(--pa-accent);
  color: var(--pa-paper);
}

.pause-avail .pa-filter:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(68,126,114,.24); }

/* ---- Grid ---- */

.pause-avail-grid {
  display: grid;
  grid-template-columns: repeat(var(--pa-columns), minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .pause-avail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .pause-avail-grid { grid-template-columns: minmax(0, 1fr); }
}

.pause-avail .pa-card[hidden] { display: none; }

/* ---- Card ---- */

.pause-avail .pa-card {
  background: var(--pa-paper);
  border: 1px solid var(--pa-hairline);
  border-radius: var(--pa-radius-card);
  box-shadow: 0 1px 2px rgba(109,80,54,.05);
  display: flex;
  flex-direction: column;
  padding: 32px;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}

.pause-avail .pa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(68,126,114,.28);
}

.pause-avail .pa-eyebrow {
  color: var(--pa-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.pause-avail .pa-name {
  color: var(--pa-ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

.pause-avail .pa-statusline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}

.pause-avail .pa-badge {
  border: 1px solid;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  white-space: nowrap;
}

.pause-avail .pa-wait { color: var(--pa-muted); font-size: 14px; }

/* Status is carried by the word first, colour second. */
.pause-avail .pa-status-available .pa-badge { background: var(--pa-accent); border-color: var(--pa-accent); color: var(--pa-paper); }
.pause-avail .pa-status-limited   .pa-badge { background: var(--pa-accent-tint); border-color: var(--pa-accent); color: var(--pa-accent-dark); }
.pause-avail .pa-status-waitlist  .pa-badge { background: var(--pa-warm-tint); border-color: var(--pa-warm); color: var(--pa-warm); }
.pause-avail .pa-status-closed    .pa-badge { background: #f3f3f3; border-color: #cfcfcf; color: var(--pa-body); }

.pause-avail .pa-note {
  color: var(--pa-body);
  font-size: 15px;
  margin: 14px 0 0;
}

.pause-avail .pa-details {
  border-top: 1px solid var(--pa-hairline);
  display: grid;
  gap: 2px 12px;
  grid-template-columns: auto 1fr;
  margin: 20px 0 0;
  padding-top: 16px;
}

.pause-avail .pa-details dt {
  color: var(--pa-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding-top: 2px;
  text-transform: uppercase;
}

.pause-avail .pa-details dd { font-size: 14px; margin: 0; }

.pause-avail .pa-updated {
  color: var(--pa-muted);
  font-size: 13px;
  margin: 16px 0 0;
}

.pause-avail .pa-cta {
  align-items: center;
  background: var(--pa-accent);
  border: 1px solid var(--pa-accent);
  border-radius: var(--pa-radius-btn);
  box-shadow: 0 4px 12px rgba(68,126,114,.25);
  color: var(--pa-paper);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 0.5px;
  margin-top: auto;
  padding: 13px 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s cubic-bezier(.4,0,.2,1);
}

.pause-avail .pa-card > .pa-cta:not(:first-child) { margin-top: 24px; }

.pause-avail .pa-cta:hover {
  background: var(--pa-accent-dark);
  color: var(--pa-paper);
  transform: translateY(-2px);
}

.pause-avail .pa-cta-quiet {
  background: transparent;
  box-shadow: none;
  color: var(--pa-accent);
}

.pause-avail .pa-cta-quiet:hover { background: var(--pa-accent-tint); color: var(--pa-accent-dark); }

.pause-avail-empty {
  border: 1px solid var(--pa-hairline);
  border-radius: var(--pa-radius-card);
  color: var(--pa-body);
  margin: 0;
  max-width: 560px;
  padding: 32px;
}

/* ---- Waitlist dialog ---- */

.pause-avail .pa-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
}

.pause-avail .pa-modal[hidden] { display: none; }

.pause-avail .pa-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.56);
}

.pause-avail .pa-modal-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--pa-paper);
  border: 1px solid var(--pa-hairline);
  border-radius: 8px;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,.28);
  padding: 36px;
}

.pause-avail .pa-modal-x {
  position: absolute;
  top: 12px;
  right: 14px;
  appearance: none;
  background: none;
  border: 0;
  color: var(--pa-muted);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  padding: 4px 10px;
}

.pause-avail .pa-modal-x:hover { color: var(--pa-ink); }

.pause-avail .pa-modal-eyebrow {
  color: var(--pa-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.pause-avail .pa-modal-eyebrow:empty { display: none; }

.pause-avail .pa-modal-title {
  color: var(--pa-ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.pause-avail .pa-modal-lead {
  color: var(--pa-body);
  font-size: 15px;
  margin: 0 0 24px;
}

/* ---- Form ---- */

.pause-avail .pa-form { display: grid; gap: 16px; }

.pause-avail .pa-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 520px) {
  .pause-avail .pa-field-row { grid-template-columns: minmax(0, 1fr); }
  .pause-avail .pa-modal-panel { padding: 28px 20px; }
}

.pause-avail .pa-field { display: grid; gap: 6px; }

.pause-avail .pa-field label {
  color: var(--pa-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.pause-avail .pa-field input,
.pause-avail .pa-field select,
.pause-avail .pa-field textarea {
  width: 100%;
  background: var(--pa-paper);
  border: 1px solid var(--pa-hairline);
  border-radius: var(--pa-radius-btn);
  color: var(--pa-ink);
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  transition: border-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}

.pause-avail .pa-field textarea { resize: vertical; min-height: 76px; }

.pause-avail .pa-field input:focus,
.pause-avail .pa-field select:focus,
.pause-avail .pa-field textarea:focus {
  border-color: var(--pa-accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  outline: none;
}

.pause-avail .pa-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pa-body);
}

.pause-avail .pa-consent input { margin-top: 3px; flex: 0 0 auto; }

/* Honeypot — off screen rather than display:none, which some bots skip. */
.pause-avail .pa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pause-avail .pa-form-error {
  margin: 0;
  padding: 12px 14px;
  background: #f3f3f3;
  border-left: 3px solid var(--pa-ink);
  color: var(--pa-ink);
  font-size: 14px;
}

.pause-avail .pa-form-error[hidden] { display: none; }

.pause-avail .pa-form-submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  margin-top: 4px;
}

.pause-avail .pa-form-submit:disabled { opacity: .5; cursor: default; transform: none; }

.pause-avail .pa-form-fine {
  margin: 0;
  color: var(--pa-muted);
  font-size: 13px;
  text-align: center;
}

.pause-avail .pa-modal-done[hidden] { display: none; }
.pause-avail .pa-modal-done .pa-cta { max-width: 200px; }

/* ---- Refresh swap ---- */

.pause-avail-list { transition: opacity .3s cubic-bezier(.4,0,.2,1); }
.pause-avail-list.pa-swapping { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .pause-avail *,
  .pause-avail *::before,
  .pause-avail *::after { transition: none !important; }
  .pause-avail .pa-card:hover,
  .pause-avail .pa-cta:hover { transform: none; }
}