/*
 * CallbackRequest: the "guided phone call" block, on the welcome screen
 * (.callback-widget, markup in the survey description) and on the question
 * page (.callback-box, built by callback.js around the callback-* questions).
 *
 * Look (DFF x Bayt mockups): a light-blue rounded panel; a header row with a
 * phone icon, a title and subtitle, a divider, and the opt-in checkbox; below
 * it the name and phone fields with a Submit button, revealed when the box is
 * ticked. The panel background, radius and header type come from the bayt
 * theme (css/modern.css .dff-callback / .callback-widget__*); this file owns
 * the controls and the reveal.
 */
.callback-widget,
.callback-box {
    --cb-brand: var(--bayt-brand, #0070eb);
    --cb-brand-600: var(--bayt-brand-600, #005bc4);
    --cb-text: var(--bayt-text, #2a3240);
    --cb-line: #cfd8e6;
    --cb-ring: var(--bayt-ring, 0 0 0 3px rgba(0, 112, 235, .18));
    --cb-ease: cubic-bezier(.22, .8, .3, 1);
    --cb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%235b6677' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --cb-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l3 3 5-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: var(--cb-text);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: start;
}
.callback-widget[hidden] {
    display: none !important;
}
/* ---- the checkbox row ---------------------------------------------------- */
.callback-widget__check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: inherit;
    font: inherit;
    font-size: 1.0625rem;
    line-height: 1.4;
    cursor: pointer;
    min-width: 0;
}
.callback-widget__check > span { min-width: 0; }
.callback-widget__check input {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 2px solid var(--cb-brand);
    border-radius: 7px;
    background: #fff var(--cb-tick) center / 0 no-repeat;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease,
                background-size .22s var(--cb-ease), box-shadow .2s ease;
}
.callback-widget__check input:hover {
    border-color: var(--cb-brand-600);
}
.callback-widget__check input:checked {
    border-color: var(--cb-brand);
    background-color: var(--cb-brand);
    background-size: 15px;
}
.callback-widget__check input:focus-visible {
    outline: none;
    box-shadow: var(--cb-ring);
}
/* ---- the reveal ----------------------------------------------------------- */
.callback-reveal {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .42s var(--cb-ease), visibility 0s linear .42s;
}
.callback-reveal.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .42s var(--cb-ease), visibility 0s;
}
.callback-reveal__clip {
    min-height: 0;
    margin: 0 -3px;
    overflow: hidden;
}
.callback-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, .62fr);
    /* with the call-time picker: name, phone, time, submit */
}
.callback-fields:has(> .callback-time) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(130px, .6fr);
    gap: 16px;
    padding: 18px 3px 3px;
    box-sizing: border-box;
}
.callback-fields > * {
    min-width: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .3s var(--cb-ease);
}
.callback-reveal.is-open .callback-fields > * {
    opacity: 1;
    transform: none;
    transition: opacity .35s ease .08s, transform .42s var(--cb-ease) .08s;
}
.callback-reveal.is-open .callback-fields > :nth-child(2) { transition-delay: .15s; }
.callback-reveal.is-open .callback-fields > :nth-child(3) { transition-delay: .22s; }
.callback-reveal.is-open .callback-fields > :nth-child(4) { transition-delay: .29s; }
.callback-reveal.is-instant,
.callback-reveal.is-instant .callback-fields > * {
    transition: none !important;
}
/* ---- the inputs ----------------------------------------------------------- */
.callback-fields input,
.callback-fields .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding: 10px 16px !important;
    border: 1px solid var(--cb-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--cb-text);
    font: inherit;
    font-size: 1.0625rem !important;
    font-weight: 400;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.callback-fields input::placeholder,
.callback-fields .form-control::placeholder {
    color: var(--bayt-placeholder, #8a93a3);
    opacity: 1;
}
.callback-fields input:hover:not(:focus) { border-color: #a9b5c8 !important; }
.callback-fields input:focus {
    outline: none;
    border-color: var(--cb-brand) !important;
    box-shadow: var(--cb-ring) !important;
}
/* ---- the call-time picker ------------------------------------------------- */
.callback-fields select.callback-time {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 10px 44px 10px 16px;
    border: 1px solid var(--cb-line);
    border-radius: 12px;
    background: #fff var(--cb-chevron) right 16px center / 14px no-repeat;
    color: var(--cb-text);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.35;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
[dir="rtl"] .callback-fields select.callback-time {
    padding: 10px 16px 10px 44px;
    background-position: left 16px center;
}
/* nothing picked yet: the prompt reads like a placeholder */
.callback-fields select.callback-time:has(option[value=""]:checked) { color: var(--bayt-placeholder, #8a93a3); }
.callback-fields select.callback-time option { color: var(--cb-text); }
.callback-fields select.callback-time:hover:not(:focus) { border-color: #a9b5c8; }
.callback-fields select.callback-time:focus {
    outline: none;
    border-color: var(--cb-brand);
    box-shadow: var(--cb-ring);
}
/* ---- the submit button ---------------------------------------------------- */
.callback-widget__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 24px;
    border: 0;
    border-radius: 12px;
    background: var(--cb-brand);
    color: #fff;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.callback-widget__submit:hover { background: var(--cb-brand-600); }
.callback-widget__submit:focus-visible { outline: none; box-shadow: var(--cb-ring); }
.callback-widget__submit[disabled] { opacity: .7; cursor: progress; }
/* ---- the status line ------------------------------------------------------ */
.callback-status {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.45;
    transition: max-height .35s var(--cb-ease), opacity .3s ease, margin-top .3s var(--cb-ease);
}
.callback-status:not(:empty) {
    max-height: 6em;
    margin-top: 12px;
    opacity: 1;
}
.callback-status--hint,
.callback-status--time,
.callback-status--saving { color: #5b6677; }
.callback-status--saving { font-style: italic; }
.callback-status--saved { color: #0f7a3d; font-weight: 600; }
.callback-status--saved::before { content: "\2713"; margin-inline-end: 6px; font-weight: 700; }
.callback-status--error { color: #b3261e; font-weight: 600; }
@keyframes callback-status-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.callback-status.is-changing { animation: callback-status-in .35s var(--cb-ease); }

/* ---- question page: the callback-* questions as one panel ----------------- */
.callback-box .question-container {
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent;
}
.callback-box .question-container.boilerplate { padding: 0 !important; }
.callback-box .question-container + .question-container { margin: 0; border-top: 0 !important; }
.callback-box .question-container .question-title-container,
.callback-box .question-container .question-valid-container,
.callback-box .question-container .question-help-container { display: none !important; }
/* the opt-in checkbox question: drop the outlined option row, keep a plain row */
.callback-box .callback-req ul.ls-answers { margin: 0; padding: 0; }
.callback-box .callback-req li.answer-item.checkbox-item {
    border: 0 !important;
    background: transparent !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
}
.callback-box .callback-req li.answer-item.checkbox-item label {
    padding: 0 0 0 40px !important;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.4;
    min-height: 26px;
    display: flex;
    align-items: center;
}
[dir="rtl"] .callback-box .callback-req li.answer-item.checkbox-item label { padding: 0 40px 0 0 !important; }
.callback-box .callback-req li.answer-item.checkbox-item label::before {
    width: 26px !important; height: 26px !important; margin: -13px 0 0 0 !important;
    border: 2px solid var(--cb-brand) !important; border-radius: 7px !important; left: 0 !important; right: auto !important;
    background: #fff var(--cb-tick) center / 0 no-repeat !important;
}
[dir="rtl"] .callback-box .callback-req li.answer-item.checkbox-item label::before { left: auto !important; right: 0 !important; }
/* the tick lives inside the box (::before); no ::after in any state, so nothing can draw outside it */
.callback-box .callback-req li.answer-item.checkbox-item label::after,
.callback-box .callback-req li.answer-item.checkbox-item input:checked + label::after { content: none !important; display: none !important; }
.callback-box .callback-req li.answer-item.checkbox-item input:checked + label::before { background-color: var(--cb-brand) !important; background-size: 15px !important; }
.callback-box .callback-req li.answer-item.checkbox-item input:checked + label { color: var(--cb-text); }
.callback-box .callback-name .answer-container,
.callback-box .callback-phone .answer-container { margin: 0; }
.callback-box .callback-note { display: none !important; }
/* the note's status line is lifted out and shown under the fields */
.callback-box > .callback-status { display: block; }

@media (max-width: 991.98px) {
    .callback-fields,
    .callback-fields:has(> .callback-time) { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; }
    .callback-widget__submit { width: 100%; }
}
@media (max-width: 575.98px) {
    .callback-widget, .callback-box, .callback-widget__check, .callback-fields input, .callback-widget__submit { font-size: 1rem; }
    .callback-fields input, .callback-fields .form-control { min-height: 48px !important; font-size: 1rem !important; }
    .callback-fields select.callback-time { min-height: 48px; font-size: 1rem; }
}