/* ============================================================
   PesaPoll — FAQ + Contact page redesign (light system)
   Loaded on the public frontend. Scoped to page classes so it
   never touches the homepage. Uses --base / --base-two + local
   neutrals (--pg-*).
   ============================================================ */
:root {
    --pg-bg: 210 20% 98%;
    --pg-card: 0 0% 100%;
    --pg-ink: 222 22% 12%;
    --pg-muted: 220 9% 46%;
    --pg-faint: 220 12% 60%;
    --pg-line: 220 16% 90%;
}

/* section titles used on these pages */
.contact-section .sec-title .sub-title,
.faq-section .sec-title .sub-title {
    color: hsl(var(--base)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
}
.contact-section .sec-title h2,
.faq-section .sec-title h2 {
    font-family: var(--heading-font); color: hsl(var(--pg-ink)); font-weight: 800; line-height: 1.2;
}

/* ---------------- CONTACT ---------------- */
.contact-section { background: hsl(var(--pg-bg)); padding: 72px 0; }
.contact-section .contact-item {
    background: hsl(var(--pg-card)); border: 1px solid hsl(var(--pg-line)); border-radius: 16px;
    padding: 26px 22px; height: 100%; text-align: center; transition: box-shadow .18s ease, transform .18s ease;
}
.contact-section .contact-item:hover { box-shadow: 0 14px 32px -18px hsl(222 40% 20% / 0.25); transform: translateY(-2px); }
.contact-section .contact-item__icon {
    width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 16px;
    background: hsl(var(--base) / 0.10); color: hsl(var(--base));
}
.contact-section .contact-item__icon svg { width: 30px; height: 30px; }
.contact-section .contact-item__title { font-family: var(--heading-font); font-size: 16px; font-weight: 700; color: hsl(var(--pg-ink)); margin-bottom: 6px; }
.contact-section .contact-item__desc, .contact-section .contact-item__desc a { color: hsl(var(--pg-muted)); font-size: 14.5px; }
.contact-section .contact-item__desc a:hover { color: hsl(var(--base)); }

.contact-section .contact-inner {
    background: hsl(var(--pg-card)) !important; border: 1px solid hsl(var(--pg-line)) !important;
    border-radius: 20px !important; padding: 12px !important; overflow: hidden;
}

/* left gradient panel (replaces the old stock photo) */
.pp-contact-panel {
    position: relative; overflow: hidden; width: 100%;
    border-radius: 14px; padding: 40px 36px; color: #fff;
    background: linear-gradient(155deg, hsl(var(--base)) 0%, hsl(var(--base-two)) 140%);
    display: flex; flex-direction: column;
}
.pp-contact-panel::after {
    content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.pp-contact-panel__badge {
    position: relative; align-self: flex-start; background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
    border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; margin-bottom: 20px;
}
.pp-contact-panel__title { position: relative; font-family: var(--heading-font); font-size: 28px; font-weight: 800; line-height: 1.18; margin-bottom: 12px; color: #fff !important; }
.pp-contact-panel__desc { position: relative; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.92) !important; margin-bottom: 26px; }
.pp-contact-panel__points { position: relative; list-style: none; padding: 0; margin: 0 0 auto; display: flex; flex-direction: column; gap: 16px; }
.pp-contact-panel__points li { display: flex; align-items: center; gap: 14px; }
.pp-contact-panel__points .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; color: #fff; }
.pp-contact-panel__points b { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.pp-contact-panel__points small { display: block; font-size: 13px; color: rgba(255,255,255,.85); }
.pp-contact-panel__foot { position: relative; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.pp-contact-panel__foot a { color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.pp-contact-panel__foot a:hover { opacity: .85; }

/* form */
.contact-section .form-inner { background: transparent !important; border: none !important; padding: 28px !important; }
.contact-section .form--label, .contact-section .form-group label { color: hsl(var(--pg-ink)); font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.contact-section .form--control, .contact-section .form-control {
    border: 1px solid hsl(var(--pg-line)) !important; border-radius: 11px !important; padding: 12px 15px !important;
    font-size: 14.5px; color: hsl(var(--pg-ink)); background: hsl(var(--pg-bg));
}
.contact-section .form--control:focus, .contact-section .form-control:focus {
    border-color: hsl(var(--base) / 0.5) !important; box-shadow: 0 0 0 3px hsl(var(--base) / 0.12) !important; background: #fff;
}
.contact-section textarea.form-control { min-height: 130px; }
.contact-section .theme-btn.btn-one {
    background: hsl(var(--base)) !important; border-radius: 11px !important; padding: 13px !important;
    font-weight: 700; font-size: 15px; border: none; color: #fff;
}
.contact-section .theme-btn.btn-one:hover { filter: brightness(1.06); }

/* map */
.contact-section .map-inner { border-radius: 18px; overflow: hidden; border: 1px solid hsl(var(--pg-line)); margin-top: 8px; }
.contact-section .map-inner iframe { display: block; filter: grayscale(0.15); }

/* ---------------- FAQ ---------------- */
.faq-section { background: hsl(var(--pg-bg)); padding: 72px 0; }
.faq-section .faq-card { display: flex; flex-direction: column; gap: 14px; }
.faq-section .faq-card__item {
    display: flex; align-items: flex-start; gap: 15px;
    background: hsl(var(--pg-card)); border: 1px solid hsl(var(--pg-line)); border-radius: 16px; padding: 20px;
}
.faq-section .faq-card__item .icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto;
    background: hsl(var(--base) / 0.10); color: hsl(var(--base));
}
.faq-section .faq-card__item .title { font-family: var(--heading-font); font-size: 16px; font-weight: 700; color: hsl(var(--pg-ink)); margin-bottom: 4px; }
.faq-section .faq-card__item .desc { color: hsl(var(--pg-muted)); font-size: 14px; line-height: 1.55; margin: 0; }

.faq-section .accordion-box { display: flex; flex-direction: column; gap: 12px; }
.faq-section .accordion-box .accordion {
    background: hsl(var(--pg-card)); border: 1px solid hsl(var(--pg-line)); border-radius: 14px; overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-section .accordion-box .accordion.active-block { border-color: hsl(var(--base) / 0.35); box-shadow: 0 12px 30px -20px hsl(var(--base) / 0.5); }
.faq-section .accordion-box .accordion .acc-btn {
    display: flex; align-items: center; gap: 12px; padding: 17px 20px !important; cursor: pointer; position: relative;
}
.faq-section .accordion-box .accordion .acc-btn h5 { font-family: var(--heading-font); font-size: 15.5px !important; line-height: 1.4 !important; font-weight: 700 !important; color: hsl(var(--pg-ink)); margin: 0; flex: 1; }
/* the theme draws a Font Awesome +/- via .icon-box::before — keep that content,
   just make the box a clean rounded badge (positioned inline, not absolute). */
.faq-section .accordion-box .accordion .acc-btn .icon-box {
    position: static !important; top: auto !important; right: auto !important;
    width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
    background: hsl(var(--base) / 0.10); display: grid; place-items: center; color: hsl(var(--base)); transition: .2s ease;
}
.faq-section .accordion-box .accordion .acc-btn .icon-box::before { font-size: 12px !important; line-height: 1; color: inherit; }
.faq-section .accordion-box .accordion .acc-btn.active .icon-box { background: hsl(var(--base)); color: #fff; }
.faq-section .accordion-box .accordion .acc-content { padding: 0 20px 18px !important; }
.faq-section .accordion-box .acc-content .content p { color: hsl(var(--pg-muted)); font-size: 14.5px; line-height: 1.65; margin: 0; }

@media (max-width: 575px) {
    .contact-section, .faq-section { padding: 44px 0; }
    .pp-contact-panel { padding: 30px 24px; }
}