/* ==========================================================================
   KURINJI SNAP — COMPONENT CSS
   Komponen yang butuh sedikit custom CSS di luar kemampuan native Elementor.
   Semua widget lain (button, card, badge, dll) diselesaikan lewat Elementor
   Global Style / Custom CSS panel per-widget, bukan di file ini.
   ========================================================================== */

/* ---------- TOAST NOTIFICATION ---------- */
.ks-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.ks-toast {
  min-width: 240px;
  max-width: 360px;
  background: var(--ks-color-text);
  color: #fff;
  padding: 13px 16px;
  border-radius: var(--ks-radius-md);
  box-shadow: var(--ks-shadow-md);
  font-size: 13.5px;
  font-family: var(--ks-font-body);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ks-ease-out), transform .25s var(--ks-ease-out);
  pointer-events: auto;
}
.ks-toast.is-visible { opacity: 1; transform: translateY(0); }
.ks-toast.success { background: var(--ks-color-success); }
.ks-toast.warning { background: var(--ks-color-warning); color: #111827; }
.ks-toast.danger  { background: var(--ks-color-danger); }

/* ---------- NOTIFICATION DROPDOWN (anchored, bukan modal-center) ---------- */
.ks-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--ks-color-surface);
  border: 1px solid var(--ks-color-border);
  border-radius: var(--ks-radius-md);
  box-shadow: var(--ks-shadow-md);
  z-index: 999;
  display: none;
}
.ks-dropdown-panel.is-open { display: block; }
.ks-dropdown-anchor { position: relative; }

/* ---------- MOBILE BOTTOM TABBAR ---------- */
.ks-tabbar {
  display: none;
}
@media (max-width: 767px) {
  .ks-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--ks-color-surface);
    border-top: 1px solid var(--ks-color-border);
    z-index: 998;
    justify-content: space-around;
    align-items: center;
  }
  /* Sembunyikan sidebar desktop app di mobile — digantikan tabbar */
  .ks-app-sidebar { display: none !important; }
}

/* ---------- ACTIVE STATE (sidebar & tabbar) ----------
   Ditandai oleh assets/js/sidebar-active.js berdasarkan pathname URL saat
   ini, karena Elementor tidak punya kondisi "current page" bawaan untuk
   styling per-item di dalam Icon List / Loop item. */
.ks-app-sidebar .elementor-icon-list-item.is-active {
  background: rgba(229, 57, 53, 0.08);
  border-radius: var(--ks-radius-sm);
}
.ks-app-sidebar .elementor-icon-list-item.is-active .elementor-icon-list-text,
.ks-app-sidebar .elementor-icon-list-item.is-active .elementor-icon-list-icon {
  color: var(--ks-color-primary);
}
.ks-tabbar a.is-active {
  color: var(--ks-color-primary);
}
.ks-tabbar a.is-active svg,
.ks-tabbar a.is-active i {
  color: var(--ks-color-primary);
}

/* Tombol tengah tabbar (Buat Event) — elevated FAB, bukan tab biasa */
.ks-tabbar-fab {
  width: 52px;
  height: 52px;
  border-radius: var(--ks-radius-full);
  background: var(--ks-color-primary);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-14px);
  box-shadow: var(--ks-shadow-md);
}
.ks-tabbar-fab.is-active {
  color: #fff !important; /* FAB selalu solid, tidak ikut styling is-active biasa */
}

/* ---------- SKELETON LOADING ---------- */
.ks-skeleton {
  position: relative;
  overflow: hidden;
  background: #EEEFF1;
  border-radius: var(--ks-radius-sm);
}
.ks-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: ks-shimmer 1.4s infinite;
}
@keyframes ks-shimmer {
  100% { transform: translateX(100%); }
}

/* ---------- EMPTY STATE ---------- */
.ks-empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--ks-color-text-muted);
}
.ks-empty-state svg { width: 44px; height: 44px; margin: 0 auto 14px; opacity: .5; }
.ks-empty-state h4 { color: var(--ks-color-text); margin: 0 0 6px; font-size: 15px; }
.ks-empty-state p { margin: 0; font-size: 13.5px; }

/* ---------- FULLPAGE MESSAGE (halaman access-denied, 404, dsb) ----------
   Beda dari .ks-empty-state (dirancang untuk slot kosong di dalam grid) —
   ini untuk KONTEN SATU-SATUNYA di halaman, dicenter penuh viewport. */
.ks-fullpage-message {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  max-width: 420px;
  margin: 0 auto;
}
.ks-fullpage-message .ks-fullpage-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--ks-radius-full);
  background: rgba(220, 38, 38, 0.1);
  color: var(--ks-color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 26px;
}

/* ---------- SCROLL REVEAL (dipakai sebagai .reveal di prototype) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ks-ease-out), transform .5s var(--ks-ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- AUDIENCE VISIBILITY (Single Template Event) ----------
   Body class 'ks-is-owner' / 'ks-is-guest' ditambahkan oleh
   KS_Guest_Access::add_audience_body_class(). Bungkus section/tab yang
   hanya boleh dilihat salah satu audiens dengan class ini. */
.ks-is-guest .ks-owner-only { display: none !important; }
.ks-is-owner .ks-guest-only { display: none !important; }

/* ---------- DOWNLOAD PERMISSION (Photo Card, Single Event) ----------
   Body class 'ks-download-allowed' / 'ks-download-watermarked' /
   'ks-download-disabled' dari KS_Guest_Access::add_download_permission_body_class(),
   berdasarkan ACF field event_download_permission milik event yang sedang
   dibuka. Bungkus tombol download di Photo Card dengan class
   'ks-photo-download-btn'. */
.ks-download-disabled .ks-photo-download-btn { display: none !important; }
.ks-download-watermarked .ks-photo-download-btn::after {
  content: "\00a0(watermark)";
  font-size: 11px;
  opacity: .75;
}

/* ---------- PHOTO CARD (Loop Item, dipakai di tab Overview & Gallery) ---------- */
.ks-photo-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--ks-radius-md);
  overflow: hidden;
  background: var(--ks-color-border); /* placeholder saat gambar masih loading */
}
.ks-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s var(--ks-ease-out);
}
.ks-photo-card:hover img {
  transform: scale(1.05);
}
.ks-photo-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  color: #fff;
  opacity: 0;
  transition: opacity .2s var(--ks-ease-out);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ks-photo-card:hover .ks-photo-card-overlay,
.ks-photo-card:focus-within .ks-photo-card-overlay {
  opacity: 1;
}
.ks-photo-card-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  border-radius: var(--ks-radius-full);
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FBBF24; /* bintang kuning */
}
.ks-photo-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .2s var(--ks-ease-out);
}
.ks-photo-card:hover .ks-photo-card-actions,
.ks-photo-card:focus-within .ks-photo-card-actions {
  opacity: 1;
}
.ks-photo-card-actions a,
.ks-photo-card-actions button {
  width: 30px;
  height: 30px;
  border-radius: var(--ks-radius-full);
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ks-color-text);
}

/* ---------- EVENT TAB NAV (Single Template Event) ---------- */
.ks-event-tab-nav a.is-active {
  color: var(--ks-color-primary);
  border-bottom: 2px solid var(--ks-color-primary);
}
/* Panel disembunyikan default lewat inline style oleh event-tabs.js;
   ini fallback murni CSS jika JS belum sempat jalan (progressive enhancement) */
.ks-event-view:not(:first-of-type) { display: none; }

/* ---------- STATUS TABS (halaman My Events, shortcode [ks_status_tabs]) ---------- */
.ks-status-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ks-status-tab {
  padding: 7px 16px;
  border-radius: var(--ks-radius-full);
  font-size: 13.5px;
  font-family: var(--ks-font-body);
  color: var(--ks-color-text-muted);
  background: var(--ks-color-surface);
  border: 1px solid var(--ks-color-border);
  text-decoration: none;
  transition: background .15s var(--ks-ease-out), color .15s var(--ks-ease-out);
}
.ks-status-tab:hover {
  background: var(--ks-color-bg);
}
.ks-status-tab.is-active {
  background: var(--ks-color-primary);
  border-color: var(--ks-color-primary);
  color: #fff;
}

/* ---------- BADGE (util reusable) ----------
   Dipakai di badge status Event Card (Bagian 3: Draft/Live/Ended/Archived)
   dan badge guest_status di Guest Row (Bagian 9: Invited/Joined/Contributed).
   Tempel salah satu class warna ini + 'ks-badge' di widget Text/Icon Box
   yang menampilkan Dynamic Tag Taxonomy — pilih warna sesuai makna term,
   BUKAN otomatis dari nama term (Elementor tidak bisa map term->class
   dinamis tanpa Display Condition per-term seperti dijelaskan di Bagian 3/9). */
.ks-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--ks-radius-full);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}
.ks-badge-neutral  { background: rgba(107,114,128,.12); color: var(--ks-color-text-muted); }  /* Draft / Invited */
.ks-badge-info     { background: rgba(37,99,235,.12);   color: var(--ks-color-secondary); }   /* Joined */
.ks-badge-success  { background: rgba(22,163,74,.12);   color: var(--ks-color-success); }     /* Live / Contributed */
.ks-badge-warning  { background: rgba(245,158,11,.15);  color: #92600A; }                     /* Ended */
.ks-badge-danger   { background: rgba(220,38,38,.12);   color: var(--ks-color-danger); }      /* Archived (opsional) */

/* ---------- GUEST ROW (Loop Item, dipakai di tab Guests) ---------- */
.ks-guest-row {
  transition: background .15s var(--ks-ease-out);
}
.ks-guest-row:hover {
  background: var(--ks-color-bg);
}

/* ---------- ACF FORM OVERRIDE (dipakai shortcode [acf_form] — tab Settings
   & halaman Create Event) — selaraskan tampilan form bawaan ACF dengan
   design token theme, tanpa perlu widget form custom. ---------- */
.acf-form { font-family: var(--ks-font-body); color: var(--ks-color-text); }
.acf-form .acf-tab-wrap.-top .acf-tab-group { border-bottom: 1px solid var(--ks-color-border); margin-bottom: 20px; }
.acf-form .acf-tab-wrap.-top .acf-tab-group li a { font-family: var(--ks-font-body); color: var(--ks-color-text-muted); }
.acf-form .acf-tab-wrap.-top .acf-tab-group li.active a { color: var(--ks-color-primary); border-color: var(--ks-color-primary); }
.acf-form .acf-label label { font-weight: 600; color: var(--ks-color-text); }
.acf-form input[type=text], .acf-form input[type=number], .acf-form textarea, .acf-form select {
  border-radius: var(--ks-radius-sm);
  border-color: var(--ks-color-border);
}
.acf-form .acf-field { border-color: var(--ks-color-border) !important; }
.acf-form .button, .acf-form input[type=submit] {
  background: var(--ks-color-primary) !important;
  border-color: var(--ks-color-primary) !important;
  border-radius: var(--ks-radius-md);
  padding: 10px 24px !important;
  height: auto !important;
  font-family: var(--ks-font-body);
}

/* ---------- CREATE EVENT WIZARD (langkah semu di atas ACF Tab bawaan) ---------- */
.ks-wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.ks-wizard-step {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--ks-radius-sm);
  background: var(--ks-color-bg);
  color: var(--ks-color-text-muted);
  font-size: 13px;
  font-weight: 600;
}
.ks-wizard-step.is-active {
  background: rgba(229, 57, 53, 0.1);
  color: var(--ks-color-primary);
}