:root {
    --twyz-bk-primary: #1d71b8; /* blue-600 */
    --twyz-bk-primary-600: #1d71b8; /* blue-700 */
    --twyz-bk-bg: #fff;
    --twyz-bk-muted: #6b7280; /* gray-500 */
    --twyz-bk-border: #e5e7eb; /* gray-200 */
    --twyz-bk-shadow: 0 10px 20px rgba(0,0,0,.06), 0 6px 6px rgba(0,0,0,.06);
    --twyz-bk-radius: 16px;
}

.booking-picker {

    color: #111827
}

.twyz-bk-card {

}

.twyz-bk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--twyz-bk-border)
}

.twyz-bk-title {
    font-weight: 700;
    font-size: 18px
}

.twyz-bk-wrap {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px
}

.twyz-bk-col {
    padding: 16px
}

/* Calendar */
.twyz-bk-cal {
    width: 100%
}

.twyz-bk-cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.twyz-bk-btn-icon {
    border: 1px solid var(--twyz-bk-border);
    background: #fff;
    border-radius: 3px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    cursor: pointer
}

    .twyz-bk-btn-icon:hover {
        background: #f9fafb
    }

.twyz-bk-month {
    font-weight: 600
}

.twyz-bk-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px
}

.twyz-bk-dow {
    text-align: center;
    font-size: 12px;
    color: var(--twyz-bk-muted);
    margin: 6px 0
}

.twyz-bk-day {
    height: 40px;
    border: 1px solid var(--twyz-bk-border);
    border-radius: 3px;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    background: #fff
}

    .twyz-bk-day[aria-disabled="true"] {
        opacity: .35;
        cursor: not-allowed
    }

    .twyz-bk-day[aria-selected="true"], .twyz-bk-day:hover {
        border-color: var(--twyz-bk-primary);
    }

    .twyz-bk-day[aria-selected="true"] {
        background: rgba(37, 99, 235, .10)
    }

.twyz-bk-tz {
    font-size: 12px;
    color: var(--twyz-bk-muted)
}

.twyz-bk-legend {
    margin-top: 10px;
    font-size: 12px;
    color: var(--twyz-bk-muted)
}

/* Times */
.twyz-bk-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px
}

.twyz-bk-time {
    padding: 10px 12px;
    border: 1px solid var(--twyz-bk-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff
}

    .twyz-bk-time[disabled] {
        opacity: .4;
        cursor: not-allowed
    }

    .twyz-bk-time[aria-selected="true"] {
        border-color: var(--twyz-bk-primary);
        background: rgba(37, 99, 235, .10)
    }

.twyz-bk-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--twyz-bk-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--twyz-bk-muted);
    font-size: 12px
}

.twyz-bk-cta {
    border: none;
    background: var(--twyz-bk-primary);
    color: #fff;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 3px;
    cursor: pointer
}

    .twyz-bk-cta:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    .twyz-bk-cta:not(:disabled):hover {
        background: var(--twyz-bk-primary-600)
    }

/* Responsive */
@media (max-width: 780px) {
    .twyz-bk-wrap {
        grid-template-columns: 1fr
    }
}