@import "contact-us.css?v=5";

/* Wizard card */

.wizard-card {

    position: relative;
    /* Grid keeps Back/Next/hint in one bottom row (like a space-between
       flex row) while their DOM order around the viewport preserves the
       tab sequence Back -> fields -> Next */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "progress progress progress"
        "viewport viewport viewport"
        "back     hint     next";
    row-gap: 1rem;
    background: white;
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;

}

.wizard-progress {

    grid-area: progress;

}

/* Progress bar */

.wizard-progress {

    height: 6px;
    background-color: var(--ny-light-2);

}

.wizard-progress-bar {

    height: 100%;
    width: 0;
    background-color: var(--ny-orange);
    transition: width .35s ease-in-out;

}

/* Steps viewport */

.wizard-viewport {

    grid-area: viewport;
    position: relative;
    min-height: 24rem;
    display: flex;
    align-items: stretch;

}

.wizard-step {

    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    width: 100%;
    opacity: 0;

}

.wizard-step.active {

    display: flex;
    animation: wizard-slide-in .3s ease-out forwards;

}

.wizard-step.active.slide-back {

    animation-name: wizard-slide-in-back;

}

@keyframes wizard-slide-in {

    from { opacity: 0; transform: translateX(2.5rem); }
    to   { opacity: 1; transform: translateX(0); }

}

@keyframes wizard-slide-in-back {

    from { opacity: 0; transform: translateX(-2.5rem); }
    to   { opacity: 1; transform: translateX(0); }

}

@media (prefers-reduced-motion: reduce) {

    .wizard-step.active,
    .wizard-step.active.slide-back {
        animation: none;
        opacity: 1;
    }

}

/* Question typography */

.wizard-question {

    color: var(--ny-navy);
    font-weight: 600;
    margin: 0;

}

.wizard-hint {

    color: var(--ny-navy-a45);
    margin: -1.25rem 0 0;

}

.wizard-field {

    max-width: 34rem;

}

/* Option cards (services checkboxes, turnover radios): the native inputs
   are hidden, the highlighted card itself is the control */

.wizard-options {

    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: none;
    padding: 0;

}

.wizard-options .form-check {

    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0;
    margin: 0;
    min-height: 0;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;

}

.wizard-options .form-check:hover {

    border-color: var(--ny-light-orange);

}

.wizard-options .form-check:has(.form-check-input:checked) {

    border-color: var(--ny-orange);
    background-color: rgba(246, 130, 31, 0.06);

}

.wizard-options .form-check {

    position: relative;

}

/* Invisible but still focusable, so the cards keep native keyboard
   semantics (Tab + Space for checkboxes, arrows within radio groups) */
.wizard-options .form-check-input {

    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;

}

.wizard-options .form-check:has(.form-check-input:focus-visible) {

    box-shadow: 0 0 0 0.25rem rgb(246 130 31 / 25%);

}

.wizard-options .form-check-label {

    display: block;
    padding: .75rem 1rem;
    cursor: pointer;
    color: var(--ny-navy);
    user-select: none;

}

/* Overview textarea */

.overviewWrapper {

    display: flex;
    flex-direction: column;
    gap: .25rem;

}

.overview-counter {

    align-self: end;
    color: #adb5bd;

}

.overview-counter.ok {

    color: var(--ny-lev-green);

}

/* Email / phone validation rows */

.inline-validate-row {

    display: flex;
    gap: .75rem;
    align-items: stretch;

}

.inline-validate-row .btn {

    min-width: 7rem;
    height: calc(3.5rem + 2px); /* match .form-floating input height */

}

/* intl-tel-input (phone country selector) integration */

.iti {

    width: 100%;

}

.iti .form-control {

    height: calc(3.5rem + 2px); /* match the Confirm button / floating inputs */

}

.iti--separate-dial-code .iti__selected-flag {

    background-color: var(--ny-light-1);
    border-radius: 0.375rem 0 0 0.375rem;

}

.otp-block {

    margin-top: 1.25rem;

}

.otp-message {

    color: var(--ny-navy);
    margin-bottom: .5rem;

}

.otp-input {

    letter-spacing: .35em;

}

.wizard-feedback {

    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: 0.375rem;
    font-size: .95rem;

}

.wizard-feedback.error {

    color: #842029;
    background-color: #f8d7da;

}

.wizard-feedback.success {

    color: var(--ny-lev-green);
    background-color: rgba(0, 163, 79, 0.1);

}

/* Bottom navigation row (grid areas back / hint / next) */

.wizard-back, .wizard-next {

    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: .5rem;
    height: 3rem;
    min-width: 8rem;
    justify-content: center;

}

.wizard-back {

    grid-area: back;
    justify-self: start;

}

.wizard-next {

    grid-area: next;
    justify-self: end;

}

.wizard-back .material-symbols-outlined,
.wizard-next .material-symbols-outlined {

    font-size: 20px;

}

.wizard-keys-hint {

    grid-area: hint;
    align-self: center;
    justify-self: center;
    color: #adb5bd;
    font-size: .85rem;
    white-space: nowrap;
    pointer-events: none;

}

.wizard-keys-hint kbd {

    display: inline-block;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: var(--ny-light-1);
    color: var(--ny-navy);
    padding: 0 .35rem;
    font-size: .85em;
    line-height: 1.4;

}

.btn-outline-navy {

    --bs-btn-color: var(--ny-navy);
    --bs-btn-border-color: var(--ny-navy-a45);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--ny-navy);
    --bs-btn-hover-border-color: var(--ny-navy);
    --bs-btn-active-bg: var(--ny-navy);
    --bs-btn-active-border-color: var(--ny-navy);

}

/* The confirmation step reuses .confirmation-box from contact-us.css */

.wizard-step[data-step="done"] .confirmation-box {

    height: auto;
    min-height: 20rem;

}

/* Keep Firebase's invisible reCAPTCHA badge out of the layout flow */

#phoneRecaptchaContainer {

    position: fixed;
    bottom: 0;
    left: 0;

}

@media (max-width: 768px) {

    .wizard-back, .wizard-next {

        min-width: 0;

    }

    .wizard-back .wizard-nav-label,
    .wizard-next .wizard-nav-label {

        display: none;

    }

    /* No arrow keys on touch devices */
    .wizard-keys-hint {

        display: none;

    }

    .inline-validate-row {

        flex-direction: column;

    }

    .inline-validate-row .btn {

        height: 3rem;

    }

}