/* RESET GLOBAL */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --font-ui: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* =========================
PAY CALENDAR (FINAL)
========================= */
.pay-calendar-container{
  max-width:900px;
  margin:0 auto;
  padding-top: 10px;
  font-size:16px;
  font-family: var(--font-ui);
}

/* GRID */
.pay-calendar-grid{
  display:flex;
  gap:16px;
  row-gap: 20px;
  margin-top: 20px;
  flex-wrap:wrap;
  align-content: flex-start;
  justify-content:center;
  line-height: normal;
}


/* CARD */
.pay-calendar-card{
  width:100px;
  height:100px;
  min-width:100px;
  min-height:100px;
  padding-top:16px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:#f1f5f9;
  border-radius:12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition:all .2s ease;
  position:relative;
}

.pay-calendar-card::before{
  content: attr(data-week);
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:.08em;
  color:#1e293b;
  background:#e2e8f0;
  border-radius:12px 12px 0 0;
}

/* HOVER */
.pay-calendar-card:hover{
  background:#e2e8f0;
  transform:translateY(-2px);
}

/* DIA */
.pay-day{
  font-size:34px;
  font-weight:700;
  color:#1e293b;
}

/* MÊS */
.pay-month{
  font-size:13px;
  font-weight:500;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* TABLET (4 colunas) */
@media (min-width: 768px) and (max-width: 1024px){
    .pay-calendar-container{
    max-width:580px;
    margin:0 auto;
    }

  .pay-calendar-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
    max-width:520px;
    margin:0 auto;
  }

  .pay-calendar-card{
    width: 100%;
    height:100px;
  }
}

/* MOBILE (3 colunas) */
@media (max-width: 767px){
  .pay-calendar-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:0;
    row-gap: 14px;
    max-width:450px;
  }

  .pay-calendar-card{
    width: 95px;
    height:95px;
    min-width:95px;
    min-height:95px;
  }
}