/* Ask a Question form + confirmation */

.ask-main {
    padding: 14px 16px 24px;
}

.form-card {
    background: var(--card);
    color: var(--card-text);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.form-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.form-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.form-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--card-heading);
}

.form-card__intro {
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 16px;
}

/* The embedded form brings its own background, so it runs the full width of
   the card and the card drops its side padding rather than the iframe
   having to claw it back with negative margins. */
.form-card--embed {
    padding: 16px 0 0;
    overflow: hidden;
}

.form-card--embed .form-card__head,
.form-card--embed .form-card__intro {
    padding-left: 16px;
    padding-right: 16px;
}

.form-embed {
    display: block;
    width: 100%;
    margin-top: 4px;
    border: none;
    background: #fff;
}

.ask-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ask-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--card-heading);
}

.ask-form input[type="text"],
.ask-form select,
.ask-form textarea {
    width: 100%;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid #c9d6e2;
    background: #f5f8fb;
    color: var(--card-text);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 400;
}

.ask-form textarea {
    min-height: 96px;
    resize: vertical;
}

.ask-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b3b5c'%3E%3Cpath d='M7 10.2 12 15.2 17 10.2 15.6 8.8 12 12.4 8.4 8.8 7 10.2Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    padding-right: 34px;
}

.ask-form input::placeholder,
.ask-form textarea::placeholder {
    color: #90a4b8;
}

.ask-form input:focus,
.ask-form select:focus,
.ask-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: #fff;
}

.ask-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin-top: 2px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(100deg, var(--accent) 0%, #dc4e0c 100%);
    color: var(--button-text);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s, filter 0.15s;
}

.submit-btn:active {
    transform: scale(0.985);
    filter: brightness(0.95);
}

.submit-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.form-alert {
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 14px;
}

.form-alert--error {
    background: #fdecea;
    border: 1px solid #e9a8a2;
    color: #a3281c;
}

.form-alert--notice {
    background: #eef4fa;
    border: 1px solid #c2d5e6;
    color: var(--card-heading);
}

/* ── Confirmation screen ── */

.page-thanks {
    position: relative;
    min-height: 100dvh;
}

.thanks {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12vh 26px 20vh;
    min-height: calc(100dvh - var(--header-height) - var(--nav-height));
}

.thanks__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(200deg, #16334c 0%, #0b1a26 60%);
}

.thanks__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.5;
}

.thanks__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--bg) 0%, rgba(11, 26, 38, 0.82) 60%, rgba(11, 26, 38, 0.6) 100%);
}

.thanks__inner {
    position: relative;
    z-index: 1;
}

.thanks__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;
    color: var(--card-heading);
}

.thanks__badge svg {
    width: 34px;
    height: 34px;
}

.thanks__title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.thanks__message {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    max-width: 300px;
    margin: 0 auto 24px;
}

.thanks__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(100deg, var(--accent) 0%, #dc4e0c 100%);
    color: var(--button-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s, filter 0.15s;
}

.thanks__btn:active {
    transform: scale(0.985);
    filter: brightness(0.95);
}

.thanks__btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}