.ls-birth-input {
  display: grid;
  gap: 20px;
  min-width: 0;
  container-type: inline-size;
  color: #202020;
}

.ls-birth-input *, .ls-birth-input *::before, .ls-birth-input *::after { box-sizing: border-box; }
.ls-birth-input [hidden] { display: none !important; }
.ls-birth-input h4, .ls-birth-input p { margin: 0; }
.ls-birth-input button, .ls-birth-input input, .ls-birth-input select { font: inherit; }
.ls-birth-input input:not([type=hidden]), .ls-birth-input select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 58px;
  border: 1px solid #d4d4d4;
  border-radius: 9px;
  padding: 12px;
  background: #fff;
  color: #202020;
  font-size: calc(20px + 2pt);
  line-height: 1.4;
}
.ls-birth-input input:is([type=date], [type=time]) { inline-size: 100%; min-inline-size: 0; }
.ls-birth-input input:is([type=date], [type=time])::-webkit-date-and-time-value { min-width: 0; text-align: start; }
.ls-birth-input label { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: calc(18px + 2pt); font-weight: 500; }
.ls-birth-input h4 { font-size: calc(20px + 2pt); }
.ls-birth-input button { border: 1px solid #d4d4d4; border-radius: 7px; color: #202020; background: #fff; }
.ls-birth-input button:hover { background: #f3f3f3; }
.ls-birth-input :focus-visible { outline: 3px solid #555; outline-offset: 2px; }

.ls-birth-input .zw-two, .ls-birth-input .zw-birth-row { display: grid; gap: 14px; align-items: start; }
.ls-birth-input .zw-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls-birth-input .zw-date-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}
.ls-birth-input .zw-birth-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-birth-input .zw-solar-fields, .ls-birth-input .zw-time-field { grid-column: span 2; min-width: 0; }
.ls-birth-input .zw-lunar-fields { display: contents; }
.ls-birth-input .zw-birth-row[data-mode=lunar] .zw-time-field { grid-column: auto; }
.ls-birth-input .zw-unknown-time { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.ls-birth-input .zw-unknown-time input { width: 20px; min-height: 20px; }
.ls-birth-input .zw-tabs { display: flex; gap: 6px; border-bottom: 1px solid #dedede; padding-bottom: 10px; }
.ls-birth-input .zw-tabs button { min-width: 90px; padding: 9px 16px; background: transparent; border-color: transparent; font-size: calc(18px + 2pt); }
.ls-birth-input .zw-tabs button[aria-pressed=true] { background: #202020; color: #fff; }
.ls-birth-input .zw-tabs button[aria-pressed=true]:hover { background: #333; }
.ls-birth-input .zw-help { color: #666; font-size: calc(15px + 2pt); line-height: 1.7; overflow-wrap: anywhere; }
.ls-birth-input .zw-help:empty { display: none; }
.ls-birth-input .zw-group-title button { padding: 8px 10px; font-size: calc(18px + 2pt); }
.ls-birth-input .zw-location-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ls-birth-input .zw-city-picker, .ls-birth-input .ls-place-picker { min-width: 0; }
.ls-birth-input .ls-place-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative; }
.ls-birth-input .ls-place-picker > label { position: relative; }
.ls-birth-input .ls-place-status { grid-column: 1 / -1; color: #666; font-size: 14px; }
.ls-birth-input .ls-place-status:empty { display: none; }
.ls-birth-input .ls-place-results { position: relative; z-index: 2; max-height: 250px; width: 100%; min-width: 0; overflow: auto; background: #fff; border: 1px solid #d4d4d4; border-radius: 9px; }
.ls-birth-input .ls-place-results button { display: block; width: 100%; white-space: normal; text-align: left; font-size: 14px; padding: 9px 12px; border: 0; border-bottom: 1px solid #e5e5e5; border-radius: 0; }
.ls-birth-input[data-birth-enabled=false] > :not(.zw-two) { display: none; }

@container (max-width: 640px) {
  .ls-birth-input .zw-birth-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-birth-input .zw-solar-fields, .ls-birth-input .zw-time-field { grid-column: auto; }
  .ls-birth-input .zw-birth-row input, .ls-birth-input .zw-birth-row select { font-size: calc(18px + 2pt); padding: 10px 6px; }
}

@container (max-width: 350px) {
  .ls-birth-input .zw-date-box { padding: 10px; }
  .ls-birth-input .zw-birth-row[data-mode=solar] { grid-template-columns: minmax(0, 1fr); }
  .ls-birth-input .zw-tabs button { min-width: 0; flex: 1; }
  .ls-birth-input .ls-place-picker { grid-template-columns: minmax(0, 1fr); }
}