/* ═══════════════════════════════════════════════════════════════
   Realtor Slideshow — Fullscreen Display Styles
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
    --rls-black:   #0a0a0a;
    --rls-accent:  #4f46e5;
    --rls-white:   #ffffff;
    --rls-glass:   rgba(0,0,0,.5);
    --rls-info-w:  480px;   /* width of vertical info panel */
    --rls-bar-h:   220px;   /* height of horizontal info bar */
}

html,body { width:100vw; height:100vh; overflow:hidden; background:var(--rls-black);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }

/* ── Container ──────────────────────────────────────────────────── */
.rls-slideshow { position:relative; width:100vw; height:100vh; overflow:hidden; }
.rls-slides    { position:absolute; inset:0; }

/* ── Slide base ─────────────────────────────────────────────────── */
.rls-slide {
    position:absolute; inset:0;
    display:flex;
    opacity:0; transition:opacity .8s ease;
    pointer-events:none;
}
.rls-slide.active  { opacity:1; pointer-events:auto; z-index:2; }
.rls-slide.leaving { opacity:0; z-index:1; }

/* Transition variants */
.rls-transition--slide .rls-slide { transform:translateX(100%); transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .1s; }
.rls-transition--slide .rls-slide.active  { transform:translateX(0); opacity:1; }
.rls-transition--slide .rls-slide.leaving { transform:translateX(-100%); }
.rls-transition--zoom  .rls-slide { transform:scale(1.04); transition:transform .9s ease,opacity .9s ease; }
.rls-transition--zoom  .rls-slide.active  { transform:scale(1); opacity:1; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT: RIGHT (default) — photo left, info panel right
   ════════════════════════════════════════════════════════════════ */
.rls-layout--right { flex-direction:row; }
.rls-layout--right .rls-slide__photo-panel { flex:1; position:relative; overflow:hidden; }
.rls-layout--right .rls-slide__info { width:var(--rls-info-w); flex-shrink:0; background:var(--rls-black); display:flex; flex-direction:column; justify-content:flex-start; padding:80px 44px 0; position:relative; z-index:4; overflow:hidden; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT: LEFT — info panel left, photo right
   ════════════════════════════════════════════════════════════════ */
.rls-layout--left { flex-direction:row-reverse; }
.rls-layout--left .rls-slide__photo-panel { flex:1; position:relative; overflow:hidden; }
.rls-layout--left .rls-slide__info { width:var(--rls-info-w); flex-shrink:0; background:var(--rls-black); display:flex; flex-direction:column; justify-content:flex-start; padding:80px 44px 0; position:relative; z-index:4; overflow:hidden; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT: BOTTOM — full photo, info bar at bottom
   ════════════════════════════════════════════════════════════════ */
.rls-layout--bottom { flex-direction:column; }
.rls-layout--bottom .rls-slide__photo-bg-wrap { position:absolute; inset:0; overflow:hidden; }
.rls-layout--bottom .rls-slide__info--bar {
    position:absolute; bottom:0; left:0; right:0;
    height:var(--rls-bar-h);
    background:linear-gradient(to top, rgba(0,0,0,.92) 70%, transparent);
    display:flex; align-items:flex-end; flex-wrap:wrap;
    padding:24px 48px; gap:12px 32px;
    z-index:4;
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT: TOP — full photo, info bar at top
   ════════════════════════════════════════════════════════════════ */
.rls-layout--top { flex-direction:column; }
.rls-layout--top .rls-slide__photo-bg-wrap { position:absolute; inset:0; overflow:hidden; }
.rls-layout--top .rls-slide__info--bar {
    position:absolute; top:0; left:0; right:0;
    height:var(--rls-bar-h);
    background:linear-gradient(to bottom, rgba(0,0,0,.92) 70%, transparent);
    display:flex; align-items:flex-start; flex-wrap:wrap;
    padding:24px 48px; gap:12px 32px;
    z-index:4;
}

/* ── Photo layers (cycling) ──────────────────────────────────────── */
.rls-photo-layer {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; /* mode subclasses override */
}
/* Full-bg wrap for horizontal layouts */
.rls-slide__photo-bg-wrap {
    position:absolute; inset:0; overflow:hidden;
}

/* Gradient overlay on photo side for vertical layouts */
.rls-layout--right .rls-slide__photo-panel::after,
.rls-layout--left  .rls-slide__photo-panel::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to right,transparent 55%,rgba(10,10,10,.5) 100%),
               linear-gradient(to top,rgba(10,10,10,.4) 0%,transparent 40%);
    pointer-events:none; z-index:2;
}
.rls-layout--left .rls-slide__photo-panel::after {
    background:linear-gradient(to left,transparent 55%,rgba(10,10,10,.5) 100%),
               linear-gradient(to top,rgba(10,10,10,.4) 0%,transparent 40%);
}

/* Thumbnails strip */
.rls-slide__thumbs { position:absolute; bottom:20px; left:20px; right:20px; display:flex; gap:8px; justify-content:center; z-index:10; }
.rls-slide__thumb { width:72px; height:48px; object-fit:cover; border-radius:6px; border:2.5px solid rgba(255,255,255,.25); cursor:pointer; transition:border-color .2s,transform .2s; flex-shrink:0; }
.rls-slide__thumb:hover,.rls-slide__thumb.active { border-color:#fff; transform:scale(1.05); }

/* ── Mini map glass (bottom-left of photo panel) ─────────────────── */
.rls-slide__map-glass {
    position:absolute; bottom:88px; left:16px;
    width:200px; height:138px;
    border-radius:14px; overflow:hidden;
    z-index:20;
    border:2.5px solid rgba(255,255,255,.5);
    box-shadow:0 6px 24px rgba(0,0,0,.8),
               0 2px 8px rgba(0,0,0,.5),
               inset 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter:blur(1px);
    opacity:.96;
    transition:opacity .3s, transform .3s;
}
.rls-slide__map-glass:hover { opacity:1; transform:scale(1.03); }
.rls-slide__map-svg {
    width:100%; height:calc(100% - 28px);
    display:block;
    object-fit:fill;
}
.rls-slide__map-label {
    position:absolute; bottom:0; left:0; right:0;
    height:28px; line-height:28px;
    background:rgba(0,0,0,.75);
    color:rgba(255,255,255,.85);
    font-size:11px; text-align:center;
    font-weight:500; letter-spacing:.03em;
    backdrop-filter:blur(4px);
}

/* ── Info content ───────────────────────────────────────────────── */
.rls-slide__category { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#a5b4fc; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.rls-slide__category::before { content:''; display:block; width:28px; height:2px; background:var(--rls-accent); border-radius:2px; }
/* For horizontal bar layouts, hide the decorative line */
.rls-slide__info--bar .rls-slide__category::before { display:none; }

.rls-slide__title { font-size:1.8rem; font-weight:800; line-height:1.15; color:var(--rls-white); margin-bottom:12px; letter-spacing:-.02em; }
.rls-slide__info--bar .rls-slide__title { font-size:1.8rem; margin-bottom:8px; }

.rls-slide__location { font-size:13px; color:rgba(255,255,255,.65); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.rls-slide__info--bar .rls-slide__location { margin-bottom:0; }

.rls-slide__chars { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.rls-slide__info--bar .rls-slide__chars { margin-bottom:0; }
.rls-slide__char { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:100px; padding:5px 14px; font-size:13px; color:var(--rls-white); display:flex; align-items:center; gap:6px; }
.rls-slide__char span { opacity:.65; }

.rls-slide__price { font-size:1.7rem; font-weight:800; color:var(--rls-white); letter-spacing:-.02em; }
.rls-slide__info--bar .rls-slide__price { font-size:1.5rem; }
.rls-slide__price-label { font-size:11px; color:rgba(255,255,255,.45); margin-bottom:10px; }
.rls-slide__info--bar .rls-slide__price-label { display:none; }

.rls-slide__rating { display:flex; align-items:center; gap:6px; margin-bottom:24px; font-size:14px; color:rgba(255,255,255,.8); }
.rls-slide__stars  { color:#fbbf24; letter-spacing:1px; }

/* ── Kodikos — μεγάλο εμφανές block ─────────────────────────────── */
.rls-slide__kodikos { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; padding:8px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:10px; }
.rls-slide__kodikos-label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); }
.rls-slide__kodikos-value { font-size:22px; font-weight:900; color:#fff; font-family:monospace; letter-spacing:.12em; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.rls-slide__status { position:absolute; top:40px; right:40px; padding:6px 16px; border-radius:100px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(220,38,38,.85); color:#fff; }

/* ── QR (160×160) ───────────────────────────────────────────────── */
.rls-slide__qr-wrap { display:flex; align-items:center; gap:14px; padding:12px 14px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); border-radius:12px 12px 0 0; margin-top:auto; flex-shrink:0; }
.rls-slide__info--bar .rls-slide__qr-wrap { margin-top:0; padding:10px 16px; }
.rls-qr-canvas { flex-shrink:0; }
.rls-qr-canvas img, .rls-qr-canvas canvas { border-radius:12px; width:160px!important; height:160px!important; flex-shrink:0; display:block; box-shadow:0 0 0 5px rgba(255,255,255,.2); }
.rls-slide__info--bar .rls-qr-canvas img,
.rls-slide__info--bar .rls-qr-canvas canvas { width:72px!important; height:72px!important; }
.rls-slide__qr-text { display:flex; flex-direction:column; gap:4px; }
.rls-slide__qr-text strong { display:block; font-size:16px; color:#fff; }
.rls-slide__qr-text span   { font-size:13px; color:rgba(255,255,255,.55); }
.rls-slide__qr-brand { font-size:11px; color:rgba(255,255,255,.35); margin-top:6px; border-top:1px solid rgba(255,255,255,.1); padding-top:6px; }
.rls-slide__qr-brand a { color:rgba(255,255,255,.55); text-decoration:none; }
.rls-slide__qr-brand a:hover { color:#fff; }

/* ── Progress bar ───────────────────────────────────────────────── */
.rls-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); z-index:10; }
.rls-progress__bar { height:100%; background:var(--rls-accent); width:0%; transition:width linear; }

/* ── Counter ────────────────────────────────────────────────────── */
.rls-counter { position:absolute; top:24px; right:24px; font-size:13px; font-weight:600; color:rgba(255,255,255,.6); z-index:20; background:rgba(0,0,0,.4); padding:5px 12px; border-radius:100px; backdrop-filter:blur(8px); }

/* ── Branding (agent only — no site logo) ───────────────────────── */
.rls-branding { position:absolute; top:24px; left:24px; display:flex; align-items:center; gap:10px; z-index:20; background:rgba(0,0,0,.4); padding:10px 16px; border-radius:100px; backdrop-filter:blur(8px); }
.rls-branding__logo { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2); }
.rls-branding__name { font-size:13px; font-weight:600; color:#fff; line-height:1.2; }

/* ── Loader ─────────────────────────────────────────────────────── */
.rls-loader { position:absolute; inset:0; background:var(--rls-black); display:flex; align-items:center; justify-content:center; z-index:100; transition:opacity .5s; }
.rls-loader.hide { opacity:0; pointer-events:none; }
.rls-loader__inner { display:flex; flex-direction:column; align-items:center; gap:20px; }
.rls-loader__logo  { max-height:48px; width:auto; }
.rls-loader__name  { font-size:24px; font-weight:700; color:#fff; }

.rls-spinner { border:3px solid rgba(255,255,255,.1); border-top-color:var(--rls-accent); border-radius:50%; animation:rls-spin .7s linear infinite; }
.rls-spinner--lg { width:48px; height:48px; border-width:4px; }
@keyframes rls-spin { to { transform:rotate(360deg); } }

.rls-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:18px; }

.rls-slideshow-body { cursor:none; }
.rls-slideshow-body:hover { cursor:default; }

/* ── Info scrollable content + sticky QR ────────────────────────── */
.rls-slide__info-scroll {
    flex:1; overflow-y:auto; overflow-x:hidden; padding:0 44px 12px;
    scrollbar-width:none;
    min-height:0; /* critical: allows flex child to shrink */
}
.rls-slide__info-scroll::-webkit-scrollbar { display:none; }
.rls-slide__qr-sticky {
    flex-shrink:0;
    padding:0 44px 20px;
    background:var(--rls-black);
}

/* ── Photo collage (4-up grid) ───────────────────────────────────── */
.rls-photo-collage {
    position:absolute; inset:0;
    display:grid;
    gap:3px;
    z-index:0;
}
.rls-photo-collage--1 { grid-template-columns:1fr; }
.rls-photo-collage--2 { grid-template-columns:1fr 1fr; }
.rls-photo-collage--3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.rls-photo-collage--4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }

.rls-collage-cell {
    overflow:hidden; position:relative;
    background:#111;
}
/* 3-photo: first image spans full left column */
.rls-photo-collage--3 .rls-collage-cell:first-child {
    grid-row: 1 / 3;
}
.rls-collage-cell img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 8s ease-out;
    display:block;
}
.rls-slide.active .rls-collage-cell:first-child img {
    transform:scale(1.06);
}

/* ── Cube 3D flip (CUBES mode) ───────────────────────────────────── */
.rls-cube-cell {
    perspective: 900px;
    perspective-origin: center center;
}
.rls-cube {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.rls-cube.flipped {
    transform: rotateY(180deg);
}
/* Alternate cells flip on Y vs X axis for variety */
.rls-collage-cell:nth-child(2) .rls-cube.flipped { transform: rotateY(-180deg); }
.rls-collage-cell:nth-child(3) .rls-cube.flipped { transform: rotateX(180deg); }
.rls-collage-cell:nth-child(4) .rls-cube.flipped { transform: rotateX(-180deg); }

.rls-cube__face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.rls-cube__face img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.rls-cube__face--front { transform: rotateY(0deg); }
.rls-cube__face--back  { transform: rotateY(180deg); }
/* Match back face axis for each cell */
.rls-collage-cell:nth-child(2) .rls-cube__face--back { transform: rotateY(-180deg); }
.rls-collage-cell:nth-child(3) .rls-cube__face--back { transform: rotateX(180deg); }
.rls-collage-cell:nth-child(4) .rls-cube__face--back { transform: rotateX(-180deg); }

/* Ken Burns on active front face */
.rls-slide.active .rls-cube__face--front img {
    animation: rls-kb 8s ease-out forwards;
}
@keyframes rls-kb {
    from { transform: scale(1.0); }
    to   { transform: scale(1.06); }
}

/* Collage mode: fade in new images on swap */
.rls-collage-cell img {
    transition: opacity 0.6s ease;
}

/* ── Map: repositioned for collage mode (bottom-right, smaller) ──── */
.rls-photo-collage ~ .rls-slide__map-glass {
    bottom: 14px;
    left: auto;
    right: 14px;
    width: 170px;
    height: 112px;
    border-radius: 12px;
    z-index: 20;
    opacity: 0.9;
    /* Sit inside the bottom-right collage cell, not over it */
    pointer-events: none;
}
.rls-photo-collage ~ .rls-slide__map-glass .rls-slide__map-svg {
    height: calc(100% - 22px);
}
.rls-photo-collage ~ .rls-slide__map-glass .rls-slide__map-label {
    height: 22px;
    line-height: 22px;
    font-size: 10px;
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT: PORTRAIT — photo top, info bottom (κατακόρυφο monitor)
   ════════════════════════════════════════════════════════════════ */
.rls-layout--portrait { flex-direction:column; }
.rls-layout--portrait .rls-slide__photo-panel { flex:1; position:relative; overflow:hidden; min-height:0; }
/* NOTE: height uses % (not vh) on purpose — % resolves against the
   actual pixel height of .rls-slide (which fills #rls-slideshow),
   so it stays correct even inside the rotated-kiosk canvas, where
   vh/vw units point at the real (unrotated) browser viewport and
   silently shrink this panel, clipping the title/info.            */
.rls-layout--portrait .rls-slide__info {
    width:100%; flex-shrink:0; height:42%; background:var(--rls-black);
    display:flex; flex-direction:row; align-items:flex-start; gap:18px;
    padding:16px 28px; position:relative; z-index:4; overflow:hidden;
}
/* Left column: plain top-aligned flow (NOT vertically centered).
   Centering here would make tall content overflow BOTH edges of the
   panel — since this whole thing sits inside the rotated-kiosk
   canvas, that vertical overflow shows up on screen as horizontal
   clipping (missing first letters of title/location/kodikos etc).
   Top-aligned means any overflow only ever clips the bottom. */
.rls-layout--portrait .rls-slide__info-scroll { flex:1; min-width:0; padding:0; }
/* Right column: QR code, stacked vertically, centered */
.rls-layout--portrait .rls-slide__qr-sticky {
    flex:0 0 132px; width:132px; padding:0; background:none;
    display:flex; align-items:center;
}
.rls-layout--portrait .rls-slide__qr-wrap {
    flex-direction:column; align-items:center; text-align:center;
    gap:6px; width:100%; margin-top:0; border-radius:12px; padding:10px 8px;
}
.rls-layout--portrait .rls-slide__qr-text { align-items:center; }
.rls-layout--portrait .rls-slide__qr-brand { display:none; }
.rls-layout--portrait .rls-qr-canvas img,
.rls-layout--portrait .rls-qr-canvas canvas { width:96px!important; height:96px!important; }
.rls-layout--portrait .rls-slide__qr-text strong { font-size:13px; line-height:1.3; }
.rls-layout--portrait .rls-slide__qr-text span { font-size:11px; line-height:1.3; }
.rls-layout--portrait .rls-slide__title { font-size:1.35rem; margin-bottom:6px; }
.rls-layout--portrait .rls-slide__price { font-size:1.35rem; }
.rls-layout--portrait .rls-slide__kodikos-value { font-size:17px; }
.rls-layout--portrait .rls-slide__chars { margin-bottom:5px; }
.rls-layout--portrait .rls-slide__location { margin-bottom:5px; font-size:12px; }
.rls-layout--portrait .rls-slide__category { margin-bottom:6px; }
.rls-layout--portrait .rls-slide__photo-panel::after { display:none; }
.rls-layout--portrait .rls-slide__map-glass { width:160px; height:110px; bottom:10px; left:auto; right:10px; }
.rls-layout--portrait .rls-slide__thumbs { bottom:10px; }

/* ── Mobile/Tablet blocker ───────────────────────────────────────── */
.rls-mobile-blocker {
    display:none; position:fixed; inset:0;
    background:#0a0a0a; z-index:9999;
    flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:40px 30px;
}
.rls-mobile-blocker__icon { font-size:72px; margin-bottom:24px; }
.rls-mobile-blocker__title { font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:14px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.rls-mobile-blocker__sub { font-size:15px; color:rgba(255,255,255,.55); line-height:1.7; max-width:380px; margin:0 auto 28px; }
.rls-mobile-blocker__url { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:12px 20px; font-family:monospace; font-size:14px; color:#c9a84c; display:inline-block; }
.rls-mobile-blocker__mobile-btn { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#00b09b,#00d4aa); color:#fff; text-decoration:none; font-weight:700; font-size:16px; padding:14px 28px; border-radius:14px; box-shadow:0 6px 20px rgba(0,176,155,.35); margin-top:8px; transition:opacity .2s; }
.rls-mobile-blocker__mobile-btn:hover { opacity:.85; }

/* Show blocker on screens ≤1024px UNLESS portrait layout */
@media (max-width:1024px) {
    body:not(.rls-portrait-mode) .rls-mobile-blocker { display:flex; }
    body:not(.rls-portrait-mode) #rls-slideshow { display:none !important; }
}
/* Portrait mode: always show slideshow regardless of screen size */
body.rls-portrait-mode .rls-mobile-blocker { display:none !important; }
body.rls-portrait-mode #rls-slideshow { display:flex !important; }

/* Safe-area margin for REAL portrait monitors (not the rotate_cw/ccw
   CSS trick — an actual vertical screen). Low-resolution/cheap
   monitors can crop a few % off every edge just like TV overscan,
   clipping title/price/kodikos text that sits close to the border.
   Same fix as the rotated-kiosk one below: padding on #rls-slideshow
   creates a black buffer — whatever gets cropped is black, not text.
   (The more specific rotate_cw/rotate_ccw rules further down already
   cover those two modes with this same padding, so this only takes
   effect for plain, non-rotated portrait.) */
body.rls-portrait-mode:not(.rls-rotate-cw):not(.rls-rotate-ccw) #rls-slideshow {
    box-sizing:border-box;
    padding:6%;
    background:var(--rls-black);
}

/* ── ROTATED KIOSK — CSS-forced 90° rotation ──────────────────────
   For TVs/boxes that do NOT support a real portrait resolution.
   The page still renders as a normal landscape document; we rotate
   the whole #rls-slideshow box with CSS and swap its dimensions so
   it fills the screen correctly once the TV is physically turned
   90° on its side. Pick rotate_cw / rotate_ccw to match the way
   the screen was actually turned.                                  */
body.rls-rotate-cw #rls-slideshow,
body.rls-rotate-ccw #rls-slideshow {
    position:fixed;
    top:0; left:0;
    width:100vh;
    height:100vw;
    transform-origin:top left;
    /* Safe-area margin against TV/box overscan: many displays crop a
       few % off every edge of an HDMI signal (especially at 1080p —
       4K outputs are usually cleaner). .rls-slide fills this box via
       position:absolute + inset:0, which insets to the PADDING edge,
       so this padding creates a black buffer around all the content —
       whatever the display crops, it crops black, never text/QR.
       Percentage (not fixed px): scales with resolution instead of
       staying a fixed 40px that turns out too thin on some boxes —
       percentage padding is always computed off the box's WIDTH (a
       CSS quirk, even for top/bottom), which conveniently gives an
       even margin on all four sides here. */
    box-sizing:border-box;
    padding:6%;
    background:var(--rls-black);
}
body.rls-rotate-cw #rls-slideshow  { transform:rotate(90deg) translateY(-100%); }
body.rls-rotate-ccw #rls-slideshow { transform:rotate(-90deg) translateX(-100%); }

/* ════════════════════════════════════════════════════════════════
   LUXURY MODE — cinematic single photo, slow Ken Burns
   ════════════════════════════════════════════════════════════════ */
.rls-photo-layer--luxury {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0;
    transition:opacity 1.8s ease;
    transform:scale(1.0);
}
.rls-photo-layer--luxury.active {
    opacity:1;
    animation:rls-luxury-kb 18s ease-out forwards;
}
@keyframes rls-luxury-kb {
    0%   { transform:scale(1.0) translateX(0); }
    100% { transform:scale(1.12) translateX(-2%); }
}
/* Luxury info panel — larger font, serif-style, more space */
.rls-layout--right .rls-slide.active .rls-photo-layer--luxury ~ .rls-slide__info,
.rls-photo-layer--luxury ~ .rls-slide__info {
    /* override will be applied via parent class */
}
.rls-photo-layer--luxury ~ .rls-slide__info .rls-slide__title {
    font-size:2.2rem !important;
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.03em;
}
.rls-photo-layer--luxury ~ .rls-slide__info .rls-slide__price {
    font-size:2.2rem !important;
}
/* Luxury: elegant gradient overlay on photo side */
.rls-layout--right .rls-slide__photo-panel:has(.rls-photo-layer--luxury)::after,
.rls-layout--left  .rls-slide__photo-panel:has(.rls-photo-layer--luxury)::after {
    background:linear-gradient(to right, transparent 40%, rgba(10,10,10,.7) 100%),
               linear-gradient(to top, rgba(10,10,10,.4) 0%, transparent 50%);
}

/* ════════════════════════════════════════════════════════════════
   MAGAZINE MODE — editorial feel, photo with tilt
   ════════════════════════════════════════════════════════════════ */
.rls-photo-layer--magazine {
    position:absolute; inset:-8%;
    background-size:cover; background-position:center;
    opacity:0;
    transition:opacity 1.2s ease;
    transform:scale(1.08) rotate(-1deg);
    transform-origin:center center;
}
.rls-photo-layer--magazine.active {
    opacity:1;
    animation:rls-mag-enter 1.2s cubic-bezier(.2,0,.1,1) forwards;
}
@keyframes rls-mag-enter {
    0%   { transform:scale(1.15) rotate(-2deg); opacity:0; }
    100% { transform:scale(1.06) rotate(0deg);  opacity:1; }
}
.rls-photo-layer--magazine ~ .rls-slide__info .rls-slide__title {
    font-size:1.9rem !important;
    border-left:3px solid #c9a84c;
    padding-left:16px;
    margin-left:-3px;
}
.rls-photo-layer--magazine ~ .rls-slide__info .rls-slide__category::before {
    background:#c9a84c;
}

/* ════════════════════════════════════════════════════════════════
   LUXURY PORTRAIT — fullscreen with bottom gradient overlay
   ════════════════════════════════════════════════════════════════ */
.rls-layout--portrait .rls-photo-layer--luxury {
    animation:rls-luxury-kb-portrait 16s ease-out forwards;
}
@keyframes rls-luxury-kb-portrait {
    0%   { transform:scale(1.0); }
    100% { transform:scale(1.1) translateY(-3%); }
}

/* ══════════════════════════════════════════════════════════════════
   PHOTO LAYER TRANSITIONS — per mode
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. FADE — simple crossfade ─────────────────────────────────── */
.rls-photo-layer--fade {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity 1.2s ease;
}
.rls-photo-layer--fade.active { opacity:1; }

/* ── 2. KEN BURNS — zoom + slow pan ─────────────────────────────── */
.rls-photo-layer--kenburns {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity 1.4s ease;
    transform:scale(1.0);
}
.rls-photo-layer--kenburns.active {
    opacity:1;
    animation:rls-kb-anim var(--rls-photo-int, 6s) ease-in-out forwards;
}
@keyframes rls-kb-anim {
    0%   { transform:scale(1.0)  translate(0%,0%);    }
    25%  { transform:scale(1.06) translate(-1%,-0.5%); }
    50%  { transform:scale(1.1)  translate(-2%,-1%);   }
    75%  { transform:scale(1.08) translate(-1.5%,-0.5%);}
    100% { transform:scale(1.12) translate(-3%,-1.5%); }
}

/* ── 3. SLIDE PUSH — incoming photo slides from right ───────────── */
.rls-photo-layer--slide_push {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:1;
    transform:translateX(100%);
    transition:transform 0s;
    z-index:1;
}
.rls-photo-layer--slide_push.active {
    transform:translateX(0);
    transition:transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index:2;
}
.rls-photo-layer--slide_push.was-active {
    transform:translateX(-30%);
    transition:transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity:0.4;
    z-index:1;
}

/* ── 4. COLLAGE PULSE — handled by JS fade on individual images ─── */
.rls-collage-cell img { transition:opacity 0.35s ease; }

/* ── 5. CUBE FLIP — handled in shared cube CSS above ─────────────── */

/* ── PORTRAIT FADE ───────────────────────────────────────────────── */
.rls-photo-layer--portrait_fade {
    position:absolute; inset:0;
    background-size:cover; background-position:center top;
    opacity:0; transition:opacity 1.4s ease;
}
.rls-photo-layer--portrait_fade.active { opacity:1; }

/* ── PORTRAIT KEN BURNS — vertical pan for portrait photos ──────── */
.rls-photo-layer--portrait_kenburns {
    position:absolute; inset:0;
    background-size:cover; background-position:center top;
    opacity:0; transition:opacity 1.4s ease;
}
.rls-photo-layer--portrait_kenburns.active {
    opacity:1;
    animation:rls-portrait-kb var(--rls-photo-int, 6s) ease-in-out forwards;
}
@keyframes rls-portrait-kb {
    0%   { transform:scale(1.0)  translateY(0%);   }
    50%  { transform:scale(1.05) translateY(-2%);  }
    100% { transform:scale(1.1)  translateY(-4%);  }
}

/* ── SPOTLIGHT mode — horizontal wipe reveal + slow zoom ── */
.rls-photo-layer--spotlight {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transform: scale(1.35);
    filter: brightness(2) saturate(0);
    transition: none;
    z-index: 1;
}
.rls-photo-layer--spotlight.active {
    z-index: 2;
    animation: rls-spotlight-dramatic var(--rls-photo-int, 6s) ease-out forwards;
}
.rls-photo-layer--spotlight.was-active {
    z-index: 1;
    animation: rls-spotlight-blur-out 1s ease-in forwards;
}
@keyframes rls-spotlight-dramatic {
    0%   { opacity:0;   transform: scale(1.35); filter: brightness(2.5) saturate(0) blur(8px); }
    15%  { opacity:1;   transform: scale(1.18); filter: brightness(1.6) saturate(.4) blur(3px); }
    40%  { opacity:1;   transform: scale(1.08); filter: brightness(1.1) saturate(.9) blur(0);   }
    100% { opacity:1;   transform: scale(1.12) translateX(-3%); filter: brightness(1) saturate(1); }
}
@keyframes rls-spotlight-blur-out {
    0%   { opacity:1; transform: scale(1.1); filter: blur(0)   brightness(1); }
    100% { opacity:0; transform: scale(.95); filter: blur(12px) brightness(.3); }
}
.rls-mode--spotlight { position:relative; overflow:hidden; display:block !important; }
.rls-mode--spotlight .rls-spotlight-photo { position:absolute; inset:0; width:100% !important; height:100% !important; z-index:1; flex:none; }
.rls-mode--spotlight .rls-slide__info--spotlight { flex:none !important; width:100% !important; }
.rls-mode--spotlight .rls-slide__info--spotlight { position:absolute; left:0; right:0; bottom:0; top:auto; width:100%; z-index:20; background:linear-gradient(to top,rgba(5,5,10,.95) 0%,rgba(5,5,10,.75) 40%,transparent 100%); backdrop-filter:blur(3px); }
.rls-spotlight__inner { padding:28px 48px 24px; }
.rls-mode--spotlight .rls-slide__category { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(180,200,255,.75); margin-bottom:6px; }
.rls-mode--spotlight .rls-slide__title { font-size:clamp(20px,3vw,36px); line-height:1.2; font-weight:600; color:#fff; margin-bottom:6px; }
.rls-mode--spotlight .rls-slide__location { color:rgba(255,255,255,.65); font-size:13px; margin-bottom:10px; }
.rls-spotlight__row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.rls-spotlight__details { flex:1; min-width:0; }
.rls-spotlight__right { flex-shrink:0; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.rls-mode--spotlight .rls-slide__price { font-size:clamp(22px,3vw,38px); font-weight:700; color:#fff; }
.rls-mode--spotlight .rls-slide__price-label { font-size:12px; color:rgba(255,255,255,.5); }
.rls-mode--spotlight .rls-slide__chars { display:flex; flex-wrap:wrap; gap:8px; }
.rls-mode--spotlight .rls-slide__char { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:3px 8px; font-size:12px; color:rgba(255,255,255,.85); }
.rls-mode--spotlight .rls-slide__kodikos { font-size:12px; color:rgba(255,255,255,.45); margin-top:8px; }
.rls-mode--spotlight .rls-qr-canvas canvas { width:56px !important; height:56px !important; }

/* ════════════════════════════════════════════════════════════════
   THEME: PREMIUM — optional, per-slideshow (body.rls-theme--premium)
   Elegant frame + accent colors for higher-end listings. Color is
   fully dynamic (--rls-premium-* custom properties set inline on
   <body> from the user's chosen color, see templates/slideshow.php +
   helpers.php rls_mix_hex/rls_lighten_hex) — defaults to gold if unset.
   ════════════════════════════════════════════════════════════════ */
body.rls-theme--premium {
    --rls-premium-color: #c9a84c;
    --rls-premium-light: #f0dfa0;
    --rls-premium-soft:  #241f14;
    --rls-premium-mid:   #5f5027;
    --rls-accent: var(--rls-premium-color);
}
/* Outer frame around the whole display. Sits at the very edge, so on
   some TVs with strong overscan it may get thinned/cropped — purely
   decorative, never relied on for readability. */
body.rls-theme--premium .rls-slideshow {
    border: 3px solid var(--rls-premium-color);
    box-shadow:
        inset 0 0 0 1px var(--rls-premium-mid),
        inset 0 0 60px var(--rls-premium-soft);
}
/* Category label + underline */
body.rls-theme--premium .rls-slide__category {
    color: var(--rls-premium-light);
}
body.rls-theme--premium .rls-slide__category::before {
    background: linear-gradient(90deg, var(--rls-premium-color), var(--rls-premium-light));
}
/* Title gets a subtle accent-color left border, like a pull-quote */
body.rls-theme--premium .rls-slide__title {
    border-left: 3px solid var(--rls-premium-color);
    padding-left: 16px;
    margin-left: -19px;
}
/* Price — the money shot, literally */
body.rls-theme--premium .rls-slide__price {
    color: var(--rls-premium-light);
    text-shadow: 0 1px 16px var(--rls-premium-mid);
}
body.rls-theme--premium .rls-slide__price-label {
    color: var(--rls-premium-light);
    opacity: .65;
}
/* Characteristic pills — accent outline instead of plain white */
body.rls-theme--premium .rls-slide__char {
    border-color: var(--rls-premium-mid);
    background: var(--rls-premium-soft);
}
/* Kodikos box */
body.rls-theme--premium .rls-slide__kodikos {
    border-color: var(--rls-premium-mid);
    background: var(--rls-premium-soft);
}
body.rls-theme--premium .rls-slide__kodikos-value {
    color: var(--rls-premium-light);
}
/* QR code — accent frame + soft glow, feels like a premium ticket/pass */
body.rls-theme--premium .rls-slide__qr-wrap {
    border: 1px solid var(--rls-premium-mid);
    box-shadow: 0 0 24px var(--rls-premium-soft);
}
/* Progress bar + loading spinner already pick up var(--rls-accent) */

/* ════════════════════════════════════════════════════════════════
   THEME: ISLAND (Νησί) — Aegean blue + white, nautical feel.
   Fixed curated palette (not user-customizable — that's what Premium
   is for). Double-ring frame like a flag border, circular "porthole"
   QR, soft sea-haze gradient over the photo.
   ════════════════════════════════════════════════════════════════ */
body.rls-theme--island {
    --rls-accent: #2e86ab;
}
body.rls-theme--island .rls-slideshow {
    border: 5px solid #ffffff;
    box-shadow:
        inset 0 0 0 3px #1d6fa5,
        inset 0 0 50px rgba(29,111,165,.18);
}
/* Soft sea-haze wash across the photo edges */
.rls-layout--right  body.rls-theme--island .rls-slide__photo-panel::after,
.rls-layout--left   body.rls-theme--island .rls-slide__photo-panel::after,
body.rls-theme--island .rls-slide__photo-panel::after {
    background:
        linear-gradient(180deg, rgba(15,76,117,.25) 0%, transparent 18%, transparent 82%, rgba(15,76,117,.35) 100%);
}
body.rls-theme--island .rls-slide__category { color:#8fd3f4; }
body.rls-theme--island .rls-slide__category::before { background:#ffffff; }
body.rls-theme--island .rls-slide__title { color:#ffffff; }
body.rls-theme--island .rls-slide__location { color:rgba(255,255,255,.75); }
body.rls-theme--island .rls-slide__price { color:#ffffff; text-shadow:0 1px 14px rgba(46,134,171,.6); }
body.rls-theme--island .rls-slide__price-label { color:#8fd3f4; }
body.rls-theme--island .rls-slide__char {
    border-color: rgba(143,211,244,.4);
    background: rgba(29,111,165,.18);
    border-radius: 100px;
}
body.rls-theme--island .rls-slide__kodikos {
    border-color: rgba(143,211,244,.4);
    background: rgba(15,76,117,.25);
    border-radius: 14px;
}
body.rls-theme--island .rls-slide__kodikos-value { color:#8fd3f4; }
/* Nautical QR frame — rounded pill, like a porthole surround, but the
   QR code itself is NEVER clipped/rounded (a circular crop cuts off
   the corner finder-squares a scanner needs — makes it unreadable). */
body.rls-theme--island .rls-slide__qr-wrap {
    border-radius: 22px !important;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px #1d6fa5, 0 0 20px rgba(29,111,165,.35);
    padding: 14px 18px;
}

/* ════════════════════════════════════════════════════════════════
   THEME: ATHENS (Αθήνα) — marble + bronze, classical/monumental.
   Fixed curated palette. Real Greek key (meander) pattern strip
   along the top and bottom edges — a genuine architectural motif,
   not just a recolor. Serif type for an inscribed, monument feel
   (system serif fallback only — no font loading, stays compatible).
   ════════════════════════════════════════════════════════════════ */
body.rls-theme--athens {
    --rls-accent: #a67c52;
}
body.rls-theme--athens .rls-slideshow {
    border: 2px solid #a67c52;
}
/* Greek key (meander) band, top and bottom */
body.rls-theme--athens .rls-slideshow::before,
body.rls-theme--athens .rls-slideshow::after {
    content:'';
    position:absolute; left:0; right:0;
    height:20px;
    background-color:#0d0d0d;
    background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2220%22%20viewBox%3D%220%200%2040%2020%22%3E%3Cpath%20d%3D%22M0%2C15%20L0%2C5%20L10%2C5%20L10%2C15%20L20%2C15%20L20%2C5%20L30%2C5%20L30%2C15%20L40%2C15%22%20stroke%3D%22%23a67c52%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3C/svg%3E);
    background-repeat: repeat-x;
    background-size: 40px 20px;
    z-index: 45;
    pointer-events:none;
}
body.rls-theme--athens .rls-slideshow::before { top:0; }
body.rls-theme--athens .rls-slideshow::after  { bottom:0; }
body.rls-theme--athens .rls-slide__category {
    color:#c9a06a; font-family:Georgia,'Times New Roman',serif; letter-spacing:.16em;
}
body.rls-theme--athens .rls-slide__category::before { background:#a67c52; }
body.rls-theme--athens .rls-slide__title {
    font-family:Georgia,'Times New Roman',serif; font-weight:700;
    border-left: 3px solid #a67c52; padding-left:16px; margin-left:-19px;
}
body.rls-theme--athens .rls-slide__price {
    font-family:Georgia,'Times New Roman',serif; color:#e8d5b7;
}
body.rls-theme--athens .rls-slide__price-label { color:rgba(232,213,183,.6); }
body.rls-theme--athens .rls-slide__char {
    border-color: rgba(166,124,82,.4);
    background: rgba(166,124,82,.08);
}
body.rls-theme--athens .rls-slide__kodikos {
    border-color: rgba(166,124,82,.45);
    background: rgba(166,124,82,.07);
}
body.rls-theme--athens .rls-slide__kodikos-value { color:#e8d5b7; font-family:Georgia,serif; }
body.rls-theme--athens .rls-slide__qr-wrap { border:1px solid rgba(166,124,82,.5); }
/* Make room so the meander bands never sit on top of content */
body.rls-theme--athens .rls-slide__info { padding-top:36px !important; }
body.rls-theme--athens.rls-portrait-mode .rls-slide__info { padding-top:16px !important; }
body.rls-theme--athens .rls-slide__qr-wrap { margin-bottom:22px; }

/* ════════════════════════════════════════════════════════════════
   THEME: WINTER (Χειμώνας) — ice blue + silver, frosted glow.
   Fixed curated palette. Frosted-corner vignette + soft snow glow
   around the info panel, cool icy accent color.
   ════════════════════════════════════════════════════════════════ */
body.rls-theme--winter {
    --rls-accent: #9fd3e8;
}
body.rls-theme--winter .rls-slideshow {
    border: 2px solid #cfe8f3;
    box-shadow:
        inset 0 0 0 1px rgba(159,211,232,.4),
        inset 0 0 70px rgba(159,211,232,.15);
}
body.rls-theme--winter .rls-slide__info {
    box-shadow: inset 0 0 60px rgba(159,211,232,.08);
}
body.rls-theme--winter .rls-slide__category { color:#cfe8f3; }
body.rls-theme--winter .rls-slide__category::before { background:linear-gradient(90deg,#9fd3e8,#ffffff); }
body.rls-theme--winter .rls-slide__title { color:#ffffff; text-shadow:0 0 18px rgba(159,211,232,.3); }
body.rls-theme--winter .rls-slide__price { color:#e8f6fb; text-shadow:0 1px 16px rgba(159,211,232,.5); }
body.rls-theme--winter .rls-slide__price-label { color:rgba(207,232,243,.7); }
body.rls-theme--winter .rls-slide__char {
    border-color: rgba(159,211,232,.35);
    background: rgba(159,211,232,.08);
}
body.rls-theme--winter .rls-slide__kodikos {
    border-color: rgba(159,211,232,.4);
    background: rgba(159,211,232,.07);
}
body.rls-theme--winter .rls-slide__kodikos-value { color:#cfe8f3; }
body.rls-theme--winter .rls-slide__qr-wrap {
    border: 1px solid rgba(159,211,232,.5);
    box-shadow: 0 0 22px rgba(159,211,232,.2);
}
/* Small frost glints in the corners — subtle, decorative only */
body.rls-theme--winter #rls-slideshow::before,
body.rls-theme--winter #rls-slideshow::after {
    content:'❄';
    position:absolute;
    font-size:22px;
    color:rgba(207,232,243,.55);
    z-index:45;
    pointer-events:none;
}
body.rls-theme--winter #rls-slideshow::before { top:16px; left:16px; }
body.rls-theme--winter #rls-slideshow::after   { top:16px; right:16px; }