/* ===== Immodemo — component styles (ported from the prototype) ===== */

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line);transition:all .3s ease;}
.site-header.at-top{background:rgba(255,255,255,0);backdrop-filter:none;border-bottom-color:transparent;}
.header-inner{height:66px;}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:21px;color:var(--ink);}
.logo svg{flex-shrink:0;}
.main-nav{display:flex;gap:6px;}
.main-nav a{cursor:pointer;padding:8px 14px;font-size:14.5px;font-weight:550;border-radius:var(--pill);color:var(--ink-2);transition:all .18s;}
.main-nav a:hover{color:var(--ink);}
.main-nav a.is-active{color:var(--brand);background:var(--brand-soft);}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);}
.icon-btn:hover{background:var(--bg-soft);}
.lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--pill);overflow:hidden;}
.lang-switch a{padding:6px 11px;font-size:13px;font-weight:600;color:var(--ink-3);}
.lang-switch a.is-active{background:var(--brand);color:#fff;}
.user-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);padding:5px 12px 5px 6px;border-radius:var(--pill);}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;}
.dropdown{position:absolute;right:0;top:calc(100% + 10px);width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-md);box-shadow:var(--sh-lg);padding:10px;z-index:120;}
.dropdown a.drop-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--rad-sm);}
.dropdown a.drop-item:hover{background:var(--bg-soft);}
.has-menu{position:relative;}
.has-menu>.dropdown{display:none;}
.has-menu:focus-within>.dropdown,.has-menu:hover>.dropdown{display:block;}

/* ---- hero ---- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .ov1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,18,.5) 0%,rgba(15,22,18,.12) 38%,rgba(15,22,18,.7) 100%);}
.hero .ov2{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,22,18,.55) 0%,rgba(15,22,18,.18) 42%,rgba(15,22,18,0) 70%);}
.hero-content{position:relative;padding-bottom:56px;padding-top:120px;width:100%;}
.hero-content .eyebrow{color:rgba(255,255,255,.85);}
.hero-head{color:#fff;margin:14px 0 0;max-width:760px;white-space:pre-line;}
.hero-sub{color:rgba(255,255,255,.9);max-width:520px;margin-top:18px;}

/* ---- search bar ---- */
.search-bar{background:var(--surface);border-radius:var(--rad-lg);box-shadow:var(--sh-lg);border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;max-width:880px;width:100%;}
.search-bar .deal-tabs{display:flex;gap:6px;padding:6px 8px 2px;}
.search-bar .deal-tabs button{border:none;background:transparent;color:var(--ink-2);padding:8px 18px;border-radius:var(--pill);font-size:14px;font-weight:600;transition:all .18s;}
.search-bar .deal-tabs button.is-active{background:var(--brand);color:#fff;}
.search-inner{display:flex;align-items:stretch;gap:4px;padding:4px;}
.search-field{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--rad-md);}
.search-field .lbl{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;}
.search-field input,.search-field select{border:none;outline:none;font-size:15px;font-family:inherit;background:transparent;color:var(--ink);padding:0;width:100%;appearance:none;}
.search-divider{width:1px;background:var(--line);margin:8px 0;}

/* ---- property card ---- */
.prop-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;display:block;color:inherit;}
.prop-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.prop-card .media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-stone);}
.prop-card .media img{width:100%;height:100%;object-fit:cover;}
.prop-card .tags{position:absolute;top:12px;left:12px;display:flex;gap:8px;}
.prop-card .save-btn{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--ink-2);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;}
.prop-card .save-btn.is-saved{color:#b14a35;}
.prop-card .body{padding:22px;}
.prop-card h3{margin:0 0 14px;font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.25;}
.prop-meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;color:var(--ink-2);font-size:14px;}
.prop-meta span{display:inline-flex;align-items:center;gap:6px;}
.prop-card .price{font-size:21px;letter-spacing:-.02em;}
.prop-card .price small{font-size:14px;font-weight:500;color:var(--ink-3);}

/* ---- grids ---- */
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.search-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:860px){.prop-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.prop-grid,.search-grid{grid-template-columns:1fr;}}

/* ---- value props / stats / owner band ---- */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.val-ic{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:var(--rad-md);background:var(--brand-soft);color:var(--brand);}
.stats-band{background:var(--brand);color:var(--brand-ink);}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;}
.stat-grid strong{font-size:clamp(34px,4vw,48px);letter-spacing:-.03em;font-weight:700;display:block;}
.stat-grid span{color:rgba(244,242,234,.7);font-size:15px;}
@media(max-width:860px){.val-grid{grid-template-columns:1fr;}.stat-grid{grid-template-columns:1fr 1fr;}}
.owner-band{display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;box-shadow:var(--sh-md);}
.owner-band .media{position:relative;min-height:360px;}
.owner-band .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:1024px){.owner-band{grid-template-columns:1fr;}}
.check-list{list-style:none;padding:0;margin:24px 0 30px;display:flex;flex-direction:column;gap:12px;}
.check-list li{display:flex;align-items:center;gap:10px;font-size:15.5px;}
.check-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);flex-shrink:0;}

/* ---- search page ---- */
.search-layout{display:grid;grid-template-columns:290px 1fr;gap:32px;align-items:start;}
.filter-group{display:flex;flex-direction:column;gap:12px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line);}
@media(max-width:1024px){.search-layout{grid-template-columns:1fr;}.search-sidebar{position:static!important;}}

/* ---- detail ---- */
.detail-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;}
.gallery-grid{display:grid;gap:12px;}
.gallery-main{position:relative;border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:3/2;background:var(--bg-stone);}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:grid;gap:12px;}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:var(--rad-md);cursor:pointer;}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px;}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px;max-width:600px;}
.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.download-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:var(--rad-md);border:1px solid var(--line);background:var(--surface);transition:border-color .18s,background .18s;}
.download-row:hover{border-color:var(--brand-300);background:var(--bg-soft);}
.energy-card{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;}
@media(max-width:1024px){.detail-layout,.energy-card{grid-template-columns:1fr;}.detail-aside{position:static!important;}}
@media(max-width:860px){.spec-grid,.download-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr;}.gallery-grid{grid-template-columns:1fr;}}

/* energy scale (A+..H) */
.energy-scale{display:flex;flex-direction:column;gap:4px;}
.energy-scale .bar{display:flex;align-items:center;height:26px;border-radius:4px;color:#fff;font-size:12px;font-weight:700;padding:0 10px;}
.energy-scale .bar .val{margin-left:auto;}
.e-aplus,.e-a{background:#1a9641;}.e-b{background:#52b04f;}.e-c{background:#a6d96a;color:#33421f;}
.e-d{background:#fee08b;color:#5b4a14;}.e-e{background:#fdae61;color:#5b3416;}.e-f{background:#f46d43;}
.e-g{background:#d73027;}.e-h{background:#a50026;}

/* ---- dashboard ---- */
.dash-head{background:var(--bg);border-bottom:1px solid var(--line);}
.dash-tabs{display:flex;gap:2px;}
.dash-tabs button,.dash-tabs a{border:none;background:transparent;padding:12px 18px;font-size:15px;font-weight:600;color:var(--ink-3);border-bottom:2.5px solid transparent;margin-bottom:-1px;cursor:pointer;}
.dash-tabs .is-active{color:var(--ink);border-bottom-color:var(--brand);}
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:860px){.stat4{grid-template-columns:1fr 1fr;}}
.stat-tile{padding:22px;box-shadow:var(--sh-sm);}
.stat-tile .ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--rad-sm);background:var(--brand-soft);color:var(--brand);margin-bottom:14px;}
.stat-tile strong{font-size:28px;letter-spacing:-.02em;display:block;}
.row-card{display:flex;align-items:center;gap:18px;padding:14px;box-shadow:var(--sh-sm);}
.row-card .thumb{position:relative;width:116px;height:84px;border-radius:var(--rad-md);overflow:hidden;flex-shrink:0;background:var(--bg-stone);}
.row-card .thumb img{width:100%;height:100%;object-fit:cover;}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.photo-tile{position:relative;border-radius:var(--rad-md);overflow:hidden;aspect-ratio:4/3;background:var(--bg-stone);border:1px solid var(--line);}
.photo-tile img{width:100%;height:100%;object-fit:cover;}
.dropzone{border:2px dashed var(--line-2);background:var(--bg-soft);border-radius:var(--rad-md);padding:26px 20px;text-align:center;cursor:pointer;}

/* ---- auth ---- */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 66px);}
.auth-brand{position:relative;background:var(--brand);color:var(--brand-ink);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(36px,4vw,64px);}
.auth-brand>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;}
.auth-brand .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,48,41,.6),rgba(23,48,41,.92));}
@media(max-width:1024px){.auth-layout{grid-template-columns:1fr;}.auth-brand{display:none;}}

/* ---- footer ---- */
.site-footer{background:var(--brand);color:var(--brand-ink);}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;}
.footer-grid a{color:rgba(244,242,234,.85);font-size:14.5px;}
.footer-grid a:hover{color:#fff;}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* fade-in */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;}

/* ── Feature tour (driver.js) ─────────────────────────────────────────────
   Brand skin for the OpenDXP feature walkthrough popover + the launcher. */
.driver-popover.immo-tour{
    background:var(--bg);
    color:var(--ink);
    border-radius:var(--rad-md);
    box-shadow:var(--sh-lg);
    padding:22px 22px 18px;
    max-width:360px;
    font-family:inherit;
}
.driver-popover.immo-tour .driver-popover-title{
    font-size:17.5px;
    font-weight:650;
    letter-spacing:-.01em;
    color:var(--ink);
    margin-bottom:8px;
}
.driver-popover.immo-tour .driver-popover-description{
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink-2);
}
.driver-popover.immo-tour .driver-popover-description strong{color:var(--brand);font-weight:650;}
.driver-popover.immo-tour .driver-popover-footer{margin-top:18px;gap:8px;}
.driver-popover.immo-tour .driver-popover-footer button{
    text-shadow:none;
    border-radius:var(--rad-sm);
    padding:9px 16px;
    font-size:13.5px;
    font-weight:600;
    border:1px solid var(--line);
    background:var(--bg);
    color:var(--ink-2);
    transition:background .15s, color .15s, border-color .15s;
}
.driver-popover.immo-tour .driver-popover-footer button:hover{background:var(--bg-soft,#f6f4ee);color:var(--ink);}
.driver-popover.immo-tour .driver-popover-next-btn{
    background:var(--brand);
    border-color:var(--brand);
    color:var(--brand-ink);
}
.driver-popover.immo-tour .driver-popover-next-btn:hover{filter:brightness(1.08);background:var(--brand);color:var(--brand-ink);}
.driver-popover.immo-tour .driver-popover-progress-text{color:var(--ink-3);font-size:12.5px;}
.driver-popover.immo-tour .driver-popover-arrow{color:var(--bg);}

/* launcher — a vertical tab fixed to the right edge, at the vertical centre,
   in the OpenDXP brand yellow with the OpenDXP mark so it reads as an OpenDXP
   feature tour. */
.tour-launch{
    position:fixed;
    top:50%;
    right:0;
    transform:translateY(-50%);
    z-index:900;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    padding:15px 8px 16px;
    border:none;
    border-radius:16px 0 0 16px;
    background:#e6ff2a;
    color:#141210;
    font-family:inherit;
    cursor:pointer;
    box-shadow:-6px 6px 22px rgba(20,18,16,.20);
    transition:padding-right .18s ease, filter .18s ease, box-shadow .18s ease;
}
.tour-launch:hover{padding-right:13px;filter:saturate(1.05) brightness(1.02);box-shadow:-8px 8px 28px rgba(20,18,16,.26);}
.tour-launch:focus-visible{outline:2px solid #141210;outline-offset:2px;}
.tour-launch .odx-mark{width:26px;height:26px;display:block;flex:none;}
.tour-launch .odx-label{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-size:12px;
    font-weight:700;
    letter-spacing:.10em;
    text-transform:uppercase;
    line-height:1;
}
@media (max-width:640px){
    .tour-launch{gap:0;padding:11px 7px;border-radius:14px 0 0 14px;}
    .tour-launch .odx-label{display:none;}
    .tour-launch .odx-mark{width:24px;height:24px;}
}