/* Readable text surfaces for light/dark themes.
   Use .cb-readable-surface on pre/code/textarea containers to enforce contrast. */

.cb-readable-surface {
    background-color: #f8f9fa;
    color: #212529;
}

.cb-input-contrast {
    color: #212529 !important;
    -webkit-text-fill-color: #212529 !important;
    color-scheme: light;
}

.cb-input-contrast::-webkit-datetime-edit,
.cb-input-contrast::-webkit-datetime-edit-fields-wrapper,
.cb-input-contrast::-webkit-datetime-edit-text,
.cb-input-contrast::-webkit-datetime-edit-hour-field,
.cb-input-contrast::-webkit-datetime-edit-minute-field,
.cb-input-contrast::-webkit-datetime-edit-second-field,
.cb-input-contrast::-webkit-datetime-edit-ampm-field {
    color: #212529 !important;
    -webkit-text-fill-color: #212529 !important;
}

.cb-readable-surface.text-white,
.cb-readable-surface .text-white {
    color: #212529 !important;
}

.cb-readable-surface pre,
.cb-readable-surface code,
.cb-readable-surface textarea,
.cb-readable-surface .form-control,
.cb-readable-surface .form-control-plaintext {
    color: inherit;
}

body.dark-only .cb-readable-surface,
html.dark .cb-readable-surface,
[data-bs-theme="dark"] .cb-readable-surface {
    background-color: #1f2937;
    color: #f3f4f6;
}

body.dark-only .cb-input-contrast,
html.dark .cb-input-contrast,
[data-bs-theme="dark"] .cb-input-contrast {
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    color-scheme: dark;
}

body.dark-only .cb-input-contrast::-webkit-datetime-edit,
body.dark-only .cb-input-contrast::-webkit-datetime-edit-fields-wrapper,
body.dark-only .cb-input-contrast::-webkit-datetime-edit-text,
body.dark-only .cb-input-contrast::-webkit-datetime-edit-hour-field,
body.dark-only .cb-input-contrast::-webkit-datetime-edit-minute-field,
body.dark-only .cb-input-contrast::-webkit-datetime-edit-second-field,
body.dark-only .cb-input-contrast::-webkit-datetime-edit-ampm-field,
html.dark .cb-input-contrast::-webkit-datetime-edit,
html.dark .cb-input-contrast::-webkit-datetime-edit-fields-wrapper,
html.dark .cb-input-contrast::-webkit-datetime-edit-text,
html.dark .cb-input-contrast::-webkit-datetime-edit-hour-field,
html.dark .cb-input-contrast::-webkit-datetime-edit-minute-field,
html.dark .cb-input-contrast::-webkit-datetime-edit-second-field,
html.dark .cb-input-contrast::-webkit-datetime-edit-ampm-field,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit-fields-wrapper,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit-text,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit-hour-field,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit-minute-field,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit-second-field,
[data-bs-theme="dark"] .cb-input-contrast::-webkit-datetime-edit-ampm-field {
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6 !important;
}

body.dark-only .cb-input-contrast::placeholder,
html.dark .cb-input-contrast::placeholder,
[data-bs-theme="dark"] .cb-input-contrast::placeholder {
    color: #d1d5db !important;
}

body.dark-only .cb-readable-surface.text-dark,
body.dark-only .cb-readable-surface .text-dark,
html.dark .cb-readable-surface.text-dark,
html.dark .cb-readable-surface .text-dark,
[data-bs-theme="dark"] .cb-readable-surface.text-dark,
[data-bs-theme="dark"] .cb-readable-surface .text-dark {
    color: #f3f4f6 !important;
}

body.dark-only .cb-readable-surface pre,
body.dark-only .cb-readable-surface code,
body.dark-only .cb-readable-surface textarea,
body.dark-only .cb-readable-surface .form-control,
body.dark-only .cb-readable-surface .form-control-plaintext,
html.dark .cb-readable-surface pre,
html.dark .cb-readable-surface code,
html.dark .cb-readable-surface textarea,
html.dark .cb-readable-surface .form-control,
html.dark .cb-readable-surface .form-control-plaintext,
[data-bs-theme="dark"] .cb-readable-surface pre,
[data-bs-theme="dark"] .cb-readable-surface code,
[data-bs-theme="dark"] .cb-readable-surface textarea,
[data-bs-theme="dark"] .cb-readable-surface .form-control,
[data-bs-theme="dark"] .cb-readable-surface .form-control-plaintext {
    color: inherit;
}

body.dark-only .cb-readable-surface ::placeholder,
html.dark .cb-readable-surface ::placeholder,
[data-bs-theme="dark"] .cb-readable-surface ::placeholder {
    color: #d1d5db;
}

.cb-run-cta {
    font-weight: 600;
}

.btn-run-template {
    font-weight: 600;
    white-space: nowrap;
}

.cb-cta-arrow {
    display: inline-block;
    animation: cb-cta-bounce 1.4s ease-in-out infinite;
}

@keyframes cb-cta-bounce {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-cta-arrow {
        animation: none;
    }
}