/*
 * general-enquiry.css — styles for template-general-enquiry.php
 * Moved verbatim from inline <style> in template-general-enquiry.php (2.3.0); loaded only on
 * that template by m6m_template_styles() in functions.php.
 */

/* ── Shares the same visual language as the Fixture Bookings page
   (dark section, kicker, big heading, boxy inputs) but uses the
   site's actual brand accent (var(--wp--preset--color--accent), teal) rather than the
   amber used on that page, for consistency with the rest of the
   site. ── */
.m6m-enq-page {
    background: var(--wp--preset--color--bg);
    min-height: 60vh;
    padding-block: clamp(3rem, 6vw, 5rem);
}
.m6m-enq-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.m6m-enq-kicker {
    display: block;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--wp--preset--color--accent); margin-bottom: 0.35rem;
}
.m6m-enq-h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700;
    color: var(--wp--preset--color--text); margin: 0 0 0.75rem; line-height: 1.2;
}
.m6m-enq-desc {
    font-size: 1rem; font-weight: 400;
    color: var(--wp--preset--color--text-secondary); margin: 0 0 0.75rem;
    max-width: 58ch; line-height: 1.6;
}
.m6m-enq-redirect {
    font-size: 0.9375rem; color: var(--wp--preset--color--text-secondary);
    margin: 0 0 2.5rem; padding: 0.85rem 1rem;
    background: rgba(255,255,255,.04); border-left: 3px solid var(--wp--preset--color--accent);
    border-radius: 0 6px 6px 0;
}
.m6m-enq-redirect a { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 3px; }

.m6m-ef-group { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.m6m-ef-label {
    font-size: 1rem; font-weight: 700;
    color: var(--wp--preset--color--text); margin-bottom: 0.4rem; line-height: 1.3;
}
.m6m-ef-req  { color: var(--wp--preset--color--accent); margin-left: 0.2rem; }
.m6m-ef-input,
.m6m-ef-select,
.m6m-ef-textarea {
    box-sizing: border-box; width: 100%; min-height: 48px;
    padding: 0 1rem; font-size: 1rem; font-weight: 400;
    color: var(--wp--preset--color--text);
    background: rgba(255,255,255,.05);
    border: 2px solid rgba(255,255,255,.15); border-radius: 6px;
    appearance: none; -webkit-appearance: none; line-height: 1.5;
    font-family: inherit;
}
.m6m-ef-input:focus,
.m6m-ef-select:focus,
.m6m-ef-textarea:focus {
    outline: 4px solid var(--wp--preset--color--accent); outline-offset: 2px;
    border-color: var(--wp--preset--color--accent-border);
}
.m6m-ef-textarea { min-height: 130px; padding: 0.75rem 1rem; resize: vertical; }
.m6m-ef-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%2300F5D4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 14px 9px;
}
.m6m-ef-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 560px) { .m6m-ef-row { grid-template-columns: 1fr; } }

.m6m-ef-submit {
    display: inline-flex; align-items: center; min-height: 52px;
    padding: 0 2rem; font-size: 1rem; font-weight: 700;
    color: var(--wp--preset--color--bg); background: var(--wp--preset--color--accent);
    border: none; border-radius: 6px; cursor: pointer; margin-top: 0.5rem;
    transition: background var(--wp--custom--duration--fast);
}
.m6m-ef-submit:hover  { background: var(--wp--preset--color--accent-muted); }
.m6m-ef-submit:focus-visible { outline: 4px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.m6m-ef-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.m6m-ef-msg {
    margin-top: 0; margin-bottom: 1.25rem;
    padding: 0.875rem 1rem; border-radius: 6px;
    font-size: 0.9375rem; display: none;
}
.m6m-ef-msg--ok    { background: var(--wp--preset--color--status-ok-bg); color: var(--wp--preset--color--status-ok); border: 1px solid rgba(46,204,113,.3); }
.m6m-ef-msg--error { background: var(--wp--preset--color--status-error-bg);  color: var(--wp--preset--color--status-error); border: 1px solid rgba(231,76,60,.3);  }