/* ============================================================
   VIP Services Mallorca — cookie consent
   Loads on every page, including the Elementor ones that do not have
   the site tokens, so the brand colours are written out here.
   Everything is scoped to .vipc.
   ============================================================ */
.vipc{
  --vipc-navy:#0B1B2B; --vipc-ink:#1a1a1a; --vipc-soft:#4a4a4a; --vipc-line:#d9d2c2;
  --vipc-sand:#F5EFE3; --vipc-accent:#2A7DA0; --vipc-sky:#7FC4E0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vipc *,.vipc *::before,.vipc *::after{box-sizing:border-box}
.vipc [hidden]{display:none !important}

/* ---------- first layer: a bar, never a wall ---------- */
.vipc .vipc-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:2147483000;
  display:flex; align-items:center; gap:18px 28px;
  padding:14px max(24px, calc((100vw - 1180px) / 2)) calc(14px + env(safe-area-inset-bottom));
  background:var(--vipc-navy); color:rgba(255,255,255,.86);
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
  animation:vipc-up .22s ease-out;
}
.vipc .vipc-msg{margin:0; flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.5}
.vipc .vipc-link{color:#fff; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--vipc-sky)}
.vipc .vipc-link:hover{color:var(--vipc-sky)}
.vipc .vipc-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}

/* Accept and Reject share one style on purpose: equal weight. */
.vipc .vipc-btn{
  appearance:none; margin:0; cursor:pointer; font:inherit;
  height:38px; padding:0 18px; border-radius:2px;
  border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.vipc .vipc-btn:hover{background:#fff; color:var(--vipc-navy); border-color:#fff}
.vipc .vipc-settings{
  appearance:none; margin:0 6px 0 0; padding:0; border:0; background:none; cursor:pointer; font:inherit;
  color:rgba(255,255,255,.86); font-size:13px; text-decoration:underline; text-underline-offset:2px;
}
.vipc .vipc-settings:hover{color:#fff}
.vipc button:focus-visible,.vipc a:focus-visible,.vipc input:focus-visible + .vipc-knob{outline:2px solid var(--vipc-sky); outline-offset:2px}

/* ---------- second layer: the choices ---------- */
.vipc .vipc-panel{
  position:fixed; z-index:2147483001; left:50%; bottom:16px; transform:translateX(-50%);
  width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 32px); overflow:auto;
  background:#fff; color:var(--vipc-ink); border-radius:4px;
  box-shadow:0 18px 60px rgba(11,27,43,.35); padding:22px 24px 20px;
  animation:vipc-up .22s ease-out;
}
.vipc .vipc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.vipc .vipc-title{margin:0; font-family:"Playfair Display",Georgia,"Times New Roman",serif; font-weight:400; font-size:22px; line-height:1.2; color:var(--vipc-ink)}
.vipc .vipc-close{appearance:none; border:0; background:none; cursor:pointer; font-size:26px; line-height:1; color:var(--vipc-soft); padding:0 2px; margin:-4px -4px 0 0}
.vipc .vipc-close:hover{color:var(--vipc-ink)}
.vipc .vipc-intro{margin:10px 0 6px; font-size:13.5px; line-height:1.55; color:var(--vipc-soft)}
.vipc .vipc-panel .vipc-link{color:var(--vipc-accent); text-decoration-color:currentColor}
.vipc .vipc-row{display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--vipc-line)}
.vipc .vipc-row-txt{flex:1 1 auto; min-width:0}
.vipc .vipc-row-name{display:block; font-size:14.5px; font-weight:600; color:var(--vipc-ink); cursor:pointer}
.vipc .vipc-row-desc{margin:3px 0 0; font-size:13px; line-height:1.5; color:var(--vipc-soft)}
.vipc .vipc-always{flex:0 0 auto; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--vipc-accent); font-weight:600}

/* the switch is a real checkbox, so keyboards and screen readers get it for free */
.vipc .vipc-switch{position:relative; flex:0 0 auto; width:44px; height:26px}
.vipc .vipc-switch input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1}
.vipc .vipc-knob{position:absolute; inset:0; border-radius:26px; background:#cfc8b8; transition:background .15s}
.vipc .vipc-knob::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
.vipc .vipc-switch input:checked + .vipc-knob{background:var(--vipc-accent)}
.vipc .vipc-switch input:checked + .vipc-knob::after{transform:translateX(18px)}

.vipc .vipc-actions--panel{flex-wrap:wrap; justify-content:flex-end; margin-top:16px; padding-top:16px; border-top:1px solid var(--vipc-line)}
.vipc .vipc-panel .vipc-btn{border-color:var(--vipc-navy); color:var(--vipc-navy)}
.vipc .vipc-panel .vipc-btn:hover{background:var(--vipc-navy); color:#fff}
.vipc .vipc-panel .vipc-btn--solid{background:var(--vipc-navy); color:#fff}
.vipc .vipc-panel .vipc-btn--solid:hover{background:var(--vipc-accent); border-color:var(--vipc-accent)}

/* ---------- reopen ---------- */
.vipc .vipc-reopen{
  position:fixed; z-index:2147482999; left:14px; bottom:calc(14px + env(safe-area-inset-bottom));
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--vipc-navy); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.22);
  opacity:.72; transition:opacity .15s;
}
.vipc .vipc-reopen:hover,.vipc .vipc-reopen:focus-visible{opacity:1}

/* ---------- phones ---------- */
@media (max-width:640px){
  .vipc .vipc-bar{flex-wrap:wrap; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .vipc .vipc-msg{flex-basis:100%; font-size:11.5px; line-height:1.4}
  .vipc .vipc-actions{flex-basis:100%; gap:6px}
  .vipc .vipc-settings{flex:0 0 auto; margin-right:4px; font-size:11.5px}
  /* The two choices split what is left of the row equally, so neither
     can be pushed off-screen: "Alle akzeptieren" was, at 375px. They may
     wrap to two lines on the narrowest phones rather than clip. */
  .vipc .vipc-bar .vipc-btn{
    flex:1 1 0; min-width:0; height:auto; min-height:32px; padding:4px 6px;
    font-size:10.5px; letter-spacing:.04em; line-height:1.15; white-space:normal;
  }
  .vipc .vipc-btn{height:34px; padding:0 13px; font-size:11px; letter-spacing:.06em}
  /* 16px + the safe area, and a height cap on the *visible* screen (dvh):
     phone browsers place fixed elements against the toolbar-hidden
     viewport, which put the German panel 4px under the bottom edge. */
  .vipc .vipc-panel{bottom:calc(16px + env(safe-area-inset-bottom)); width:calc(100vw - 16px); padding:18px 16px 16px;
    max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px)}
  .vipc .vipc-title{font-size:20px}
  .vipc .vipc-actions--panel .vipc-btn{flex:1 1 auto}
  .vipc .vipc-reopen{width:36px; height:36px; left:10px}
}

@keyframes vipc-up{from{transform:translateY(12px); opacity:0} to{transform:none; opacity:1}}
.vipc .vipc-panel{animation-name:vipc-up-panel}
@keyframes vipc-up-panel{from{transform:translate(-50%,12px); opacity:0} to{transform:translateX(-50%); opacity:1}}
@media (prefers-reduced-motion:reduce){.vipc .vipc-bar,.vipc .vipc-panel{animation:none}}