/* =====================================================
   KlikTime — Design tokens
   New brand system (Claude design rework 2026)
===================================================== */
:root {
  --kt-bg: #f7faf9;
  --kt-surface: #ffffff;

  --kt-primary: #0e9f97;        /* brand teal */
  --kt-primary-hover: #0c8a82;
  --kt-primary-dark: #0b4f49;   /* deep teal (text on mint) */

  --kt-ink: #08302e;            /* dark green — headings & dark CTAs */
  --kt-ink-hover: #0a3d3a;
  --kt-ink-soft: #37474a;

  --kt-body: #4a5b59;
  --kt-muted: #8aa09c;

  --kt-mint: #d7f0ea;           /* light mint — badges/chips */
  --kt-mint-soft: #f2faf8;      /* soft mint surface */
  --kt-accent: #17c3b2;         /* bright accent */

  --kt-border: #e6efec;
  --kt-border-soft: #edf3f1;

  --kt-star: #f5a623;

  --kt-shadow-card: 0 1px 3px rgba(8, 48, 46, .06), 0 12px 30px -22px rgba(8, 48, 46, .35);
  --kt-shadow-pop: 0 24px 50px -30px rgba(8, 48, 46, .4);
}

/* =====================================================
   Branding & Global Styles
===================================================== */
body {
  background: var(--kt-bg);
  color: var(--kt-ink-soft);
}

.text-teal-500,
.text-teal-600 {
  color: var(--kt-primary) !important; /* Force brand teal */
}

/* =====================================================
   Navigation
===================================================== */
nav {
  background: transparent !important;
  box-shadow: none !important;
}

.navbar a {
  font-weight: 500;
  color: var(--kt-ink-soft);
  transition: color 0.2s ease;
}

.navbar a:hover {
  color: var(--kt-primary);
}

/* Dropdown sizing */
#dropdownMenu {
  min-width: 10rem;
}

/* =====================================================
   Form Focus States
===================================================== */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(14, 159, 151, .18) !important; /* teal ring */
  border-color: var(--kt-primary) !important;
}

/* =====================================================
   Buttons — THE design system (see DESIGN_SYSTEM.md)

   Every interactive button/link-button is:
       .btn  +  one variant  +  optional size
   Variants: btn-primary | btn-secondary | btn-soft |
             btn-accent | btn-danger | btn-danger-soft |
             btn-ghost | btn-outline
   Sizes:    btn-small | (default) | btn-large
   Icon-only square pill: .btn-icon (combine with a variant)
   Works identically on <button>, <a>, <input type=submit>.
===================================================== */

/* Bare <button> gets only a neutral reset — pill styling
   lives exclusively in .btn so icon/utility buttons stay clean. */
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 9999px; /* full pill shape */
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
  line-height: 1.4rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(8, 48, 46, 0.06);
}

.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 159, 151, .35);
}

button:disabled,
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Variants -------------------------------------- */
/* colours use !important so <a class="btn ..."> beats the
   global a:hover teal rule in every state */

/* Primary — brand teal. The ONE main action of a screen. */
.btn-primary,
.btn-primary:hover { color: #fff !important; }
.btn-primary { background: var(--kt-primary); }
.btn-primary:hover {
  background: var(--kt-primary-hover);
  box-shadow: 0 10px 22px -12px rgba(14, 159, 151, .6);
}

/* Secondary — dark ink. Strong alternative CTA (nav, dark panels). */
.btn-secondary,
.btn-secondary:hover { color: #fff !important; }
.btn-secondary { background: var(--kt-ink); }
.btn-secondary:hover {
  background: var(--kt-ink-hover);
  box-shadow: 0 10px 22px -12px rgba(8, 48, 46, .55);
}

/* Soft — mint pill. Light secondary action (card CTAs, edit). */
.btn-soft,
.btn-soft:hover { color: var(--kt-primary-dark) !important; }
.btn-soft { background: var(--kt-mint); box-shadow: none; }
.btn-soft:hover { background: #c7e9e0; }

/* Accent — bright teal on dark backgrounds only. */
.btn-accent,
.btn-accent:hover { color: var(--kt-ink) !important; }
.btn-accent { background: var(--kt-accent); }
.btn-accent:hover {
  background: #14b0a0;
  box-shadow: 0 10px 22px -12px rgba(23, 195, 178, .55);
}

/* Danger — destructive primary (confirm delete pages). */
.btn-danger,
.btn-danger:hover { color: #fff !important; }
.btn-danger { background: #ef4444; }
.btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 10px 22px -12px rgba(220, 38, 38, 0.55);
}

/* Danger-soft — inline destructive action (cancel, remove). */
.btn-danger-soft,
.btn-danger-soft:hover { color: #b91c1c !important; }
.btn-danger-soft { background: #fee2e2; box-shadow: none; }
.btn-danger-soft:hover { background: #fecaca; }

/* Ghost — borderless, low-emphasis. */
.btn-ghost,
.btn-ghost:hover { color: var(--kt-primary) !important; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background-color: rgba(14, 159, 151, 0.08); }

/* Outline — neutral bordered pill (back / tertiary). */
.btn-outline,
.btn-outline:hover { color: var(--kt-ink-soft) !important; }
.btn-outline {
  background: var(--kt-surface);
  box-shadow: inset 0 0 0 1px #dde5e2;
}
.btn-outline:hover {
  background: var(--kt-mint-soft);
  box-shadow: inset 0 0 0 1px var(--kt-primary);
}

/* --- Sizes ----------------------------------------- */
.btn-large {
  padding: 0.95rem 2.1rem;
  font-size: 1.05rem;
}
.btn-medium { /* explicit default (legacy alias) */
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
}
.btn-small {
  padding: 0.45rem 1.1rem;
  font-size: 0.8125rem;
  gap: 0.35rem;
}

/* --- Icon-only ------------------------------------- */
.btn-icon {
  padding: 0.55rem;
  border-radius: 9999px;
}
.btn-icon.btn-small { padding: 0.4rem; }

/* Deprecated: use .btn .btn-soft .btn-small (kept as alias
   so stale cached markup doesn't break during rollout). */
.kt-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  border-radius: 9999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.8125rem;
  transition: all 0.2s ease-in-out;
}

/* =====================================================
   Time inputs on very narrow screens
   The .timepicker fields sit in tight side-by-side rows
   (weekly schedule, away form). Below 450px their px-4
   padding squeezes the value, so trim it to px-2.
   Element+class selector so it beats Tailwind's .px-4.
===================================================== */
@media (max-width: 449.98px) {
  input.timepicker {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* =====================================================
   Flatpickr — full brand theme
   Applies to every picker sitewide (booking, Grafikai…).
===================================================== */
.flatpickr-calendar {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  border: 1px solid var(--kt-border);
  border-radius: 16px;
  box-shadow: var(--kt-shadow-pop);
  padding: 6px 6px 8px;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  display: none; /* drop the speech-bubble arrow */
}

/* Flatpickr hard-codes the day grid to 307.875px — the calendar's own full
   width — so the padding above pushed the last column past the (overflow:
   hidden) days container and clipped Sunday. Size the grid to the padded
   content box instead; the day cells keep their 39px max-width, so columns
   still line up with the percentage-width weekday header. */
.flatpickr-days,
.flatpickr-calendar .dayContainer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Our global input:focus teal ring must not hit picker internals */
.flatpickr-calendar input:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}
.flatpickr-calendar ::selection {
  background: var(--kt-mint);
  color: var(--kt-primary-dark);
}

/* --- Header: month + year --------------------------- */
.flatpickr-months {
  align-items: center;
  padding-bottom: 4px;
}
.flatpickr-months .flatpickr-month {
  color: var(--kt-ink);
  height: 36px;
}
.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 2px;
  font-size: 15px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--kt-ink);
  background: var(--kt-mint-soft);
  border: 1px solid var(--kt-border);
  border-radius: 9999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--kt-mint);
}
.flatpickr-current-month .numInputWrapper {
  width: 4.2em;
  border-radius: 9999px;
  transition: background 0.15s ease;
}
.flatpickr-current-month .numInputWrapper:hover {
  background: var(--kt-mint-soft);
}
.flatpickr-current-month input.cur-year {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--kt-ink);
  padding: 4px 0;
}

/* Kill every spinner flavour on picker number inputs */
.flatpickr-calendar .numInputWrapper input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-calendar .numInputWrapper input::-webkit-inner-spin-button,
.flatpickr-calendar .numInputWrapper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}
.flatpickr-calendar .numInputWrapper span.arrowUp,
.flatpickr-calendar .numInputWrapper span.arrowDown {
  display: none; /* type or use arrow keys instead of fiddly spinners */
}

/* --- Prev / next month arrows ----------------------- */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 4px;
  height: 30px;
  width: 30px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--kt-mint-soft);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--kt-ink-soft);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--kt-primary);
}

/* --- Weekdays + day cells --------------------------- */
span.flatpickr-weekday {
  color: var(--kt-muted);
  font-weight: 700;
  font-size: 11px;
}
.flatpickr-day {
  color: var(--kt-ink-soft);
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--kt-mint-soft);
  border-color: var(--kt-mint);
}
.flatpickr-day.today {
  border-color: var(--kt-primary) !important;
  color: var(--kt-primary-dark);
  font-weight: 700;
}
.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
  background-color: var(--kt-primary) !important;
  border-color: var(--kt-primary) !important;
  color: white !important;
  font-weight: 700;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #c3d2ce;
  background: transparent;
  border-color: transparent;
}

/* --- Time picker ------------------------------------ */
.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: 1px solid var(--kt-border-soft);
  height: 44px;
  max-height: 44px;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  border-top: 0;
}
.flatpickr-time .numInputWrapper {
  height: 44px;
}
.flatpickr-time input {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--kt-ink);
  background: transparent;
}
.flatpickr-time input:hover,
.flatpickr-time .numInputWrapper:hover {
  background: var(--kt-mint-soft);
}
.flatpickr-time .flatpickr-time-separator {
  color: var(--kt-muted);
  font-weight: 700;
  height: 44px;
  line-height: 44px;
}

/* =====================================================
   Translatable-content disclosure
   Wraps the optional per-language fields (name_en, bio_en…)
   on provider forms. Mint panel so it reads as a secondary
   aside rather than another required section.
===================================================== */
.kt-translatable {
  border: 1px solid var(--kt-border);
  border-radius: 18px;
  background: var(--kt-mint-soft);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.kt-translatable[open] {
  border-color: #cfe8e1;
}

.kt-translatable > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  user-select: none;
  list-style: none; /* Firefox */
  transition: background-color 0.2s ease;
}

/* Safari/Chrome draw their own marker; we supply a chevron instead. */
.kt-translatable > summary::-webkit-details-marker {
  display: none;
}

.kt-translatable > summary:hover {
  background: #eaf6f2;
}

.kt-translatable > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--kt-primary);
  border-bottom: 2px solid var(--kt-primary);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.kt-translatable[open] > summary::before {
  transform: rotate(45deg);
}

.kt-translatable > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(14, 159, 151, 0.35);
}

.kt-translatable__title {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--kt-primary-dark);
  min-width: 0;
}

.kt-translatable__badge {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--kt-primary-dark);
  background: var(--kt-mint);
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
}

.kt-translatable__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.15rem 1.15rem;
}

.kt-translatable__hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--kt-muted);
  margin: 0;
}

/* The inputs inherit the shared field styling, which already carries a white
   background — that is what separates them from the mint panel. */
.kt-translatable textarea {
  min-height: 96px;
  resize: vertical;
}

@media (max-width: 639.98px) {
  .kt-translatable {
    border-radius: 14px;
  }
  .kt-translatable > summary {
    padding: 0.8rem 0.9rem;
    gap: 0.5rem;
    /* No wrapping: the title shrinks and wraps within itself (it has
       min-width: 0), which keeps the badge on the first line instead of
       stranding it alone on a second one. */
    align-items: flex-start;
  }
  .kt-translatable > summary::before {
    /* Nudge down so the chevron lines up with the first line of a
       title that has wrapped onto two. */
    margin-top: 0.3rem;
  }
  .kt-translatable__badge {
    margin-top: 0.05rem;
  }
  .kt-translatable__title {
    font-size: 0.9rem;
  }
  .kt-translatable__body {
    padding: 0 0.9rem 0.9rem;
    gap: 0.85rem;
  }
}

/* =====================================================
   Language switcher — segmented LT | EN pill
===================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--kt-mint-soft);
  box-shadow: inset 0 0 0 1px #dde5e2;
}

/* One <form> per language (each needs its own `next`); strip the browser's
   default form margin so the group hugs the buttons. */
.lang-switch form {
  margin: 0;
  display: flex;
}

.lang-switch__opt {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--kt-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch__opt:hover {
  color: var(--kt-primary);
  background: rgba(14, 159, 151, 0.1);
}

.lang-switch__opt.is-active {
  background: #fff;
  color: var(--kt-primary-dark);
  box-shadow: 0 1px 2px rgba(8, 48, 46, 0.12);
  cursor: default;
}

.lang-switch__opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 159, 151, 0.35);
}

/* =====================================================
   Misc
===================================================== */
.account-pill:hover {
  background-color: rgba(14, 159, 151, 0.1);
  color: var(--kt-primary);
}

button#accountMenuButton:hover {
  background-color: rgba(14, 159, 151, 0.1) !important;
  color: var(--kt-primary) !important;
}

#kt-open-waitlist:hover,
#kt-open-waitlist:hover svg,
#kt-open-waitlist:hover span {
  color: var(--kt-primary) !important;
  fill: var(--kt-primary) !important;
}

/* Allow teal hover globally for links */
a:hover {
  color: var(--kt-primary) !important;
}

/* Solid-background CTA links keep a legible text colour in every state
   (override both the global teal a:hover AND the .navbar a colour above) */
a.kt-cta-dark, a.kt-cta-dark:hover { color: #fff !important; }
a.kt-cta-accent, a.kt-cta-accent:hover { color: var(--kt-ink) !important; }
a.kt-cta-mint, a.kt-cta-mint:hover { color: var(--kt-primary-dark) !important; }

form label {
  display: block;
  margin-bottom: 0.35rem; /* space between label and input */
}

.opacity-50 {
  opacity: 0.5;
}

/* =====================================================
   Reusable components (design system primitives)
   Prefer these over ad-hoc arbitrary-value utility
   clusters. See DESIGN_SYSTEM.md and /styleguide/.
===================================================== */

/* Surface card */
.kt-card {
  background: var(--kt-surface);
  border: 1px solid var(--kt-border);
  border-radius: 20px;
}
.kt-card--pad { padding: 1.5rem; }
.kt-card--hover { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.kt-card--hover:hover {
  border-color: rgba(14, 159, 151, .5);
  box-shadow: var(--kt-shadow-card);
}

/* Full-bleed section (px-[6vw] py-14) + background variants */
.kt-section { padding: 3.5rem 6vw; }
.kt-section--white { background: var(--kt-surface); border-top: 1px solid var(--kt-border-soft); }
.kt-section--soft  { background: var(--kt-bg); }
.kt-section--mint  { background: #eef7f4; }

/* Chip / badge (soft mint pill) */
.kt-chip,
.kt-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--kt-mint);
  color: var(--kt-primary-dark);
  border-radius: 9999px;
  font-weight: 700;
  white-space: nowrap;
}
.kt-chip  { padding: .5rem .9rem; font-size: .8125rem; }
.kt-badge { padding: .35rem .7rem; font-size: .75rem; }
.kt-chip--active {
  background: var(--kt-primary);
  color: #fff;
}

/* Chips are often links, so the global teal a:hover would recolour their text —
   on an active chip that paints teal-on-teal and the label vanishes. Pin the
   text colour in every state and signal hover with the background instead. */
a.kt-chip, a.kt-chip:hover { color: var(--kt-primary-dark) !important; }
a.kt-chip:hover { background: #c7e9e0; }
a.kt-chip--active, a.kt-chip--active:hover { color: #fff !important; }
a.kt-chip--active:hover { background: var(--kt-primary-hover); }
.kt-chip { transition: background-color .15s ease; }

/* Status badge variants (waitlist / reservation states) */
.kt-badge--warn    { background: #fef3c7; color: #92400e; }
.kt-badge--success { background: #d1fae5; color: #065f46; }
.kt-badge--neutral { background: #e5e7eb; color: #374151; }
.kt-badge--danger  { background: #fee2e2; color: #b91c1c; }

/* Text input (matches forms.py BASE_INPUT tokens) */
.kt-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #dde5e2;
  border-radius: .75rem;
  font-size: 15px;
  color: var(--kt-ink);
  background: #fff;
}
.kt-input::placeholder { color: var(--kt-muted); }

/* =====================================================
   Star rating primitive (.kt-stars)
   Fractional fill via a clipped gold overlay.
===================================================== */
.kt-stars {
  --kt-star-size: 15px;
  --kt-star-gap: 2px;
  position: relative;
  display: inline-flex;
  line-height: 1;
  vertical-align: middle;
}
.kt-stars__bg,
.kt-stars__fill {
  display: flex;
  align-items: center;
  gap: var(--kt-star-gap);
}
.kt-stars__bg svg,
.kt-stars__fill svg {
  width: var(--kt-star-size);
  height: var(--kt-star-size);
  flex-shrink: 0;
}
.kt-stars__bg { color: #d9e4e1; }
.kt-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  color: var(--kt-star);
}
.kt-stars--lg { --kt-star-size: 20px; }
.kt-stars--sm { --kt-star-size: 13px; }
.kt-stars-value { font-weight: 700; color: var(--kt-ink); }
.kt-stars-count { color: var(--kt-muted); }