/* ============================================================================
   ROOM PHOTO GALLERY
   Two things share this sheet because they show the same pictures:

     .rge-*  the landlord's gallery manager inside the Edit Room modal
     .rg-*   the visitor's lightbox on the public listing (index.php)

   Colours come from each page's own design tokens with safe fallbacks, so the
   sheet works on the dashboard and on the listing without either page having to
   declare anything new.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   LANDLORD — GALLERY MANAGER
   ══════════════════════════════════════════════════════════════════════════ */

.rge {
    border: 1px solid var(--border, #e4e8f0);
    border-radius: var(--r-md, 16px);
    background: var(--bg, #f5f7fb);
    padding: 14px;
}

.rge-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.rge-title {
    font-family: 'Outfit', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink, #0a0f1e);
    display: flex;
    align-items: center;
    gap: 6px;
}
.rge-title i { color: var(--g600, #16a34a); }

.rge-count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--ink-f, #8e98b0);
}

.rge-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    padding: 7px 14px;
    border: 0;
    border-radius: var(--r-pill, 9999px);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    cursor: pointer;
    transition: all var(--dur, 220ms) var(--ease-smooth, cubic-bezier(.4, 0, .2, 1));
}
.rge-add:hover { transform: translateY(-1px); filter: brightness(1.06); }
.rge-add:disabled,
.rge-add.is-full { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

/* ── The tile grid ───────────────────────────────────────────────────────── */
.rge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 10px;
}

.rge-tile {
    position: relative;
    border-radius: var(--r-sm, 10px);
    overflow: hidden;
    border: 2px solid var(--border, #e4e8f0);
    background: var(--surface, #fff);
    cursor: grab;
    transition: border-color var(--dur, 220ms), box-shadow var(--dur, 220ms), opacity .15s;
}
.rge-tile:hover { border-color: var(--ink-f, #8e98b0); box-shadow: var(--sh-sm, 0 2px 8px rgba(0, 0, 0, .08)); }
.rge-tile.is-cover { border-color: var(--g600, #16a34a); box-shadow: 0 0 0 3px rgba(22, 163, 74, .14); }

/* While one tile is being dragged, the one under the cursor shows where it
   would land. */
.rge-tile.is-dragging { opacity: .4; cursor: grabbing; }
.rge-tile.is-over { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

.rge-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    pointer-events: none;   /* so the drag is on the tile, not the image */
}

.rge-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill, 9999px);
    background: var(--g600, #16a34a);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.rge-order {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(10, 15, 30, .72);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The actions sit on a scrim that only appears on hover, so the grid reads as
   pictures first and controls second. */
.rge-actions {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(to top, rgba(10, 15, 30, .88), rgba(10, 15, 30, 0));
    opacity: 0;
    transition: opacity var(--dur, 220ms);
}
.rge-tile:hover .rge-actions,
.rge-tile:focus-within .rge-actions { opacity: 1; }

.rge-act {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 5px 0;
    border: 0;
    border-radius: var(--r-xs, 6px);
    background: rgba(255, 255, 255, .92);
    color: var(--ink, #0a0f1e);
    font-size: .78rem;
    cursor: pointer;
    transition: background var(--dur, 220ms), color var(--dur, 220ms);
}
.rge-act:hover { background: #fff; }
.rge-act.cover:hover { background: var(--g600, #16a34a); color: #fff; }
.rge-act.remove:hover { background: var(--red, #ef4444); color: #fff; }
.rge-act:disabled { opacity: .4; cursor: not-allowed; }

.rge-caption {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border, #e4e8f0);
    padding: 6px 8px;
    font-family: 'Outfit', sans-serif;
    font-size: .68rem;
    color: var(--ink-m, #5a6481);
    background: var(--surface, #fff);
    outline: none;
}
.rge-caption:focus { background: var(--g50, #f0fdf4); color: var(--ink, #0a0f1e); }

.rge-empty {
    padding: 26px 16px;
    text-align: center;
    border: 1.5px dashed var(--border, #e4e8f0);
    border-radius: var(--r-sm, 10px);
    color: var(--ink-f, #8e98b0);
    font-family: 'Outfit', sans-serif;
    font-size: .76rem;
    line-height: 1.6;
}
.rge-empty i { font-size: 1.6rem; display: block; margin-bottom: 8px; opacity: .5; }

.rge-note {
    margin: 10px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: .68rem;
    line-height: 1.55;
    color: var(--ink-f, #8e98b0);
}

.rge-status {
    margin-top: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
}
.rge-status[data-tone="error"] { color: var(--red, #ef4444); }
.rge-status[data-tone="success"] { color: var(--g700, #15803d); }
.rge-status[data-tone="info"] { color: var(--ink-m, #5a6481); }

/* Touch screens have no hover, so the tile controls stay visible there. */
@media (hover: none) {
    .rge-actions { opacity: 1; }
}

@media (max-width: 576px) {
    .rge { padding: 12px; }
    .rge-head { align-items: stretch; }
    .rge-add { flex: 1 1 100%; justify-content: center; padding: 10px 14px; font-size: .8rem; }
    .rge-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
    .rge-act { padding: 7px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VISITOR — LIGHTBOX
   A centred window over the listing, not browser fullscreen.
   ══════════════════════════════════════════════════════════════════════════ */

.rg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(3, 7, 18, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s ease;
}
.rg-lightbox.is-open { display: grid; }
.rg-lightbox.is-visible { opacity: 1; }

.rg-shell {
    width: min(1040px, 100%);
    max-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: var(--r-lg, 22px);
    overflow: hidden;
    background: #0b1120;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    transform: scale(.97);
    transition: transform .2s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1));
}
.rg-lightbox.is-visible .rg-shell { transform: scale(1); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.rg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rg-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.rg-sub {
    font-family: 'Outfit', sans-serif;
    font-size: .74rem;
    color: #94a3b8;
    margin-top: 2px;
}

.rg-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--dur, 220ms), transform var(--dur, 220ms);
}
.rg-close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }

/* ── Stage ───────────────────────────────────────────────────────────────── */
.rg-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    background: #030712;
    overflow: hidden;
}

.rg-img {
    max-width: 100%;
    max-height: min(62vh, 620px);
    width: auto;
    height: auto;
    object-fit: contain;      /* never stretch a listing photo */
    display: block;
    opacity: 1;
    transition: opacity .16s ease;
}
.rg-img.is-swapping { opacity: 0; }

.rg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(11, 17, 32, .66);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background var(--dur, 220ms), border-color var(--dur, 220ms);
}
.rg-nav:hover { background: rgba(22, 163, 74, .8); border-color: transparent; }
.rg-nav.prev { left: 14px; }
.rg-nav.next { right: 14px; }
.rg-nav[hidden] { display: none; }

/* ── Thumbnail strip ─────────────────────────────────────────────────────── */
.rg-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #0b1120;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
    scroll-behavior: smooth;
}
.rg-thumbs::-webkit-scrollbar { height: 6px; }
.rg-thumbs::-webkit-scrollbar-track { background: transparent; }
.rg-thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 9999px; }
.rg-thumbs::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }

.rg-thumb {
    flex: 0 0 auto;
    width: 84px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-xs, 8px);
    overflow: hidden;
    background: #111827;
    cursor: pointer;
    opacity: .58;
    transition: opacity var(--dur, 220ms), border-color var(--dur, 220ms), transform var(--dur, 220ms);
}
.rg-thumb img {
    display: block;
    width: 100%;
    height: 58px;
    object-fit: cover;
}
.rg-thumb:hover { opacity: .9; transform: translateY(-2px); }
.rg-thumb.is-active {
    opacity: 1;
    border-color: var(--g500, #22c55e);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .28);
}

/* ── The clickable cover on the room card ────────────────────────────────── */
/* A quiet hint that the picture opens something, shown only on hover so the
   card itself stays calm. */
.room-card-img-wrapper .rg-open-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: var(--r-pill, 9999px);
    background: rgba(11, 17, 32, .72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur, 220ms), transform var(--dur, 220ms);
    pointer-events: none;
    z-index: 3;
}
.room-card:hover .rg-open-hint { opacity: 1; transform: translateY(0); }

.room-card-img-wrapper .rg-cover-btn {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    z-index: 2;
}
.room-card-img-wrapper .rg-cover-btn:focus-visible {
    outline: 3px solid var(--g500, #22c55e);
    outline-offset: -3px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rg-lightbox { padding: 0; }
    .rg-shell {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: 0;
    }
    /* On a phone the picture should take the room it can get. */
    .rg-img { max-height: none; max-width: 100%; }
    .rg-stage { padding: 8px; }
    .rg-nav { width: 36px; height: 36px; font-size: 1.1rem; }
    .rg-nav.prev { left: 8px; }
    .rg-nav.next { right: 8px; }
    .rg-thumb { width: 66px; }
    .rg-thumb img { height: 46px; }
    .rg-title { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rg-lightbox,
    .rg-shell,
    .rg-img,
    .rg-thumb { transition: none; }
}