/* ================== VIP AirShots – styles.css ===========================
   - Donkere stijl + goudaccent
   - Video ligt VOOR de zwarte achtergrond, maar ACHTER de content
   - Sticky header, compact bottom footer
   - Mobile-first layout, cards, grids
   - Cookie banner styling, skip-link, a11y helpers
   - Leesbaarheid verbeterd met overlay + text-shadow (Optie A + C)
   ====================================================================== */

:root{
  --bg:#0b0b0b;            /* zwarte fallback achtergrond */
  --card:#121212;
  --text:#e9e9e9;
  --muted:#a8a8a8;
  --border:#262626;
  --brand:#c9a227;         /* goud */
  --brand-600:#b08e20;
  --brand-700:#9a7c1c;

  --logo-size:40px;        /* logo formaat */
}

*{box-sizing:border-box}

/* ===== Core layout: zwarte bg + footer onderaan ===== */
html, body { height:100%; }
body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; /* footer naar onder */
}

/* Content boven video */
header, main, footer { position:relative; z-index:1; }

main{ flex:1 0 auto; }
footer{ flex-shrink:0; }

img{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ===== Skip-link (A11y) ===== */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{
  left:16px;top:16px;
  width:auto;height:auto;
  background:#000;color:#fff;
  padding:8px 12px;border-radius:8px;
  z-index:2000;
}

/* ===== NAV (sticky) ===== */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent);
  backdrop-filter:saturate(120%) blur(4px);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 0;
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:700
}
.brand img{
  width:var(--logo-size);height:var(--logo-size);
  object-fit:contain;display:block;
}
.title{letter-spacing:.2px}
.menu{display:none;gap:16px}
.menu a{
  padding:8px 10px;border-radius:10px;
}
.menu a[aria-current="page"]{
  background:rgba(201,162,39,.16);
  border:1px solid rgba(201,162,39,.3);
}

.langs{display:flex;align-items:center;gap:8px}

.menu-toggle{
  background:none;border:1px solid var(--border);
  border-radius:10px;padding:10px;
  display:grid;place-items:center;cursor:pointer
}
.menu-icon{
  width:20px;height:2px;background:var(--text);
  position:relative;display:block
}
.menu-icon::before,.menu-icon::after{
  content:"";position:absolute;left:0;
  width:20px;height:2px;background:var(--text)
}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}

/* Mobile menu popover */
.menu[data-open="true"]{
  display:flex;flex-direction:column;
  position:absolute;right:20px;top:58px;
  background:rgba(0,0,0,.95);
  padding:12px;border:1px solid var(--border);
  border-radius:12px;z-index:1100;
}

@media (min-width:900px){
  .menu{display:flex}
  .menu-toggle{display:none}
  .menu[data-open="true"]{
    position:static;background:transparent;border:none;
    padding:0;flex-direction:row;
  }
}

/* ===== VIDEO (voor bg, achter content) ===== */
.video-wrap{
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
}
.video-bg{
  width:100%; height:100%;
  object-fit:cover; background:#000;
}
.overlay{
  position:absolute; inset:0;
}

/* ===== OPTIE A (donkerdere overlay) ===== */
.overlay--light{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.50),
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.55)
  );
}

/* ===== OPTIE C (text-shadow voor alle hero-tekst) ===== */
.hero h1,
.hero .eyebrow,
.hero .sub {
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}

/* ===== HERO ===== */
.hero{padding:56px 0 24px}
.hero-grid{display:grid;gap:24px}
@media (min-width:900px){
  .hero-grid{
    grid-template-columns:1.1fr .9fr;
    align-items:start
  }
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--muted);font-weight:600;letter-spacing:.8px;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--brand);display:inline-block;
}
h1{
  font-size:clamp(28px,4vw,44px);
  line-height:1.15;margin:8px 0 10px;
}
.sub{
  color:var(--muted);
  max-width:64ch;
}

/* ===== BADGES / BUTTONS ===== */
.badges{
  display:flex;flex-wrap:wrap;
  gap:10px;margin:16px 0 18px;
}
.badge{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  padding:6px 10px;border-radius:999px;
  font-size:14px;
}
.btn{
  display:inline-block;padding:12px 16px;border-radius:12px;
  border:1px solid var(--border);font-weight:700;
}
.btn-brand{
  background:linear-gradient(180deg,var(--brand),var(--brand-600));
  color:#000;border-color:rgba(0,0,0,.25);
}
.btn-brand:hover{
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
}
.btn-ghost{background:transparent}
.cta-row{
  display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;
}

/* ===== FLOAT CARD ===== */
.float-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:16px;
}
.card-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;
}
.pill{
  display:inline-block;background:rgba(201,162,39,.16);
  border:1px solid rgba(201,162,39,.3);
  color:var(--text);padding:4px 8px;border-radius:999px;
  font-size:12px;
}
.kv{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin:10px 0 14px;
}
.kv .muted{color:var(--muted)}
.float-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ===== SECTIONS ===== */
.section-head{margin:10px 0 18px}
.section-sub{color:var(--muted)}
.grid{display:grid;gap:16px}
@media (min-width:800px){
  .grid{grid-template-columns:repeat(3,1fr);}
}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
}
.card-img{
  background:#0f0f0f;border-bottom:1px solid var(--border);
}
.card-img img{
  width:100%;height:180px;object-fit:contain;
}
.card-body{padding:12px}

/* ===== SPECS ===== */
.specs{display:grid;gap:16px}
@media (min-width:900px){
  .specs{grid-template-columns:repeat(3,1fr);}
}
.spec{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:14px;
}
.spec .head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.spec .head img{
  width:60px;height:60px;object-fit:contain;
  background:#0f0f0f;border:1px solid var(--border);
  border-radius:12px;
}
.spec ul{margin:0;padding-left:18px}

/* ===== LISTS ===== */
.bullets{
  margin:18px 0 0 0;padding-left:18px;
}
.bullets li{
  margin-bottom:10px;
}

/* ===== FOOTER (compact) ===== */
footer{
  border-top:1px solid var(--border);margin-top:0;
}
.foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 0;
}
.foot-brand{
  display:flex;align-items:center;gap:10px;
}
.foot-brand img,.foot-logo{
  width:24px;height:24px;object-fit:contain;
}
.socials{
  display:flex;align-items:center;gap:10px;
}
.socials img{
  width:22px;height:22px;display:block;
  filter:grayscale(1) brightness(.9);
}
.socials a{
  line-height:0;font-size:0;color:var(--muted);
}

/* ===== COOKIE BANNER ===== */
#cookie-banner{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.96);
  border-top:1px solid var(--border);
  padding:14px;z-index:1200;
}
#cookie-banner[hidden]{display:none}
#cookie-banner .row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
#cookie-banner .txt a{
  color:var(--brand);text-decoration:underline;
}
#cookie-banner .actions{
  display:flex;gap:10px;
}
#cookie-banner button{
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);cursor:pointer;font-weight:700;
}
#cookie-banner #cookie-accept{
  background:linear-gradient(180deg,var(--brand),var(--brand-600));
  color:#000;
}
#cookie-banner .secondary{
  background:transparent;color:var(--text);
}
/* ============================================
   FIX: Contactformulier terug in VIP AirShots stijl
   ============================================ */

/* Inputs & textarea dezelfde donkere stijl als vroeger */
.float-card input[type="text"],
.float-card input[type="email"],
.float-card textarea {
    background: #1a1a1a !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    width: 100% !important;
    font-size: 15px;
    resize: vertical;
}

/* Placeholder kleur */
.float-card input::placeholder,
.float-card textarea::placeholder {
    color: var(--muted) !important;
}

/* Extra spacing netjes zoals eerder */
.float-card input,
.float-card textarea {
    margin-bottom: 12px !important;
}

/* Submit button netjes in stijl */
.float-card button[type="submit"] {
    background: linear-gradient(180deg, var(--brand), var(--brand-600)) !important;
    border: 1px solid rgba(0,0,0,.25) !important;
    color: #000 !important;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
}

/* Klein detail: success + error netjes gekaderd */
.form-success,
.form-error {
    margin-top: 10px;
    border-radius: 10px;
}