/* KSM Forms - Frontend Styles */

/* Form Wrapper */
#ksm-contact-form {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Form Container */
.ksm-contact-form {
    max-width: 100%;
    margin-left:0;
    padding: 20px;
}

/* Form Fields */
.ksm-contact-form__field {
    margin-bottom: 20px;
}

.ksm-contact-form__field--name,
.ksm-contact-form__field--email,
.ksm-contact-form__field--phone,
.ksm-contact-form__field--message {
    /* Individual field styling can be added here */
}

/* Labels */
.ksm-contact-form__label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.ksm-contact-form__required {
    color: #d63638;
}

/* Input Fields */
.ksm-contact-form__input,
.ksm-contact-form__textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 20px;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.ksm-contact-form__input:focus,
.ksm-contact-form__textarea:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.ksm-contact-form__input::placeholder,
.ksm-contact-form__textarea::placeholder {
    color: #999;
}

/* Textarea specific */
.ksm-contact-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* ------------------------------------------------------------------
   Field Icons
   A field shows placeholder text, an icon, or both. The icon sits in the
   control's left inset and the control gains matching padding, so the
   placeholder text and the caret both start clear of the glyph.
   ------------------------------------------------------------------ */

.ksm-contact-form__control {
    position: relative;
    display: block;
}

.ksm-contact-form__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: block;
    /* Resting colour; overridden per form by --ksm-forms-icon-color. */
    color: var(--ksm-forms-icon-color, #9aa0a6);
    transition: color 0.3s ease;
    /* Clicks fall through to the input beneath. */
    pointer-events: none;
}

.ksm-contact-form__icon .ksm-forms-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* A textarea's icon pins to the top rather than floating mid-box. */
.ksm-contact-form__control--textarea .ksm-contact-form__icon {
    top: 16px;
    transform: none;
}

/* Room for the glyph. Matches the 16px horizontal padding + 20px icon. */
.ksm-contact-form__input--has-icon,
.ksm-contact-form__textarea--has-icon {
    padding-left: 47px;
}

/* The icon picks up the accent colour while the field is being filled in. */
.ksm-contact-form__control--has-icon:focus-within .ksm-contact-form__icon {
    color: var(--ksm-forms-icon-focus-color, #0073aa);
}

/* Respect a reduced-motion preference for the colour transition. */
@media (prefers-reduced-motion: reduce) {
    .ksm-contact-form__icon {
        transition: none;
    }
}

/* Honeypot Field - Hidden from users */
.ksm-contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Submit Button */
.ksm-contact-form__submit {
    margin-top: 24px;
}

.ksm-contact-form__button {
    background-color: #0073aa;
    color: #fff;
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: inline-block;
}

.ksm-contact-form__button:hover {
    background-color: #005a87;
}

.ksm-contact-form__button:active {
    transform: translateY(1px);
}

.ksm-contact-form__button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Messages */
.ksm-contact-form__message {
    margin-top: 20px;
    padding: 16px;
    border-radius: 4px;
    font-size: 15px;
}

.ksm-contact-form__message--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ksm-contact-form__message--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Loading State */
.ksm-contact-form.loading .ksm-contact-form__button {
    position: relative;
    color: transparent;
}

.ksm-contact-form.loading .ksm-contact-form__button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ksm-form-spin 0.6s linear infinite;
}

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

/* Two-Column Row Layout */
.ksm-contact-form__row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.ksm-contact-form__field--half {
    flex: 1;
    margin-bottom: 0;
}

/* Empty spacer holding the right 50% of a lone-half row on desktop */
.ksm-contact-form__spacer {
    flex: 1;
}

/* Privacy Checkbox */
.ksm-contact-form__field--privacy {
    margin-top: 10px;
    margin-bottom: 20px;
}

.ksm-contact-form__privacy-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
}

.ksm-contact-form__checkbox {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.ksm-contact-form__privacy-text {
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}

.ksm-contact-form__privacy-text a {
    color: #0073aa;
    text-decoration: underline;
}

.ksm-contact-form__privacy-text a:hover {
    color: #005a87;
}

/* Hide Labels Option */
.ksm-contact-form--no-labels .ksm-contact-form__label {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .ksm-contact-form {
        padding: 15px;
    }
.ksm-contact-form__row{margin-bottom:0px;}
    .ksm-contact-form__input,
    .ksm-contact-form__textarea {
        font-size: 18px; /* Prevents iOS zoom on focus */
    }

    /* Stack fields on mobile */
    .ksm-contact-form__row {
        flex-direction: column;
        gap: 0;
    }

    .ksm-contact-form__field--half {
        margin-bottom: 20px;
    }

    /* No phantom stacked block from the spacer once the row collapses */
    .ksm-contact-form__spacer {
        display: none;
    }
}