/* Shared brand stylesheet - pulled from the workshop-booking platform's design system. */

@font-face {
  font-family: 'PicnicClub';
  src: url('/fonts/ThePicnicClub-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'PicnicClub';
  src: url('/fonts/ThePicnicClub-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'PicnicClubScript';
  src: url('/fonts/ThePicnicClub-Script.otf') format('opentype');
  font-weight: 400;
}

:root {
  --cream: #fcf1d4;
  --olive: #686028;
  --parchment: #F5F0E8;
  --parchment-text: #3e2112;
  --olive-text: #f7ecd3;
  --terracotta: #e56228;
  --dusty-rose: #e3aec4;
  --caramel: #ac764f;
  --espresso: #3e2112;
  --teal: #97bac0;
  --lavender: #c4c7e0;
  --warm-yellow: #efcd6d;
  --soft-grey: #c6cacc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

body {
  background-color: var(--cream);
  color: var(--parchment-text);
  font-family: 'PicnicClub', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  max-width: 100%;
}

img { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: 'PicnicClub', sans-serif;
  font-style: normal;
  font-weight: 400;
}

p, span, a, li, label, button, input, td, th { font-family: 'PicnicClub', sans-serif; }

/* ---- Shared layout ---- */

.brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 20px 12px;
  max-width: 640px;
  margin: 0 auto;
}
.brand-header img { height: 88px; width: auto; }

.wrap { max-width: 640px; margin: 0 auto; padding: 12px 20px 80px; }

.card {
  background-color: var(--parchment);
  color: var(--parchment-text);
  border-radius: 0;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid rgba(62,33,18,0.08);
}

/* Customer-facing shell: olive background, light cream lettering, white option boxes */
.customer-shell {
  background-color: var(--olive);
  color: var(--cream);
}
.customer-shell .card {
  background-color: #ffffff;
  color: var(--espresso);
  border: 1px solid rgba(0,0,0,0.08);
}

/* ---- Buttons ---- */

.pill-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  font-family: 'PicnicClub', sans-serif;
  font-size: 1.02rem;
  border: none;
  text-align: center;
  text-decoration: none;
}
.pill-btn-primary {
  background-color: var(--teal);
  color: var(--olive-text);
  width: 100%;
}
.pill-btn-primary:disabled {
  background-color: var(--soft-grey);
  color: #777;
  cursor: not-allowed;
}
.pill-btn-secondary {
  background-color: transparent;
  color: var(--espresso);
  border: 1px solid rgba(62,33,18,0.3);
}

/* ---- Admin shell (matches booking-platform admin conventions: olive bg, square corners) ---- */

.admin-shell {
  background-color: var(--olive);
  color: var(--parchment);
  min-height: 100vh;
}

.admin-shell .card,
.admin-shell table {
  border-radius: 0;
}

.admin-pill {
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  font-family: 'PicnicClub', sans-serif;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
}
.admin-pill-primary {
  background-color: var(--teal);
  color: var(--olive-text);
  border: none;
}
.admin-pill-secondary {
  background-color: transparent;
  color: var(--parchment);
  border: 1px solid rgba(245,234,208,0.3);
}

.admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 400;
}
.admin-tag.paid { background-color: rgba(62,110,62,0.15); color: #2f6b2f; }
.admin-tag.pending { background-color: rgba(229,98,40,0.15); color: var(--terracotta); }
.admin-tag.completed { background-color: rgba(151,186,192,0.3); color: #2c5155; }