/* ============================================================
   WebNexis — Shared Styles: Page Banner + Forms
   ============================================================ */

/* ── Page Banner ── */
.wn-page-banner {
    position: relative;
    overflow: hidden;
    margin-top: -100px;
    padding: 175px 0 72px;
}
.wn-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}
.wn-page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 80% 50%, rgba(255,255,255,.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.wn-banner-bg-icon {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 260px;
    opacity: .04;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.wn-banner-inner { position: relative; z-index: 1; }

.wn-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    padding: 6px 16px 6px 10px;
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    letter-spacing: .7px;
    backdrop-filter: blur(4px);
}
.wn-banner-badge i { font-size: 15px; color: var(--wn-accent, #e84d1c); }

.wn-banner-title {
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 900;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 14px;
    letter-spacing: -.5px;
}
.wn-banner-title em { font-style: normal; color: var(--wn-accent, #e84d1c); }

.wn-banner-sub {
    font-size: 15px;
    color: rgba(255,255,255,.6);
    line-height: 1.75;
    max-width: 580px;
    margin-bottom: 28px;
}

/* Breadcrumb trail */
.wn-banner-bc { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wn-banner-bc a { color:rgba(255,255,255,.55); font-size:13px; font-weight:500; text-decoration:none; transition:color .2s; }
.wn-banner-bc a:hover { color:#fff; }
.wn-banner-bc .sep { color:rgba(255,255,255,.25); font-size:10px; display:flex; align-items:center; }
.wn-banner-bc .crumb-current { color:var(--wn-accent,#e84d1c); font-size:13px; font-weight:600; }

/* Stats column */
.wn-banner-stats { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
@media(max-width:991px) {
    .wn-banner-stats { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; margin-top:28px; align-items:center; }
}
.wn-banner-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 16px 22px;
    text-align: center;
    min-width: 120px;
    backdrop-filter: blur(6px);
    transition: background .2s;
}
.wn-banner-stat:hover { background: rgba(255,255,255,.09); }
.wn-banner-stat .stat-num { font-size: 22px; font-weight: 800; color: var(--wn-accent,#e84d1c); line-height:1; display:block; margin-bottom:5px; }
.wn-banner-stat .stat-lbl { font-size: 10px; color: rgba(255,255,255,.5); font-weight:700; text-transform:uppercase; letter-spacing:.5px; display:block; }

/* Accent bottom line */
.wn-banner-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--wn-accent,#e84d1c) 40%, var(--wn-accent,#e84d1c) 60%, transparent 100%);
}

/* Side decorative shapes */
.wn-banner-shape-tl {
    position: absolute; top: -60px; left: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.wn-banner-shape-br {
    position: absolute; bottom: -80px; right: 15%;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--wn-accent-rgb,.6) 0%, transparent 65%);
    opacity: .06;
    pointer-events: none; z-index: 0;
}

/* ── Wrapper ── */
.wn-form-wrap { background:#f8fafc; padding:60px 0 80px; }

/* ── Trust bar ── */
.quote-trust-bar { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:36px; }
.quote-trust-item { display:flex; align-items:center; gap:10px; }
.quote-trust-item .qt-icon { width:42px; height:42px; border-radius:10px; background:#fff3ee; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quote-trust-item .qt-icon i { font-size:18px; color:#e84d1c; }
.quote-trust-item .qt-num { font-size:20px; font-weight:800; color:#0f172a; line-height:1; }
.quote-trust-item .qt-label { font-size:12px; color:#64748b; line-height:1.3; }

/* ── Card ── */
.quote-card { background:#fff; border-radius:16px; padding:40px; box-shadow:0 4px 32px rgba(15,23,42,.07); }
.quote-card h3 { font-size:22px; font-weight:800; color:#0f172a; margin-bottom:6px; }
.quote-card .subtitle { font-size:14px; color:#64748b; margin-bottom:28px; }

/* ── Form fields ── */
.qf-label { font-size:12px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; display:block; }
.qf-input { width:100%; border:1.5px solid #e2e8f0; border-radius:8px; padding:11px 14px; font-size:14px; color:#0f172a; background:#fff; transition:border .2s, box-shadow .2s; outline:none; }
.qf-input:focus { border-color:#e84d1c; box-shadow:0 0 0 3px rgba(232,77,28,.1); }
.qf-input::placeholder { color:#94a3b8; }
textarea.qf-input { resize:vertical; min-height:120px; }
select.qf-input { appearance:none; 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='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }

/* ── CAPTCHA ── */
.captcha-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.captcha-eq { background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:8px; padding:10px 18px; font-size:18px; font-weight:800; color:#0f172a; white-space:nowrap; letter-spacing:2px; font-family:monospace; }
.captcha-input { max-width:110px !important; text-align:center; font-size:16px !important; font-weight:700 !important; }
.captcha-hint { font-size:12px; color:#64748b; }

/* ── Section divider ── */
.qf-section { border-top:1px solid #f1f5f9; padding-top:22px; margin-top:22px; }
.qf-section-title { font-size:12px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.6px; margin-bottom:14px; }

/* ── Submit ── */
.quote-submit-btn { width:100%; padding:15px; background:linear-gradient(135deg,#e84d1c,#ff6b42); border:none; border-radius:10px; color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.quote-submit-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,77,28,.35); }
.quote-submit-btn:disabled { opacity:.65; transform:none; box-shadow:none; cursor:not-allowed; }
.quote-guarantee { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:#64748b; margin-top:10px; flex-wrap:wrap; }
.quote-guarantee i { color:#10b981; font-size:14px; }

/* ── Sidebar ── */
.quote-sidebar { position:sticky; top:100px; }
.quote-process-card { background:#fff; border-radius:16px; padding:28px; box-shadow:0 4px 24px rgba(15,23,42,.07); margin-bottom:20px; }
.quote-process-card h4 { font-size:16px; font-weight:800; color:#0f172a; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid #f1f5f9; }
.q-step { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.q-step:last-child { margin-bottom:0; }
.q-step-num { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#e84d1c,#ff6b42); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.q-step-content h6 { font-size:14px; font-weight:700; color:#0f172a; margin:0 0 3px; }
.q-step-content p { font-size:12px; color:#64748b; margin:0; line-height:1.5; }
.q-step-connector { width:2px; background:#f1f5f9; height:14px; margin-left:17px; margin-top:-6px; margin-bottom:-2px; }

.quote-contact-card { background:linear-gradient(135deg,#0f172a,#1e293b); border-radius:16px; padding:28px; color:#fff; }
.quote-contact-card h5 { font-size:15px; font-weight:700; margin-bottom:16px; }
.q-contact-item { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; }
.q-contact-item:last-child { margin-bottom:0; }
.q-contact-item .q-ci-icon { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:14px; color:#e84d1c; flex-shrink:0; }
.q-contact-item span { color:rgba(255,255,255,.8); }
.q-contact-item a { color:#fff; font-weight:600; text-decoration:none; }
.q-contact-item a:hover { color:#ff6b42; }
.quote-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.q-badge { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600; color:rgba(255,255,255,.8); }

/* ── Contact info cards ── */
.wn-info-card { background:#fff; border-radius:14px; padding:22px 24px; box-shadow:0 4px 20px rgba(15,23,42,.06); display:flex; align-items:center; gap:16px; margin-bottom:14px; transition:transform .2s, box-shadow .2s; text-decoration:none; }
.wn-info-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(15,23,42,.1); }
.wn-info-card .wn-ic-icon { width:48px; height:48px; border-radius:12px; background:#fff3ee; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wn-info-card .wn-ic-icon i { font-size:22px; color:#e84d1c; }
.wn-info-card .wn-ic-label { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.wn-info-card .wn-ic-value { font-size:14px; font-weight:700; color:#0f172a; line-height:1.3; }

/* ── Social row ── */
.wn-social-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.wn-social-btn { width:38px; height:38px; border-radius:9px; border:1.5px solid #e2e8f0; display:flex; align-items:center; justify-content:center; color:#475569; font-size:16px; text-decoration:none; transition:all .2s; }
.wn-social-btn:hover { background:#e84d1c; border-color:#e84d1c; color:#fff; }

/* ── Pill tags for project type / budget ── */
.type-pills { display:flex; flex-wrap:wrap; gap:8px; }
.type-pill { padding:7px 16px; border-radius:20px; border:1.5px solid #e2e8f0; font-size:13px; font-weight:600; color:#64748b; cursor:pointer; transition:all .15s; user-select:none; background:#fff; }
.type-pill:hover { border-color:#e84d1c; color:#e84d1c; }
.type-pill.active { background:#e84d1c; border-color:#e84d1c; color:#fff; }
.type-pill input { display:none; }

.budget-pills { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:576px){ .budget-pills { grid-template-columns:1fr 1fr; } }
.budget-pill { padding:10px 8px; border-radius:8px; border:1.5px solid #e2e8f0; font-size:12px; font-weight:700; color:#475569; text-align:center; cursor:pointer; transition:all .15s; background:#fff; line-height:1.3; }
.budget-pill:hover { border-color:#e84d1c; color:#e84d1c; }
.budget-pill.active { background:#e84d1c; border-color:#e84d1c; color:#fff; }
.budget-pill input { display:none; }
.budget-pill .bp-label { font-size:10px; font-weight:500; opacity:.75; display:block; margin-top:2px; }

/* ── Service checklist ── */
.service-checklist-wrap { display:none; border:1.5px solid #e2e8f0; border-radius:10px; padding:20px; background:#fafbfd; margin-top:4px; }
.service-checklist-wrap.visible { display:block; animation:wn-fade .25s ease; }
@keyframes wn-fade { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.checklist-headline { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.checklist-headline i { color:#e84d1c; }
.checklist-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:576px){ .checklist-grid { grid-template-columns:1fr; } }
.checklist-item { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer; transition:background .15s; border:1.5px solid transparent; user-select:none; }
.checklist-item:hover { background:#fff3ee; border-color:#ffd0b8; }
.checklist-item.checked { background:#fff3ee; border-color:#e84d1c; }
.checklist-item .ci-box { width:18px; height:18px; border-radius:4px; border:2px solid #cbd5e1; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.checklist-item.checked .ci-box { background:#e84d1c; border-color:#e84d1c; }
.checklist-item.checked .ci-box::after { content:''; display:block; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); }
.checklist-item .ci-text { flex:1; }
.checklist-item .ci-title { font-size:13px; font-weight:600; color:#0f172a; line-height:1.3; }
.checklist-item .ci-sub { font-size:11px; color:#64748b; margin-top:1px; line-height:1.3; }

/* ── Field validation states ── */
.qf-input.qf-error { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12) !important; }
.qf-input.qf-error:focus { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.2) !important; }
.qf-field-error { display:block; font-size:11px; font-weight:600; color:#ef4444; margin-top:5px; line-height:1.4; }

/* ── Form status box ── */
.form-status { border-radius:10px; font-size:14px; font-weight:600; line-height:1.5; transition:all .25s; }
.form-status:empty { display:none; }
.form-status.is-success { padding:14px 18px; background:#f0fdf4; border:1.5px solid #86efac; color:#166534; display:flex; align-items:flex-start; gap:10px; }
.form-status.is-success i { color:#16a34a; font-size:16px; flex-shrink:0; margin-top:1px; }
.form-status.is-error { padding:14px 18px; background:#fef2f2; border:1.5px solid #fca5a5; color:#991b1b; display:flex; align-items:flex-start; gap:10px; }
.form-status.is-error i { color:#dc2626; font-size:16px; flex-shrink:0; margin-top:1px; }

/* ── Page Banner responsive ── */
@media (max-width: 991px) {
    .wn-page-banner { padding: 150px 0 56px; margin-top: 0; }
    .wn-banner-bg-icon { font-size: 160px; opacity: .03; }
    .wn-banner-stats { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .wn-banner-stat { min-width: 100px; padding: 12px 16px; }
}
@media (max-width: 767px) {
    .wn-page-banner { padding: 130px 0 48px; }
    .wn-banner-title { letter-spacing: -.3px; margin-bottom: 10px; }
    .wn-banner-sub { font-size: 14px; margin-bottom: 20px; }
    .wn-banner-bg-icon { display: none; }
    .wn-banner-stat { min-width: 80px; padding: 10px 12px; }
    .wn-banner-stat .stat-num { font-size: 18px; }
}
@media (max-width: 479px) {
    .wn-page-banner { padding: 120px 0 40px; }
    .wn-banner-badge { font-size: 10px; padding: 5px 12px 5px 8px; }
}