/* Input */
    .date-input {
      padding: 10px 12px;
      width: 100%;
      border: 1px solid #cfd8e3;
      border-radius: 6px;
      background: white;
      font-size: 15px;
    }

    /* Calendar container */
    .calendar {
      position: absolute;
      width: 270px;
      background: #fff;
      border: 1px solid #e0e6ef;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(30,40,80,0.08);
      padding: 10px;
      z-index: 9999;
    }

    .calendar .header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:8px;
    }
    .calendar .nav {
      display:flex;
      gap:6px;
      align-items:center;
    }
    .btn {
      cursor:pointer;
      border: none;
      background: transparent;
      padding: 6px;
      border-radius: 6px;
      font-size: 14px;
    }
    .btn:hover { background: #f2f6ff; }

    .month-year { font-weight:600; font-size:14px; }

    .weekdays, .days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      text-align:center;
    }
    .weekdays div {
      font-size:12px;
      color:#6b7280;
      padding:6px 0;
    }

    .day {
      padding:8px 6px;
      border-radius:6px;
      cursor:pointer;
      font-size:13px;
      user-select:none;
    }
    .day:hover { background:#e7f0ff; }
    .day.other-month { color:#b7c0d6; cursor:default; background:transparent; }
    .day.today { border:1px solid #cfe0ff; }
    .day.selected { background:#2563eb; color:white; }

    .day.disabled {
      color:#c7ccd9;
      cursor:not-allowed;
    }

    .footer {
      margin-top:8px;
      text-align:right;
      font-size:12px;
      color:#546178;
    }

    /* small screens */
    @media (max-width: 360px) {
      .calendar { width: 100%; left: 8px !important; right:8px !important; }
    }