/* ────────────────────────────────────────────────────────────
   Birthday tile-grid picker
   Visual pattern mirrors the onboarding PROGRESS tile grid
   (.ob-tooltip-grid / .ob-tooltip-dot) — rounded tiles, dim
   white fill, RED selected state matching .ob-dot-current
   (#ff2e4a from onboarding.css).
   ──────────────────────────────────────────────────────────── */

.gg-bday-picker {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gg-bday-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.gg-bday-grid {
  display: grid;
  gap: 6px;
}

.gg-bday-grid-day   { grid-template-columns: repeat(7, minmax(36px, 1fr)); }
.gg-bday-grid-month { grid-template-columns: repeat(4, minmax(60px, 1fr)); }
.gg-bday-grid-year  {
  grid-template-columns: repeat(6, minmax(56px, 1fr));
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.gg-bday-tile {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  font-family: inherit;
  text-align: center;
  line-height: 1;
}

.gg-bday-tile:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.gg-bday-tile.selected {
  background: rgba(255, 46, 74, 0.20);
  border-color: rgba(255, 46, 74, 0.55);
  color: #ff2e4a;
}

.gg-bday-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
}

.gg-bday-summary strong {
  color: #ff2e4a;
  font-weight: 700;
}

.gg-bday-edit {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.gg-bday-edit:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Year grid scrollbar styling so the overflow looks intentional */
.gg-bday-grid-year::-webkit-scrollbar { width: 6px; }
.gg-bday-grid-year::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 3px; }
.gg-bday-grid-year::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.gg-bday-grid-year::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }