/**
 * Smarter Forms — Frontend Styles
 * Deliberately light: layout + states only, so theme (Divi etc.) typography
 * and input styling pass through.
 */

.smfm-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4%;
}

/*
 * Flex children shrink to their content unless told otherwise, so default
 * every direct child to full width — including ones injected at runtime
 * like the PayPal button container. .smfm-half opts back out.
 */
.smfm-form > * {
    width: 100%;
    min-width: 0;
}

.smfm-field {
    width: 100%;
    margin: 0 0 1em;
}

.smfm-field.smfm-half {
    width: 48%;
}

@media ( max-width: 640px ) {
    .smfm-field.smfm-half {
        width: 100%;
    }
}

.smfm-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3em;
}

.smfm-required {
    color: #d63638;
}

.smfm-input,
.smfm-form select,
.smfm-form textarea {
    height: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.smfm-form textarea {
    height: 160px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.smfm-name {
    display: flex;
    gap: 4%;
}

.smfm-choices {
    border: 0;
    margin: 0;
    padding: 0;
}

.smfm-choice {
    display: block;
    margin-bottom: 0.4em;
}

/* Opt-in: long legal/policy copy in a fixed-height scrolling panel. */
.smfm-field.smfm-scrollbox .smfm-html,
.smfm-html.smfm-scrollbox {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #b2b2c2;
    padding: 20px;
}

.smfm-description {
    font-size: 0.9em;
    line-height: 1.5;
    opacity: 0.8;
    margin-top: 0.4em;
}

.smfm-description p:last-child {
    margin-bottom: 0;
}

.smfm-error {
    display: block;
    color: #d63638;
    font-size: 0.85em;
    margin-top: 0.3em;
}

.smfm-field.has-error .smfm-input,
.smfm-field.has-error select,
.smfm-field.has-error textarea {
    border-color: #d63638;
}

.smfm-message {
    width: 100%;
    padding: 0.8em 1em;
    border-left: 4px solid #2271b1;
    background: rgba( 34, 113, 177, 0.07 );
}

/* PayPal renders buttons and the card form into this at container width. */
.smfm-paypal-buttons {
    margin-top: 1em;
    max-width: 750px; /* PayPal's own maximum; wider just stretches the buttons. */
}

/* The alert holds a short headline, so keep its spacing tight. */
.smfm-message > :first-child {
    margin-top: 0;
}

.smfm-message > :last-child {
    margin-bottom: 0;
}

/*
 * Long-form confirmation copy. Deliberately unstyled beyond spacing so
 * theme typography carries it.
 */
.smfm-success-details {
    width: 100%;
    margin-top: 1.5em;
}

.smfm-success-details > :first-child {
    margin-top: 0;
}

.smfm-cta {
    display: inline-block;
}

/*
 * Capture is in flight. Keeps the buyer anchored while the server
 * confirms, instead of PayPal's button screen flashing back.
 */
.smfm-message.is-pending {
    border-left-color: #996800;
    background: rgba( 219, 166, 23, 0.09 );
}

.smfm-message.is-pending::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.6em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: smfm-spin 0.7s linear infinite;
}

@keyframes smfm-spin {
    to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
    .smfm-message.is-pending::before {
        animation-duration: 2.5s;
    }
}

.smfm-message.is-success {
    border-left-color: #00a32a;
    background: rgba( 0, 163, 42, 0.07 );
}

.smfm-message.is-error {
    border-left-color: #d63638;
    background: rgba( 214, 54, 56, 0.07 );
}