/* https://immetrica.com/css/footer_button_calendar.css */

.calendar-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.calendar {
  width: 40px;
  height: 40px;
  position: relative;
  perspective: 400px;
  transform: translateY(0);
}

.calendar.in {
  animation: calendar-transition-in 3000ms cubic-bezier(0.735, 0.245, 0.650, 0.985) forwards;
}

@keyframes calendar-transition-in {
  0%   { transform: scale(0.8); }
  100% { transform: scale(1);   }
}

.calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
}

/* ── day ── */

.day {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateX(90deg);
  color: #fff;
  text-align: center;
  transform-style: preserve-3d;
}

/* ── halves: each 20px tall ── */

.day .top,
.day .bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;                 /* 20px */
  background: #448AFF;
  overflow: hidden;
  backface-visibility: hidden;
}

.day .top    { top: 0;    border-top-left-radius: 4px;    border-top-right-radius: 4px;    }
.day .bottom { bottom: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

/* ── date number spans ───────────────────────────────────────────────────────
   Each span is forced to 40px tall (= full card height) by anchoring both
   top and bottom so it straddles the fold. overflow:hidden on the parent
   clips it to 20px, revealing only the correct half of the digit.

   KEY: line-height must equal the full card height (40px) so that the text
   centre sits exactly at the fold (20px from card top). This gives each half
   an equal portion of the digit.

   .top  span: top:0 + bottom:-100% → height = 20+20 = 40px; clips 0–20px
   .bottom span: top:-100% + bottom:0 → height = 20+20 = 40px; clips 20–40px
   ── */

.day .top .date-num {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100%;               /* extends 20px below .top → span is 40px tall */
  font-size: 22px;
  line-height: 40px;           /* text centre at 20px = exactly at the fold */
}

.day .bottom .date-num {
  position: absolute;
  top: -100%;                  /* extends 20px above .bottom → span is 40px tall */
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 22px;
  line-height: 40px;           /* text centre at 20px = exactly at the fold */
}

/* ── month label ─────────────────────────────────────────────────────────────
   Positioned directly within .bottom's coordinate space (not spanning the
   full card) so it sits below the digit's lower half.
   With font-size 22px / line-height 40px, the digit's lower half occupies
   roughly the top 11px of .bottom (0–11px in .bottom coords). The month
   is anchored to the bottom of .bottom, leaving a small gap below the digit.
   ── */

.day .bottom .month {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  font-size: 8px;
  line-height: 9px;
}

/* ── overlays ── */

.day .overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}