/* Digify Hotels website showcase: the frame around the demo sites. */
:root{
  --bar:#16181D;
  --bar-2:#22252C;
  --bar-line:#2E323B;
  --text:#ECEEF2;
  --muted:#A3A9B6;
  --accent:#C9A45C;
  --stage:#0E0F12;
  --bar-h:64px;
  --line-h:30px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;background:var(--stage);color:var(--text);font:14px/1.4 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- toolbar ---------- */
.sc-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;height:var(--bar-h);padding:0 18px;background:var(--bar);border-bottom:1px solid var(--bar-line)}
.sc-bar__left{display:flex;align-items:center;gap:.9rem;min-width:0}
.sc-brand{display:inline-flex;align-items:center;flex:none}
/* The white Digify Hotels logo (site/public/assets/brand/logo-light.png, margins trimmed). */
.sc-brand__logo{display:block;height:28px;width:auto}
.sc-sub{padding-left:.9rem;border-left:1px solid var(--bar-line)}
.sc-sub{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-bar__mid{display:flex;align-items:center;gap:1.4rem}
.sc-bar__right{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}

.sc-field{display:flex;align-items:center;gap:.6rem}
.sc-label{color:var(--muted);font-weight:500}
.sc-select{position:relative;display:inline-flex;align-items:center;background:var(--bar-2);border:1px solid var(--bar-line);border-radius:9px}
.sc-select select{appearance:none;-webkit-appearance:none;background:transparent;border:0;height:38px;padding:0 2.2rem 0 .85rem;font-weight:600;cursor:pointer;min-width:150px}
.sc-select select option{background:var(--bar-2);color:var(--text)}
.sc-select::after{content:"";position:absolute;right:.8rem;top:50%;width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sc-select:hover{border-color:#454B57}
.sc-select--theme select{min-width:170px;padding-left:2.4rem}
.sc-swatch{position:absolute;left:.75rem;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

.sc-seg{display:inline-flex;padding:3px;background:var(--bar-2);border:1px solid var(--bar-line);border-radius:10px}
.sc-seg button{height:32px;padding:0 .9rem;border:0;border-radius:7px;background:transparent;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap}
.sc-seg button:hover{color:var(--text)}
.sc-seg button[aria-pressed="true"]{background:#3A3F4A;color:var(--text)}
.sc-seg--icons button{width:38px;padding:0;display:grid;place-items:center}
.sc-seg--icons svg,.sc-open svg{width:19px;height:19px}
.sc-open{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--muted)}
.sc-open:hover{color:var(--text);background:var(--bar-2)}

.sc-line{flex:none;height:var(--line-h);margin:0;padding:0 18px;display:flex;align-items:center;justify-content:center;background:var(--bar);border-bottom:1px solid var(--bar-line);color:var(--muted);font-size:12.5px}
.sc-line b{color:var(--text);font-weight:600;margin-right:.4rem}

/* ---------- stage ---------- */
.sc-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;padding:0;overflow:auto}
.sc-device{position:relative;flex:none;width:100%;height:100%;background:#fff;transition:width .3s ease,height .3s ease}
.sc-device iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.sc-stage[data-device="tablet"],.sc-stage[data-device="phone"]{align-items:flex-start;padding:22px}
.sc-stage[data-device="tablet"] .sc-device{width:834px;height:min(1112px,100%);border-radius:20px;overflow:hidden;box-shadow:0 0 0 10px #1C1E24,0 30px 80px rgba(0,0,0,.5)}
.sc-stage[data-device="phone"] .sc-device{width:390px;height:min(844px,100%);border-radius:32px;overflow:hidden;box-shadow:0 0 0 10px #1C1E24,0 30px 80px rgba(0,0,0,.5)}

.sc-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:rgba(14,15,18,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.sc-loading.is-on{opacity:1}
.sc-loading span{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sc-spin .8s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}

/* ---------- smaller screens: the toolbar wraps onto two rows ---------- */
@media (max-width:1180px){
  :root{--bar-h:auto}
  .sc-bar{grid-template-columns:1fr auto;padding:10px 14px;row-gap:10px}
  .sc-bar__mid{grid-column:1 / -1;grid-row:2;flex-wrap:wrap;gap:.8rem 1.2rem}
  .sc-sub{display:none}
}
@media (max-width:640px){
  .sc-label{display:none}
  .sc-select select{min-width:0}
  .sc-seg--icons{display:none}
  .sc-line{height:auto;padding:6px 14px;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}