.f-tp-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .45);
z-index: 1080;
display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 576px) {
.f-tp-backdrop { align-items: center; }
}

.f-tp {
background: var(--bs-body-bg, #fff);
color: var(--bs-body-color, #1a1a1a);
border: 1px solid var(--bs-border-color, #ddd);
width: 100%; max-width: 22rem;
border-radius: .5rem .5rem 0 0;
padding: 1rem 1rem 1.25rem;
}
@media (min-width: 576px) {
.f-tp { border-radius: .5rem; }
}

.f-tp__preview {
text-align: center;
font-size: 1.75rem;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
margin-bottom: .75rem;
}

.f-tp__cols { display: flex; gap: .5rem; }

.f-tp__col {
flex: 1 1 0;
height: 11rem;
overflow-y: auto;
border: 1px solid var(--bs-border-color, #ddd);
border-radius: .375rem;
scrollbar-width: thin;
}
.f-tp__row {
display: block; width: 100%;
border: 0; background: none;
padding: .4rem 0;
text-align: center;
font-variant-numeric: tabular-nums;
color: inherit;
cursor: pointer;
}
.f-tp__row.is-active {
background: var(--bs-emphasis-color, #1a1a1a);
color: var(--bs-body-bg, #fff);
}

.f-tp__ampm { display: flex; flex-direction: column; gap: .5rem; flex: 0 0 4rem; }
.f-tp__ampm .f-tp__seg {
flex: 1 1 0;
border: 1px solid var(--bs-border-color, #ddd);
border-radius: .375rem;
background: none; color: inherit;
cursor: pointer;
}
.f-tp__ampm .f-tp__seg.is-active {
background: var(--bs-emphasis-color, #1a1a1a);
color: var(--bs-body-bg, #fff);
border-color: var(--bs-emphasis-color, #1a1a1a);
}

.f-tp__actions {
display: flex; gap: .5rem;
margin-top: 1rem;
}
.f-tp__actions .btn { flex: 1 1 0; }