/* Vertex birth date calendar. The real date input retains validation and ISO storage. */
.join-card .vx-birth-anchor{position:relative;width:100%;min-width:0}
.join-card .vx-birth-source{
 position:absolute!important;width:1px!important;height:1px!important;left:0;top:0;
 opacity:0!important;pointer-events:none!important;clip-path:inset(50%);
 padding:0!important;border:0!important;overflow:hidden!important;
}
.join-card .vx-birth-trigger{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 width:100%;min-height:50px;padding:12px 15px;
 border:1px solid var(--border);border-radius:14px;
 background:var(--bg);color:var(--text);font:inherit;font-size:14.5px;
 text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;
}
.join-card .vx-birth-trigger:hover{border-color:var(--text-muted);background:var(--surface)}
.join-card .vx-birth-trigger:focus-visible,
.join-card .vx-birth-trigger[aria-expanded="true"]{
 outline:none;border-color:var(--text-muted);box-shadow:0 0 0 3px var(--accent-soft);
}
.join-card .vx-birth-trigger.vx-birth-invalid{border-color:#c86a6a}
.join-card .vx-birth-placeholder{color:var(--text-muted)}
.join-card .vx-birth-icon{display:flex;align-items:center;justify-content:center;flex:none;color:var(--text-muted)}
.join-card .vx-birth-error:not([hidden]){display:block;margin-top:7px;font-size:12px;color:#c86a6a}
.vx-date-panel[hidden]{display:none!important}
.vx-date-panel{
 position:fixed;z-index:10000;box-sizing:border-box;
 background:var(--bg);color:var(--text);border:1px solid var(--border);
 border-radius:20px;box-shadow:0 22px 58px rgba(0,0,0,.24),0 5px 16px rgba(0,0,0,.12);
 padding:15px;overflow-y:auto;overflow-x:hidden;
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 font-family:inherit;font-size:13px;direction:ltr;
}
html[data-theme="dark"] .vx-date-panel{
 background:#15171b;border-color:#343740;
 box-shadow:0 24px 65px rgba(0,0,0,.56),0 4px 18px rgba(0,0,0,.3);
}
.vx-date-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.vx-date-arrow{
 display:flex;justify-content:center;align-items:center;flex:none;
 border:1px solid transparent;border-radius:11px;width:34px;height:36px;
 color:var(--text);background:transparent;font-family:inherit;font-size:24px;
 line-height:1;cursor:pointer;transition:background .18s,border-color .18s;
}
.vx-date-arrow:hover:not(:disabled){background:var(--surface);border-color:var(--border)}
.vx-date-arrow:disabled{opacity:.23;cursor:not-allowed}
.vx-date-selects{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:6px;flex:1;min-width:0}
.vx-date-selects select{
 width:100%;height:36px;min-width:0;border-radius:10px;border:1px solid var(--border);
 background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;
 padding:0 7px;cursor:pointer;outline:none;
}
.vx-date-selects select:focus-visible,.vx-date-arrow:focus-visible,
.vx-date-day:focus-visible{outline:2px solid var(--text-muted);outline-offset:2px}
.vx-date-selects option{background:var(--bg);color:var(--text)}
.vx-date-weekdays,.vx-date-grid{
 display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
 text-align:center;
}
.vx-date-weekdays{margin-bottom:7px}
.vx-date-weekdays span{font-size:11px;font-weight:600;color:var(--text-muted);padding:5px 0}
.vx-date-empty{aspect-ratio:1/1}
.vx-date-day{
 display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
 border:1px solid transparent;border-radius:11px;
 background:transparent;color:var(--text);font:inherit;font-size:13.5px;
 cursor:pointer;transition:background .16s,color .16s,transform .16s;
}
.vx-date-day:hover:not(:disabled){background:var(--surface-2);transform:translateY(-1px)}
.vx-date-day.is-today:not(.is-selected){border-color:var(--text-muted)}
.vx-date-day.is-selected,.vx-date-day.is-selected:hover:not(:disabled){
 background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700;
}
.vx-date-day:disabled{opacity:.23;cursor:not-allowed}
@media(max-width:480px){
 .vx-date-panel{padding:11px;border-radius:17px}
 .vx-date-weekdays,.vx-date-grid{gap:3px}
}
@media(prefers-reduced-motion:reduce){
 .join-card .vx-birth-trigger,.vx-date-arrow,.vx-date-day{transition:none!important}
}

/* Same elevated surfaces and list styling as the phone country picker. */
.vx-date-panel{
 background:var(--bg);
 border-color:var(--border);
 border-radius:17px;
 padding:12px;
 overflow:visible;
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 transform:translateY(-9px) scale(.975);
 transform-origin:top left;
 transition:opacity 195ms cubic-bezier(.22,1,.36,1),
            transform 195ms cubic-bezier(.22,1,.36,1),
            visibility 195ms;
 will-change:transform,opacity;
}
.vx-date-panel.is-open{
 opacity:1;
 visibility:visible;
 pointer-events:auto;
 transform:translateY(0) scale(1);
}
html[data-theme="dark"] .vx-date-panel{
 background:#181818;
 border-color:#353535;
 box-shadow:0 18px 45px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.27);
}
.vx-date-head{gap:7px;margin-bottom:11px;padding:2px 0 11px;border-bottom:1px solid var(--border)}
html[data-theme="dark"] .vx-date-head{border-bottom-color:#303030}
.vx-date-selects{grid-template-columns:minmax(0,1fr) minmax(88px,.67fr);gap:7px}
.vx-date-select-wrap{position:relative;min-width:0}
.vx-date-select-wrap>select[hidden]{display:none!important}
.vx-date-select-trigger{
 display:flex;align-items:center;justify-content:space-between;gap:6px;
 width:100%;height:37px;min-width:0;padding:0 10px;
 background:var(--surface);color:var(--text);
 border:1px solid var(--border);border-radius:11px;
 text-align:left;font:inherit;font-size:12.5px;font-weight:600;
 cursor:pointer;
 transition:border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;
}
html[data-theme="dark"] .vx-date-select-trigger{background:#212121;border-color:#363636}
.vx-date-select-trigger:hover,.vx-date-select-trigger[aria-expanded="true"]{
 background:var(--surface-2);border-color:var(--text-muted);
}
html[data-theme="dark"] .vx-date-select-trigger:hover,
html[data-theme="dark"] .vx-date-select-trigger[aria-expanded="true"]{background:#292929;border-color:#6c6c6c}
.vx-date-select-trigger:focus-visible{outline:2px solid var(--text-muted);outline-offset:2px}
.vx-date-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-date-select-chevron{
 display:grid;place-items:center;align-self:center;flex:0 0 18px;
 width:18px;height:18px;margin:0;padding:0;
 line-height:0;color:var(--text-muted);
 transform:rotate(0deg);transform-origin:center center;
 transition:transform 180ms ease;
}
.vx-date-select-chevron svg{display:block;width:16px;height:16px}
.vx-date-select-trigger[aria-expanded="true"] .vx-date-select-chevron{transform:rotate(180deg)}
.vx-date-menu[hidden]{display:none!important}
.vx-date-menu{
 position:absolute;z-index:2;left:0;top:calc(100% + 5px);
 min-width:100%;width:max-content;max-width:255px;
 background:var(--bg);border:1px solid var(--border);border-radius:13px;
 padding:5px;box-shadow:0 16px 28px rgba(0,0,0,.2);
 opacity:0;pointer-events:none;transform:translateY(-6px) scale(.98);
 transform-origin:top left;
 transition:opacity 165ms ease,transform 165ms ease;
}
html[data-theme="dark"] .vx-date-menu{background:#1a1a1a;border-color:#393939;box-shadow:0 16px 30px rgba(0,0,0,.5)}
.vx-date-menu.is-open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.vx-date-menu-search-wrap{padding:4px 3px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
html[data-theme="dark"] .vx-date-menu-search-wrap{border-bottom-color:#303030}
.vx-date-menu .vx-date-menu-search{
 display:block;box-sizing:border-box;width:100%;height:36px;
 padding:7px 10px;border:1px solid var(--border);border-radius:10px;
 background:var(--surface);color:var(--text);font:inherit;font-size:13px;
 outline:none;
}
html[data-theme="dark"] .vx-date-menu .vx-date-menu-search{background:#121212;border-color:#3a3a3a}
.vx-date-menu .vx-date-menu-search:focus{border-color:var(--text-muted);box-shadow:0 0 0 2px var(--accent-soft)}
.vx-date-menu-list{min-width:105px;max-height:181px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.vx-date-menu-choice{
 display:block;width:100%;text-align:left;padding:9px 12px;
 border:0;border-radius:8px;background:transparent;color:var(--text);
 font:inherit;font-size:13px;cursor:pointer;
}
.vx-date-menu-choice:hover:not(:disabled),.vx-date-menu-choice:focus-visible{background:var(--surface);outline:none}
html[data-theme="dark"] .vx-date-menu-choice:hover:not(:disabled),
html[data-theme="dark"] .vx-date-menu-choice:focus-visible{background:#292929}
.vx-date-menu-choice.is-selected{background:var(--surface-2);font-weight:700}
html[data-theme="dark"] .vx-date-menu-choice.is-selected{background:#303030}
.vx-date-menu-choice[hidden]{display:none!important}
.vx-date-weekdays{margin-bottom:6px}
.vx-date-weekdays span{padding:6px 0;font-weight:700}
.vx-date-grid{gap:5px}
.vx-date-day{border-radius:10px}
html[data-theme="dark"] .vx-date-day:hover:not(:disabled){background:#303030}
html[data-theme="dark"] .vx-date-day.is-selected{background:#e9e9e9;color:#121212;border-color:#e9e9e9}
.vx-date-arrow:hover:not(:disabled){border-radius:10px}
html[data-theme="dark"] .vx-date-arrow:hover:not(:disabled){background:#292929;border-color:#393939}
html[data-theme="dark"] .join-card .vx-birth-trigger{background:#171717;border-color:#373737}
html[data-theme="dark"] .join-card .vx-birth-trigger:hover{background:#1e1e1e;border-color:#666}
/* Centered mobile dialogs must scale about their own center; otherwise the
   opening animation looks shifted even when the fixed left edge is correct. */
@media(max-width:600px){
 .vx-date-panel{transform-origin:top center}
}
@media(max-width:480px){
 .vx-date-panel{padding:11px;border-radius:15px}
 .vx-date-menu{max-width:190px}
}
@media(prefers-reduced-motion:reduce){
 .vx-date-panel,.vx-date-menu,.vx-date-select-trigger{
 transition:none!important;transform:none!important;will-change:auto
 }
 .vx-date-select-chevron{transition:none!important;will-change:auto}
}