/* =========================================
   PETROTOPIC CALCULATOR
========================================= */

.pc-container{
    max-width:1280px;
    margin:40px auto;
    padding:0 20px;
}

.pc-header{
    text-align:center;
    margin-bottom:30px;
}

.pc-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:13px;
    font-weight:700;
    margin-bottom:15px;
}

.pc-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
}

.pc-header h1{
    font-size:2.2rem;
    margin:0;
}

.pc-grid{
    display:grid;
    grid-template-columns:minmax(300px,420px) 1fr;
    gap:24px;
    align-items:start;
}

.pc-panel{
    background:#fff;
    border-radius:18px;
    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
}

.ajax-form.pc-panel{
    position:sticky;
    top:90px;
}

.pc-section-title{
    padding:18px 24px;
    font-size:18px;
    font-weight:700;
    border-bottom:1px solid #eee;
}

.pc-field{
    padding:18px 24px;
    border-bottom:1px solid #f2f2f2;
}

.pc-field:last-child{
    border-bottom:none;
}

.pc-label-group{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.pc-label-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f4f6f8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.pc-field-label{
    font-weight:700;
}

.pc-field-unit{
    font-size:13px;
    color:#777;
}

.pc-field input{
    width:100%;
    height:52px;
    border:1px solid #ddd;
    border-radius:12px;
    padding:0 16px;
    font-size:16px;
    box-sizing:border-box;
}

.pc-field input:focus{
    outline:none;
    border-color:#2563eb;
}

.pc-result{
    min-height:650px;
    background:#fff;
}

.pc-placeholder{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:60px;
    text-align:center;
}

.pc-placeholder-icon{
    font-size:60px;
    margin-bottom:15px;
}

.pc-result-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    padding:24px;
}
    

.pc-result-card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-left:4px solid #2563eb;
    border-radius:16px;
    padding:20px;
    transition:.2s;
    box-shadow:
    0 4px 12px rgba(0,0,0,.05);
}

.pc-result-card:hover{
    transform:translateY(-2px);
}

.pc-result-label{
    font-size:13px;
    color:#64748b;
    margin-bottom:10px;
}

.pc-result-value{
    font-size:12px;
    font-weight:900;
    color:#0f172a;
    line-height:1.1;
    word-break:break-word;
}

.pc-result-sub{
    margin-top:8px;
    color:#64748b;
    font-size:13px;
}

.pc-print-btn{
    width:100%;
    max-width:260px;
    display:block;
    margin:30px auto 0;
    height:52px;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}




/* =========================================
   SHARE SECTION
========================================= */

.pc-share-wrap{
    margin-top:30px;
    margin-bottom:20px;

    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(140px,1fr));

    gap:12px;
}

.pc-share-btn{
    height:50px;

    border:none;
    border-radius:12px;

    background:#166533;
    color:#fff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:all .25s ease;
}

.pc-share-btn:hover{
    transform:translateY(-2px);

    background:#2563eb;
}

.pc-share-btn:active{
    transform:translateY(0);
}

/* =========================================
   SEARCH CALCULATOR
========================================= */

.pc-search-card{

    max-width:550px;

    margin:0 auto 20px auto;

    background:#ffffff;

    border-radius:16px;

    padding:16px;

    border:1px solid #e5e7eb;

    box-shadow:
    0 4px 12px rgba(0,0,0,.05);

}

.pc-search-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:4px;

}

.pc-search-subtitle{

    font-size:13px;

    margin-bottom:12px;

    color:#64748b;

}

.pc-search-input{

    width:100%;

    height:46px;

    padding:0 16px;

    border:1px solid #dbe2ea;

    border-radius:12px;

    background:#fff;

    font-size:15px;

    color:#0f172a;

    box-sizing:border-box;

    transition:.2s;

}

.pc-search-input:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:
    0 0 0 3px rgba(37,99,235,.15);

}

.pc-search-button{

    height:46px;

    min-width:110px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.pc-search-button:hover{

    background:#1d4ed8;

}


.pc-search-wrap{

    width:100%;
    margin-bottom:25px;
    display:block;

}
.pc-search-group{

    display:flex;

    gap:12px;

    align-items:center;

}


.search_calculation_form_result{

    margin-top:20px;

    text-align:left;

}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:1200px){

    .pc-grid{
        grid-template-columns:1fr;
    }

    .ajax-form.pc-panel{
        position:static;
    }

    .pc-result{
        min-height:auto;
    }

}

@media (max-width:768px){

    .pc-container{
        padding:0 12px;
        margin:20px auto;
    }

    .pc-header h1{
        font-size:1.6rem;
    }

    .pc-section-title{
        padding:14px 18px;
        font-size:16px;
    }

    .pc-field{
        padding:14px 18px;
    }
    
    .pc-field input{
        box-sizing:border-box;
    }

    .pc-result-grid{
        grid-template-columns:1fr;
        padding:16px;
    }

    .pc-result-card{
        padding:16px;
    }

    .pc-result-value{
        font-size:24px;
    }



    .pc-print-btn{
        max-width:100%;
    }


    

    .pc-search-button{

        width:100%;

    }

    .pc-search-title{

        font-size:20px;

    }


    .pc-search-group{

        flex-direction:column;

        width:100%;

    }

    .pc-search-input{
        flex: none;

    }

    .pc-search-button{

        width:100%;

    }

}

.pc-panel{
    padding-left:20px;
}


.pc-section-content p{
    margin-bottom:16px;
    line-height:1.8;
}

.pc-section-content h2{
    margin-top:25px;
    margin-bottom:12px;
}

.pc-interpretation{
    padding-left:22px;
    margin:0;
}

.pc-interpretation li{
    margin-bottom:12px;
    line-height:1.7;
}

.pc-faq-section{
    margin-top:20px;
}

.pc-faq{
    margin-top:12px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
}

.pc-faq summary{
    cursor:pointer;
    padding:16px 20px;
    font-weight:600;
    list-style:none;
    background:#f8fafc;
    transition:0.2s;
}

.pc-faq summary:hover{
    background:#f1f5f9;
}

.pc-faq summary::-webkit-details-marker{
    display:none;
}

.pc-faq summary::after{
    content:"+";
    float:right;
    font-size:20px;
    font-weight:700;
}

.pc-faq[open] summary::after{
    content:"−";
}

.pc-faq p{
    margin:0;
    padding:18px 20px;
    line-height:1.8;
}


.pc-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-top:15px;
}

.pc-benefits span{
    background:#f3f4f6;
    border-radius:999px;
    padding:8px 14px;
    font-size:14px;
    font-weight:600;
}

/* =========================================
   COLLAPSIBLE CONTENT
========================================= */

.pc-section{
    margin-top:16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    background:#ffffff;
}

.pc-section summary{
    cursor:pointer;
    padding:18px 20px;
    font-weight:700;
    font-size:16px;
    background:#f8fafc;
    list-style:none;
}

.pc-section summary::-webkit-details-marker{
    display:none;
}

.pc-section summary::after{
    content:"+";
    float:right;
    font-size:20px;
}

.pc-section[open] summary::after{
    content:"−";
}

.pc-section-content{
    padding:20px;
}

.pc-section-content ol{
    padding-left:35px;
    margin:15px 0;
}

.pc-section-content li{
    margin-bottom:12px;
    line-height:1.8;
}

.pc-section-content ul{
    padding-left:28px;
    margin:12px 0;
}

.pc-section-content ul li{
    margin-bottom:8px;
}

.pc-formula{
    margin:20px 0;
    padding:18px;
    text-align:center;
    font-size:22px;
    font-weight:700;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
}

/* =========================================
   RELATED CALCULATORS
========================================= */
.pc-related-section{
    margin-top:20px;
}

.pc-related-links a{
    display:block;
    padding:18px;
    text-align:center;
    text-decoration:none;
    font-weight:700;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
}

.pc-related-links a:hover{
    background:#f1f5f9;
}

/* =========================================
   EXPLORE CALCULATORS
========================================= */

.pc-explore{
    margin-top:30px;
    margin-bottom:10px;
}

.pc-explore-link{
    display:block;
    text-align:center;

    padding:18px 24px;

    border-radius:16px;

    text-decoration:none;

    font-size:18px;
    font-weight:700;

    background:linear-gradient(
        135deg,
        #f8fafc,
        #eef2ff
    );

    border:1px solid #e5e7eb;

    transition:.2s;
}

.pc-explore-link:hover{
    transform:translateY(-2px);

    box-shadow:
    0 8px 20px
    rgba(0,0,0,.08);
}

/* =========================================
   TABLE
========================================= */

.pc-table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
    font-size:15px;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.pc-table th{
    background:#1f4e79;
    color:#fff;
    padding:12px;
    text-align:left;
}

.pc-table td{
    padding:10px 12px;
    border-bottom:1px solid #e5e7eb;
}

.pc-table tbody tr:nth-child(even){
    background:#f8fafc;
}

.pc-table .value{
    text-align:right;
    font-weight:600;
    color:#0f172a;
}

.pc-table .section td{
    background:#eaf3ff;
    font-weight:700;
    color:#1f4e79;
    border-bottom:none;
}

.pc-table .highlight{
    background:#fff8e1 !important;
}

.pc-table .highlight .value{
    color:#d97706;
    font-weight:700;
}


/* =========================================
   NORMAL CALCULATOR
========================================= */

.calculator-wrap{
    width:100%;
}

.calc-display{
    background:#f8f9fa;
    border:1px solid #ddd;
    border-radius:12px;
    padding:20px;
    min-height:70px;
    text-align:right;
    font-size:28px;
    font-weight:700;
    overflow-x:auto;
    margin-bottom:15px;
}

.calc-buttons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
}

.calc-buttons button{
    border:none;
    border-radius:10px;
    padding:15px;
    font-size:16px;
    cursor:pointer;
    background:#1f2937;
    color:#fff;
    transition:.2s;
}

.calc-buttons button:hover{
    opacity:.85;
}

.clear{
    background:#dc3545 !important;
}

.equals{
    background:#28a745 !important;
    grid-column:span 5;
}

@media(max-width:768px){

    .calc-display{
        font-size:22px;
        padding:15px;
    }

    .calc-buttons button{
        padding:12px;
        font-size:14px;
    }

}