/* Funnel + offer field styling for Views/Home/Search.cshtml (and the static
   /dev/offer-preview.html page). Kept in a file so both use the same rules. */

.step-panel { display: none; }
.step-panel.active { display: block; animation: slideIn 0.35s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
.step-panel.slide-back { animation: slideBack 0.35s ease-out; }
@keyframes slideBack { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

/* --- Field renderer styling ---
   The ADX FieldsRenderer emits a Bootstrap grid: <div class="row"> with one
   <div class="form-group ... col-md-N"> per field, using `form-control` inputs.
   None of those classes are styled (Tailwind-only site), so we restyle that output
   here to match the funnel design. Scoped to `.ted-fields` so it never leaks. */

/* Field rows: a real 12-column grid, so the col-md-N the renderer derives from each
   field's Order fraction actually controls width. A field with no width (col-md-0)
   falls through to the default full-width span. Stacks on mobile. */
.ted-fields .row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.25rem; }
.ted-fields .form-group { grid-column: 1 / -1; margin-bottom: 1.25rem; }
.ted-fields .row:last-child .form-group:last-child { margin-bottom: 0; }

.ted-fields .form-group.col-md-1 { grid-column: span 1; }
.ted-fields .form-group.col-md-2 { grid-column: span 2; }
.ted-fields .form-group.col-md-3 { grid-column: span 3; }
.ted-fields .form-group.col-md-4 { grid-column: span 4; }
.ted-fields .form-group.col-md-5 { grid-column: span 5; }
.ted-fields .form-group.col-md-6 { grid-column: span 6; }
.ted-fields .form-group.col-md-7 { grid-column: span 7; }
.ted-fields .form-group.col-md-8 { grid-column: span 8; }
.ted-fields .form-group.col-md-9 { grid-column: span 9; }
.ted-fields .form-group.col-md-10 { grid-column: span 10; }
.ted-fields .form-group.col-md-11 { grid-column: span 11; }
.ted-fields .form-group.col-md-12 { grid-column: span 12; }

@media (max-width: 767px) {
    .ted-fields .form-group[class*="col-md-"] { grid-column: 1 / -1; }
}

.ted-fields .form-group > label:not(.group):not(.container_check) {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: .375rem;
}
.ted-fields sup { color: #dc2626; }

.ted-fields input.form-control:not([type="radio"]):not([type="checkbox"]),
.ted-fields select.form-control {
    display: block;
    width: 100%;
    height: 2.75rem;
    border-radius: .5rem;
    border: 1px solid #d1d5db;
    padding: 0 .75rem;
    font-size: .875rem;
    background: #fff;
    color: #111827;
}
.ted-fields select.form-control { cursor: pointer; }
.ted-fields input.form-control:focus,
.ted-fields select.form-control:focus {
    outline: none;
    border-color: var(--brand-800, #1e40af);
    box-shadow: 0 0 0 2px var(--brand-ring, rgba(30, 64, 175, .35));
}

/* Radio options rendered as selectable cards (wrapper applied in the view). */
.ted-fields .form-group label.group { display: flex; margin-bottom: .75rem; }
.ted-fields .form-group label.group:last-of-type { margin-bottom: 0; }
.ted-fields .form-group label.group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

/* Trailing circular indicator on every option card. */
.ted-fields .form-group label.group .checkmark {
    margin-left: auto;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, background-color .15s ease;
}
/* Selected option: blue accent, ring, bolder label, and a filled white check. */
.ted-fields .form-group label.group:has(input[type="radio"]:checked) {
    border-color: var(--brand-800, #1e40af);
    background: var(--brand-50, #eff6ff);
    color: var(--brand-900, #1e3a8a);
    font-weight: 600;
}
.ted-fields .form-group label.group:has(input[type="radio"]:checked) .checkmark {
    border-color: var(--brand-800, #1e40af);
    background: var(--brand-800, #1e40af);
}
.ted-fields .form-group label.group:has(input[type="radio"]:checked) .checkmark::after {
    content: "";
    width: .35rem;
    height: .6rem;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Compact radio-card groups (any field rendered as selectable cards — covers both
   multiline-radio-group and radio_input): tighter cards, two per row on wider
   screens, so option lists stay scannable in the funnel. */
.ted-fields .form-group:has(label.group) {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.ted-fields .form-group:has(label.group) > label:not(.group):not(.container_check) {
    flex: 1 1 100%;
    margin-bottom: .25rem;
}
.ted-fields .form-group label.group {
    flex: 0 1 calc(50% - .25rem);
    margin-bottom: 0;
    padding: .5rem .75rem;
    gap: .5rem;
    border-width: 1px;
    border-radius: .5rem;
    font-size: .875rem;
}
@media (max-width: 640px) {
    .ted-fields .form-group label.group { flex-basis: 100%; }
}

/* TCPA / consent checkbox lines. */
.ted-fields label.container_check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.4;
}
.ted-fields label.container_check input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; }

/* Plain checkbox fields (e.g. offer consent lines): the renderer emits a bare
   <input type="checkbox"> followed by a sibling <label>, so lay them out as a row
   with the box beside small consent text instead of the box on its own line. */
.ted-fields .form-group:has(> input[type="checkbox"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .625rem;
}
.ted-fields .form-group > input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .125rem;
    accent-color: var(--brand-800, #1e40af);
    cursor: pointer;
}
/* :not()s match the generic field-label rule's specificity so this one wins. */
.ted-fields .form-group > input[type="checkbox"] + label:not(.group):not(.container_check) {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6b7280;
    cursor: pointer;
}
.ted-fields .form-group:has(> input[type="checkbox"]) > label.error { flex-basis: 100%; }

/* Validation errors: jquery.validate adds class "error" to the message label and the field. */
.ted-fields label.error {
    display: block;
    margin: .35rem 0 0;
    color: #dc2626 !important;
    font-size: .8rem !important;
    font-weight: 400 !important;
}
.ted-fields .form-control.error { border-color: #dc2626; }
.ted-fields .form-control.error:focus { box-shadow: 0 0 0 2px rgba(220, 38, 38, .35); }

@keyframes pulseSoft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: .6; }
}
.pulse-soft { animation: pulseSoft 1.2s ease-in-out infinite; }

/* Inline button loader shown while an offer action request is in flight. */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 9999px;
    vertical-align: -0.125em;
    animation: btnSpin .6s linear infinite;
}