/* Date of birth field (js/dob.js): dd-mm-yyyy text box with a calendar button */
.dob-wrap { position: relative; display: block; width: 100%; }
.dob-wrap .dob-text { width: 100%; padding-right: 46px !important; letter-spacing: .5px; }
.dob-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #0e6b70; cursor: pointer; border-radius: 0 8px 8px 0;
}
.dob-btn:hover, .dob-btn:focus { background: rgba(14, 107, 112, .08); outline: none; }
.dob-wrap.dob-invalid .dob-text { border-color: #d64545 !important; }

.dob-pop {
  position: absolute; z-index: 1210; top: 0; left: 0;
  width: 300px; max-width: calc(100vw - 32px); padding: 10px;
  background: #fff; color: #222; border: 1px solid #d5dde0; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.2;
}
.dob-pop.dob-sheet {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 320px; z-index: 1210;
}
.dob-back { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .35); z-index: 1200; }
.dob-head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.dob-head select {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 6px; font-size: 14px;
  border: 1px solid #c9d3d6; border-radius: 8px; background: #fff; color: #222;
}
.dob-head .dob-year { flex: 0 0 84px; }
.dob-nav {
  flex: 0 0 34px; height: 36px; border: 1px solid #c9d3d6; border-radius: 8px;
  background: #f5f8f9; color: #0e6b70; font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.dob-nav:disabled { opacity: .35; cursor: default; }
.dob-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dob-dow { text-align: center; font-size: 12px; font-weight: 600; color: #6b7a80; padding: 4px 0; }
.dob-day {
  height: 36px; border: 0; border-radius: 8px; background: transparent; color: #222;
  font-size: 14px; cursor: pointer; padding: 0;
}
.dob-day:hover, .dob-day:focus { background: #e3f1f2; outline: none; }
.dob-day.is-today { box-shadow: inset 0 0 0 1px #0e6b70; }
.dob-day.is-chosen { background: #0e6b70; color: #fff; font-weight: 700; }
.dob-day:disabled { color: #c3c9cc; background: transparent; cursor: default; }
.dob-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: #6b7a80; }
.dob-close { border: 0; background: transparent; color: #0e6b70; font-weight: 600; cursor: pointer; padding: 6px 4px; font-size: 14px; }

@media (max-width: 575px) {
  .dob-wrap .dob-text { padding-right: 34px !important; letter-spacing: 0; }
  .dob-btn { width: 34px; }
}
/* Read-only: the date is chosen from the calendar */
.dob-wrap .dob-text[readonly] { cursor: pointer; caret-color: transparent; }