/*
	Theme Name: Master Study Child
	Theme URI: http://stylemix.net
	Description: MasterStudy Child Theme
	Author: StylemixThemes
	Author URI: http://stylemix.net
	Template: masterstudy
	Version: 3.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: classes, courses, education, education center, learning center, tutoring, teaching, study, studying, learning, lessons, instructor, teacher, mentor
	Text Domain: masterstudy-child
*/ 
hr {border: 1px dashed #ccc;}
.end {margin-bottom:100px;}
mark { 
	background-color: #ffff00 !important; 
	color:#333 !important;
}
blockquote h2, blockquote h3  {
	color: inherit !important;
}
blockquote h2:first-child {
	margin-top: 0.25em !important;
}
blockquote li {
	color: #2b80ff !important;
}
.entry-header .entry-title h1 {line-height: 1.3em;}
.entry-header {background-color: #001931;}
.pmpro {
  & .pmpro_section #loginform .login-submit .button:hover {background: #001931 !important;}
}
.pmpro {
  & .pmpro_section:first-of-type {margin: 0 auto;max-width: 480px;}
} 
.pmpro_card_content label {color: rgb(34,34,34);}
.wp-sticky-note-body hr {
	border: 1px dashed #eab308 !important;
}
div.multiseparator, .teacher_single_product_page_title { 
	display: none;
}
/* UPD SEPT */
@media (max-width: 400px) {
    .course-title-holder {
        padding-right: 5px;
    }
}

@media(max-width: 480px){
    .woocommerce-MyAccount-navigation ul {
        padding-left: 0;
    }
    .woocommerce-MyAccount-navigation ul li {
        display: block;
    }
}

@media (max-width: 767px) {
    .table-responsive>.table>tbody>tr>td,
    .table-responsive>.table>tbody>tr>th,
    .table-responsive>.table>tfoot>tr>td,
    .table-responsive>.table>tfoot>tr>th,
    .table-responsive>.table>thead>tr>td,
    .table-responsive>.table>thead>tr>th {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 655px) {
    .course_table tr td.number.number-visible.title, .course_table tr td.title {
        padding-left: 20px;
        display: block;
        width: 100%;
    }
    .course_table tr td.stm_badge {
        display: block;
        width: 100%;
        text-align: left;
    }
    .course_table tr td .meta {
        padding-left: 12px;
    }
    .course_table tr td.stm_badge .badge_unit {
        margin-left: 15px;
    }
    .woocommerce-message {
        padding-right: 26px;
    }
    .woocommerce-message .button {
        position: static;
        float: none;
        display: block;
    }
    .woocommerce-message .button:after {
        display: none;
    }
    .shop_table > tbody > tr td.actions {
        padding-left: 15px;
        padding-right: 15px;
    }
    .woocommerce .shop_table.cart .coupon .button {
        display: block;
        margin-top: 15px;
    }
    .woocommerce .shop_table.cart .coupon {
        float: none;
        margin-bottom: 30px;
    }
    .woocommerce .shop_table.cart .button.update-cart {
        float: none;
        margin-bottom: 15px;
    }
}

.tp-caption .icon_in_btn {
    text-align: center !important;
}

@media (max-width: 991px){
    .overflowed_content .wpb_column .vc_column-inner{
        margin-top: 0 !important;
    }
}

body .vc_row[data-vc-full-width] {
    overflow: visible;
}
body .vc_row[data-vc-full-width].vc_parallax {
    overflow: hidden;
}

.woocommerce-product-gallery {
    position: relative;
    margin-bottom: 3em
}
.woocommerce-product-gallery figure {
    margin: 0
}
.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 25%;
    display: inline-block
}
.woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    float: left;
    cursor: pointer
}
.woocommerce-product-gallery .flex-control-thumbs img {
    opacity: .5
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1
}
.woocommerce-product-gallery img {
    display: block
}
.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
    width: 33.3333%
}
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 25%
}
.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 20%
}
.woocommerce-product-gallery__trigger {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 99
}
ol.flex-control-nav.flex-control-thumbs {
    padding-left: 0px;
}
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 20%;
}
.woocommerce-product-gallery__trigger {
    right: inherit;
    left: .5em;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    position: absolute;
    top: .5em;
    right: .5em;
    font-size: 2em;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: #fff;
    text-indent: -9999px;
    border-radius: 100%;
    box-sizing: content-box;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-radius: 100%;
    position: absolute;
    top: 9px;
    left: 9px;
    box-sizing: content-box;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:after {
    content: "";
    display: block;
    width: 2px;
    height: 8px;
    background: #000;
    border-radius: 6px;
    position: absolute;
    top: 19px;
    left: 22px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: content-box;
}


/* Woo My Account Tabs*/
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: table;
    float: none;
    width: 100%; }
.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}
.woocommerce-MyAccount-navigation ul {
    display: table !important;
    table-layout: fixed;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 30px; }
.woocommerce-MyAccount-navigation  ul > li {
    display: table-cell; }
.woocommerce-MyAccount-navigation  ul > li > a {
    display: block;
    padding: 12px 20px;
    background-color: #457992;
    border: 0;
    border-left: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;}
.woocommerce-MyAccount-navigation  ul > li.is-active a,
.woocommerce-MyAccount-navigation  ul > li a:hover,
.woocommerce-MyAccount-navigation  ul > li a:focus {
    background-color: #f0f2f5;
    color: #457992; }
.woocommerce div.product form.cart .variations td.label {
    display: none;
}
.woocommerce-product-gallery {
    position: relative;
    margin-bottom: 3em
}
.woocommerce-product-gallery figure {
    margin: 0
}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    z-index: 9 !important;
}
.stm_archive_product_inner_unit .stm_archive_product_inner_unit_centered .stm_featured_product_price .price h5 {
    font-weight: normal;
}
.widget_stm_recent_posts span.h6 {
    display: inline !important;
}
.widget_stm_recent_posts .cats_w {
    margin-left: 83px;
}

/* ==========================================================================
 CSS CARD KUSTOM (Mencegah Konflik WordPress & Mendukung Light/Dark Mode)
 ========================================================================== */

/* Base Wrapper & Penempatan Standalone */
.wpc-custom-card-wrapper {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 32px 0; /* Memberi jarak vertikal yang pas di antara paragraf */
padding: 24px;
border-radius: 12px;
border-left: 5px solid transparent;
display: block; /* Memastikan card berdiri sendiri (block element) */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efek Hover Tipis */
.wpc-custom-card-wrapper:hover {
transform: translateX(2px);
}

/* Styling Badge */
.wpc-custom-card-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 4px 10px;
border-radius: 6px;
margin-bottom: 12px;
line-height: 1;
}

/* Styling Konten Teks */
.wpc-custom-card-content {
font-size: 1rem;
line-height: 1.6;
margin: 0;
padding: 0;
}

/* ==========================================================================
 WARNA TEMA (Otomatis Blend dengan Light Mode & Dark Mode bawaan Tema)
 Menggunakan warna transparan (rgba) agar menyatu dengan background tema asli
 ========================================================================== */

/* TEMA 1: Tips Ujian (Biru) */
.wpc-card-theme-ujian {
background-color: rgba(28, 100, 242, 0.06); /* Background transparan tipis */
border-left-color: #1c64f2;
}
.wpc-card-theme-ujian .wpc-custom-card-badge {
background-color: rgba(28, 100, 242, 0.15);
color: #1c64f2;
}
.wpc-card-theme-ujian .wpc-custom-card-content {
color: inherit; /* Mengikuti warna teks bawaan tema aktif */
}

/* TEMA 2: Tips Dunia Kerja (Hijau/Teal) */
.wpc-card-theme-kerja {
background-color: rgba(4, 116, 129, 0.06);
border-left-color: #047481;
}
.wpc-card-theme-kerja .wpc-custom-card-badge {
background-color: rgba(4, 116, 129, 0.15);
color: #047481;
}
.wpc-card-theme-kerja .wpc-custom-card-content {
color: inherit;
}

/* TEMA 3: Quote Hari Ini (Amber/Emas) */
.wpc-card-theme-quote {
background-color: rgba(180, 83, 9, 0.06);
border-left-color: #b45309;
}
.wpc-card-theme-quote .wpc-custom-card-badge {
background-color: rgba(180, 83, 9, 0.15);
color: #b45309;
}
.wpc-card-theme-quote .wpc-custom-card-content {
color: inherit;
}

/* Penyesuaian Kontras Khusus untuk Dark Mode Murni (Jika tema menggunakan kelas .dark) */
@media (prefers-color-scheme: dark) {
.wpc-card-theme-ujian .wpc-custom-card-badge { color: #5796ff; background-color: rgba(87, 150, 255, 0.25); }
.wpc-card-theme-kerja .wpc-custom-card-badge { color: #06b6d4; background-color: rgba(6, 182, 212, 0.25); }
.wpc-card-theme-quote .wpc-custom-card-badge { color: #fbbf24; background-color: rgba(251, 191, 36, 0.25); }
.wpc-card-theme-ujian { border-left-color: #5796ff; background-color: rgba(255,255,255, 0.03); }
.wpc-card-theme-kerja { border-left-color: #06b6d4; background-color: rgba(255,255,255, 0.03); }
.wpc-card-theme-quote { border-left-color: #fbbf24; background-color: rgba(255,255,255, 0.03); }
}

/* ==========================================================================
   CSS UTAMA: STICKY NOTE (Satu Tema Kode Unik & Responsif)
   ========================================================================== */

/* Container utama Sticky Note */
.wp-sticky-note-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 35px 0;
  padding: 28px 24px 24px 24px;
  display: block;
  position: relative;
  
  /* Tema Warna Kertas Kuning Pastel Lembut (Light Mode) */
  background-color: #fef08a; 
  border-left: 6px solid #eab308;
  border-radius: 2px 4px 16px 4px;
  
  /* Efek Bayangan Kertas Menempel */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 
  0 4px 6px -2px rgba(0, 0, 0, 0.03),
  inset 0 -10px 20px rgba(0, 0, 0, 0.02);
  
  /* Animasi Transisi */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek Rotasi Alami Kertas Tempel Otomatis Bergantian */
.wp-sticky-note-box:nth-of-type(odd) {
  transform: rotate(-0.8deg);
}
.wp-sticky-note-box:nth-of-type(even) {
  transform: rotate(0.8deg);
}

/* Efek Hover Saat Didekati Kursor */
.wp-sticky-note-box:hover {
  transform: scale(1.01) rotate(0deg) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 
  0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Badge / Title Kategori Sticky Note */
.wp-sticky-note-badge {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #854d0e; 
  background-color: rgba(234, 179, 8, 0.18);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 14px;
  line-height: 1;
}

/* Konten Teks di Dalam Sticky Note */
.wp-sticky-note-body {
  font-size: 1.05rem;
  line-height: 1.6; 
}
.wp-sticky-note-body p, .wp-sticky-note-body h2, .wp-sticky-note-body h3, .wp-sticky-note-body h4 { 
  color: #451a03 !important; /* Warna gelap agar kontras tinggi di light mode */
}
.wp-sticky-note-body strong {
  color: #000000;
}
.wp-sticky-note-body li {
	color: inherit !important;
}

/* Optimasi Responsif Layar Smartphone / Mobile */
@media (max-width: 600px) {
  .wp-sticky-note-box {
padding: 20px;
margin: 25px 0;
transform: none !important; /* Matikan rotasi di layar kecil agar teks tidak terpotong */
  }
}

/* Penyesuaian Otomatis Komponen untuk Dark Mode */
@media (prefers-color-scheme: dark) {
  .wp-sticky-note-box {
background-color: #2e2a14 !important; 
border-left-color: #ca8a04 !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
  }
  .wp-sticky-note-badge {
color: #fef08a !important;
background-color: rgba(254, 240, 138, 0.1) !important;
  }
  .wp-sticky-note-body {
color: #fef08a !important; /* Mengubah teks menjadi terang kekuningan */
  }
  .wp-sticky-note-body strong {
color: #ffffff !important;
  }
}

/* ==========================================================================
   ULTIMATE OVERRIDE: CSS BLOCKQUOTE (MEMILIKI SINKRONISASI DARK MODE)
   ========================================================================== */
@layer tema-bawaan {
  /* 1. VARIABEL WARNA DEFAULT (MODE TERANG) */
  blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *) {
    --bq-border: #227aff;
    --bq-bg: #e3eeff;
    --bq-text: #227aff;
    --bq-heading: #227aff;

    border-left: 3px solid var(--bq-border) !important;
    background: var(--bq-bg) !important; 
    font-family: inherit !important;
    font-size: 1.05rem;
    color: var(--bq-text) !important;
    font-style: italic;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* 2. OVERRIDE DARK MODE (OTOMATIS SISTEM) */
  @media (prefers-color-scheme: dark) {
    blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *) {
      --bq-border: #3b82f6 !important;
      --bq-bg: rgba(59, 130, 246, 0.12) !important; /* Latar biru gelap transparan yang menyatu */
      --bq-text: #60a5fa !important;               /* Teks biru terang/pudar agar kontras di latar gelap */
      --bq-heading: #93c5fd !important;
    }
  }

  /* 3. OVERRIDE DARK MODE (TOGGLE MANUAL TEMA / MASTERSTUDY) */
  html[class*="dark"] blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *),
  body[class*="dark"] blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *),
  html[data-theme="dark"] blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *),
  [class*="dark-mode"] blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *),
  [class*="stm_lms_dark"] blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *),
  .masterstudy-dark-mode blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *) {
    --bq-border: #3b82f6 !important;
    --bq-bg: rgba(59, 130, 246, 0.12) !important;
    --bq-text: #60a5fa !important;
    --bq-heading: #93c5fd !important;
  }

  /* 4. PENATAN ELEMEN DALAM BLOCKQUOTE */
  blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *) p {
    color: var(--bq-text) !important;
    font-weight: normal !important;
  }
  
  blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *) h2, 
  blockquote:not([class*="wp-sticky-note"]):not(.wp-sticky-note-body *) h3 {
    color: var(--bq-heading) !important;
    font-weight: 600 !important;
  }
}

 
/* Teknik melipatgandakan kelas untuk mematikan padding, margin, dan warna bawaan LMS */
html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote {
	position: relative !important;
	
	/* MENIMPA PAKSA: Padding dan Margin bawaan MasterStudy LMS */
	padding: 14px 35px 14px 37px;
    margin: 52px 0 47px;
	
	/* MENIMPA PAKSA: Border dan Background (Tema Hijau Sage) */
	border-left: 3px solid #606a46 !important; 
	background: rgba(220, 225, 201, 0.6) !important; 
	
	/* Karakteristik Font Catatan */
	font-family: inherit !important;
	font-size: 1.05rem !important;
	color: #451a03 !important; 
	font-style: italic !important;
}

/* Menimpa paksa tag p di dalam blockquote khusus sticky note */
html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote p {
	color: #606a46 !important; 
	font-weight: 600 !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote ul,
html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote ol{
	margin: 14px !important;
}

/* --- Garis dekorasi tipis atas & bawah blockquote --- */
.wp-sticky-note-body blockquote::before, 
.wp-sticky-note-body blockquote::after { 
	display: block !important;
	position: absolute !important;
	width: 100% !important;
	height: 1px !important;
	z-index: 10 !important;
	left: 0 !important;
	background-color: rgba(96, 106, 70, 0.2) !important; 
}
.wp-sticky-note-body blockquote::before { top: -24px !important; content: "📍" !important; }
.wp-sticky-note-body blockquote::after { bottom: -32px !important; }

/* --- Penyesuaian Kontras Otomatis Saat Dark Mode Aktif --- */
@media (prefers-color-scheme: dark) {
	html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote {
		border-left-color: #a3b18a !important;
		background: rgba(163, 177, 138, 0.12) !important;
		color: #fef08a !important; 
	}
	html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote p {
		color: #a3b18a !important;
	}
	.wp-sticky-note-body blockquote::before, 
	.wp-sticky-note-body blockquote::after {
		background-color: rgba(163, 177, 138, 0.2) !important;
	}
} 

/* ==========================================================================
   CSS BOTTOM NAV & SCROLL TOP (MASTERSTUDY LMS COMPACT & BALANCED)
   ========================================================================== */

.mspwa-bottom-nav {
  position: fixed !important;
  bottom: 50px !important; /* Pas menempel di atas masterstudy-course-player-navigation {height: 50px;} */
  left: 0 !important;
  z-index: 99998 !important; 
  width: 100% !important;
  
  /* Padding atas & bawah seimbang sempurna (Tinggi Bar Proporsional) */
  padding: 10px 0 !important;
  line-height: 1 !important;
  
  /* TEMA WARNA BLEND (Sesuai Kondisi OK Sebelumnya) */
  --mspwa-bg: #ffffff;
  --mspwa-text: #1e293b;
  --mspwa-border: #e2e8f0;
  --mspwa-dropdown-bg: #ffffff;
  --mspwa-top-btn-bg: #1a73e8;
  --mspwa-top-btn-text: #ffffff;
  
  background-color: var(--mspwa-bg) !important;
  border-top: 1px solid var(--mspwa-border) !important;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.05) !important;
  
  /* Animasi transisi pergeseran saat kurikulum lms terbuka */
  transition: transform 0.3s ease, left 0.3s ease, width 0.3s ease, opacity 0.2s ease !important;
}

/* ==========================================================================
   PERBAIKAN: KONDISI RESPONSIF SAAT BURGER KURIKULUM LMS AKTIF
   ========================================================================== */

/* --- DI MOBILE (Layar di bawah 768px) --- */
@media (max-width: 768px) {
  /* Sembunyikan total menu bawah dan tombol top agar tidak menghalangi panel kurikulum mobile */
  html.masterstudy-burger-active .mspwa-bottom-nav,
  body.masterstudy-burger-active .mspwa-bottom-nav,
  .masterstudy-burger-active #mspwa-nav-bar,
  .masterstudy-burger-active #mspwa-to-top {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* --- DI DESKTOP / LAPTOP (Layar 769px ke atas) --- */
@media (min-width: 769px) {
  /* PERBAIKAN LOGIKA: Ketika kurikulum dibuka di kiri, geser menu kustom kita ke kanan */
  html.masterstudy-burger-active .mspwa-bottom-nav,
  body.masterstudy-burger-active .mspwa-bottom-nav,
  .masterstudy-burger-active #mspwa-nav-bar {
    left: 360px !important; /* Menggeser titik awal mulai dari batas akhir sidebar kurikulum LMS (~300px) */
    width: calc(100% - 360px) !important; /* Menyesuaikan lebar sisa area konten sebelah kanan */
  }
}

/* ==========================================================================
   DARK MODE SELECTOR MULTI-LEVEL (MEMPERTAHANKAN WARNA OK SEBELUMNYA)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .mspwa-bottom-nav {
    --mspwa-bg: #18191b; --mspwa-text: #e2e8f0; --mspwa-border: #2d2d30; --mspwa-dropdown-bg: #1c1c1e; --mspwa-top-btn-bg: #eab830; --mspwa-top-btn-text: #18191b;
  }
}
html[class*="dark"] .mspwa-bottom-nav, body[class*="dark"] .mspwa-bottom-nav,
html[data-theme="dark"] .mspwa-bottom-nav, [class*="dark-mode"] .mspwa-bottom-nav, 
[class*="stm_lms_dark"] .mspwa-bottom-nav, .masterstudy-dark-mode .mspwa-bottom-nav {
  --mspwa-bg: #18191b !important;
  --mspwa-text: #e2e8f0 !important;
  --mspwa-border: #2d2d30 !important;
  --mspwa-dropdown-bg: #1c1c1e !important;
  --mspwa-top-btn-bg: #eab830 !important;
  --mspwa-top-btn-text: #18191b !important;
}

/* ==========================================================================
   TATA LETAK INTERNAL KONTANIER
   ========================================================================== */
.mspwa-bottom-nav__container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.mspwa-bottom-nav__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
  color: var(--mspwa-text) !important; 
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.mspwa-bottom-nav__item:hover { color: #1a73e8 !important; }

.mspwa-bottom-nav__text {
  font-size: 0.78rem !important; 
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap;
  display: inline-block !important;
  line-height: 1 !important;
  padding: 2px 0 !important;
}

/* Kontrol Grid Responsif */
.mspwa-desktop-only { display: none !important; }
.mspwa-mobile-only { display: flex !important; }

/* Sistem Kontainer Dropdown */
.mspwa-bottom-nav__dropdown { position: relative; flex: 1; }
.mspwa-bottom-nav__dropdown-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 14px);
  right: 12px;
  background-color: var(--mspwa-dropdown-bg) !important;
  min-width: 160px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: 1px solid var(--mspwa-border);
  overflow: hidden;
  z-index: 1000000 !important;
}
.mspwa-bottom-nav__dropdown.is-open .mspwa-bottom-nav__dropdown-content { display: block !important; }
.mspwa-bottom-nav__dropdown-content a {
  color: var(--mspwa-text) !important;
  padding: 12px 14px;
  text-decoration: none !important;
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--mspwa-border);
  text-align: left;
}

/* ==========================================================================
   PERBAIKAN MUTLAK: BUTTON SCROLL TO TOP UNTUK MOBILE & DESKTOP
   ========================================================================== */
.mspwa-scroll-top-btn {
  position: fixed !important;
  bottom: 102px !important; /* Berada tepat di atas menu bar kustom */
  right: 16px !important;
  z-index: 99999 !important; 
  background-color: var(--mspwa-top-btn-bg) !important;
  color: #227aff !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  
  /* PERBAIKAN DESKTOP VISIBILITY: Kembalikan pemicu render dasar ke display block/flex */
  display: flex !important; 
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  
  /* Sembunyikan default menggunakan nilai 0 murni tanpa penutup hidden keras */
  opacity: 0 !important;
  pointer-events: none !important; 
  transform: translateY(15px) !important;
  
  /* Sinkronisasi transisi */
  transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.3s cubic-bezier(0.15, 0.85, 0.35, 1) !important;
}

/* KELAS PEMICU: Dipanggil melalui JavaScript saat halaman digulir */
.mspwa-scroll-top-btn.mspwa-show-btn {
  opacity: 1 !important;
  pointer-events: auto !important; 
  transform: translateY(0) !important;
}

/* ==========================================================================
   MEDIA QUERIES & SINKRONISASI AKURASI GERAK LAPTOP / COMPUTER (> 768px)
   ========================================================================== */
@media (min-width: 769px) {
  .mspwa-bottom-nav { 
    bottom: 50px !important; 
    padding: 12px 0 !important; 
    
    /* REVISI TRANSISI: Menggunakan kurva kurikulum MasterStudy Player agar sinkronisasi gerak 100% pas */
    transition: left 0.3s cubic-bezier(0.15, 0.85, 0.35, 1), width 0.3s cubic-bezier(0.15, 0.85, 0.35, 1), transform 0.25s ease !important;
  }
  
  .mspwa-desktop-only { display: flex !important; }
  .mspwa-mobile-only { display: none !important; }
  .mspwa-bottom-nav__text { font-size: 0.9rem !important; }
  
  .mspwa-scroll-top-btn { 
    bottom: 105px !important; 
    right: 24px !important;
    display: flex !important; /* Mengamankan visual di resolusi komputer */
  }
  
  /* LOGIKA SINKRONISASI: Menggeser posisi bar secara instan mengikuti ritme buka tutup kurikulum */
  html.masterstudy-burger-active .mspwa-bottom-nav,
  body.masterstudy-burger-active .mspwa-bottom-nav {
    left: 360px !important; 
    width: calc(100% - 360px) !important; 
  }
}

/* FLIP CARD */
/* =========================================
   1. TEMA WARNA INDIGO/SLATE (LIGHT & DARK)
========================================= */
.kr-flipcard-container {
  --krd-bg-card: #f8fafc;
  --krd-border-card: #e2e8f0;
  --krd-shadow: rgba(79, 70, 229, 0.08);
  
  --krd-question-text: #0f172a; /* Diubah lebih gelap untuk Light Mode agar sangat kontras */
  --krd-hangul-text: #4338ca;
  --krd-romaja-text: #475569;
  --krd-click-hint: #6366f1;
  
  --krd-badge-bg: #e0e7ff;
  --krd-badge-text: #3730a3;
  --krd-badge-ans-bg: #dcfce7;
  --krd-badge-ans-text: #166534;

  --krd-puzzle-bg: #ffffff;
  --krd-puzzle-border: #cbd5e1;
  --krd-puzzle-text: #1e293b;
  
  width: 100%;
  display: block; /* Memastikan container mengambil full width yang tersedia */
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; 
  margin: 0 auto;
  padding: 10px 0;
}

/* DARK MODE Masterstudy - Soft Deep Navy/Slate */
html[class*="dark"] .kr-flipcard-container, 
body[class*="dark"] .kr-flipcard-container,
html[data-theme="dark"] .kr-flipcard-container, 
[class*="dark-mode"] .kr-flipcard-container, 
[class*="stm_lms_dark"] .kr-flipcard-container, 
.masterstudy-dark-mode .kr-flipcard-container {
  --krd-bg-card: #1e2538 !important;
  --krd-border-card: #2d3748 !important;
  --krd-shadow: rgba(0, 0, 0, 0.3) !important;
  
  --krd-question-text: #ffffff !important; /* Putih bersih untuk Dark Mode */
  --krd-hangul-text: #c7d2fe !important; /* Indigo terang agar sangat jelas */
  --krd-romaja-text: #94a3b8 !important;
  --krd-click-hint: #a5b4fc !important;
  
  --krd-badge-bg: #2e3757 !important;
  --krd-badge-text: #e0e7ff !important;
  --krd-badge-ans-bg: #14532d !important; 
  --krd-badge-ans-text: #bbf7d0 !important;

  --krd-puzzle-bg: #151b28 !important;
  --krd-puzzle-border: #334155 !important;
  --krd-puzzle-text: #f8fafc !important;
}

/* =========================================
   2. GRID RESPORSIF (Perbaikan Layout)
========================================= */
.kr-flipcard-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default Mobile: 1 Kolom Penuh */
  gap: 24px;
  width: 100%;
  margin: 0 !important; /* Reset margin dari tema LMS */
  padding: 0 !important;
  box-sizing: border-box;
  justify-items: center; /* Memastikan kartu ada di tengah jika ruang sisa */
  align-items: stretch; /* Memastikan tinggi kartu dalam 1 baris sama rata */
}

/* Aturan Desktop: 2 Kolom Kiri ke Kanan */
@media (min-width: 768px) {
  .kr-flipcard-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: start; /* Paksa layout dimulai dari kiri, bukan kanan */
    justify-items: stretch; /* Kartu akan meregang memenuhi lebar 50% grid */
  }
}

/* =========================================
   3. STRUKTUR & EFEK FLIP (HOVER AMAN)
========================================= */
.kr-flipcard {
  position: relative;
  display: block;
  width: 100%;
  perspective: 1000px;
  margin: 0;
  cursor: pointer; 
}

.kr-flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%; /* Penting agar stretch dari grid bekerja */
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  display: grid; 
}

/* TRIGGER FLIP */
.kr-flipcard:hover .kr-flipcard-inner {
  transform: rotateY(180deg);
}

.kr-flipcard-front, 
.kr-flipcard-back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 24px; /* Padding dibesarkan agar proporsional dengan font besar */
  border-radius: 16px;
  background-color: var(--krd-bg-card);
  border: 1px solid var(--krd-border-card);
  box-shadow: 0 4px 12px var(--krd-shadow);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.kr-flipcard-back {
  transform: rotateY(180deg);
}
.masterstudy-course-player-lesson .kr-flipcard-back p {
	font-size: 1.5rem !important;
}

.kr-flipcard:hover .kr-flipcard-front,
.kr-flipcard:hover .kr-flipcard-back {
  border-color: var(--krd-click-hint);
  box-shadow: 0 8px 20px var(--krd-shadow); /* Shadow lebih menonjol saat di-hover */
}
.kr-flipcard-inner p:empty {
  display: none !important;
} 
.kr-flipcard-inner p:not(:has(*)):not(:has(text)) {
    /* Menghapus ruang vertikal */
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}
.kr-flipcard-inner p:blank {
    display: none !important;
}

/* =========================================
   4. TIPOGRAFI & UKURAN TEKS (DIBESARKAN)
========================================= */
.kr-badge {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: var(--krd-badge-bg);
  color: var(--krd-badge-text);
  margin-bottom: 20px; /* Jarak dijauhkan dari teks */
}

.kr-badge.back-badge {
  background-color: var(--krd-badge-ans-bg);
  color: var(--krd-badge-ans-text);
}

/* Pertanyaan (Soal): Jauh Lebih Besar & Jelas */
.masterstudy-course-player-lesson .kr-question {
  /* Mobile min: 1.35rem (~21px), Desktop max: 1.75rem (~28px) */
  font-size: clamp(1.35rem, 3.5vw, 1.75rem) !important;
  font-weight: 700 !important; /* DIPAKSA BOLD */
  color: var(--krd-question-text);
  margin: 0 0 16px 0;
  line-height: 1.4 !important;
  letter-spacing: -0.02em; /* Agar teks tebal terlihat lebih rapi */
}

/* Teks Hangul (Jawaban): Sangat Mendominasi & Jelas */
.kr-hangul {
  /* Mobile min: 2.2rem (~35px), Desktop max: 3.2rem (~51px) */
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700 !important; /* DIPAKSA BOLD */
  color: var(--krd-hangul-text);
  margin: 0 0 12px 0;
  line-height: 1.25;
  word-break: keep-all; 
  letter-spacing: -0.03em;
}

/* Romaja: Sedikit dibesarkan agar mudah dibaca */
.kr-romaja {
  font-size: 1.1rem;
  color: var(--krd-romaja-text);
  margin: 0;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.kr-click-hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--krd-click-hint);
  margin-top: 24px; /* Memberi ruang agar tidak terlalu sesak dengan soal */
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* Puzzle Element: Dibesarkan Sedikit */
.kr-puzzle-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.masterstudy-course-player-lesson .kr-puzzle-piece {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  background-color: var(--krd-puzzle-bg);
  color: var(--krd-puzzle-text);
  border: 1px solid var(--krd-puzzle-border);
  margin-bottom:14px;
}


/* LIST .note-footer CATATAN PENTING */
/* Mengatur perataan teks dan posisi bullet pada Unordered List */
.masterstudy-course-player-lesson .note-footer ul, .masterstudy-course-player-lesson .note-footer ol {
  text-align: left !important;
  list-style-position: outside !important;
  padding-left: 24px !important; /* Mengatur jarak indentasi bullet dari pinggir kiri */
  margin-bottom: 16px;
}

/* Mengatur jarak antar item list */
.masterstudy-course-player-lesson .note-footer ul li, .masterstudy-course-player-lesson .note-footer ol li {
  text-align: left !important;
  margin-bottom: 8px; /* Memberikan spasi antar baris list agar lebih mudah dibaca */
  line-height: 1.6;
}

/* note Blockquote */
.masterstudy-course-player-lesson .keterangan {
	margin: 14px auto !important;
}
.masterstudy-course-player-lesson .keterangan p {
	line-height: 1rem !important;
	font-weight: normal !important;
}
@media (min-width: 768px) {
    .masterstudy-course-player-lesson .blockquote-desktop {
        display: flex;
    }
}

.masterstudy-course-player-lesson .dikte {
	text-align: center !important;
}

/* .quote dalam section CATATAN PENTING */ 
.masterstudy-course-player-lesson .important-note .quote {
  /* Default: LIGHT MODE */
  --krbq-bg: #FDF4FF;           
  --krbq-border: #e7c3cb;       
  --krbq-text: #334155;         
  --krbq-text-hangul: #1e3a8a;  

  background-color: var(--krbq-bg) !important;
  border: 1px dashed var(--krbq-border) !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
  border-radius: 8px !important; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); 
}

/* Mengatur warna teks di dalam .quote agar seragam */
.masterstudy-course-player-lesson .important-note .quote p, 
.masterstudy-course-player-lesson .important-note .quote span, 
.masterstudy-course-player-lesson .important-note .quote div {
  color: var(--krbq-text) !important;
  line-height: 1.6 !important;
}

/* Opsional: Font Hangul di dalam .quote */
.masterstudy-course-player-lesson .important-note .quote p:lang(ko),
.masterstudy-course-player-lesson .important-note .quote .kr-hangul {
  color: var(--krbq-text-hangul) !important;
  font-weight: 600;
}

/* ==========================================================================
   DARK MODE OVERRIDES (MASTERSTUDY)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .masterstudy-course-player-lesson .important-note .quote {
    --krbq-bg: rgba(59, 130, 246, 0.1) !important; 
    --krbq-border: #e11d48 !important;             
    --krbq-text: #cbd5e1 !important;               
    --krbq-text-hangul: #93c5fd !important;        
  }
}

/* Menimpa ketika user mengaktifkan toggle Dark Mode secara manual dari tema */
html[class*="dark"] .masterstudy-course-player-lesson .important-note .quote,
body[class*="dark"] .masterstudy-course-player-lesson .important-note .quote,
html[data-theme="dark"] .masterstudy-course-player-lesson .important-note .quote,
[class*="dark-mode"] .masterstudy-course-player-lesson .important-note .quote,
[class*="stm_lms_dark"] .masterstudy-course-player-lesson .important-note .quote,
.masterstudy-dark-mode .masterstudy-course-player-lesson .important-note .quote {
  --krbq-bg: rgba(59, 130, 246, 0.1) !important;
  --krbq-border: #e11d48 !important;
  --krbq-text: #cbd5e1 !important;
  --krbq-text-hangul: #93c5fd !important;
}

/* =======================================================
   TABLE DI STICKY NOTE (KEBAL DARI DARK MODE UTAMA)
   ======================================================= */

/* 1. Mengunci Border Luar Kotak Tabel */
.masterstudy-course-player-lesson .wp-sticky-note-box table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
    margin-bottom: 24px !important;
    border-collapse: collapse !important;
    font-size: 15px !important;
    border: 1px solid #eab308 !important; /* Border kuning tua */
}

/* 2. Menghapus Border Bawaan Pada Baris (tr) */
.masterstudy-course-player-lesson .wp-sticky-note-box table tr {
    border: none !important;
}

/* 3. Menghapus Border & Menata Header (th) */
.masterstudy-course-player-lesson .wp-sticky-note-box table th {
    color: #fef08a !important; /* Teks kuning pucat */
    background-color: #854d0e !important; /* Latar coklat tua */
    font-weight: bold !important;
    text-align: left !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border: none !important; /* Paksa hapus border dalam */
}

/* 4. Menghapus Border & Menata Sel Isi (td) */
.masterstudy-course-player-lesson .wp-sticky-note-box table td {
    color: #451a03 !important; /* Teks coklat tua gelap */
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border: none !important; /* Paksa hapus border dalam */
}

/* 5. Sistem Efek Striped Ganjil-Genap 
   (PENTING: Harus menargetkan 'td' agar menang dari CSS tabel utama) */
.masterstudy-course-player-lesson .wp-sticky-note-box table tr:nth-of-type(odd) td {
    background-color: #fef08a !important; /* Kuning pastel */
}

.masterstudy-course-player-lesson .wp-sticky-note-box table tr:nth-of-type(even) td {
    background-color: #f6e779 !important; /* Kuning pastel sedikit lebih pekat */
}

/* 6. Efek Hover Halus */
.masterstudy-course-player-lesson .wp-sticky-note-box table tr:hover td {
    background-color: #fde047 !important; /* Kuning terang saat disorot */
    transition: background-color 0.15s ease;
}

/* TOGGLE HIDE-SHOW ELEMEN */ 
/* 1. Reset standard arrow bawaan browser */
.quiz-accordion {
	margin-top: 15px;
}
  details.quiz-accordion summary::-webkit-details-marker {
    display: none;
  }
details.quiz-accordion summary {
    list-style: none;
  }

  /* 2. Desain Tombol Utama */
.masterstudy-course-player-lesson .wp-sticky-note-box details.quiz-accordion summary, details.quiz-accordion summary {
    display: block;
    position: relative;
    background-color: #f1f5f9;
    color: #1e293b;
    padding: 12px 40px 12px 30px; /* Beri jarak kanan 40px untuk ruang ikon */ 
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    user-select: none;
    transition: background-color 0.2s ease;
  }

  /* Efek hover pada tombol */
  details.quiz-accordion summary:hover {
    background-color: #e2e8f0;
  }
html body .wp-sticky-note-box.wp-sticky-note-box .wp-sticky-note-body blockquote details.quiz-accordion summary {
    font-style: normal;
}
  /* Perubahan gaya tombol saat STATUS TERBUKA (SHOW) */
.masterstudy-course-player-lesson .wp-sticky-note-box details.quiz-accordion[open] summary, details.quiz-accordion[open] summary {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #2563eb;
    border-radius: 6px 6px 0 0;
  }

  /* 3. PEMBUATAN IKON DENGAN CSS PURE (TANPA TAG DI HTML) */
  /* Kita gunakan pseudo-element ::after sebagai wadah tempat menaruh panah */
  details.quiz-accordion summary::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 25px; /* Posisi vertikal awal */
    transform: translateY(-50%); /* Sempurna di tengah */
    
    /* Trik membuat Segitiga Sempurna menggunakan border CSS */
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #000; /* Warna panah abu-abu saat HIDE */
    
    transition: transform 0.2s ease, border-left-color 0.2s ease;
  }

  /* Perubahan perilaku ikon saat STATUS TERBUKA (SHOW) */
  details.quiz-accordion[open] summary::after {
    border-left-color: #ffffff; /* Ubah warna panah jadi putih karena background tombol jadi biru */
    /* Putar segitiga ke bawah secara presisi dari titik tengahnya */
    transform: translateY(-50%) rotate(90deg); 
  }

  /* 4. Desain Kotak Konten Jawaban */
  details.quiz-accordion .quiz-content {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 15px;
    animation: slideDown 0.2s ease-out;
  }

  /* Animasi kemunculan teks jawaban */
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
/* HEADING SOAL QUIZ H1-H5 */
/* ==========================================================================
   DARK MODE OVERRIDES (QUESTION TITLE & ANSWERS)
   ========================================================================== */

/* 1. Mengikuti Pengaturan Sistem OS (Prefers Color Scheme) */
@media (prefers-color-scheme: dark) {
  /* Heading Pertanyaan (H1-H5) */
  .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h1,
  .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h2,
  .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h3,
  .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h4,
  .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h5 {
    color: #ffffff !important;
  }
  
  /* Opsi Jawaban Default */
  .masterstudy-course-player-question-answer,
  .masterstudy-course-player-question-answer span,
  .masterstudy-course-player-question-answer label {
    color: #e0e0e0 !important;
  }
  
  /* Opsi Jawaban saat di-Hover/Terpilih */
  .masterstudy-course-player-question-answer:hover,
  .masterstudy-course-player-question-answer:hover span,
  .masterstudy-course-player-question-answer:hover label,
  .masterstudy-course-player-question-answer.selected {
    color: #ffffff !important;
  }
}

/* 2. Menimpa ketika user mengaktifkan toggle Dark Mode secara manual dari tema */
/* Menggunakan :is() untuk meringkas semua prefix class dark mode Anda */

/* Heading Pertanyaan (H1-H5) */
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h1,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h2,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h3,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h4,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question__title .masterstudy-course-player-question-render-content h5 {
  color: #ffffff !important;
}

/* Opsi Jawaban Default */
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer span,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer label {
  color: #e0e0e0 !important;
}

/* Opsi Jawaban saat di-Hover/Terpilih */
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer:hover,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer:hover span,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer:hover label,
:is(html[class*="dark"], body[class*="dark"], html[data-theme="dark"], [class*="dark-mode"], [class*="stm_lms_dark"], .masterstudy-dark-mode) .masterstudy-course-player-question-answer.selected {
  color: #ffffff !important;
}

/* TABLE DI AWAL TIAP QUIZ */
/* ==========================================================================
   BASE STYLES & LIGHT MODE VARIABLES (MASTERSTUDY QUIZ TABLE)
   ========================================================================== */
.masterstudy-course-player-quiz__content {
    /* Variabel Warna Light Mode */
    --tbl-border: #e2e8f0;
    --tbl-text: #334155;
    --tbl-header-text: #0f172a;
    --tbl-header-bg: #eef1f7;
    --tbl-fail-bg: #ef4444; /* Merah solid terang */
    --tbl-fail-text: #ffffff; /* Teks putih agar kontras */
}

/* Tabel Responsif */
.masterstudy-course-player-quiz__content .quiz-grade-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    text-align: left;
    display: block; /* Membuat tabel bisa di-scroll horizontal di HP */
    overflow-x: auto;
    white-space: nowrap;
}

/* Mengembalikan tampilan tabel normal di layar desktop (Tablet ke atas) */
@media (min-width: 768px) {
    .masterstudy-course-player-quiz__content .quiz-grade-table {
        display: table;
        white-space: normal;
    }
}

/* Styling Sel (Borders & Padding) */
.masterstudy-course-player-quiz__content .quiz-grade-table th,
.masterstudy-course-player-quiz__content .quiz-grade-table td {
    padding: 12px 15px;
    border: 1px solid var(--tbl-border);
    color: var(--tbl-text);
    transition: all 0.3s ease;
}

/* Styling Header */
.masterstudy-course-player-quiz__content .quiz-grade-table th {
    font-weight: 600;
    color: var(--tbl-header-text);
    background-color: var(--tbl-header-bg) !important;
}

/* Styling Baris Grade D (Tidak Lulus) */
.masterstudy-course-player-quiz__content .quiz-grade-table tr.row-fail td,
.masterstudy-course-player-quiz__content .quiz-grade-table tr.row-fail td strong {
    background-color: var(--tbl-fail-bg) !important;
    color: var(--tbl-fail-text) !important;
    border-color: var(--tbl-border);
}


/* ==========================================================================
   DARK MODE OVERRIDES (MASTERSTUDY)
   ========================================================================== */
/* Deteksi preferensi OS/Browser Dark Mode */
@media (prefers-color-scheme: dark) {
    .masterstudy-course-player-quiz__content {
        --tbl-border: #334155 !important;
        --tbl-text: #cbd5e1 !important;
        --tbl-header-text: #f8fafc !important;
        --tbl-header-bg: #227aff;
        --tbl-fail-bg: rgba(220, 53, 69, 0.25) !important; /* Merah transparan yang blend dengan dark bg */
        --tbl-fail-text: #ff9fb0 !important; /* Merah muda pastel agar mudah dibaca */
    }
}

/* Menimpa ketika user mengaktifkan toggle Dark Mode secara manual dari tema */
html[class*="dark"] .masterstudy-course-player-quiz__content,
body[class*="dark"] .masterstudy-course-player-quiz__content,
html[data-theme="dark"] .masterstudy-course-player-quiz__content,
[class*="dark-mode"] .masterstudy-course-player-quiz__content,
[class*="stm_lms_dark"] .masterstudy-course-player-quiz__content,
.masterstudy-dark-mode .masterstudy-course-player-quiz__content {
    --tbl-border: #334155 !important;
    --tbl-text: #cbd5e1 !important;
    --tbl-header-text: #f8fafc !important;
    --tbl-header-bg: #227aff;
    --tbl-fail-bg: rgba(220, 53, 69, 0.25) !important;
    --tbl-fail-text: #ff9fb0 !important;
}

/* BUTTON SERTIFIKAT CHECKER */
.stm_lms_certificate_checker .stm-lms-message.success {
     background-color: #66BB6A;  
}

.stm_lms_certificate_checker__form a.btn.btn-default, .stm_lms_certificate_checker__form a.btn.btn-default:active, .stm_lms_certificate_checker__form a.btn.btn-default:hover, .stm_lms_certificate_checker__form a.btn.btn-default:focus {
    background-color: #48a7d4; 
}

.masterstudy-page-certificate__course-image { 
	height: auto !important; 
}

/* UI FRONT END COURSE PAGE */
.stm_lms_account_dropdown .dropdown .masterstudy-dropdown-menu__main-column { 
  background-color: #001931 !important;
}
.header_6 .header-menu-mobile .sign-up-item .btn {
  border-radius: 8px; 
}
.stm_lms_account_dropdown .dropdown.open button .login_name, .stm_lms_account_dropdown .dropdown.open button .stmlms-user11, .stm_lms_account_dropdown .dropdown button:hover .login_name, .stm_lms_account_dropdown .dropdown button:hover .stmlms-user11 {
  color: inherit !important;
}
.stm_lms_account_dropdown .dropdown.open button .caret {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  color: inherit !important;
}

.navbar-toggle.collapsed .icon-bar {
  background-color: #001931 !important;
}

.navbar-toggle .icon-bar, .navbar-toggle:hover .icon-bar { 
  background-color: #025ed5 !important; 
}
.header-menu-mobile .header-menu > li > a { 
  background-color: #025ed5 !important; 
}
#searchform-mobile .search-wrapper .search-submit {
  color: #333 !important;
}

#searchform-mobile .search-wrapper .search-input {  
  width: 100%;
  padding: 12px 20px; 
  border: 1px solid #00adb5;
  border-radius: 8px;
  outline: none;  
  box-shadow: 0 0 10px rgba(2, 94, 213, 0.6);
  transition: all 0.3s ease-in-out;
}
.right_buttons .header-login-button.account .stm_lms_account_dropdown .dropdown .dropdown-menu a:hover { 
  background: #025ed5; 
}
.stm_lms_account_dropdown .dropdown .masterstudy-dropdown-menu__logout a span {
	color: #fff !important;
	padding: 10px 15px;
	border-radius: 3px; 
	background: #025ed5; 
}
.stm_lms_course__content p { 
	font-size: 17px !important; 
}

/* FRONTEND WOOCOMMERCE */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
	min-height: 3em;
  background: #227AFF !important;
  border-radius: 8px !  important;
}
.stm_lms_button .select2-container--default .select2-results__option--highlighted[aria-selected] { 
    color: inherit !important;
}
.stm_lms_user_float_menu .float_menu_item:hover,
.stm_lms_user_float_menu .float_menu_item_active {
  background-color:#408CFF !important;
}
.stm_lms_user_float_menu__toggle:hover{
  background: #227AFF !important;
}
.stm-lms-logout-button:hover {
  background:#ff0000 !important; 
}
.masterstudy-account-my-certificates__certificate .masterstudy-account-my-certificates__certificate-actions {
  opacity:1;
  pointer-events:auto
}

.stm_lms_courses__single--info_preview a { 
	background-color: #247aff !important;
  border-radius: 10px;
}
.stm_lms_courses__single--info_preview a:hover { 
	background-color: #001931 !important; 
} 
.stm_lms_courses__grid .stm_lms_courses__single--info .stm_lms_courses__single--info_title a:hover h4 {
  color:#001931 !important
}

/* POSISI LABEL COUNTRY FORM CHECKOUT */
/* KBK123 - Perbaikan tampilan Country pada WooCommerce Checkout Block */ 
.wc-block-components-address-form__country
.select2-selection__rendered {
    padding-top: 15px !important;
    line-height: 1.8 !important;
}
body:not(.academy, .classic_lms, .classic-lms-2) span.select2-container--default .select2-selection--single span.select2-selection__arrow { 
	display: none !important;
}

/* ==========================================================================
   PRICE & ADD TO CART CARD FRONTEND (Berlaku untuk Desktop & Mobile)
   ========================================================================== */

/* Menghilangkan border dan garis bawaan theme yang mengotori tampilan */
.stm_product_meta_single_page.right {
    margin-left: 0 !important;
    border: none !important;
    background: transparent !important;
}
.stm_product_meta_single_page.right::before,
.stm_product_meta_single_page.right::after,
.shop_sidebar_single_page::before,
.shop_sidebar_single_page::after {
    display: none !important;
}

.single_add_to_cart_button { 
  max-width: 100%; 
}
.stm_product_meta_single_page.right p.price {
  text-align: center !important;
}

/* Membentuk Card UI yang bersih dan modern */
.stm_product_meta_single_page.right {
    background-color: #ffffff !important;
    padding: 25px !important;
    border: 1px solid #e2e8f0 !important; /* Border kartu yang sangat halus */
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.03) !important;
    text-align: left !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}

/* Tipografi Label "PRICE" */
.stm_product_meta_single_page.right .stm_price_label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Tipografi Nominal Harga */
.stm_product_meta_single_page.right .woocommerce-Price-amount {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-bottom: 24px !important;
}

/* Merapikan jarak pembungkus harga bawaan WooCommerce */
.stm_product_meta_single_page.right p.price {
    margin-bottom: 0 !important;
}

/* Desain Tombol "TAMBAH KE KERANJANG" */
.stm_product_meta_single_page.right .single_add_to_cart_button {
    width: 100% !important;
    padding: 16px 20px !important;
    background-color: #3ba1da !important; /* Menyesuaikan warna biru brand Anda */
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(59, 161, 218, 0.3) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Efek Hover pada Tombol */
.stm_product_meta_single_page.right .single_add_to_cart_button:hover {
    background-color: #2b8abc !important;
    box-shadow: 0 6px 16px rgba(59, 161, 218, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   2. PERBAIKAN TATA LETAK KHUSUS MOBILE (< 992px)
   ========================================================================== */

@media (max-width: 991px) {
    /* Memaksa kolom tampil dan memperbaiki masalah konten terpotong di kanan */
    div.col-lg-3.hidden-sm.hidden-xs:has(> .stm_product_meta_single_page.right) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important; /* Mencegah pelebaran keluar layar */
        float: none !important;
        clear: both !important;
        padding: 20px 15px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}

/* LINK MEMBERSHIP PROFILE */
.masterstudy-account-pmp-memberships__memberships.pmpro_box a{color: #227AFF;}
.masterstudy-account-pmp-memberships__memberships.pmpro_box a:hover{color: blue;}

/* CARD IMG PRODUCT WOOCOMMERCE */
.pull-left, .pull-right .price  { 
	display: none;
}
.stm_archive_product_inner_unit .stm_archive_product_inner_unit_centered .stm_featured_product_footer { 
	border: none; 
}
.stm_archive_product_inner_unit .stm_archive_product_inner_unit_centered .stm_featured_product_body { 
	border-radius: 0 0 10px 10px;
}
.stm_featured_product_image img {
	border-radius: 12px 12px 0 0;
}

/* ==========================================================================
   2. PERBAIKAN TAMPILAN WIDGET KERANJANG (SIDEBAR)
   ========================================================================== */
/* Container Widget */
.widget_shopping_cart {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eaedf2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.widget_shopping_cart .widget_title h3 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eaedf2;
    padding-bottom: 10px;
    color: #0f172a;
}

/* List Item Produk */
.widget_shopping_cart_content ul.cart_list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.widget_shopping_cart_content ul.cart_list li {
    position: relative;
    padding: 15px 0 15px 24px; /* Ruang di sisi kiri untuk tombol "x" */
    border-bottom: 1px dashed #eaedf2;
    display: flex;
    flex-direction: column;
}

/* Tombol Hapus (x) */
.widget_shopping_cart_content ul.cart_list li a.remove {
    position: absolute;
    left: 0;
    top: 15px;
    color: #ef4444 !important; /* Warna icon silang menjadi merah */
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.2s ease;
}

.widget_shopping_cart_content ul.cart_list li a.remove:hover {
    transform: scale(1.2);
    background: transparent !important;
}

/* Container Teks dan Gambar Thumbnail (Flexbox) */
.widget_shopping_cart_content ul.cart_list li > a:not(.remove) {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.4;
}

/* Gambar Thumbnail Keranjang */
.widget_shopping_cart_content ul.cart_list li img {
    width: 70px !important; /* Membatasi ukuran gambar asli yang 600px */
    height: auto !important;
    border-radius: 6px;
    object-fit: cover;
    aspect-ratio: 330 / 185;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Teks Kuantitas & Harga Produk */
.widget_shopping_cart_content ul.cart_list li .quantity {
    font-size: 13px;
    color: #64748b;
    margin-top: 8px;
    margin-left: 82px; /* Sejajar dengan teks judul setelah dipotong gambar 70px + gap 12px */
    display: block;
}

.widget_shopping_cart_content ul.cart_list li .quantity .amount {
    font-weight: 700;
    color: #16a34a;
}

/* Baris Subtotal Harga */
.widget_shopping_cart_content .total {
    border-top: 1px solid #eaedf2;
    padding-top: 15px;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    color: #0f172a;
}

/* Area Tombol Aksi */
.widget_shopping_cart_content .buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 0;
}

/* Styling Dasar Tombol Keranjang */
.widget_shopping_cart_content .buttons a.button {
    flex: 1; /* Tombol dibuat berdampingan rata (50% : 50%) */
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
}

/* Tombol "View Cart" */
.widget_shopping_cart_content .buttons a.button.wc-forward:not(.checkout) {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: none !important;
}

.widget_shopping_cart_content .buttons a.button.wc-forward:not(.checkout):hover {
    background-color: #e2e8f0 !important;
}

/* Tombol "Checkout" */
.widget_shopping_cart_content .buttons a.button.checkout {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}

.widget_shopping_cart_content .buttons a.button.checkout:hover {
    background-color: #1d4ed8 !important;
}
.widget_shopping_cart_content .buttons {
	display: block; 
}
.widget_shopping_cart_content .button.wc-forward {
	width: 100%;
} 

.sidebar_position_right .archive-course-title {
	display: none;
}

@media (max-width: 767px) {
  .woocommerce ul.stm-courses li.product {
    padding: 0; 
  }
}

/* CHEKOUT PAYMENT OPTION PAGE */
.wc-block-components-payment-method-label {
	color: #247aff;
	font-weight: 600;
	font-size: 14px;
}

/* LOGIN PAGE */
.pmpro .pmpro_error a {
	color: #0000ff;
	text-decoration: underline !important;
}
.pmpro_card_actions .pmpro_actions_nav a {
	color: #0c3d54;
	text-decoration: underline !important;
}