/* Awesome IPTV — brand theme layered over Fomantic UI 2.9.
 *
 * Fomantic ships a fixed light palette. Rather than rebuilding it with gulp,
 * every colour it uses is remapped here to the brand tokens below (dark by
 * default, light via [data-theme="light"]). All overrides are prefixed with
 * `body.awiptv` so they out-rank Fomantic's selectors without !important.
 */

:root {
    --bg:          #141312;
    --panel:       #201e1d;
    --panel-2:     #2d2b2b;
    --border:      #4a4746;
    --text:        #f3f2f2;
    --muted:       #9b9797;
    --accent:      #ff563c;
    --on-accent:   #14100f;
    --ok:          #35c98a;
    --warn:        #f0a93c;
    --danger:      #ff7a66;
    --info:        #7fb2f0;
    --accent-ink:  #ff9783;
    --accent-weak: #4d170e;

    --font: 'Archivo', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --rule: 2px;
    --hairline: 1px;
}
:root[data-theme="light"] {
    --bg:          #f3f2f2;
    --panel:       #eae9e9;
    --panel-2:     #ffffff;
    --border:      #ccc9c9;
    --text:        #201e1d;
    --muted:       #605d5d;
    --accent:      #ec3013;
    --on-accent:   #14100f;
    --ok:          #0e7c4a;
    --warn:        #a86a00;
    --danger:      #c02008;
    --info:        #1f5fa8;
    --accent-ink:  #ae1800;
    --accent-weak: #ffe0d9;
}

/* ---------- Base ---------- */
html { font-size: 15px; background: var(--bg); scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body.awiptv { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; min-height: 100vh; }
body.awiptv :is(h1, h2, h3, h4, h5, input, textarea, select, button, .ui, .ui *):not(i.icon) { font-family: var(--font); }
body.awiptv a { color: var(--accent-ink); }
body.awiptv a:hover { color: var(--accent-ink); text-decoration: underline; }
body.awiptv h1, body.awiptv h2, body.awiptv h3, body.awiptv h4, body.awiptv h5 { color: var(--text); }
body.awiptv small { color: var(--muted); }
body.awiptv img, body.awiptv svg { display: block; }
/* Brand radius is square everywhere. */
body.awiptv :is(.ui.button, .ui.segment, .ui.card, .ui.cards > .card, .ui.message, .ui.label, .ui.menu,
                .ui.steps, .ui.steps .step, .ui.table, .ui.table *, .ui.input, .ui.input input,
                .ui.form input, .ui.form textarea, .ui.form select, .ui.checkbox label:before) { border-radius: 0 !important; }
body.awiptv .mono { font-family: var(--mono); font-size: 13px; }

/* ---------- Buttons ---------- */
body.awiptv .ui.button,
body.awiptv .ui.button:focus {
    background: var(--panel-2); color: var(--text); font-weight: 800; box-shadow: none;
    border: 1px solid var(--border);
}
body.awiptv .ui.button:hover { background: color-mix(in srgb, var(--text) 10%, var(--panel-2)); color: var(--text); text-decoration: none; }
body.awiptv .ui.primary.button,
body.awiptv .ui.primary.button:focus,
body.awiptv .ui.primary.button:active {
    background: var(--accent); color: var(--on-accent); border-color: transparent;
}
body.awiptv .ui.primary.button:hover { background: var(--accent); color: var(--on-accent); filter: brightness(0.92); }
body.awiptv .ui.button.ghost,
body.awiptv .ui.button.ghost:focus { background: transparent; color: var(--text); border-color: var(--border); }
body.awiptv .ui.button.ghost:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
body.awiptv .ui.button.danger,
body.awiptv .ui.button.danger:focus { background: transparent; color: var(--danger); border-color: var(--danger); }
body.awiptv .ui.button.danger:hover { background: var(--danger); color: var(--on-accent); }
body.awiptv .ui.icon.button > .icon { opacity: 1; }

/* ---------- Forms ---------- */
body.awiptv .ui.form:not(.inverted) .field > label:not(.button),
body.awiptv .ui.form .field > .checkbox label { color: var(--muted); font-size: 12px; font-weight: 400; }
body.awiptv .ui.form input:not([type]),
body.awiptv .ui.form input[type="text"],
body.awiptv .ui.form input[type="email"],
body.awiptv .ui.form input[type="password"],
body.awiptv .ui.form input[type="number"],
body.awiptv .ui.form textarea,
body.awiptv .ui.form select {
    background: var(--panel); color: var(--text); border: 1px solid var(--border);
    box-shadow: none; font-size: 14px;
}
body.awiptv .ui.form input:not([type]):focus,
body.awiptv .ui.form input[type="text"]:focus,
body.awiptv .ui.form input[type="email"]:focus,
body.awiptv .ui.form input[type="password"]:focus,
body.awiptv .ui.form input[type="number"]:focus,
body.awiptv .ui.form textarea:focus,
body.awiptv .ui.form select:focus {
    background: var(--panel); color: var(--text); border-color: var(--accent); box-shadow: none;
}
body.awiptv .ui.form ::placeholder { color: var(--muted); opacity: 0.8; }
/* Fomantic paints required-but-empty fields as errors on load; only flag them once touched. */
body.awiptv .ui.form:not(.initial) .field :is(input, textarea, select):invalid {
    color: var(--text); background: var(--panel); border-color: var(--border);
}
body.awiptv .ui.form:not(.initial) .field :is(input, textarea, select):user-invalid { border-color: var(--danger); }
body.awiptv .ui.form:not(.initial) .field :is(input, textarea, select):focus { border-color: var(--accent); }
body.awiptv .ui.icon.input > i.icon { color: var(--muted); opacity: 1; }
body.awiptv .ui.icon.input > i.link.icon:hover { color: var(--text); opacity: 1; }
body.awiptv .ui.icon.input > i.link.icon:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

body.awiptv .ui.checkbox label,
body.awiptv .ui.checkbox input:focus ~ label,
body.awiptv .ui.checkbox input:checked ~ label,
body.awiptv .ui.checkbox label:hover { color: var(--muted); font-size: 14px; }
body.awiptv .ui.checkbox input ~ label:before { background: var(--panel); border: 1px solid var(--border); }
body.awiptv .ui.checkbox input:focus ~ label:before,
body.awiptv .ui.checkbox input:checked ~ label:before { background: var(--panel); border-color: var(--accent); }
body.awiptv .ui.checkbox input:checked ~ label:after,
body.awiptv .ui.checkbox input:checked:focus ~ label:after { color: var(--accent); }

/* ---------- Messages ---------- */
body.awiptv .ui.message { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--border) inset; }
body.awiptv .ui.message .header { color: inherit; }
body.awiptv .ui.positive.message {
    background: color-mix(in srgb, var(--ok) 16%, var(--panel)); color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset;
}
body.awiptv .ui.negative.message {
    background: color-mix(in srgb, var(--danger) 16%, var(--panel)); color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset;
}

/* ---------- Segments, cards, tables, labels ---------- */
body.awiptv .ui.segment { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
body.awiptv .ui.vertical.segment { background: transparent; border: 0; box-shadow: none; }
body.awiptv .ui.vertical.segment.alt {
    background: var(--panel); border-top: var(--rule) solid var(--border); border-bottom: var(--rule) solid var(--border);
}

body.awiptv .ui.card,
body.awiptv .ui.cards > .card { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
body.awiptv .ui.card > .content,
body.awiptv .ui.cards > .card > .content { border-top: 0; }
body.awiptv .ui.card > .content > .header,
body.awiptv .ui.cards > .card > .content > .header { color: var(--text); font-size: 16px; font-weight: 800; }
body.awiptv .ui.card > .content > .description,
body.awiptv .ui.cards > .card > .content > .description { color: var(--muted); font-size: 14px; }
body.awiptv .ui.card.kpi > .content { padding: 20px; }
body.awiptv .kpi-label { color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
body.awiptv .kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }

body.awiptv .table-scroll { overflow-x: auto; }
body.awiptv .ui.table { background: var(--panel); color: var(--text); border: 0; border-top: 0; box-shadow: none; }
body.awiptv .ui.table thead th {
    background: transparent; color: var(--muted); border-bottom: var(--rule) solid var(--border);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 11px 14px;
}
body.awiptv .ui.table tr td,
body.awiptv .ui.table td { border-top: var(--hairline) solid var(--border); padding: 11px 14px; font-size: 14px; }
body.awiptv .ui.table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
body.awiptv .ui.table td small { display: block; }

body.awiptv .ui.label.status {
    background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px;
}
body.awiptv .ui.label.status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: currentColor; }
body.awiptv .ui.label.status.pending { background: color-mix(in srgb, var(--warn) 20%, var(--panel)); color: var(--warn); }
body.awiptv .ui.label.status.active,
body.awiptv .ui.label.status.paid { background: color-mix(in srgb, var(--ok) 20%, var(--panel)); color: var(--ok); }
body.awiptv .ui.label.status.expired { background: color-mix(in srgb, var(--muted) 25%, var(--panel)); color: var(--muted); }
body.awiptv .ui.label.status.failed,
body.awiptv .ui.label.status.cancelled { background: color-mix(in srgb, var(--danger) 20%, var(--panel)); color: var(--danger); }

/* ---------- Menus ---------- */
body.awiptv .ui.menu { background: transparent; border: 0; box-shadow: none; color: var(--text); }
body.awiptv .ui.menu .item { color: var(--text); background: transparent; }
body.awiptv .ui.menu .item:before { display: none; }
body.awiptv .ui.menu a.item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); text-decoration: none; }
body.awiptv .ui.menu .active.item,
body.awiptv .ui.menu .active.item:hover { background: var(--accent-weak); color: var(--accent-ink); font-weight: 800; box-shadow: none; }
body.awiptv .ui.menu .header.item { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
body.awiptv .ui.pagination.menu { border: 1px solid var(--border); }
body.awiptv .ui.pagination.menu .item.disabled { color: var(--muted); opacity: 0.5; }

/* ---------- Steps, lists, dividers ---------- */
body.awiptv .ui.steps { background: var(--panel); border: var(--rule) solid var(--border); box-shadow: none; }
body.awiptv .ui.steps .step { background: transparent; color: var(--text); border-right: 1px solid var(--border); padding: 24px; align-items: flex-start; }
body.awiptv .ui.steps .step:after { display: none; }
body.awiptv .ui.steps .step:last-child { border-right: 0; }
body.awiptv .ui.steps .step .title { color: var(--text); font-size: 16px; font-weight: 800; margin-bottom: 6px; }
body.awiptv .ui.steps .step .description { color: var(--muted); font-size: 14px; font-weight: 400; }
body.awiptv .ui.ordered.steps .step:before {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; margin-right: 16px; background: var(--accent); color: var(--on-accent);
    font-family: var(--mono); font-size: 15px; font-weight: 800; align-self: flex-start;
}
@media (max-width: 767.98px) {
    body.awiptv .ui.steps { width: 100%; }
    body.awiptv .ui.steps:not(.unstackable):not(.circular) .step {
        flex-direction: row; padding: 20px 16px; border-right: 0; border-bottom: 1px solid var(--border);
    }
    body.awiptv .ui.steps:not(.unstackable):not(.circular) .step:last-child { border-bottom: 0; }
    body.awiptv .ui.steps:not(.unstackable):not(.circular) .step .content { text-align: left; }
    body.awiptv .ui.ordered.steps:not(.unstackable):not(.circular) .step::before { margin: 0 16px 0 0; }
}

body.awiptv .ui.list .item { color: var(--muted); }
body.awiptv .ui.divider { border-color: var(--border); }

/* ---------- Layout: admin shell ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-nav { width: 240px; flex: none; background: var(--bg); border-right: var(--rule) solid var(--border); }
.admin-brand {
    height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 20px;
    border-bottom: var(--rule) solid var(--border); font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
body.awiptv .admin-nav .ui.vertical.menu { width: 100%; margin: 0; }
body.awiptv .admin-nav .ui.vertical.menu .item { padding: 9px 20px; font-size: 14px; border-left: 2px solid transparent; }
body.awiptv .admin-nav .ui.vertical.menu .header.item { padding: 18px 20px 8px; }
body.awiptv .admin-nav .ui.vertical.menu .active.item { border-left-color: var(--accent); }
.admin-main { flex: 1; min-width: 0; padding: 32px; max-width: 1200px; }
.admin-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.admin-topbar form { margin: 0; }
/* Every action in a top bar (admin bar, public header, login corner) shares one
   height, whatever the button variant. */
body.awiptv :is(.admin-topbar, .site-header .actions, .site-menu-prefs, .login-topbar > .language-switcher) .ui.button {
    box-sizing: border-box; height: 38px; margin: 0; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 13px;
}
body.awiptv :is(.admin-topbar, .site-header .actions, .site-menu-prefs, .admin-brand) .ui.icon.button { width: 38px; height: 38px; margin: 0; padding: 0; }
body.awiptv :is(.admin-topbar, .site-header .actions, .site-menu-prefs, .admin-brand) .ui.icon.button > .icon { margin: 0; }
body.awiptv :is(.admin-topbar, .site-header .actions, .site-menu-prefs) .ui.buttons,
body.awiptv .login-topbar > .language-switcher { height: 38px; }
body.awiptv :is(.admin-topbar, .site-header .actions, .site-menu-prefs, .login-topbar > .language-switcher) .ui.buttons .button,
body.awiptv .login-topbar > .language-switcher .button { padding: 0 14px; }
/* Menu toggles only appear where a navigation collapses (breakpoints below). */
body.awiptv :is(.site-header, .admin-brand) .ui.button.nav-toggle { display: none; align-items: center; justify-content: center; }
.admin-main h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 20px; }
.admin-main .page-note { color: var(--muted); font-size: 14px; margin: -10px 0 24px; max-width: 520px; }
.admin-main .ui.table + h1, .admin-main .ui.cards + h1, .admin-main .kpi-grid + h1, .admin-main .table-scroll + h1 { margin-top: 32px; }
.admin-main .form-wide { max-width: 720px; }
.admin-main .form-wide .currency-field { max-width: 180px; }
.admin-main .form-narrow { max-width: 480px; }
body.awiptv .ui.form textarea { min-height: 5em; }

/* Language switcher (FR | EN) */
.language-switcher .ui.button { margin: 0; }
body.awiptv .ui.buttons.language-switcher .button + .button { margin-left: -1px; }
body.awiptv .ui.buttons.language-switcher .button.ghost.active,
body.awiptv .ui.buttons.language-switcher .button.ghost.active:hover { background: var(--accent-weak); color: var(--accent-ink); border-color: var(--accent); position: relative; }
.login-form-side { position: relative; }
.login-topbar { position: absolute; top: 24px; right: 24px; }
.login-mobile-brand { display: none; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.admin-main .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-main .page-heading h1 { margin: 0; }
.admin-main .page-heading .ui.button { margin: 0; }
.admin-main form .ui.button + .ui.button { margin-left: 8px; }
body.awiptv .ui.button.ghost.active { background: var(--accent-weak); color: var(--accent-ink); border-color: var(--accent); }
.admin-main .search-form { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.admin-main .search-form .ui.action.input { width: 100%; max-width: 420px; }
body.awiptv .search-form .ui.action.input > input[type="search"] {
    background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 0; box-shadow: none; font-size: 14px;
}
body.awiptv .search-form .ui.action.input > input[type="search"]:focus { border-color: var(--accent); }
.admin-main .search-reset { font-size: 13px; }
.admin-main .pager { margin-top: 16px; }
.inline-form { display: inline; }
body.awiptv .pager { max-width: 100%; overflow-x: auto; }

/* KPI tiles: an auto-fitting grid that drops to two columns, then one, on phones. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
body.awiptv .kpi-grid > .ui.card { width: auto; margin: 0; }
body.awiptv .kpi-value .kpi-unit { font-size: 0.55em; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* Below 992px the sidebar collapses into a sticky top bar with a menu toggle. */
@media (max-width: 991.98px) {
    .admin-shell { flex-direction: column; }
    .admin-nav { position: sticky; top: 0; z-index: 20; width: 100%; border-right: 0; border-bottom: var(--rule) solid var(--border); }
    .admin-brand { height: 58px; padding: 0 16px; border-bottom: 0; }
    body.awiptv .admin-nav .admin-brand .ui.button.nav-toggle { display: inline-flex; margin-left: auto; }
    .admin-nav #admin-menu:not(.is-open) { display: none; }
    body.awiptv .admin-nav #admin-menu {
        max-height: calc(100vh - 60px); overflow-y: auto; padding-bottom: 8px; border-top: var(--hairline) solid var(--border);
    }
    body.awiptv .admin-nav .ui.vertical.menu .item { padding: 13px 16px; font-size: 15px; }
    body.awiptv .admin-nav .ui.vertical.menu .header.item { padding: 18px 16px 6px; font-size: 11px; }
    .admin-main { padding: 24px; max-width: none; }
}
@media (max-width: 767.98px) {
    .admin-main { padding: 16px 16px 32px; }
    .admin-topbar { margin-bottom: 20px; }
    .admin-main h1 { font-size: 20px; }
    .admin-main .ui.table + h1, .admin-main .ui.cards + h1, .admin-main .kpi-grid + h1, .admin-main .table-scroll + h1 { margin-top: 28px; }
    .admin-main .page-note { margin-top: -8px; }
    .admin-main .search-form .ui.action.input { max-width: none; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.awiptv .ui.card.kpi > .content { padding: 14px; }
    body.awiptv .kpi-value { font-size: 22px; overflow-wrap: anywhere; }
}
@media (max-width: 359.98px) {
    .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Action buttons in the admin bar keep only their icon on phones (title/aria-label carry the text). */
@media (max-width: 640px) {
    body.awiptv .admin-topbar .button-text { display: none; }
    body.awiptv .admin-topbar .ui.compact.button { width: 38px; padding: 0; }
    body.awiptv .admin-topbar .ui.compact.button > .icon { margin: 0; }
}

/* Wider screens: dates and row actions stay on one line (.table-scroll takes any overflow). */
@media (min-width: 768px) {
    body.awiptv .ui.table td.mono, body.awiptv .ui.table .ui.button { white-space: nowrap; }
}

/* Data tables become one labelled card per row on phones (labels from td[data-label]). */
@media (max-width: 767.98px) {
    body.awiptv .table-scroll { overflow-x: visible; }
    body.awiptv .ui.table.responsive,
    body.awiptv .ui.table.responsive tbody,
    body.awiptv .ui.table.responsive tr,
    body.awiptv .ui.table.responsive td { display: block; width: 100%; }
    body.awiptv .ui.table.responsive { background: transparent; }
    body.awiptv .ui.table.responsive thead { display: none; }
    body.awiptv .ui.table.responsive tbody tr {
        background: var(--panel); border: 1px solid var(--border); padding: 6px 0; margin-bottom: 12px;
    }
    body.awiptv .ui.table.responsive tbody tr:hover { background: var(--panel); }
    /* flow-root: the cell grows to fit a label that wraps onto two lines. */
    body.awiptv .ui.table.responsive tr td[data-label] {
        display: flow-root; border-top: 0; padding: 7px 14px; text-align: right; overflow-wrap: anywhere;
    }
    body.awiptv .ui.table.responsive tr td[data-label]::before {
        content: attr(data-label); float: left; width: 38%; padding: 2px 12px 0 0; box-sizing: border-box;
        color: var(--muted); font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1.4;
        letter-spacing: 0.06em; text-transform: uppercase; text-align: left; overflow-wrap: normal;
    }
    body.awiptv .ui.table.responsive tr td:not([data-label]) { border-top: 0; padding: 7px 14px; text-align: left; }
    body.awiptv .ui.table.responsive tr td.cell-actions {
        display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-left: 14px;
    }
    body.awiptv .ui.table.responsive tr td.cell-actions:not(:has(.button)) { display: none; }
    body.awiptv .ui.table.responsive tr td.cell-actions .inline-form { display: block; }
    body.awiptv .ui.table.responsive tr td.cell-actions .ui.button { margin: 0; }
    body.awiptv .ui.table.responsive td small { margin-top: 2px; }
}

/* ---------- Layout: login ---------- */
.login-shell { display: flex; min-height: 100vh; }
.login-statement {
    flex: 1 1 480px; max-width: 560px; background: var(--accent); color: var(--on-accent);
    padding: 56px; display: flex; flex-direction: column;
}
.login-statement > div:last-child { margin-top: auto; }
.login-statement .brand { display: flex; align-items: center; gap: 14px; }
.login-statement .tagline { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; max-width: 420px; }
.login-statement .kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-bottom: 16px; }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-form-box { width: 100%; max-width: 380px; }
.login-form-box h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.login-form-box p.lead { margin: 0 0 28px; font-size: 14px; color: var(--muted); }
.login-form-box .remember-field { margin-top: 20px; }
.login-form-box .login-aside { margin: 20px 0 0; font-size: 13px; text-align: center; }
.login-form-box .login-aside a { color: var(--accent, inherit); font-weight: 600; }
@media (max-width: 760px) {
    .login-statement { display: none; }
    .login-form-side { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 16px 16px 40px; }
    .login-topbar { position: static; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
    .login-mobile-brand { display: flex; }
    .login-form-box { margin: auto; }
    .login-form-box h1 { font-size: 24px; }
}

/* ---------- Layout: public site ---------- */
body.awiptv .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: var(--rule) solid var(--border); }
body.awiptv .site-header .ui.menu { min-height: 72px; margin: 0; }
body.awiptv .site-header .brand.item { gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; padding-left: 0; }
body.awiptv .site-header .ui.menu a.brand.item:hover { background: transparent; text-decoration: none; }
body.awiptv .site-header .ui.menu .item.nav-link { color: var(--muted); font-size: 14px; font-weight: 600; }
body.awiptv .site-header .ui.menu a.item.nav-link:hover { background: transparent; color: var(--text); }
body.awiptv .site-header .ui.menu .item.actions { gap: 10px; padding-right: 0; }
body.awiptv .site-header :is(.header-extra, .header-prefs) { display: contents; }
.site-menu { display: none; }

body.awiptv .site-footer { padding: 32px 0; border-top: var(--rule) solid var(--border); }
.site-footer .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-footer .footer-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.site-footer .brand { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.site-footer .meta { color: var(--muted); font-size: 13px; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; overflow-wrap: anywhere; }
body.awiptv .site-footer .footer-links a { color: var(--muted); font-size: 13px; border-bottom: 1px solid transparent; }
body.awiptv .site-footer .footer-links a:hover { color: var(--text); border-bottom-color: var(--border); text-decoration: none; }
.site-main { padding-bottom: 0; }

.eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }

/* Home */
body.awiptv .hero.ui.vertical.segment { padding: 88px 0 72px; border-bottom: var(--rule) solid var(--border); }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 { font-size: 52px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 20px; max-width: 760px; }
.hero .lead { font-size: 18px; color: var(--muted); max-width: 580px; margin: 0 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-actions .ui.button { margin: 0; }
body.awiptv .ui.button.lg { padding: 15px 28px; font-size: 15px; }
body.awiptv .trust-row.ui.horizontal.list { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
body.awiptv .trust-row.ui.horizontal.list > .item { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.trust-row svg { color: var(--ok); flex: none; }

body.awiptv .ui.vertical.segment.block { padding: 72px 0; }
.block h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; }
.section-lead { color: var(--muted); font-size: 16px; max-width: 620px; margin: 0 0 44px; }
.feature-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--accent-weak); color: var(--accent-ink); margin-bottom: 18px; }
body.awiptv .ui.cards > .card.feature > .content { padding: 28px 24px; }
body.awiptv .ui.cards > .card.feature > .content > .header { margin-bottom: 8px; }
body.awiptv .ui.large.label.platform { background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; padding: 10px 18px; margin: 0 12px 12px 0; }
.download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.download-actions .ui.button { margin: 0; }
.download-soon { color: var(--muted); font-size: 13px; font-weight: 600; }
.premium-cta { margin: 32px 0 0; }
.cta-banner { text-align: center; }
.cta-banner .section-lead { margin-left: auto; margin-right: auto; }
.cta-banner .hero-actions { justify-content: center; margin-bottom: 0; }

/* Legal */
.legal { padding: 56px 0 72px; }
.legal h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
.legal .updated { color: var(--muted); font-size: 13px; margin: 0 0 36px; }
.legal .intro { color: var(--muted); font-size: 16px; margin: 0 0 40px; }
.legal h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 36px 0 10px; }
.legal section p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }

/* Premium (website checkout) */
.premium-page { padding: 56px 0 72px; }
.premium-page > .container > .ui.message { margin: 0 0 28px; }
.premium-page h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 20px; }
.premium-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.premium-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.premium-price .amount { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.premium-price .period { color: var(--muted); font-size: 16px; }
.premium-was { color: var(--muted); font-size: 14px; text-decoration: line-through; margin-top: 4px; }
.premium-offer h2 { font-size: 18px; font-weight: 800; margin: 36px 0 16px; }
.premium-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.premium-features li { display: flex; gap: 12px; align-items: flex-start; }
.premium-features svg { color: var(--ok); flex: none; margin-top: 5px; }
.premium-features strong { display: block; }
.premium-features span { color: var(--muted); font-size: 14px; }
.premium-panel { background: var(--panel); border: var(--hairline) solid var(--border); padding: 32px; }
.premium-panel h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.premium-muted { color: var(--muted); }
.premium-panel > p.premium-muted { margin: 0 0 24px; }
/* Reserves the button's height so the form doesn't jump when it loads. */
.premium-google { min-height: 44px; display: flex; justify-content: center; }
.premium-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.premium-divider::before, .premium-divider::after { content: ""; flex: 1; border-top: var(--hairline) solid var(--border); }
.premium-aside { margin: 20px 0 0; font-size: 13px; text-align: center; }
.premium-aside a { font-weight: 600; }
.premium-note { color: var(--muted); font-size: 13px; margin: 16px 0 0; }
.premium-account { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.premium-account strong, .premium-account span { display: block; overflow-wrap: anywhere; }
.premium-account form { margin: 0; }
.premium-status { border-left: 3px solid var(--border); padding: 10px 14px; margin-bottom: 24px; font-weight: 600; background: var(--panel-2); }
.premium-status.is-premium { border-left-color: var(--ok); }
.premium-narrow, .premium-result { max-width: 460px; margin: 0 auto; }
.premium-narrow h1, .premium-result h1 { font-size: 30px; }
.premium-narrow > p.premium-muted { margin: 0 0 24px; }
.premium-result p { font-size: 16px; margin: 0 0 20px; }
.premium-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.premium-actions form { margin: 0; }
.premium-actions .ui.button { margin: 0; }
@media (max-width: 767.98px) {
    .premium-page { padding: 32px 0 56px; }
    .premium-page h1 { font-size: 30px; }
    .premium-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .premium-panel { padding: 24px 16px; }
}

/* Below 992px the section links move into a panel under the header; below 768px
   the language/theme controls follow them and the header keeps brand + toggle. */
@media (max-width: 991.98px) {
    body.awiptv .site-header .borderless.menu .item.nav-link { display: none; }
    body.awiptv .site-header .ui.button.nav-toggle.has-nav { display: inline-flex; }
    .site-menu.is-open { display: block; max-height: calc(100vh - 74px); overflow-y: auto; border-top: var(--hairline) solid var(--border); padding: 4px 0 16px; }
    body.awiptv .site-menu .ui.vertical.menu { margin: 0; }
    body.awiptv .site-menu .ui.vertical.menu > .item.nav-link { padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--text); }
    body.awiptv .site-menu .ui.vertical.menu > .item + .item { border-top: var(--hairline) solid var(--border); }
    body.awiptv .site-menu .ui.vertical.menu > a.item.nav-link:hover { background: transparent; color: var(--accent-ink); }
    .site-menu-prefs { display: none; }
}
@media (max-width: 767.98px) {
    html { scroll-padding-top: 72px; }
    body.awiptv .site-header .ui.menu { min-height: 62px; }
    body.awiptv .site-header .brand.item { font-size: 17px; }
    body.awiptv .site-header :is(.header-extra, .header-prefs) { display: none; }
    body.awiptv .site-header .actions .ui.button.nav-toggle { display: inline-flex; }
    .site-menu.is-open { max-height: calc(100vh - 64px); }
    .site-menu-prefs { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
    .site-menu .ui.vertical.menu + .site-menu-prefs { margin-top: 4px; border-top: var(--hairline) solid var(--border); }

    body.awiptv .hero.ui.vertical.segment { padding: 48px 0 40px; }
    .hero h1 { font-size: 34px; overflow-wrap: break-word; }
    .hero .lead { font-size: 16px; margin-bottom: 26px; }
    body.awiptv .ui.vertical.segment.block { padding: 48px 0; }
    .block h2 { font-size: 24px; }
    .section-lead { font-size: 15px; margin-bottom: 28px; }
    body.awiptv .ui.cards > .card.feature > .content { padding: 22px 20px; }
    body.awiptv .ui.large.label.platform { margin: 0 8px 8px 0; padding: 9px 14px; }
    body.awiptv .site-footer { padding: 28px 0; }
    .site-footer .footer-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .site-footer .footer-id { flex-direction: column; }
    .site-footer .footer-links { flex-direction: column; gap: 10px; }
    .legal { padding: 40px 0 56px; }
    .legal h1 { font-size: 26px; overflow-wrap: break-word; }
}
/* Big screens (TVs, 1440p/4K monitors): every size here is in px and Fomantic's
   container stops at 1127px, so the home page would sit small in the middle of
   the screen. It gets a wider container and is scaled up as a whole with
   `zoom` (on header/main/footer, not <html>, so 100vh keeps its meaning);
   browsers without `zoom` just keep the 1:1 layout. The anchor offset follows
   the header's scaled height (74px). */
@media (min-width: 1800px) {
    html:has(body.site-home) { scroll-padding-top: 100px; }
    body.site-home :is(.site-header, .site-main, .site-footer) { zoom: 1.2; }
    body.site-home .ui.container { width: 1280px; }
    body.site-home .hero h1 { max-width: 880px; }
    body.site-home .hero .lead { max-width: 640px; }
}
@media (min-width: 2400px) {
    html:has(body.site-home) { scroll-padding-top: 122px; }
    body.site-home :is(.site-header, .site-main, .site-footer) { zoom: 1.5; }
}
@media (min-width: 3200px) {
    html:has(body.site-home) { scroll-padding-top: 160px; }
    body.site-home :is(.site-header, .site-main, .site-footer) { zoom: 2; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 30px; }
    .hero-actions .ui.button { flex: 1 1 100%; text-align: center; }
}

/* ---------- AJAX: inline errors, list loading, toasts ---------- */
body.awiptv .ui.form .field.error :is(input, textarea, select) {
    background: var(--panel); color: var(--text); border-color: var(--danger);
}
body.awiptv .ui.form:not(.inverted) .field.error > label { color: var(--danger); }
body.awiptv .ui.pointing.basic.label.field-error {
    display: block; margin-top: 8px; background: transparent !important; color: var(--danger) !important;
    border: 1px solid var(--danger) !important; font-weight: 600; font-size: 12px;
}
body.awiptv .ui.pointing.basic.label.field-error::before { background: var(--panel); border-color: var(--danger) !important; }
[data-ajax-list] { transition: opacity .15s ease; }
[data-ajax-list].is-loading { opacity: .5; pointer-events: none; }
.iziToast-cover { width: 64px !important; background-size: 32px 32px !important; background-repeat: no-repeat !important; background-position: center !important; }
.iziToast > .iziToast-body { margin-left: 64px !important; }
body.awiptv .ui.form .field.error :is(input, textarea, select):focus { background: var(--panel); color: var(--text); border-color: var(--danger); }
.iziToast, .iziToast > .iziToast-body .iziToast-title, .iziToast > .iziToast-body .iziToast-message { font-family: var(--font); }

/* ---------- Modals ---------- */
body.awiptv .ui.modal { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.6); }
body.awiptv .ui.modal > .header { background: var(--panel); color: var(--text); border-bottom: 1px solid var(--border); font-weight: 800; }
body.awiptv .ui.modal > .content { background: var(--panel); color: var(--text); }
body.awiptv .ui.modal > .actions { background: var(--panel-2); border-top: 1px solid var(--border); }
body.awiptv .ui.modal > .actions .ui.button { margin-left: 8px; }
body.awiptv .ui.modal .page-note { margin: 0 0 20px; }

/* Date input + small hints inside forms */
body.awiptv .ui.form input[type="date"] {
    background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: none; font-size: 14px; color-scheme: dark;
}
:root[data-theme="light"] body.awiptv .ui.form input[type="date"] { color-scheme: light; }
body.awiptv .ui.form input[type="date"]:focus { background: var(--panel); color: var(--text); border-color: var(--accent); }
body.awiptv .ui.modal .field-hint,
body.awiptv .admin-main .form-wide .field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
body.awiptv .ui.modal .modal-subject { font-weight: 800; margin: 0 0 18px; }

/* ---------- Phones: form inputs, modals ---------- */
@media (max-width: 767.98px) {
    /* Under 16px, iOS Safari zooms the page when a field gets focus. */
    body.awiptv .ui.form :is(input, textarea, select),
    body.awiptv .search-form .ui.action.input > input[type="search"] { font-size: 16px; }
    body.awiptv .ui.modal > .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 16px !important; }
    body.awiptv .ui.modal > .actions .ui.button { margin: 0; flex: 1 1 auto; }
}