/**
 * SIM Public — CSS Variables Bridge
 * @version 1.4.0
 * @author  YoiKut.com Team
 *
 * CARA KERJA:
 * 1. :root mendefinisikan --sim-pub-* sebagai FALLBACK defaults.
 * 2. Admin > Tampilan Dashboard menyimpan ke DB option "sim_appearance".
 * 3. wp_head (priority 5) output <style id="sim-appearance-vars"> yang
 *    override :root vars dengan nilai yang disimpan user.
 * 4. File ini dimuat SEBELUM sim-form-login.css (via dependency array),
 *    sehingga semua aturan !important di sini MENANG atas hardcoded hex
 *    yang ada di sim-form-login.css, sim-dashboard-template.css, dll.
 *
 * COVERAGE: Login · Checkout · Konfirmasi · Dashboard · Package List
 */

/* ================================================================
   § 1. FALLBACK CSS CUSTOM PROPERTIES
       (override oleh wp_head <style id="sim-appearance-vars">)
   ================================================================ */
:root {
  --sim-pub-primary:       #3a8686;
  --sim-pub-primary-dark:  #1a535c;
  --sim-pub-accent:        #4ecdc4;
  --sim-pub-bg:            #f8fafa;
  --sim-pub-card:          #ffffff;
  --sim-pub-text:          #1a535c;
  --sim-pub-text-muted:    #7a9ea0;
  --sim-pub-success:       #4caf50;
  --sim-pub-danger:        #dc3545;
  --sim-pub-button:        #3a8686;
  --sim-pub-button-text:   #ffffff;
  --sim-pub-font-heading:  inherit;
  --sim-pub-font-body:     inherit;
  --sim-pub-radius:        16px;
  /* Turunan radius — tidak perlu disimpan, otomatis mengikuti --sim-pub-radius */
  --sim-pub-radius-sm:     calc(var(--sim-pub-radius) * 0.6);
  --sim-pub-radius-xs:     calc(var(--sim-pub-radius) * 0.4);
}

/* ================================================================
   § 2. FONT GLOBAL — semua elemen dalam wrapper SIM
   ================================================================ */
.sim-checkout-form-wrapper *,
.sim-checkout-wrapper *,
.sim-confirmation-wrapper *,
.sim-dashboard-wrapper * {
  font-family: var(--sim-pub-font-body), sans-serif;
}

/* ================================================================
   § 3. PAGE WRAPPER — background + font per halaman
   ================================================================ */

/* Login & Checkout form wrapper */
.sim-checkout-form-wrapper {
  background:   var(--sim-pub-bg) !important;
  border-radius: var(--sim-pub-radius) !important;
  font-family:  var(--sim-pub-font-body), sans-serif !important;
  color:        var(--sim-pub-text) !important;
}

/* Checkout page wrapper */
.sim-checkout-wrapper {
  font-family: var(--sim-pub-font-body), sans-serif !important;
  color:       var(--sim-pub-text) !important;
}

/* Confirmation wrapper */
.sim-confirmation-wrapper {
  font-family: var(--sim-pub-font-body), sans-serif !important;
  color:       var(--sim-pub-text) !important;
}

/* Dashboard wrapper */
.sim-dashboard-wrapper,
.sim-ios-container {
  background:  var(--sim-pub-bg) !important;
  font-family: var(--sim-pub-font-body), sans-serif !important;
  color:       var(--sim-pub-text) !important;
}

/* ================================================================
   § 4. HEADINGS
   ================================================================ */
.sim-checkout-header,
.sim-checkout-form-wrapper h1,
.sim-checkout-form-wrapper h2,
.sim-checkout-form-wrapper h3,
.sim-checkout-form-wrapper h4,
.sim-checkout-wrapper h1,
.sim-checkout-wrapper h2,
.sim-checkout-wrapper h3,
.sim-confirmation-wrapper h1,
.sim-confirmation-wrapper h2,
.sim-confirmation-wrapper h3,
.sim-dashboard-wrapper h1,
.sim-dashboard-wrapper h2,
.sim-dashboard-wrapper h3,
.sim-dashboard-wrapper h4,
.sim-ios-container h1,
.sim-ios-container h2,
.sim-ios-container h3,
.sim-ios-header h1,
.sim-status-title,
.sim-package-info h2,
.sim-package-info h3,
.card-main-title {
  font-family: var(--sim-pub-font-heading), sans-serif !important;
  color:       var(--sim-pub-text) !important;
}

/* ================================================================
   § 5. LABEL & MUTED TEXT
   ================================================================ */
.sim-form-group label,
.sim-checkout-wrapper .form-group label,
.sim-detail-label,
.sim-price-label,
.sim-quota-label,
.sim-status-desc,
.sim-bank-holder,
.sim-field-hint,
.sim-help-text,
.sim-checkout-section-title {
  color:       var(--sim-pub-text-muted) !important;
  font-family: var(--sim-pub-font-body), sans-serif !important;
}

/* Judul section di checkout tetap pakai heading */
.sim-checkout-section-title {
  font-family: var(--sim-pub-font-heading), sans-serif !important;
  color:       var(--sim-pub-text) !important;
}

/* ================================================================
   § 6. PRIMARY BUTTONS
   ================================================================ */
.sim-button-primary-submit,
.sim-checkout-submit,
.sim-ios-btn-ok,
.sim-ios-save,
.sim-btn-primary-pub,
.sim-wa-confirm-btn,
.sim-copy-btn,
.sim-coupon-btn,
button.sim-button-primary-submit,
.sim-checkout-wrapper button[type="submit"],
.sim-checkout-wrapper .sim-checkout-submit,
.elementor .sim-button-primary-submit,
.elementor button.sim-button-primary-submit {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-color:  var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  font-family:   var(--sim-pub-font-body), sans-serif !important;
}

.sim-button-primary-submit:hover:not(:disabled),
.sim-checkout-submit:hover,
.sim-ios-btn-ok:hover,
.sim-wa-confirm-btn:hover,
.sim-copy-btn:hover,
.sim-coupon-btn:hover,
.sim-checkout-wrapper button[type="submit"]:hover,
.sim-checkout-wrapper .sim-checkout-submit:hover,
.elementor .sim-button-primary-submit:hover:not(:disabled),
.elementor button.sim-button-primary-submit:hover:not(:disabled) {
  background:   var(--sim-pub-primary-dark) !important;
  border-color: var(--sim-pub-primary-dark) !important;
  color:        var(--sim-pub-button-text) !important;
}

/* ================================================================
   § 7. SECONDARY / OUTLINE BUTTONS
   ================================================================ */
.sim-ios-btn-cancel,
.sim-ios-btn-secondary,
.sim-remove-coupon-btn {
  border-color: var(--sim-pub-primary) !important;
  color:        var(--sim-pub-primary) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* ================================================================
   § 8. INPUT FIELDS
   ================================================================ */
.sim-form-control,
.sim-ios-field input,
.sim-ios-field select,
.sim-ios-field textarea,
.sim-coupon-input,
.sim-search-box input,
.sim-addon-qty-input,
.sim-checkout-wrapper .form-group input {
  font-family:   var(--sim-pub-font-body), sans-serif !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

.sim-form-control:focus,
.sim-ios-field input:focus,
.sim-coupon-input:focus {
  border-color: var(--sim-pub-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sim-pub-accent) 25%, transparent) !important;
  outline: none !important;
}

/* Accent for checkbox/radio */
.sim-form-control[type="checkbox"],
.sim-form-control[type="radio"] {
  accent-color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 9. CARD & PANEL BACKGROUNDS
   ================================================================ */
.sim-ios-card,
.sim-ios-modal-content,
.sim-package-summary,
.sim-price-breakdown,
.sim-price-breakdown-box,
.sim-transaction-details,
.sim-detail-grid,
.sim-bank-card,
.sim-addon-selection-card {
  background:    var(--sim-pub-card) !important;
  border-radius: var(--sim-pub-radius) !important;
}

/* ================================================================
   § 10. LINK COLORS
   ================================================================ */
.sim-checkout-form-wrapper a,
.sim-dashboard-wrapper .sim-link,
.sim-toggle-link,
.sim-toggle-text a,
.sim-auth-toggle a {
  color: var(--sim-pub-primary) !important;
}

.sim-checkout-form-wrapper a:hover,
.sim-dashboard-wrapper .sim-link:hover,
.sim-toggle-link:hover,
.sim-auth-toggle a:hover {
  color: var(--sim-pub-primary-dark) !important;
}

.sim-password-toggle:hover {
  color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 11. CHECKOUT PAGE — summary, price, coupon
   ================================================================ */
.sim-package-summary {
  border-left: 4px solid var(--sim-pub-primary) !important;
}

.sim-price-amount {
  color:       var(--sim-pub-primary) !important;
  font-family: var(--sim-pub-font-heading), sans-serif !important;
}

.sim-breakdown-total-row .sim-breakdown-total-label,
.sim-breakdown-total-row .sim-breakdown-total-value,
.sim-breakdown-total {
  color:       var(--sim-pub-primary) !important;
  font-family: var(--sim-pub-font-heading), sans-serif !important;
}

.sim-coupon-section {
  border-radius: var(--sim-pub-radius-sm) !important;
}

.sim-coupon-toggle {
  color: var(--sim-pub-primary) !important;
}

.sim-discount-indicator {
  color: var(--sim-pub-success) !important;
}

/* Coupon border accent */
.sim-price-breakdown-box {
  border: 2px dashed var(--sim-pub-primary) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* Info box primary accent */
.sim-info-primary,
.sim-info-box {
  border-left-color: var(--sim-pub-primary) !important;
  color:             var(--sim-pub-text) !important;
}

/* ================================================================
   § 12. CONFIRMATION PAGE — status, bank, breakdown
   ================================================================ */
.sim-status-pending,
.sim-status-success,
.sim-status-canceled,
.sim-status-other {
  border-radius: var(--sim-pub-radius) !important;
}

.sim-status-icon {
  /* Oval ornamen dihapus — tidak ada background/border-radius di sini */
  background: transparent !important;
  border-radius: 0 !important;
}

.sim-status-pending .sim-status-icon {
  background: transparent !important;
  color: var(--sim-pub-primary) !important;
}

.sim-status-success .sim-status-icon {
  background: transparent !important;
  color: var(--sim-pub-success) !important;
}

.sim-status-title {
  color:       var(--sim-pub-text) !important;
  font-family: var(--sim-pub-font-heading), sans-serif !important;
}

.sim-bank-name {
  color:       var(--sim-pub-primary) !important;
  font-family: var(--sim-pub-font-heading), sans-serif !important;
}

.sim-bank-number {
  color: var(--sim-pub-text) !important;
}

/* WhatsApp confirm button */
.sim-whatsapp-btn,
.sim-whatsapp-confirmation a {
  color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 13. DASHBOARD — nav, home banner, stats, badges
   ================================================================ */
.sim-nav-container,
.sim-sub-tab-nav {
  background:    var(--sim-pub-card) !important;
  border-radius: var(--sim-pub-radius) !important;
}

/* Active nav tab */
.sim-dash-nav-active,
.sim-ios-header-active,
.sim-breadcrumb-nav a.active {
  color:             var(--sim-pub-primary) !important;
  border-bottom-color: var(--sim-pub-primary) !important;
}

.sim-breadcrumb-nav a:hover {
  color: var(--sim-pub-primary-dark) !important;
}

/* Welcome / hero banner */
.sim-home-welcome {
  background: linear-gradient(
    135deg,
    var(--sim-pub-primary) 0%,
    var(--sim-pub-primary-dark) 100%
  ) !important;
  border-radius: var(--sim-pub-radius) !important;
  color: #fff !important;
}

/* Quota badge */
.quota-info-badge,
.view-all-btn {
  background:   color-mix(in srgb, var(--sim-pub-accent) 18%, white) !important;
  color:        var(--sim-pub-primary) !important;
  border-color: color-mix(in srgb, var(--sim-pub-accent) 35%, white) !important;
}

/* Avatar badge */
.is-hadir,
.mini-avatar {
  background: var(--sim-pub-accent) !important;
}

/* Header icon boxes */
.header-icon,
.sim-card-icon {
  background: color-mix(in srgb, var(--sim-pub-accent) 30%, white) !important;
  color:      var(--sim-pub-primary) !important;
}

/* ================================================================
   § 14. PAGINATION
   ================================================================ */
.sim-paging-btn.active,
.sim-paging-btn:hover,
.sim-page-btn.active {
  background:    var(--sim-pub-primary) !important;
  color:         #fff !important;
  border-radius: var(--sim-pub-radius-xs) !important;
  border-color:  var(--sim-pub-primary) !important;
}

/* ================================================================
   § 15. SVG ANIMATED CHECK (RSVP & Konfirmasi)
   ================================================================ */
.ios-checkmark__circle,
.simrsvp-checkmark__circle {
  stroke: var(--sim-pub-accent) !important;
}

.ios-checkmark__check,
.simrsvp-checkmark__check {
  stroke: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 16. LOGIN PAGE — divider, help text, checkbox
   ================================================================ */
.sim-divider-dashed {
  border-color: color-mix(in srgb, var(--sim-pub-primary) 25%, transparent) !important;
}

/* Registered link accent */
.sim-checkout-form-wrapper .sim-toggle-link,
.sim-checkout-form-wrapper .sim-auth-toggle a {
  color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 17. ALERT BOXES
   ================================================================ */
.sim-info-primary {
  background:   color-mix(in srgb, var(--sim-pub-primary) 10%, white) !important;
  border-color: var(--sim-pub-primary) !important;
  color:        var(--sim-pub-text) !important;
}

/* ================================================================
   § 18. PACKAGE LIST PAGE
   ================================================================ */
.sim-package-list .sim-buy-button,
.sim-package-item .sim-buy-button {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

.sim-package-item {
  background:    var(--sim-pub-card) !important;
  border-radius: var(--sim-pub-radius) !important;
}

/* ================================================================
   § 19. ACTION BUTTONS (di halaman konfirmasi)
   ================================================================ */
.sim-action-btn {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

.sim-action-btn:hover {
  background: var(--sim-pub-primary-dark) !important;
  color:      var(--sim-pub-button-text) !important;
}

/* QRIS nominal highlight */
strong[style*="color"] {
  /* Override via CSS rule — QRIS amount highlight */
  color: var(--sim-pub-primary);
}

/* ================================================================
   § 20. CHECKOUT — ADDON BUTTONS (ikut --sim-pub-button & radius)
   ================================================================ */
.sim-addon-btn {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border:        2px solid var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}
.sim-addon-btn:hover,
.sim-addon-btn-minus:hover,
.sim-addon-btn-plus:hover {
  background:    var(--sim-pub-primary-dark) !important;
  border-color:  var(--sim-pub-primary-dark) !important;
  color:         var(--sim-pub-button-text) !important;
}
.sim-addon-qty-input {
  border-color:  var(--sim-pub-primary) !important;
  color:         var(--sim-pub-primary) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  background:    var(--sim-pub-card) !important;
}
.sim-addon-selection-card {
  border-color:  var(--sim-pub-primary) !important;
  border-radius: var(--sim-pub-radius) !important;
  background:    var(--sim-pub-card) !important;
}
.sim-addon-title h3 {
  color: var(--sim-pub-primary) !important;
}
.sim-addon-price {
  color: var(--sim-pub-accent, #4ecdc4) !important;
}

/* ================================================================
   § 21. CHECKOUT — PACKAGE SUMMARY CARD
   ================================================================ */
.sim-package-summary {
  background:    var(--sim-pub-card) !important;
  color:         var(--sim-pub-text) !important;
  border-left:   4px solid var(--sim-pub-primary) !important;
  border-radius: var(--sim-pub-radius) !important;
}
.sim-package-summary h2 {
  color: var(--sim-pub-text) !important;
}
.sim-package-info p {
  color: var(--sim-pub-text-muted) !important;
}
.sim-package-info p i {
  color: var(--sim-pub-primary) !important;
}
.sim-price-label {
  color: var(--sim-pub-text-muted) !important;
}
.sim-price-amount {
  color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 22. CHECKOUT — QUOTA CALCULATOR
   ================================================================ */
.sim-quota-calculator {
  background:   color-mix(in srgb, var(--sim-pub-primary) 8%, white) !important;
  border-color: color-mix(in srgb, var(--sim-pub-primary) 20%, white) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}
.sim-quota-value {
  color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 23. KONFIRMASI — inline style overrides via CSS (override !important)
   ================================================================ */
/* Status icon confirmed */
.sim-status-success .sim-status-icon i {
  color: var(--sim-pub-success, #10b981) !important;
}
/* Action link button di konfirmasi */
a.sim-action-btn,
.sim-action-btn {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  border:        2px solid var(--sim-pub-button) !important;
  padding:       12px 30px !important;
  text-decoration: none !important;
  font-weight:   600 !important;
  display:       inline-block !important;
}
a.sim-action-btn:hover,
.sim-action-btn:hover {
  background:   var(--sim-pub-primary-dark) !important;
  border-color: var(--sim-pub-primary-dark) !important;
  color:        var(--sim-pub-button-text) !important;
}
/* Detail grid di konfirmasi */
.sim-detail-row {
  border-bottom-color: color-mix(in srgb, var(--sim-pub-primary) 15%, transparent) !important;
}
.sim-detail-label {
  color: var(--sim-pub-text-muted) !important;
}
.sim-detail-value {
  color: var(--sim-pub-text) !important;
}
/* Confirmation wrapper card */
.sim-confirmation-wrapper {
  background:    var(--sim-pub-bg) !important;
  color:         var(--sim-pub-text) !important;
}

/* ================================================================
   § 24. PRICE BREAKDOWN (CHECKOUT & KONFIRMASI)
   ================================================================ */
.sim-price-breakdown {
  background:    var(--sim-pub-card) !important;
  border-radius: var(--sim-pub-radius) !important;
}
.sim-breakdown-row {
  color: var(--sim-pub-text) !important;
}
.sim-breakdown-discount-row {
  color: var(--sim-pub-success) !important;
}
.sim-breakdown-total-row {
  color:     var(--sim-pub-primary) !important;
  border-top-color: color-mix(in srgb, var(--sim-pub-primary) 20%, transparent) !important;
}
#sim-breakdown-total {
  color: var(--sim-pub-primary) !important;
}

/* ================================================================
   § 25. BANK CARD — ikut --sim-pub-button & --sim-pub-button-text
   ================================================================ */
.sim-bank-card,
.sim-confirmation-wrapper .sim-bank-card,
body .sim-bank-card {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius) !important;
}

.sim-bank-name,
.sim-bank-number {
  color: var(--sim-pub-button-text) !important;
}

.sim-bank-logo-frame {
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* Copy button: lebih gelap dari card background */
.sim-copy-btn {
  background:    var(--sim-pub-primary-dark) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  color:         var(--sim-pub-button-text) !important;
}
.sim-copy-btn:hover {
  background: rgba(0,0,0,0.35) !important;
}

/* ================================================================
   § 26. STATUS PENDING — ikut warna tema (bukan kuning hardcoded)
   ================================================================ */
.sim-status-pending {
  background: color-mix(in srgb, var(--sim-pub-primary) 8%, var(--sim-pub-card)) !important;
  border-color: var(--sim-pub-primary) !important;
}

.sim-status-pending .sim-status-title {
  color: var(--sim-pub-text) !important;
}

.sim-status-pending .sim-status-desc {
  color: var(--sim-pub-text-muted) !important;
}

.sim-status-pending .sim-hourglass-svg .sim-hg-frame,
.sim-status-pending .sim-hourglass-svg .sim-hg-bar {
  stroke: var(--sim-pub-primary) !important;
  fill:   var(--sim-pub-primary) !important;
}

.sim-status-pending .sim-hourglass-svg .sim-hg-sand-top,
.sim-status-pending .sim-hourglass-svg .sim-hg-sand-bot {
  fill: var(--sim-pub-accent) !important;
}

.sim-status-pending .sim-hourglass-svg .sim-hg-drop1,
.sim-status-pending .sim-hourglass-svg .sim-hg-drop2,
.sim-status-pending .sim-hourglass-svg .sim-hg-drop3 {
  fill: var(--sim-pub-primary) !important;
}

/* WA Confirmation box */
.sim-wa-confirm-btn {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  border:        2px solid var(--sim-pub-button) !important;
}
.sim-wa-confirm-btn:hover {
  background:   var(--sim-pub-primary-dark) !important;
  border-color: var(--sim-pub-primary-dark) !important;
}

/* ================================================================
   § 27. TOAST NOTIFICATION — ikut --sim-pub-button
   ================================================================ */
#sim-ios-toast {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border:        2px solid color-mix(in srgb, var(--sim-pub-button) 60%, white) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  box-shadow:    0 8px 30px rgba(0,0,0,0.2) !important;
}
.sim-toast-check {
  stroke: var(--sim-pub-button-text) !important;
}

/* ================================================================
   § 28. DASHBOARD — action buttons & badges (CSS vars coverage)
   High-specificity + !important untuk mengalahkan Elementor
   ================================================================ */

/* sim-ios-save (Buat Baru) */
body .sim-ios-header button.sim-ios-save,
body .sim-ios-container .sim-ios-save {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border:        2px solid var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* btn-primary (Edit) */
body .sim-ios-container .action-btn-ios.btn-primary,
body .sim-ios-container a.btn-primary,
body .sim-dashboard-wrapper .action-btn-ios.btn-primary {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-color:  var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* btn-secondary (Preview, Copy, Tamu, Admin-action) */
body .sim-ios-container .action-btn-ios.btn-secondary,
body .sim-ios-container a.btn-secondary,
body .sim-dashboard-wrapper .action-btn-ios.btn-secondary {
  background:    color-mix(in srgb, var(--sim-pub-primary) 10%, white) !important;
  color:         var(--sim-pub-primary) !important;
  border-color:  color-mix(in srgb, var(--sim-pub-primary) 25%, transparent) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* btn-confirm-lunas (Konfirmasi Lunas) */
body .sim-ios-trx-container .btn-confirm-lunas,
body .sim-ios-trx-container button.btn-confirm-lunas {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border:        2px solid var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* admin-badge-mode (badge Administrator) */
body .sim-ios-trx-container .admin-badge-mode {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
  border-color:  color-mix(in srgb, var(--sim-pub-button) 60%, white) !important;
}

/* sim-paging-btn active (tombol "10" aktif, "Semua" aktif) */
body .sim-paging-controls .sim-paging-btn.active,
body .sim-ios-container .sim-paging-btn.active {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-color:  var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* sim-ios-save buat baru */
body .sim-ios-container .sim-ios-save,
body .sim-ios-header .sim-ios-save {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border:        2px solid var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}

/* ================================================================
   § 29. ACCOUNT PAGE — btn-logout ikut CSS vars
   Ghost/outline style — background transparan, border & teks = --sim-pub-button
   ================================================================ */
body .sim-ios-account-container .btn-logout,
body a.btn-logout {
  background:    transparent !important;
  border:        2px solid var(--sim-pub-button) !important;
  color:         var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}
body .sim-ios-account-container .btn-logout:hover,
body a.btn-logout:hover {
  background: var(--sim-pub-button) !important;
  color:      var(--sim-pub-button-text) !important;
}

/* Elementor override */
.elementor .sim-ios-account-container .btn-logout,
.elementor a.btn-logout {
  background:    transparent !important;
  border:        2px solid var(--sim-pub-button) !important;
  color:         var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}
.elementor .sim-ios-account-container .btn-logout:hover {
  background: var(--sim-pub-button) !important;
  color:      var(--sim-pub-button-text) !important;
}

/* sim-ios-btn-ok (modal buttons) ikut CSS vars */
body .sim-ios-modal-card .sim-ios-btn-ok,
body button.sim-ios-btn-ok {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border:        2px solid var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}
body .sim-ios-modal-card .sim-ios-btn-ok:hover {
  background:   var(--sim-pub-primary-dark) !important;
  border-color: var(--sim-pub-primary-dark) !important;
}

/* ================================================================
   § 30. LIST TAMU — CSS vars coverage via body selector
   ================================================================ */
body #sim-listtamu-modal-tamu   .sim-lt-btn-primary,
body #sim-listtamu-modal-wa     .sim-lt-btn-primary,
body #sim-listtamu-modal-copy   .sim-lt-btn-primary,
body #sim-listtamu-modal-import .sim-lt-btn-primary {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-color:  var(--sim-pub-button) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}
body #sim-btn-select-contact {
  background:    var(--sim-pub-button) !important;
  color:         var(--sim-pub-button-text) !important;
  border-radius: var(--sim-pub-radius-sm) !important;
}