/* ============================================
   TABBED IFRAME PLUGIN - OPTIMIZED v3.2
   - Ringan dan efisien (tidak membebani server)
   - Warna: Biru (inactive) + Hijau Teal (active) + Kuning (garis)
   - Custom font size variable
   - Minimal CSS untuk performa optimal
   ============================================ */

/* 
   CARA CUSTOM WARNA & FONT SIZE:
   Tambahkan di Appearance → Customize → Additional CSS
   
   :root {
       --tif-inactive: #your-color;    (Warna tab inactive)
       --tif-active: #your-color;      (Warna tab active)
       --tif-underline: #your-color;   (Warna garis bawah)
       --tif-hover: #your-color;       (Warna hover)
       --tif-font-size: 16px;          (Ukuran font tab)
   }
*/

/* === ROOT VARIABLES === */
:root {
    --tif-inactive: #2c4e8c;    /* Biru untuk inactive (sesuai screenshot) */
    --tif-active: #17696a;      /* Hijau teal untuk active */
    --tif-underline: #fbbf24;   /* Kuning untuk garis bawah */
    --tif-hover: #d32f2f;       /* Merah untuk hover (sesuai screenshot "BADILAG") */
    --tif-font-size: 14px;      /* Custom font size (bisa diubah user) */
}

/* === CONTAINER === */
.tif-tabs {
    margin: 0 0 36px 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

/* === TAB NAVIGATION === */
.tif-nav {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    gap: 0;
}

/* === TAB ITEMS - Optimized === */
.tif-nav li {
    flex: 1;
    padding: 14px 20px;
    font-weight: 700;
    font-size: var(--tif-font-size);
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    margin: 0;
    background: var(--tif-inactive) !important;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
}

/* HOVER STATE - Simple & Fast */
.tif-nav li:hover {
    background: var(--tif-hover) !important;
}

/* ACTIVE STATE - Hijau Teal */
.tif-nav li.active {
    background: var(--tif-active) !important;
}

/* GARIS BAWAH KUNING - Tebal & Solid seperti Screenshot */
.tif-nav li.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--tif-underline);
}

/* === ICONS === */
.tif-nav li .dashicons {
    font-size: 18px;
}

/* === CONTENT AREA - Minimal === */
.tif-body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.tif-content {
    display: none;
    padding: 0 !important;
    width: 100%;
}

.tif-content.active {
    display: block;
}

/* === IFRAME - Optimized === */
.tif-body iframe {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    border: 0;
}

/* === TEXT CONTENT === */
.tif-text {
    padding: 20px;
    line-height: 1.7;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
}

.tif-loading {
    padding: 40px;
    text-align: center;
    color: #6b7280;
    background: #f9f9f9;
}

/* === TEXT LINK BUTTON === */
.tif-text-link {
    margin-top: 16px;
}

.tif-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.tif-btn .dashicons {
    font-size: 18px;
}

.tif-btn:hover {
    opacity: 0.85;
    color: #fff;
}

/* === VERTICAL LAYOUT === */
.tif-vertical {
    display: flex;
}

.tif-vertical .tif-nav {
    flex-direction: column;
    width: 240px;
}

.tif-vertical .tif-nav li {
    text-align: left;
    justify-content: flex-start;
}

.tif-vertical .tif-nav li.active::before {
    height: auto;
    width: 5px;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
}

.tif-vertical .tif-body {
    flex: 1;
    width: calc(100% - 240px);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .tif-nav {
        flex-direction: column;
    }
    
    .tif-nav li {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }
    
    .tif-vertical {
        flex-direction: column;
    }
    
    .tif-vertical .tif-nav {
        width: 100%;
    }
    
    .tif-vertical .tif-body {
        width: 100%;
    }
}

/* === THEME OVERRIDE - Minimal === */
.entry-content .tif-tabs,
.page-content .tif-tabs {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}