/* Round 25 (HUI-1): the brand layer — the only override file on shared.css
   and app.css. Linked directly after css/app.css. Colours, fonts and
   surfaces come from tokens.css; no hex here. */

/* Font: Geist everywhere the old UI font was set (shared.css 114, 831, 3722, 4053,
   4069, 6615, 7797; app.css 763). */
body, html, body.siteclick-container, div.siteclick-container,
.siteclick-container .siteclick-tile-table.siteclick-tile-small .siteclick-tile-text,
.siteclick-container .siteclick-tile-qty,
.siteclick-container .siteclick-inline-notice,
.siteclick-tile-component.siteclick-tile-thumb,
.siteclick-amount > span {
    font-family: var(--sc-font-sans) !important;
}
.input-text-1 .input-in input,
.input-password-1 .input-in input,
.input-select-1 .input-in select,
.input-textarea-1 .input-in textarea {
    font-family: var(--sc-font-sans);
}

/* The serif/sans utility classes are neutral; the class attributes go later. */
.ff-serif, .ff-sans-serif {
    font-family: inherit !important;
}

/* Titles: one scale, weight 600. */
.siteclick-container .siteclick-title-1 { font-size: 1.75rem; font-weight: var(--sc-font-weight-title); }
.siteclick-container .siteclick-title-2 { font-size: 1.375rem; font-weight: var(--sc-font-weight-title); }
.siteclick-container .siteclick-title-3 { font-size: 1.125rem; font-weight: var(--sc-font-weight-title); }
.siteclick-container .siteclick-title-4 { font-size: 1rem; font-weight: var(--sc-font-weight-title); }
.siteclick-container .siteclick-title-5 { font-size: 0.9375rem; font-weight: var(--sc-font-weight-title); }
.siteclick-container .siteclick-title-6 { font-size: 0.875rem; font-weight: var(--sc-font-weight-title); }

/* Minimum text size 10px (badges, counters, labels); icons keep their size. */
.siteclick-container .siteclick-form-component-small input.siteclick-page-slug,
.siteclick-container .siteclick-form-component-large input.siteclick-page-slug,
.siteclick-input-with-button .submit,
.siteclick-form-component.siteclick-form-component-small .acf-button-group label,
.siteclick-container input.siteclick-page-slug,
.siteclick-container input.siteclick-page-slug:focus,
.siteclick-container input.siteclick-page-slug:active,
.siteclick-component-slug div,
.siteclick-component-date .date-item-in,
.siteclick-component-category .category-item-in,
.var-label span,
.siteclick-container span.count,
.siteclick-container .siteclick-bar-main-text span.siteclick-bar-role,
.siteclick-container .siteclick-bar-main-text span.siteclick-bar-url,
.siteclick-container .siteclick-bar-main-text .siteclick-label-url,
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle-item span:not(.sc-count),
.siteclick-tile-component.siteclick-tile-hierarchy span:not(.highlight),
.siteclick-container .siteclick-status,
.admin-sidebar-row .admin-sidebar-right-title span,
.siteclick-nav-item-in-text span.url,
.siteclick-nav-item-in-toggle span,
.siteclick-pricing-table-item-progress-in span,
.siteclick-usage-item-usage-in span,
.siteclick-card-title-small,
.siteclick-terms-toggle-toggle.active,
.siteclick-label-url span,
.siteclick-prompt-title,
span.siteclick-admin,
.sc-visual--sm .sc-visual-label {
    font-size: 10px !important;
}

/* Amber counter: white ink on the dark amber. */
.siteclick-container span.count.count-yellow {
    color: var(--sc-color-white);
}

/* Inputs: filled field, no visible frame, accent border on focus. */
.siteclick-container :is(input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea, select, .wp-editor-area):not(.siteclick-sidebar-footer-in *) {
    background: var(--sc-input-bg);
    border-color: var(--sc-input-border);
    font-family: var(--sc-font-sans);
}
.siteclick-container :is(input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea, select, .wp-editor-area):not(.siteclick-sidebar-footer-in *):focus {
    border-color: var(--sc-input-border-focus);
}

/* The login/auth block is the soft black itself: its fields sink to black. */
.siteclick-container .siteclick-form-component-variant-dark {
    --sc-input-bg: var(--sc-color-black);
}
.siteclick-container .siteclick-form-component-variant-dark :is(input[type=text], input[type=password], textarea) {
    background: var(--sc-input-bg);
    border-color: var(--sc-input-border);
}

input[type=checkbox], input[type=radio] {
    background: var(--sc-input-bg);
    border-color: var(--sc-input-border);
}
input[type=checkbox]:checked, input[type=radio]:checked {
    border-color: var(--sc-color-primary);
}

/* Modals: dark through the token scope (tokens.css); here only the shape. */
/* shared.css' 1000000000000 clamps to int32 like the notifications; one below them (sc-chrome-items.css). */
.siteclick-container .siteclick-modal {
    z-index: 2147483646;
}
.siteclick-container .siteclick-modal-body {
    width: min(360px, calc(100vw - 32px));
    border: 1px solid var(--sc-color-hairline);
}
/* 31a OPM-2: the footer leaves shared.css' absolute 60px slot (:2584-2601) so a second button row grows the modal instead of
   spilling out; the body scrolls. (0,3,0) beats shared.css (0,1,0) and ui-modal.css' overflow: hidden (0,2,0, loads later). */
.siteclick-container .siteclick-modal .siteclick-modal-body {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}
.siteclick-container .siteclick-modal .siteclick-panel-footer {
    position: static;
    height: auto;
}
.siteclick-container .siteclick-modal .siteclick-panel-content {
    padding-bottom: 0;
}
/* Footer buttons wrap per row at their natural width; beats shared.css:491-509 (0,3,0 + !important) by specificity. */
.siteclick-container .siteclick-modal .siteclick-buttons.siteclick-buttons-inline-justified {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.siteclick-container .siteclick-modal .siteclick-buttons.siteclick-buttons-inline-justified > .button {
    flex: 1 1 auto;
    width: auto;
    min-width: max-content;
    margin: 0 !important;
    white-space: nowrap;
}
.siteclick-container .siteclick-modal .siteclick-panel-title-in {
    background: transparent;
}
.siteclick-container .siteclick-modal .siteclick-panel-title-title {
    color: var(--sc-color-text-strong);
    font-weight: var(--sc-font-weight-title);
}
.siteclick-container .siteclick-modal .siteclick-panel-close {
    background: var(--sc-button-neutral-bg);
    color: var(--sc-button-neutral-text);
}
.siteclick-container .siteclick-modal .siteclick-panel-close:hover {
    background: var(--sc-button-neutral-bg-hover);
    color: var(--sc-button-neutral-text-hover);
}
.siteclick-container .siteclick-modal .siteclick-panel-content-in {
    color: var(--sc-color-text-muted);
}
/* NAFIX27C-1: the confirm buttons keep one line; they share the row by content width instead of 100% each. */
.siteclick-container .siteclick-modal-confirmation .siteclick-buttons-inline-justified > .button {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.siteclick-container .siteclick-modal-confirmation[data-modal="confirmation"] .siteclick-modal-body {
    width: max-content;
    min-width: min(300px, calc(100vw - 32px));
    max-width: min(28rem, calc(100vw - 32px));
}

/* NAFIX-25a chrome F3-F5: non-title text at the UI weight, strong text at the title
   weight, nothing under 10px, and the panel search strip on the brand font. */
.siteclick-container :is(.siteclick-bar-main-text span.siteclick-bar-role, .siteclick-bar-main-text span.siteclick-bar-url, span.count) {
    font-weight: var(--sc-font-weight-ui);
}
.siteclick-container :is(strong, b) {
    font-weight: var(--sc-font-weight-title);
}
.siteclick-container .siteclick-nav-item-in-text span {
    font-size: max(10px, 0.8em);
}
.siteclick-container input.js-filter-input {
    font-family: var(--sc-font-sans);
}

/* Round 28 (UIX-1, r.315): frames are 1px (shared.css 2px tiles, tables, flow, thumbs, columns;
   feature-sheet frames). Width only, colours stay; sidebar lines are not frames. */
.siteclick-container .siteclick-tile,
.siteclick-tile.siteclick-tile-table,
.siteclick-container .siteclick-tile-table .siteclick-tile-column:not(.siteclick-tile-column-has-childs),
.siteclick-tiles-top.siteclick-tiles-top-table .siteclick-tiles-top-in,
.siteclick-table.siteclick-table-vertical,
.siteclick-table-horizontal .siteclick-table-wrapper th,
.siteclick-table-horizontal .siteclick-table-wrapper td,
.siteclick-flow-in,
.siteclick-tile-thumbs .siteclick-tile-thumb-in,
.siteclick-amount > span,
.siteclick-columns > .siteclick-column[class*=" bg-"],
.siteclick-columns > .siteclick-column[class^="bg-"],
.siteclick-columns > .siteclick-column[class*=" border"],
.siteclick-columns > .siteclick-column[class^="border"],
.siteclick-container .dash-link,
.siteclick-container .dash-stat,
.siteclick-container .sc-bulk-count {
    border-width: 1px;
}
.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper tbody .siteclick-placeholder-empty,
.siteclick-container .siteclick-table-horizontal .siteclick-table-wrapper thead tr:not(.siteclick-thead-top) .siteclick-placeholder-empty {
    border-bottom-width: 1px !important;
}
@container siteclick-content-in-body (max-width: 768px) {
    .siteclick-container .siteclick-tile.siteclick-tile-table {
        border-left-width: 1px !important;
        border-right-width: 1px !important;
        border-bottom-width: 1px !important;
    }
    .siteclick-tiles-tiles .siteclick-tile.siteclick-tile-table:first-child {
        border-top-width: 1px !important;
    }
}

/* Round 27 (THM-1): the top bar paints the bar token (dark: black, light: the page ground). */
.siteclick-container .siteclick-bar-header {
    background: var(--sc-color-bar-bg);
}

/* Round 27 (THM-1): the legacy app.css blocks still in use paint light literals;
   here they follow the theme. Colour, background and border only. */
.input-text-1 .input-in input,
.input-password-1 .input-in input,
.input-select-1 .input-in select,
.input-textarea-1 .input-in textarea,
.input-text-1 .input-in.focus input,
.input-password-1 .input-in.focus input,
.input-textarea-1 .input-in.focus textarea {
    background: var(--sc-input-bg);
    border-color: var(--sc-input-border);
    color: var(--sc-color-text);
}
.input-text-1 .input-in.error input,
.input-password-1 .input-in.error input,
.input-select-1 .input-in.error select,
.input-textarea-1 .input-in.error textarea,
.input-text-1 .input-in.success input,
.input-password-1 .input-in.success input,
.input-select-1 .input-in.success select,
.input-textarea-1 .input-in.success textarea {
    background: var(--sc-input-bg);
}
.input-text-1 .input-in.error input,
.input-password-1 .input-in.error input,
.input-select-1 .input-in.error select,
.input-textarea-1 .input-in.error textarea {
    border-color: var(--sc-color-danger);
}

.sidebar-nav,
.sidebar-nav-dropdown-item {
    background: var(--sc-color-panel-bg);
}
.sidebar-nav-item {
    color: var(--sc-color-text-muted);
}
.sidebar-nav-item.active,
.sidebar-nav-item a:hover {
    background: var(--sc-color-primary-soft);
}

.rest.steps.steps-filter.tab-variant .step {
    color: var(--sc-color-text-muted);
    border-color: var(--sc-color-surface);
}
.rest.steps.steps-filter.tab-variant .step.active {
    border-color: var(--sc-color-surface) !important;
    background: var(--sc-color-surface) !important;
}
.rest.steps.steps-filter.tab-variant .step.active:after,
.rest.steps.steps-filter.tab-variant.tab-variant-sub,
.rest.steps.steps-filter.tab-variant.tab-variant-white {
    background: var(--sc-color-surface);
}
.rest.steps.steps-filter.tab-variant.tab-variant-white .step.active:after {
    background: var(--sc-color-panel-bg);
}
.rest.steps.steps-filter.tab-variant.tab-variant-white .step.active {
    background: var(--sc-color-panel-bg) !important;
}

.graph,
.card {
    background-color: var(--sc-color-panel-bg);
    border-color: var(--sc-color-surface);
}
.graph-text {
    color: var(--sc-color-text-subtle);
}
.card-subtitle,
.card-text,
.card-right span {
    color: var(--sc-color-text-muted);
}
.card-sub-item {
    border-color: var(--sc-color-border-strong);
}

.legal-item {
    border-color: var(--sc-color-surface) !important;
    background: var(--sc-color-panel-bg);
}

.subheader-in {
    background: var(--sc-color-panel-bg);
}

/* Round 28 (UIX-1, org r.410): app.css' .check/.radio paint light literals; they follow the theme. */
.check, .radio {
    color: var(--sc-color-text);
}
.checkmark {
    background-color: var(--sc-input-bg);
    box-shadow: inset 0 0 0 1px var(--sc-color-border-strong);
}
.check:hover input:not(:checked) ~ .checkmark,
.radio:hover input:not(:checked) ~ .checkmark {
    background-color: var(--sc-input-bg);
}
/* Nafix 28a (stl-07): hover shows on the frame, checked or not. */
.check:hover .checkmark,
.radio:hover .checkmark {
    box-shadow: inset 0 0 0 1px var(--sc-color-text-muted);
}

/* Fix 28a (stl-04): tile hover changes only the border (shared.css paints a fill, moves the visual and tints text). */
.siteclick-container .siteclick-tile:hover .siteclick-tile-visual {
    left: 0;
}
.siteclick-container .siteclick-tile:hover .siteclick-tile-text {
    color: inherit !important;
}
.siteclick-container a.siteclick-tile:hover {
    color: inherit;
}
/* Nafix 28a (m3-stl04): the qty badge keeps shared.css' rest look (its hover rule equals the rest),
   the domain row keeps its surface and text colours, a dash-stat keeps its text colour. */
.siteclick-container .siteclick-tile.siteclick-tile-table.siteclick-tile-small:hover {
    background: var(--sc-color-surface) !important;
}
.siteclick-container .siteclick-tile.siteclick-tile-table.siteclick-tile-small:hover .siteclick-tile-text {
    color: var(--sc-color-text-muted) !important;
}
.siteclick-container .siteclick-tile:hover .siteclick-tile-component.siteclick-tile-hierarchy {
    color: var(--sc-color-text-muted);
}
.siteclick-container .siteclick-tile:hover .siteclick-tile-component.siteclick-tile-hierarchy div.active {
    color: var(--sc-color-text);
}
.siteclick-container a.dash-stat:hover {
    color: var(--sc-color-text);
}

/* Fix 28a (stl-13): the switch size lives here (ui-input.css owns shape and states, never a size). */
.siteclick-container .switch {
    width: 36px;
    height: 20px;
    padding: 3px;
}
.siteclick-container .switch-in {
    width: 14px;
    height: 14px;
    left: 0;
}
.siteclick-container [data-sc-bulk] .siteclick-switch,
.siteclick-container .siteclick-switch.siteclick-switch--sm { width: 20px; height: 12px; padding: 2px; }
.siteclick-container .switch.active .switch-in,
.siteclick-container .card-chooser input[type="radio"]:checked + div div.switch-in {
    left: 16px;
}

/* header height (31a TGL-3): every fixed distance to the top reads --sc-top, without fallback.
   Same selectors as shared.css (:2183, :2270, :2333, :2508, :3165, :7147, :7300, :9419); sc-brand.css loads right after
   shared.css, so equal specificity wins by order. sc-pagehead.css:72 and ai-row.css/toggles.css load later and keep winning where they override. */
.siteclick-container .siteclick-header {
    top: var(--sc-top);
}
.siteclick-container [data-siteclick-header="false"][data-siteclick-subheader="false"] .siteclick-content-in {
    padding-top: var(--sc-top);
}
.siteclick-container .siteclick-sidebars .siteclick-toggles .toggle {
    top: var(--sc-top);
}
.siteclick-container .siteclick-sidebars .siteclick-sidebar-right {
    top: var(--sc-top);
}
.siteclick-container .siteclick-sidebar-rest {
    top: var(--sc-top);
}
.siteclick-website-preview {
    top: var(--sc-top);
}
.siteclick-website-preview-frame {
    top: var(--sc-top);
}
.siteclick-wizard-layout-sidebar {
    top: var(--sc-top);
}

/* Run 36a1 (KLN-1): a hidden menu item stays hidden; 0,2,0 beats shared.css `.sc-more-item { display: block }` (0,1,0). */
.sc-more-item[hidden] {
    display: none;
}