/**
 * SuiteWP — Appointment form styles.
 *
 * Minimal layout-only CSS. Typography and colors inherit from the active theme.
 * Shares class names with the leads form for consistency.
 */

/* ── Layout ────────────────────────────────────────────────────────────── */

.suitewp-appointment-wrap {
    max-width: 640px;
    margin: 0 auto;
}

/* Reuse shared classes from leads-form.css if both are loaded.
   If the appointment shortcode is used standalone, duplicate the essentials. */

.suitewp-appointment-wrap .suitewp-form-title {
    margin-bottom: 0.25em;
}

.suitewp-appointment-wrap .suitewp-form-row {
    margin-bottom: 1em;
}

.suitewp-appointment-wrap .suitewp-form-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

@media (max-width: 480px) {
    .suitewp-appointment-wrap .suitewp-form-row--two {
        grid-template-columns: 1fr;
    }
}

.suitewp-appointment-wrap .suitewp-form-field label {
    display: block;
    margin-bottom: 0.3em;
    font-weight: 600;
}

.suitewp-appointment-wrap .suitewp-form-field label span {
    color: #c00;
}

.suitewp-appointment-wrap .suitewp-form-field input,
.suitewp-appointment-wrap .suitewp-form-field textarea {
    width: 100%;
    padding: 0.5em 0.65em;
    border: 1px solid currentColor;
    border-radius: 4px;
    font: inherit;
    opacity: 0.85;
    box-sizing: border-box;
}

.suitewp-appointment-wrap .suitewp-form-field input:focus,
.suitewp-appointment-wrap .suitewp-form-field textarea:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    opacity: 1;
}

.suitewp-form-hint {
    display: block;
    margin-top: 0.25em;
    font-size: 0.85em;
    opacity: 0.65;
}

/* ── Button (same as leads) ────────────────────────────────────────────── */

.suitewp-appointment-wrap .suitewp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.6em;
    border: none;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background: var(--wp--preset--color--primary, #333);
    color: var(--wp--preset--color--background, #fff);
    transition: opacity 0.2s;
}

.suitewp-appointment-wrap .suitewp-btn:hover {
    opacity: 0.85;
}

.suitewp-appointment-wrap .suitewp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.suitewp-appointment-wrap .suitewp-btn__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: suitewp-spin 0.6s linear infinite;
}

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

/* ── Feedback ──────────────────────────────────────────────────────────── */

.suitewp-appointment-wrap .suitewp-form-feedback p {
    padding: 0.65em 1em;
    border-radius: 4px;
    margin: 0;
}

.suitewp-appointment-wrap .suitewp-form-feedback--error p {
    background: #fce4e4;
    color: #a00;
}

.suitewp-appointment-wrap .suitewp-form-feedback--success p,
.suitewp-appointment-wrap .suitewp-form-success p {
    background: #e4fce4;
    color: #060;
    padding: 0.65em 1em;
    border-radius: 4px;
}