/* =========================================================
   25. Notifications
   ========================================================= */

.notification-card {
  position: relative;
  padding-right: 5rem;
  overflow: hidden;
}

.notification-card .settings-checkbox {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gold-dark);
  cursor: pointer;
  transform: translateY(-50%);
}

.notification-card h2 {
  word-break: break-word;
}

.notification-card input[type="checkbox"]:hover {
  border-color: #9f8448;
}

.notification-card input[type="checkbox"]:checked {
  background-color: var(--gold-dark);
  border-color: var(--gold-dark);
}

.notification-unread {
  background-color: rgba(184, 155, 94, 0.1);
  border: 2px solid var(--gold-dark);
}

.notification-unread:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  transition: all var(--transition-fast);
}

.notification-read {
  opacity: 0.8;
}

.notification-action {
  margin-top: 1rem;
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 0.75rem;
  padding: 0 0.45rem;
  color: var(--white);
  background-color: var(--gold-dark);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.notification-header h2 {
  margin: 0;
}

.notification-icon {
  margin-bottom: 0;
  font-size: 1.5rem;
}

.notifications-toolbar {
  max-width: 100%;
  margin: 0 0 1rem 0;
  text-align: left;
}

html[dir="rtl"] .notifications-toolbar {
  text-align: right;
}

.notifications-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.notifications-toolbar .primary-button {
  min-width: 220px;
}

.notification-settings-wrapper {
  max-width: 600px;
}

.settings-save-row {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.settings-save-row .primary-button {
  min-width: 220px;
}

.notifications-wrapper .dashboard-grid {
  margin-top: 2rem;
}

html[dir="rtl"] .dashboard-card {
  text-align: right;
}

html[dir="rtl"] .dashboard-card small {
  display: block;
  text-align: right;
}

html[dir="rtl"] .notification-icon {
  text-align: center;
}

html[dir="rtl"] .dashboard-card h2,
html[dir="rtl"] .dashboard-card p {
  text-align: right;
}

html[dir="rtl"] .notification-icon {
  text-align: right;
}

.dashboard-card.notification-unread {
  background-color: rgba(184, 155, 94, 0.12) !important;
  border: 2px solid var(--gold-dark) !important;
  box-shadow: var(--shadow-gold) !important;
}