/* Subscriptions final visual polish: pastel plan surfaces, readable contrast, calmer CTAs. */
:root {
    --sub-polish-bg: #f8fcfd;
    --sub-polish-surface: #ffffff;
    --sub-polish-soft: #f2f8fa;
    --sub-polish-soft-2: #eaf5f9;
    --sub-polish-border: #d9e9ee;
    --sub-polish-text: #1f3440;
    --sub-polish-muted: #637782;
    --sub-polish-primary: #3b7892;
    --sub-polish-primary-dark: #2f657d;
    --sub-polish-accent-text: #2f657d;
    --sub-polish-focus: #2f657d;
    --sub-polish-success-bg: #edf8f1;
    --sub-polish-success-text: #326a4d;
    --sub-polish-warning-bg: #fbf4e5;
    --sub-polish-warning-text: #7a5b26;
    --sub-polish-warning-fill: #7a5b26;
    --sub-polish-danger-bg: #fbefef;
    --sub-polish-danger-text: #884647;
    --sub-polish-shadow: 0 12px 28px rgba(31, 52, 64, 0.08);
}

body:has(.subscription-plans-shell),
body:has(.subscription-role-theme),
body:has(.subscription-checkout-shell) {
    background: var(--sub-polish-bg);
    color: var(--sub-polish-text);
}

.subscription-plans-shell,
.subscription-role-theme,
.subscription-checkout-shell {
    color: var(--sub-polish-text);
    font-family: var(--bs-body-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.subscription-plans-shell h1,
.subscription-plans-shell h2,
.subscription-plans-shell h3,
.subscription-plans-shell h4,
.subscription-role-theme h1,
.subscription-role-theme h2,
.subscription-role-theme h3,
.subscription-role-theme h4,
.subscription-checkout-shell h1,
.subscription-checkout-shell h2,
.subscription-checkout-shell h3,
.subscription-checkout-shell h4,
.subscription-checkout-shell h5,
.subscription-checkout-shell h6,
.subscription-plans-shell .text-dark,
.subscription-role-theme .text-dark,
.subscription-checkout-shell .text-dark {
    color: var(--sub-polish-text) !important;
}

.subscription-plans-shell .text-muted,
.subscription-plans-shell .text-secondary,
.subscription-role-theme .text-muted,
.subscription-role-theme .text-secondary,
.subscription-checkout-shell .text-muted,
.subscription-checkout-shell .text-secondary,
.subscription-plan-caption,
.subscription-plan-price__unit,
.subscription-header-chip,
.subscription-hero-subtitle,
.plan-feature-list li {
    color: var(--sub-polish-muted) !important;
}

.subscription-plans-hero,
.subscription-plan-card,
.subscription-plans-empty,
.subscription-header-shell,
.subscription-hero,
.subscription-card,
.subscription-hero-note,
.subscription-checkout-shell .card,
#moka-checkout-modal .modal-content {
    background: var(--sub-polish-surface) !important;
    border: 1px solid var(--sub-polish-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--sub-polish-shadow) !important;
    color: var(--sub-polish-text) !important;
}

.subscription-plans-hero,
.subscription-header-shell,
.subscription-hero {
    background: var(--sub-polish-soft) !important;
}

.subscription-plan-card__glow {
    background: transparent !important;
}

.subscription-plan-card:hover,
.subscription-card:hover {
    transform: translateY(-2px) !important;
    border-color: #c4dde5 !important;
    box-shadow: 0 16px 34px rgba(31, 52, 64, 0.11) !important;
}

.subscription-plan-card--recommended,
.subscription-card.active-plan,
.subscription-plan-card--current,
.subscription-card.corporate-plan {
    background: var(--sub-polish-soft-2) !important;
    border-color: var(--sub-polish-primary) !important;
}

.subscription-plans-eyebrow,
.subscription-plans-chip,
.subscription-plans-chip--primary,
.subscription-header-chip,
.subscription-current-plan-badge,
.active-pill,
.subscription-plans-empty__icon,
.plan-badge,
.subscription-plan-state-btn,
.subscription-plan-state-btn--top {
    background: var(--sub-polish-soft-2) !important;
    border: 1px solid var(--sub-polish-border) !important;
    border-radius: 8px !important;
    color: var(--sub-polish-accent-text) !important;
}

.subscription-plan-ribbon span {
    background: var(--sub-polish-success-bg) !important;
    border: 1px solid #cce8d5 !important;
    border-radius: 8px !important;
    color: var(--sub-polish-success-text) !important;
    box-shadow: none !important;
}

.subscription-plan-name,
.subscription-plans-title,
.subscription-header-title,
.subscription-hero-title,
.subscription-price-main,
.subscription-plan-price__value {
    color: var(--sub-polish-text) !important;
}

.subscription-plan-price__value,
.subscription-price-main {
    font-size: 2.35rem;
}

.subscription-plan-feature,
.plan-feature-list li {
    color: var(--sub-polish-text) !important;
}

.subscription-plan-feature i,
.plan-feature-icon,
.subscription-plans-empty__icon i {
    color: var(--sub-polish-success-text) !important;
}

.subscription-plan-feature--empty i {
    color: var(--sub-polish-muted) !important;
}

.subscription-plans-primary-btn,
.subscription-plans-contact-btn,
.subscription-checkout-shell .btn-primary,
.subscription-role-theme .btn-plan,
.subscription-role-theme .btn-plan.btn-primary,
.subscription-role-theme .btn-plan.btn-outline-primary,
.subscription-role-theme .dp-btn--primary,
.subscription-role-theme .dp-btn--green {
    background: var(--sub-polish-primary) !important;
    border: 1px solid var(--sub-polish-primary) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(59, 120, 146, 0.2) !important;
}

.subscription-plans-primary-btn:hover,
.subscription-plans-contact-btn:hover,
.subscription-checkout-shell .btn-primary:hover,
.subscription-role-theme .btn-plan:hover,
.subscription-role-theme .btn-plan.btn-primary:hover,
.subscription-role-theme .btn-plan.btn-outline-primary:hover,
.subscription-role-theme .dp-btn--primary:hover,
.subscription-role-theme .dp-btn--green:hover {
    background: var(--sub-polish-primary-dark) !important;
    border-color: var(--sub-polish-primary-dark) !important;
    color: #ffffff !important;
}

.subscription-plans-secondary-btn,
.subscription-header-back-btn,
.subscription-checkout-shell .btn-outline-secondary,
.subscription-checkout-shell .btn-link,
.subscription-role-theme .dp-btn--ghost,
.subscription-role-theme .btn-outline-secondary,
.brick-pay-btn {
    background: var(--sub-polish-surface) !important;
    border: 1px solid var(--sub-polish-border) !important;
    border-radius: 8px !important;
    color: var(--sub-polish-accent-text) !important;
}

.subscription-plans-secondary-btn:hover,
.subscription-header-back-btn:hover,
.subscription-checkout-shell .btn-outline-secondary:hover,
.subscription-checkout-shell .btn-link:hover,
.subscription-role-theme .dp-btn--ghost:hover,
.subscription-role-theme .btn-outline-secondary:hover,
.brick-pay-btn:hover {
    background: var(--sub-polish-soft-2) !important;
    border-color: #c4dde5 !important;
    color: var(--sub-polish-accent-text) !important;
}

.subscription-checkout-shell .btn-warning {
    background: var(--sub-polish-warning-bg) !important;
    border-color: #ead7a6 !important;
    color: var(--sub-polish-warning-text) !important;
}

.subscription-checkout-shell .btn-warning:hover {
    background: var(--sub-polish-warning-fill) !important;
    border-color: var(--sub-polish-warning-fill) !important;
    color: #ffffff !important;
}

.cycle-toggle .btn {
    min-width: 140px;
    border-color: var(--sub-polish-border) !important;
    border-radius: 8px !important;
    color: var(--sub-polish-accent-text) !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cycle-toggle .btn-check:checked + .btn {
    background: var(--sub-polish-primary) !important;
    border-color: var(--sub-polish-primary) !important;
    color: #ffffff !important;
}

.cycle-toggle .badge {
    background: var(--sub-polish-success-bg) !important;
    border: 1px solid #cce8d5 !important;
    color: var(--sub-polish-success-text) !important;
    font-size: 0.7rem;
    font-weight: 700;
}

.subscription-plan-cycle-hint {
    margin-bottom: 0.5rem;
}

.subscription-plans-shell .badge.bg-primary,
.subscription-plans-shell .badge.bg-info,
.subscription-role-theme .badge.bg-primary,
.subscription-role-theme .badge.bg-info,
.subscription-checkout-shell .badge.bg-primary,
.subscription-checkout-shell .badge.bg-info,
.subscription-checkout-shell .bg-primary-subtle,
.subscription-checkout-shell .bg-info-subtle {
    background-color: var(--sub-polish-soft-2) !important;
    border: 1px solid var(--sub-polish-border) !important;
    color: var(--sub-polish-accent-text) !important;
}

.subscription-plans-shell .badge.bg-success,
.subscription-role-theme .badge.bg-success,
.subscription-checkout-shell .badge.bg-success,
.subscription-checkout-shell .bg-success-subtle {
    background-color: var(--sub-polish-success-bg) !important;
    border: 1px solid #cce8d5 !important;
    color: var(--sub-polish-success-text) !important;
}

.subscription-plans-shell .badge.bg-warning,
.subscription-role-theme .badge.bg-warning,
.subscription-checkout-shell .badge.bg-warning {
    background-color: var(--sub-polish-warning-bg) !important;
    border: 1px solid #ead7a6 !important;
    color: var(--sub-polish-warning-text) !important;
}

.subscription-plans-shell .badge.bg-danger,
.subscription-role-theme .badge.bg-danger,
.subscription-checkout-shell .badge.bg-danger {
    background-color: var(--sub-polish-danger-bg) !important;
    border: 1px solid #edcaca !important;
    color: var(--sub-polish-danger-text) !important;
}

.subscription-plans-shell .badge.bg-light,
.subscription-role-theme .badge.bg-light,
.subscription-checkout-shell .badge.bg-light,
.subscription-plans-shell .badge.bg-secondary,
.subscription-role-theme .badge.bg-secondary,
.subscription-checkout-shell .badge.bg-secondary {
    background-color: var(--sub-polish-soft) !important;
    border: 1px solid var(--sub-polish-border) !important;
    color: var(--sub-polish-muted) !important;
}

.subscription-checkout-shell .card.border-warning {
    border-left-color: #d6a94f !important;
}

.subscription-checkout-shell .form-control,
.subscription-checkout-shell .form-select,
.subscription-checkout-shell textarea {
    border-color: var(--sub-polish-border) !important;
    border-radius: 8px !important;
    color: var(--sub-polish-text) !important;
}

.subscription-checkout-shell .form-control:focus,
.subscription-checkout-shell .form-select:focus,
.subscription-checkout-shell textarea:focus,
.subscription-checkout-shell .form-check-input:focus {
    border-color: var(--sub-polish-primary) !important;
    box-shadow: 0 0 0 0.18rem rgba(59, 120, 146, 0.22) !important;
}

.subscription-checkout-shell .form-check-input:checked {
    background-color: var(--sub-polish-primary) !important;
    border-color: var(--sub-polish-primary) !important;
}

.subscription-checkout-shell .alert-info,
.subscription-role-theme .alert-info {
    background: var(--sub-polish-soft-2) !important;
    border-color: var(--sub-polish-border) !important;
    color: var(--sub-polish-accent-text) !important;
}

.subscription-checkout-shell .alert-warning,
.subscription-role-theme .alert-warning {
    background: var(--sub-polish-warning-bg) !important;
    border-color: #ead7a6 !important;
    color: var(--sub-polish-warning-text) !important;
}

.subscription-checkout-shell .alert-danger,
.subscription-role-theme .alert-danger {
    background: var(--sub-polish-danger-bg) !important;
    border-color: #edcaca !important;
    color: var(--sub-polish-danger-text) !important;
}

.subscription-checkout-shell .alert-success,
.subscription-role-theme .alert-success {
    background: var(--sub-polish-success-bg) !important;
    border-color: #cce8d5 !important;
    color: var(--sub-polish-success-text) !important;
}

.subscription-role-theme .dp-hero--amber {
    background: var(--sub-polish-soft-2) !important;
    border-bottom: 1px solid var(--sub-polish-border) !important;
    color: var(--sub-polish-text) !important;
}

.subscription-role-theme .dp-hero__title,
.subscription-role-theme .dp-hero__badge,
.subscription-role-theme .modal-title {
    color: var(--sub-polish-text) !important;
}

#moka-checkout-modal .modal-header,
#moka-checkout-modal .modal-footer {
    background: var(--sub-polish-soft) !important;
    border-color: var(--sub-polish-border) !important;
    color: var(--sub-polish-muted) !important;
}

#moka-checkout-modal .modal-body {
    background: var(--sub-polish-surface) !important;
}

@media (max-width: 767.98px) {
    .subscription-plans-hero,
    .subscription-header-shell,
    .subscription-hero,
    .subscription-card,
    .subscription-plan-card {
        border-radius: 8px !important;
    }

    .cycle-toggle {
        width: 100%;
    }

    .cycle-toggle .btn {
        min-width: 0;
    }
}

/* Resolved theme support stays local to subscription surfaces. */
html[data-theme="dark"] {
    --sub-polish-bg: #17242c;
    --sub-polish-surface: #20313b;
    --sub-polish-soft: #263943;
    --sub-polish-soft-2: #29434f;
    --sub-polish-border: #49636f;
    --sub-polish-text: #eef6f8;
    --sub-polish-muted: #b8c8cf;
    --sub-polish-accent-text: #9bd3e6;
    --sub-polish-focus: #9bd3e6;
    --sub-polish-success-bg: #223b31;
    --sub-polish-success-text: #a9ddbf;
    --sub-polish-warning-bg: #403622;
    --sub-polish-warning-text: #f0ce83;
    --sub-polish-warning-fill: #6b4f20;
    --sub-polish-danger-bg: #432d31;
    --sub-polish-danger-text: #ffb9b9;
    --sub-polish-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] :is(
    .subscription-plans-shell,
    .subscription-role-theme,
    .subscription-checkout-shell,
    .page-wrapper.page-content:has(.subscription-header-shell),
    #moka-checkout-modal
) :is(.form-control, .form-select, textarea) {
    background-color: var(--sub-polish-soft) !important;
    border-color: var(--sub-polish-border) !important;
    color: var(--sub-polish-text) !important;
}

html[data-theme="dark"] :is(
    .subscription-plans-shell,
    .subscription-role-theme,
    .subscription-checkout-shell,
    .page-wrapper.page-content:has(.subscription-header-shell),
    #moka-checkout-modal
) :is(.form-control, textarea)::placeholder {
    color: var(--sub-polish-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] :is(
    .subscription-plan-card--recommended,
    .subscription-card.active-plan,
    .subscription-plan-card--current,
    .subscription-card.corporate-plan
) {
    border-color: var(--sub-polish-accent-text) !important;
}

html[data-theme="dark"] :is(.subscription-plan-card:hover, .subscription-card:hover) {
    border-color: #63808d !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] :is(
    .subscription-plans-shell,
    .subscription-role-theme,
    .subscription-checkout-shell,
    .page-wrapper.page-content:has(.subscription-header-shell),
    #moka-checkout-modal
) .badge {
    border-color: var(--sub-polish-border) !important;
}

:is(
    .subscription-plans-shell,
    .subscription-role-theme,
    .subscription-checkout-shell,
    .page-wrapper.page-content:has(.subscription-header-shell),
    #moka-checkout-modal
) :is(
    a[href],
    button:not(:disabled),
    input:not([type="hidden"]):not(:disabled),
    select:not(:disabled),
    textarea:not(:disabled),
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid var(--sub-polish-focus) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .subscription-plans-shell,
        .subscription-role-theme,
        .subscription-checkout-shell,
        .page-wrapper.page-content:has(.subscription-header-shell),
        #moka-checkout-modal
    ) *,
    :is(
        .subscription-plans-shell,
        .subscription-role-theme,
        .subscription-checkout-shell,
        .page-wrapper.page-content:has(.subscription-header-shell),
        #moka-checkout-modal
    ) *::before,
    :is(
        .subscription-plans-shell,
        .subscription-role-theme,
        .subscription-checkout-shell,
        .page-wrapper.page-content:has(.subscription-header-shell),
        #moka-checkout-modal
    ) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    :is(.subscription-plan-card:hover, .subscription-card:hover) {
        transform: none !important;
    }
}

@media (forced-colors: active) {
    :is(
        .subscription-plans-shell,
        .subscription-role-theme,
        .subscription-checkout-shell,
        .page-wrapper.page-content:has(.subscription-header-shell),
        #moka-checkout-modal
    ) :is(.btn, button, .subscription-plan-card, .subscription-card) {
        box-shadow: none !important;
    }

    :is(
        .subscription-plans-shell,
        .subscription-role-theme,
        .subscription-checkout-shell,
        .page-wrapper.page-content:has(.subscription-header-shell),
        #moka-checkout-modal
    ) :is(
        a[href],
        button:not(:disabled),
        input:not([type="hidden"]):not(:disabled),
        select:not(:disabled),
        textarea:not(:disabled),
        [tabindex]:not([tabindex="-1"])
    ):focus-visible {
        outline-color: Highlight !important;
    }

    :is(
        .subscription-plan-card--recommended,
        .subscription-card.active-plan,
        .subscription-plan-card--current,
        .subscription-card.corporate-plan
    ) {
        border-color: Highlight !important;
    }
}