/* =====================================================
   SITESA PRODUCT SELECTOR V4
   ===================================================== */

.product-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-top: 32px !important;
}

/* CARD UTAMA */
.product-tabs .product-tab {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 142px !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 1px solid #e2e5e9 !important;
    border-radius: 18px !important;

    background: #ffffff !important;
    color: #171717 !important;

    box-shadow:
        0 5px 16px rgba(20,20,20,.025) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}

/* HILANGKAN STYLE BUTTON BAWAAN */
.product-tabs .product-tab-select {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;
    width: 100% !important;
    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 24px 24px 17px !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: inherit !important;
    text-align: left !important;

    cursor: pointer !important;
}

/* JUDUL */
.product-tabs .product-tab-select strong {
    display: block !important;

    margin: 0 !important;

    color: #171717 !important;

    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: -.25px !important;
}

/* DESKRIPSI */
.product-tabs .product-tab-select span {
    display: block !important;

    margin-top: 7px !important;

    color: #747b84 !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

/* CTA BAWAH */
.product-tabs .product-tab-open {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 42px !important;

    padding: 11px 24px !important;

    border: 0 !important;
    border-top: 1px solid #eceef1 !important;

    background: #fafafa !important;
    color: #373737 !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease !important;
}

.product-tabs .product-tab-open::after {
    content: "→";
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
}

/* Karena teks link lama sudah punya panah */
.product-tabs .product-tab-open {
    font-size: 0 !important;
}

.product-tabs .product-tab:nth-child(1) .product-tab-open::before {
    content: "Buka SITESA EDU";
}

.product-tabs .product-tab:nth-child(2) .product-tab-open::before {
    content: "Buka SITESA BUMDes";
}

.product-tabs .product-tab:nth-child(3) .product-tab-open::before {
    content: "Buka SITESA MITRA";
}

.product-tabs .product-tab-open::before {
    font-size: 12px;
}

/* ACTIVE CARD */
.product-tabs .product-tab.active {
    border-color: transparent !important;

    background:
        linear-gradient(
            135deg,
            #d71920 0%,
            #bf1018 100%
        ) !important;

    color: #fff !important;

    box-shadow:
        0 16px 36px rgba(215,25,32,.20) !important;
}

.product-tabs .product-tab.active .product-tab-select strong {
    color: #fff !important;
}

.product-tabs .product-tab.active .product-tab-select span {
    color: rgba(255,255,255,.72) !important;
}

.product-tabs .product-tab.active .product-tab-open {
    border-top-color: rgba(255,255,255,.15) !important;

    background: rgba(0,0,0,.08) !important;

    color: #fff !important;
}

/* HOVER */
.product-tabs .product-tab:hover {
    transform: translateY(-3px) !important;

    border-color: rgba(244,122,0,.45) !important;

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

.product-tabs .product-tab.active:hover {
    border-color: transparent !important;

    box-shadow:
        0 20px 44px rgba(215,25,32,.24) !important;
}

.product-tabs .product-tab:not(.active) .product-tab-open:hover {
    background: #fff3e7 !important;
    color: #e56f00 !important;
    padding-left: 28px !important;
}

/* FOCUS ACCESSIBILITY */
.product-tabs .product-tab-select:focus-visible,
.product-tabs .product-tab-open:focus-visible {
    outline: 3px solid rgba(244,122,0,.28) !important;
    outline-offset: -3px !important;
}

/* TABLET */
@media (max-width: 960px) {
    .product-tabs {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .product-tabs .product-tab-select {
        padding: 21px 18px 15px !important;
    }

    .product-tabs .product-tab-open {
        padding: 11px 18px !important;
    }
}

/* MOBILE */
@media (max-width: 700px) {
    .product-tabs {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .product-tabs .product-tab {
        min-height: 124px !important;
        border-radius: 16px !important;
    }

    .product-tabs .product-tab-select {
        padding: 19px 19px 14px !important;
    }

    .product-tabs .product-tab-open {
        padding: 11px 19px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-tabs .product-tab,
    .product-tabs .product-tab-open {
        transition: none !important;
    }
}