/* Single Article Page Styles - Auto Generated from Admin Settings */
/* Generated: 2026-02-09 13:37:27 */
/* DO NOT EDIT MANUALLY - Changes will be overwritten when settings are saved */

/* ========================================
   Body Background from Admin Settings
   ======================================== */
body.single-article-page {
    background: linear-gradient(-45deg, hsl(0, 60%, 17%), hsl(30, 55%, 18%), hsl(60, 50%, 17%), hsl(120, 45%, 16%), hsl(180, 50%, 17%), hsl(240, 55%, 18%), hsl(300, 50%, 17%), hsl(330, 55%, 16%), hsl(360, 60%, 17%));
    background-size: 400% 400%;
    animation: hslColorShift 20s ease infinite;
    min-height: 100vh;
}

/* Page Overlay */
body.single-article-page .page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    pointer-events: none;
    z-index: 0;
}

/* Animation Keyframes */
@keyframes hslColorShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ========================================
   Card Style: liquid-glass
   ======================================== */

/* Liquid Glass (Default) */
.card-style-liquid-glass .article-content,
.card-style-liquid-glass .sidebar-widget {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 28px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 60px -15px rgba(251, 183, 27, 0.2);
    position: relative;
    overflow: hidden;
}

.card-style-liquid-glass .article-content::before,
.card-style-liquid-glass .sidebar-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    border-radius: 28px 28px 0 0;
    pointer-events: none;
    z-index: 0;
}

/* Standard Card Style */
.card-style-standard .article-content,
.card-style-standard .sidebar-widget {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.card-style-standard .article-content::before,
.card-style-standard .sidebar-widget::before {
    display: none;
}

/* Neon Glow Effect */
.card-style-neon .article-content,
.card-style-neon .sidebar-widget {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid #fbb71b;
    border-radius: 16px;
    box-shadow:
        0 0 20px rgba(251, 183, 27, 0.2),
        0 0 40px rgba(251, 183, 27, 0.1),
        inset 0 0 20px rgba(251, 183, 27, 0.03);
}

.card-style-neon .article-content::before,
.card-style-neon .sidebar-widget::before {
    display: none;
}

/* Minimal Style */
.card-style-minimal .article-content,
.card-style-minimal .sidebar-widget {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: none;
}

.card-style-minimal .article-content::before,
.card-style-minimal .sidebar-widget::before {
    display: none;
}

/* Gradient Border Style */
.card-style-gradient-border .article-content,
.card-style-gradient-border .sidebar-widget {
    background: #fff;
    border: none;
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.card-style-gradient-border .article-content::before,
.card-style-gradient-border .sidebar-widget::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, #fbb71b, #ff6b35, #fbb71b);
    border-radius: 23px;
    z-index: -1;
}

/* ========================================
   Layout Settings: boxed
   ======================================== */

/* Layout - Full Width */
.layout-full-width .article-container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .layout-full-width .article-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Layout - Boxed */
.layout-boxed .article-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Layout - Wide */
.layout-wide .article-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   Padding Settings
   ======================================== */

/* Padding Top */
.padding-top-none .article-container { margin-top: 0; }
.padding-top-small .article-container { margin-top: -30px; }
.padding-top-normal .article-container { margin-top: -50px; }
.padding-top-large .article-container { margin-top: -70px; }
.padding-top-extra-large .article-container { margin-top: -100px; }

/* Padding Bottom */
.padding-bottom-none .article-container { padding-bottom: 0; }
.padding-bottom-small .article-container { padding-bottom: 1rem; }
.padding-bottom-normal .article-container { padding-bottom: 2rem; }
.padding-bottom-large .article-container { padding-bottom: 4rem; }
.padding-bottom-extra-large .article-container { padding-bottom: 6rem; }

/* ========================================
   Active Configuration Classes
   ======================================== */
body.single-article-page {
    /* Active classes applied via JS or PHP */
}

/* Current Active: card-style-liquid-glass, layout-boxed, padding-top-normal, padding-bottom-normal */