/*
=========================================
PICSOB - Main Styles
=========================================
*/

:root{

    --bg:#090b12;
    --bg-2:#111722;
    --text:#ffffff;
    --text-muted:#9aa4b2;
    --border:#1d2430;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;

}

a{

    color:inherit;
    text-decoration:none;

}

img{

    display:block;
    width:100%;
    height:auto;

}

.picsob-container{

    width:100%;
    margin:0 auto;

}

/* ==========================
Header
========================== */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:64px;

    background:rgba(9,11,18,.88);

    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--border);

    z-index:9999;

    transform:translateY(0);

    transition:.3s;

}

.site-header.hide{

    transform:translateY(-100%);

}

.header-inner{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

}

.logo-text{

    font-size:24px;

    font-weight:700;

    letter-spacing:2px;

}

.header-actions{

    display:flex;

    gap:12px;

}

.search-toggle,
.menu-toggle{

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

/* ==========================
Search Overlay
========================== */

.search-overlay{

    position:fixed;

    inset:0;

    background:rgba(9,11,18,.98);

    display:none;

    z-index:10000;

}

.search-overlay.active{

    display:block;

}

.search-box{

    width:min(900px,92%);

    margin:40px auto;

}

.search-box input{

    width:100%;

    height:60px;

    background:#111722;

    border:1px solid var(--border);

    color:#fff;

    padding:0 20px;

    font-size:20px;

    outline:none;

}

/* Mobile Menu styles moved to header.css (Premium Fullscreen Menu) */

/* ==========================
Single
========================== */

.picsob-single{

    max-width:1200px;

    margin:90px auto;

    padding:20px;

}

.image-title{

    font-size:34px;

    margin:24px 0 12px;

}

.image-description{

    line-height:1.8;

}

/* ==========================
Footer
========================== */

.site-footer{

    border-top:1px solid var(--border);

    margin-top:80px;

    padding:30px 20px;

    text-align:center;

    color:var(--text-muted);

}

/* ==========================
Loading
========================== */

.picsob-loader{

    text-align:center;

    padding:40px 0;

    color:var(--text-muted);

}

/* ==========================
Empty
========================== */

.picsob-empty{

    text-align:center;

    padding:120px 20px;

}

.picsob-empty h2{

    margin-bottom:10px;

}

/* ==========================
Ad System
========================== */

.picsob-ad,
.picsob-ad-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto;

}

.picsob-ad-placeholder{

    width:100%;

    background:rgba(255,255,255,.03);

    border:1px dashed rgba(255,255,255,.18);

    border-radius:4px;

    color:var(--text-muted);

    font-size:12px;

    line-height:1.5;

    text-align:center;

    letter-spacing:.5px;

}

.picsob-ad img{

    display:block;

    max-width:100%;

    height:auto;

}

@media(max-width:768px){

.image-title{

font-size:26px;

}

.header-inner{

padding:0 15px;

}

}

/*
=========================================
404 Page
=========================================
*/

.picsob-404{

	min-height:100vh;

	display:flex;

	align-items:center;

	justify-content:center;

	text-align:center;

	padding:40px 20px;

}

.picsob-404-inner{

	max-width:700px;

}

.error-code{

	font-size:140px;

	font-weight:700;

	line-height:1;

	margin-bottom:20px;

}

.error-title{

	font-size:34px;

	margin-bottom:20px;

}

.error-text{

	color:var(--text-muted);

	font-size:18px;

	line-height:1.8;

	margin-bottom:40px;

}

.error-button{

	display:inline-block;

	padding:16px 34px;

	background:#1d2430;

	color:#fff;

	font-weight:600;

	transition:.25s;

}

.error-button:hover{

	background:#2a3445;

}


/* ==========================
Accessibility Utility
========================== */

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}