/*
Theme Name: Nonta Child
Theme URI: http://demo.bravisthemes.com/nonta
Author: Bravis-Themes
Author URI: https://bravisthemes.com/
Description: Nonta is a modern and carefully designed theme geared specifically towards all charity and nonprofit organizations, as well as fundraising campaigns. It’s also fully compatible with Give plugin for easy donations right on your site; it’s simply what every charity or fundraising website needs.
Version: 1.0.1
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: nonta
Text Domain: nonta-child
Tags: causes, charity, charity agency, charity hub, church, donate, donations, foundation, fundraising, mosque, nonprofit, organization, social, volunteer, welfare.
*/

.pxl-element-slider.style-1.pxl-swiper-show-arrow .pxl-slider--inner, .pxl-element-slider.style-1.pxl-swiper-show-pagination .pxl-slider--inner {
    padding-bottom: 0 !important;
}

.page #pxl-main {
	padding: 0;
}

.page:not(.home) .pxl-nav-menu .pxl-menu-primary > li:nth-child(2):hover > a,
.pxl-nav-menu .pxl-menu-primary > li:nth-child(2).current_page_item > a:not(.is-one-page),
.pxl-nav-menu .pxl-menu-primary > li:nth-child(2).current-menu-parent > a:not(.is-one-page),
.pxl-nav-menu .pxl-menu-primary > li:nth-child(2) .sub-menu li.current_page_item > a, 
.pxl-nav-menu .pxl-menu-primary > li:nth-child(2) .sub-menu li:hover > a
 {
    color: #0072bc !important;
}
.pxl-menu-primary > li:nth-child(2) > a span::before {
    background-color: #0072bc !important;
}

.page:not(.home) .pxl-nav-menu .pxl-menu-primary > li:nth-child(3):hover > a,
.pxl-nav-menu .pxl-menu-primary > li:nth-child(3).current_page_item > a:not(.is-one-page),
.pxl-nav-menu .pxl-menu-primary > li:nth-child(3).current-menu-parent > a:not(.is-one-page),
.pxl-nav-menu .pxl-menu-primary > li:nth-child(3) .sub-menu li.current_page_item > a, 
.pxl-nav-menu .pxl-menu-primary > li:nth-child(3) .sub-menu li:hover > a {
    color: #ffc20e !important;
}
.pxl-menu-primary > li:nth-child(3) > a span::before {
    background-color: #ffc20e !important;
}

.page:not(.home) .pxl-nav-menu .pxl-menu-primary > li:nth-child(4):hover > a,
.pxl-nav-menu .pxl-menu-primary > li:nth-child(4).current_page_item > a:not(.is-one-page),
.pxl-nav-menu .pxl-menu-primary > li:nth-child(4).current-menu-parent > a:not(.is-one-page),
.pxl-nav-menu .pxl-menu-primary > li:nth-child(4) .sub-menu li.current_page_item > a, 
.pxl-nav-menu .pxl-menu-primary > li:nth-child(4) .sub-menu li:hover > a {
    color: #39b54a !important;
}
.pxl-menu-primary > li:nth-child(4) > a span::before {
    background-color: #39b54a !important;
}

.page:not(.home) .pxl-nav-menu .pxl-menu-primary > li:nth-child(6):hover > a,
.pxl-nav-menu .pxl-menu-primary > li:nth-child(6).current_page_item > a:not(.is-one-page) {
    color: #0072bc !important;
}
.pxl-menu-primary > li:nth-child(6) > a span::before {
    background-color: #0072bc !important;
}

.pxl-grid .pxl-item--inner {
    background: #fff;
}
.pxl-icon-box9 .pxl-item--inner .cr {
    filter: invert(1) hue-rotate(320deg);
}
.pxl-item-client img {
    height: 100px;
    object-fit: contain;
    background: #fff;
    padding: 5px 10px;
}

.green .taa-panel-image img {
    filter: brightness(0) saturate(100%) invert(48%) sepia(28%) saturate(5170%) hue-rotate(349deg) brightness(100%) contrast(91%);
}
.orange .taa-panel-image img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(86%) saturate(6448%) hue-rotate(190deg) brightness(97%) contrast(101%);
}
.blue .taa-panel-image img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(54%) saturate(4611%) hue-rotate(350deg) brightness(104%) contrast(101%);
}
.yellow .taa-panel-image img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(2420%) hue-rotate(77deg) brightness(94%) contrast(83%);
}


/* ============================================================
   TAA Membership Application Form — Styles
   Works with Contact Form 7 (CF7)
   Add via: Appearance → Customize → Additional CSS
   OR paste into your child theme's style.css
   ============================================================ */

/* ── BRAND TOKENS ─────────────────────────────────────────── */
.taa-form {
    --or     : #F26522;
    --bl     : #0072BC;
    --ye     : #FFC20E;
    --gr     : #39B54A;
    --or-bg  : #fff7f3;
    --bl-bg  : #f0f7ff;
    --radius : 8px;
    --shadow : 0 8px 40px rgba(0,0,0,.10);
    --border : #d1d5db;
    --border-focus : var(--or);
    --text-dark    : #111827;
    --text-mid     : #374151;
    --text-muted   : #6b7280;
    --text-hint    : #9ca3af;
    --bg-input     : #f9fafb;
    --bg-page      : #ffffff;
}

/* ── FORM SHELL ───────────────────────────────────────────── */
.taa-form {
    background   : var(--bg-page);
    border-radius: 14px;
    overflow     : hidden;
    box-shadow   : var(--shadow);
    max-width    : 820px;
    padding      : 40px 45px;
}

/* Multicolour top bar */
.taa-form::before {
    content    : '';
    display    : block;
    height     : 5px;
    background : linear-gradient(
        90deg,
        #F26522 0%, #F26522 35%,
        #0072BC 35%, #0072BC 65%,
        #39B54A 65%, #39B54A 85%,
        #FFC20E 85%
    );
}

/* Inner padding — targets the CF7 form wrapper */
.taa-form .wpcf7-form,
.taa-form > form {
    padding: 40px 48px 48px;
}

/* ── SECTION TITLES ───────────────────────────────────────── */
.taa-form-section-title {
    display    : flex;
    align-items: center;
    gap        : 12px;
    font-size  : .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color      : var(--or);
    margin     : 36px 0 20px;
    padding    : 0;
    border     : none;
}
.taa-form-section-title::before {
    content      : '';
    width        : 3px;
    height       : 18px;
    background   : var(--or);
    border-radius: 2px;
    flex-shrink  : 0;
}
.taa-form-section-title::after {
    content   : '';
    flex      : 1;
    height    : 1px;
    background: #e5e7eb;
}
.taa-form-section-title:first-of-type {
    margin-top: 0;
}

/* ── GRID ROWS ────────────────────────────────────────────── */
.taa-form-row {
    display: grid;
    gap    : 20px;
}
.taa-form-row--half   { grid-template-columns: 1fr 1fr; }
.taa-form-row--thirds { grid-template-columns: 1fr 1fr 1fr; }

/* ── FIELD GROUPS ─────────────────────────────────────────── */
.taa-form-group {
    margin-bottom: 20px;
}
.taa-form-group > label:first-child {
    display    : block;
    font-size  : .83rem;
    font-weight: 600;
    color      : var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.4;
}
.taa-req {
    color      : var(--or);
    margin-left: 2px;
}
.taa-field-hint {
    font-size  : .78rem;
    color      : var(--text-muted);
    margin     : 0 0 8px;
    line-height: 1.58;
}
.taa-field-hint strong {
    color      : var(--text-mid);
    font-weight: 600;
}

/* ── CF7 CONTROL WRAPPERS ─────────────────────────────────── */
.taa-form .wpcf7-form-control-wrap {
    display: block;
    width  : 100%;
}

/* ── TEXT / EMAIL / TEL / URL INPUTS ─────────────────────── */
.taa-form input[type="text"],
.taa-form input[type="email"],
.taa-form input[type="tel"],
.taa-form input[type="url"],
.taa-form input[type="number"] {
    width         : 100%;
    padding       : 10px 14px;
    border        : 1.5px solid var(--border);
    border-radius : var(--radius);
    font-size     : .875rem;
    font-family   : inherit;
    color         : var(--text-dark);
    background    : var(--bg-input);
    outline       : none;
    transition    : border-color .18s, box-shadow .18s, background .18s;
    line-height   : 1.5;
}
.taa-form input[type="text"]::placeholder,
.taa-form input[type="email"]::placeholder,
.taa-form input[type="tel"]::placeholder,
.taa-form input[type="url"]::placeholder {
    color    : var(--text-hint);
    font-size: .83rem;
}
.taa-form input[type="text"]:focus,
.taa-form input[type="email"]:focus,
.taa-form input[type="tel"]:focus,
.taa-form input[type="url"]:focus {
    border-color: var(--border-focus);
    background  : #fff;
    box-shadow  : 0 0 0 3px rgba(242,101,34,.12);
}

/* ── SELECT ───────────────────────────────────────────────── */
.taa-form select {
    width          : 100%;
    padding        : 10px 36px 10px 14px;
    border         : 1.5px solid var(--border);
    border-radius  : var(--radius);
    font-size      : .875rem;
    font-family    : inherit;
    color          : var(--text-dark);
    background     : var(--bg-input);
    outline        : none;
    appearance     : none;
    cursor         : pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 12px center;
    transition     : border-color .18s, box-shadow .18s, background .18s;
}
.taa-form select:focus {
    border-color: var(--border-focus);
    background-color: #fff;
    box-shadow  : 0 0 0 3px rgba(242,101,34,.12);
}
/* Muted first option */
.taa-form select option:first-child { color: var(--text-hint); }

/* ── TEXTAREA ─────────────────────────────────────────────── */
.taa-form textarea {
    width        : 100%;
    padding      : 11px 14px;
    border       : 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size    : .875rem;
    font-family  : inherit;
    color        : var(--text-dark);
    background   : var(--bg-input);
    outline      : none;
    resize       : vertical;
    min-height   : 110px;
    line-height  : 1.6;
    transition   : border-color .18s, box-shadow .18s, background .18s;
}
.taa-form textarea::placeholder { color: var(--text-hint); font-size: .83rem; }
.taa-form textarea:focus {
    border-color: var(--border-focus);
    background  : #fff;
    box-shadow  : 0 0 0 3px rgba(242,101,34,.12);
}

/* ── RADIO BUTTONS ────────────────────────────────────────── */
.taa-radio-group .wpcf7-radio,
.taa-radio-group .wpcf7-form-control {
    display   : flex;
    flex-wrap : wrap;
    gap       : 10px;
    margin-top: 4px;
}
.taa-radio-group .wpcf7-list-item {
    margin: 0 !important;
}
.taa-radio-group .wpcf7-list-item label {
    display    : flex;
    align-items: center;
    gap        : 8px;
    background : var(--bg-input);
    border     : 1.5px solid var(--border);
    border-radius: 7px;
    padding    : 9px 16px;
    cursor     : pointer;
    font-size  : .84rem;
    font-weight: 600;
    color      : var(--text-mid);
    transition : border-color .15s, background .15s, color .15s;
    margin     : 0 !important;
    line-height: 1;
}
.taa-radio-group .wpcf7-list-item label:hover {
    border-color: var(--or);
    background  : var(--or-bg);
}
.taa-radio-group .wpcf7-list-item input[type="radio"] {
    appearance   : none;
    -webkit-appearance: none;
    width        : 16px;
    height       : 16px;
    border       : 2px solid var(--border);
    border-radius: 50%;
    flex-shrink  : 0;
    cursor       : pointer;
    transition   : border-color .15s, box-shadow .15s;
    margin       : 0;
    background   : #fff;
}
.taa-radio-group .wpcf7-list-item input[type="radio"]:checked {
    border-color: var(--or);
    background  : var(--or);
    box-shadow  : inset 0 0 0 3px #fff;
}
/* Highlight the whole pill when radio inside is checked */
.taa-radio-group .wpcf7-list-item:has(input:checked) label {
    border-color: var(--or);
    background  : var(--or-bg);
    color       : var(--or);
}

/* ── CHECKBOX GRID ────────────────────────────────────────── */
.taa-checkbox-grid .wpcf7-checkbox,
.taa-checkbox-grid .wpcf7-form-control {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 6px;
    margin-top           : 6px;
}
.taa-checkbox-grid .wpcf7-list-item {
    margin: 0 !important;
}
.taa-checkbox-grid .wpcf7-list-item label {
    display    : flex;
    align-items: flex-start;
    gap        : 9px;
    padding    : 8px 10px;
    border-radius: 6px;
    cursor     : pointer;
    font-size  : .81rem;
    font-weight: 400;
    color      : var(--text-mid);
    transition : background .12s;
    margin     : 0 !important;
    line-height: 1.45;
}
.taa-checkbox-grid .wpcf7-list-item label:hover { background: #f3f4f6; }
.taa-checkbox-grid .wpcf7-list-item input[type="checkbox"] {
    appearance   : none;
    -webkit-appearance: none;
    width        : 17px;
    height       : 17px;
    border       : 1.5px solid var(--border);
    border-radius: 4px;
    flex-shrink  : 0;
    margin-top   : 1px;
    cursor       : pointer;
    background   : #fff;
    transition   : border-color .15s, background .15s;
}
.taa-checkbox-grid .wpcf7-list-item input[type="checkbox"]:checked {
    border-color    : var(--bl);
    background-color: var(--bl);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5 4,7.5 8.5,2.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: center;
}

/* ── FILE UPLOAD ──────────────────────────────────────────── */
.taa-form input[type="file"] {
    display      : block;
    width        : 100%;
    padding      : 16px;
    border       : 2px dashed var(--border);
    border-radius: var(--radius);
    background   : var(--bg-input);
    font-size    : .84rem;
    font-family  : inherit;
    color        : var(--text-muted);
    cursor       : pointer;
    transition   : border-color .18s, background .18s;
}
.taa-form input[type="file"]:hover {
    border-color: var(--or);
    background  : var(--or-bg);
}
.taa-form input[type="file"]::file-selector-button {
    font-family  : inherit;
    font-size    : .8rem;
    font-weight  : 600;
    padding      : 6px 14px;
    border-radius: 5px;
    border       : 1.5px solid var(--or);
    background   : var(--or-bg);
    color        : var(--or);
    cursor       : pointer;
    margin-right : 12px;
    transition   : background .15s;
}
.taa-form input[type="file"]::file-selector-button:hover {
    background: var(--or);
    color     : #fff;
}

/* ── CONDITIONAL SECTIONS (visual styling only — visibility handled by plugin) ── */
.taa-conditional-org,
.taa-conditional-ind {
    background   : #fafafa;
    border       : 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding      : 24px 28px;
    margin-bottom: 20px;
}
/* Section title inside conditional blocks - no top margin */
.taa-conditional-org .taa-form-section-title:first-child,
.taa-conditional-ind .taa-form-section-title:first-child {
    margin-top: 0;
}

/* ── CONSENT BOXES ────────────────────────────────────────── */
.taa-consent-box {
    background   : var(--bl-bg);
    border       : 1.5px solid #bfdbf7;
    border-radius: 10px;
    padding      : 20px 24px;
    margin-bottom: 14px;
}
.taa-consent-label {
    display    : flex !important;
    align-items: flex-start;
    gap        : 13px;
    font-weight: 600 !important;
    font-size  : .88rem !important;
    color      : #1e3a5f !important;
    cursor     : pointer;
    line-height: 1.55;
    margin-bottom: 0 !important;
}
.taa-consent-label input[type="checkbox"],
.taa-form .taa-consent-box input[type="checkbox"] {
    appearance   : none;
    -webkit-appearance: none;
    width        : 20px;
    height       : 20px;
    border       : 2px solid var(--bl);
    border-radius: 5px;
    flex-shrink  : 0;
    margin-top   : 1px;
    cursor       : pointer;
    background   : #fff;
    transition   : background .15s;
}
.taa-consent-label input[type="checkbox"]:checked,
.taa-form .taa-consent-box input[type="checkbox"]:checked {
    background-color: var(--bl);
    border-color    : var(--bl);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5 4,7.5 8.5,2.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: center;
}
/* Consent body text */
.taa-consent-text {
    margin-top   : 14px;
    padding      : 14px 18px;
    background   : rgba(0,114,188,.06);
    border-radius: 6px;
    border-left  : 3px solid rgba(0,114,188,.25);
    font-size    : .8rem;
    color        : var(--text-mid);
    line-height  : 1.72;
}
.taa-consent-text p + p { margin-top: 10px; }

/* ── SUBMIT ───────────────────────────────────────────────── */
.taa-form-submit {
    margin-top    : 32px;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 10px;
}
.taa-form input[type="submit"],
.taa-form input.taa-submit-btn,
.taa-submit-btn {
    background   : var(--or);
    color        : #fff;
    border       : none;
    padding      : 14px 56px;
    border-radius: 8px;
    font-family  : inherit;
    font-size    : .95rem;
    font-weight  : 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor       : pointer;
    box-shadow   : 0 4px 18px rgba(242,101,34,.30);
    transition   : background .18s, transform .15s, box-shadow .18s;
    display      : inline-block;
}
.taa-form input[type="submit"]:hover,
.taa-form input.taa-submit-btn:hover,
.taa-submit-btn:hover {
    background : #d4531a;
    transform  : translateY(-2px);
    box-shadow : 0 8px 28px rgba(242,101,34,.38);
}
.taa-form input[type="submit"]:active {
    transform  : translateY(0);
    box-shadow : 0 2px 8px rgba(242,101,34,.20);
}

/* ── CF7 VALIDATION & ERRORS ──────────────────────────────── */
.wpcf7-not-valid-tip {
    display    : block;
    font-size  : .77rem;
    color      : #ef4444;
    margin-top : 5px;
    font-weight: 500;
}
.taa-form .wpcf7-not-valid {
    border-color: #ef4444 !important;
    background  : #fff5f5 !important;
    box-shadow  : none !important;
}
.wpcf7-response-output {
    border-radius: 8px;
    padding      : 14px 18px !important;
    font-size    : .875rem;
    margin       : 20px 0 0 !important;
    border-left  : 4px solid !important;
    border-top   : none !important;
    border-right : none !important;
    border-bottom: none !important;
}
.wpcf7-mail-sent-ok {
    background   : #f0fdf4 !important;
    border-color : #39B54A !important;
    color        : #166534 !important;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background   : #fef2f2 !important;
    border-color : #ef4444 !important;
    color        : #991b1b !important;
}
.wpcf7-spam-blocked {
    background   : #fffbeb !important;
    border-color : #FFC20E !important;
    color        : #78350f !important;
}

/* ── SPINNER ──────────────────────────────────────────────── */
.taa-form .wpcf7-spinner {
    margin-left  : 12px;
    vertical-align: middle;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .taa-form .wpcf7-form,
    .taa-form > form { padding: 28px 22px 36px; }
    .taa-form-row--half,
    .taa-form-row--thirds { grid-template-columns: 1fr; }
    .taa-checkbox-grid .wpcf7-checkbox,
    .taa-checkbox-grid .wpcf7-form-control { grid-template-columns: 1fr; }
    .taa-form input[type="submit"],
    .taa-submit-btn { padding: 13px 32px; font-size: .88rem; width: 100%; }
    .taa-conditional-org,
    .taa-conditional-ind { padding: 18px 18px; }
}
@media (max-width: 420px) {
    .taa-radio-group .wpcf7-radio,
    .taa-radio-group .wpcf7-form-control { flex-direction: column; }
    .taa-radio-group .wpcf7-list-item label { width: 100%; }
}