/**
 * Qualify AI — Paid Memberships Pro dark brand skin
 *
 * Restyles the PMPro checkout, levels, and account pages to match the client
 * dashboard's dark theme (#07080C base, #181D27 cards, blue→cyan gradient CTAs).
 * Enqueued only on PMPro pages (see prospecting-saas.php), so it never touches
 * the marketing site. Selectors cover both the modern `.pmpro_form_*` template
 * and the legacy `.pmpro_checkout` markup.
 */

/* ---- Brand tokens ---- */
:root {
    --qai-bg-0: #07080C;
    --qai-bg-1: #0E1117;
    --qai-card: #181D27;
    --qai-border: rgba(255, 255, 255, 0.08);
    --qai-border-hi: rgba(255, 255, 255, 0.14);
    --qai-accent: #4F80FF;
    --qai-accent-2: #00C8FF;
    --qai-accent-g: linear-gradient(135deg, #4F80FF 0%, #00C8FF 100%);
    --qai-t-1: #EEF0F6;
    --qai-t-2: #C7CEDC;
    --qai-t-3: #8490A8;
    --qai-warn: #FFB454;
    --qai-danger: #FF6B81;
    --qai-success: #22D3A0;
}

/* ---- Page canvas: go dark, let Elementor sections show through ---- */
body.pmpro-brand-page {
    background-color: var(--qai-bg-0) !important;
}
body.pmpro-brand-page .elementor-section,
body.pmpro-brand-page .e-con,
body.pmpro-brand-page .e-con-inner,
body.pmpro-brand-page .elementor-widget-wrap,
body.pmpro-brand-page .entry-content,
body.pmpro-brand-page .page-content,
body.pmpro-brand-page .site-main,
body.pmpro-brand-page main,
body.pmpro-brand-page article.page {
    background-color: transparent !important;
}

/* ---- Scope everything below to PMPro content ---- */
.pmpro-brand-page .entry-content,
.pmpro-brand-page .pmpro_form,
.pmpro-brand-page #pmpro_account,
.pmpro-brand-page .pmpro_checkout {
    color: var(--qai-t-2);
    font-family: inherit;
}

.pmpro-brand-page h1,
.pmpro-brand-page h2,
.pmpro-brand-page h3,
.pmpro-brand-page .pmpro_checkout-h2,
.pmpro-brand-page .pmpro_card_title,
.pmpro-brand-page legend {
    color: var(--qai-t-1) !important;
}

.pmpro-brand-page a {
    color: var(--qai-accent-2);
}
.pmpro-brand-page a:hover {
    color: var(--qai-accent);
}

/* ---- Section cards (modern .pmpro_card + legacy fieldset) ---- */
.pmpro-brand-page .pmpro_card,
.pmpro-brand-page .pmpro_checkout > div,
.pmpro-brand-page .pmpro_form fieldset,
.pmpro-brand-page .pmpro_checkout fieldset {
    background: var(--qai-card) !important;
    border: 1px solid var(--qai-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    margin-bottom: 18px;
    padding: 4px 4px 8px;
}
.pmpro-brand-page .pmpro_card_content,
.pmpro-brand-page .pmpro_checkout fieldset > *,
.pmpro-brand-page .pmpro_form fieldset > * {
    padding-left: 20px;
    padding-right: 20px;
}

/* Section headings inside cards */
.pmpro-brand-page .pmpro_card_title,
.pmpro-brand-page .pmpro_checkout-h2,
.pmpro-brand-page fieldset legend {
    border-bottom: 1px solid var(--qai-border) !important;
    padding: 16px 20px !important;
    margin: 0 0 8px !important;
    font-weight: 700;
}

/* ---- Labels + hints ---- */
.pmpro-brand-page label,
.pmpro-brand-page .pmpro_form_label,
.pmpro-brand-page .pmpro_label {
    color: var(--qai-t-2) !important;
    font-weight: 600;
    font-size: 13px;
}
.pmpro-brand-page .pmpro_form_hint,
.pmpro-brand-page .lite,
.pmpro-brand-page .pmpro_asterisk {
    color: var(--qai-t-3) !important;
}

/* ---- Text inputs, selects, textareas ---- */
.pmpro-brand-page input[type="text"],
.pmpro-brand-page input[type="email"],
.pmpro-brand-page input[type="password"],
.pmpro-brand-page input[type="tel"],
.pmpro-brand-page input[type="number"],
.pmpro-brand-page select,
.pmpro-brand-page textarea,
.pmpro-brand-page .pmpro_form_input {
    width: 100%;
    background: var(--qai-bg-1) !important;
    border: 1px solid var(--qai-border-hi) !important;
    border-radius: 10px !important;
    color: var(--qai-t-1) !important;
    padding: 11px 14px !important;
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
.pmpro-brand-page input::placeholder,
.pmpro-brand-page textarea::placeholder {
    color: var(--qai-t-3);
}
.pmpro-brand-page select option {
    background: var(--qai-bg-1);
    color: var(--qai-t-1);
}
.pmpro-brand-page input:focus,
.pmpro-brand-page select:focus,
.pmpro-brand-page textarea:focus,
.pmpro-brand-page .pmpro_form_input:focus {
    outline: none !important;
    border-color: var(--qai-accent) !important;
    box-shadow: 0 0 0 3px rgba(79, 128, 255, 0.20) !important;
}
.pmpro-brand-page .pmpro_form_field-required input:invalid {
    border-color: var(--qai-border-hi) !important;
}

/* ---- Stripe / card field: keep a light, legible surface for the iframe ---- */
.pmpro-brand-page .StripeElement,
.pmpro-brand-page .pmpro_form_input-stripe,
.pmpro-brand-page #pmpro_form_field-stripe .pmpro_form_input {
    background: #ffffff !important;
    border: 1px solid var(--qai-border-hi) !important;
    border-radius: 10px !important;
    padding: 13px 14px !important;
}

/* ---- Primary / submit buttons ---- */
.pmpro-brand-page .pmpro_btn-submit,
.pmpro-brand-page input[type="submit"].pmpro_btn,
.pmpro-brand-page .pmpro_btn-submit-checkout,
.pmpro-brand-page a.pmpro_btn-select,
.pmpro-brand-page .pmpro_btn.pmpro_btn-select {
    background: var(--qai-accent-g) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 13px 32px !important;
    box-shadow: 0 6px 24px rgba(79, 128, 255, 0.42) !important;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none !important;
}
.pmpro-brand-page .pmpro_btn-submit:hover,
.pmpro-brand-page input[type="submit"].pmpro_btn:hover,
.pmpro-brand-page a.pmpro_btn-select:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(79, 128, 255, 0.58) !important;
}

/* Secondary / cancel buttons */
.pmpro-brand-page .pmpro_btn-cancel,
.pmpro-brand-page a.pmpro_btn:not(.pmpro_btn-select) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--qai-border-hi) !important;
    border-radius: 999px !important;
    color: var(--qai-t-2) !important;
    padding: 11px 26px !important;
    text-decoration: none !important;
}

/* ---- Messages / notices ---- */
.pmpro-brand-page .pmpro_message,
.pmpro-brand-page .pmpro_error,
.pmpro-brand-page .pmpro_success {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.pmpro-brand-page .pmpro_message,
.pmpro-brand-page .pmpro_error {
    background: rgba(255, 180, 84, 0.10) !important;
    border-color: rgba(255, 180, 84, 0.38) !important;
    color: var(--qai-warn) !important;
}
.pmpro-brand-page .pmpro_success {
    background: rgba(34, 211, 160, 0.10) !important;
    border-color: rgba(34, 211, 160, 0.38) !important;
    color: var(--qai-success) !important;
}

/* ---- Levels table (pricing / levels page) ---- */
.pmpro-brand-page .pmpro_levels-table,
.pmpro-brand-page #pmpro_levels_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--qai-card);
    border: 1px solid var(--qai-border);
    border-radius: 16px;
    overflow: hidden;
}
.pmpro-brand-page .pmpro_levels-table th,
.pmpro-brand-page #pmpro_levels_table th {
    background: var(--qai-bg-1) !important;
    color: var(--qai-t-1) !important;
    border-bottom: 1px solid var(--qai-border) !important;
    padding: 14px 18px !important;
}
.pmpro-brand-page .pmpro_levels-table td,
.pmpro-brand-page #pmpro_levels_table td {
    color: var(--qai-t-2) !important;
    border-bottom: 1px solid var(--qai-border) !important;
    padding: 14px 18px !important;
}

/* ---- Account page cards ---- */
.pmpro-brand-page #pmpro_account > div,
.pmpro-brand-page .pmpro_account-profile,
.pmpro-brand-page .pmpro_account-membership,
.pmpro-brand-page .pmpro_account-billing,
.pmpro-brand-page .pmpro_account-invoices,
.pmpro-brand-page .pmpro_account-links {
    background: var(--qai-card) !important;
    border: 1px solid var(--qai-border) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
}
.pmpro-brand-page #pmpro_account table,
.pmpro-brand-page .pmpro_account table {
    color: var(--qai-t-2) !important;
}
.pmpro-brand-page #pmpro_account table th,
.pmpro-brand-page #pmpro_account table td {
    border-color: var(--qai-border) !important;
}