/* ── PinkOS neo-brutalist skin — MONOTONE ──────────────────────────────────
   For the customer-facing booking pages. Same neo structure as _neo-skin.css
   (hard 3px borders, hard offset shadows, no blur, no gradients) but with the
   colour removed: cream canvas, ink, and greys only. Emphasis comes from
   weight, size, border and fill — never from hue.
   Deliberately NOT importing _neo-skin.css: that file's coral/orange/green
   would have to be overridden rule-for-rule, and any new rule added there
   would leak colour back in here.
   ------------------------------------------------------------------------ */

:root {
  --canvas: #FFFDF8;   /* cream page */
  --paper:  #FFFFFF;   /* cards / fields */
  --ink:    #14161A;   /* near-black */
  --ink-2:  #3F444D;   /* secondary text */
  --muted:  #767C87;   /* tertiary text */
  --line:   #14161A;   /* borders are always ink */
  --fill:   #F1EFE9;   /* selected / filled surface */
  --fill-2: #E4E1D9;   /* chip, disabled */
  --sans: "Inter", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --nb:  3px solid var(--line);
  --nb2: 2px solid var(--line);
  --sh:    6px 6px 0 var(--ink);
  --sh-sm: 3px 3px 0 var(--ink);

  /* remap the ported page's original palette onto the monotone set */
  --plum: var(--canvas); --plum-2: var(--paper); --wine: var(--canvas);
  --cream: var(--ink); --blush: var(--muted); --rose: var(--ink);
  --gold: var(--ink); --gold-2: var(--ink);
  --field: var(--paper); --field-bd: var(--line);
  --serif: var(--sans);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  line-height: 1.5;
  padding: 20px 18px calc(40px + env(safe-area-inset-bottom)) !important;
}
/* centre the flow so the Hub pill lines up with the form column */
body { display: flex; flex-direction: column; align-items: center; }
body > .wrap { width: 100%; }

/* strip every soft/decorative effect inherited from the original theme.
   The page's "rise" entrance animation starts at opacity:0 and fades in, so
   cancelling the animation alone would leave everything permanently invisible —
   opacity must be reset in the same rule. */
body *, body *::before, body *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* …but genuinely-disabled controls still need to read as disabled. */
body .btn:disabled, body button:disabled, body input:disabled, body select:disabled { opacity: .4 !important; }

.wrap { max-width: 480px; margin: 0 auto; }

/* ── header ── */
header { text-align: center; margin-bottom: 26px; }
.kicker {
  font-size: 10.5px !important; letter-spacing: .28em !important; text-transform: uppercase;
  font-weight: 800 !important; color: var(--muted) !important; margin: 0 0 12px !important;
}
h1 {
  font-family: var(--sans) !important; font-weight: 900 !important;
  font-size: clamp(30px, 9vw, 40px) !important; letter-spacing: -.02em !important;
  margin: 0 !important; color: var(--ink) !important;
  background: none !important; -webkit-text-fill-color: var(--ink) !important;
}
/* the original used italic serif for emphasis; monotone uses an underline instead */
h1 em {
  font-style: normal !important; color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  box-shadow: inset 0 -0.28em 0 var(--fill-2);
}
.hours { font-size: 13px !important; font-weight: 700 !important; color: var(--ink-2) !important; margin: 10px 0 0 !important; }

/* ── language bar ── */
.langbar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.langbar button {
  font: inherit; font-size: 12px !important; font-weight: 700 !important; cursor: pointer;
  padding: 7px 12px !important; border-radius: 999px !important;
  color: var(--ink) !important; background: var(--paper) !important;
  border: var(--nb2) !important; box-shadow: none !important;
}
.langbar button.active { background: var(--ink) !important; color: var(--canvas) !important; }

/* ── fields ── */
.field { margin-bottom: 18px; }
label {
  display: block; font-size: 10.5px !important; letter-spacing: .14em !important;
  text-transform: uppercase; font-weight: 800 !important;
  color: var(--ink-2) !important; margin: 0 0 8px !important;
}
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px !important; font-weight: 600 !important;
  color: var(--ink) !important; background: var(--paper) !important;
  border: var(--nb2) !important; border-radius: 10px !important;
  padding: 13px 14px !important; outline: none;
  box-shadow: var(--sh-sm) !important; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; font-weight: 500; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink), var(--sh-sm) !important;
}

/* ── month switcher + calendar ── */
.months { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.monthpill {
  flex: 1 1 0; min-width: 46px; font: inherit;
  font-size: 13px !important; font-weight: 800 !important; cursor: pointer;
  padding: 9px 6px !important; border-radius: 9px !important;
  background: var(--paper) !important; color: var(--ink) !important;
  border: var(--nb2) !important; box-shadow: var(--sh-sm) !important;
}
.monthpill.act { background: var(--ink) !important; color: var(--canvas) !important; }
.monthpill:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink) !important; }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head {
  border: none !important; background: none !important; box-shadow: none !important;
  font-size: 10px !important; font-weight: 800 !important; letter-spacing: .04em;
  color: var(--muted) !important; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; padding: 4px 0 !important;
  aspect-ratio: auto !important;
}
.cal-blank { border: none !important; background: none !important; box-shadow: none !important; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13.5px !important; font-weight: 700 !important; cursor: pointer;
  padding: 0 !important; border-radius: 8px !important; border: var(--nb2) !important;
  background: var(--paper) !important; color: var(--ink) !important;
  text-decoration: none !important;
}
.cal-day.sel, .cal-day.act, .cal-day.selected {
  background: var(--ink) !important; color: var(--canvas) !important;
}
/* past / unavailable: flat grey, dashed, no strikethrough (the original struck
   these through, which read as a typo at small sizes on a light canvas) */
.cal-day.past, .cal-day:disabled, .cal-day.off, .cal-day.disabled {
  background: var(--fill) !important; color: var(--muted) !important;
  border-style: dashed !important; border-color: var(--fill-2) !important;
  cursor: not-allowed !important; text-decoration: none !important;
}

/* ── time chips ── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit; font-size: 13px !important; font-weight: 700 !important; cursor: pointer;
  padding: 9px 13px !important; border-radius: 999px !important;
  background: var(--paper) !important; color: var(--ink) !important;
  border: var(--nb2) !important; box-shadow: none !important;
}
.chip.sel, .chip.act, .chip.selected { background: var(--ink) !important; color: var(--canvas) !important; }
.chip:disabled, .chip.off { background: var(--fill) !important; color: var(--muted) !important; border-style: dashed !important; }

/* ── submit ── */
.btn {
  width: 100%; margin-top: 24px; font: inherit;
  font-size: 17px !important; font-weight: 900 !important; font-style: normal !important;
  cursor: pointer; padding: 16px !important; border-radius: 12px !important;
  background: var(--ink) !important; color: var(--canvas) !important;
  border: var(--nb) !important; box-shadow: var(--sh) !important;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink) !important; }
.btn:disabled { opacity: .4 !important; }

/* ── messages / footer ── */
#msg {
  text-align: center; margin-top: 18px !important;
  font-size: 15px !important; font-weight: 700 !important; color: var(--ink) !important;
}
#msg a { color: var(--ink) !important; font-weight: 800; }
.manage-link {
  display: block; text-align: center; margin-top: 20px; padding: 12px;
  font-size: 13.5px !important; font-weight: 800 !important; text-decoration: none;
  color: var(--ink) !important; background: var(--fill) !important;
  border: var(--nb2) !important; border-radius: 10px !important; box-shadow: var(--sh-sm) !important;
}
.manage-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) !important; }
.credit {
  text-align: center; margin-top: 24px !important;
  font-size: 10px !important; letter-spacing: .26em !important; text-transform: uppercase;
  font-weight: 700 !important; color: var(--muted) !important;
}

/* back-to-hub pill (added by PinkOS).
   Kept in normal flow rather than position:fixed — floating it over the page
   made it land on top of the first language button. */
.hub-back {
  display: inline-flex; align-items: center; padding: 8px 12px;
  max-width: 480px; margin: 0 auto 14px; align-self: flex-start;
  font-size: 12px; font-weight: 800; text-decoration: none;
  color: var(--ink); background: var(--paper);
  border: var(--nb2); border-radius: 9px; box-shadow: var(--sh-sm);
}
.hub-back:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }