/* isolasi dari Elementor */
.my-app {
    all: initial;
    font-family: Arial, sans-serif;
}

/* aktifkan kembali dasar */
.my-app * {
    all: unset;
    box-sizing: border-box;
}

/* override penting */
.my-app .card {
    display: block;
    background: #fff;
}



/* ========================= */
/* 🎓 SPEAKING SYSTEM FULL STYLE */
/* ========================= */

.speakingsystem-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  padding: 0 10px;
  box-sizing: border-box;
	text-align: center;
}

.speakingsystem-pagination-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: fit-content;
	margin: 0 auto;
}

.speakingsystem-page-info {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}


/* ========================= */
/* GLOBAL RESET */
/* ========================= */

.speakingsystem-wrapper,
.speakingsystem-wrapper *,
.elementor-widget-container .speakingsystem-wrapper,
.elementor-widget-container .speakingsystem-wrapper *{
    box-sizing:border-box !important;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.speakingsystem-wrapper{
    max-width:700px !important;
    width:100% !important;

    margin:20px auto !important;
    padding:15px !important;

    background:#eef3fb !important;
    border-radius:20px !important;

    display:block !important;
    overflow:hidden !important;

    position:relative !important;
}

/* ========================= */
/* HEADER */
/* ========================= */

.speakingsystem-header{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;

    background:linear-gradient(135deg,#ffb347,#ff8c42) !important;

    padding:12px !important;
    border-radius:16px !important;

    color:#fff !important;

    margin-bottom:15px !important;
}

.speakingsystem-number{
    background:#4a90e2 !important;
    color:#fff !important;

    width:36px !important;
    height:36px !important;

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

    border-radius:12px !important;

    font-weight:bold !important;
    font-size:15px !important;

    flex-shrink:0 !important;
}

.speakingsystem-title{
    font-weight:bold !important;
    font-size:19px !important;

    color:#fff !important;

    line-height:1.4 !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        0 4px 10px rgba(0,0,0,0.2) !important;
}

/* CARD */
.speakingsystem-card{
  background:#fff;
  border-radius:16px;
  padding:15px;
  margin-top:15px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
}

/* SECTION TITLE */
.speakingsystem-section-title{
  font-weight:bold;
  margin-bottom:10px;
  position: relative;
  padding-bottom: 8px;
}

/* garis bawah */
.speakingsystem-section-title::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  background:#e5e7eb;
  margin-top:6px;
}

/* LIST */
.speakingsystem-list{
  padding-left:18px;
  color:#555;
}

/* RUMUS */
.speakingsystem-rumus{
  background:#f1f4fa;
  padding:10px;
  border-radius:10px;
  margin-bottom:8px;
}

/* ITEM */
.speakingsystem-item{
  margin-bottom:12px;
  cursor:pointer;
  transition: all 0.25s ease;
}

.speakingsystem-item:hover{
  background:#eef4ff;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.speakingsystem-item:active{
  transform:scale(0.97);
}

/* ENGLISH */
.speakingsystem-en{
  font-weight:bold;
  color:#000;
  cursor:pointer;
  font-size:16px;
  display:inline-block;
}

/* ACTIVE */
.speakingsystem-en.active{
  background:#e0ecff;
  border-radius:8px;
  padding:4px 6px;
}

/* TRANSLATION */
.speakingsystem-id{
  color:#777;
  font-size:15px;
  line-height:1.5;
}

/* TAGS */
.speakingsystem-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.speakingsystem-tag{
  background:#f1f4fa;
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
  cursor:pointer;
}



/* ===================== */
/* 🔥 SPEAKING SYSTEM PAGINATION 
/* ===================== */


/* BUTTON */
.speakingsystem-page-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin: 0 4px;
  font-size: 13px;
  font-weight: bold;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* HOVER */
.speakingsystem-page-btn:hover {
  transform: scale(1.08);
  background: #2563eb;
}

/* ACTIVE */
.speakingsystem-page-btn.active {
  background: #22c55e;
  transform: scale(1.1);
}

/* 🔥 NAV BUTTON (INI YANG FIX MASALAH KAMU) */
.speakingsystem-page-btn.nav-btn {
  background: none;
  color: #333;
  width: auto;
  height: auto;
  font-size: 14px;
}

/* DISABLED */
.speakingsystem-page-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* INFO */
.speakingsystem-page-info {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

/* MOBILE */
@media (max-width: 480px) {
  .speakingsystem-page-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin: 0 3px;
  }

  .speakingsystem-page-info {
    font-size: 11px;
  }
}


@media (max-width: 480px){

  .speakingsystem-pagination-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;      /* 🔥 INI KUNCI UTAMA (biar tidak turun) */
    gap: 4px;
  }

  .speakingsystem-page-btn{
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin: 0 2px;
  }

  /* 🔥 NAV BUTTON (<< >>) biar tidak bikin turun */
  .speakingsystem-page-btn.nav-btn{
    width: 28px;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

}



/* ========================= */
/* FIX ERROR CORRECTION LAYOUT */
/* ========================= */

/* paksa setiap item jadi vertikal */
.speakingsystem-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* english harus full baris */
.speakingsystem-en{
  display: block !important;
  width: 100%;
  margin-bottom: 3px;
}

/* translation tetap di bawah */
.speakingsystem-id{
  display: block;
  width: 100%;
}