/* Reusable CTA button style (replaces inline styles in home/landing.php) */
.ka-cta-button{
  background-color: rgb(234, 56, 145) !important;
  color: #ffffff !important;
  padding: 0.75rem 2rem;
  border-radius: 2px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: none !important;
  transition: filter .15s ease;
  outline: none !important;
}
.ka-cta-button:hover{ filter: brightness(0.92); }
/* ===================== Footer (global) ===================== */
.site-footer{
  width:100%;
  margin-left:0;
  margin-right:0;
  background:#FCFAF8;
  color:#2c2c2c;
  padding-block:32px 16px;
  border-top:1px solid #e2e2e2;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"
}
.site-footer .link,.site-footer .link:visited{
  color:inherit;
  text-decoration:none
}
.site-footer .link:hover{ text-decoration:underline }
.footer-note{display:none}
.footer-inner{
  width:100%;
  margin:0;
  padding:2rem;
  display:grid;
  grid-template-columns:1fr;gap:2rem
}
.footer-brand .brand{ font-size:clamp(20px,3.2vw,28px); font-weight:700;margin:0 0 8px 0 }
.footer-brand .tagline{ color:var(--text); margin:0 }
.col-heading{ font-size:14px; text-transform:none; letter-spacing:normal; color:var(--text); margin:4px 0 10px 0 }
.footer-company{justify-self:auto}
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.company{margin:0 0 4px 0}
.company-label{ margin:0 0 4px 0; color:inherit; font-size:inherit; font-weight:100; }
.company-name{font-weight:600}
.address{font-style:normal;color:var(--text)}
.footer-bottom{width:100%;margin-left:0;margin-right:0;margin-top:20px;padding:14px 2rem 0 2rem;border-top:1px solid #e2e2e2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer-logo{height:32px;width:auto;display:block;margin:0 0 8px 0}
.footer-bottom .legal{display:flex;gap:16px}
.footer-bottom .copyright{margin:0;color:#666;font-size:14px}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr}}
@media (max-width:640px){.footer-inner{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:12px;align-items:flex-start}.footer-note{text-align:left}}
/* ==========================================================================
   Global Styles - KitaAtlas
   ========================================================================== */

:root{
/* Brand */
--brand:#ea3891;

/* Neutral */
--bg:#FCFAF8;
--bg-alt:#f5f6f7;          /* Seitenhintergrund/Flächen */
--panel:#ffffff;           /* Panels/Sheet */
--panel-alt:#F7F3F0;
--line:#E6E1DC;
--line-strong:#D4CEC8;    /* stärkere Rahmen (2px) */

--text-muted:#8E8581;
--text:#272727;
--text-med:#202020;
--text-semi:#1c1c1c;
--text-bold:#111111;

/* Shape & spacing */
--r:2px;                   /* globaler Radius */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;

/* Focus (ohne Glow) */
--focus-ring: 0 0 0 2px color-mix(in oklab, var(--brand-400) 65%, transparent);

--font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fs-200:14px; --fs-300:16px; --fs-400:18px; --fs-500:20px; --fs-700:28px; --fs-900:42px;
--lh-tight:1.25; --lh:1.5;
--w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;
}

/* Reset and Base Styles */
* { box-sizing: border-box; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; }
*, :after, :before { box-sizing: border-box; border: 0 solid #e5e7eb; }

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a:focus,
button:focus { outline: none !important; box-shadow: none !important; }

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button; /* add this */
  background-color: transparent;
  background-image: none;
}

button, select {
    text-transform: none;
}

[role=button], button {
    cursor: pointer;
}

/* Language-specific base scaling */
/*html[lang="ar"] { font-size: 120% !important; }
html[lang="ar"] body { line-height: 1 !important; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 { line-height: 1 !important; }*/
strong { font-weight: 600; }
  
/* Margins */
.m-0 { margin:0 !important; }
.m-1 { margin:0.25rem !important; }
.m-2 { margin:0.5rem !important; }
.m-3 { margin:0.75rem !important; }
.m-4 { margin:1rem !important; }
.m-5 { margin:1.25rem !important; }
.m-6 { margin:1.5rem !important; }
.m-7 { margin:1.75rem !important; }
.m-8 { margin:2rem !important; }
.m-9 { margin:2.25rem !important; }
.m-10 { margin:2.5rem !important; }
.m-11 { margin:2.75rem !important; }
.m-12 { margin:3rem !important; }
.mb-1 { margin-bottom: 0.25rem !important ; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-7 { margin-bottom: 1.75rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-9 { margin-bottom: 2.25rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-11 { margin-bottom: 2.75rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mt-1 { margin-top:0.25rem !important; }
.mt-2 { margin-top:0.5rem !important; }
.mt-3 { margin-top:0.75rem !important; }
.mt-4 { margin-top:1rem !important; }
.mt-5 { margin-top:1.25rem !important; }
.mt-6 { margin-top:1.5rem !important; }
.mt-7 { margin-top:1.75rem !important; }
.mt-8 { margin-top:2rem !important; }
.mt-9 { margin-top:2.25rem !important; }
.mt-10 { margin-top:2.5rem !important; }
.mt-11 { margin-top:2.75rem !important; }
.mt-12 { margin-top:3rem !important; }
.ml-1 { margin-left:0.25rem !important; }
.ml-2 { margin-left:0.5rem !important; }
.ml-3 { margin-left:0.75rem !important; }
.ml-4 { margin-left:1rem !important; }
.ml-5 { margin-left:1.25rem !important; }
.ml-6 { margin-left:1.5rem !important; }
.ml-7 { margin-left:1.75rem !important; }
.ml-8 { margin-left:2rem !important; }
.ml-9 { margin-left:2.25rem !important; }
.ml-10 { margin-left:2.5rem !important; }
.ml-11 { margin-left:2.75rem !important; }
.ml-12 { margin-left:3rem !important; }
.mr-1 { margin-right:0.25rem !important; }
.mr-2 { margin-right:0.5rem !important; }
.mr-3 { margin-right:0.75rem !important; }
.mr-4 { margin-right:1rem !important; }
.mr-5 { margin-right:1.25rem !important; }
.mr-6 { margin-right:1.5rem !important; }
.mr-7 { margin-right:1.75rem !important; }
.mr-8 { margin-right:2rem !important; }
.mr-9 { margin-right:2.25rem !important; }
.mr-10 { margin-right:2.5rem !important; }
.mr-11 { margin-right:2.75rem !important; }
.mr-12 { margin-right:3rem !important; }
.my-1 { margin-top:0.25rem !important; margin-bottom:0.25rem !important; }
.my-2 { margin-top:0.5rem !important; margin-bottom:0.5rem !important; }
.my-3 { margin-top:0.75rem !important; margin-bottom:0.75rem !important; }
.my-4 { margin-top:1rem !important; margin-bottom:1rem !important; }
.my-5 { margin-top:1.25rem !important; margin-bottom:1.25rem !important; }
.my-6 { margin-top:1.5rem !important; margin-bottom:1.5rem !important; }
.my-7 { margin-top:1.75rem !important; margin-bottom:1.75rem !important; }
.my-8 { margin-top:2rem !important; margin-bottom:2rem !important; }
.my-9 { margin-top:2.25rem !important; margin-bottom:2.25rem !important; }
.my-10 { margin-top:2.5rem !important; margin-bottom:2.5rem !important; }
.my-11 { margin-top:2.75rem !important; margin-bottom:2.75rem !important; }
.my-12 { margin-top:3rem !important; margin-bottom:3rem !important; }
.mx-1 { margin-left:0.25rem !important; margin-right:0.25rem !important; }
.mx-2 { margin-left:0.5rem !important; margin-right:0.5rem !important; }
.mx-3 { margin-left:0.75rem !important; margin-right:0.75rem !important; }
.mx-4 { margin-left:1rem !important; margin-right:1rem !important; }
.mx-5 { margin-left:1.25rem !important; margin-right:1.25rem !important; }
.mx-6 { margin-left:1.5rem !important; margin-right:1.5rem !important; }
.mx-7 { margin-left:1.75rem !important; margin-right:1.75rem !important; }
.mx-8 { margin-left:2rem !important; margin-right:2rem !important; }
.mx-9 { margin-left:2.25rem !important; margin-right:2.25rem !important; }
.mx-10 { margin-left:2.5rem !important; margin-right:2.5rem !important; }
.mx-11 { margin-left:2.75rem !important; margin-right:2.75rem !important; }
.mx-12 { margin-left:3rem !important; margin-right:3rem !important; }
/* Padding */
.p-1 { padding:0.25rem !important; }
.p-2 { padding:0.5rem !important; }
.p-3 { padding:0.75rem !important; }
.p-4 { padding:1rem !important; }
.p-5 { padding:1.25rem !important; }
.p-6 { padding:1.5rem !important; }
.p-7 { padding:1.75rem !important; }
.p-8 { padding:2rem !important; }
.p-9 { padding:2.25rem !important; }
.p-10 { padding:2.5rem !important; }
.p-11 { padding:2.75rem !important; }
.p-12 { padding:3rem !important; }
.pt-1 { padding-top:0.25rem !important; }
.pt-2 { padding-top:0.5rem !important; }
.pt-3 { padding-top:0.75rem !important; }
.pt-4 { padding-top:1rem !important; }
.pt-5 { padding-top:1.25rem !important; }
.pt-6 { padding-top:1.5rem !important; }
.pt-7 { padding-top:1.75rem !important; }
.pt-8 { padding-top:2rem !important; }
.pt-9 { padding-top:2.25rem !important; }
.pt-10 { padding-top:2.5rem !important; }
.pt-11 { padding-top:2.75rem !important; }
.pt-12 { padding-top:3rem !important; }
.pb-1 { padding-bottom:0.25rem !important; }
.pb-2 { padding-bottom:0.5rem !important; }
.pb-3 { padding-bottom:0.75rem !important; }
.pb-4 { padding-bottom:1rem !important; }
.pb-5 { padding-bottom:1.25rem !important; }
.pb-6 { padding-bottom:1.5rem !important; }
.pb-7 { padding-bottom:1.75rem !important; }
.pb-8 { padding-bottom:2rem !important; }
.pb-9 { padding-bottom:2.25rem !important; }
.pb-10 { padding-bottom:2.5rem !important; }
.pb-11 { padding-bottom:2.75rem !important; }
.pb-12 { padding-bottom:3rem !important; }
.pl-1 { padding-left:0.25rem !important; }
.pl-2 { padding-left:0.5rem !important; }
.pl-3 { padding-left:0.75rem !important; }
.pl-4 { padding-left:1rem !important; }
.pl-5 { padding-left:1.25rem !important; }
.pl-6 { padding-left:1.5rem !important; }
.pl-7 { padding-left:1.75rem !important; }
.pl-8 { padding-left:2rem !important; }
.pl-9 { padding-left:2.25rem !important; }
.pl-10 { padding-left:2.5rem !important; }
.pl-11 { padding-left:2.75rem !important; }
.pl-12 { padding-left:3rem !important; }
.pr-1 { padding-right:0.25rem !important; }
.pr-2 { padding-right:0.5rem !important; }
.pr-3 { padding-right:0.75rem !important; }
.pr-4 { padding-right:1rem !important; }
.pr-5 { padding-right:1.25rem !important; }
.pr-6 { padding-right:1.5rem !important; }
.pr-7 { padding-right:1.75rem !important; }
.pr-8 { padding-right:2rem !important; }
.pr-9 { padding-right:2.25rem !important; }
.pr-10 { padding-right:2.5rem !important; }
.pr-11 { padding-right:2.75rem !important; }
.pr-12 { padding-right:3rem !important; }
.px-1 { padding-left:0.25rem !important; padding-right:0.25rem !important; }
.px-2 { padding-left:0.5rem !important; padding-right:0.5rem !important; }
.px-3 { padding-left:0.75rem !important; padding-right:0.75rem !important; }
.px-4 { padding-left:1rem !important; padding-right:1rem !important; }
.px-5 { padding-left:1.25rem !important; padding-right:1.25rem !important; }
.px-6 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
.px-7 { padding-left:1.75rem !important; padding-right:1.75rem !important; }
.px-8 { padding-left:2rem !important; padding-right:2rem !important; }
.px-9 { padding-left:2.25rem !important; padding-right:2.25rem !important; }
.px-10 { padding-left:2.5rem !important; padding-right:2.5rem !important; }
.px-11 { padding-left:2.75rem !important; padding-right:2.75rem !important; }
.px-12 { padding-left:3rem !important; padding-right:3rem !important; }
.py-1 { padding-top:0.25rem !important; padding-bottom:0.25rem !important; }
.py-2 { padding-top:0.5rem !important; padding-bottom:0.5rem !important; }
.py-3 { padding-top:0.75rem !important; padding-bottom:0.75rem !important; }
.py-4 { padding-top:1rem !important; padding-bottom:1rem !important; }
.py-5 { padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
.py-6 { padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
.py-7 { padding-top:1.75rem !important; padding-bottom:1.75rem !important; }
.py-8 { padding-top:2rem !important; padding-bottom:2rem !important; }
.py-9 { padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
.py-10 { padding-top:2.5rem !important; padding-bottom:2.5rem !important; }
.py-11 { padding-top:2.75rem !important; padding-bottom:2.75rem !important; }
.py-12 { padding-top:3rem !important; padding-bottom:3rem !important; }
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }

.fw-400 { font-weight: 400; color: var(--text);}
.fw-500 { font-weight: 500; color: var(--text-med); }
.fw-600 { font-weight: 600; color: var(--text-semi); }
.fw-700 { font-weight: 700; color: var(--text-bold); }
.fs-8 { font-size: 0.5rem; }
.fs-10 { font-size: 0.625rem; }
.fs-l2 { font-size: 0.75rem; }
.fs-14 { font-size: 0.875rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-22 { font-size: 1.375rem; }
.fs-24 { font-size: 1.5rem; }
.fs-26 { font-size: 1.625rem; }
.fs-28 { font-size: 1.75rem; }
.fs-30 { font-size: 1.875rem; }
.fs-32 { font-size: 2rem; }
.fs-34 { font-size: 2.125rem; }
.fs-36 { font-size: 2.25rem; }
.fs-38 { font-size: 2.375rem; }
.fs-40 { font-size: 2.5rem; }
.fs-42 { font-size: 2.625rem; }
.fs-44 { font-size: 2.75rem; }
.fs-46 { font-size: 2.875rem; }
.fs-48 { font-size: 3rem; }
.fs-50 { font-size: 3.125rem; }
.fs-52 { font-size: 3.25rem; }
.fs-54 { font-size: 3.375rem; }
.fs-56 { font-size: 3.5rem; }

.h-5 { height: 1.25rem !important; }
.w-5 { width: 1.25rem !important; }

.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-pointer { cursor: pointer !important; }

/*colors*/
.bg-white { background-color: #ffffff !important;}
.bg-gray-25 { background-color: #f9f9f9 !important;}
.bg-gray-50 { background-color: #f9fafb !important;}
.bg-gray-100 { background-color: #f3f4f6 !important}
.bg-blue-600 { background-color: #3b82f6 !important}
.bg-gray-200 { background-color: rgba(229, 229, 229, 1) !important}
.bg-gray-300 { background-color: rgba(209, 209, 209, 1) !important}
.bg-gray-400 { background-color: rgba(189, 189, 189, 1) !important}

/*border*/
.border-gray-200 { border-color: rgba(229, 229, 229, 1) !important;}
.border-gray-300 { border-color: rgba(209, 209, 209, 1) !important;}
.border-gray-400 { border-color: rgba(189, 189, 189, 1) !important;}
.border-gray-500 { border-color: rgba(169, 169, 169, 1) !important;}
.border-gray-600 { border-color: rgba(149, 149, 149, 1) !important;}
.border-gray-700 { border-color: rgba(129, 129, 129, 1) !important;}
.border-gray-800 { border-color: rgba(109, 109, 109, 1) !important;}
.border-gray-900 { border-color: rgba(89, 89, 89, 1) !important;}

/*hover*/
.hover-bg-offwhite:hover { background-color: #f8f8f8 !important;}
.hover-bg-gray-100:hover { background-color: #f3f4f6 !important;}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background-color: #f9fafb;
}
/* Container max 1200px */
.ka-wrap { 
    display:grid; 
    grid-template-columns:1fr; 
    grid-template-rows:auto; 
    row-gap:3rem; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
}

/* Section Grid */
.ka-sec {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr; 
}
.ka-fore { 
    grid-area: 1 / 1; 
    z-index:1; 
}
/* Hero typography */
.ka-h1-hero { 
    font-size: clamp(2.25rem, 1.9615rem + 1.2821vw, 3.5rem); 
    line-height: 1.2; 
}
.ka-h2-hero { 
    font-size: clamp(1.25rem, 1.1346rem + 0.5128vw, 1.75rem);
    line-height: 1.6;
}
.ka-h2 { 
    font-size: clamp(1.15rem, 1.1346rem + 0.5128vw, 1.65rem);
    line-height: 1.2;
}
.ka-h2-oversize { 
    font-size: 1.875rem; 
    line-height: 1.2;
}
.ka-h3 {
    font-size: 1.5rem;
    line-height: 1.5;
}

.no-mobile { display:none; }

p {
    margin: 0 0 1rem 0;
}

.min-w-0 {
    min-width: 0 !important;
}

.min-h-0 {
    min-height: 0 !important;
}

.max-w-720 {
    max-width: 720px !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.truncate {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.bg-brand {
    background-color: #FCFAF8 !important;
    min-height: 100vh;
}
.bg-transparent { background-color: transparent !important; }
.bg-inherit { background-color: inherit !important; }
.bg-magenta { background-color: var(--brand) !important; }

.bg-white {
    background-color: rgba(255, 255, 255, 1) !important;
}

.text-gray-700 { color: #a7a7a7 !important;}
.text-magenta { color: var(--brand) !important; }
.text-blue-400 { color: #3b82f6 !important; }
.text-blue-600 { color: #1560BD !important; }
.text-red-600 { color: #dc2626 !important; }
.text-green-600 { color: #16a34a !important; }
.text-white { color: #ffffff !important; }
.text-gray-400 { color: rgb(196, 202, 225) !important; }

.btn,
button:disabled {
    background-color: transparent !important;
    color: inherit !important;
    cursor: not-allowed !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.ka-wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: rgba(255, 255, 255, 1) !important;
    border-top: 1px solid rgba(229, 231, 235, 1) !important;
    z-index: 1000;
    /* box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); */
    padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

.nav-icon {
    width: 16px;
    height: 16px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.25;
}

/* Layout */

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.items-center {
    align-items: center !important;
}

.items-start {
    align-items: flex-start !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-start {
    justify-content: flex-start !important;
}
.flex-none {
    flex: none !important;
}

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-2 {
    flex: 2 1 0% !important;
}

.h-full {
    height: 100% !important;
}

.w-full {
    width: 100% !important;
}

a {
    color: #3b82f6;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Border */

.border {
    border-style: solid !important;
    border-width: 1px !important;
}

.border-l {
    border-left-style: solid !important;
    border-left-width: 1px !important;
}

.border-r {
    border-right-style: solid !important;
    border-right-width: 1px !important;
}

.border-t {
    border-top-style: solid !important;
    border-top-width: 1px !important;
}

.border-b {
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
}

.border-y {
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
}

.border-x {
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.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;
}

.hidden {
    display: none !important;
}

.fixed {
    position: fixed !important;
}

/* Loading States */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Focus States for Accessibility */
*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Search Components */
.search-tag {
    transition: all 0.2s ease;
}

.search-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* Result Cards */
.result-card {
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.result-card:hover {
    background-color: #f8fafc;
    border-left-color: #e2e8f0;
    transform: translateX(2px);
}

.result-card.active {
    border-left-color: #6366f1;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

.animate-slide-in {
    animation: slideIn 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Autocomplete Dropdown */
#autocompleteResults {
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.autocomplete-item:hover {
    background-color: #f8fafc;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

/* Map Container */
#mapContainer {
    position: relative;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

/* Custom Button Styles */
.btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-content {
        flex-direction: column;
    }
    
    .sidebar-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
}

.hero-gradient {
    background: linear-gradient(to bottom, #f794a4, #fa9fa3, #fcaaa4, #fdb5a7, #fdc0ad, #fdcbb4, #fdd6bd, #fcdbc6, #fbe0cf, #fae5d9, #f9ebe2, #f7f0ec, #f5f5f5);
}

/* Custom focus styles */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 2px #374151, 0 0 0 4px rgba(55, 65, 81, 0.1);
}

/* Navigation underline animation */
.nav-underline {
    position: relative;
}
.nav-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #111827;
    transition: width 0.2s ease-out;
}
.nav-underline:hover::after {
    width: 100%;
}

/* Mobile menu animation */
.mobile-menu {
    transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.mobile-menu.closed {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.mobile-menu.open {
    max-height: 16rem;
    opacity: 1;
}

/* Workflow layout utilities */
.workflow-sidebar {
    min-height: calc(100vh - 128px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: var(--color-bg, #f9f9f9);
    overflow: hidden;
}
.workflow-sidebar ::-webkit-scrollbar { display: none; }
.workflow-sidebar * { scrollbar-width: none; -ms-overflow-style: none; }

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.2s ease-in-out;
}