/* CREZOVA site, sign-in and customer surfaces. Legacy brand utility tokens live in theme.css. */
:root {
    --cz-site-gutter: 20px;
    --cz-gradient: linear-gradient(180deg, #A26EF7 0%, #763CD4 100%);
    --cz-gradient-border: linear-gradient(110deg, #FD7F57, var(--cz-accent), var(--cz-primary));
}

/* Shared page edges follow the existing header breakpoints. */
@media (min-width: 768px) { :root { --cz-site-gutter: 40px; } }
@media (min-width: 1024px) { :root { --cz-site-gutter: 80px; } }
@media (min-width: 1680px) { :root { --cz-site-gutter: 160px; } }
@media (min-width: 1920px) { :root { --cz-site-gutter: 310px; } }
#top-menu,
.crezova-footer > footer > div { padding-inline: var(--cz-site-gutter); }

/* Keep logo variants readable against both header themes, including CMS inline colors. */
#top-menu {
    background: rgba(255, 255, 255, .97) !important;
    color: var(--cz-navy) !important;
    border-bottom-color: #E8E1ED;
}
#top-menu #menu a { color: var(--cz-navy) !important; }
#top-menu #menu a:hover { color: var(--cz-primary) !important; }
#top-menu #icon path { stroke: var(--cz-navy); }
#top-menu #cross_icon path { fill: var(--cz-navy); }
.dark #top-menu {
    background: rgba(20, 20, 20, .97) !important;
    color: #FAF9FC !important;
    border-bottom-color: #3C3347;
}
.dark #top-menu #menu a { color: #FAF9FC !important; }
.dark #top-menu #menu a:hover { color: #D0B2FC !important; }
.dark #top-menu #icon path { stroke: #FAF9FC; }
.dark #top-menu #cross_icon path { fill: #FAF9FC; }

/* Match the reference black hero and violet/pink light while preserving editorial images. */
.bg-top {
    background: radial-gradient(ellipse at 0 12%, rgba(226, 40, 97, .38) 0, transparent 43%),
        radial-gradient(ellipse at 100% 100%, rgba(118, 60, 212, .56), transparent 50%), #050305 !important;
}
.bg-top > img.absolute { visibility: hidden; }
.bg-top > .content { background-color: transparent !important; }
.bg-top > .content > :is(p,h1) { color: #FAF9FC !important; }
.bg-top .heading-3 {
    background-image: linear-gradient(90deg, #FD7F57 -17.86%, #E22861 25.88%, #763CD4 107.47%) !important;
}
.bg-top a[href$="/registration"] {
    background: #FFFFFF !important;
    color: var(--cz-navy) !important;
}
.bg-top a[href$="/registration"]:hover { background: #F3ECFC !important; }
.heading-1, .heading-2, .heading-3, .text-gradient-1 {
    background-image: linear-gradient(90deg, #FD7F57 -17.86%, #E22861 25.88%, #763CD4 107.47%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark .heading-1, .dark .heading-2, .dark .heading-3, .dark .text-gradient-1 {
    background-image: linear-gradient(90deg, #FD7F57 -17.86%, #E22861 25.88%, #763CD4 107.47%) !important;
}
.background-gradient-one, .background-gradient-two, .magic-bg, .subscription-button,
.nav-parent.active, .subscription-plan-tab .nav-tabs .nav-link.active,
.peer:checked ~ .peer-checked\:background-gradient-one {
    background-image: var(--cz-gradient) !important;
    color: #FFF !important;
}
.magic-shadow { box-shadow: 0 12px 35px -10px rgba(118, 60, 212, .28); }
.sign-in-button, .sign-in-button-light-mode {
    background: var(--cz-primary) !important;
    border-color: var(--cz-primary) !important;
    color: #FFF !important;
}
.sign-in-button:hover, .sign-in-button-light-mode:hover {
    background: var(--cz-primary-hover) !important;
    border-color: var(--cz-primary-hover) !important;
}
.learn-more-button, .dark .learn-more-button {
    background: var(--cz-navy) !important;
    border-color: var(--cz-primary) !important;
    color: #FFF !important;
}
.free-button, .card-border, .border-design-3-active {
    background-image: linear-gradient(#FFF, #FFF), var(--cz-gradient-border) !important;
    box-shadow: 0 18px 44px -22px rgba(118, 60, 212, .24);
}
.dark .free-button, .dark .card-border, .dark .border-design-3-active {
    background-image: linear-gradient(var(--cz-navy), var(--cz-navy)),
        var(--cz-gradient-border) !important;
}
.border-design-1 { border-image: var(--cz-gradient-border) 1; }
.border-design-2:hover, .border-design-3:hover {
    background-image: linear-gradient(#FFF, #FFF), var(--cz-gradient-border) !important;
}
.dark .border-design-2:hover, .dark .border-design-3:hover, .dark .border-dark:hover {
    background-image: linear-gradient(var(--cz-navy), var(--cz-navy)),
        var(--cz-gradient-border) !important;
}
.get-started-for-free {
    background: linear-gradient(180deg, #FAF7FF 5%, #E6D5F9 54%, #B38AE8 107%) !important;
}
.dark .get-started-for-free {
    background: linear-gradient(180deg, #141414 5%, #2E2043 60%, #763CD4 107%) !important;
}
.bg-small-package {
    background-image: linear-gradient(145deg, rgba(226, 40, 97, .12), transparent 70%) !important;
}

/* Auth cards and their primary actions share the same palette as the public site. */
.log-bg, .login-bg, .section-bg {
    background-color: #F8F5FC !important;
    background-image: radial-gradient(ellipse at 12% 12%, rgba(226, 40, 97, .16), transparent 60%) !important;
}
.dark .log-bg, .dark .login-bg, .dark .section-bg {
    background-color: #17131E !important;
    background-image: radial-gradient(ellipse at 12% 12%, rgba(226, 40, 97, .12), transparent 60%) !important;
}
.pricing-section-bg, .page-section-bg {
    background-color: var(--cz-navy) !important;
    background-image: radial-gradient(ellipse at 80% 0, rgba(226, 40, 97, .16), transparent 65%) !important;
}
.dark .login-bg > .relative.bg-white { background-color: #272030 !important; }
.loginForm > button, .signupForm > button, #password-validate-submit > .signup-btn {
    background: var(--cz-primary) !important;
    border-color: var(--cz-primary) !important;
    color: #FFF !important;
}
.loginForm > button:hover, .signupForm > button:hover,
#password-validate-submit > .signup-btn:hover { background: var(--cz-primary-hover) !important; }
.login-bg a.underline { color: var(--cz-primary); }
.dark .login-bg a.underline { color: #D0B2FC; }

/* Keep native violet, pink and warm vector accents distinct. */
svg stop[stop-color="#E60C84"], svg stop[stop-color="#e60c84"],
.sidebar-top stop[stop-color="#E60C84"] { stop-color: #E60C84 !important; }
svg stop[stop-color="#763CD4"], svg stop[stop-color="#763cd4"] { stop-color: var(--cz-primary) !important; }
svg stop[stop-color="#FFCF4B"], svg stop[stop-color="#ffcf4b"],
.sidebar-top stop[stop-color="#FFCF4B"] { stop-color: #FFCF4B !important; }
svg [fill="#E22861"], svg [fill="#e22861"] { fill: var(--cz-accent); }
svg [fill="#763CD4"], svg [fill="#763cd4"] { fill: var(--cz-primary); }
.dark svg [fill="#E22861"], .dark svg [fill="#e22861"] { fill: var(--cz-accent); }

/* Customer navigation and plan accents keep active states visible in either theme. */
.sidebar-nav .nav-parent.active,
.sidebar-nav .sidebar-accordion .accordion-button:not(.collapsed) {
    color: var(--cz-primary) !important;
    background: var(--cz-soft) !important;
}
.dark .sidebar-nav .nav-parent.active,
.dark .sidebar-nav .sidebar-accordion .accordion-button:not(.collapsed) {
    color: #D0B2FC !important;
    background: #352644 !important;
}
.sidebar-nav .new-badge {
    background: var(--cz-soft) !important;
    border-color: #D5BCEF !important;
    color: #6228BB !important;
}
.dark .sidebar-nav .new-badge {
    background: #352644 !important;
    border-color: #705386 !important;
    color: #E1C5FC !important;
}
.sidebar-nav .main-menu:hover { background-color: var(--cz-soft) !important; }
.dark .sidebar-nav .main-menu:hover { background-color: #352644 !important; }
.progress-fill { background: var(--cz-gradient) !important; }

/* CMS actions may use relative links; all primary actions retain readable text. */
#top-menu #menu a.sign-in-button,
#top-menu #menu a.sign-in-button:hover,
.dark #top-menu #menu a.sign-in-button,
.dark #top-menu #menu a.sign-in-button:hover { color: #fff !important; }
.bg-top a[href$="registration"] {
    background: #FFFFFF !important;
    color: var(--cz-navy) !important;
}
.bg-top a[href$="registration"]:hover { background: #F3ECFC !important; }
.plan-loader, .plan-loader:active,
#subscriptionEmailForm button, .subscriptionEmailForm button {
    background: var(--cz-primary) !important;
    border-color: var(--cz-primary) !important;
    color: #fff !important;
}
.plan-loader:hover, #subscriptionEmailForm button:hover,
.subscriptionEmailForm button:hover { background: var(--cz-primary-hover) !important; }
.crezova-footer, .crezova-footer footer > div {
    background: var(--cz-primary) !important;
    color: #FFF !important;
}
.crezova-footer a:hover { color: #FFFFFF !important; text-decoration: underline; }
.crezova-footer img[src$="/logo.svg"] { display: none; }
.crezova-footer img[src$="/logo-on-dark.svg"] { display: block; }
/* Translated CMS headings retain their original inline markup. */
span[style*="color:#E22861" i], span[style*="color: #E22861" i] {
    color: var(--cz-accent) !important;
}
.dark span[style*="color:#E22861" i], .dark span[style*="color: #E22861" i] {
    color: var(--cz-accent) !important;
}

/* Primary controls retain a solid AA-contrast violet; native gradients decorate panels. */
.subscription-button, .nav-parent.active, .subscription-plan-tab .nav-tabs .nav-link.active,
.peer:checked ~ .peer-checked\:background-gradient-one {
    background: var(--cz-primary) !important;
    color: #FFF !important;
}

/* Keep native magenta accents; darken only the gallery action for small white text. */
.cz-landing .cz-home-art a.bg-color-E6 {
    background-color: #C31578 !important;
    color: #FFFFFF !important;
}
.cz-landing .cz-home-art a.bg-color-E6:hover {
    background-color: #A90E65 !important;
}