/* My Training Studio skin for the booking pages. Loaded after booking.css.
   Booking.css is written against token names
   like --teal, so this file re-points those tokens at the MTS palette from
   https://mytrainingstudio.com/brand.css and then overrides the few shapes
   that differ (rounder corners, sentence-case buttons, Montserrat). */

body.booking {
  --teal: #3D7BBE;        /* MTS Blue Dark: headings, links, primary buttons */
  --teal-dark: #1B2540;   /* MTS Navy: borders, strong text */
  --teal-light: #5B9BDE;  /* MTS Studio Blue: hover, focus */
  --slate: #6B7280;
  --text: #1A1A1F;
  --bg-light: #E8ECF4;
  --yellow: #7BB4E8;      /* hover glow on the list icons */
  --font-heading: 'Montserrat', -apple-system, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
}

/* --- Nav --- */
.mts-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(27, 37, 64, 0.95); backdrop-filter: blur(8px);
  padding: 0 2rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #7BB4E8;
}
.mts-nav-brand img { display: block; height: 40px; width: auto; }
.mts-nav-links { display: flex; gap: 2rem; align-items: center; }
.mts-nav-links a {
  color: rgba(255, 255, 255, 0.85); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; transition: color 0.2s;
}
.mts-nav-links a:hover { color: #7BB4E8; }
.mts-nav-links a.mts-nav-cta {
  background: #7BB4E8; color: #fff; padding: 0.5rem 1.2rem;
  border-radius: 6px; font-weight: 600;
}
.mts-nav-links a.mts-nav-cta:hover { filter: brightness(0.92); color: #fff; }
@media (max-width: 768px) {
  .mts-nav { padding: 0 1rem; }
  .mts-nav-brand img { height: 28px; }
  .mts-hide-sm { display: none; }
}

/* --- Footer --- */
.mts-footer {
  background: #1B2540; color: rgba(255, 255, 255, 0.6);
  padding: 3rem 2rem; text-align: center; font-size: 0.85rem;
}
.mts-footer-brand img { display: inline-block; height: 32px; width: auto; }
.mts-footer p { margin-top: 0.5rem; }
.mts-footer a { color: rgba(255, 255, 255, 0.8); }
.mts-footer a:hover { color: #7BB4E8; }
.mts-footer-copy { font-size: 0.8rem; margin-top: 1.5rem !important; }

/* --- Shapes --- */
body.booking a { color: #3D7BBE; }
body.booking a:hover { color: #5B9BDE; }
body.booking .bk-wrap { background: linear-gradient(180deg, #E8ECF4 0, #fff 320px); }
body.booking .bk-card,
body.booking .bk-inner input,
body.booking .bk-inner textarea,
body.booking .bk-inner select,
body.booking .cal-nav,
body.booking .cal-cell,
body.booking .slot-btn,
body.booking .bk-alert { border-radius: 8px; }
body.booking .bk-card,
body.booking .bk-inner input,
body.booking .bk-inner textarea,
body.booking .bk-inner select,
body.booking .slot-btn { border-width: 2px; }
body.booking .bk-inner button[type=submit],
body.booking .bk-inner .btn,
body.booking .bk-inner .btn-outline {
  text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 8px;
}
body.booking .bk-inner button[type=submit]:hover { background: #1B2540; }
body.booking .bk-eyebrow { font-family: var(--font-heading); letter-spacing: 0.14em; }
body.booking .cal-cell.has-slots { background: #E8ECF4; }
body.booking .cal-cell.selected,
body.booking .slot-btn.selected { background: #3D7BBE; border-color: #3D7BBE; color: #fff; }

/* --- Time zone picker --- */
.tz-picker { margin-bottom: 1.25rem; }
.tz-picker label { display: block; font-weight: 700; color: var(--teal); margin-bottom: 0.35rem; }
.tz-picker select {
  width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 1.05rem;
  color: var(--text); background: var(--white);
  border: 2px solid var(--teal-dark); border-radius: 8px;
}
.tz-picker select:focus { outline: none; border-color: var(--teal-light); box-shadow: 0 0 0 1px var(--teal-light); }