/**
 * Step 1 Specific Styles
 * Main styles are in awtgr-public.css
 */

@media (min-width: 1040px) {
form#awtgr-step-1-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}
}

/* Step 1 specific overrides and additions */
.awtgr-step-1 .awtgr-postal-code-group {
    display: inline-block !important;
}

/* Lock the m² and postcode inputs to a fixed compact width on desktop —
   the mobile breakpoint below resets these back to width: 100% so the
   fields fill the full column on small screens. */
.awtgr-step-1 #awtgr-m2-quantity,
.awtgr-step-1 #awtgr-postal-code {
    width: 125px;
}

.awtgr-step-1 .awtgr-form-group {
    display: inline-block;
    vertical-align: top;
}

/* Ensure labels stack above fields in Step 1 */
.awtgr-step-1 .awtgr-form-group label {
    display: block;
    margin-bottom: 5px;
}

.awtgr-step-1 .awtgr-error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

.awtgr-step-1 .awtgr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 200px;
    }
}

@media(max-width: 768px) {
    form#awtgr-step-1-form {
        flex-direction: column;
        gap: 10px;
    }

    .awtgr-step-1 .awtgr-form-group {
        display: block;
        width: 100%;
    }

    body div .awtgr-country-selector,
    .awtgr-delivery-type-selector {
        display: inline-flex;
        gap: 6px;
        vertical-align: middle;
        flex-direction: row;
        width: 100%;
    }

    .awtgr-step-1 .awtgr-form-group .awtgr-delivery-type-selector label {
        width: 50%;
        margin: 0;
    }

    .awtgr-step-1 .awtgr-form-group .awtgr-radio-content {
        width: 100%;
    }

    .awtgr-form-group input[type="text"],
    .awtgr-form-group input[type="number"],
    .awtgr-form-group input[type="hidden"]+*,
    .awtgr-form-group select {
        width: 100%;
    }

    /* Override the desktop 125px lock so the m² and postcode inputs fill
       the full column on mobile (the ID-selector rule above would otherwise
       win on specificity). */
    .awtgr-step-1 #awtgr-m2-quantity,
    .awtgr-step-1 #awtgr-postal-code {
        width: 100%;
    }

    #awtgr-step-1-form .awtgr-form-actions.awtgr-form-group>label {
        display: none;
    }

    input[type="submit"].awtgr-btn,
    body div input[type="submit"].awtgr-btn,
    button[type="submit"].awtgr-btn,
    body div button[type="submit"].awtgr-btn,
    .awtgr-btn.awttgr-btn-submit,
    body div .awtgr-btn.awttgr-btn-submit {
        width: 100%;
        max-width: 100%;
    }
}