/*
 * CloudCard semantic theme hotfix.
 *
 * This small post-build stylesheet keeps production safe when Hostinger does
 * not have the Node/Tailwind toolchain. Keep the matching source rules in
 * app.css so a future full asset build produces the same result.
 */
:where(.site-surface, [data-backend-layout]) {
    --action-bg: color-mix(in srgb, var(--brand) 35%, var(--ink) 65%);
    --action-bg-hover: color-mix(in srgb, var(--brand) 43%, var(--ink) 57%);
    --action-ink: var(--card);
    --action-muted: color-mix(in srgb, var(--action-ink) 78%, transparent);
}

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

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

main {
    min-width: 0;
}

.brand-gradient {
    background: linear-gradient(135deg, var(--action-bg), var(--action-bg-hover)) !important;
    color: var(--action-ink) !important;
}

.brand-panel {
    color: var(--action-ink) !important;
}

.brand-panel-muted {
    color: var(--action-muted) !important;
}

.brand-panel-secondary {
    border: 1px solid color-mix(in srgb, var(--action-ink) 42%, transparent);
    background: color-mix(in srgb, var(--action-ink) 8%, transparent);
    color: var(--action-ink) !important;
}

.brand-panel-secondary:hover,
.brand-panel-secondary:focus-visible {
    border-color: color-mix(in srgb, var(--action-ink) 68%, transparent);
    background: color-mix(in srgb, var(--action-ink) 15%, transparent);
}

button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}