.branded-date-time { position: relative; display: block; min-width: 0; }
.branded-date-time__trigger { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 11px; background: var(--color-surface, #fff); color: var(--color-text, #18181b); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.branded-date-time__trigger::after { float: right; color: var(--color-accent, #4f46e5); content: "▾"; }
.branded-date-time__trigger:hover,.branded-date-time__trigger:focus-visible { border-color: var(--color-accent, #4f46e5); outline: none; box-shadow: 0 0 0 3px rgb(79 70 229 / .15); }
.branded-date-time__trigger.is-placeholder { color: var(--color-text-secondary, #71717a); }
.branded-date-time__popup { position: absolute; z-index: 200; top: calc(100% + 8px); left: 0; display: none; width: min(326px, calc(100vw - 24px)); box-sizing: border-box; padding: 14px; border: 1px solid #e0e7ff; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgb(49 46 129 / .2); }
.branded-date-time.is-open .branded-date-time__popup { display: block; }
.branded-date-time__month { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: 8px; }
.branded-date-time__month strong { font-size: 14px; text-align: center; text-transform: capitalize; }
.branded-date-time__month button { height: 36px; border: 0; border-radius: 9px; background: transparent; color: #4338ca; font-size: 24px; cursor: pointer; }
.branded-date-time__month button:hover { background: #eef2ff; }
.branded-date-time__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.branded-date-time__weekdays span { display: grid; height: 28px; place-items: center; color: #71717a; font-size: 11px; font-weight: 750; }
.branded-date-time__grid button { display: grid; aspect-ratio: 1; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #18181b; font: inherit; font-size: 13px; cursor: pointer; }
.branded-date-time__grid button:hover:not(:disabled),.branded-date-time__grid button:focus-visible { background: #eef2ff; color: #3730a3; outline: none; }
.branded-date-time__grid button.is-outside,.branded-date-time__grid button:disabled { color: #a1a1aa; }
.branded-date-time__grid button.is-today { border-color: #c7d2fe; }
.branded-date-time__grid button[aria-pressed="true"] { background: #4f46e5; color: #fff; }
.branded-date-time__time { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 11px; background: #eef2ff; }
.branded-date-time__time span { flex: 1; color: #3730a3; font-size: 13px; font-weight: 750; }
.branded-date-time__time input { width: 48px; height: 36px; box-sizing: border-box; padding: 0; border: 1px solid #c7d2fe; border-radius: 8px; background: #fff; text-align: center; font: 700 14px "JetBrains Mono", monospace; appearance: textfield; }
.branded-date-time__time input::-webkit-inner-spin-button { appearance: none; }
.branded-date-time__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.branded-date-time__actions button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.branded-date-time__today { margin-right: auto; background: #eef2ff; color: #3730a3; }
.branded-date-time__apply { background: #4f46e5; color: #fff; }
.branded-date-time__actions button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 440px) { .branded-date-time__popup { left: auto; right: 0; } }