@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:wght@600;700&display=swap");

/*
 * Baby — ballet-stationery pink: luminous petal surfaces, raspberry ink,
 * soft curves and a little movement. Purely visual; the production grids,
 * logo, form states and interaction behavior remain untouched.
 */
:root {
  --canvas: #fff0f5;
  --paper: #fffafd;
  --paper-deep: #f9dfe9;
  --ink: #3d2835;
  --muted: #715969;
  --line: #eac6d5;
  --brand: #a33f69;
  --brand-dark: #762c50;
  --brand-soft: #f2bace;
  --booking-pink: #f5b9d1;
  --booking-pink-hover: #ed9fbe;
  --booking-ink: #52243b;
  --soft: #ffe3ed;
  --danger: #a72e50;
  --success: #326c58;
  --shadow: 0 14px 38px rgba(100, 38, 69, .09);
}

body {
  background: radial-gradient(ellipse 60% 28% at 90% 9%, #ffdae8 0%, transparent 100%),
              radial-gradient(ellipse 45% 25% at 3% 83%, #ffe3ed 0%, transparent 100%),
              var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
button, input, select { font-family: "DM Sans", sans-serif; }
:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; }

/* Common frame — deliberately leave the existing image logo alone. */
.topbar {
  background: rgba(255, 248, 251, .96);
  border-bottom-color: var(--line);
  box-shadow: 0 5px 24px rgba(100, 38, 69, .075);
}
.brand { color: var(--brand-dark); font-family: "Fraunces", Georgia, serif; }
.brand small { color: var(--muted); font-family: "DM Sans", sans-serif; }
.outline-nav {
  border-color: #cf8eaa;
  background: #fff7fa;
  color: var(--brand-dark);
  font-family: "DM Sans", sans-serif;
  transition: transform .2s ease, opacity .2s ease;
}
.outline-nav:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--paper);
  transform: translateY(-2px);
}
.footer {
  background: var(--paper-deep);
  border-top-color: var(--line);
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
}
.footer a { color: var(--brand-dark); text-underline-offset: 3px; }
.footer a:hover, .text-link:hover { color: var(--brand); }

/* Weekly schedule — do not replace desktop's six columns or mobile's two. */
.toolbar { border-bottom-color: var(--line); }
.toolbar-top > div:first-child b {
  color: var(--brand-dark);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.025em;
}
.week-range, .filters-link i, .trainer i { color: var(--brand); }
.filters-link:hover { color: var(--brand-dark); }
.nav-week .btn {
  background: var(--paper);
  border-color: var(--line);
  color: var(--brand-dark);
  box-shadow: 0 2px 8px rgba(118, 44, 80, .06);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-week .btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--paper);
  transform: translateY(-2px);
}
.nav-week .btn.disabled {
  opacity: 1;
  background: #f5e7ed;
  border-color: #e9d5df;
  color: #907e89;
  box-shadow: none;
  pointer-events: none;
}
.filters-panel {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.schedule {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(100, 38, 69, .09);
}
.day-title {
  background: #ffdae8;
  color: var(--brand-dark);
  border-top-color: var(--line);
  border-left-color: var(--brand);
  font-family: "DM Sans", sans-serif;
  letter-spacing: .015em;
}
.class-row {
  height: auto;
  min-height: 54px;
  background: var(--paper);
  border-bottom-color: #f4e2e9;
}
.class-row:hover { background: #fff0f5; border-left-color: var(--brand-soft); }
.class-row.waiting { border-left-color: #be9874; }
.class-row > div, .class-row > span { min-width: 0; overflow-wrap: anywhere; }
.class-time { color: var(--brand-dark); }
.class-name {
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.trainer, .class-info { color: var(--muted); }
.book {
  background: var(--booking-pink);
  color: var(--booking-ink);
  box-shadow: 0 3px 8px rgba(163, 63, 105, .1);
  transition: transform .2s ease, opacity .2s ease;
}
.book:hover {
  background: var(--booking-pink-hover);
  color: var(--booking-ink);
  transform: translateY(-2px);
}
.book:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; }
.class-row.unavailable, .class-row.unavailable:hover {
  background: #f8eef2;
  border-left-color: #e5d4dd;
  color: #796b74;
}
.class-row.unavailable .class-name,
.class-row.unavailable .class-time,
.class-row.unavailable .trainer i { color: #796b74; }
.nonbookable { color: #685863; }
.empty-week { color: var(--muted); }
.choose-btn, .booking-submit {
  border-radius: 12px;
  background: var(--booking-pink);
  color: var(--booking-ink);
  transition: transform .2s ease, opacity .2s ease;
}
.choose-btn:hover, .booking-submit:hover {
  background: var(--booking-pink-hover);
  color: var(--booking-ink);
  transform: translateY(-2px);
}
.choose-btn:disabled, .booking-submit:disabled,
.book:disabled {
  background: #dfbfcc;
  color: #594651;
  opacity: 1;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.booking-submit:disabled { cursor: wait; }

/* Reserve: a warm sheet over a muted raspberry veil. */
.booking-dialog, .cancel-dialog {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(55, 20, 41, .27);
}
.booking-dialog::backdrop, .cancel-dialog::backdrop { background: rgba(52, 25, 42, .58); }
.booking-head { border-bottom-color: var(--line); }
.booking-title, .form-title, .page-title, .dialog-title {
  color: var(--brand-dark);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
}
.booking-title { overflow-wrap: anywhere; }
.dialog-close {
  background: var(--soft);
  color: var(--brand-dark);
  transition: transform .2s ease, opacity .2s ease;
}
.dialog-close:hover { background: var(--brand-soft); transform: rotate(8deg); }
.booking-meta { color: var(--muted); }
.booking-meta strong { color: var(--ink); }
.availability, .form-message.success {
  background: #e2f2e9;
  color: #245943;
}
.field-label, .field label { color: var(--ink); }
.booking-input, .booking-select, .field input {
  background: #fffafd;
  border-color: #d9aabd;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.booking-input:focus, .booking-select:focus, .field input:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(163, 63, 105, .17);
}
.booking-input.required-look { border-color: #b76c89; }
.booking-input.input-error, .booking-input.input-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(167, 46, 80, .14);
}
.field-error, .required-note { color: var(--danger); }
.form-message.error, .error {
  background: #ffe4e9;
  border-color: #e8a5b7;
  color: #88243e;
}
.comment-label { color: var(--muted); }

/* Login, registration and recovery. */
.login-card {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 56px rgba(100, 38, 69, .12);
}
.login-card::before {
  width: 58px;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(90deg, #ffc1d7 0 32%, var(--brand) 32% 68%, #ffc1d7 68%);
}
.field:focus-within label { color: var(--brand-dark); }
.eye { background: var(--brand-dark); }
.login-btn, .secondary-btn, .back-btn {
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  transition: transform .2s ease, opacity .2s ease;
}
.login-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fffafd;
}
.login-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
}
.secondary-btn, .back-btn {
  background: #fff6fa;
  border-color: #d5a5b8;
  color: var(--brand-dark);
}
.secondary-btn:hover, .back-btn:hover {
  background: var(--soft);
  border-color: var(--brand);
  transform: translateY(-2px);
}
.login-btn:disabled, .secondary-btn:disabled, .back-btn:disabled {
  background: #e7cfda;
  border-color: #e0becd;
  color: #685561;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}
.text-link { color: var(--brand-dark); font-family: "DM Sans", sans-serif; }
.divider { background: var(--line); }
.form-copy { color: var(--muted); }

/* Account: petal-pink selection, visit tiles and readable past states. */
.page-head { border-bottom-color: var(--line); }
.eyebrow { color: var(--brand); }
.page-note, .profile-sub, .info-label, .choice-info, .visit-meta { color: var(--muted); }
.page-head > .outline-nav {
  background: var(--brand);
  border-color: var(--brand);
  color: #fffafd;
}
.page-head > .outline-nav:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.surface {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.section-title, .visit-name, .date-day {
  font-family: "DM Sans", sans-serif;
}
.profile-top, .membership { border-color: var(--line); }
.profile-avatar { background: #ffd4e4; color: var(--brand-dark); }
.info-row { border-bottom-color: #f1dce5; }
.info-row .icon, .visit-meta .icon { color: var(--brand); }
.card-choice label {
  background: #fff5f9;
  border-color: var(--line);
  border-radius: 14px;
}
.card-choice label:hover { background: #ffeaf2; border-color: #c67899; }
.card-choice input:checked + label {
  background: #ffdfeb;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(163, 63, 105, .14);
}
.card-choice input:disabled + label { opacity: .62; cursor: not-allowed; }
.card-choice input:focus-visible + label { outline-color: var(--brand-dark); }
.choice-price { color: var(--brand-dark); }
.tabs { background: #fbe2ec; border-color: var(--line); }
.tab-btn { color: #64505c; }
.tab-btn:hover { color: var(--brand-dark); }
.tab-btn.active {
  background: var(--paper);
  color: var(--brand-dark);
  box-shadow: 0 2px 8px rgba(100, 38, 69, .12);
}
.tab-btn:disabled { opacity: .58; cursor: not-allowed; }
.visit-card {
  background: #fff7fa;
  border-color: var(--line);
  border-radius: 16px;
}
.visit-card:hover {
  border-color: #d490ac;
  box-shadow: 0 9px 23px rgba(100, 38, 69, .085);
}
.date-tile {
  background: #ffd8e7;
  color: var(--brand-dark);
  border-radius: 13px;
}
.visit-status { color: var(--success); }
.visit-status.past { color: var(--muted); }
.past-card { background: #f8eff3; }
.past-card .date-tile { background: #eee0e7; color: #71616b; }
.past-card:hover { border-color: var(--line); box-shadow: none; }
.cancel-btn {
  background: #fff7fa;
  border-color: #c985a1;
  border-radius: 10px;
  color: var(--brand-dark);
  transition: transform .2s ease, opacity .2s ease;
}
.cancel-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fffafd;
  transform: translateY(-2px);
}
.dialog-icon { background: var(--soft); color: var(--brand-dark); }
.dialog-btn { border-radius: 11px; transition: transform .2s ease, opacity .2s ease; }
.dialog-back { background: #fff7fa; border-color: var(--line); color: var(--ink); }
.dialog-back:hover { background: var(--soft); transform: translateY(-2px); }
.dialog-confirm { background: var(--brand); border-color: var(--brand); color: #fffafd; }
.dialog-confirm:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
}
.dialog-btn:disabled, .cancel-btn:disabled {
  background: #e7cfda;
  border-color: #ddbdcb;
  color: #67535f;
  opacity: 1;
  transform: none;
  cursor: not-allowed;
}
.toast-note {
  background: var(--brand-dark);
  color: #fffafd;
  box-shadow: 0 9px 25px rgba(55, 20, 41, .22);
}

@media (max-width: 767.98px) {
  .class-row { height: auto; min-height: 98px; }
  .class-name, .trainer { overflow-wrap: anywhere; }
  .booking-dialog { max-height: calc(100dvh - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .outline-nav, .nav-week .btn, .book, .choose-btn, .booking-submit,
  .dialog-close, .login-btn, .secondary-btn, .back-btn, .cancel-btn, .dialog-btn {
    transition: none;
  }
}