/**
 * Business Directory – Add Listing Form Styles
 * Applies to .hm-business-form (CF7 form) on the "Claim Your Free Listing" page.
 *
 * CF7 injects <p> wrappers inside each .hm-form-row, so label is a grandchild:
 *   .hm-form-row > <p> > <label> > <br> > .wpcf7-form-control-wrap > <input>
 *
 * @package BuddyX_Child - Hello Middleton
 * @since HM 3.1.0
 */

/* =========================================================
   FORM CARD CONTAINER
   ========================================================= */
.hm-business-form {
    max-width: 660px;
    margin: 0 auto 48px;
    background: var(--hm-bg-elevated, #fff);
    border: 1px solid var(--hm-border, #E7E5E4);
    border-radius: var(--radius-lg, 16px);
    padding: 40px 44px;
    box-shadow: 0 2px 12px rgba(28, 25, 23, 0.07);
}

@media (max-width: 640px) {
    .hm-business-form {
        padding: 24px 20px;
        border-radius: var(--radius-md, 10px);
        margin-left: 0;
        margin-right: 0;
    }
}

/* =========================================================
   FORM HEADER
   ========================================================= */
.hm-business-form h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hm-text, #1C1917);
    margin: 0 0 10px;
    line-height: 1.3;
}

/* Subtitle paragraph (direct child of .hm-business-form) */
.hm-business-form > p:first-of-type {
    font-size: 0.9rem;
    color: var(--hm-text-muted, #78716C);
    margin: 0 0 28px;
    line-height: 1.6;
}

/* =========================================================
   FORM ROWS
   CF7 wraps each field in <p> tags — strip those margins.
   ========================================================= */
.hm-form-row {
    margin-bottom: 22px;
}

/* CF7-injected <p> inside each row: reset margins, go full width */
.hm-business-form .hm-form-row p,
.hm-business-form .wpcf7-form > p,
.hm-business-form form p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   LABELS
   Note: label is inside <p>, so we use descendant (space) not > child
   ========================================================= */
.hm-form-row label {
    display: block !important;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hm-text, #1C1917);
    margin-bottom: 0;
    line-height: 1.5;
    cursor: pointer;
}

/* "* required" marker */
.hm-form-row label .required {
    color: var(--hm-primary, #F97316);
    margin-left: 2px;
    font-weight: 700;
}

/* "(optional)" hint */
.hm-form-row .hm-opt {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--hm-text-muted, #78716C);
    margin-left: 4px;
}

/* =========================================================
   CF7 CONTROL WRAP — must be block so input fills full width
   ========================================================= */
.hm-business-form .hm-form-row .wpcf7-form-control-wrap,
.hm-business-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    margin-top: 7px;
    box-sizing: border-box !important;
}

/* =========================================================
   INPUTS, SELECTS, TEXTAREAS
   ========================================================= */
.hm-form-row input[type="text"],
.hm-form-row input[type="email"],
.hm-form-row input[type="tel"],
.hm-form-row input[type="url"],
.hm-form-row select,
.hm-form-row textarea,
.hm-business-form .wpcf7-form-control:not([type="submit"]):not([type="hidden"]) {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    padding: 10px 14px;
    font-size: 0.925rem;
    font-family: inherit;
    color: var(--hm-text, #1C1917);
    background: var(--hm-bg, #FDFCFA);
    border: 1px solid var(--hm-border-strong, #D6D3D1);
    border-radius: var(--radius-sm, 6px);
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}

/* Select: custom caret arrow */
.hm-business-form select.wpcf7-form-control,
.hm-form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
    cursor: pointer;
}

/* Textarea: comfortable height */
.hm-form-row textarea {
    resize: vertical;
    min-height: 90px;
}

/* Focus state — brand orange ring */
.hm-form-row input:focus,
.hm-form-row select:focus,
.hm-form-row textarea:focus,
.hm-business-form .wpcf7-form-control:focus {
    outline: none !important;
    border-color: var(--hm-primary, #F97316) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
    background: #fff !important;
}

/* Placeholder color */
.hm-form-row input::placeholder,
.hm-form-row textarea::placeholder {
    color: var(--hm-text-muted, #78716C);
    opacity: 1;
}

/* Validation error highlight */
.hm-form-row .wpcf7-not-valid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

.hm-form-row .wpcf7-not-valid-tip {
    display: block;
    font-size: 0.78rem;
    color: #ef4444;
    margin-top: 4px;
}

/* =========================================================
   FIELD HELPER NOTE — always below the input
   ========================================================= */
.hm-form-row .hm-field-note,
p.hm-field-note {
    display: block !important;
    clear: both;
    font-size: 0.8rem;
    color: var(--hm-text-muted, #78716C);
    margin: 5px 0 0 !important;
    line-height: 1.5;
    max-width: none !important;
}

/* =========================================================
   SUBMIT BUTTON — full width, brand orange
   ========================================================= */
.hm-business-form .wpcf7-submit,
.hm-business-form input[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 13px 24px;
    background: var(--hm-primary, #F97316) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm, 6px);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.15s ease, transform 0.1s ease;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
    -webkit-appearance: none;
    appearance: none;
}

.hm-business-form .wpcf7-submit:hover,
.hm-business-form input[type="submit"]:hover {
    background: var(--hm-primary-hover, #EA580C) !important;
}

.hm-business-form .wpcf7-submit:active {
    transform: scale(0.99);
}

.hm-business-form .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================================================
   SUBMIT ROW — the last <p> that holds the submit button
   ========================================================= */
.hm-business-form > p:last-of-type,
.hm-business-form form > div > p:last-child {
    margin: 8px 0 0 !important;
    max-width: none !important;
}

/* =========================================================
   CF7 RESPONSE / STATUS MESSAGES
   ========================================================= */
.hm-business-form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.875rem;
    font-weight: 500;
    border: none !important;
}

.hm-business-form.sent .wpcf7-response-output {
    background: #f0fdf4;
    color: #166534;
    border-left: 3px solid #22c55e !important;
}

.hm-business-form.failed .wpcf7-response-output,
.hm-business-form.invalid .wpcf7-response-output,
.hm-business-form.spam .wpcf7-response-output {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444 !important;
}

.hm-business-form .wpcf7-spinner {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

/* =========================================================
   HONEYPOT — always hidden
   ========================================================= */
.hm-business-form .wpcf7-form-control-wrap[data-name="honeypot-field"],
.honeypot-field-wrap {
    display: none !important;
    visibility: hidden !important;
}