/**
 * CardPro — global site styles (loaded on all frontend pages)
 */
html.cardpro-glass,
html.cardpro-glass body,
html.cardpro-glass body.site {
    min-height: 100%;
    color: #f8fafc;
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(99, 102, 241, 0.28) 0%, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(236, 72, 153, 0.22) 0%, transparent 45%),
        linear-gradient(135deg, #0f172a 0%, #1e1b4b 48%, #312e81 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

html.cardpro-glass body::before,
html.cardpro-glass body.site::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.14) 0%, transparent 50%);
}

html.cardpro-glass body .site-grid,
html.cardpro-glass body main,
html.cardpro-glass body .container-header,
html.cardpro-glass body .container-banner,
html.cardpro-glass body .container-top-a,
html.cardpro-glass body .container-top-b,
html.cardpro-glass body .container-main,
html.cardpro-glass body .container-bottom-a,
html.cardpro-glass body .container-bottom-b,
html.cardpro-glass body .container-footer,
html.cardpro-glass body .content-area,
html.cardpro-glass body .component-area,
html.cardpro-glass body .site-grid > *,
html.cardpro-glass body .grid-child,
html.cardpro-glass body .blog-featured,
html.cardpro-glass body .items-leading,
html.cardpro-glass body .items-row,
html.cardpro-glass body #wrapper {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Site chrome only (Cassiopeia .header / .footer) — not CardPro <header>/<footer> blocks */
html.cardpro-glass body .header,
html.cardpro-glass body header.header {
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

html.cardpro-glass body .footer,
html.cardpro-glass body footer.footer {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(248, 250, 252, 0.85);
}

/* Reset CardPro internal headers/footers (page title, form actions, article meta) */
html.cardpro-glass body .cardpro-page-header,
html.cardpro-glass body .cardpro-form-actions,
html.cardpro-glass body .cardpro-article__header,
html.cardpro-glass body .cardpro-article__footer,
html.cardpro-glass body .cardpro-hero > header,
html.cardpro-glass body .cardpro-page header,
html.cardpro-glass body .cardpro-page footer,
html.cardpro-glass body .cardpro-search header,
html.cardpro-glass body .cardpro-search footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    color: inherit;
}

html.cardpro-glass body .cardpro-page-header {
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem;
}

html.cardpro-glass body .cardpro-form-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    padding: 1.25rem 0 0 !important;
    margin-top: 2rem;
}

html.cardpro-glass body h1,
html.cardpro-glass body h2,
html.cardpro-glass body h3,
html.cardpro-glass body h4,
html.cardpro-glass body .navbar-brand,
html.cardpro-glass body .mod-menu .nav-link,
html.cardpro-glass body .mod-menu a {
    color: #f8fafc;
}

html.cardpro-glass body .mod-menu .nav-link:hover,
html.cardpro-glass body a:hover {
    color: #c7d2fe;
}

html.cardpro-glass body .card:not(.cardpro-card),
html.cardpro-glass body .moduletable,
html.cardpro-glass body .blog-item,
html.cardpro-glass body .mod-custom,
html.cardpro-glass body .alert {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    color: #f8fafc;
}

/* Non-CardPro content pages keep a soft glass panel */
html.cardpro-glass body:not(.option-com_cardpro):not(.cardpro-active) .item-page,
html.cardpro-glass body:not(.option-com_cardpro):not(.cardpro-active) .com-content-article,
html.cardpro-glass body:not(.option-com_cardpro):not(.cardpro-active) fieldset {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    color: #f8fafc;
}

/* Form rows stay transparent — avoid nested dark boxes around every field */
html.cardpro-glass body .control-group {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
}

html.cardpro-glass body p,
html.cardpro-glass body li,
html.cardpro-glass body label,
html.cardpro-glass body .mod-menu__sub {
    color: rgba(248, 250, 252, 0.9);
}

html.cardpro-glass body input:not([type="checkbox"]):not([type="radio"]),
html.cardpro-glass body select,
html.cardpro-glass body textarea,
html.cardpro-glass body .form-control {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8fafc;
    border-radius: 12px;
    color-scheme: dark;
}

html.cardpro-glass body select option,
html.cardpro-glass body .form-select option,
html.cardpro-glass body .form-control option {
    background-color: #0f172a;
    color: #f8fafc;
}

html.cardpro-glass body select option:checked,
html.cardpro-glass body .form-select option:checked {
    background-color: #4f46e5;
    color: #ffffff;
}

html.cardpro-glass body input::placeholder,
html.cardpro-glass body textarea::placeholder {
    color: rgba(248, 250, 252, 0.45);
}

html.cardpro-glass body .btn-primary {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    border: none;
}

html.cardpro-glass body a {
    transition: color 0.2s ease;
}

/* Mobile burger menu */
.cardpro-burger {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10050;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.cardpro-burger span {
    display: block;
    width: 1.35rem;
    height: 2px;
    background: #f8fafc;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.cardpro-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.cardpro-burger.is-open span:nth-child(2) {
    opacity: 0;
}

.cardpro-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.cardpro-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cardpro-mobile-nav[hidden] {
    display: none !important;
}

.cardpro-mobile-nav__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(85vw, 320px);
    height: 100%;
    padding: 5rem 1.25rem 2rem;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
}

.cardpro-mobile-nav__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cardpro-mobile-nav__panel li {
    margin: 0 0 0.35rem;
}

.cardpro-mobile-nav__panel a,
.cardpro-mobile-nav__panel .nav-link,
.cardpro-mobile-nav__panel .mod-menu__item a {
    display: block;
    padding: 0.85rem 1rem;
    color: #f8fafc;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.05rem;
}

.cardpro-mobile-nav__panel a:hover,
.cardpro-mobile-nav__panel .nav-link:hover {
    background: rgba(99, 102, 241, 0.25);
    color: #fff;
}

body.cardpro-nav-open {
    overflow: hidden;
}

body.cardpro-modal-open header,
body.cardpro-modal-open .header,
body.cardpro-crop-open header,
body.cardpro-crop-open .header {
    z-index: 1 !important;
}

@media (max-width: 991.98px) {
    .cardpro-burger {
        display: inline-flex;
    }

    html.cardpro-glass body header .navbar-collapse,
    html.cardpro-glass body header .mod-menu.mod-list:not(.cardpro-mobile-nav__panel .mod-menu) {
        display: none !important;
    }

    html.cardpro-glass body .header .navbar-toggler {
        visibility: hidden;
        pointer-events: none;
    }
}

@media (min-width: 992px) {
    .cardpro-burger,
    .cardpro-mobile-nav {
        display: none !important;
    }
}

/* Pull first CardPro block closer to the site header */
html.cardpro-glass body main:has(.cardpro-page),
html.cardpro-glass body .component-area:has(.cardpro-page),
html.cardpro-glass body main:has(.cardpro-search--bare),
html.cardpro-glass body .component-area:has(.cardpro-search--bare) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

html.cardpro-glass body.option-com_cardpro main,
html.cardpro-glass body.cardpro-active main,
html.cardpro-glass body.option-com_cardpro .component-area,
html.cardpro-glass body.cardpro-active .component-area {
    padding-top: 0.35rem !important;
    margin-top: 0 !important;
}

html.cardpro-glass body.option-com_cardpro.view-search main,
html.cardpro-glass body.cardpro-search-active main,
html.cardpro-glass body.option-com_cardpro.view-search .component-area,
html.cardpro-glass body.cardpro-search-active .component-area {
    padding-top: 0 !important;
}

/*
 * CardPro pages — neutralize Cassiopeia / Joomla wrappers only.
 * Do NOT target our own panels (.cardpro-article__panel, .cardpro-hero__glass, cards).
 */
html.cardpro-glass body:has(.cardpro-page) .item-page,
html.cardpro-glass body:has(.cardpro-page) .com-content-article,
html.cardpro-glass body:has(.cardpro-page) .content-page,
html.cardpro-glass body:has(.cardpro-page) .container-component,
html.cardpro-glass body:has(.cardpro-page) .grid-child,
html.cardpro-glass body:has(.cardpro-page) .container-main,
html.cardpro-glass body:has(.cardpro-page) .content-area,
html.cardpro-glass body:has(.cardpro-page) .component-area,
html.cardpro-glass body:has(.cardpro-search) .item-page,
html.cardpro-glass body:has(.cardpro-search) .com-content-article,
html.cardpro-glass body:has(.cardpro-search) .content-page,
html.cardpro-glass body:has(.cardpro-search) .container-component,
html.cardpro-glass body:has(.cardpro-search) .grid-child,
html.cardpro-glass body:has(.cardpro-search) .container-main,
html.cardpro-glass body:has(.cardpro-search) .content-area,
html.cardpro-glass body:has(.cardpro-search) .component-area,
html.cardpro-glass body.option-com_cardpro .item-page,
html.cardpro-glass body.option-com_cardpro .com-content-article,
html.cardpro-glass body.option-com_cardpro .content-page,
html.cardpro-glass body.option-com_cardpro .container-component,
html.cardpro-glass body.option-com_cardpro .grid-child,
html.cardpro-glass body.option-com_cardpro .container-main,
html.cardpro-glass body.option-com_cardpro .content-area,
html.cardpro-glass body.option-com_cardpro .component-area,
html.cardpro-glass body.option-com_cardpro #content,
html.cardpro-glass body.option-com_cardpro .com-content,
html.cardpro-glass body.option-com_cardpro .blog,
html.cardpro-glass body.cardpro-active .item-page,
html.cardpro-glass body.cardpro-active .com-content-article,
html.cardpro-glass body.cardpro-active .content-page,
html.cardpro-glass body.cardpro-active .container-component,
html.cardpro-glass body.cardpro-active .grid-child,
html.cardpro-glass body.cardpro-active .container-main,
html.cardpro-glass body.cardpro-active .content-area,
html.cardpro-glass body.cardpro-active .component-area,
html.cardpro-glass body.cardpro-active #content,
html.cardpro-glass body.cardpro-active .com-content,
html.cardpro-glass body.cardpro-active .blog,
html.cardpro-glass body.cardpro-search-active .item-page,
html.cardpro-glass body.cardpro-search-active .com-content-article,
html.cardpro-glass body.cardpro-search-active .content-page,
html.cardpro-glass body.cardpro-search-active .container-component,
html.cardpro-glass body.cardpro-search-active .grid-child,
html.cardpro-glass body.cardpro-search-active .container-main,
html.cardpro-glass body.cardpro-search-active .content-area,
html.cardpro-glass body.cardpro-search-active .component-area,
html.cardpro-glass body.cardpro-search-active #content,
html.cardpro-glass body.cardpro-search-active .com-content,
html.cardpro-glass body.cardpro-search-active .blog {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Protect CardPro glass panels — keep dashboard-style rounded glass frame */
html.cardpro-glass body .cardpro-hero__glass,
html.cardpro-glass body .cardpro-glass-panel {
    border-radius: var(--cp-radius, 22px) !important;
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(99, 102, 241, 0.08) 100%
    ) !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Search hero: inner breathing room inside the glass frame */
html.cardpro-glass body .cardpro-search--bare .cardpro-hero__glass {
    padding: clamp(1.35rem, 2.5vw, 1.85rem) clamp(1.25rem, 3vw, 2rem) !important;
}

html.cardpro-glass body .cardpro-search--bare.cardpro-search--compact .cardpro-hero__glass {
    padding: 1rem 1.35rem !important;
}

html.cardpro-glass body .cardpro-color-shop__item {
    border-radius: var(--cp-radius-sm, 14px) !important;
}

/* Nested form chrome inside CardPro stays airy (field rows only) */
html.cardpro-glass body .cardpro-page .control-group,
html.cardpro-glass body .cardpro-search .control-group,
html.cardpro-glass body.option-com_cardpro .control-group,
html.cardpro-glass body .cardpro-page fieldset.basic,
html.cardpro-glass body .cardpro-page fieldset.options-form,
html.cardpro-glass body.option-com_cardpro form fieldset {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.cardpro-glass body .cardpro-page .alert,
html.cardpro-glass body .cardpro-search .alert {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
}
