/* ==========================================================================
   products-v2_8.css
   Dipisahkan otomatis dari <style> inline di products-v2_8.tpl
   First Server International - WHMCS Order Form (Premium Comparison)
   ========================================================================== */

/* -------------------------------------------------------------------------
   BAGIAN 1. BASE LAYOUT, GRID DASAR, CARD, PRICE, BUTTON, FEATURE LIST
   ------------------------------------------------------------------------- */
body{
    background:#f4f8fc;
}

#btnShowSidebar{
    margin-bottom:25px;
}

#headline{
    font-size:42px;
    font-weight:800;
    color:#102a43;
    margin-bottom:8px;
    text-align:center;
}

#taglinex{
    font-size:18px;
    color:#486581;
    margin-bottom:30px;
    text-align:center;
}

/* layout */
.row-product-selection{
    display:flex;
    gap:25px;
    align-items:flex-start;
}

.product-selection-sidebar{
    width:280px;
    display:none;
    flex-shrink:0;
}

.main-products{
    flex:1;
}


/* ==========================================================
FINAL SMART GRID
4 produk = tetap 4 kolom 1 row
3 produk = center
2 produk = center
1 produk = center
========================================================== */

/* desktop besar */
.modern-hosting-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/* jika item hanya 3 */
.modern-hosting-grid:has(.hosting-card:nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr);
    max-width:1100px;
    margin:0 auto;
}

/* jika item hanya 2 */
.modern-hosting-grid:has(.hosting-card:nth-child(2):last-child){
    grid-template-columns:repeat(2,1fr);
    max-width:760px;
    margin:0 auto;
}

/* jika item hanya 1 */
.modern-hosting-grid:has(.hosting-card:only-child){
    grid-template-columns:1fr;
    max-width:360px;
    margin:0 auto;
}

/* tablet */
@media(max-width:1200px){
    .modern-hosting-grid,
    .modern-hosting-grid:has(.hosting-card:nth-child(3):last-child),
    .modern-hosting-grid:has(.hosting-card:nth-child(2):last-child){
        grid-template-columns:repeat(2,1fr);
        max-width:none;
    }
}

/* mobile */
@media(max-width:991px){
    .modern-hosting-grid{
        grid-template-columns:1fr !important;
        max-width:none !important;
    }
}

/* card */
.hosting-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

    border:2px solid #93c5fd !important;   /* biru muda */
    
    transition:all .30s ease;
}

.hosting-card:hover{
    transform:translateY(-8px);

    border:5px solid #d4af37 !important;   /* gold */

    box-shadow:0 25px 55px rgba(212,175,55,.22);
}

.top-head{
    background:linear-gradient(135deg,#0f172a,#0a58ca,#2563eb);
    color:#fff;
    padding:28px 22px;
    text-align:center;
}

.top-head h4{
    font-size:28px;
    font-weight:800;
    margin:0;
}

/* price */
.price{
    font-size:26px;
    font-weight:900;
    color:#ffd84d;
    margin-top:18px;
    line-height:1.15;
}

/* button */
.order-button{
    display:block;
    margin-top:18px;
    padding:13px;
    border-radius:12px;
    background:#fff;
    color:#0a58ca !important;
    text-decoration:none !important;
    font-weight:800;
}

.order-button:hover{
    background:#eaf2ff;
}


/* features */
.feature-list{
    list-style:none;
    margin:0;
    padding:22px;
}


.feature-list li{
    padding:8px 0 8px 20px;   /* sebelumnya 28px */
    border-bottom:1px solid #edf2f7;
    font-size:14px;
    color:#334155;
    position:relative;
    line-height:1.45;
}

.feature-list li:last-child{
    border-bottom:none;
}


.feature-list li:before{
    content:"✔";
    position:absolute;
    left:0;
    top:8px;
    color:#60a5fa;
    font-weight:700;
    font-size:13px; /* sedikit kecil biar proporsional */
}

/* responsive */
@media(max-width:1200px){
    .modern-hosting-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:991px){

    .row-product-selection{
        display:block;
    }

    .product-selection-sidebar{
        width:100%;
        margin-bottom:20px;
    }

    .modern-hosting-grid{
        grid-template-columns:1fr;
    }

    #headline{
        font-size:30px;
    }
}

.order-button{
    display:block;
    margin-top:18px;
    padding:15px 18px;
    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);
    color:#ffffff !important;

    text-decoration:none !important;
    font-weight:900;
    font-size:18px;      /* dibesarkan */
    letter-spacing:.4px;
    text-align:center;
    line-height:1.2;

    box-shadow:0 10px 25px rgba(37,99,235,.28);
    transition:all .28s ease;
    position:relative;
    overflow:hidden;
}

/* shimmer glow */
.order-button:before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:rgba(255,255,255,.22);
    transform:skewX(-25deg);
    transition:.55s;
}

.order-button:hover:before{
    left:130%;
}

.order-button:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 18px 35px rgba(212,175,55,.28);
    background:linear-gradient(135deg,#d4af37,#e6c65a,#f4d97a);
    color:#102a43 !important;
}

/* klik */
.order-button:active{
    transform:scale(.98);
}

/* jika unavailable */
.unavailable{
    background:#ef4444 !important;
    color:#fff !important;
    box-shadow:none !important;
}

/* -------------------------------------------------------------------------
   BAGIAN 2. PATCH: FONT TOMBOL ORDER LEBIH BESAR
   ------------------------------------------------------------------------- */

.order-button{
    display:block;
    margin-top:18px;
    padding:15px 18px;
    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);
    color:#ffffff !important;

    text-decoration:none !important;
    font-weight:900;
    font-size:18px;      /* dibesarkan */
    letter-spacing:.4px;
    text-align:center;
    line-height:1.2;

    box-shadow:0 10px 25px rgba(37,99,235,.28);
    transition:all .28s ease;
    position:relative;
    overflow:hidden;
}

/* -------------------------------------------------------------------------
   BAGIAN 3. PATCH: FORMAT HARGA GAYA SALES, DIVIDER NAMA PRODUK, RIBBON BEST SELLER
   ------------------------------------------------------------------------- */

.price{
    margin-top:18px;
    line-height:1.1;
    text-align:center;
}

.price .currency{
    font-size:15px;
    font-weight:600;
    color:#ffffff;
    vertical-align:top;
    margin-right:1px;
}

.price .amount{
    font-size:34px;
    font-weight:900;
    color:#ffd84d;
    letter-spacing:-1px;
}

.price .cycle{
    display:block;
    margin-top:4px;
    font-size:13px;
    font-weight:600;
    color:#ffffff;
    opacity:.95;
}

/* ==========================================================
TAMBAHKAN CSS INI DI BAGIAN STYLE TERAKHIR
========================================================== */

.price{
    margin-top:18px;
    line-height:1.05;
    text-align:center;
}

.price-start{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#ffffff;
    opacity:.92;
    margin-bottom:3px;
    text-transform:lowercase;
}

.price-line{
    display:block;
}

.price .currency{
    font-size:15px;
    font-weight:600;
    color:#ffffff;
    margin-right:3px;
    vertical-align:middle;
}

.price .amount{
    font-size:34px;
    font-weight:900;
    color:#ffd84d;
    letter-spacing:-1px;
}

.price .cycle{
    display:block;
    margin-top:3px;
    font-size:12px;
    font-weight:600;
    color:#ffffff;
    opacity:.95;
}

/* ==========================================================
DIVIDER DI BAWAH NAMA PRODUK
Taruh di CSS paling bawah
========================================================== */

.top-head h4{
    font-size:28px;
    font-weight:800;
    margin:0;
    position:relative;
    padding-bottom:18px;   /* ruang divider */
}

/* garis divider tengah 50% */
.top-head h4:after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0;

    width:52%;
    height:2px;
    border-radius:50px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.35),
        rgba(255,255,255,.95),
        rgba(255,255,255,.35),
        rgba(255,255,255,0)
    );
}

/* =====================================================
PASTIKAN CSS INI ADA DI BAWAH STYLE
===================================================== */

.hosting-card{
    position:relative;
    overflow:hidden;
}

.ribbon-best{
    position:absolute;
    top:16px;
    right:-42px;
    width:165px;
    padding:8px 0;
    text-align:center;
    z-index:20;

    font-size:11px;
    font-weight:900;
    letter-spacing:1px;

    color:#102a43;

    background:linear-gradient(135deg,#d4af37,#f5d97a,#fff0b3);

    transform:rotate(45deg);

    box-shadow:0 8px 18px rgba(212,175,55,.35);
}

.best-seller{
    transform:scale(1.03);
}

.best-seller:hover{
    transform:translateY(-8px) scale(1.04);
}

.feature-list img{
    max-width:180px;
    height:auto;
    display:block;
    margin:10px auto;
}

.feature-list p{
    margin:0 0 10px;
}


.feature-html{
    list-style:none;
    padding:18px !important;
    text-align:center;
}

.feature-html img{
    max-width:180px;
    height:auto;
    display:block;
    margin:10px auto;
}

/* -------------------------------------------------------------------------
   BAGIAN 4. PATCH: SMART GRID AUTO LAYOUT (1-6 item & 7+ item)
   ------------------------------------------------------------------------- */
/* =========================================================
PATCH GRID CERDAS AUTO LAYOUT
3 kolom  = tetap perfect center
4 kolom  = tetap 1 row
5 kolom  = 3 + 2 (row kedua center)
6 kolom  = 3 + 3
7+ kolom = 4 kolom per row, row terakhir center
========================================================= */

/* =====================================
BASE GRID
===================================== */
.modern-hosting-grid{
    display:grid;
    gap:25px;
    justify-content:center;
    align-items:start;
}

/* 1 item */
.modern-hosting-grid.grid-1{
    grid-template-columns:minmax(280px,380px);
}

/* 2 item */
.modern-hosting-grid.grid-2{
    grid-template-columns:repeat(2,minmax(280px,380px));
}

/* 3 item */
.modern-hosting-grid.grid-3{
    grid-template-columns:repeat(3,minmax(280px,380px));
}

/* 4 item */
.modern-hosting-grid.grid-4{
    grid-template-columns:repeat(4,minmax(260px,1fr));
}

/* =====================================
5 ITEM = 3 + 2 CENTER
===================================== */
.modern-hosting-grid.grid-5{
    grid-template-columns:repeat(6, minmax(160px, 1fr));
}

.modern-hosting-grid.grid-5 .hosting-card{
    grid-column:span 2;
}

/* item 4 & 5 row kedua center */
.modern-hosting-grid.grid-5 .hosting-card:nth-child(4){
    grid-column:2 / span 2;
}

.modern-hosting-grid.grid-5 .hosting-card:nth-child(5){
    grid-column:4 / span 2;
}

/* =====================================
6 ITEM = 3 + 3
===================================== */
.modern-hosting-grid.grid-6{
    grid-template-columns:repeat(3,minmax(280px,380px));
}

/* =====================================
7+ ITEM = 4 PER ROW
===================================== */
.modern-hosting-grid.grid-many{
    grid-template-columns:repeat(4,minmax(250px,1fr));
}

/* row terakhir center utk sisa 1 */
.modern-hosting-grid.grid-many.last-1 .hosting-card:last-child{
    grid-column:2 / span 2;
}

/* row terakhir center utk sisa 2 */
.modern-hosting-grid.grid-many.last-2 .hosting-card:nth-last-child(2){
    grid-column:2;
}

.modern-hosting-grid.grid-many.last-2 .hosting-card:last-child{
    grid-column:3;
}

/* row terakhir center utk sisa 3 */
.modern-hosting-grid.grid-many.last-3 .hosting-card:nth-last-child(3){
    grid-column:1;
}
.modern-hosting-grid.grid-many.last-3 .hosting-card:nth-last-child(2){
    grid-column:2;
}
.modern-hosting-grid.grid-many.last-3 .hosting-card:last-child{
    grid-column:3;
}

/* =====================================
RESPONSIVE
===================================== */
@media(max-width:1200px){

.modern-hosting-grid,
.modern-hosting-grid.grid-4,
.modern-hosting-grid.grid-5,
.modern-hosting-grid.grid-6,
.modern-hosting-grid.grid-many{
    grid-template-columns:repeat(2,minmax(260px,1fr)) !important;
}

}

@media(max-width:767px){

.modern-hosting-grid,
.modern-hosting-grid.grid-2,
.modern-hosting-grid.grid-3,
.modern-hosting-grid.grid-4,
.modern-hosting-grid.grid-5,
.modern-hosting-grid.grid-6,
.modern-hosting-grid.grid-many{
    grid-template-columns:1fr !important;
}

}

.feature-list img{
    max-width:75%;
    height:100%;
    display:block;
    margin:5px auto;
}

.feature-list span,
.feature-list font{
   color:inherit !important;
}

/* -------------------------------------------------------------------------
   BAGIAN 5. KHUSUS GRUP 'SSL Certificates': BOX DESKRIPSI + TOMBOL MORE/LESS
   (Catatan: di file .tpl asli, blok ini dibungkus {if strstr($productGroup.name,'SSL Certificates')}.
   Karena sekarang jadi CSS eksternal yang selalu dimuat, aturan ini otomatis
   tidak berpengaruh di halaman non-SSL karena class-nya memang tidak ada di sana.)
   ------------------------------------------------------------------------- */

/* area isi description fix tinggi */
.ssl-desc-box{
    max-height:260px;          /* samakan tinggi semua */
    overflow:hidden;
    position:relative;
    transition:.25s ease;
}

/* saat open */
.ssl-desc-box.expanded{
    max-height:2000px;
}

/* fade bawah */
.ssl-desc-box:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:38px;
    background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}

.ssl-desc-box.expanded:after{
    display:none;
}

/* tombol */
.ssl-more-btn{
    display:none;
    margin-top:-22px;
    padding:8px 14px;
    border-radius:10px;
    background:#eef5ff;
    color:#2563eb !important;
    font-size:13px;
    font-weight:800;
    text-decoration:none !important;
    cursor:pointer;
}

.ssl-more-btn:hover{
    background:#2563eb;
    color:#fff !important;
}

/* -------------------------------------------------------------------------
   BAGIAN 6. DIVIDER GRADIENT DI BAWAH HEADLINE
   ------------------------------------------------------------------------- */
        .fsi-divider-gradient {
    width: 50%;
    height: 2px;
    border: none;
    margin: 20px auto;
    background: linear-gradient(
        to right,
        #fff,
        #3366ff,
        #66b3ff,
        #3366ff,
        #fff
    );
    border-radius: 0px;
}

/* -------------------------------------------------------------------------
   BAGIAN 7. KHUSUS GRUP 'SSL Certificates': TOMBOL FILTER BRAND SSL
   (Catatan sama seperti Bagian 5 di atas mengenai kondisi asal.)
   ------------------------------------------------------------------------- */
          .ssl-brand-section {
            margin: 20px 0 30px;
            font-family: inherit;
          }
          .ssl-brand-section .section-label {
            font-size: 13px;
            color: #888;
            margin: 0 0 12px;
            font-weight: 400;
            letter-spacing: 0.02em;
            text-transform: uppercase;
          }
          .ssl-brand-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 10px;
          }
          .ssl-brand-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 8px;
            background: #f5f7fa;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            text-decoration: none;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
            min-height: 90px;
          }
          .ssl-brand-btn:hover {
            border-color: #dba502;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transform: translateY(-2px);
            text-decoration: none;
          }
          .ssl-brand-btn:active {
            transform: scale(0.97);
          }
          .ssl-brand-btn svg {
            display: block;
          }
          .ssl-brand-btn .brand-label {
            font-size: 11px;
            font-weight: 600;
            color: #555;
            text-align: center;
            letter-spacing: 0.01em;
          }
          @media (max-width: 600px) {
            .ssl-brand-grid {
              grid-template-columns: repeat(3, 1fr);
            }
          }
          @media (max-width: 380px) {
            .ssl-brand-grid {
              grid-template-columns: repeat(2, 1fr);
            }
          }