/*
  CLIENT: Ödeborgs Buss AB (odeborgbuss)
  SOURCE: odeborgbuss.se — --darkColor/#124262 nav & hover, --accentColor/#388CC4 CTA default,
          --bodyBackgroundColor/#F5F9FC panels, font Work Sans.

  SCOPE: Loaded only when NEXT_PUBLIC_CLIENT_ID=odeborgbuss.
*/
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap');

:root {
  /* ===== BRAND (odeborgbuss.se) ===== */
  --primary: 203 69% 23%;           /* #124262 */
  --primary-hex: #124262;
  --primary-hover: 203 69% 18%;    /* darker nav/footer hover */
  --secondary: 203 69% 23%;        /* headings on light sections */
  --accent: 204 56% 49%;           /* #388cc4 — CTA / links */

  --background: 0 0% 100%;
  --foreground: 203 69% 23%;       /* #124262 body text  on site */
  --heading-strong: 203 69% 23%;
  --light-gray: 204 50% 97%;       /* #F5F9FC panels */
  --text-color: 203 69% 23%;
  --muted-text: 203 30% 35%;
  --border-color: 204 45% 90%;     /* #DEECF5-ish */
  --footer-bg: 203 69% 23%;
  --header-border: 203 69% 18%;

  --primary-foreground: 0 0% 100%;
  --secondary-foreground: 0 0% 100%;
  --accent-foreground: 0 0% 100%;

  --muted: 40 14% 96%;
  --muted-foreground: 222 16% 38%;
  --border: 40 12% 85%;
  --input: 40 12% 85%;
  --ring: 204 56% 49%;
  --destructive: 0 68% 42%;
  --destructive-foreground: 0 0% 100%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 24% 20%;
  --card: 0 0% 100%;
  --card-foreground: 222 24% 20%;

  --font-primary: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "Work Sans", sans-serif;
  --font-fallback: Arial, sans-serif;
  --font-buttons: "Work Sans", sans-serif;
  --font-inputs: "Work Sans", sans-serif;
  --btn-font-weight: 700;
  --input-font-weight: 400;

  --h1-size: 36px;
  --h1-size-mobile: 28px;
  --h2-size: 28px;
  --h2-size-mobile: 24px;
  --h3-size: 22px;
  --h3-size-mobile: 20px;
  --h4-size: 18px;
  --body-size: 16px;
  --small-size: 14px;
  --caption-size: 12px;

  --section-padding: 60px;
  --container-max-width: 1200px;
  --container-padding: 20px;
  --container-padding-mobile: 15px;
  --element-margin: 20px;
  --line-height: 1.5;
  --radius: 0.5rem;

  --btn-primary-padding: 12px 24px;
  --btn-secondary-padding: 10px 22px;
  --btn-radius: 4px;

  --image-radius: 8px;
  --shadow-default: 0 2px 4px rgba(0, 0, 0, 0.1);
  --logo-width: 218px;

  --mobile-breakpoint: 768px;
  --input-radius: 4px;
  --tag-radius: 0.75rem;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  line-height: var(--line-height);
  color: hsl(var(--text-color));
  background-color: hsl(var(--background));
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--h1-size);
  font-family: var(--font-secondary);
  font-weight: 700;
  color: hsl(var(--heading-strong));
  margin: 0 0 var(--element-margin) 0;
}

h2, h3 {
  font-size: var(--h2-size);
  font-family: var(--font-secondary);
  font-weight: 600;
  color: hsl(var(--secondary));
  margin: 0 0 var(--element-margin) 0;
}

h3 {
  font-size: var(--h3-size);
}

h4, h5 {
  font-size: var(--h4-size);
  font-family: var(--font-primary);
  font-weight: 400;
  color: hsl(var(--secondary));
  text-transform: none;
  margin: 0 0 var(--element-margin) 0;
}

h6 {
  font-size: var(--small-size);
  font-family: var(--font-primary);
  font-weight: 400;
  color: hsl(var(--secondary));
  margin: 0 0 var(--element-margin) 0;
}

p {
  font-size: var(--body-size);
  line-height: var(--line-height);
  color: hsl(var(--text-color));
  margin: 0 0 var(--element-margin) 0;
}

a {
  color: hsl(var(--accent));
}

.small-text {
  font-size: var(--small-size);
  color: hsl(var(--muted-text));
}

.caption-text {
  font-size: var(--caption-size);
  color: hsl(var(--muted-text));
}

/* CTA: accent #388cc4 default → primary #124262 on hover (odeborgbuss.se "Kontakta oss") */
.btn-primary {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border: none;
  padding: var(--btn-primary-padding);
  border-radius: var(--btn-radius);
  font-family: var(--font-buttons);
  font-size: var(--body-size);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: none;
  padding: var(--btn-secondary-padding);
  border-radius: var(--btn-radius);
  font-family: var(--font-buttons);
  font-size: var(--body-size);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.9);
}

.btn-outline {
  background-color: transparent;
  color: hsl(var(--primary));
  border: 2px solid hsl(var(--primary));
  padding: calc(var(--btn-primary-padding) - 2px);
  border-radius: var(--btn-radius);
  font-family: var(--font-buttons);
  font-size: var(--body-size);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-ghost {
  background-color: transparent;
  color: hsl(var(--text-color));
  border: none;
  padding: var(--btn-primary-padding);
  border-radius: var(--btn-radius);
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-ghost:hover {
  background-color: hsl(var(--muted));
}

.input-field {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.5rem;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  width: 100%;
}

.input-field:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.card {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-default);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-image {
  margin: -1.5rem -1.5rem 1rem -1.5rem;
}

.card-content {
  display: block;
}

.card-title {
  font-size: var(--h3-size);
  font-weight: 700;
  color: hsl(var(--text-color));
  margin: 0 0 0.5rem 0;
}

.card-text {
  color: hsl(var(--muted-text));
  line-height: var(--line-height);
  margin: 0 0 1rem 0;
}

.text-primary { color: hsl(var(--primary)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-accent { color: hsl(var(--accent)); }
.text-muted { color: hsl(var(--muted-text)); }

.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-light { background-color: hsl(var(--light-gray)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-background { background-color: hsl(var(--background)); }

.border-primary { border-color: hsl(var(--primary)); }
.border-secondary { border-color: hsl(var(--secondary)); }
.border-border { border-color: hsl(var(--border)); }

.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-foreground { color: hsl(var(--foreground)); }

.header {
  background-color: hsl(var(--primary));
  border-bottom: 1px solid hsl(var(--header-border));
  padding: 1rem 0;
}

.header .logo {
  width: var(--logo-width);
  height: auto;
}

.footer {
  background-color: hsl(var(--footer-bg));
  color: white;
  padding: 2rem 0;
}

.default-img-radius {
  border-radius: var(--image-radius);
  box-shadow: var(--shadow-default);
}

input, textarea, select {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  border: 1px solid hsl(var(--border-color));
  border-radius: var(--btn-radius);
  padding: 0.5rem;
  background-color: hsl(var(--background));
  color: hsl(var(--text-color));
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: hsl(var(--primary));
}

@media (max-width: 768px) {
  :root {
    --container-padding: var(--container-padding-mobile);
  }

  h1 { font-size: var(--h1-size-mobile); }
  h2 { font-size: var(--h2-size-mobile); }
  h3 { font-size: var(--h3-size-mobile); }

  .section {
    padding: calc(var(--section-padding) / 2) 0;
  }

  /* Horizontal only — `padding: 0 …` clears Tailwind `py-*` on `.container` (e.g. Footer1 on mobile). */
  .container {
    padding-inline: var(--container-padding-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* === App shell — blue header/footer like vikingbuss.com (not white-bar clients) === */

body button,
body .btn,
body [type="button"],
body [type="submit"],
body [role="button"] {
  font-family: var(--font-buttons, "Dosis", sans-serif) !important;
  font-weight: var(--btn-font-weight, 700) !important;
}

body input,
body textarea,
body select {
  font-family: var(--font-inputs, "Work Sans", sans-serif) !important;
  font-weight: var(--input-font-weight, 400) !important;
}

/* Shadcn Button default variant — same CTA pattern as odeborgbuss.se */
body button.bg-primary,
body a.bg-primary,
body [type="submit"].bg-primary {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

body button.bg-primary:hover,
body a.bg-primary:hover,
body [type="submit"].bg-primary:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/*
  Logo height — Ödeborg header/footer (one size everywhere).
*/
:root {
  --header-height: 64px;
  --odeborg-logo-height: 40px;
  --odeborg-logo-max-width: 14rem;
}

/* Unified brand logo — header + footer (overrides Logo.tsx h-14/h-20 Tailwind) */
body header .container.relative a[href="/"] img,
body header .container.relative a[href="/"] picture img,
body header .container.relative a[href="/"] span[role="img"],
body header .container.relative a[href="/"] span[role="img"] svg,
body footer .footer-main-brand img,
body footer .footer-main-brand picture img,
body footer .footer-main-brand span[role="img"],
body footer .footer-main-brand span[role="img"] svg {
  display: block !important;
  height: var(--odeborg-logo-height) !important;
  max-height: var(--odeborg-logo-height) !important;
  width: auto !important;
  max-width: min(100%, var(--odeborg-logo-max-width)) !important;
  object-fit: contain !important;
}

body header .container.relative a[href="/"] > div.relative,
body header .container.relative a[href="/"] .relative.inline-block,
body footer .footer-main-brand > div.relative,
body footer .footer-main-brand .relative.inline-block {
  height: var(--odeborg-logo-height) !important;
  max-height: var(--odeborg-logo-height) !important;
  line-height: 0 !important;
}

body header .container.relative a[href="/"] [class*="max-h-"],
body footer .footer-main-brand [class*="max-h-"] {
  max-height: var(--odeborg-logo-height) !important;
}

body header .container.relative a[href="/"] [class*="h-14"],
body header .container.relative a[href="/"] [class*="h-16"],
body header .container.relative a[href="/"] [class*="h-20"],
body footer .footer-main-brand [class*="h-14"],
body footer .footer-main-brand [class*="h-16"],
body footer .footer-main-brand [class*="h-20"] {
  height: var(--odeborg-logo-height) !important;
  max-height: var(--odeborg-logo-height) !important;
}

body .header,
body header,
body nav[role="navigation"] {
  background-color: hsl(var(--primary)) !important;
  border-bottom: 1px solid hsl(var(--header-border)) !important;
  min-height: var(--header-height);
}

/* Ödeborg: bus-only site — hide hardcoded tour calendar link (Hero1Header "Resor"). */
header a[href="/resekalender"] {
  display: none !important;
}

/* Ödeborg start page: headline + body text only — no tour search widget in hero. */
html body main.min-h-screen > div.relative.flex.min-h-screen.flex-col .hero-search-widget {
  display: none !important;
}

/* Ödeborg start page: "Fortsätt ner" above hero text overlay (z-2). */
html body main.min-h-screen > div.relative.flex.min-h-screen.flex-col > div.relative.z-\[1\].mt-auto {
  z-index: 3 !important;
}

/*
  Home immersive hero (top of page only): translucent primary + blur over the photo.
  Scrolled state uses `.immersive-hero-home-header-solid` on the layout root (see ClientLayoutWrapper).
*/
.immersive-hero-home-root:not(.immersive-hero-home-header-solid) > header {
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    hsl(var(--primary) / 0.9) 0%,
    hsl(var(--primary) / 0.55) 45%,
    hsl(var(--primary) / 0.12) 85%,
    hsl(var(--primary) / 0) 100%
  ) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

.immersive-hero-home-root.immersive-hero-home-header-solid > header {
  background-color: hsl(var(--primary)) !important;
  background-image: none !important;
  border-bottom: 1px solid hsl(var(--header-border)) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

/*
 * Hero1 home headline: match Resemakarn client.css (text-4xl / text-6xl — 2.25rem / 5rem).
 * Mixed case on hero (overrides global h1 uppercase); weight 600 aligns with Resemakarn h1 / Oswald.
 */
html body main.min-h-screen > div.relative.flex.min-h-screen.flex-col h1 {
  font-size: 2.25rem !important; /* text-4xl */
  line-height: 1.12 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

@media (min-width: 768px) {
  html body main.min-h-screen > div.relative.flex.min-h-screen.flex-col h1 {
    font-size: 5rem !important; /* text-6xl — matches resemakarn/client.css */
    white-space: nowrap;
  }
}

/*
  Desktop: logo column — align header mark with footer brand column.
*/
@media (min-width: 768px) {
  body header .container.relative > div.hidden.h-10.items-center.justify-end.md\:flex {
    position: relative;
    z-index: 3;
  }

  /* Match `px-4` content inset so the mark lines up with Footer1 and the in-flow `w-48` nav spacer */
  body header .container.relative > div.absolute.top-0.md\:flex {
    left: 1rem !important;
    right: auto !important;
    width: auto !important;
    max-width: min(42vw, var(--odeborg-logo-max-width)) !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /*
    Vikingbuss paints the whole header (tertiary + nav) primary blue — center the mark in the full
    inline --header-height strip. Do not clip to h-24 only: that shifts the visual center ~20px low
    when --header-height is 136px (h-10 + h-24).
  */
  body header .container.relative > div.absolute.top-0 .w-48,
  body header .container.relative > div.absolute.top-0 .w-64,
  body header .container.relative > div.absolute.top-0 .w-72 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
    width: min(var(--odeborg-logo-max-width), 42vw) !important;
    max-width: none !important;
  }

  body header .container.relative > div.absolute.top-0 .w-48 > div,
  body header .container.relative > div.absolute.top-0 .w-64 > div,
  body header .container.relative > div.absolute.top-0 .w-72 > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body header .container.relative > div.absolute.top-0 .w-48 a,
  body header .container.relative > div.absolute.top-0 .w-64 a,
  body header .container.relative > div.absolute.top-0 .w-72 a {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: 0 !important;
  }

  body header .container.relative > div.absolute.top-0 .w-48 a > div.relative,
  body header .container.relative > div.absolute.top-0 .w-64 a > div.relative,
  body header .container.relative > div.absolute.top-0 .w-72 a > div.relative {
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
  }

  body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex {
    position: relative;
    z-index: 2;
  }
}

body header .bg-primary,
body .header .bg-primary,
body nav[role="navigation"] .bg-primary {
  background-color: hsl(var(--primary)) !important;
}

/* Footer brand column — align with header when no secondary menu columns */
@media (min-width: 768px) {
  body footer .footer-main-brand {
    justify-content: flex-start !important;
  }

  body footer .container > div.flex > div:first-child.w-full {
    width: auto !important;
    max-width: min(42vw, var(--odeborg-logo-max-width)) !important;
  }

  body footer .footer-main-brand .relative span[role="img"] {
    line-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/*
 * Contact modal: scope logo sizing to the left column’s logo block only — the panel is
 * `bg-primary/90` and also contains Lucide Phone/Mail; a global `.bg-primary svg` rule blows them up.
 */
[role="dialog"] .contact-modal-left-panel > div:first-child svg,
[role="dialog"] .contact-modal-left-panel > div:first-child img,
[role="dialog"] .contact-modal-left-panel > div:first-child span[role="img"],
[role="dialog"] .contact-modal-left-panel > div:first-child span[role="img"] svg {
  height: var(--odeborg-logo-height) !important;
  width: auto !important;
  max-height: var(--odeborg-logo-height) !important;
  max-width: min(100%, var(--odeborg-logo-max-width)) !important;
}

[role="dialog"] .contact-modal-left-panel .flex.items-center.space-x-3 > svg {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
}

body .footer,
body footer,
body .site-footer {
  background-color: hsl(var(--footer-bg)) !important;
  border-top: 1px solid hsl(var(--header-border)) !important;
  flex-grow: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

body footer .container {
  min-height: 0;
}

body footer .bg-primary,
body .footer .bg-primary,
body .site-footer .bg-primary {
  background-color: hsl(var(--footer-bg)) !important;
}

/*
 * Main header chrome (Hero1 > .container): light text on blue — scoped like Resemakarn so
 * `header > div[role="menu"]` (fold-out) keeps dark text on white; unscoped `header *` caused white-on-white.
 */
body header > .container,
body header > .container * {
  color: hsl(var(--primary-foreground)) !important;
  opacity: 1 !important;
}

/* Booking engine header: force primary-foreground text at any nesting depth (container is not a direct child of header in BookingNavBar) */
body header.booking-engine-header .container,
body header.booking-engine-header .container * {
  color: hsl(var(--primary-foreground)) !important;
}

/* Booking engine header stepper circles: on navy header, active circle must stand out from bg */
body header.booking-engine-header .booking-step-active {
  background-color: white !important;
  color: hsl(var(--primary)) !important;
}
/* Inactive step circles: semitransparent white so the circle outline is visible on navy */
body header.booking-engine-header .booking-step-inactive {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Hero1Header top + primary rows — same scale/weight as Resemakarn (`resemakarn/client.css` Travelize alignment). */
body header .container.relative > div.hidden.h-10.items-center.justify-end.md\:flex nav a {
  font-family: var(--font-primary), "PT Sans", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.462 !important;
  letter-spacing: 0 !important;
}

body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > nav a,
body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > nav button {
  font-family: var(--font-secondary), "Dosis", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  letter-spacing: 0 !important;
}

body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > div.flex.items-center > div.hidden.md\:flex span {
  font-family: var(--font-primary), "PT Sans", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.462 !important;
}

/* Mega menu panel: dark text on white (same selectors as Resemakarn). */
body header > div[role="menu"] .bg-white,
body header > div[role="menu"] .bg-white * {
  color: hsl(var(--foreground)) !important;
  opacity: 1 !important;
}

body header > div[role="menu"] .bg-white .text-primary,
body header > div[role="menu"] .bg-white a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* Header links on blue — scoped to chrome container only */
body header > .container a:hover {
  opacity: 0.92;
}

body header .hover\:text-white:hover {
  color: white !important;
}

/*
  Hero1Header: outline Contact btn uses bg-background + container chrome forces light text on blue.
  Sök uses border-primary on blue — low contrast. Style both direct action buttons in the nav row only.
*/
body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > div.flex.items-center > button {
  background-color: transparent !important;
  border-color: hsl(var(--primary-foreground) / 0.55) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: none !important;
}

body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > div.flex.items-center > button:hover {
  background-color: hsl(var(--primary-foreground) / 0.12) !important;
  border-color: hsl(var(--primary-foreground) / 0.95) !important;
  color: hsl(var(--primary-foreground)) !important;
}

body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > div.flex.items-center > button:focus-visible {
  outline: 2px solid hsl(var(--primary-foreground) / 0.9) !important;
  outline-offset: 2px !important;
}

body header .container.relative > div.hidden.h-24.items-center.justify-between.md\:flex > div.flex.items-center > button svg {
  color: inherit !important;
  stroke: currentColor !important;
}

body .footer,
body footer,
body .site-footer,
body .footer *,
body footer *,
body .site-footer * {
  color: hsl(var(--primary-foreground)) !important;
  opacity: 1 !important;
}

body footer a,
body .footer a {
  color: hsl(var(--primary-foreground)) !important;
}

[role="dialog"] .contact-modal-left-panel,
[role="dialog"] .contact-modal-left-panel * {
  color: #fff !important;
}

[role="dialog"] .bg-primary,
[data-state="open"] .bg-primary {
  background-color: hsl(var(--primary)) !important;
}
[role="dialog"] .text-primary,
[role="dialog"] a.text-primary {
  color: hsl(var(--accent)) !important;
}
[role="dialog"] .ring-primary {
  --tw-ring-color: hsl(var(--accent));
}
[role="dialog"] .border-primary {
  border-color: hsl(var(--primary)) !important;
}
[role="dialog"] button.bg-primary:hover {
  background-color: hsl(var(--primary-hover)) !important;
}