/* -------------------------------------------------------------------------------------------------------------
   Claude PE components - front end (2026-10-14)
   Loaded by include/pe2_header.php AFTER main_frontend.css / gateway.css and BEFORE the PBN stylesheet, so a
   PBN sheet can override any token below (or any component rule) to suit its brand.

   Brand tokens: follow the PBN. Defaults here are Practice Exchange (PBN 7), the most used look; PBN 0
   (Business Exchange, the fall-back) and other PBNs override them in pbn/pbn_<id>/<stylesheet>.
   Status tokens (ok / info / warn / error) are deliberately the same for every PBN, so "done" always looks like
   done. A new PBN's pro-forma stylesheet should carry the brand-token block (see pbn/pbn_7/pe2_styles_pbn_7.css).

   Components: .pe2c-lp-*     emailed-link pages (include/pe2c_clickwrap_inc.php)
               .pe2c-thanks-* contact-form thank-you card (include/pe2c_enquiry_inc.php)
   ------------------------------------------------------------------------------------------------------------- */

:root {
  /* Brand (PBN-overridable) */
  --pe2c-accent: #f9a351;          /* main call-to-action button */
  --pe2c-accent-dark: #e2954b;     /* its hover / border */
  --pe2c-accent-text: #ffffff;
  --pe2c-heading: #254b70;
  --pe2c-text: #677078;
  --pe2c-link: #45a4dc;
  --pe2c-panel-bg: #f4f6f9;
  --pe2c-panel-border: #dde2ea;
  --pe2c-card-bg: #ffffff;
  --pe2c-neutral: #5d6b7a;         /* decline / secondary action button */
  --pe2c-neutral-dark: #4e5a67;

  /* Status (the same for every PBN) */
  --pe2c-ok-bg: #e3f4e6;    --pe2c-ok-border: #9fd3a8;    --pe2c-ok-text: #1d6b2b;
  --pe2c-info-bg: #e6f0f8;  --pe2c-info-border: #a9c7e0;  --pe2c-info-text: #1f5f8b;
  --pe2c-warn-bg: #fdf3e0;  --pe2c-warn-border: #e8c88a;  --pe2c-warn-text: #6b4700;
  --pe2c-error-bg: #fbe9e7; --pe2c-error-border: #e3a9a1; --pe2c-error-text: #a3352a;
}

/* ---- Emailed-link pages: confirm step and results ---- */
.pe2c-lp-wrap{max-width:720px;margin:10px auto 30px;padding:0 16px}
.pe2c-lp{background:var(--pe2c-panel-bg);border:1px solid var(--pe2c-panel-border);border-radius:6px;padding:18px}
.pe2c-lp-card{display:flex;gap:18px;align-items:flex-start;background:var(--pe2c-card-bg);border:1px solid var(--pe2c-panel-border);border-radius:6px;padding:22px 24px}
.pe2c-lp-icon{flex:0 0 52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--pe2c-ok-bg);border:1px solid var(--pe2c-ok-border);color:var(--pe2c-ok-text)}
.pe2c-lp-icon.info{background:var(--pe2c-info-bg);border-color:var(--pe2c-info-border);color:var(--pe2c-info-text)}
.pe2c-lp-icon.warn{background:var(--pe2c-error-bg);border-color:var(--pe2c-error-border);color:var(--pe2c-error-text)}
.pe2c-lp-text{flex:1;min-width:0;font-size:1.05em;line-height:1.5;color:var(--pe2c-text)}
.pe2c-lp-text h2{margin:0 0 8px;font-size:1.4em;line-height:1.3}
.pe2c-lp-text p{margin:0 0 8px}
.pe2c-lp-text p:last-child{margin-bottom:0}
.pe2c-lp-text .text-center{text-align:left}
.pe2c-lp-text .pagetext h2,.pe2c-lp-text .pagetext h1{margin-top:0}
.pe2c-lp-detail{background:var(--pe2c-panel-bg);border:1px solid var(--pe2c-panel-border);border-radius:6px;padding:12px 16px;margin:12px 0}
.pe2c-lp-detail .pe2c-lp-dt{font-weight:600;font-size:1.1em;margin-bottom:4px;color:var(--pe2c-heading)}
.pe2c-lp-detail div{margin:2px 0}
.pe2c-lp-actions{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}
/* Link-buttons: style every link state - the site's link colours otherwise win on clicked/focused links */
.pe2c-lp a.pe2c-lp-btn,.pe2c-lp a.pe2c-lp-btn:link,.pe2c-lp a.pe2c-lp-btn:visited,.pe2c-lp a.pe2c-lp-btn:hover,.pe2c-lp a.pe2c-lp-btn:focus{
  display:inline-block;background:var(--pe2c-accent);border:1px solid var(--pe2c-accent-dark);color:var(--pe2c-accent-text) !important;border-radius:4px;
  padding:12px 22px;font-weight:600;font-size:1.1em;text-decoration:none;text-align:center;line-height:1.35;max-width:100%}
.pe2c-lp a.pe2c-lp-btn:hover{background:var(--pe2c-accent-dark)}
.pe2c-lp a.pe2c-lp-btn.decline,.pe2c-lp a.pe2c-lp-btn.decline:link,.pe2c-lp a.pe2c-lp-btn.decline:visited,.pe2c-lp a.pe2c-lp-btn.decline:focus{
  background:var(--pe2c-neutral);border-color:var(--pe2c-neutral-dark)}
.pe2c-lp a.pe2c-lp-btn.decline:hover{background:var(--pe2c-neutral-dark)}
.pe2c-lp-note{font-size:.9em;color:var(--pe2c-text);text-align:center}
@media (max-width:600px){.pe2c-lp-card{flex-direction:column;align-items:center;text-align:center}}

/* ---- Contact-form thank-you card ---- */
.pe2c-thanks-wrap{max-width:720px;margin:30px auto 40px;padding:0 16px}
.pe2c-thanks{background:var(--pe2c-panel-bg);border:1px solid var(--pe2c-panel-border);border-radius:6px;padding:18px}
.pe2c-thanks-card{display:flex;gap:18px;align-items:flex-start;background:var(--pe2c-card-bg);border:1px solid var(--pe2c-panel-border);border-radius:6px;padding:22px 24px}
.pe2c-thanks-icon{flex:0 0 52px;height:52px;border-radius:50%;background:var(--pe2c-ok-bg);border:1px solid var(--pe2c-ok-border);color:var(--pe2c-ok-text);
  display:flex;align-items:center;justify-content:center;font-size:24px}
.pe2c-thanks-text{flex:1;min-width:0;font-size:1.05em;line-height:1.5;color:var(--pe2c-text)}
.pe2c-thanks-text p:last-child{margin-bottom:0}
.pe2c-thanks-text h1,.pe2c-thanks-text h2,.pe2c-thanks-text h3{margin-top:0}
.pe2c-thanks-actions{margin-top:14px;display:flex;justify-content:flex-end}
.pe2c-thanks a.pe2c-thanks-btn,.pe2c-thanks a.pe2c-thanks-btn:link,.pe2c-thanks a.pe2c-thanks-btn:visited,.pe2c-thanks a.pe2c-thanks-btn:hover,.pe2c-thanks a.pe2c-thanks-btn:focus{
  display:inline-block;background:var(--pe2c-accent);border:1px solid var(--pe2c-accent-dark);color:var(--pe2c-accent-text) !important;border-radius:4px;
  padding:8px 18px;font-weight:600;text-decoration:none}
.pe2c-thanks a.pe2c-thanks-btn:hover{background:var(--pe2c-accent-dark)}
@media (max-width:600px){.pe2c-thanks-card{flex-direction:column;align-items:center;text-align:center}}