/*
 * Spanish Club — Public Availability Preview
 * OFFICIAL 3-color brand (per Ana's logo + her 2026-07-23 clarification):
 *   Royal indigo #1E1BB4 — primary text, borders, dark chips
 *   Sunny yellow #FFCF3A — accents, morning chips, highlight underline
 *   Kelly green  #26C24C — secondary text, afternoon chips, translations
 *
 * HARD RULES (Ana 2026-07-23):
 *   - NO stickers (adult prospects should not read "kids only")
 *   - NO polka-dot backgrounds (too childish)
 *   - Clean white with the 3 colors doing the work
 *   - Rounded chunky sans-serif (Fredoka) matches the logo
 *
 * Full brand doc: ~/Businesses/clients/spanish-club/BRAND_SOCIAL_REFERENCE.md
 */

.scp-pub-avail {
  --sc-royal:    #1E1BB4;
  --sc-royal-dk: #14107A;
  --sc-royal-lt: #F1F1FF;
  --sc-green:    #26C24C;
  --sc-green-dk: #1B9C3B;
  --sc-yellow:   #FFCF3A;
  --sc-yellow-lt:#FFEEA6;
  --sc-body:     #1a1a2e;
  --sc-muted:    #6b7280;
  --sc-card:     #ffffff;
  --sc-line:     #e5e7eb;

  font-family: 'Fredoka', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--sc-body);
  max-width: 1040px;
  margin: 32px auto;
  padding: 44px 40px 36px;
  background: var(--sc-card);
  border-radius: 28px;
  border: 1px solid var(--sc-line);
  box-shadow: 0 14px 48px rgba(30, 27, 180, 0.08);
  position: relative;
  overflow: hidden;
}

/* Sunny-yellow accent band across the top of the card (subtle tricolor
   nod to the logo). Sits inside the card via absolute so the 3 stripes
   act as a visual anchor without a full pattern. */
.scp-pub-avail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sc-royal) 0%, var(--sc-royal) 33%, var(--sc-yellow) 33%, var(--sc-yellow) 66%, var(--sc-green) 66%, var(--sc-green) 100%);
}

/* Rotate hint — only shown on narrow-portrait mobile.
   Ana asked 2026-07-24: on iPhone in portrait the calendar feels tight;
   turning sideways gives the full grid room to breathe. This tells visitors
   to do that. On landscape or wider it stays hidden so it doesn't pester
   desktop / tablet users. */
.scp-pub-avail-rotate-hint {
  display: none;
  margin: -8px 0 20px;
  padding: 12px 16px;
  background: var(--sc-yellow);
  color: var(--sc-royal);
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  line-height: 1.35;
  border: 1.5px solid #E4B72E;
}
.scp-pub-avail-rotate-icon {
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
@media (max-width: 640px) and (orientation: portrait) {
  .scp-pub-avail-rotate-hint { display: flex; }
}

/* ── HEAD ────────────────────────────────────────────────────── */
.scp-pub-avail-head {
  margin-bottom: 28px;
}

.scp-pub-avail-eyebrow {
  display: inline-block;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-green-dk);
  background: rgba(38, 194, 76, 0.10);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.scp-pub-avail-title {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  color: var(--sc-royal);
  font-weight: 700;
  font-size: 42px;
  margin: 0 0 4px;
  line-height: 1.06;
  letter-spacing: -0.018em;
}
.scp-pub-avail-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 5px;
  background: var(--sc-yellow);
  border-radius: 999px;
  margin-top: 12px;
}

.scp-pub-avail-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: var(--sc-body);
  margin: 14px 0 26px;
  line-height: 1.65;
  font-weight: 500;
  max-width: 720px;
}
.scp-pub-avail-sub strong {
  color: var(--sc-green-dk);
  font-weight: 700;
}
.scp-pub-avail-sub strong.scp-pub-avail-nobooking {
  color: var(--sc-royal);
  font-weight: 700;
  background: rgba(30, 27, 180, 0.10);
  padding: 1px 8px;
  border-radius: 4px;
}

/* Group toggle + tz picker on one line so they read as a single control bar */
.scp-pub-avail-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 6px;
}

/* Toggle 25 / 50 min */
.scp-pub-avail-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--sc-royal-lt);
  border-radius: 999px;
  vertical-align: middle;
}
.scp-pub-avail-toggle button {
  background: transparent;
  border: none;
  padding: 9px 22px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-royal);
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.scp-pub-avail-toggle button.is-active {
  background: var(--sc-royal);
  color: #fff;
  box-shadow: 0 3px 10px rgba(30, 27, 180, 0.30);
}
.scp-pub-avail-toggle button:hover:not(.is-active) {
  background: rgba(30, 27, 180, 0.08);
}

/* Timezone picker */
.scp-pub-avail-tz-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--sc-royal);
  font-weight: 600;
  vertical-align: middle;
}
.scp-pub-avail-tz-picker select {
  padding: 8px 14px;
  border: 2px solid var(--sc-royal);
  border-radius: 999px;
  background: #fff;
  color: var(--sc-royal);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}
.scp-pub-avail-tz-picker select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 27, 180, 0.18);
}

/* Toolbar */
.scp-pub-avail-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.scp-pub-avail-nav {
  background: #fff;
  border: 2px solid var(--sc-royal);
  color: var(--sc-royal);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: background 160ms ease, color 160ms ease, transform 100ms ease;
}
.scp-pub-avail-nav:hover {
  background: var(--sc-royal);
  color: #fff;
  transform: translateY(-1px);
}
.scp-pub-avail-month {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--sc-royal);
  margin: 0 0 0 14px;
  min-width: 220px;
  letter-spacing: -0.005em;
}

/* ── WEEK HEADER ─────────────────────────────────────────────── */
.scp-pub-avail-weekhead {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin: 8px 0 10px;
}
.scp-pub-avail-weekhead > div {
  padding: 10px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-royal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ── MONTH GRID ──────────────────────────────────────────────── */
.scp-pub-avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  min-height: 440px;
}
.scp-pub-avail-cell {
  min-height: 124px;
  padding: 12px 12px 10px;
  background: #fff;
  border: 1.5px solid var(--sc-line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: transform 100ms ease, box-shadow 200ms ease, border-color 160ms ease;
}
.scp-pub-avail-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(30, 27, 180, 0.10);
  border-color: var(--sc-royal);
}
.scp-pub-avail-cell.is-other-month:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--sc-line);
}
.scp-pub-avail-cell.is-other-month {
  background: transparent;
  border-style: dashed;
  opacity: 0.55;
}
.scp-pub-avail-cell.is-today {
  background: var(--sc-yellow-lt);
  border-color: var(--sc-yellow);
  border-width: 2.5px;
  box-shadow: 0 4px 12px rgba(255, 207, 58, 0.30);
}
.scp-pub-avail-cell.is-past { opacity: 0.4; }
.scp-pub-avail-cell.is-empty {
  background: #fafafa;
  border-style: dashed;
}

.scp-pub-avail-daynum {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--sc-royal);
  align-self: flex-end;
}
.scp-pub-avail-cell.is-today .scp-pub-avail-daynum {
  color: var(--sc-royal);
}

/* ── SLOT CHIPS — color-coded by time of day (Ana's 3 core colors only) ── */
.scp-pub-avail-slots {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scp-pub-avail-slot {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 9px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Morning (before noon) → sunny yellow bg, royal blue text — bright, energetic */
.scp-pub-avail-slot[data-tod="morning"] {
  background: var(--sc-yellow);
  color: var(--sc-royal);
}
/* Afternoon (noon–5 pm) → kelly green, white text — mid-day active */
.scp-pub-avail-slot[data-tod="afternoon"] {
  background: var(--sc-green);
  color: #fff;
}
/* Evening (5 pm+) → royal indigo, white text — calmer end-of-day */
.scp-pub-avail-slot[data-tod="evening"] {
  background: var(--sc-royal);
  color: #fff;
}
/* Overflow indicator — neutral, light, clickable */
.scp-pub-avail-slot.is-more {
  background: var(--sc-royal-lt);
  color: var(--sc-royal);
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 100ms ease;
}
.scp-pub-avail-slot.is-more:hover,
.scp-pub-avail-slot.is-more:focus {
  background: var(--sc-royal);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

/* Day-detail popover — when a visitor clicks "+ N more" */
.scp-pub-avail-daypop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(30, 27, 180, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: scpPubFadeIn 160ms ease-out;
}
.scp-pub-avail-daypop[hidden] { display: none; }
@keyframes scpPubFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.scp-pub-avail-daypop-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 28px 22px;
  max-width: 420px;
  width: 100%;
  position: relative;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  box-shadow: 0 20px 60px rgba(30, 27, 180, 0.28);
  border: 3px solid var(--sc-yellow);
  animation: scpPubPop 200ms cubic-bezier(0.22, 0.94, 0.32, 1.12);
}
@keyframes scpPubPop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.scp-pub-avail-daypop-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--sc-royal);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.scp-pub-avail-daypop-close:hover { background: var(--sc-royal-lt); }
.scp-pub-avail-daypop-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-green-dk);
  margin-bottom: 6px;
}
.scp-pub-avail-daypop-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--sc-royal);
  margin: 0 0 18px;
  line-height: 1.15;
}
/* Grid layout guarantees every chip renders in its own cell — no more
   Safari mobile quirks with flex-wrap dropping items. Every slot chip
   is a grid item and appears whether the visitor scrolls or not. */
.scp-pub-avail-daypop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 4px;
}
.scp-pub-avail-daypop-list .scp-pub-avail-slot {
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  min-width: 0;
}
.scp-pub-avail-daypop-note {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--sc-body);
  margin: 0;
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid var(--sc-line);
}

.scp-pub-avail-loading, .scp-pub-avail-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--sc-royal);
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* ── FOOTER CTA ──────────────────────────────────────────────── */
.scp-pub-avail-footer {
  margin-top: 32px;
  padding: 26px 32px;
  background: var(--sc-royal-lt);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.scp-pub-avail-footer p {
  margin: 0;
  color: var(--sc-royal);
  font-family: 'Fredoka', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.scp-pub-avail-footer p .highlight {
  color: var(--sc-green-dk);
}
.scp-pub-avail-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--sc-royal);
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(30, 27, 180, 0.35);
  transition: background 160ms ease, transform 100ms ease, box-shadow 200ms ease;
}
.scp-pub-avail-cta:hover {
  background: var(--sc-royal-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 27, 180, 0.45);
  color: #fff !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .scp-pub-avail {
    padding: 26px 16px 22px;
    border-radius: 18px;
  }
  .scp-pub-avail-title { font-size: 26px; }
  .scp-pub-avail-cell { min-height: 82px; padding: 6px 6px 5px; border-radius: 8px; }
  .scp-pub-avail-slot { font-size: 10px; padding: 3px 6px; }
  .scp-pub-avail-daynum { font-size: 14px; }
  .scp-pub-avail-month { font-size: 20px; min-width: 150px; }
  .scp-pub-avail-footer { flex-direction: column; text-align: center; padding: 18px; }
  .scp-pub-avail-footer p { font-size: 16px; }
}