/* ============================================================
   MEGA LAB PEPTIDES - CONTACT (was inline in megalab-contact.php)
   Extracted in design-refresh-v2 Phase 4a (Ticket 7).
   ============================================================ */

/* ============================================================
   MEGA LAB CONTACT PAGE
   ============================================================ */

.mlb-contact-wrap {
    background: var(--c-off);
    font-family: var(--f-display);
    padding: 0;
}

/* ── PAGE HEADER ── */

.mlb-contact-body {
    padding-top: 64px; padding-bottom: 96px;
    background: var(--c-off);
}

/* ── LAYOUT ── */
.mlb-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    
    
    align-items: start;
}

/* ── FORM CARD ── */
/* 4c.2: was .xlml-rail--narrow, whose rail rule zeroed padding-inline and
   left the heading and copy flush with the card edge. The reading width is
   set here instead; the 44px padding gives heading, copy and fields one
   left edge. */
.mlb-form-card {
    background: #fff;
    border: 1px solid var(--c-border);
    padding: 44px;
    max-width: 760px;
}

.mlb-form-card > h2 {
    font-size: var(--t-h3);
    font-weight: 700;
    color: var(--c-dark);
    margin: 0 0 6px;
}

.mlb-form-intro {
    font-size: var(--t-body);
    max-width: 50ch;
    color: var(--n-600);
    margin: 0 0 28px;
    line-height: 1.6;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-border);
}

/* Research notice inside form */
.mlb-research-notice { margin: 0 0 28px; } /* box, bar, type: .xlml-notice--research in base.css */

/* Fields */
.mlb-field {
    margin-bottom: 20px;
}

.mlb-field label {
    display: block;
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--c-dark);
    margin-bottom: 7px;
    font-family: var(--f-mono);
}

/* Blocksy override — force correct colours on all form elements */
.mlb-field input,
.mlb-field select,
.mlb-field textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 0 !important;
    font-family: var(--f-display) !important;
    font-size: var(--t-body) !important;
    color: var(--c-dark) !important;
    background: #ffffff !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mlb-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a1628' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    min-height: 44px !important;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.mlb-field select option {
    color: var(--c-dark) !important;
    background: #ffffff !important;
}

.mlb-field select option[disabled] {
    color: var(--n-500) !important;
}

.mlb-field input:focus,
.mlb-field select:focus,
.mlb-field textarea:focus {
    outline: none !important;
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.12) !important;
}

.mlb-field input::placeholder,
.mlb-field textarea::placeholder {
    color: var(--n-500) !important;
    opacity: 1;
}

.mlb-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.mlb-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Submit */
.mlb-submit-btn {
    width: 100%;
    padding: 14px 32px;
    background: var(--c-primary);
    color: #fff;
    font-family: var(--f-display);
    font-size: var(--t-body);
    font-weight: 600;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 4px;
    display: block;
}

.mlb-submit-btn:hover {
    background: var(--c-primary-h);
}

/* Alerts */
.mlb-form-success,
.mlb-form-error {
    display: none;
    padding: 13px 18px;
    margin-bottom: 20px;
    font-size: var(--t-small);
    font-weight: 600;
    line-height: 1.5;
}

.mlb-form-success {
    background: rgba(0, 212, 170, 0.08);
    border-left: 3px solid var(--c-accent);
    color: var(--s-success-text);
}

.mlb-form-error {
    background: rgba(239, 68, 68, 0.07);
    border-left: 3px solid var(--s-error);
    color: var(--s-error-text);
}

/* ── SIDEBAR ── */
.mlb-contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 24px;
}

/* Contact details */
.mlb-details-card {
    background: #fff;
    border: 1px solid var(--c-border);
    padding: 32px;
}

.mlb-details-card h3 {
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--c-primary);
    margin: 0 0 20px;
    font-family: var(--f-mono);
}

.mlb-detail-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    font-size: var(--t-small);
}

.mlb-detail-line:last-child {
    margin-bottom: 0;
}

.mlb-detail-label {
    font-size: var(--t-eyebrow);
    font-weight: 600;
    color: var(--eyebrow-c, var(--n-700));
    font-family: var(--f-mono);
    min-width: 60px;
    padding-top: 2px; letter-spacing: var(--ls-eyebrow);}

.mlb-detail-value {
    color: var(--c-dark);
    line-height: 1.6;
}

.mlb-detail-value a {
    color: var(--c-primary);
    text-decoration: none;
}

.mlb-detail-value a:hover {
    text-decoration: underline;
}

/* Office hours */
.mlb-hours-card {
    background: var(--c-dark);
    padding: 28px 32px;
}

.mlb-hours-card h3 {
    font-size: var(--t-label);
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin: 0 0 16px;
    font-family: var(--f-mono);
}

.mlb-hours-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--t-small);
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
}

.mlb-hours-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mlb-hours-row .closed {
    color: rgba(255,255,255,0.3);
}

/* Trust strip */
.mlb-trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mlb-trust-item {
    background: #fff;
    border: 1px solid var(--c-border);
    padding: 18px 14px;
    text-align: center;
}

.mlb-trust-item .ti-icon {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 6px;
}

.mlb-trust-item .ti-label {
    font-size: var(--t-eyebrow);
    font-weight: 600;
    color: var(--eyebrow-c, var(--n-700));
    line-height: var(--lh-eyebrow);
    display: block; letter-spacing: var(--ls-eyebrow);}

.mlb-trust-item .ti-sub {
    font-size: var(--t-small);
    color: var(--n-500);
    display: block;
    margin-top: 3px;
}

/* ── DISCLAIMER BANNER ── */
.mlb-disclaimer-banner {
    
    margin-top: 48px;
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid var(--c-warn);
    padding: 24px 20px; /* 4c.2: the box is a child of .xlml-rail now, so it carries its own inner padding */
}

.mlb-disclaimer-banner h4 {
    font-size: var(--t-label);
    font-weight: 700;
    color: var(--s-warn-text);
    margin: 0 0 10px;
    font-family: var(--f-mono);
}

.mlb-disclaimer-banner p {
    font-size: var(--t-small);
    color: var(--s-warn-text);
    line-height: var(--lh-small);
    margin: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 880px) {
    .mlb-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mlb-contact-sidebar {
        position: static;
    }

    .mlb-form-card {
        padding: 32px 24px;
    }
}

.page-template-megalab-contact .ct-main,
.page-template-megalab-contact .entry-content,
.page-template-megalab-contact-php .ct-main,
.page-template-megalab-contact-php .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.ct-header .ct-search-input,
.ct-header input[type="search"] {
    color: #ffffff !important;
}
.ct-header input[type="search"]::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

@media (max-width: 600px) {
    .mlb-contact-body {
        padding-top: 32px; padding-bottom: 56px;
    }
    .mlb-field-row {
        grid-template-columns: 1fr;
    }
    .mlb-form-card {
        padding: 24px 16px;
    }
    .mlb-trust-strip {
        grid-template-columns: 1fr 1fr;
    }
    .mlb-submit-btn {
        min-height: 48px;
        font-size: var(--t-body);
    }
    .mlb-disclaimer-banner {
        padding-block: 18px;
        margin-top: 32px;
    }
}