/* ============================================================
   SAFAR DIARY — COMPONENT-LEVEL STYLES
   Small reusable widgets: modals, toasts, pagination, etc.
   ============================================================ */

.toast { border-radius: 12px; min-width: 280px; }

.modal-content { border-radius: var(--sd-radius); border: none; }
.modal-header { border-bottom: 1px solid var(--sd-line); }
.modal-footer { border-top: 1px solid var(--sd-line); }

.pagination .page-link { border-radius: 10px !important; margin: 0 3px; border: 1px solid var(--sd-line); color: var(--sd-ink); font-weight: 600; }
.pagination .page-item.active .page-link { background: var(--sd-navy); border-color: var(--sd-navy); }

.accordion-button { font-weight: 700; }
.accordion-button:not(.collapsed) { background: #fbf3de; color: var(--sd-clay); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--sd-line); }

.offcanvas-header { border-bottom: 1px solid var(--sd-line); }

.badge-soft-gold { background: #fbf3de; color: var(--sd-clay); font-weight: 700; }
.badge-soft-navy { background: #eaeaf3; color: var(--sd-navy); font-weight: 700; }

.carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--sd-navy); border-radius: 50%; padding: 18px; background-size: 46%; }

.form-check-lg .form-check-input { width: 1.4em; height: 1.4em; margin-top: 0.15em; }

.avatar-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sd-navy); color: var(--sd-gold); font-weight: 700; flex-shrink: 0;
}

.copy-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sd-cream); border: 1px dashed var(--sd-line);
  border-radius: 10px; padding: 8px 14px; font-weight: 700; cursor: pointer;
}
.copy-chip:hover { border-color: var(--sd-gold); }