/* Public theme control bridge.
   Keeps customer-facing brand controls aligned with the public appearance
   selected by the administrator. Semantic success/warning/error colours are
   intentionally left to their page-specific status components. */

html[data-ak-public-theme] body.has-ak-public-header {
    --brand-primary: var(--ak-public-accent) !important;
    --brand-primary-dark: var(--ak-public-accent-strong) !important;
    --brand-deep: var(--ak-public-accent-deep) !important;
    --brand-soft: var(--ak-public-accent-soft) !important;
    --brand-surface: var(--ak-public-accent-soft) !important;
    --brand-primary-rgb: var(--ak-public-accent-rgb) !important;
    --brand-deep-rgb: var(--ak-public-accent-deep-rgb) !important;
    --brand-ring: rgba(var(--ak-public-accent-rgb), 0.24) !important;
    --brand-shadow: rgba(var(--ak-public-accent-rgb), 0.28) !important;
    --brand-button-shadow: rgba(var(--ak-public-accent-deep-rgb), 0.34) !important;
    --brand-control-primary: linear-gradient(
        135deg,
        var(--ak-public-accent) 0%,
        var(--ak-public-accent-strong) 52%,
        var(--ak-public-accent-deep) 100%
    ) !important;
    --brand-control-primary-hover: linear-gradient(
        135deg,
        var(--ak-public-accent-strong) 0%,
        var(--ak-public-accent) 46%,
        var(--ak-public-accent-deep) 100%
    ) !important;
    --brand-control-secondary: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98),
        var(--ak-public-accent-soft)
    ) !important;
    --brand-control-secondary-hover: linear-gradient(
        145deg,
        #ffffff,
        var(--ak-public-accent-soft)
    ) !important;
    --brand-control-border: rgba(var(--ak-public-accent-rgb), 0.32) !important;
    --brand-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(var(--ak-public-accent-deep-rgb), 0.2),
        0 10px 24px rgba(var(--ak-public-accent-deep-rgb), 0.3) !important;
    --brand-control-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(var(--ak-public-accent-rgb), 0.14),
        0 9px 22px rgba(var(--ak-public-accent-deep-rgb), 0.15) !important;
    --navy: var(--ak-public-accent-strong) !important;
    --navy-dark: var(--ak-public-accent-deep) !important;
    --sky: var(--ak-public-accent) !important;
    --mint: var(--ak-public-accent-soft) !important;
}

/* Primary customer actions: homepage, authentication, service checkout and
   payment flows. The longer selector deliberately wins over older page CSS. */
html[data-ak-public-theme] body.has-ak-public-header[data-page="home"]
    .ak-public-home-hero .ak-home-hero-cta,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-switch .auth-switch-btn.is-active,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-card .btn.primary,
html[data-ak-public-theme] body.has-ak-public-header
    main .service-form .btn.primary,
html[data-ak-public-theme] body.has-ak-public-header
    main .payment-handshake .btn.primary,
html[data-ak-public-theme] body.has-ak-public-header
    main .checkout-modal .btn.primary,
html[data-ak-public-theme] body.has-ak-public-header
    main button[type="submit"].btn.primary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: var(--ak-public-accent-strong) !important;
    background-image: linear-gradient(
        135deg,
        var(--ak-public-accent) 0%,
        var(--ak-public-accent-strong) 52%,
        var(--ak-public-accent-deep) 100%
    ) !important;
    box-shadow: var(--brand-control-shadow) !important;
}

html[data-ak-public-theme] body.has-ak-public-header[data-page="home"]
    .ak-public-home-hero .ak-home-hero-cta:hover,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-switch .auth-switch-btn.is-active:hover,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-card .btn.primary:hover,
html[data-ak-public-theme] body.has-ak-public-header
    main .service-form .btn.primary:hover,
html[data-ak-public-theme] body.has-ak-public-header
    main .payment-handshake .btn.primary:hover,
html[data-ak-public-theme] body.has-ak-public-header
    main .checkout-modal .btn.primary:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-image: linear-gradient(
        135deg,
        var(--ak-public-accent-strong) 0%,
        var(--ak-public-accent) 46%,
        var(--ak-public-accent-deep) 100%
    ) !important;
    box-shadow: 0 15px 30px rgba(var(--ak-public-accent-deep-rgb), 0.34) !important;
}

/* Secondary controls stay light, but their border, icon and text follow the
   selected public accent. */
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-switch .auth-switch-btn:not(.is-active),
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-card .btn.ghost,
html[data-ak-public-theme] body.has-ak-public-header
    main .service-form .btn.ghost,
html[data-ak-public-theme] body.has-ak-public-header
    main .service-form .btn.secondary,
html[data-ak-public-theme] body.has-ak-public-header
    main .payment-handshake .btn.ghost,
html[data-ak-public-theme] body.has-ak-public-header
    main .payment-handshake .btn.secondary,
html[data-ak-public-theme] body.has-ak-public-header
    main .check-plans-btn {
    border-color: rgba(var(--ak-public-accent-rgb), 0.34) !important;
    color: var(--ak-public-accent-deep) !important;
    -webkit-text-fill-color: var(--ak-public-accent-deep) !important;
    background: var(--brand-control-secondary) !important;
    box-shadow: var(--brand-control-shadow-soft) !important;
}

html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-forms .auth-switch {
    border-color: rgba(var(--ak-public-accent-rgb), 0.34) !important;
    box-shadow: 0 8px 22px rgba(var(--ak-public-accent-deep-rgb), 0.12),
        inset 0 0 0 1px rgba(var(--ak-public-accent-rgb), 0.08) !important;
}

html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-hero-copy .badge,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-stat-grid article strong,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-card .link-button,
html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-card .link-muted:hover,
html[data-ak-public-theme] body.has-ak-public-header[data-page="home"]
    .ak-home-hero-copy h1 strong {
    color: var(--ak-public-accent-strong) !important;
    -webkit-text-fill-color: var(--ak-public-accent-strong) !important;
}

html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .remember-toggle input[type="checkbox"]:checked {
    border-color: var(--ak-public-accent-strong) !important;
    background: var(--brand-control-primary) !important;
    box-shadow: 0 4px 12px rgba(var(--ak-public-accent-deep-rgb), 0.28) !important;
}

html[data-ak-public-theme] body.has-ak-public-header[data-page="auth"]:not([data-auth-context="reseller"])
    .auth-icon-button:not(.auth-icon-button--google) {
    border-color: rgba(var(--ak-public-accent-rgb), 0.34) !important;
    color: var(--ak-public-accent-deep) !important;
    background: var(--brand-control-secondary) !important;
    box-shadow: var(--brand-control-shadow-soft) !important;
}

html[data-ak-public-theme] body.has-ak-public-header :where(
    .ak-home-hero-cta,
    .auth-switch-btn,
    .auth-card .btn,
    .service-form .btn,
    .payment-handshake .btn,
    .check-plans-btn
):focus-visible {
    outline: 3px solid rgba(var(--ak-public-accent-rgb), 0.34) !important;
    outline-offset: 3px !important;
}

html[data-ak-public-theme] body.has-ak-public-header :where(
    .btn.primary,
    button[type="submit"].btn.primary
):disabled,
html[data-ak-public-theme] body.has-ak-public-header :where(
    .btn.primary,
    button[type="submit"].btn.primary
)[aria-disabled="true"] {
    filter: saturate(0.72) !important;
    opacity: 0.62 !important;
    cursor: not-allowed !important;
}