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

   BRAND COLORS

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



:root {



    --green: #89BE4E;



    --teal: #3B847B;



    --grey: #9EA5B1;



    --light-green: #EEF6E8;



    --light-teal: #E7F1F0;



    --dark: #263238;



}





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

   RESET

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



* {



    box-sizing: border-box;



}





body {



    margin: 0;



    font-family: Arial, Helvetica, sans-serif;



    background: #f5f7f8;



    color: var(--dark);



}





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

   HEADER

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



.page-header {



    background: linear-gradient(



        135deg,



        var(--teal),



        var(--green)



    );



    color: white;



    text-align: center;



    padding: 60px 20px;



}





.page-header h1 {



    margin: 0 0 12px;



    font-size: 42px;



    font-weight: 700;



}





.page-header p {



    margin: 0;



    font-size: 18px;



    opacity: .95;



}





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

   CONTAINER

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



.container {



    max-width: 1250px;



    margin: auto;



    padding: 35px 20px;



}





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

   FILTERS

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



/* =====================================================
   FILTERS - STICKY BELOW WORDPRESS HEADER
   ===================================================== */

.filters {
    position: sticky !important;
    top: 125px !important;
    z-index: 999 !important;

    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.kgn-addons-wrapper {
    position: relative;
    z-index: 1;
}

.search-box{

    flex:1;

}

.search-box input{

    width:100%;

    padding:14px;

    border:1px solid #dfe4e7;

    border-radius:8px;

    font-size:15px;

}

.category-select{

    width:220px;

    padding:14px;

    border:1px solid #dfe4e7;

    border-radius:8px;

}

.search-btn{

    width:140px;

    padding:14px;

    border:none;

    border-radius:8px;

    background:#89BE4E;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}

.search-btn:hover{

    background:#3B847B;

}


.search-box {



    flex: 1;



}





.search-box input,



.category-select {



    width: 100%;



    padding: 14px;



    border: 1px solid #dfe4e7;



    border-radius: 8px;



    font-size: 15px;



    outline: none;



}





.search-box input:focus,



.category-select:focus {



    border-color: var(--teal);



    box-shadow: 0 0 0 3px var(--light-teal);



}





.category-select {



    max-width: 230px;



}





.search-btn {



    padding: 14px 25px;



    border: none;



    border-radius: 8px;



    background: var(--green);



    color: white;



    cursor: pointer;



    font-size: 15px;



    font-weight: bold;



}





.search-btn:hover {



    background: var(--teal);



}





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

   ADDON GRID

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



.addons-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 25px;



}





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

   ADDON CARD

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



.addon-card {



    background: white;



    border-radius: 16px;



    overflow: hidden;



    box-shadow: 0 5px 20px rgba(0,0,0,.07);



    transition:



        transform .25s ease,



        box-shadow .25s ease;



    display: flex;



    flex-direction: column;



}





.addon-card:hover {



    transform: translateY(-6px);



    box-shadow: 0 12px 30px rgba(59,132,123,.20);



}





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

   IMAGE

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



.addon-image-wrapper{
    display:none !important;
}




.addon-image-wrapper img{



    max-width:140px;

    max-height:140px;



    width:auto;

    height:auto;



    object-fit:contain;

}








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

   CARD CONTENT

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



.addon-content {



    padding: 22px;



    display: flex;



    flex-direction: column;



    flex: 1;



}





.addon-category {



    display: inline-block;



    align-self: flex-start;



    background: var(--light-green);



    color: var(--teal);



    padding: 6px 10px;



    border-radius: 20px;



    font-size: 12px;



    font-weight: bold;



    margin-bottom: 12px;



}





.addon-title {



    font-size: 21px;



    margin: 0 0 10px;



    color: var(--dark);



}





.addon-description {



    color: #667078;



    line-height:1.8;



    font-size: 14px;



    margin: 0 0 15px;



    display: -webkit-box;



    -webkit-line-clamp: 3;



    -webkit-box-orient: vertical;



    overflow: hidden;



    min-height: 72px;



}



.addon-meta {



    display: flex;



    justify-content: space-between;



    padding: 12px 0;



    border-top: 1px solid #edf0f1;



    border-bottom: 1px solid #edf0f1;



    margin-top: auto;



}





.version {



    color: var(--grey);



    font-size: 13px;



}





.price-box{

margin-top:15px;

}

.edition-switch{
    display:flex;
    width:135px;          /* pehle 160 ya 170 hoga */
    height:34px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid #8BC34A;
}

.edition-btn{
    flex:1;
    border:none;
    background:#fff;
    color:#222;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
    padding:0;
}

.edition-btn.active{
    background:#8BC34A;
    color:#fff;
}
.price-display{

font-size:40px;

font-weight:bold;

color:#3b847b;

text-align:center;

}






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

   BUTTONS

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



.card-buttons {



    display: flex;



    gap: 8px;



    margin-top: auto;



}



.btn {



    flex: 1;



    text-align: center;



    padding: 11px 8px;



    border-radius: 7px;



    text-decoration: none;



    font-size: 13px;



    font-weight: bold;



    cursor: pointer;



    border: none;



}





.btn-details {



    background: var(--teal);



    color: white;



}





.btn-details:hover {



    background: var(--green);



}





.btn-download {



    background: var(--green);



    color: white;



}





.btn-download:hover {



    background: var(--teal);



}





.btn-manual {



    background: var(--light-teal);



    color: var(--teal);



}





.btn-manual:hover {



    background: var(--grey);



    color: white;



}





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

   EMPTY STATE

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



.empty {



    text-align: center;



    padding: 70px 20px;



    background: white;



    border-radius: 15px;



}





.empty h2 {



    color: var(--teal);



}





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

   PAGINATION

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



.pagination {



    display: flex;



    justify-content: center;



    gap: 8px;



    margin-top: 40px;



    flex-wrap: wrap;



}





.pagination a {



    text-decoration: none;



    padding: 10px 15px;



    border-radius: 7px;



    background: white;



    color: var(--teal);



    border: 1px solid #dfe4e7;



}





.pagination a.active,



.pagination a:hover {



    background: var(--teal);



    color: white;



    border-color: var(--teal);



}





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

   MODAL

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



.modal {



    display: none;



    position: fixed;



    z-index: 9999;



    inset: 0;



    background: rgba(38,50,56,.70);



    padding: 30px 15px;



    overflow-y: auto;



}





.modal-content {



    max-width: 750px;



    margin: 30px auto;



    background: white;



    border-radius: 16px;



    padding: 30px;



    position: relative;



}





.close-modal {



    position: absolute;



    right: 20px;



    top: 15px;



    font-size: 28px;



    cursor: pointer;



    color: var(--grey);



}





.close-modal:hover {



    color: var(--teal);



}





.modal-title {



    color: var(--teal);



    margin-top: 0;



    padding-right: 30px;



}





.modal-description {



    line-height: 1.8;



    color: #667078;



}





.modal-features{
    background: var(--light-green);
    padding: 20px;
    border-radius: 10px;
    color: #52605b;
}

.modal-features p{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
    color: #444;
    font-size: 15px;
    line-height: 24px;
}

.modal-features p::before{
    content: "";
    color: #3B847B;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}




.modal-buttons {



    display: flex;



    gap: 10px;



    flex-wrap: wrap;



    margin-top: 25px;



}





.modal-buttons a {



    padding: 12px 18px;



    border-radius: 7px;



    text-decoration: none;



    font-weight: bold;



}





#modalDownload {



    background: var(--green);



    color: white;



}





#modalManual {



    background: var(--teal);



    color: white;



}

#modalManual{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px;
}

#modalManual .btn-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

#modalManual .icon-img{
    width:18px;
    height:18px;
    display:block;
}

#modalManual .btn-text{
    display:flex;
    align-items:center;
    line-height:1;
}





#modalVideo {



    background: var(--grey);



    color: white;



}





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

   RESPONSIVE

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



@media (max-width: 900px) {



    .addons-grid {



        grid-template-columns: repeat(2, 1fr);



    }



}





@media (max-width: 650px) {



    .page-header h1 {



        font-size: 30px;



    }





 .filters{

    flex-direction:column;

}

.search-box,

.category-select,

.search-btn{

    width:100%;

}

.search-box{

    flex:1;

}



.category-select{

    width:220px;

}



.search-btn{

    width:140px;

}



    .category-select {



        max-width: none;



    }





    .addons-grid {



        grid-template-columns: 1fr;



    }





    .card-buttons {



        flex-wrap: wrap;



    }



}

/* Description */
/* ==========================
   Addon Description
========================== */

.addon-desc{

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5 !important;   /* Sirf 5 lines */

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    line-height: 22px !important;
    min-height: 110px !important;
    max-height: 110px !important;

    margin:12px 0 15px 0 !important;
}


/* ==========================
   Silver / Gold Button
========================== */

.edition-switch{

    width:105px !important;
    height:34px !important;

}

.edition-btn{

    font-size:11px !important;
    padding:4px 6px !important;

}


/* ==========================
   Price
========================== */

.price-display{

    font-size:16px !important;
    font-weight:700;
    margin-top:8px !important;

}

.dynamic-price{

    font-size:18px !important;
}
.search-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.search-icon{
    width:1px;     /* change as needed */
    height:1px;
}

/* ===========================
   Modal Price Row
=========================== */

.modal-prices{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:15px 0 20px;
}

.price-badge{
    padding:8px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
}

.price-silver{
    background:#EEF6E8;
    color:#3B847B;
}

.price-gold{
    background:#FFF5E6;
    color:#C68600;
}

/* Eye Button */

.tc-eye-btn{
    border:none;
    background:#fff;
    width:36px;
    height:36px;
    border-radius:50%;
    cursor:pointer;
    margin-left:auto;
    box-shadow:0 2px 8px rgba(0,0,0,.15);

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.3s;
}

.tc-eye-btn:hover{
    background:#3B847B;
}

.tc-eye-btn img{
    width:18px;
    height:18px;
}

#modalManual{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

#modalManual img{
    width:18px;
    height:18px;
    display:block;
    flex-shrink:0;
}

#modalManual span{
    line-height:1;
}


/* =====================================================
   WORDPRESS / ELEMENTOR - ADDON TITLE FIX
   ===================================================== */

.kgn-addons-wrapper .addon-card h2.addon-title,
.addon-card h2.addon-title {

    font-size: 26px !important;
    line-height: 1.15 !important;

    font-weight: 700 !important;

    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #111820 !important;

    letter-spacing: -0.3px !important;

    min-height: 90px !important;
    max-height: 90px !important;

    overflow: hidden !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}

/* =====================================================
   KGNTDL ADDON TITLE - WORDPRESS / ELEMENTOR FIX
   ===================================================== */

body .addon-card h2.addon-title,
body h2.addon-title,
.addon-card h2.addon-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    color: #111820 !important;
}

/* =========================================
   KGN ADDONS - SEARCH FORM FIXED
   ========================================= */

.kgn-addons-wrapper .filters {
    position: fixed !important;

    top: 125px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: calc(100% - 40px) !important;
    max-width: 1210px !important;

    z-index: 999 !important;

    background: #ffffff !important;
    padding: 20px !important;

    border-radius: 12px !important;

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