/* Root variables for easy theming */
:root{
    --bg:#000;
    --fg:#fff;
    --muted:#aaa;
    --accent:#fff;
    --gap:5vw;
    --panel-width:100vw;
    --focus: 3px solid #fff;
    /* --vh set from JS on mobile to avoid 100vh issues */
    --vh: 1vh;
}

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
/* Ensure the HTML hidden attribute always wins over display rules in CSS */
[hidden]{display:none !important}
html{font-family:Inter, Arial, sans-serif;font-size:16px}
body{background:var(--bg);color:var(--fg);}

a{color:var(--accent)}

/* Skip link */
.skip-link{
    position:fixed;left:12px;top:12px;padding:8px 12px;background:#111;color:#fff;border-radius:6px;z-index:999;transform:translateY(-120%);transition:transform .2s ease;}
.skip-link:focus{transform:none}

/* <!-- Layouten använder horisontell scroll-snap; snap-stop gör att mobil-swipe stannar vid nästa sektion. --> */
.container{
    display:flex;
    width:100%;
    height:calc(var(--vh, 1vh) * 100);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling: touch;
    position:relative;
    overscroll-behavior-x: contain;
}

.panel{
    width:var(--panel-width);
    min-height:calc(var(--vh, 1vh) * 100);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:var(--gap);
    flex:0 0 var(--panel-width);
    scroll-snap-align:start;
    scroll-snap-stop:always;
    position:relative;
    /* allow internal vertical scrolling for panels with overflowing content */
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

/* Hero */
.hero{
    background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.85)),
    url("q_profil_bredast.png");
    background-size:cover;
    background-position:center;
}

/* Panels color variants */
.room1{background:#080808}
.room2{background:#111}
.room3{background:#090909}
.room4{background:#151515}
.room5{background:#050505}

h1{font-size:clamp(3rem,8vw,6rem);letter-spacing:2px}
/* Logo image inside h1 — scales like the text it replaces */
.hero h1 img{
    display:block;
    width:auto;
    height:auto;
    max-width:350px;
}
@media (max-width:480px){
    .hero h1 img{ max-width:240px; }
}
h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1rem}

.panel p{max-width:700px;text-align:center;line-height:1.6;font-size:1rem;color:var(--muted)}

/* Scroll indicator */
.scroll-indicator{
    position:absolute;bottom:40px;font-size:.9rem;letter-spacing:4px;opacity:.85;background:rgba(0,0,0,.3);padding:6px 12px;border-radius:999px;
    transition:opacity .3s ease, transform .3s ease;}
.scroll-indicator.hidden{opacity:0;transform:translateY(8px);pointer-events:none}

/* Focus visibility for keyboard users */
.panel:focus{outline:var(--focus);outline-offset:8px}
a:focus{outline:2px dashed var(--accent);outline-offset:4px}

/* Make contact link more visible */
.contact a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--fg);padding-bottom:2px}

/* Responsive tweak */
@media (max-width:600px){
    .panel p{padding:0 8px;font-size:0.95rem}
    .skip-link{left:8px;top:8px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    :root{scroll-behavior:auto}
    .container{scroll-behavior:auto}
}

/* Signup / interest panel */
.signup{
    background:#0b0b0b;
    align-items:stretch;
    padding:0;
}
.signup-gate{
    display:flex;flex-direction:column;align-items:center;gap:1.5rem;
    text-align:center;padding:var(--gap);width:100%;max-width:680px;
    margin:auto;
    align-self:center;
}
.signup-inner{
    flex:1;display:flex;flex-direction:column;
    padding:var(--gap);overflow-y:auto;
}
.signup-inner .app-header h2{color:var(--fg);margin-bottom:1rem}
.signup-form{
    flex:1;height:auto;min-height:400px;
    border:0;border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,.7);
    filter:invert(1) hue-rotate(180deg) brightness(0.88) contrast(1.05) saturate(1.1);
}

/* Calendar panel — dark theme to match the rest of the site */
/* Override .panel centering so booking-inner can fill the full panel */
.panel.booking{
    background:#0d0d0d;color:var(--fg);
    align-items:stretch;   /* children fill full width */
    padding:0;             /* booking-inner manages its own padding */
}
/* booking-inner becomes a full-panel flex column */
.panel.booking .booking-inner{
    flex:1;display:flex;flex-direction:column;
    padding:var(--gap);overflow-y:auto;
}
.panel.booking .app-header h2{color:var(--fg);margin-bottom:1rem}
/* iframe fills remaining height inside booking-inner */
/* invert(1) hue-rotate(180deg) converts Google's light UI to dark;
   brightness/contrast fine-tunes legibility */
.panel.booking iframe{
    flex:1;height:auto;min-height:400px;
    border:0;border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,.7);
    filter:invert(1) hue-rotate(180deg) brightness(0.88) contrast(1.05) saturate(1.1);
}

/* Booking gate — centered in the panel */
.booking-gate{
    display:flex;flex-direction:column;align-items:center;gap:1.5rem;
    text-align:center;padding:var(--gap);width:100%;max-width:420px;
    margin:auto;          /* centers vertically and horizontally in the flex panel */
    align-self:center;    /* overrides align-items:stretch from parent */
}
.gate-desc{color:var(--muted);font-size:.95rem}
.gate-form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.gate-input{
    width:100%;padding:12px 16px;
    background:#1a1a1a;border:1px solid #333;border-radius:8px;
    color:var(--fg);font-size:1rem;letter-spacing:3px;text-align:center;
    transition:border-color .2s;
}
.gate-input:focus{outline:none;border-color:var(--fg)}
.gate-btn{
    padding:10px 36px;background:var(--fg);color:var(--bg);
    border:none;border-radius:8px;font-size:1rem;
    cursor:pointer;letter-spacing:1px;transition:opacity .2s;
}
.gate-btn:hover{opacity:.8}
.gate-error{color:#f55;font-size:.9rem}

/* Lock button inside calendar header */
.app-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.app-header h2{margin-bottom:0}
.lock-btn{
    padding:6px 18px;background:transparent;color:var(--muted);
    border:1px solid #333;border-radius:8px;font-size:.85rem;
    cursor:pointer;letter-spacing:1px;transition:color .2s, border-color .2s;
}
.lock-btn:hover{color:var(--fg);border-color:var(--fg)}

/* ── Recensionsknapp (fast i hörnet) ── */
.review-trigger{
    position:fixed;bottom:24px;right:24px;
    padding:9px 20px;
    background:transparent;color:var(--muted);
    border:1px solid #333;border-radius:8px;
    font-size:.82rem;font-family:inherit;letter-spacing:1px;
    cursor:pointer;z-index:100;
    transition:color .2s,border-color .2s;
}
.review-trigger:hover{color:var(--fg);border-color:var(--fg)}
.review-trigger:focus{outline:var(--focus);outline-offset:4px}

/* ── Recensionsmodal ── */
.review-modal{
    position:fixed;inset:0;
    background:rgba(0,0,0,.82);
    z-index:500;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
}
/* .review-modal[hidden] hanteras av [hidden]{display:none!important} globalt */

.review-modal-box{
    position:relative;
    width:100%;max-width:680px;
    height:90vh;
    background:#0d0d0d;
    border-radius:14px;
    overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 20px 80px rgba(0,0,0,.95);
}
.review-modal-box h2{
    padding:22px 24px 0;
    font-size:clamp(1.3rem,3vw,1.8rem);
}

.review-close{
    position:absolute;top:14px;right:16px;
    background:transparent;color:var(--muted);
    border:none;font-size:1.2rem;
    cursor:pointer;line-height:1;
    padding:4px 8px;border-radius:4px;
    transition:color .2s;
}
.review-close:hover{color:var(--fg)}
.review-close:focus{outline:var(--focus);outline-offset:2px}

.review-form{
    margin-top:10px;
    flex:1;width:100%;height:600px;
    border:0;
    filter:invert(1) hue-rotate(180deg) brightness(0.88) contrast(1.05) saturate(1.1);
}

@media(max-width:600px){
    .review-trigger{bottom:16px;right:16px;font-size:.78rem;padding:8px 14px}
    .review-form{height:500px}
}

/* ── Prototypmärke ── */
.proto-badge{
    position:fixed;top:14px;left:14px;z-index:90;
    padding:4px 12px;border:1px solid #444;border-radius:999px;
    font-size:.7rem;letter-spacing:3px;text-transform:uppercase;
    color:var(--muted);background:rgba(0,0,0,.55);pointer-events:none;
}


/* Klientportalen nås från alla paneler. Native dialog låser bakgrundens fokus. */
.portal-trigger{
    position:fixed;top:14px;right:14px;z-index:100;
    padding:11px 20px;border:1px solid #777;border-radius:8px;
    background:rgba(0,0,0,.85);color:var(--fg);font:inherit;font-size:.9rem;cursor:pointer;
}
.portal-trigger:hover{background:#222;border-color:#fff}
.portal-trigger:focus-visible,.portal-close:focus-visible{outline:var(--focus);outline-offset:3px}
.portal-dialog{
    margin:auto;padding:48px 0 0;width:min(480px,calc(100vw - 24px));
    height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);
    background:#0d0d0d;color:var(--fg);border:1px solid #333;border-radius:16px;
    box-shadow:0 24px 80px #000;overflow:hidden;
}
.portal-dialog::backdrop{background:rgba(0,0,0,.82)}
.portal-close{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;border-radius:6px;background:transparent;color:#fff;font-size:1.3rem;cursor:pointer}
.portal-dialog iframe{display:block;width:100%;height:100%;border:0;background:#0d0d0d}
body:has(.portal-dialog[open]){overflow:hidden}
.booking-inner,.signup-inner{padding-top:max(var(--gap),76px)!important}
@media(max-width:600px){.portal-trigger{font-size:.82rem;padding:10px 14px}}