/* =========================================================
   KRUZIFIX UI v0.26 — PROFILE IDENTITY / GLOBAL FOOTER
   ========================================================= */

/* ---------- GLOBAL FOOTER ---------- */

/*
   account_bar.php loads this stylesheet for both logged-in and logged-out
   pages, so legacy per-page footer markup is normalized everywhere.
*/
.footer {
    font-size: 0 !important;
    line-height: 0 !important;
    color: #555 !important;
}

.footer::after {
    content: "KRUZIFIX 2026";
    display: inline-block;
    font-family: "Times New Roman", Times, serif;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #555;
}

/* ---------- PROFILE BACKGROUND SETTINGS ---------- */

.profile-background-setting {
    position: relative;
}

.profile-background-preview {
    position: relative;
    grid-column: 1 / -1;
    min-height: 145px;
    overflow: hidden;
    border: 1px solid #333;
    background: #020202;
}

.profile-background-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .10) 0%,
            rgba(0, 0, 0, .04) 24%,
            var(--preview-fade) 82%,
            #010101 100%
        ),
        var(--preview-bg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .78;
}

.profile-background-preview > span {
    position: absolute;
    left: 8px;
    bottom: 7px;
    z-index: 2;
    padding: 3px 5px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.72);
    color: #bbb;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}

.profile-background-remove {
    grid-column: 1 / -1;
}

/* ---------- PUBLIC MEMBER PROFILE CANVAS ---------- */

.public-profile-canvas {
    position: relative;
    isolation: isolate;
    min-height: 420px;
    margin: -2px -2px 0;
    padding: 12px 12px 4px;
}

.public-profile-canvas::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    right: 0;
    height: 430px;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.04) 24%,
            var(--profile-fade, #111111) 74%,
            #010101 100%
        );
}

.public-profile-canvas.has-profile-background::before {
    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.16) 0%,
            rgba(0,0,0,.04) 24%,
            color-mix(
                in srgb,
                var(--profile-fade, #111111) 88%,
                transparent
            ) 72%,
            #010101 100%
        ),
        var(--profile-bg-image);
    background-position:
        center top,
        center top;
    background-size:
        100% 100%,
        cover;
    background-repeat:
        no-repeat,
        no-repeat;
    opacity: .82;
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .public-profile-canvas.has-profile-background::before {
        background-image:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.15) 0%,
                rgba(0,0,0,.05) 25%,
                var(--profile-fade, #111111) 75%,
                #010101 100%
            ),
            var(--profile-bg-image);
    }
}

.public-profile-canvas > h1 {
    position: relative;
    margin: 0 0 10px !important;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-left: 3px solid #5d1a1a;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(1px);
}

.public-profile-canvas .profile-header {
    position: relative;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(1px);
}

/* ---------- PUBLIC PROFILE NAV / DASHBOARD ---------- */

.public-profile-quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 7px;
    padding: 5px 6px;
    border: 1px solid #292929;
    border-left: 3px solid #5a1c1c;
    background: rgba(0,0,0,.86);
}

.public-profile-quick-nav a {
    padding: 3px 6px;
    border: 1px solid #252525;
    background: #020202;
    color: #777 !important;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;
    text-decoration: none !important;
}

.public-profile-quick-nav a:hover {
    border-color: #662020;
    color: #ccc !important;
}

.public-profile-dashboard {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(90px, 1fr)
        );
    gap: 4px;
    margin: 0 0 7px;
}

.public-profile-dashboard > span {
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid #242424;
    background: rgba(0,0,0,.82);
    color: #999;
    font-size: 9px;
    line-height: 1.25;
}

.public-profile-dashboard strong {
    display: block;
    margin-bottom: 1px;
    color: #4f4f4f;
    font-size: 7px;
    letter-spacing: .65px;
}

/* ---------- PUBLIC PROFILE ACCORDIONS ---------- */

.public-profile-panel {
    margin: 0 0 6px;
    border: 1px solid #292929;
    border-left: 3px solid #373737;
    background: rgba(0,0,0,.90);
}

.public-profile-panel[open] {
    border-left-color: #662020;
}

.public-profile-panel > summary,
.public-profile-page-item > summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 29px 6px 8px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.public-profile-panel > summary::-webkit-details-marker,
.public-profile-page-item > summary::-webkit-details-marker {
    display: none;
}

.public-profile-panel > summary::after,
.public-profile-page-item > summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    color: #702020;
    font-size: 14px;
    font-weight: 900;
}

.public-profile-panel[open] > summary::after,
.public-profile-page-item[open] > summary::after {
    content: "−";
    color: #b63c3c;
}

.public-profile-panel > summary:hover,
.public-profile-page-item > summary:hover {
    background-color: #050505;
}

.public-profile-panel > summary > span,
.public-profile-page-item > summary > span {
    min-width: 0;
    color: #aaa;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .7px;
    overflow-wrap: anywhere;
}

.public-profile-panel > summary > small,
.public-profile-page-item > summary > small {
    color: #505050;
    font-size: 8px;
    text-align: right;
    line-height: 1.2;
}

.public-profile-panel-body {
    padding: 7px;
    border-top: 1px solid #242424;
}

.public-profile-inner-section {
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 0 !important;
    background: rgba(0,0,0,.46) !important;
}

.public-profile-inner-section > h2 {
    margin: 0 0 6px !important;
    font-size: 11px !important;
}

/* ---------- NESTED PROFILE PAGES ---------- */

.profile-public-pages.public-profile-inner-section {
    display: grid;
    gap: 5px;
}

.public-profile-page-item {
    margin: 0;
    border: 1px solid #252525;
    background: #010101;
}

.public-profile-page-item[open] {
    border-color: #343434;
}

.public-profile-page-item-body {
    padding: 7px;
    border-top: 1px dotted #282828;
}

.public-profile-page-item .profile-public-page-body {
    margin-bottom: 7px;
    padding: 7px 8px;
    border: 1px solid #222;
    background: #000;
    font-size: 11px;
    line-height: 1.48;
}

.public-profile-page-item .profile-page-media-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(145px, 1fr)
        );
    gap: 6px;
}

.public-profile-page-item .profile-page-media-public img,
.public-profile-page-item .profile-page-media-public video {
    max-height: 320px;
}

/* ---------- PUBLIC PROFILE ACTIONS ---------- */

.public-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.public-profile-actions a {
    padding: 5px 7px;
    border: 1px solid #303030;
    background: #020202;
    color: #888 !important;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .55px;
    text-decoration: none !important;
}

.public-profile-actions a:hover {
    border-color: #672020;
    color: #ccc !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 700px) {
    .public-profile-canvas {
        padding-left: 7px;
        padding-right: 7px;
    }

    .public-profile-panel > summary,
    .public-profile-page-item > summary {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .public-profile-panel > summary > small,
    .public-profile-page-item > summary > small {
        text-align: left;
    }
}