/**
 * WP Smart Notify — Public Stylesheet
 *
 * Styling untuk floating bell widget dan shortcode di frontend.
 * Menggunakan CSS Custom Properties untuk tema warna dinamis.
 *
 * @package WPSmartNotify
 * @since   1.0.0
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
  --wpsnf-color:          #4f46e5;
  --wpsnf-color-hover:    #4338ca;
  --wpsnf-bg:             #ffffff;
  --wpsnf-bg-item-hover:  #f8f7ff;
  --wpsnf-text:           #111827;
  --wpsnf-text-muted:     #6b7280;
  --wpsnf-border:         #e5e7eb;
  --wpsnf-badge-bg:       #ef4444;
  --wpsnf-shadow:         0 10px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
  --wpsnf-radius:         16px;
  --wpsnf-radius-sm:      10px;
  --wpsnf-width:          360px;
  --wpsnf-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wpsnf-transition:     all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  --wpsnf-z:              99999;
}

/* ============================================================
   WIDGET CONTAINER (STICKY FLOATING)
   ============================================================ */
#wpsnf-widget,
.wpsnf-widget {
  position:   fixed;
  z-index:    var(--wpsnf-z);
  font-family: var(--wpsnf-font);
  line-height: 1.5;
}

/* Posisi */
.wpsnf-pos-bottom-right { bottom: 28px; right: 28px; }
.wpsnf-pos-bottom-left  { bottom: 28px; left:  28px; }
.wpsnf-pos-top-right    { top:    80px; right: 28px; }
.wpsnf-pos-top-left     { top:    80px; left:  28px; }

/* ============================================================
   TOMBOL BELL
   ============================================================ */
.wpsnf-bell-btn {
  position:       relative;
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          54px;
  height:         54px;
  border:         none;
  border-radius:  50%;
  background:     var(--wpsnf-color);
  color:          #ffffff;
  cursor:         pointer;
  box-shadow:     0 4px 20px rgba(79, 70, 229, 0.38), 0 2px 8px rgba(0,0,0,0.12);
  transition:     transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

.wpsnf-bell-btn:hover {
  background:   var(--wpsnf-color-hover);
  transform:    translateY(-2px) scale(1.05);
  box-shadow:   0 8px 28px rgba(79, 70, 229, 0.45), 0 3px 10px rgba(0,0,0,0.14);
}

.wpsnf-bell-btn:focus-visible {
  outline: 3px solid var(--wpsnf-color);
  outline-offset: 4px;
}

.wpsnf-bell-btn:active {
  transform: scale(0.96);
}

/* Animasi ring bell */
.wpsnf-bell-btn.wpsnf-has-new .wpsnf-bell-icon {
  animation: wpsnf-ring 0.8s ease 0.2s both;
}

@keyframes wpsnf-ring {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(14deg); }
  20%  { transform: rotate(-10deg); }
  30%  { transform: rotate(14deg); }
  40%  { transform: rotate(-8deg); }
  50%  { transform: rotate(10deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.wpsnf-bell-icon {
  display: block;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ============================================================
   BADGE HITUNGAN
   ============================================================ */
.wpsnf-count {
  position:      absolute;
  top:           -5px;
  right:         -5px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  min-width:     20px;
  height:        20px;
  padding:       0 5px;
  border-radius: 10px;
  background:    var(--wpsnf-badge-bg);
  color:         #ffffff;
  font-size:     11px;
  font-weight:   700;
  line-height:   1;
  border:        2px solid #ffffff;
  animation:     wpsnf-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wpsnf-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ============================================================
   DROPDOWN PANEL
   ============================================================ */
.wpsnf-dropdown {
  position:      absolute;
  width:         var(--wpsnf-width);
  max-width:     calc(100vw - 40px);
  max-height:    520px;
  background:    var(--wpsnf-bg);
  border:        1px solid var(--wpsnf-border);
  border-radius: var(--wpsnf-radius);
  box-shadow:    var(--wpsnf-shadow);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transform-origin: bottom right;
  animation:     wpsnf-dropdown-in 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Posisi dropdown relatif terhadap widget */
.wpsnf-pos-bottom-right .wpsnf-dropdown,
.wpsnf-pos-top-right .wpsnf-dropdown {
  right: 0;
}
.wpsnf-pos-bottom-left .wpsnf-dropdown,
.wpsnf-pos-top-left .wpsnf-dropdown {
  left: 0;
  transform-origin: bottom left;
}

.wpsnf-pos-bottom-right .wpsnf-dropdown,
.wpsnf-pos-bottom-left .wpsnf-dropdown {
  bottom:        calc(100% + 12px);
  transform-origin: bottom center;
}
.wpsnf-pos-top-right .wpsnf-dropdown,
.wpsnf-pos-top-left .wpsnf-dropdown {
  top:           calc(100% + 12px);
  transform-origin: top center;
}

@keyframes wpsnf-dropdown-in {
  from { opacity: 0; transform: scale(0.88) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.wpsnf-dropdown[hidden] {
  display: none;
}

/* ============================================================
   HEADER DROPDOWN
   ============================================================ */
.wpsnf-dropdown-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px 14px;
  border-bottom:   1px solid var(--wpsnf-border);
  background:      linear-gradient(135deg, var(--wpsnf-color) 0%, var(--wpsnf-color-hover) 100%);
  color:           #ffffff;
  flex-shrink:     0;
}

.wpsnf-dropdown-title {
  margin:      0;
  font-size:   15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color:       #ffffff;
}

.wpsnf-mark-read-btn {
  background:    rgba(255,255,255,0.2);
  border:        1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  color:         #ffffff;
  font-size:     11px;
  font-weight:   600;
  padding:       4px 10px;
  cursor:        pointer;
  transition:    background 0.15s ease;
  white-space:   nowrap;
}

.wpsnf-mark-read-btn:hover {
  background: rgba(255,255,255,0.35);
}

/* ============================================================
   AREA KONTEN (SCROLLABLE)
   ============================================================ */
.wpsnf-content {
  overflow-y:  auto;
  flex:        1;
  min-height:  0;
  scroll-behavior: smooth;
}

/* Custom scrollbar */
.wpsnf-content::-webkit-scrollbar { width: 4px; }
.wpsnf-content::-webkit-scrollbar-track { background: transparent; }
.wpsnf-content::-webkit-scrollbar-thumb { background: var(--wpsnf-border); border-radius: 2px; }

/* ============================================================
   LOADING STATE
   ============================================================ */
.wpsnf-loading {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            10px;
  padding:        40px 20px;
  color:          var(--wpsnf-text-muted);
  font-size:      14px;
}

.wpsnf-spinner {
  width:        20px;
  height:       20px;
  border:       2px solid var(--wpsnf-border);
  border-top-color: var(--wpsnf-color);
  border-radius: 50%;
  animation:    wpsnf-spin 0.7s linear infinite;
  flex-shrink:  0;
}

@keyframes wpsnf-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   DAFTAR NOTIFIKASI
   ============================================================ */
.wpsnf-list {
  list-style: none;
  margin:     0;
  padding:    6px 0;
}

/* ============================================================
   ITEM NOTIFIKASI
   ============================================================ */
.wpsnf-item {
  margin:  0;
  padding: 0;
  border-bottom: 1px solid var(--wpsnf-border);
  transition: background 0.12s ease;
  position: relative;
}

.wpsnf-item:last-child {
  border-bottom: none;
}

.wpsnf-item:hover {
  background: var(--wpsnf-bg-item-hover);
}

/* Strip warna kiri berdasarkan tipe */
.wpsnf-type-new_post::before     { background: #10b981; }
.wpsnf-type-popular_post::before { background: #f59e0b; }
.wpsnf-type-comment::before      { background: #3b82f6; }
.wpsnf-type-feature::before      { background: #8b5cf6; }
.wpsnf-type-announcement::before { background: #ef4444; }
.wpsnf-type-promo::before        { background: #ec4899; }
.wpsnf-type-update::before       { background: #14b8a6; }
.wpsnf-type-custom::before       { background: var(--wpsnf-color); }
.wpsnf-type-manual::before       { background: var(--wpsnf-color); }

.wpsnf-item::before {
  content:  '';
  position: absolute;
  left:     0;
  top:      10%;
  height:   80%;
  width:    3px;
  border-radius: 0 2px 2px 0;
  background: var(--wpsnf-color);
}

.wpsnf-item-link {
  display:         flex;
  align-items:     flex-start;
  gap:             12px;
  padding:         13px 16px 13px 20px;
  text-decoration: none;
  color:           var(--wpsnf-text);
}

.wpsnf-item-link:hover,
.wpsnf-item-link:focus {
  text-decoration: none;
  color:           var(--wpsnf-text);
  outline:         none;
}

.wpsnf-item-icon {
  font-size:    20px;
  line-height:  1;
  flex-shrink:  0;
  margin-top:   1px;
  width:        28px;
  text-align:   center;
}

.wpsnf-item-body {
  flex:         1;
  min-width:    0;
  display:      flex;
  flex-direction: column;
  gap:          2px;
}

.wpsnf-item-title {
  display:     block;
  font-size:   12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:       var(--wpsnf-color);
  margin-bottom: 1px;
}

.wpsnf-item-msg {
  display:       block;
  font-size:     13.5px;
  font-weight:   500;
  color:         var(--wpsnf-text);
  line-height:   1.45;
  overflow:      hidden;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wpsnf-item-time {
  display:     block;
  font-size:   11px;
  color:       var(--wpsnf-text-muted);
  margin-top:  3px;
}

/* ============================================================
   ITEM KOSONG & ERROR
   ============================================================ */
.wpsnf-empty,
.wpsnf-error {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        40px 20px;
  gap:            10px;
  color:          var(--wpsnf-text-muted);
  font-size:      14px;
  text-align:     center;
}

.wpsnf-empty-icon {
  font-size: 36px;
  opacity:   0.5;
}

/* ============================================================
   FOOTER DROPDOWN
   ============================================================ */
.wpsnf-dropdown-footer {
  padding:       12px 20px;
  border-top:    1px solid var(--wpsnf-border);
  text-align:    center;
  flex-shrink:   0;
}

.wpsnf-footer-link {
  font-size:      13px;
  font-weight:    600;
  color:          var(--wpsnf-color);
  text-decoration: none;
  transition:     color 0.15s ease;
}

.wpsnf-footer-link:hover {
  color:           var(--wpsnf-color-hover);
  text-decoration: underline;
}

/* ============================================================
   SHORTCODE — INLINE WIDGET
   ============================================================ */
.wpsnf-shortcode-wrap {
  font-family: var(--wpsnf-font);
}

.wpsnf-inline-widget {
  border:        1px solid var(--wpsnf-border);
  border-radius: var(--wpsnf-radius);
  overflow:      hidden;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  background:    var(--wpsnf-bg);
}

.wpsnf-inline-header {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        14px 18px;
  background:     linear-gradient(135deg, var(--wpsnf-color) 0%, var(--wpsnf-color-hover) 100%);
  color:          #ffffff;
}

.wpsnf-inline-icon {
  font-size: 18px;
}

.wpsnf-inline-title {
  flex:        1;
  margin:      0;
  font-size:   15px;
  font-weight: 700;
  color:       #ffffff;
}

.wpsnf-badge {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      22px;
  height:         22px;
  padding:        0 6px;
  background:     var(--wpsnf-badge-bg);
  color:          #ffffff;
  font-size:      11px;
  font-weight:    700;
  border-radius:  11px;
}

.wpsnf-inline-list {
  list-style: none;
  margin:     0;
  padding:    6px 0;
}

/* ============================================================
   DARK THEME
   ============================================================ */
.wpsnf-theme-dark {
  --wpsnf-bg:             #1e1e2e;
  --wpsnf-bg-item-hover:  #2a2a3d;
  --wpsnf-text:           #e2e8f0;
  --wpsnf-text-muted:     #94a3b8;
  --wpsnf-border:         #2d2d45;
}

/* ============================================================
   SHORTCODE BELL INLINE
   ============================================================ */
.wpsnf-bell-inline-wrap {
  position:   relative;
  display:    inline-block;
}

.wpsnf-inline-bell {
  width:        44px;
  height:       44px;
}

.wpsnf-inline-dropdown {
  position:         absolute;
  top:              calc(100% + 10px);
  left:             50%;
  transform:        translateX(-50%);
  transform-origin: top center;
}

/* ============================================================
   RESPONSIF MOBILE
   ============================================================ */
@media (max-width: 600px) {

  /* Widget bell — selalu di pojok kanan bawah di mobile */
  #wpsnf-widget,
  .wpsnf-widget {
    bottom: 20px !important;
    right:  16px !important;
    top:    auto !important;
    left:   auto !important;
  }

  .wpsnf-bell-btn {
    width:  50px;
    height: 50px;
  }

  /**
   * KUNCI PERBAIKAN:
   * Gunakan position: fixed langsung ke viewport, bukan relative ke widget.
   * Ini mencegah dropdown meluber keluar layar di mobile.
   */
  .wpsnf-dropdown {
    position:   fixed !important;
    width:      calc(100vw - 24px) !important;
    max-width:  420px;
    max-height: 75vh;

    /* Selalu rata kanan viewport dengan margin 12px */
    right:  12px !important;
    left:   auto !important;

    /* Posisi vertikal: di atas bell button (bell ada di bottom 20px) */
    bottom: 82px !important;
    top:    auto !important;

    /* Reset transform-origin yang tidak relevan */
    transform-origin: bottom right;
  }

  /* Dropdown untuk posisi top-* tetap muncul ke bawah */
  .wpsnf-pos-top-right .wpsnf-dropdown,
  .wpsnf-pos-top-left  .wpsnf-dropdown {
    bottom: auto !important;
    top:    82px !important;
    transform-origin: top right;
  }

  /* Jika bell di kiri, dropdown rata kiri */
  .wpsnf-pos-bottom-left .wpsnf-dropdown,
  .wpsnf-pos-top-left    .wpsnf-dropdown {
    left:  12px !important;
    right: auto !important;
  }
}

/* ============================================================
   UNREAD INDICATOR — dot & highlight
   ============================================================ */
.wpsnf-item.wpsnf-unread {
  background: linear-gradient(to right, rgba(79,70,229,0.04), transparent);
}

.wpsnf-item.wpsnf-unread .wpsnf-item-msg {
  font-weight: 600;
}

.wpsnf-unread-dot {
  position:      absolute;
  top:           50%;
  right:         14px;
  transform:     translateY(-50%);
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--wpsnf-color);
  flex-shrink:   0;
}

/* ============================================================
   AKSES KEYBOARD / FOKUS
   ============================================================ */
.wpsnf-item-link:focus-visible {
  outline:        2px solid var(--wpsnf-color);
  outline-offset: -2px;
  border-radius:  4px;
}

/* Reduce motion untuk aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  .wpsnf-bell-btn,
  .wpsnf-dropdown,
  .wpsnf-count,
  .wpsnf-bell-icon {
    animation: none !important;
    transition: none !important;
  }
  .wpsnf-spinner {
    animation: wpsnf-spin 1.5s linear infinite;
  }
}