/* Restaurants Near Me surface styles — loaded only on restaurantsnearme.co.nz.
   Warm dining palette. Colour mapping vs Business Directory:
     BD navy  (primary brand)   -> RNM herb GREEN
     BD gold  (secondary accent) -> RNM ember ORANGE
   RNM shares BD's page STRUCTURE (Tailwind layout); only the colour tokens and the
   auth/error skins differ. The --brand family below overrides the globals.css defaults
   so every shared discovery component (listing cards, indexes, pills, nav) renders green
   here with no component edits. */

:root {
  /* Primary brand (mirrors BD navy) — GREEN. Overrides globals.css --brand defaults. */
  --brand: #24603d;            /* herb green — brand + primary actions */
  --brand-deep: #1A4B2E;       /* green hover/pressed (mirrors #0a2569) */
  --brand-soft: #E4F1E7;       /* green tint — pills, chips (mirrors #c1e7ff) */
  --brand-row-hover: #EFF7F1;  /* faint green list-row hover (mirrors BD's faint blue #F3F8FF) */

  /* Secondary accent (mirrors BD gold) — ORANGE. Overrides globals.css gold defaults so
     premium cards/badges/rings read warm-orange instead of gold on this surface. */
  --brand-gold: #E8590C;       /* gold accent/border -> vivid pumpkin orange (midway between the old warm #E8843C and deep ember #C1440E) */
  --brand-gold-bright: #F26A18;/* brighter gold (saved, ring, chart bar, pill bg) -> orange */
  --brand-gold-badge: #E8590C; /* premium badge bg -> orange */
  --brand-cream: #FDEFE4;      /* premium card cream -> warm peach */
  /* Text ON the solid orange accent = white for contrast (BD uses dark ink on light gold).
     --brand-gold-ink skins the Premium badge; --brand-gold-cta skins the CTA pills. */
  --brand-gold-ink: #FFFFFF;   /* Premium badge label -> white on orange */
  --brand-gold-cta: #FFFFFF;   /* "List your restaurant" CTA pill -> white on orange */

  /* Named aliases + secondary accent (mirrors BD gold) — ORANGE. */
  --rnm-herb: #24603d;
  --rnm-herb-deep: #1A4B2E;
  --rnm-herb-soft: #E4F1E7;
  --rnm-ember: #C1440E;        /* orange — secondary accent / highlights */
  --rnm-ember-deep: #8B2F06;   /* orange hover/pressed */
  --rnm-ember-soft: #FBEadf;   /* orange tint */
  --rnm-warm: #F7FBF8;         /* page background — faint green tint (mirrors BD's #fafafa) */
  --rnm-ink: #2A1F1A;          /* body text */
  --rnm-ink-soft: #5C4E44;     /* secondary text */
  --rnm-ink-faint: #8A7D74;    /* tertiary text */
  --rnm-line: rgba(42, 31, 26, .12);

  /* Page background — override globals.css --background (#fafafa neutral) so the shared
     BD structure renders on a faint green tint here instead of neutral near-white. */
  --background: #F7FBF8;
}

/* Auth skin — mirrors .bd-auth, swaps navy for the green brand token */
.rnm-auth {
  border: 1px solid #e3ece5;
  border-radius: 1rem;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 18px 40px -20px rgba(36, 96, 61, 0.28);
}
.rnm-auth .auth-card {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.rnm-auth .auth-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.rnm-auth .auth-form .wv-field label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.55rem;
}
main.rnm-auth .auth-form .wv-field input {
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0.8rem 0.9rem;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
main.rnm-auth .auth-form .wv-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(36, 96, 61, 0.12);
}
.rnm-auth .auth-submit {
  background: var(--brand);
  color: #fff;
  border-radius: 0.625rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.5rem;
}
.rnm-auth .auth-submit:hover {
  opacity: 1;
  background: var(--brand-deep);
}
.rnm-auth .auth-links {
  margin-top: 1rem;
}
.rnm-auth .auth-link {
  color: var(--brand);
  font-weight: 500;
}
.rnm-auth .auth-link:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}

/* Homepage eyebrow — small caps label above the hero title */
.rnm-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Category/region pill — green tint, inverts to solid on hover */
.rnm-pill {
  transition: background-color 0.15s, color 0.15s;
}

/* Bottom CTA + pricing buttons — the chevron-to-arrow growth hook (`--growth`). These are
   colour-agnostic (they only drive the shared BdArrowButton animation) and live in BD's CSS,
   but RNM loads its own sheet instead, so without them --growth is unset, scaleX(var(--growth))
   is invalid, and the tail renders full-length — a permanent arrow that never animates. */
.bd-net-cta {
  --growth: 0;
}
.bd-net-cta-btn {
  --growth: 0;
}
.bd-net-cta-btn:hover {
  --growth: 1;
}
.bd-plan-btn {
  --growth: 0;
}
.bd-plan-btn:hover,
.bd-plan-btn:focus-visible {
  --growth: 1;
}

/* Error boundary — Restaurants Near Me tokens */
.rnm-error-page-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.rnm-error-page-title {
  margin-top: 0.85rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
}
.rnm-error-page-lede {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #4b5563;
}
.rnm-error-page-btn {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: var(--brand);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.rnm-error-page-btn:hover {
  background: var(--brand-deep);
}