/* Period Calculator — Theme: Rose Pink (#F43F5E) */
:root { --accent: #F43F5E; --accent-dim: rgba(244,63,94,0.15); --accent-glow: rgba(244,63,94,0.3); }
.accent-text { color: var(--accent); }

/* Inputs */
.inputs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.date-input { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; padding: var(--space-3); color: var(--accent); }
.date-input::-webkit-calendar-picker-indicator { filter: invert(1); }
.input-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); display: block; }

.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper-btn {
  width: 36px; height: 36px; background: var(--bg-tertiary); border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm); color: var(--accent); font-size: var(--text-lg); font-weight: 700;
  cursor: pointer; transition: all var(--duration-fast); display: flex; align-items: center; justify-content: center;
}
.stepper-btn:hover { background: var(--accent-dim); border-color: var(--accent); }
.stepper-input { width: 70px; text-align: center; font-weight: 700; font-size: var(--text-lg); -moz-appearance: textfield; }
.stepper-input::-webkit-inner-spin-button, .stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.calculate-btn { width: 100%; }

/* Summary Cards */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.summary-card { text-align: center; padding: var(--space-5); transition: transform var(--duration-fast); }
.summary-card:hover { transform: translateY(-3px); }
.summary-icon { font-size: 2rem; margin-bottom: var(--space-2); }
.summary-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.summary-value { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-1); }
.summary-sub { font-size: var(--text-xs); color: var(--text-secondary); }
.summary-period { border-top: 3px solid #F43F5E; }
.summary-ovulation { border-top: 3px solid #8B5CF6; }
.summary-fertile { border-top: 3px solid #EC4899; }
.summary-safe { border-top: 3px solid #06B6D4; }

/* Calendar */
.calendar-section { margin-top: var(--space-5); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.calendar-header h2 { font-size: var(--text-xl); }
.calendar-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-period { background: #F43F5E; }
.dot-fertile { background: #EC4899; opacity: 0.6; }
.dot-ovulation { background: #8B5CF6; }

.calendars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }

.month-calendar { background: var(--bg-secondary); border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--border-subtle); }
.month-title { text-align: center; font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-3); color: var(--text-primary); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.day-header { font-size: var(--text-xs); color: var(--text-muted); padding: var(--space-1); font-weight: 600; }
.day-cell {
  font-size: var(--text-sm); padding: 6px 2px; border-radius: 6px; cursor: default;
  transition: all var(--duration-fast); position: relative; color: var(--text-secondary);
}
.day-cell.today { font-weight: 700; color: var(--text-primary); box-shadow: inset 0 0 0 2px var(--accent); }
.day-cell.period { background: rgba(244,63,94,0.25); color: #F43F5E; font-weight: 600; }
.day-cell.fertile { background: rgba(236,72,153,0.15); color: #EC4899; }
.day-cell.ovulation { background: rgba(139,92,246,0.3); color: #fff; font-weight: 700; border-radius: 50%; }
.day-cell.empty { visibility: hidden; }
.day-cell:hover:not(.empty) { background: var(--bg-tertiary); }

/* Cycles Table */
.cycles-table-section { margin-top: var(--space-5); }
.cycles-table-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.cycles-table-wrap { overflow-x: auto; }
.cycles-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cycles-table th { padding: var(--space-3); text-align: left; font-size: var(--text-xs); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-medium); letter-spacing: 0.05em; }
.cycles-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.cycles-table tr:hover td { background: var(--accent-dim); }
.td-period { color: #F43F5E; font-weight: 600; }
.td-ovulation { color: #8B5CF6; font-weight: 600; }
.td-fertile { color: #EC4899; }

/* Info Section */
.info-section { margin-top: var(--space-5); }
.info-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.info-card { padding: var(--space-4); background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.info-card h3 { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.info-card p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* Disclaimer */
.disclaimer { margin-top: var(--space-5); }
.disclaimer p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* Sidebar */
.related-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.related-list a { display: block; padding: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: all var(--duration-fast); }
.related-list a:hover { background: var(--accent-dim); color: var(--accent); }
.tips-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.tips-list li::before { content: '→ '; color: var(--accent); }

@media (max-width: 768px) {
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .calendars-grid { grid-template-columns: 1fr; }
  .inputs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .summary-cards { grid-template-columns: 1fr; } }