/* =====================================================
   PDFNano - Excel to PDF Converter styles
   v2 (aligned with optimized PHP v2)
   ===================================================== */

:root{
    --primary:#4f46e5;
    --primary-hover:#4338ca;
    --secondary:#f3f4f6;
    --secondary-hover:#e5e7eb;
    --text:#111827;
    --text-light:#6b7280;
    --border:#e5e7eb;
    --bg-light:#f9fafb;
    --error:#ef4444;
    --success:#10b981;
    --success-hover:#0c8a67;
    --warning:#f59e0b;
    --card-shadow:0 4px 6px rgba(0,0,0,0.05);
    --page-shadow:0 2px 4px rgba(0,0,0,0.1);
}

*{box-sizing:border-box;margin:0;padding:0}

/* ---------- Page shell ---------- */
.containert{
    max-width:1100px;
    margin:30px auto 40px;
    background:white;
    border-radius:16px;
    box-shadow:var(--card-shadow);
    overflow:hidden;
}
.header-t{
    padding:40px 20px;
    border-bottom:1px solid var(--border);
    text-align:center;
    background-color:transparent;
}
.header-t h1{
    font-size:42px;
    margin-bottom:16px;
    font-weight:700;
    line-height:1.4;
    font-family:"Noto Sans",sans-serif;
    color:var(--primary);
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}
.header-t p{
    opacity:.9;
    font-size:18px;
    font-family:"Work Sans",sans-serif;
    color:var(--text-light);
    max-width:700px;
    margin:0 auto;
    line-height:1.6;
}

/* ---------- Tool card ---------- */
.main-content{padding:30px}
.excel-tool-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    background:white;
    border-radius:16px;
    border:1px solid var(--border);
    padding:24px;
}
@media(max-width:900px){
    .excel-tool-card{grid-template-columns:1fr}
}

/* ---------- Upload area ---------- */
.upload-area{
    background:var(--bg-light);
    border:2px dashed var(--border);
    border-radius:12px;
    padding:60px 40px;
    text-align:center;
    cursor:pointer;
    transition:all .3s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:380px;
}
.upload-area:hover{
    border-color:var(--primary);
    background-color:rgba(79,70,229,0.03);
}
.upload-area.drag-over{
    border-color:var(--primary);
    background-color:rgba(79,70,229,0.08);
    transform:scale(1.01);
}
.upload-icon{
    font-size:64px;
    color:var(--success);
    margin-bottom:20px;
    opacity:.9;
}
.upload-area h2{
    font-size:22px;
    color:var(--text);
    margin-bottom:8px;
    font-weight:600;
}
.upload-area p{
    font-size:15px;
    color:var(--text-light);
    margin-bottom:16px;
    line-height:1.5;
}
.formats-hint{
    font-size:13px;
    color:var(--text-light);
    margin-top:16px;
    margin-bottom:0 !important;
}

/* ---------- Settings area ---------- */
.settings-area{
    padding:8px 0;
}
.settings-area h2{
    font-size:20px;
    color:var(--text);
    margin-bottom:20px;
    font-weight:700;
}

/* ---------- Format grid ---------- */
.format-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:10px;
    margin-bottom:20px;
}
.format-radio{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:white;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all .2s ease;
    color:var(--text);
}
.format-radio:hover{
    border-color:var(--primary);
    background:rgba(79,70,229,0.04);
}
.format-radio input[type="radio"]{
    margin:0;
    cursor:pointer;
}
.format-radio input[type="radio"]:checked + span{
    color:var(--primary);
    font-weight:600;
}

/* ---------- Option groups ---------- */
.option-group{
    margin-bottom:20px;
    padding:16px;
    background:var(--bg-light);
    border-radius:12px;
    border:1px solid var(--border);
}
.option-group.hidden{display:none}
.option-label{
    display:block;
    font-weight:600;
    color:var(--text);
    font-size:15px;
    margin-bottom:12px;
}
.sub-label{
    display:block;
    font-size:13px;
    font-weight:500;
    color:var(--text-light);
    margin-bottom:6px;
}
.option-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
@media(max-width:600px){
    .option-row{grid-template-columns:1fr}
}

/* ---------- Form controls ---------- */
.form-control{
    width:100%;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:15px;
    color:var(--text);
    background:white;
    transition:all .2s ease;
    font-family:inherit;
}
.form-control:focus{
    outline:0;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(79,70,229,0.1);
}
.form-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--text);
    margin-bottom:10px;
    cursor:pointer;
}
.form-check input[type="checkbox"]{
    margin:0;
    cursor:pointer;
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 24px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:all .3s ease;
    border:0;
    outline:0;
    font-size:15px;
    gap:8px;
    text-decoration:none;
    font-family:inherit;
}
.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none!important;
    box-shadow:none!important;
}
.btn-primary{
    background:var(--primary);
    color:white;
    box-shadow:0 4px 14px rgba(79,70,229,0.25);
}
.btn-primary:hover:not(:disabled){
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(79,70,229,0.35);
}
.btn-success{
    background:var(--success);
    color:white;
    box-shadow:0 4px 14px rgba(16,185,129,0.25);
    width:100%;
    margin-top:8px;
    padding:14px;
    font-size:16px;
}
.btn-success:hover:not(:disabled){
    background:var(--success-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(16,185,129,0.35);
}
.btn-secondary{
    background:var(--secondary);
    color:var(--text);
    border:1px solid var(--border);
}
.btn-secondary:hover:not(:disabled){
    background:var(--secondary-hover);
    transform:translateY(-2px);
}
.btn-sm{
    padding:8px 16px;
    font-size:13px;
    min-width:0;
}

/* ---------- Preview area ---------- */
.preview-area{
    background:white;
    padding:24px;
    border-radius:16px;
    border:1px solid var(--border);
    margin-top:24px;
    max-height:600px;
    overflow-y:auto;
    display:none;
}
.preview-area.visible{display:block}
.preview-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:12px;
}
.preview-header h3{
    font-size:18px;
    color:var(--text);
    font-weight:700;
}
.preview-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.file-info{
    font-size:14px;
    color:var(--text-light);
    padding:12px 16px;
    background:var(--bg-light);
    border-radius:8px;
    margin-bottom:16px;
}
.file-info strong{color:var(--text)}

/* ---------- Preview table ---------- */
.preview-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    overflow-x:auto;
    display:block;
}
.preview-table th,
.preview-table td{
    border:1px solid var(--border);
    padding:8px 12px;
    text-align:left;
    white-space:nowrap;
}
.preview-table th{
    background:var(--bg-light);
    font-weight:600;
    color:var(--text);
}
.preview-table tr:nth-child(even){background:rgba(249,250,251,0.5)}

/* ---------- Modal ---------- */
.modal{
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal.visible{display:flex}
.modal-dialog{
    width:100%;
    max-width:500px;
    max-height:90vh;
    overflow-y:auto;
}
.modal-dialog.modal-lg{max-width:800px}
.modal-content{
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,0.2);
}
.modal-header{
    background:var(--primary);
    color:white;
    padding:20px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.modal-header h3{
    font-size:18px;
    font-weight:700;
    margin:0;
    color:white;
}
.modal-close{
    background:none;
    border:0;
    color:white;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    padding:0 4px;
    opacity:.9;
}
.modal-close:hover{opacity:1}
.modal-body{
    padding:24px;
}
.modal-footer{
    padding:16px 24px;
    display:flex;
    justify-content:flex-end;
    gap:12px;
    border-top:1px solid var(--border);
    background:var(--bg-light);
}
.modal-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}
@media(max-width:600px){
    .modal-row{grid-template-columns:1fr}
}
.modal-body label.sub-label{margin-bottom:6px}
.modal-body label.form-check{margin-bottom:12px}
.input-group{
    display:flex;
    margin-bottom:10px;
}
.input-addon{
    background:var(--bg-light);
    border:1px solid var(--border);
    border-right:0;
    border-radius:8px 0 0 8px;
    padding:10px 14px;
    font-size:14px;
    color:var(--text-light);
    white-space:nowrap;
}
.input-group .form-control{
    border-radius:0 8px 8px 0;
}
#base64Result{
    font-family:monospace;
    font-size:12px;
    resize:vertical;
    min-height:200px;
}

/* ---------- Progress bar ---------- */
.progress{
    width:100%;
    height:8px;
    background:var(--bg-light);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:12px;
}
.progress-bar{
    height:100%;
    background:var(--primary);
    border-radius:4px;
    transition:width .3s ease;
    width:0%;
}

/* ---------- Toast ---------- */
.toast-notification{
    position:fixed;
    bottom:20px;
    right:20px;
    background:var(--success);
    color:white;
    padding:14px 24px;
    border-radius:8px;
    font-weight:500;
    z-index:10000;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    animation:slideIn .3s ease;
}
.toast-notification.error{background:var(--error)}
.toast-notification.info{background:var(--primary)}
@keyframes slideIn{
    from{transform:translateX(100%);opacity:0}
    to{transform:translateX(0);opacity:1}
}

/* ---------- Content sections ---------- */
.content-section-wrapper{
    padding:80px 20px;
    font-family:'Open Sans',sans-serif;
}
.content-section-wrapper:first-of-type{
    background-color:#f8f9fa;
}
.content-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}
.section-title{
    font-family:'Space Grotesk',sans-serif;
    text-align:center;
    font-size:2.8rem;
    color:var(--primary);
    line-height:1.3;
    margin-bottom:60px;
    font-weight:700;
}
.grid-3{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px;
}
.info-card{
    background-color:#fff;
    padding:40px 30px;
    border-radius:16px;
    text-align:center;
    box-shadow:var(--card-shadow);
    border:1px solid var(--border);
    transition:all .3s ease;
    height:100%;
}
.info-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
}
.info-card-icon{
    font-size:2.8rem;
    color:var(--primary);
    width:80px;
    height:80px;
    margin:0 auto 25px auto;
    border-radius:50%;
    background-color:rgba(79,70,229,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
}
.info-card h3{
    font-family:'Space Grotesk',sans-serif;
    font-size:1.6rem;
    color:var(--text);
    line-height:1.4;
    margin-bottom:15px;
    font-weight:700;
}
.info-card p{
    color:var(--text-light);
    line-height:1.7;
    font-size:16px;
}

/* ---------- Content wrapper (Why Use + FAQ + Conclusion) ---------- */
.content-wrapper{
    max-width:800px;
    margin:0 auto;
    font-family:'Noto Sans',sans-serif;
    line-height:1.7;
    color:var(--text);
}
.content-wrapper h2{
    font-size:2rem;
    color:var(--primary);
    margin-top:60px;
    margin-bottom:25px;
    font-weight:700;
    line-height:1.3;
    text-align:center;
}
.content-wrapper h2:first-child{margin-top:0}
.content-wrapper h3{
    font-size:1.5rem;
    color:var(--text);
    margin-top:40px;
    margin-bottom:15px;
    font-weight:700;
    line-height:1.4;
    position:relative;
    padding-left:24px;
}
.content-wrapper h3::before{
    content:'';
    position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    width:12px;height:12px;
    background-color:var(--primary);
    border-radius:50%;
}
.content-wrapper p{
    margin-bottom:25px;
    font-size:17px;
    color:var(--text);
    line-height:1.7;
}
.content-wrapper ul{
    list-style:none;
    padding:0;
    margin-bottom:30px;
}
.content-wrapper ul li{
    position:relative;
    padding-left:32px;
    margin-bottom:16px;
    font-size:17px;
    line-height:1.7;
    color:var(--text);
}
.content-wrapper ul li i{
    position:absolute;
    left:0;
    top:4px;
    color:var(--success);
    font-size:1.1em;
}
.content-wrapper a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    transition:color .3s ease;
}
.content-wrapper a:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}

/* ---------- Related Tools Grid ---------- */
.related-tools-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
    gap:24px !important;
    margin-bottom:20px;
    width:100%;
}
.related-tool-card{
    display:flex !important;
    align-items:flex-start;
    gap:16px;
    padding:24px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    text-decoration:none;
    color:inherit;
    transition:all .25s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.03);
}
.related-tool-card:hover{
    border-color:var(--primary);
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(79,70,229,0.08);
}
.related-tool-card:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}
.related-tool-icon{
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:12px;
    background:rgba(79,70,229,0.08);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    transition:background .25s ease,color .25s ease;
}
.related-tool-card:hover .related-tool-icon{
    background:var(--primary);
    color:#fff;
}
.related-tool-body{flex:1;min-width:0}
.related-tool-body h3{
    margin:0 0 6px 0;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.1rem;
    color:#1e293b;
    line-height:1.3;
}
.related-tool-body p{
    margin:0;
    color:#64748b;
    font-size:.92rem;
    line-height:1.55;
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
    .containert,
    .content-container{max-width:95%}
    .section-title{font-size:2.4rem}
    .content-wrapper{max-width:90%}
    .grid-3{gap:30px}
}

@media(max-width:768px){
    .containert{max-width:100%;margin:20px auto;border-radius:12px}
    .header-t{padding:30px 15px}
    .header-t h1{font-size:32px}
    .header-t p{font-size:16px}
    .main-content{padding:20px}
    .excel-tool-card{padding:16px}
    .upload-area{padding:40px 20px;min-height:280px}
    .upload-icon{font-size:48px}
    .upload-area h2{font-size:18px}
    .format-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
    .grid-3{grid-template-columns:1fr;gap:20px}
    .info-card{padding:30px 20px}
    .content-section-wrapper{padding:60px 15px}
    .section-title{font-size:2rem;margin-bottom:40px}
    .content-wrapper{max-width:95%}
    .content-wrapper h3{font-size:1.3rem;margin-top:35px;margin-bottom:12px;padding-left:20px}
    .content-wrapper h3::before{width:10px;height:10px}
    .content-wrapper p,
    .content-wrapper ul li{font-size:16px}
    .related-tools-grid{grid-template-columns:1fr !important}
    .related-tool-card{padding:20px}
    .modal-dialog{max-width:95%}
}

@media(max-width:480px){
    .containert{max-width:100%;margin:0 auto 20px;border-radius:0}
    .header-t h1{font-size:28px}
    .header-t p{font-size:15px}
    .main-content{padding:15px}
    .upload-area{padding:30px 15px;min-height:240px}
    .upload-area h2{font-size:16px}
    .content-section-wrapper{padding:50px 10px}
    .section-title{font-size:1.8rem;margin-bottom:30px}
    .content-wrapper h3{font-size:1.2rem;margin-top:30px;padding-left:18px}
    .content-wrapper h3::before{width:8px;height:8px}
    .content-wrapper p,
    .content-wrapper ul li{font-size:15px}
}

/* ---------- Utilities ---------- */
.hidden{display:none !important}
.visible{display:block !important}
.related-tools-grid.visible{display:grid !important}
.modal.visible{display:flex !important}
.flex{display:flex !important}
.grid{display:grid !important}
.text-center{text-align:center}
.d-none{display:none !important}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .btn-primary:hover,
    .btn-success:hover,
    .btn-secondary:hover,
    .info-card:hover,
    .related-tool-card:hover,
    .upload-area.drag-over{
        transform:none !important;
    }
}

/* ---------- Focus ---------- */
:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
    border-radius:4px;
}

/* ---------- Print ---------- */
@media print{
    .upload-area,
    .settings-area,
    .action-buttons,
    .header-t,
    .content-section-wrapper,
    .content-wrapper,
    .related-tools-grid,
    .modal,
    #frame{
        display:none !important;
    }
    .preview-area{display:block !important;max-height:none;border:0;padding:0}
    .containert{margin:0;padding:0;box-shadow:none;border-radius:0}
    body{background:white;color:black}
}