/* Reminder Summary Component */
.message-reminder-summary {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(200, 184, 154, 0.2);
  border-radius: 8px;
  text-align: center;
}

.message-reminder-summary--empty {
  opacity: 0.7;
}

.message-reminder-summary__title {
  font-family: 'EB Garamond', 'Libre Baskerville', serif;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-dark);
  margin: 0 0 var(--space-sm) 0;
}

.message-reminder-summary__text {
  font-family: 'EB Garamond', 'Libre Baskerville', serif;
  font-size: var(--text-md);
  color: var(--ink-dark);
  margin: 0 0 var(--space-xs) 0;
  line-height: 1.6;
}

.message-reminder-summary__text--empty {
  color: var(--ink-soft);
  font-style: italic;
}

.message-reminder-summary__count {
  font-weight: 600;
  color: var(--ink-dark);
  font-size: var(--text-lg);
}

.message-reminder-summary__hint {
  font-family: 'EB Garamond', 'Libre Baskerville', serif;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .message-reminder-summary {
    padding: var(--space-md);
  }

  .message-reminder-summary__title {
    font-size: var(--text-sm);
  }

  .message-reminder-summary__text {
    font-size: var(--text-sm);
  }
}

/* Reminder CTA Button */
.message-reminder-cta {
    margin: var(--space-xl) 0;
    text-align: center;
}

.message-reminder-cta__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: 'EB Garamond', 'Libre Baskerville', serif;
    font-size: var(--text-md);
    padding: var(--space-sm) var(--space-lg);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(200, 184, 154, 0.3);
    border-radius: 6px;
    color: var(--ink-dark);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.message-reminder-cta__button:hover {
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(200, 184, 154, 0.5);
    color: var(--ink-dark) !important;
    transform: translateY(-1px);
}

.message-reminder-cta__button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

@media (max-width: 768px) {
    .message-reminder-cta__button {
        font-size: var(--text-sm);
        padding: var(--space-xs) var(--space-md);
    }
}