/* ═══════════════════════════════════════════════════════════════════════════
   CRONY — notifications.css  v1.0.0
   All user-facing feedback UI:
     • Toast notifications
     • Inline banners (status / warning / error / info)
     • Confirm / alert modals
     • Inline field errors
     • Empty states

   Depends on: tokens.css, styles.css
   Load after styles.css (overrides the stub toast rules)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   1. TOAST CONTAINER
────────────────────────────────────────────────────────────────────────── */
#toast-container,
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 400px;
  width: calc(100vw - var(--space-8));
}
@media (max-width: 480px) {
  #toast-container,
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-4);
    max-width: none;
    width: auto;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   2. TOAST PILL
────────────────────────────────────────────────────────────────────────── */
.toast {
  pointer-events: all;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows: auto auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + 3px); /* room for progress bar */
  background: var(--text-main);
  color: var(--bg-cream);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.22),
    0 1px 4px  rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.45;
  /* Enter animation */
  animation: toast-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* type-specific left accent bar */
.toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.toast-success::before { background: #4ade80; }
.toast-error::before   { background: #f87171; }
.toast-warning::before { background: #fbbf24; }
.toast-info::before    { background: rgba(250,247,242,0.25); }

/* icon column */
.toast-icon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
  flex-shrink: 0;
}
.toast-success .toast-icon { color: #4ade80; }
.toast-error   .toast-icon { color: #f87171; }
.toast-warning .toast-icon { color: #fbbf24; }
.toast-info    .toast-icon { color: rgba(250,247,242,0.70); }

/* message */
.toast-message {
  grid-column: 2;
  grid-row: 1;
  color: var(--bg-cream);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: break-word;
}

/* dismiss button */
.toast-dismiss {
  grid-column: 3;
  grid-row: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(250, 247, 242, 0.35);
  padding: 2px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
  line-height: 0;
}
.toast-dismiss:hover {
  color: var(--bg-cream);
  background: rgba(255, 255, 255, 0.08);
}
.toast-dismiss:focus-visible {
  outline: 2px solid rgba(250,247,242,0.5);
  outline-offset: 2px;
}

/* progress bar */
.toast-progress {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  overflow: hidden;
  margin-top: var(--space-1);
}
.toast-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform linear;
  border-radius: 1px;
}
.toast-success .toast-progress-bar { background: #4ade80; }
.toast-error   .toast-progress-bar { background: #f87171; }
.toast-warning .toast-progress-bar { background: #fbbf24; }
.toast-info    .toast-progress-bar { background: rgba(250,247,242,0.4); }

/* exit animation */
.toast-out {
  animation: toast-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toast-in {
  from { transform: translateX(calc(100% + var(--space-6))); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0);                          opacity: 1; max-height: 120px; margin-bottom: 0; }
  to   { transform: translateX(calc(100% + var(--space-6))); opacity: 0; max-height: 0;    margin-bottom: calc(-1 * var(--space-2)); }
}
@media (max-width: 480px) {
  @keyframes toast-in  { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }
}


/* ──────────────────────────────────────────────────────────────────────────
   3. INLINE BANNERS
   Usage: <div class="banner banner-info|success|warning|error">
            <svg class="banner-icon">...</svg>
            <div class="banner-content">
              <strong class="banner-title">Title</strong>
              <p class="banner-desc">Description</p>
            </div>
            <button class="banner-close">...</button>
          </div>
────────────────────────────────────────────────────────────────────────── */
.banner {
  display: none; /* shown by JS via .visible or inline style */
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  animation: banner-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.banner.visible,
.banner[style*="display"] { display: flex; }

.banner-icon {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.85;
}
.banner-content {
  flex: 1;
  min-width: 0;
}
.banner-title {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: 2px;
}
.banner-desc {
  color: inherit;
  opacity: 0.88;
  margin: 0;
  max-width: 60ch;
}
.banner-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  padding: 2px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity var(--transition-fast);
  line-height: 0;
}
.banner-close:hover { opacity: 1; }

/* variants */
.banner-info {
  background: rgba(3, 105, 161, 0.06);
  border-color: rgba(3, 105, 161, 0.22);
  color: #0369a1;
}
.banner-success {
  background: var(--color-success-highlight);
  border-color: var(--color-primary-dim);
  color: var(--color-success);
}
.banner-warning {
  background: var(--color-warning-highlight);
  border-color: rgba(146, 64, 14, 0.25);
  color: var(--color-warning);
}
.banner-error {
  background: var(--color-error-highlight);
  border-color: rgba(155, 28, 28, 0.25);
  color: var(--color-error);
}

[data-theme="dark"] .banner-info    { background: rgba(3,105,161,0.12);  color: #38bdf8; border-color: rgba(3,105,161,0.30); }
[data-theme="dark"] .banner-success { background: rgba(106,168,130,0.12); color: var(--accent); border-color: var(--color-primary-dim); }
[data-theme="dark"] .banner-warning { background: rgba(251,191,36,0.10);  color: #fbbf24; border-color: rgba(251,191,36,0.25); }
[data-theme="dark"] .banner-error   { background: rgba(248,113,113,0.10); color: #f87171; border-color: rgba(248,113,113,0.25); }

@keyframes banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Low-credit banner (specific to credits.html) */
.low-credit-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin: 0 var(--space-6) var(--space-3);
  background: var(--color-warning-highlight);
  border: 1px solid rgba(146, 64, 14, 0.25);
  border-radius: var(--radius-lg);
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-weight: 600;
  animation: banner-in 220ms cubic-bezier(0.16,1,0.3,1) both;
}
.low-credit-banner.visible { display: flex; }

/* Return-from-payment status banner */
.status-banner {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  margin: 0 var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  animation: banner-in 220ms cubic-bezier(0.16,1,0.3,1) both;
}
.status-banner.visible { display: flex; }
.status-banner.success {
  background: var(--color-success-highlight);
  border-color: var(--color-primary-dim);
  color: var(--color-success);
}
.status-banner.error {
  background: var(--color-error-highlight);
  border-color: rgba(155,28,28,0.25);
  color: var(--color-error);
}


/* ──────────────────────────────────────────────────────────────────────────
   4. CONFIRM / ALERT MODAL
   Usage:
     <div class="modal-backdrop" id="confirm-modal" role="dialog"
          aria-modal="true" aria-labelledby="confirm-modal-title">
       <div class="modal confirm-modal">
         <div class="confirm-modal-icon confirm-modal-icon--warning">...svg...</div>
         <div class="confirm-modal-body">
           <h3 class="confirm-modal-title" id="confirm-modal-title">Are you sure?</h3>
           <p  class="confirm-modal-desc">This action cannot be undone.</p>
         </div>
         <div class="modal-actions">
           <button class="btn btn-ghost btn-sm">Cancel</button>
           <button class="btn btn-danger btn-sm">Delete</button>
         </div>
       </div>
     </div>
────────────────────────────────────────────────────────────────────────── */
.confirm-modal {
  max-width: 400px;
}
.confirm-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-1);
}
.confirm-modal-icon--danger  { background: var(--color-error-highlight);   color: var(--color-error);   }
.confirm-modal-icon--warning { background: var(--color-warning-highlight); color: var(--color-warning); }
.confirm-modal-icon--info    { background: rgba(3,105,161,0.08);           color: #0369a1;               }
.confirm-modal-icon--success { background: var(--color-success-highlight); color: var(--color-success);  }

.confirm-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.confirm-modal-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.015em;
}
.confirm-modal-desc {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.55;
  max-width: 38ch;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. INLINE FIELD ERRORS
   Usage: <p class="field-error" role="alert">Message</p>
          <p class="field-hint">Helper text</p>
────────────────────────────────────────────────────────────────────────── */
.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-error);
  margin-top: var(--space-1);
  line-height: 1.4;
  animation: banner-in 160ms ease both;
}
.field-error::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.field-hint {
  font-size: var(--text-xs);
  color: var(--text-kicker);
  margin-top: var(--space-1);
  line-height: 1.4;
}

/* Input with error state */
.input-error,
.form-input.input-error,
.form-select.input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px var(--color-error-highlight) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. EMPTY STATE
────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--text-kicker);
  gap: var(--space-3);
  animation: banner-in 240ms ease both;
}
.empty-state-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  color: var(--text-watermark);
  margin-bottom: var(--space-1);
}
.empty-state h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-body);
}
.empty-state p {
  font-size: var(--text-sm);
  color: var(--text-kicker);
  max-width: 32ch;
  line-height: 1.6;
}
.empty-state .btn {
  margin-top: var(--space-2);
}
@media (max-width: 480px) {
  .empty-state { padding: var(--space-10) var(--space-4); }
}


/* ──────────────────────────────────────────────────────────────────────────
   7. RESPONSIVE MODAL OVERRIDES
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%;
    width: 100%;
    padding: var(--space-5) var(--space-4);
    /* Sheet handle */
    padding-top: calc(var(--space-5) + 4px);
  }
  .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    margin: 0 auto calc(var(--space-4) - 4px);
  }
  .modal-actions {
    flex-direction: column-reverse;
  }
  .modal-actions .btn {
    width: 100%;
  }
}