/* Wave Dark Theme - Form Controls */
.form-control {
    border: 1px solid var(--wave-border);
    background-color: var(--wave-dark-bg-tertiary);
    color: var(--wave-text-primary);
    line-height: 1.4285em;
    font-size: .8125rem;
    font-weight: 400;
    border-radius: 8px;
    transition: all 0.3s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
    color: var(--wave-text-primary)!important;
}

.form-control:focus {
    border-color: var(--wave-primary);
    background-color: var(--wave-dark-bg-tertiary);
    color: var(--wave-text-primary);
    box-shadow: var(--wave-glow-subtle);
    outline: none;
}

.form-control::placeholder {
    color: var(--wave-text-muted);
}

.form-group label {
    color: var(--wave-text-secondary);
    font-weight: 500;
    display: inline-flex;
}

.select2-container--default .select2-selection--single, .select2-container .select2-selection--single {
    border: 1px solid var(--wave-border) !important;
    background-color: var(--wave-dark-bg-tertiary) !important;
    color: var(--wave-text-primary) !important;
    height: 38px!important;
    padding: 5px;
    border-radius: 8px;
}

.select2-dropdown {
    border: 1px solid var(--wave-border) !important;
    background-color: var(--wave-dark-bg-secondary) !important;
    color: var(--wave-text-primary) !important;
    border-radius: 8px;
}

.select2-container--default .select2-results__option {
    color: var(--wave-text-primary);
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--wave-dim) !important;
    color: var(--wave-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px!important;
}


.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--tblr-secondary-rgb), 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
}

.loading-content {
    text-align: center;
    color: var(--wave-text-secondary);
    font-size: 14px;
}

.loading-content img {
    display: block;
    margin: 0 auto;
}

.appointment-calendar-container {
    position: relative;
}


.appointment-calendar-container .time-section {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.time-slots-container {
    min-height: 200px;
    padding-top: 8px; /* evita que o primeiro item fique colado no topo quando o container tem overflow */
}

#time-slots-loading-overlay {
    border-radius: 8px;
}

/* Garantir que a overlay inicial seja mostrada por padrão */
#form-loading-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Garantir que a overlay dos horários seja escondida por padrão */
#time-slots-loading-overlay {
    display: none;
}

.choices__inner .choices__input {
    border-radius: 8px;
    border: none !important;
    width: 100% !important;
    max-width: 100%!important;
}

.select2-selection .select2-search__field {
    border: none!important;
    border-radius: 8px!important;
    background-color: var(--wave-dark-bg-tertiary)!important;
    color: var(--wave-text-primary)!important;
}


.form-wrap.form-builder .frmb li {
    background-color: var(--wave-dark-bg-tertiary) !important;
    padding: 5px 10px !important;
    border-radius: 10px;
    margin-bottom: 0.2rem !important;
}

.form-wrap.form-builder .frmb-control li {
    background: none!important;
    box-shadow: inset 0 0 0 1px var(--wave-border)!important;
}

.form-wrap.form-builder .frmb .form-elements {
    padding: 15px 20px!important;
    border-radius: 12px!important;
}

.form-wrap.form-builder .frmb .form-elements {
    background: var(--wave-dark-bg-secondary)!important;
    border: none!important;
}

.form-wrap.form-builder .frmb .prev-holder {
    font-size: 12px!important;
}

.form-wrap.form-builder .field-label {
    /* font-size: 12px!important; */
    font-weight: 700!important;
}


.form-wrap.form-builder .frmb>li:hover {
    background-color: var(--wave-dark-bg-tertiary)!important;
}

.form-wrap.form-builder .frmb .field-actions .btn {
    border-color: var(--tblr-primary)!important;
    background-color: var(--tblr-tertiary)!important;
    color: var(--tblr-primary-light-text-button)!important;
}

.form-wrap.form-builder .frmb .field-actions .btn:hover {
    border-color: var(--tblr-primary)!important;
    background-color: var(--tblr-primary-light)!important;
    color: var(--tblr-primary-button-text)!important;
}

.qq-gallery.qq-uploader {
    background-color: var(--wave-dark-bg-secondary)!important;
    border: 1px dashed var(--tblr-primary-light)!important;
}

.ui-widget-header {
    background: none!important;
    border: none!important;
}

#editor .dynamic-content {
    background-color: var(--wave-dark-bg-tertiary)!important;
    border: none;
    color: var(--wave-text-primary)!important;
}

.select-item:hover {
    background-color: var(--tblr-primary-light)!important;
    color: var(--tblr-primary)!important;
    border-radius: 8px!important;
}

.select-item.active {
    background-color: var(--tblr-primary-light)!important;
    color: var(--tblr-primary)!important;
    border-radius: 8px!important;
}

.audio-capture-ui {
    background: var(--wave-dark-bg-tertiary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--wave-border);
}

.form-wrap.form-builder .frmb .form-elements [contenteditable].form-control, .form-wrap.form-builder .frmb .form-elements input[type='text'], .form-wrap.form-builder .frmb .form-elements input[type='number'], .form-wrap.form-builder .frmb .form-elements input[type='date'], .form-wrap.form-builder .frmb .form-elements input[type='color'], .form-wrap.form-builder .frmb .form-elements textarea, .form-wrap.form-builder .frmb .form-elements select {
    transition: background 250ms ease-in-out;
    padding: 6px 12px;
    border: 1px solid #c5c5c5;
    background-color:var(--wave-dark-bg-tertiary)!important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none!important;
    background: none!important;
    color: var(--wave-text-primary)!important;
    border-radius: 8px!important;
    font-size: 12px!important;
    font-weight: 700!important;
    font-family: var(--wave-font-family)!important;
}

.dz-preview {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    border: none!important;
    background-color: var(--tblr-dark);
    border-radius: 8px;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
    background: var(--wave-dark-bg-tertiary)!important;
    border: 1px solid var(--tblr-primary-light)!important;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color: transparent!important;
}

.dropzone .dz-preview .dz-image img {
    border: none!important;
    background-color: var(--wave-dark-bg-tertiary)!important;
    background: none!important;
}

.form-wrap.form-builder .frmb .form-elements .false-label:first-child, .form-wrap.form-builder .frmb .form-elements label:first-child {
    width: 20%!important;
    padding-top: 7px!important;
    margin-bottom: 0!important;
    text-align: right!important;
    font-weight: 400!important;
    font-size: 12px!important;
    float: left!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    text-transform: capitalize!important;
}

.form-wrap.form-builder .frmb .form-elements .input-wrap {
    width: 77%!important;
    margin-left: 2%!important;
    float: left!important;
}

.run-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--tblr-secondary-rgb), 0.95);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.run-loading-content {
    text-align: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#prevBtn {
    background-color: #bbbbbb;
}

.step {
    /* height: 15px;
    width: 15px; */
    margin: 0 2px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    display: inline-block;
    /* opacity: 0.5; */
}

.step.active {
    opacity: 1;
}

.step.finish {
    background-color: #394EEA;
}

/* AI Form Fields Toggle Styles - MUST be in <head> to work */
/* Hide ai-target fields by default (before JS wraps them) - use visibility to not break Choices.js */
.form-group:has(.ai-target),
.form-group.has-ai-target {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    /* margin: 0 !important; */
    padding: 0 !important;
}
/* Show ai-target fields when container is visible */
.ai-target-container.visible .form-group:has(.ai-target),
.ai-target-container.visible .form-group.has-ai-target {
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    /* margin: revert !important; */
    padding: revert !important;
}
/* Hide submit button by default when ai-target fields exist on page */
body:has(.ai-target) button[type="submit"]:not(.show-submit),
body:has(.ai-target) input[type="submit"]:not(.show-submit),
body:has(.ai-target) #submit-btn:not(.show-submit),
body:has(.ai-target) #nextBtn:not(.show-submit) {
    display: none !important;
}
body:has(.ai-target) .form-group:has(button[type="submit"]:not(.show-submit)),
body:has(.ai-target) .form-group:has(input[type="submit"]:not(.show-submit)),
body:has(.ai-target) .form-group:has(#submit-btn:not(.show-submit)),
body:has(.ai-target) .form-group:has(#nextBtn:not(.show-submit)) {
    display: none !important;
}
/* Show submit button when it has .show-submit class (after AI result) */
button[type="submit"].show-submit,
input[type="submit"].show-submit,
#submit-btn.show-submit,
#nextBtn.show-submit {
    display: inline-block !important;
}
.form-group:has(button[type="submit"].show-submit),
.form-group:has(input[type="submit"].show-submit),
.form-group:has(#submit-btn.show-submit),
.form-group:has(#nextBtn.show-submit) {
    display: block !important;
}

.permission0item .form-label, label {
    color: #333333;
}