/* basic reset */
.afp-root, .afp-card, .afp-stars, .afp-actions, .afp-body { box-sizing: border-box; }
.afp-root { position: fixed; z-index: 999999; }
.afp-pos-right { right: 16px; bottom: 16px; }
.afp-pos-left  { left: 16px; bottom: 16px; }

.afp-card {
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  direction: rtl;
}

.afp-head { padding: 14px 16px; font-weight: 800; font-size: 16px; background:#16163f; color:#fff; }
.afp-body { padding: 14px 16px; }
.afp-stars { display:flex; gap:8px; margin-bottom:10px; }
.afp-star {
  width:42px; height:42px; border-radius:10px; border:1px solid #e5e7eb; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
  transition: .2s;
}
.afp-star:hover, .afp-star.is-active { background:#FFD54E; border-color:#f59e0b; }

.afp-note { width:100%; min-height:90px; border:1px solid #e5e7eb; border-radius:10px; padding:10px; outline:0; }
.afp-actions { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #e5e7eb; }
.afp-btn {
  padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:700;
}
.afp-btn--primary { background:#0d5f63; border-color:#0d5f63; color:#fff; }
.afp-btn[disabled] { opacity:.5; cursor:not-allowed; }
.afp-foot { font-size:12px; color:#6b7280; padding:0 16px 12px; }

.afp-close {
  position:absolute; top:10px; inset-inline-start:10px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}

.afp-hidden { display:none !important; }

@media (max-width:480px) {
  .afp-card { width: 94vw; }
}