.bkohh-wrap {
    --bkohh-primary: #14b8a6;
    --bkohh-primary-hover: #0d9488;
    --bkohh-ring: #14b8a6;

    --bkohh-secondary-bg: #f3f4f6;
    --bkohh-secondary-hover: #e5e7eb;
    --bkohh-secondary-border: #cbd5e1;
    --bkohh-secondary-text: #111827;

    --bkohh-field-bg: #ffffff;
    --bkohh-field-border: #cbd5e1;
    --bkohh-field-border-hover: #94a3b8;
    --bkohh-field-text: #0f172a;

    --bkohh-muted: #6b7280;
    --bkohh-danger: #dc2626;
    --bkohh-danger-hover: #ef4444;
    --bkohh-disabled-bg: #f3f4f6;

    --bkohh-radius: 6px;
}

.bkohh-wrap input[type="text"],
.bkohh-wrap input[type="email"],
.bkohh-wrap input[type="url"],
.bkohh-wrap input[type="number"],
.bkohh-wrap input[type="search"],
.bkohh-wrap input[type="password"],
.bkohh-wrap input[type="date"],
.bkohh-wrap input[type="time"],
.bkohh-wrap input[type="datetime-local"],
.bkohh-wrap select,
.bkohh-wrap textarea,
.bkohh-wrap .regular-text {
    background-color: var(--bkohh-field-bg);
    border: 1px solid var(--bkohh-field-border);
    color: var(--bkohh-field-text);
    border-radius: var(--bkohh-radius);
    padding: 8px 10px;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.bkohh-wrap .regular-text,
.bkohh-wrap input[type="text"],
.bkohh-wrap input[type="email"],
.bkohh-wrap input[type="url"],
.bkohh-wrap input[type="number"],
.bkohh-wrap input[type="search"] {
    width: min(420px, 100%);
}

.bkohh-wrap input[type],
.bkohh-wrap select,
.bkohh-wrap textarea {
    background-clip: padding-box;
}

.bkohh-wrap input[type]:hover,
.bkohh-wrap select:hover,
.bkohh-wrap textarea:hover {
    border-color: var(--bkohh-field-border-hover);
}

.bkohh-wrap input[type]:focus,
.bkohh-wrap select:focus,
.bkohh-wrap textarea:focus {
    border-color: var(--bkohh-primary);
    box-shadow: none;
}

.bkohh-wrap ::placeholder {
    color: var(--bkohh-muted);
    opacity: 1;
}

.bkohh-wrap input[disabled],
.bkohh-wrap select[disabled],
.bkohh-wrap textarea[disabled] {
    background-color: var(--bkohh-disabled-bg);
    color: var(--bkohh-muted);
    cursor: not-allowed;
    opacity: 0.9;
}

.bkohh-wrap input:invalid,
.bkohh-wrap select:invalid,
.bkohh-wrap textarea:invalid,
.bkohh-wrap [aria-invalid="true"] {
    border-color: var(--bkohh-danger) !important;
    box-shadow: none;
}

.bkohh-wrap textarea {
    min-height: 120px;
    resize: vertical;
}

.bkohh-wrap input[type="date"],
.bkohh-wrap input[type="time"],
.bkohh-wrap input[type="datetime-local"] {
    min-width: 14rem;
    font-variant-numeric: tabular-nums;
}

.bkohh-wrap select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 14px;
}

.bkohh-wrap input[type="checkbox"],
.bkohh-wrap input[type="radio"] {
    accent-color: var(--bkohh-primary);
}

.bkohh-wrap input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--bkohh-field-border, #cbd5e1);
    border-radius: .25rem;
    background-color: #fff;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    accent-color: initial;
}

.bkohh-wrap input[type="checkbox"]:hover {
    border-color: var(--bkohh-field-border-hover, #94a3b8);
}

.bkohh-wrap input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--bkohh-ring, #2563eb);
}

.bkohh-wrap input[type="checkbox"]::before {
    content: "";
}

.bkohh-wrap input[type="checkbox"]:checked {
    border-color: var(--bkohh-primary, #2563eb);
    background-color: var(--bkohh-primary, #2563eb);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .9rem .9rem;
}

.bkohh-wrap input[type="checkbox"]:disabled {
    opacity: .6;
    cursor: not-allowed;
    background-color: var(--bkohh-disabled-bg, #f3f4f6);
}

.bkohh-form-table-container {
    background: #fff;
    border-radius: var(--bkohh-radius);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    margin-top: 1rem;
    padding: 1.5rem;
}

.bkohh-wrap .form-table th label,
.bkohh-wrap .form-table .description {
    color: #1d2327;
}

.bkohh-wrap .form-table td>*:not(:last-child) {
    margin-bottom: .4rem;
}

.bkohh-wrap .button {
    border-radius: var(--bkohh-radius);
}

.bkohh-wrap .button.button-primary {
    background-color: var(--bkohh-primary);
    border-color: var(--bkohh-primary);
    color: #fff;
    text-shadow: none;
}

.bkohh-wrap .button.button-primary:hover,
.bkohh-wrap .button.button-primary:active {
    background-color: var(--bkohh-primary-hover);
    border-color: var(--bkohh-primary-hover);
    color: #fff;
}

.bkohh-wrap .button.button-primary:focus {
    outline: 0;
    box-shadow: none;
}

.bkohh-wrap .button.button-secondary {
    background-color: var(--bkohh-secondary-bg);
    border-color: var(--bkohh-secondary-border);
    color: var(--bkohh-secondary-text);
    text-shadow: none;
}

.bkohh-wrap .button.button-secondary:hover,
.bkohh-wrap .button.button-secondary:active {
    background-color: var(--bkohh-secondary-hover);
    border-color: var(--bkohh-secondary-border);
}

.bkohh-wrap .button.button-danger {
    background-color: var(--bkohh-danger);
    border-color: var(--bkohh-danger);
    color: #fff;
    text-shadow: none;
}

.bkohh-wrap .button.button-danger:hover,
.bkohh-wrap .button.button-danger:active {
    background-color: var(--bkohh-danger-hover);
    border-color: var(--bkohh-danger-hover);
}

.bkohh-wrap .button[disabled],
.bkohh-wrap .button:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none !important;
}

.bkohh-wrap .button-link {
    color: var(--bkohh-danger);
    text-decoration: none;
}

.bkohh-wrap .button-link:hover,
.bkohh-wrap .button-link:focus {
    color: var(--bkohh-danger-hover);
}

.bkohh-wrap .js-bkohh-copy {
    align-items: center;
    display: flex;
}

.bkohh-wrap .js-bkohh-copy.is-copied .material-symbols-outlined {
    margin-right: 4px;
}

.bkohh-wrap .bkohh-weekly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.bkohh-wrap .bkohh-day {
    background: #fff;
    border-radius: var(--bkohh-radius);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    padding: 1.5rem;
}

.bkohh-wrap .bkohh-day .bkohh-windows {
    margin-bottom: .75rem;
}

.bkohh-wrap .bkohh-day h3 {
    margin-top: 0;
}

.bkohh-closed {
    display: inline-block;
    margin-bottom: 8px;
}

.bkohh-window-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: .35rem 0;
    min-width: 0;
}

.bkohh-window-row[data-mode="12h"] {
    gap: 0;
}

.bkohh-window-row[data-mode="12h"] .button-link {
    margin-left: 6px;
}

.bkohh-window-row input[type="time"] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    text-align: center;
}

.bkohh-window-row .bkohh-sep {
    flex: 0 0 auto;
    opacity: .6;
    padding: 0 2px;
}

.bkohh-window-row .button-link {
    flex: 0 0 auto;
    text-decoration: none;
}

.bkohh-preview {
    margin-top: 8px;
}

.bkohh-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.bkohh-badge.is-open {
    background: #e6f7ed;
    color: #046a38;
    border: 1px solid #b7ebc6;
}

.bkohh-badge.is-closed {
    background: #fdecea;
    color: #a8071a;
    border: 1px solid #f5c6cb;
}

.bkohh-wrap #bkohh-special-rows {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(1, 1fr); 
    align-items: stretch;
    min-width: 0;
}

@media screen and (min-width: 678px) {
    .bkohh-wrap #bkohh-special-rows {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1194px) {
    .bkohh-wrap #bkohh-special-rows {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1530px) {
    .bkohh-wrap #bkohh-special-rows {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1866px) {
    .bkohh-wrap #bkohh-special-rows {
        grid-template-columns: repeat(5, 1fr);
    }
}

.bkohh-wrap #bkohh-special-rows .bkohh-special-row {
    border: 1px solid #e5e7eb;
    border-radius: var(--bkohh-radius);
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-bottom: 0 !important;
}

.bkohh-wrap #bkohh-special-rows .bkohh-closed {
    margin: .75rem 0;
}

.bkohh-wrap #bkohh-special-rows .bkohh-special-container {
    padding: 1.5rem 1.5rem 1rem;
}

.bkohh-wrap #bkohh-special-rows .bkohh-special-footer {
    align-items: center;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
    padding: 1rem 1.5rem;
}

.bkohh-wrap #bkohh-special-rows .bkohh-special-row>input[type="date"],
.bkohh-wrap #bkohh-special-rows .bkohh-special-row>.bkohh-closed {
    align-self: flex-start;
    margin: 0;
}

.bkohh-wrap #bkohh-special-rows .bkohh-special-row .button.button-secondary.js-bkohh-add-special-window {
    align-self: flex-start;
}

.bkohh-wrap #bkohh-special-rows input[type="date"],
.bkohh-wrap #bkohh-special-rows input[type="time"],
.bkohh-wrap #bkohh-special-rows input[type="datetime-local"] {
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.bkohh-wrap .bkohh-windows-special .bkohh-window-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    min-width: 0;
}

.bkohh-wrap .bkohh-windows-special .bkohh-window-row input[type="time"] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    text-align: center;
}

#bkohh-vacation-rows {
    margin-bottom: .75rem;
}

.bkohh-vac-row {
    background-color: #ffffff;
    border-radius: var(--bkohh-radius);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    padding: 1rem;
}

.bkohh-vac-row:not(:last-child) {
    margin-bottom: .75rem;
}

.bkohh-vac-input-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bkohh-usage {
    margin-top: 12px;
}

.bkohh-usage h2 {
    margin-top: 0;
}

.bkohh-usage .bkohh-usage-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--bkohh-radius);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    margin: 12px 0;
    padding: 1.5rem;
}

.bkohh-usage .bkohh-usage-card .button.button-primary {
    margin: .75rem 0;
}

.bkohh-usage .bkohh-usage-card h3 {
    margin-top: 0;
}

.bkohh-usage .bkohh-code {
    display: block;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: var(--bkohh-radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin: 8px 0;
    word-break: break-all;
}

.bkohh-usage .bkohh-ul {
    list-style: disc;
    padding-left: 18px;
}

.bkohh-wrap .bkohh-special-add-tile {
    margin-bottom: 1rem;
}
.bkohh-preview-form {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bkohh-preview-form .button-primary {
    margin-top: .75rem;
}

.bkohh-preview-form label {
    color: #1d2327;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 600;
}

.bkohh-preview-form input {
    font-weight: 400;
}

.bkohh-preview-container {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--bkohh-radius);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
    padding: 1.5rem;
}

.bkohh-wrap p.submit {
    margin-top: .75rem;
}

.bkohh-wrap .bkohh-time-start,
.bkohh-wrap .bkohh-time-end {
    display: flex;
    gap: 2px;
}

.bkohh-wrap .bkohh-time-start input,
.bkohh-wrap .bkohh-time-end input,
.bkohh-wrap .bkohh-time-start select,
.bkohh-wrap .bkohh-time-end select {
    font-size: 12px;
    padding: 8px;
}

.bkohh-wrap .bkohh-time-start select,
.bkohh-wrap .bkohh-time-end select {
    padding-right: 24px;
}

.bkohh-wrap .bkohh-time-start select,
.bkohh-wrap .bkohh-time-end select {
    padding-right: 24px;
}