/* =====================================================================
   Ace Mall 3D — styles for fit-outs, booking and exterior view
   File: work/ace-mall/fitout.css · v2.0 (05 Nov 2026)
   Related: fitout.js (builds the panels), index.html (core viewer,
            supplies the colour variables and .btn/.chip/.seg styles)
   ===================================================================== */

/* fit-out / reserve panel — docked on the right of the 3D view */
#fx{right:66px;top:64px;width:360px;max-height:calc(100% - 84px);overflow:auto;padding:16px 16px 14px;z-index:4;overscroll-behavior:contain}
#fx[hidden]{display:none}
#fx h2{font:600 26px/1 "Cormorant Garamond",serif;margin:0 0 2px;padding-right:24px}
#fx .k{color:var(--muted);font-size:13px;margin-bottom:6px}
#fx h3{margin:16px 0 8px}
#fx .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted)}
#fx .acts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.fx-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fx-f label,.fx-l{display:grid;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
.fx-f .full{grid-column:1/-1}
.fx-f input,.fx-f select,.fx-f textarea,.fx-l input:not([type=color]){width:100%;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:#fff;font:inherit;color:var(--ink);font-weight:400}
.fx-f textarea{resize:vertical}
.fx-f input:focus,.fx-l input:focus,.fx-f textarea:focus,.fx-f select:focus{outline:2px solid var(--gold);outline-offset:1px}
.fx-l{margin-top:10px}
.fx-cats{margin-bottom:8px}
.fx-cats .chip{padding:4px 10px;font-size:12px}
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fx-k{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:1px solid var(--rule);border-radius:10px;background:#fff;cursor:pointer;font-size:11.5px;line-height:1.2;text-align:center;min-height:64px;transition:transform .15s,border-color .15s}
.fx-k span{font-size:22px;line-height:1}
.fx-k:hover{transform:translateY(-1px);border-color:var(--gold)}
.fx-k[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#fbf6ec}
.fx-sw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fx-sw button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--rule);cursor:pointer;padding:0}
.fx-sw button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.fx-sw input[type=color]{width:30px;height:26px;border:1px solid var(--rule);border-radius:6px;padding:0;background:#fff;cursor:pointer}
.fx-fin{flex-wrap:wrap}
.fx-fin button{font-size:12px;padding:6px 4px;min-width:30%}
.fx-err{color:#b42318;font-size:13px;min-height:1px;margin:8px 0 0}
.fx-err:empty{display:none}

/* extra buttons on the unit card */
#card .fx-acts{margin-top:8px;padding-top:8px;border-top:1px dashed var(--rule)}
#card .fx-acts .btn{padding:7px 11px;font-size:13px}

/* bookings tab */
.fx-bk{border:1px solid var(--rule);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff;display:grid;gap:3px;font-size:13px}
.fx-bk small{color:var(--muted)}
.fx-bk p{margin:6px 0 0}
.fx-bk .btn{padding:5px 10px;font-size:12px}

/* legend toggle + toast */
.fx-mini{border:1px solid var(--rule);background:#fff;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--ink)}
.fx-mini[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
#fxToast{position:absolute;left:50%;top:70px;transform:translate(-50%,-8px);background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;z-index:6;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90%;text-align:center}
#fxToast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#fxToast,.fx-k{transition:none}}

@media(max-width:860px){
 #fx{left:10px;right:10px;width:auto;top:auto;bottom:76px;max-height:64%}
 .fx-grid{grid-template-columns:repeat(3,1fr)}
 #fxToast{top:auto;bottom:150px}
}

/* v2.1 — Photo mode panel (gfx.js) */
#gxPhoto{left:50%;top:50%;transform:translate(-50%,-50%);width:320px;padding:16px;z-index:7;display:grid;gap:8px;text-align:center}
#gxPhoto[hidden]{display:none}
#gxPhoto b{font:600 22px "Cormorant Garamond",serif}
#gxPhoto span{color:var(--muted);font-size:13px}
.gx-bar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.gx-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.gx-acts{display:flex;gap:6px;justify-content:center}
.gx-pick{display:grid;gap:8px}
.gx-pick[hidden],#gxBar[hidden],#gxSave[hidden]{display:none}
.gx-pick .btn{flex-direction:column;align-items:center;gap:2px;padding:10px 12px}
.gx-pick small{font-weight:400;font-size:11.5px;opacity:.8}
.gx-pick .btn:disabled{opacity:.45;cursor:not-allowed}