/* MateHire platform — shared styles. Brand tokens match the live site. */
/* Breakpoints used throughout: 550 / 750 / 950 / 1130px */
:root {
  --green: #2A5C3F;
  --amber: #E8973A;
  --cream: #F7F3EE;
  --brown: #3B3028;
  --white: #FFFFFF;
  --error: #B3402A;
  --ok: #2A5C3F;
  --radius: 14px;
  --shadow-card: 0 2px 10px rgba(59, 48, 40, 0.07);
  --line: #E4DCCF;
  --muted: #8A7F6E;
  --tint-hover: #F0EAE0;
  --tint-range: #DCEEE2;
  --tint-badge: #F0E9DB;
  --disabled-bg: #E7E1D5;
  --disabled-text: #B8AD9C;
  --w-page: none;   /* was 1120px — uncapped to match how-it-works/, which never caps its section width either */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --t-xs: 0.75rem;
  --t-sm: 0.85rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.35rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 99px;
}

* { box-sizing: border-box; }
/* The [hidden] attribute must always win over an author `display` rule of the
   same specificity (e.g. a class that sets display:flex for layout) — without
   this, elements toggled via `.hidden = true/false` in JS can stay visible. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header, footer and the mobile tab bar now live in css/chrome.css,
   which every page on the site loads. They were moved out of here so the
   marketing pages could share the exact same chrome as the app pages. */


main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 16px 48px;
}

/* account.html's own left-hand tabs (Account details / Notifications /
   Payments) — switches panels within the Account page itself. */
.account-shell { display: flex; gap: var(--s-6); align-items: flex-start; margin-top: var(--s-4); }
.account-tabs { flex-shrink: 0; width: 200px; display: flex; flex-direction: column; gap: 2px; }
.account-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font: 600 0.92rem 'DM Sans', sans-serif;
  color: var(--brown);
  background: none;
  border: none;
  cursor: pointer;
}
.account-tab:hover { background: var(--tint-hover); }
.account-tab[aria-selected="true"] { background: var(--tint-range); color: var(--green); }
.account-panels { flex: 1; min-width: 0; }
@media (max-width: 650px) {
  .account-shell { flex-direction: column; }
  .account-tabs { width: 100%; flex-direction: row; overflow-x: auto; }
}

/* Simple horizontal underline tabs — used where a page needs to split one
   list into two views (e.g. bookings.html's Current/Past) rather than
   account.html's vertical settings-style tabs. */
.tab-row { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); margin: 4px 0 18px; }
.tab-btn {
  padding: 9px 2px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: 600 0.92rem 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--brown); }
.tab-btn[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(59, 48, 40, 0.08);
  padding: 28px 24px;
  width: 100%;
  max-width: 440px;
}
.card.wide { max-width: 560px; }
.card.xwide { max-width: 960px; }

h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  margin: 0 0 6px;
  color: var(--green);
}
.sub { margin: 0 0 22px; color: #6b5f55; font-size: 0.95rem; }

h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  color: var(--green);
  margin: 22px 0 6px;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 14px 0 5px;
}
.hint { font-weight: 400; color: #8a7d70; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], select, textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid #d9d0c5;
  border-radius: 10px;
  font: inherit;
  background: #fffdfb;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(232, 151, 58, 0.45);
  border-color: var(--amber);
}

.checks { display: flex; gap: 18px; margin-top: 6px; }
.checks label { display: flex; align-items: center; gap: 7px; font-weight: 500; margin: 0; }
.checks input { width: 18px; height: 18px; accent-color: var(--green); }

button.primary {
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font: 700 1rem 'DM Sans', sans-serif;
  cursor: pointer;
}
button.primary:hover { background: #234d34; }
button.primary:focus-visible { outline: 3px solid rgba(232,151,58,0.6); }
button.primary:disabled { opacity: 0.6; cursor: wait; }

button.ghost {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
  border-radius: 10px;
  font: 600 0.95rem 'DM Sans', sans-serif;
  cursor: pointer;
}
button.ghost:hover { background: rgba(42,92,63,0.06); }

/* .btn family — inline/header chrome. Distinct from button.primary/.ghost
   (which are width:100% for form cards) so header buttons can sit inline. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font: 600 0.9rem 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid rgba(232,151,58,0.6); }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: #234d34; }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn-ghost:hover { background: rgba(42,92,63,0.06); }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }

.msg {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  display: none;
}
.msg.error { display: block; background: #f9e8e3; color: var(--error); }
.msg.ok    { display: block; background: #e7efe9; color: var(--ok); }

/* Status badges — same component, different status vocab per page (listing vs booking) */
.pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.pill.active, .pill.confirmed { background: #e7efe9; color: var(--green); }
.pill.paused, .pill.draft { background: #f3ece3; color: #9a7b4f; }
.pill.requested { background: #fdf1e0; color: #b0762a; }
.pill.declined, .pill.cancelled { background: #f0ebe5; color: #9a8d80; }
.pill.completed { background: #efe8df; color: var(--brown); }

.mini {
  padding: 7px 12px;
  font-size: 0.82rem;
  border-radius: 8px;
  border: 1.5px solid var(--green);
  background: none;
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
}
.mini.solid { background: var(--green); color: #fff; }
.mini.quiet { border-color: #c9bcae; color: #9a8d80; }
.mini.danger { border-color: var(--error); color: var(--error); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3ece3;
  color: #9a7b4f;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 0.8rem;
  margin: 4px 6px 0 0;
}

.foot-link { text-align: center; margin-top: 18px; font-size: 0.92rem; }
.foot-link a { color: var(--green); font-weight: 600; }

.btn-google {
  width: 100%;
  margin-top: 0;
  padding: 12px;
  background: var(--white);
  color: var(--brown);
  border: 1.5px solid #d9d0c5;
  border-radius: 10px;
  font: 600 0.95rem 'DM Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-google:hover { background: #fafaf8; }
.btn-google:focus-visible { outline: 3px solid rgba(232, 151, 58, 0.6); }
.btn-google:disabled { opacity: 0.6; cursor: wait; }

.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9a8d80; font-size: 0.82rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }



/* Save/heart toggle — overlays listing card images. No circle/background —
   just the heart, dimmed white until saved, then solid amber. Backed by the
   real `favorites` table (see browse.html/gear.html), not localStorage. An
   inline SVG (not a ♥ glyph) so it renders identically on every platform —
   text glyphs fall back to whatever heart the OS/browser's font or emoji
   set ships, which made desktop noticeably skinnier than mobile. */
.save-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.save-btn svg path { fill: currentColor; }
.save-btn:hover { color: rgba(255, 255, 255, 0.85); }
.save-btn.saved { color: var(--amber); }
.save-btn:disabled { opacity: 0.6; cursor: wait; }
.save-btn:focus-visible { outline: 3px solid rgba(232, 151, 58, 0.6); }

/* Shared suburb/location autocomplete (js/geo-autocomplete.js) */
.geo-field { position: relative; }
.geo-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
}
.geo-results[hidden] { display: none; }
.geo-suggestion {
  padding: 10px 13px;
  font-size: 0.88rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.geo-suggestion:last-child { border-bottom: none; }
.geo-suggestion:hover { background: var(--cream); }
.geo-suggestion.geo-loading { color: #8a7d70; cursor: default; }
.geo-suggestion.geo-loading:hover { background: none; }

/* Approximate location map (gear.html) */
.map-pin { border-radius: var(--r-lg); overflow: hidden; height: 220px; margin-top: var(--s-4); }
.map-pin-note { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

/* Wireframe skeleton loading state — shimmering placeholder blocks that
   echo the shape of the content about to arrive, instead of "Loading…"
   text. Screen reader users still get an announcement via .sr-only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skel {
  position: relative;
  overflow: hidden;
  background: var(--line);
  border-radius: var(--r-sm);
  animation: skel-pulse 1.3s ease-in-out infinite;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 50%, rgba(255,255,255,0) 100%);
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
@keyframes skel-pulse {
  0%, 100% { background-color: var(--line); }
  50% { background-color: #EDE6DA; }
}
.skel-line { display: block; height: 13px; border-radius: var(--r-sm); }
.skel-line.sm { height: 10px; }
.skel-line.lg { height: 20px; }
.skel-circle { border-radius: 50%; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .skel, .skel::after { animation: none; }
}

/* Responsive overrides live last in the file so they win the cascade over
   earlier same-specificity rules (e.g. .btn's display:inline-flex),
   regardless of source position of the rule being overridden. */