/* Callback Form - Frontend */
.callback-form-wrapper { width: 100%; box-sizing: border-box; padding: 0; }
.callback-form-wrapper * { box-sizing: border-box; }
.callback-form { width: 100%; }

.cf-form-row { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; align-items: stretch; }
.cf-field { flex: 1; min-width: 0; }
.cf-phone-field { flex: 1; }
.cf-time-field { flex: 1.5; }
.cf-submit-field { flex: 0 0 auto; }

.callback-form-wrapper input[type='tel'] {
    width: 100%; height: 100%; border: 1px solid #ccc; outline: none;
    transition: border-color 0.3s, box-shadow 0.3s; -webkit-appearance: none; appearance: none;
}
.callback-form-wrapper input[type='tel']:focus { box-shadow: 0 0 0 2px rgba(0,115,170,0.2); }

.cf-multiselect-container {
    position: relative; width: 100%; height: 100%; border: 1px solid #ccc;
    cursor: pointer; outline: none; transition: border-color 0.3s, box-shadow 0.3s;
}
.cf-multiselect-container:focus, .cf-multiselect-container.active { box-shadow: 0 0 0 2px rgba(0,115,170,0.2); }

.cf-multiselect-selected { display: flex; align-items: center; justify-content: space-between; min-height: 100%; gap: 8px; }
.cf-placeholder { white-space: nowrap; }
.cf-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.cf-tag { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 0.85em; gap: 4px; }
.cf-tag-remove { cursor: pointer; font-weight: bold; opacity: 0.7; transition: opacity 0.2s; }
.cf-tag-remove:hover { opacity: 1; }
.cf-arrow { font-size: 10px; transition: transform 0.3s; margin-left: auto; flex-shrink: 0; }
.cf-multiselect-container.active .cf-arrow { transform: rotate(180deg); }

.cf-multiselect-dropdown {
    position: absolute; top: 100%; left: -1px; right: -1px; border: 1px solid #ccc;
    border-top: none; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;
}
.cf-multiselect-container.active .cf-multiselect-dropdown { display: block; }

.cf-multiselect-option {
    display: flex; align-items: center; padding: 10px 12px; cursor: pointer;
    transition: background-color 0.2s; gap: 8px; margin: 0;
}
.cf-multiselect-option input[type="checkbox"] { margin: 0; cursor: pointer; }
.cf-multiselect-option span { flex: 1; }

.callback-form-wrapper button[type='submit'] {
    border: none; cursor: pointer; white-space: nowrap; height: 100%; width: 100%;
}
.callback-form-wrapper button[type='submit']:hover { transform: translateY(-1px); }
.callback-form-wrapper button[type='submit']:active { transform: translateY(0); }
.callback-form-wrapper button[type='submit']:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.cf-message-container { margin-top: 10px; }
.cf-success-message, .cf-error-message { padding: 12px 16px; text-align: center; animation: cf-fadeIn 0.3s ease; }

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

.callback-form-wrapper.cf-loading button[type='submit'] { position: relative; color: transparent; }
.callback-form-wrapper.cf-loading button[type='submit']::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
    margin: -8px 0 0 -8px; border: 2px solid transparent; border-top-color: #fff;
    border-radius: 50%; animation: cf-spin 0.8s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }

@media screen and (max-width: 768px) {
    .cf-form-row { flex-direction: column; }
    .cf-field, .cf-phone-field, .cf-time-field, .cf-submit-field { flex: none; width: 100%; }
    .callback-form-wrapper input[type='tel'],
    .cf-multiselect-container,
    .callback-form-wrapper button[type='submit'] { width: 100%; min-height: 48px; }
}

/* Divi Compatibility */
.et_pb_text .callback-form-wrapper, .et_pb_code .callback-form-wrapper { max-width: 100%; }
.et_pb_text .cf-form-row, .et_pb_code .cf-form-row { width: 100%; }
.et_pb_text .callback-form-wrapper input, .et_pb_code .callback-form-wrapper input,
.et_pb_text .callback-form-wrapper button, .et_pb_code .callback-form-wrapper button { margin-bottom: 0; }
.callback-form-wrapper input[type='tel'] { background-image: none !important; }