/* ==========================================================
SNF TOOLS CORE UI FRAMEWORK
-------------------------------------------------------------
Website      : tools.sarkarinaukrifront.com
File         : core-ui.css
Version      : 1.1
Last Updated : 30 June 2026

Purpose      : Shared UI framework for all SNF online tools.

Development Rules
-----------------
1. Only common UI components belong in this file.
2. Tool-specific CSS remains on the individual tool page.
3. One selector must exist in only one place.
4. Never duplicate selectors.
5. Promote CSS to this file only after it is verified as common.

========================================================== */

/* =========================
SHARED TOOL UI SYSTEM
========================= */

/* ==========================================================
SECTION 1
LAYOUT
========================================================== */

.snf-tool-wrapper{
max-width: 760px;
margin:40px auto;
padding:40px;
background:#fff;
border-radius:18px;
box-shadow:0 0 20px rgba(0,0,0,0.08);
text-align:center;
box-sizing:border-box;
overflow:hidden;
}

/* ==========================================================
SECTION 2
TOOL HEADER
========================================================== */

.snf-tool-title{
font-size:42px;
font-weight:700;
margin-bottom:30px;
}

/* ==========================================================
SECTION 3
TOP NAVIGATION
========================================================== */

.snf-tool-topbar{
margin-bottom:20px;
text-align:left;
}

.snf-home-btn{
display:inline-block;
padding:10px 18px;
background:#0b74af;
color:#fff;
text-decoration:none;
border-radius:8px;
font-weight:600;
font-size:15px;
transition:.3s;
}

.snf-home-btn:hover{
background:#085b89;
}

/* ==========================================================
SECTION 4
UPLOAD AREA
========================================================== */

.snf-upload-box{
border:2px dashed #0073aa;
padding:40px 20px;
border-radius:16px;
background:#f8fbff;
margin-bottom:30px;
}

.snf-upload-box p{
font-size:28px;
font-weight:700;
margin-bottom:10px;
}

.snf-upload-box small{
display:block;
margin-bottom:20px;
color:#666;
font-size:15px;
}

.snf-upload-btn{
background:#0073aa;
color:#fff;
border:none;
padding:14px 28px;
border-radius:10px;
font-size:16px;
font-weight:700;
cursor:pointer;
text-decoration:none;
display:inline-block;
box-sizing:border-box;
}

/* ==========================================================
SECTION 5
OPTION CARDS
========================================================== */

.snf-options{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:24px;
width:100%;
align-items:stretch;
}

.snf-options > p{
margin:0;
display:contents;
}

.snf-options br{
display:none;
}

.snf-options > p{
display:contents;
margin:0;
}

.snf-options br{
display:none;
}

.snf-option-card{
position:relative;
box-sizing:border-box;
width:100%;
min-width:0;
min-height:72px;
height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:14px 18px;
border:1px solid #d6dce5;
border-radius:10px;
background:#fff;
text-align:center;
font-weight:700;
font-size:16px;
line-height:1.3;
cursor:pointer;
overflow:hidden;
transition:border-color .2s ease,background-color .2s ease;
}

.snf-option-card:hover{
border-color:#0b74af;
background:#f4faff;
}

.snf-option-card.active{
border-color:#0b74af;
background:#eaf4fb;
}

.snf-option-card input[type="radio"]{
position:absolute;
opacity:0;
pointer-events:none;
}

.snf-option-card span{
display:block;
width:100%;
min-width:0;
text-align:center;
}

/* ==========================================================
SECTION 6
ACTION BUTTONS
========================================================== */

.snf-action-buttons{
display:flex;
justify-content:center;
gap:16px;
margin-top:24px;
flex-wrap:wrap;
}

.snf-action-buttons > p{
display:contents;
margin:0;
}

.snf-action-buttons br{
display:none;
}

.snf-convert-btn{
min-width:160px;
padding:14px 26px;
border:none;
border-radius:10px;
font-size:16px;
font-weight:700;
cursor:pointer;
background:#0073aa;
color:#fff;
box-sizing:border-box;
}

.snf-convert-btn:hover{
background:#085d8c;
}

.snf-clear-btn{
min-width:160px;
padding:14px 26px;
border:none;
border-radius:10px;
font-size:16px;
font-weight:700;
cursor:pointer;
background:#666;
color:#fff;
box-sizing:border-box;
}

.snf-clear-btn:hover{
background:#555;
}

/* ==========================================================
SECTION 7
RESPONSIVE LAYOUT
========================================================== */

@media(max-width:768px){

.snf-tool-wrapper{
padding:24px;
}

.snf-tool-title{
font-size:30px;
}

.snf-upload-box p{
font-size:22px;
}

.snf-action-buttons{
flex-direction:column;
}

.snf-convert-btn,
.snf-clear-btn{
width:100%;
}

}

@media(max-width:640px){

.snf-options{
--snf-option-columns:1;
}

}

@media(max-width:768px){

.wp-block-post-title{
margin-top:90px !important;
position:relative;
z-index:1;
}

}

/* ==========================================================
SECTION 8
CONTENT FRAMEWORK
========================================================== */


/* ==========================================================
8.1 TOOL INTRODUCTION
========================================================== */

.snf-tool-intro{

max-width:900px;
margin:0 auto 30px;
font-size:17px;
line-height:1.9;
color:#333;
text-align:justify;

}

.snf-tool-intro p{

margin-bottom:18px;

}

.snf-tool-intro strong{

color:#0d3b66;

}


/* ==========================================================
8.2 ACCORDION
========================================================== */

details{

margin:20px 0;
padding:15px 20px;
background:#ffffff;
border:1px solid #dbe4ee;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,.04);

}

details summary{

cursor:pointer;
font-size:clamp(17px,1.6vw,18px);
font-weight:600;
line-height:1.4;
color:#163a63;
list-style:none;

}

details summary::-webkit-details-marker{

display:none;

}

details summary::before{

content:"▶";
display:inline-block;
margin-right:10px;
transition:transform .25s ease;

}

details[open] summary::before{

transform:rotate(90deg);

}

details p,
details li{

font-size:16px;
line-height:1.8;
color:#444;

}

details ol,
details ul{

margin:16px 0;
padding-left:22px;

}

/* FAQ Headings */

/* FAQ Questions */

details h3{

font-size:17px;
font-weight:600;
line-height:1.5;
color:#163a63;
margin:18px 0 6px;

}

details h3 + p{

margin:0 0 18px;
font-size:16px;
line-height:1.8;

}

/* ==========================================================
8.3 RELATED TOOLS
========================================================== */

.snf-related-tools{

max-width:1100px;
margin:50px auto 20px;
padding-top:10px;

}

.snf-related-tools h2{

text-align:center;
font-size:32px;
margin-bottom:12px;
font-weight:700;

}

.snf-related-desc{

text-align:center;
max-width:750px;
margin:0 auto 35px;
font-size:17px;
line-height:1.8;
color:#555;

}

.snf-related-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:25px;
}

@media (max-width:991px){

.snf-related-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:767px){

.snf-related-grid{
    grid-template-columns:1fr;
}

}

.snf-related-card{

display:block;
padding:28px 24px;
background:#fff;
border:1px solid #e2e8f0;
border-radius:14px;
text-decoration:none;
transition:.3s;
box-shadow:0 3px 10px rgba(0,0,0,.05);

}

.snf-related-card:hover{

transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.10);
border-color:#1565c0;

}

.snf-related-icon{

font-size:46px;
text-align:center;
margin-bottom:18px;
line-height:1;

}

.snf-related-card h3{

font-size:22px;
margin-bottom:12px;
color:#0d3b66;
text-decoration:none;

}

.snf-related-card p{

font-size:15px;
line-height:1.8;
color:#555;
margin-bottom:18px;

}

.snf-related-card span{

font-weight:700;
color:#1565c0;

}

@media(max-width:768px){

.snf-related-tools h2{

font-size:28px;

}

.snf-related-card{

padding:22px;

}

}

/* ==========================================================
SECTION 9
IMAGE TOOLS UI FRAMEWORK
(Non-breaking Extension)
========================================================== */

/* ---------- Layout ---------- */

.snf-tool-page{
    max-width:1100px;
    margin:40px auto;
    padding:0 20px;
    box-sizing:border-box;
}

.snf-tool-card{
    background:#fff;
    border-radius:22px;
    padding:40px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    text-align:center;
}

/* ---------- Header ---------- */

.snf-tool-intro-text{
    font-size:18px;
    color:#666;
    line-height:1.7;
    margin:15px auto 35px;
    max-width:850px;
}

/* ---------- Upload ---------- */

.snf-upload-area{
    display:block;
    border:2px dashed #0073aa;
    border-radius:18px;
    padding:45px 20px;
    background:#f8fbff;
    cursor:pointer;
    transition:.3s;
}

.snf-upload-area:hover{
    background:#eef7ff;
}

/* ---------- Option Section ---------- */

.snf-options-section{
    margin-top:35px;
}

.snf-option-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
    margin-top:20px;
}

/* ---------- Primary Button ---------- */

.snf-primary-btn{
    margin-top:35px;
    background:#0073aa;
    color:#fff;
    border:none;
    padding:16px 38px;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.snf-primary-btn:hover{
    background:#005177;
}

/* ---------- Result ---------- */

#snf-result-area{
    margin-top:35px;
}

/* ---------- Information ---------- */

.snf-info-section{
    margin-top:55px;
}

.snf-feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.snf-feature-card{
    background:#fff;
    border-radius:16px;
    padding:24px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* ---------- Responsive ---------- */

@media(max-width:768px){

    .snf-tool-card{
        padding:25px;
    }

    .snf-option-grid{
        grid-template-columns:1fr;
    }

    .snf-primary-btn{
        width:100%;
    }

}

/*
Future Components

• Common Typography
• Tool Introduction
• Accordion
• Related Tools
• Status Messages
• Preview Components
• Common Input Controls
*/

/* ==========================================================
END OF CORE UI FRAMEWORK
========================================================== */