/* ==========================================================================
   EUROSTARLING ARS – unified stylesheet
   Branding: Petrol Blue / Light Teal (Poppins)
   ======================================================================= */

/* -------------------- CSS Vars / Theme -------------------- */
:root{
  --main-color:#005B69;
  --brand:      var(--main-color);
  --brand-600:  #004955;
  --highlight:  #3EC1C9;

  --white:#FFF; --black:#000;
  --text:#1A1A1A;
  --muted:#667085;
  --bg:#F6F9FC;
  --surface:#FFFFFF;

  --border:#E6E8EC;
  --ring: color-mix(in srgb, var(--highlight) 28%, transparent);

  --ok:#12B886;     --ok-bg:#E8FFF4;
  --err:#EF4444;    --err-bg:#FEE2E2;

  --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px;
  --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;

  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow:   0 8px 20px rgba(2,19,27,.10);
  --shadow-lg:0 20px 40px rgba(2,19,27,.14);

  --font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-28:28px; --fs-32:32px;

  /* Headerhöhe (JS überschreibt), + Safe Area */
  --header-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
}

/* -------------------- Base -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html,body{
  font-family:var(--font-family);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px;
}

.container{max-width:1120px; margin:0 auto; padding:0 16px}
.page{padding:40px 0 96px}

/* Utilities */
.w-100{width:100%}
.mt{margin-top:16px} .mt-24{margin-top:24px}
.mb-24{margin-bottom:24px}
.hidden{display:none!important}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* -------------------- Header / Navbar -------------------- */
.site-header{
  position:fixed; left:0; right:0; top:0;
  z-index:1000; color:#fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: 0 10px 24px rgba(0, 61, 77, .22);
  padding-top: var(--safe-top);
}

/* GLOBALER Abstand für Seiteninhalte – unabhängig von DOM-Struktur */
body.has-fixed-header .page{ padding-top: calc(var(--header-h) + 16px); }

/* Fallback, falls Klasse mal fehlt */
.page[data-offset!="0"]{ padding-top: calc(var(--header-h) + 16px); }

.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:20px; letter-spacing:.2px}
.logo-dot{width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.25)}
.navbar a{color:#fff; margin-left:16px; opacity:.95}
.navbar a:hover{opacity:1}
.navbar .btn{background:#fff; color:var(--brand-600); padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.3)}
.navbar .btn:hover{background:#F3F7F8}

/* Mega & Sidebar an Headerhöhe binden */
.mega{ top: calc(var(--header-h) + var(--safe-top)); }
.admin-sidebar{ top: calc(var(--header-h) + 20px); }

/* -------------------- Footer -------------------- */
.site-footer{background:#fff; border-top:1px solid var(--border); padding:26px 0; margin-top:32px; box-shadow:0 -6px 18px rgba(11,18,32,.06); color:var(--muted)}

/* -------------------- Cards / Generic Layout -------------------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16); padding:16px; box-shadow:var(--shadow)}
.card-elevated{box-shadow:var(--shadow-lg)}
.narrow{max-width:720px; margin:0 auto}

/* -------------------- Hero Box -------------------- */
.hero{
  background:linear-gradient(180deg, #E9F5F6, #F8FBFF 70%);
  border:1px solid var(--border);
  border-radius:var(--r-20);
  padding:28px; box-shadow:var(--shadow); margin-bottom:22px;
}
.hero h1{margin:0 0 12px; font-size:var(--fs-32); letter-spacing:.2px}

/* -------------------- Flight Search -------------------- */
.tabs{display:flex; gap:16px; border-bottom:2px solid #EDF1F5; margin-bottom:12px}
.tab{position:relative; padding:10px 8px; cursor:pointer; color:#29434e; font-weight:600}
.tab input{position:absolute; inset:0; opacity:0}
.tab span{padding:6px 10px; border-bottom:3px solid transparent; display:inline-block; border-radius:6px 6px 0 0}
.tab input:checked + span{border-color:var(--brand); color:var(--brand); background:linear-gradient(to top,#F1F5F9,var(--surface))}

.search-grid{display:grid; grid-template-columns:1.35fr 1.35fr 1fr 1fr; gap:16px; align-items:end}
@media (max-width:900px){ .search-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .search-grid{ grid-template-columns:1fr } }

label{display:block; font-size:var(--fs-12); color:var(--muted); margin:0 0 6px 6px}
input,select,button{font:inherit}
input[type="text"], input[type="date"], select{
  width:100%; background:#fff; border:1px solid var(--border); border-radius:var(--r-12);
  padding:12px; height:44px; outline:none; transition: box-shadow .15s, border-color .15s, background .15s
}
input[type="text"]:hover, input[type="date"]:hover, select:hover{ background:#FCFEFF }
input[type="text"]:focus, input[type="date"]:focus, select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring) }

.input-wrap{position:relative}
.input-wrap .swap{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; font-size:16px; cursor:pointer; opacity:.75; color:var(--brand)
}
.input-wrap .swap:hover{opacity:1; color:var(--highlight)}

.actions{display:flex; align-items:center; gap:12px; margin-top:6px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--r-12); border:1px solid var(--border);
  background:#fff; cursor:pointer; height:44px; font-weight:600; transition: background .15s, transform .02s
}
.btn:hover{background:#F6FAFB}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--brand-600)}
.btn.small{padding:6px 10px; height:auto; border-radius:10px; font-size:13px}
.btn-ghost{width:100%; text-align:left; border:1px solid var(--border); background:#FAFAFA; padding:12px; border-radius:var(--r-12)}
#btn-search{width:100%}

.alert{padding:12px 14px; border-radius:var(--r-12); background:#F1F5F9; color:#0f172a; border:1px solid var(--border)}
.alert.success{background:var(--ok-bg); border-color:#BAE6FD; color:#075985}
.alert.error{background:var(--err-bg); border-color:#FECACA; color:#7f1d1d}

.popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  /* falls nötig: */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.popover .row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.popover .qty button{width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer}
.popover .qty output{display:inline-block; min-width:24px; text-align:center}
.popover[hidden]{ display:none !important; }
.chk{display:flex; gap:8px; align-items:center}

.ac{position:relative}
.ac-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-12);
  box-shadow:var(--shadow); max-height:300px; overflow:auto; z-index:900; display:none
}
.ac-item{padding:10px 12px; cursor:pointer; border-bottom:1px solid #F2F4F7}
.ac-item:last-child{border-bottom:0}
.ac-item:hover{background:#F7FAFC}
.ac-main{display:block; font-size:14px}

.field.disabled{opacity:.65}
#return-wrap.field.disabled input{pointer-events:none}

/* -------------------- Hero Slider -------------------- */
.hero-section{margin:24px 0 8px; position:relative; z-index:1}
.hero-swiper{width:100%; height:clamp(200px,36vh,420px); border-radius:20px; overflow:hidden; position:relative; box-shadow:var(--shadow-lg)}
.hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide{width:100%; height:100%; position:relative}
.hero-image{width:100%; height:100%; object-fit:cover; transition: transform .2s ease-out}
.hero-text-wrapper{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%); color:#fff; padding:0 36px
}
.hero-content h2{font-size:34px; margin:0 0 8px}
.hero-content p{font-size:16px; margin:0 0 14px; color:#E7F6F8}
.hero-pagination .swiper-pagination-bullet{background:#fff; opacity:.6}
.hero-pagination .swiper-pagination-bullet-active{background:var(--highlight); opacity:1}
@media (max-width:640px){
  .hero-text-wrapper{ padding:0 18px; background: linear-gradient(90deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 55%); }
  .hero-content h2{ font-size:24px; }
  .hero-content p { font-size:14px; }
}

/* -------------------- Breaking News -------------------- */
.breaking-news-bar{
  background:#E9F5F6; border:1px solid var(--border); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow); margin:18px 0 8px; overflow:hidden
}
.breaking-wrap{display:flex; align-items:center; gap:14px}
.breaking-news-label{font-weight:700; color:var(--brand-600); padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--border)}
.breaking-news-ticker{overflow:hidden; position:relative; flex:1}
.breaking-news-items{display:flex; gap:50px; white-space:nowrap; will-change:transform; animation: ticker 30s linear infinite}
.breaking-news-item{color:#0f172a}
.breaking-news-items:hover,.breaking-news-items:focus-within{ animation-play-state: paused; }
@keyframes ticker{0%{transform:translateX(100%)} 100%{transform:translateX(-100%)}}
@media (max-width:640px){ .breaking-news-items{ animation-duration:40s; gap:28px; } }

/* -------------------- Sections & Cards -------------------- */
.section-light{background:transparent; padding:24px 0}
.section-dark{background:var(--brand); padding:36px 0; color:#fff; border-radius:16px; box-shadow:var(--shadow)}
.section-white{background:#fff; border:1px solid var(--border); border-radius:16px; padding:28px; box-shadow:var(--shadow); margin-top:18px}

.section-title{font-size:var(--fs-28); margin:0 0 8px}
.section-subtitle{color:var(--muted); margin:0 0 10px}

.highlight-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:20px; align-items:center}
.highlight-grid .media img{border-radius:16px; box-shadow:var(--shadow-lg)}
.highlight-grid .copy .mt{display:inline-block}

.cards-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
@media (max-width:900px){ .cards-3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .cards-3{grid-template-columns:1fr} }

.destination-card{background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.destination-image{width:100%; height:180px; object-fit:cover}
.destination-title{margin:12px 12px 6px; font-size:16px}
.destination-text{margin:0 12px 12px; color:var(--muted)}
.destination-card .btn{margin:0 12px 16px}

/* Fade-in */
.fade-in-section{opacity:0; transform:translateY(12px); transition:.35s ease}
.fade-in-section.visible{opacity:1; transform:translateY(0)}

/* -------------------- Results / Flights -------------------- */
.results{display:grid; gap:16px; margin-top:18px; content-visibility:auto; contain-intrinsic-size:600px}
.results h3{margin:18px 0 8px; color:var(--brand); font-size:var(--fs-18)}

.flight{padding:18px; border-radius:var(--r-16); background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.flight-head.fancy{display:flex; align-items:center; gap:14px}
.carrier-logo{width:44px; height:44px; border-radius:12px; color:#fff; font-weight:800; letter-spacing:.4px; display:flex; align-items:center; justify-content:center; background:var(--brand); box-shadow:var(--shadow)}
.flight-title{flex:1; min-width:0}
.flight-title .route{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.flight-meta{display:flex; gap:16px; color:var(--muted); margin:8px 0 0; flex-wrap:wrap; font-size:13px}
.from{margin-left:auto; text-align:right; min-width:92px}
.from .label{display:block; color:var(--muted); font-size:12px; line-height:1}
.from .value{display:block; font-weight:800; font-size:18px; margin-top:2px}

.fares{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.fare-tile{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-12); background:#fff; cursor:pointer; transition: box-shadow .15s, transform .02s, border-color .15s}
.fare-tile:hover{box-shadow:0 6px 16px rgba(2,6,23,.10); border-color:#DAE3EA}
.fare-name{font-weight:700}
.fare-sub{font-size:12px; color:var(--muted)}
.fare-badge{font-size:11px; background:#EEF2FF; border-radius:999px; padding:2px 8px; align-self:flex-start; color:#3730A3}
.fare-price{font-weight:700; margin-top:4px; display:inline-block}

/* -------------------- Seatmap -------------------- */
.seatmap{display:grid; gap:6px; padding:10px; background:#fff; border:1px solid var(--border); border-radius:var(--r-12)}
.seat{display:flex; align-items:center; justify-content:center; height:32px; border-radius:8px; border:1px solid var(--border); font-size:12px}
.seat.free{background:#ECFEFF; border-color:#BAE6FD; cursor:pointer}
.seat.free:hover{background:#DBEAFE}
.seat.taken{background:#E5E7EB; color:#6B7280}
.seat.blocked{background:#FEE2E2; border-color:#FECACA}
.seat.xl{outline:2px dashed #60A5FA}
.empty{visibility:hidden}

/* -------------------- Admin Sidebar -------------------- */
.admin-wrap{display:grid; grid-template-columns:240px 1fr; gap:20px}
@media (max-width:900px){ .admin-wrap{grid-template-columns:1fr} }
.admin-sidebar{background:#fff; border:1px solid var(--border); border-radius:var(--r-16); padding:16px; height:max-content; position:sticky; top:calc(var(--header-h) + 20px); box-shadow:var(--shadow)}
.admin-title{font-weight:700; margin-bottom:8px}
.admin-sidebar nav{display:flex; flex-direction:column; gap:8px}
.admin-sidebar a{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; border:1px solid transparent; color:var(--text)}
.admin-sidebar a.active{background:#EEF4FF; border-color:#DBEAFE; color:#1E3A8A}
.admin-sidebar a:hover{background:#F8FAFC}

/* -------------------- Print -------------------- */
@media print{
  .site-header,.site-footer{display:none}
  .container{max-width:100%; padding:0}
  .hero, .card, .section-white{box-shadow:none; border-color:#ddd}
}

/* ===== Mega Menu ===== */
.mega {
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--header-h) + var(--safe-top));
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding: 24px 0;
  z-index: 1200;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.mega.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mega[hidden] { display: none; }

.mega-backdrop{
  position: fixed; inset: 0;
  background: rgba(2, 19, 27, .28);
  backdrop-filter: blur(1px);
  z-index: 1100;
}
.mega-backdrop[hidden]{ display:none; }

.mega-grid{ position: relative; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:28px; }
@media (max-width:900px){ .mega-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .mega-grid{ grid-template-columns:1fr; } }

.mega-close{
  position:absolute; right:0; top:-8px;
  background:transparent; border:0; font-size:20px; line-height:1;
  color:#0b1f24; cursor:pointer; padding:6px;
}
.mega-close:hover{ color:var(--brand); }

.mega-col h4{ margin:0 0 10px; font-size:16px; font-weight:700; color:#0b1f24; }
.mega-col a{ display:block; padding:10px 10px; border-radius:8px; color:#0b1f24; text-decoration:none; }
.mega-col a:hover{ background:#f5f7fb; color:var(--brand); }

.mega-trigger{ background:transparent; border:0; padding:8px 2px; font:inherit; color:inherit; cursor:pointer; }
.mega-trigger:focus-visible{ outline:2px solid var(--highlight); border-radius:6px; }

/* -------------------- Mobile polish -------------------- */
@media (max-width: 900px) {
  .brand { font-size: 18px; gap: 8px; }
  .nav-wrap { gap: 12px; }
  .navbar { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .navbar::-webkit-scrollbar { display:none; }
  .navbar a, .navbar .btn { white-space:nowrap; }
}

@media (max-width: 640px) {
  .container { padding: 0 12px; }
  .page { padding: 28px 0 64px; }
  .hero { padding: 20px; border-radius: var(--r-16); }
  .card, .section-white { border-radius: var(--r-16); }
  .section-dark { border-radius: var(--r-16); padding: 24px 0; }

  .search-grid { gap: 12px; }
  label { margin-left: 2px; }
  .btn, .btn-ghost, input[type="text"], input[type="date"], select { height: 44px; }
  .btn.small { height: auto; }
  .input-wrap .swap { right: 6px; }
}

/* iOS/Firefox small form tweaks */
input[type="date"]{ color-scheme: light; }
select{ background-color:#fff; }

/* ===== Mobile-Fix: Desktop-Navigation ausblenden, Hamburger zeigen ===== */
#navToggle,
.nav-toggle{
  display: none !important;
}

/* Nur auf Mobile/Tablet sichtbar machen */
@media (max-width: 900px){
  #navToggle,
  .nav-toggle{
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .nav-toggle .bar{
    display: block;
    width: 24px;
    height: 2px;
    margin: 0;            /* verhindert „einzelnen Strich“ */
    background: #fff;
    border-radius: 2px;
  }

  /* Desktop-Menüs im Mobile ausblenden */
  .navbar{ display: none !important; }
  .nav-actions{ display: none !important; }
}


.mobile-nav{
  position:fixed; left:0; right:0; top:calc(var(--header-h) + var(--safe-top)); bottom:0;
  background:#fff; z-index:1200;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.mobile-nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-nav[hidden]{ display:none; }

.mobile-nav-inner{ padding:18px 16px 28px; display:flex; flex-direction:column; gap:8px; }
.mobile-nav-inner a,
.mobile-nav-inner .mega-trigger{
  display:block; width:100%;
  text-align:left; padding:12px 14px; border-radius:12px;
  background:#f8fafc; border:1px solid var(--border); color:#0b1f24; font:inherit;
}
.mobile-nav-inner a:hover,
.mobile-nav-inner .mega-trigger:hover{ background:#f1f5f9; color:var(--brand); }
.mobile-nav-inner .btn{ margin-top:8px; }

.mobile-backdrop{
  position:fixed; inset:0; background:rgba(2,19,27,.28);
  backdrop-filter:blur(1px); z-index:1100;
}

/* Optional: Hamburger-zu-X Animation
.nav-toggle.is-open .bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2){ opacity:0; }
.nav-toggle.is-open .bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
*/