/* ============================================================================
   SignageCreator renderer styles. Shared by the editor canvas and all displays.
   Everything inside .sc-stage is laid out in design pixels; the stage itself is
   scaled with a CSS transform to fit the screen.
   ============================================================================ */

.sc-stage-host {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sc-stage {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    overflow: hidden;
    contain: layout paint;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}

.sc-stage *, .sc-stage *::before, .sc-stage *::after { box-sizing: border-box; }

.sc-design .sc-frame, .sc-thumbnail .sc-frame { pointer-events: none; }
.sc-thumbnail * { animation-play-state: paused !important; }

/* ---------- Background ---------- */
.sc-bg, .sc-bg-media {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
video.sc-bg-media { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Widget frame ---------- */
.sc-frame {
    position: absolute;
    overflow: hidden;
    transform-origin: 50% 50%;
}

.sc-content {
    position: relative;
    width: 100%;
    height: 100%;
    container-type: size;
    overflow: hidden;
}

/* ---------- Auto-fitting text ---------- */
.sc-fit {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sc-fit-inner { max-width: 100%; }
.sc-wrap > .sc-fit-inner { width: 100%; white-space: pre-wrap; overflow-wrap: break-word; }
.sc-line > .sc-fit-inner { white-space: pre; }

/* ---------- Entrance animations ---------- */
.sc-enter-fade { animation: sc-fade-in .9s ease both; }
.sc-enter-up { animation: sc-up-in .9s cubic-bezier(.2,.8,.2,1) both; }
.sc-enter-down { animation: sc-down-in .9s cubic-bezier(.2,.8,.2,1) both; }
.sc-enter-left { animation: sc-left-in .9s cubic-bezier(.2,.8,.2,1) both; }
.sc-enter-right { animation: sc-right-in .9s cubic-bezier(.2,.8,.2,1) both; }
.sc-enter-zoom { animation: sc-zoom-in .9s cubic-bezier(.2,.8,.2,1) both; }
.sc-enter-pop { animation: sc-pop-in .8s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-up-in { from { opacity: 0; transform: translateY(12%); } to { opacity: 1; transform: none; } }
@keyframes sc-down-in { from { opacity: 0; transform: translateY(-12%); } to { opacity: 1; transform: none; } }
@keyframes sc-left-in { from { opacity: 0; transform: translateX(12%); } to { opacity: 1; transform: none; } }
@keyframes sc-right-in { from { opacity: 0; transform: translateX(-12%); } to { opacity: 1; transform: none; } }
@keyframes sc-zoom-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes sc-pop-in { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

/* ---------- Layout transitions (used by displays) ---------- */
.sc-layer { position: absolute; inset: 0; }
.sc-layer-in-fade { animation: sc-fade-in .9s ease both; }
.sc-layer-in-slideleft { animation: sc-layer-slide-left .9s cubic-bezier(.65,0,.35,1) both; }
.sc-layer-in-slideup { animation: sc-layer-slide-up .9s cubic-bezier(.65,0,.35,1) both; }
.sc-layer-in-zoom { animation: sc-zoom-in .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sc-layer-slide-left { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sc-layer-slide-up { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Placeholders & badges (editor only) ---------- */
.sc-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqmin;
    padding: 6cqmin;
    text-align: center;
    border: 2px dashed rgba(148,163,184,.55);
    border-radius: inherit;
    background: repeating-linear-gradient(45deg, rgba(148,163,184,.08) 0 14px, rgba(148,163,184,.14) 14px 28px);
    color: #e2e8f0;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.sc-placeholder:not(.sc-placeholder-dark) { color: #475569; }
.sc-placeholder-icon { width: 24cqmin; height: 24cqmin; opacity: .85; }
.sc-placeholder-title { font-size: clamp(10px, 9cqmin, 64px); font-weight: 600; }
.sc-placeholder-text { font-size: clamp(9px, 6cqmin, 40px); opacity: .8; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }

.sc-badge {
    position: absolute;
    right: 3cqmin;
    bottom: 3cqmin;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35em .8em;
    border-radius: 999px;
    background: rgba(15,23,42,.75);
    color: #fff;
    font: 600 clamp(10px, 5cqmin, 28px) 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Image / slideshow ---------- */
.sc-slides { position: absolute; inset: 0; overflow: hidden; }
.sc-slide { position: absolute; inset: 0; }
.sc-slide img, .sc-video { width: 100%; height: 100%; display: block; }
.sc-preload { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sc-slide-in-fade { animation: sc-fade-in 1.1s ease both; }
.sc-slide-in-left { animation: sc-layer-slide-left 1s cubic-bezier(.65,0,.35,1) both; }
.sc-slide-in-up { animation: sc-layer-slide-up 1s cubic-bezier(.65,0,.35,1) both; }
.sc-slide-in-zoom { animation: sc-zoom-in 1.1s ease both; }
.sc-slide-out-fade { animation: sc-fade-out 1.1s ease both; }
.sc-slide-out-left { animation: sc-slide-out-left 1s cubic-bezier(.65,0,.35,1) both; }
.sc-slide-out-up { animation: sc-slide-out-up 1s cubic-bezier(.65,0,.35,1) both; }
.sc-slide-out-zoom { animation: sc-zoom-out 1.1s ease both; }
.sc-slide-out-none { display: none; }
@keyframes sc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sc-slide-out-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes sc-slide-out-up { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes sc-zoom-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.15); } }

.sc-kenburns-a { animation: sc-kenburns-a linear both; }
.sc-kenburns-b { animation: sc-kenburns-b linear both; }
@keyframes sc-kenburns-a { from { transform: scale(1.0) translate(0,0); } to { transform: scale(1.14) translate(-2%,-1.5%); } }
@keyframes sc-kenburns-b { from { transform: scale(1.14) translate(2%,1%); } to { transform: scale(1.0) translate(0,0); } }

/* ---------- YouTube / web ---------- */
.sc-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.sc-web { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.sc-web-frame {
    width: calc(100% / var(--sc-zoom, 1));
    height: calc(100% / var(--sc-zoom, 1));
    transform: scale(var(--sc-zoom, 1));
    transform-origin: 0 0;
    background: #fff;
}
.sc-youtube-preview { position: absolute; inset: 0; background: #0b0b0b; display: grid; place-items: center; }
.sc-youtube-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.sc-youtube-play {
    position: relative;
    width: 22cqmin; height: 15cqmin;
    border-radius: 3.5cqmin;
    background: #ff0033;
    color: #fff;
    display: grid; place-items: center;
    font-size: 8cqmin;
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
}

/* ---------- Rotating text ---------- */
.sc-rotator { position: absolute; inset: 0; }
.sc-rotator > .sc-fit { position: absolute; inset: 0; }

/* ---------- Ticker ---------- */
.sc-ticker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    line-height: 1.2;
}
.sc-ticker-label {
    flex: none;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 .7em;
    font-weight: 800;
    letter-spacing: .04em;
    z-index: 1;
    box-shadow: 6px 0 18px rgba(0,0,0,.35);
}
.sc-ticker-viewport { position: relative; flex: 1; height: 100%; overflow: hidden; display: flex; align-items: center; }
.sc-ticker-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation-name: sc-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
.sc-ticker-seq { flex: none; display: flex; align-items: center; padding-left: .6em; }
.sc-ticker-sep { opacity: .55; white-space: pre; }
@keyframes sc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Clock ---------- */
.sc-clock { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sc-clock .sc-fit { flex: none; }
.sc-clock-ampm { font-size: .45em; margin-left: .2em; opacity: .8; font-weight: 600; }
.sc-clock-date, .sc-clock-label { opacity: .85; }
.sc-analog-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sc-analog-square { position: relative; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.sc-analog { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(0,0,0,.3)); }
.sc-analog-label {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 66%;
    text-align: center;
    font-size: calc(min(100cqw, 100cqh) * .065);
    font-weight: 600;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Countdown ---------- */
.sc-countdown { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqh; }
.sc-countdown-title { flex: 0 0 22%; height: 22%; }
.sc-countdown-list .sc-countdown-title { flex-basis: 18%; height: 18%; }
.sc-countdown-sub, .sc-countdown-next { flex: 0 0 10%; height: 10%; opacity: .8; }
.sc-countdown-done, .sc-countdown-plain { flex: 1; min-height: 0; }
.sc-countdown-boxes, .sc-countdown-led { flex: 1; min-height: 0; display: flex; gap: 3cqw; justify-content: center; align-items: stretch; }
.sc-countdown-box {
    flex: 1 1 0;
    max-width: 28cqw;
    display: flex;
    flex-direction: column;
    border-radius: 6cqmin;
    padding: 4cqh 2cqw;
    min-width: 0;
}
.sc-countdown-value { flex: 1; min-height: 0; justify-content: center; align-items: center; font-variant-numeric: tabular-nums; }
.sc-countdown-unit { flex: 0 0 24%; height: 24%; justify-content: center; align-items: center; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.sc-led-group { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sc-led-group .sc-seven { flex: 1; width: 100%; min-height: 0; filter: drop-shadow(0 0 6px currentColor); }
.sc-led-label { flex: 0 0 auto; font-size: 9cqh; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.sc-led-colon { flex: 0 0 4cqw; display: flex; align-items: flex-start; }
.sc-led-colon .sc-seven { width: 100%; height: 78%; }

/* ---------- Weather ---------- */
.sc-weather { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqh; }
.sc-weather-now { flex: 1; min-height: 0; display: flex; align-items: center; gap: 4cqw; }
.sc-weather-now-icon { height: 82%; aspect-ratio: 1; flex: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.sc-weather-temp { font-size: 38cqh; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.sc-weather-details { display: flex; flex-direction: column; gap: 1cqh; min-width: 0; }
.sc-weather-location { font-size: 9cqh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-weather-desc { font-size: 8cqh; opacity: .9; }
.sc-weather-extra { font-size: 5.5cqh; opacity: .7; font-weight: 400; }
.sc-weather-forecast { flex: 0 0 40%; display: flex; gap: 2cqw; }
.sc-weather-forecast .sc-weather-day {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh;
    border-radius: 4cqmin;
    background: rgba(255,255,255,.08);
}
.sc-weather-dayname { font-size: 6.5cqh; font-weight: 700; }
.sc-weather-day-icon { height: 42%; aspect-ratio: 1; }
.sc-weather-range { font-size: 6cqh; white-space: nowrap; }
.sc-weather-low { opacity: .6; margin-left: .3em; font-weight: 400; }
.sc-weather-current .sc-weather-temp { font-size: 52cqh; }
.sc-weather-current .sc-weather-location { font-size: 12cqh; }
.sc-weather-current .sc-weather-desc { font-size: 11cqh; }
.sc-weather-current .sc-weather-extra { font-size: 7.5cqh; }
.sc-weather-forecast.sc-weather-forecast { }
.sc-weather-forecast:only-child, .sc-weather-forecast .sc-weather-day:only-child { flex: 1; }
.sc-weather-forecast:only-child .sc-weather-dayname { font-size: 10cqh; }
.sc-weather-forecast:only-child .sc-weather-range { font-size: 9cqh; }
.sc-weather-error { display: flex; align-items: center; gap: .5em; font-size: 8cqh; opacity: .8; }

/* ---------- News ---------- */
.sc-news { position: absolute; inset: 0; }
.sc-news-item { position: absolute; inset: 0; display: flex; gap: 4cqw; }
.sc-news-image {
    flex: 0 0 42%;
    border-radius: 4cqmin;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.sc-news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3cqh; }
.sc-news-title { flex: 1 1 auto; min-height: 0; line-height: 1.12; }
.sc-news-summary {
    flex: none;
    font-size: 6.5cqh;
    font-weight: 400;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-news-meta { flex: none; font-size: 5cqh; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Menu board ---------- */
.sc-menu-box { display: block; }
.sc-menu { column-gap: 2.2em; column-fill: balance; }
.sc-menu-section { break-inside: avoid; margin-bottom: .9em; }
.sc-menu-heading {
    margin: 0 0 .35em 0;
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.15;
}
.sc-menu-item { margin: 0 0 .5em 0; break-inside: avoid; }
.sc-menu-line { display: flex; align-items: baseline; gap: .4em; }
.sc-menu-name { flex: none; max-width: 70%; }
.sc-menu-leader { flex: 1; min-width: 1em; }
.sc-menu-leader.sc-dotted { border-bottom: .12em dotted currentColor; opacity: .35; transform: translateY(-.25em); }
.sc-menu-price { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-menu-desc { font-size: .62em; font-weight: 400; line-height: 1.3; margin-top: .1em; max-width: 92%; }
.sc-menu-badge {
    flex: none;
    font-size: .45em;
    font-weight: 800;
    padding: .2em .55em;
    border-radius: 999px;
    letter-spacing: .05em;
    transform: translateY(-.15em);
    background: #f59e0b;
    color: #1c1917;
}
.sc-badge-new { background: #22c55e; color: #052e16; }
.sc-badge-popular { background: #f59e0b; }
.sc-badge-spicy { background: #ef4444; color: #fff; }
.sc-badge-vegan { background: #84cc16; color: #1a2e05; }
.sc-badge-glutenfree { background: #38bdf8; color: #082f49; }
.sc-badge-soldout { background: #64748b; color: #fff; }
.sc-soldout .sc-menu-name, .sc-soldout .sc-menu-price { text-decoration: line-through; opacity: .5; }

/* ---------- Table ---------- */
.sc-table-box { display: block; position: relative; }
.sc-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.sc-table th, .sc-table td {
    padding: .45em .7em;
    text-align: inherit;
    border-bottom: var(--sc-grid, none);
    border-right: var(--sc-grid, none);
    vertical-align: middle;
}
.sc-table th { font-weight: 800; font-size: .9em; letter-spacing: .03em; text-transform: uppercase; }
.sc-table th:last-child, .sc-table td:last-child { border-right: none; }
.sc-table-pages {
    position: absolute;
    right: .5em;
    bottom: .3em;
    font-size: .5em;
    opacity: .6;
}

/* ---------- Data tile ---------- */
.sc-data { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sc-data-value { flex: 0 0 66%; height: 66%; font-variant-numeric: tabular-nums; font-weight: 800; }
.sc-data-label { flex: 1; min-height: 0; }

/* ---------- QR ---------- */
.sc-qr { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3cqh; }
.sc-qr-code { position: relative; flex: none; display: flex; align-items: center; justify-content: center; }
.sc-qr-code svg { width: 100%; height: 100%; }
.sc-qr-caption { flex: 1; min-height: 0; }

/* ---------- Shapes ---------- */
.sc-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-shape-line { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Touch button ---------- */
.sc-button {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0 6%;
    background: var(--sc-btn);
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 -4px 0 rgba(0,0,0,.15);
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, background-color .08s ease;
}
.sc-button-live { cursor: pointer; }
.sc-button-live:active { background: var(--sc-btn-pressed); transform: scale(.97); }
.sc-button > .sc-fit { pointer-events: none; }

/* ---------- Seven segment ---------- */
.sc-seven { display: block; overflow: visible; }