/*
Theme Name: WSP Certificate Verification Portal
Theme URI: https://certificates.worldsafetyprotections.co.uk/
Author: World Safety Protections UK
Author URI: https://worldsafetyprotections.co.uk/
Description: Dedicated verification portal for https://certificates.worldsafetyprotections.co.uk/ — QR scanner verification, IAS accredited registry, form builder, batch upload.
Version: 2.2.0
License: GNU General Public License v2 or later
Text Domain: wsp-certificate-theme
Requires at least: 6.0
Requires PHP: 7.4
*/

:root{
  --navy:#032848;--navy2:#05305C;--teal:#0F8A9D;--sky:#149BD7;--gold:#C9A227;--gold2:#E8A317;
  --bg:#F4F7FA;--ink:#1E293B;--mut:#64748B;--line:#E2E8F0;--ok:#059669;--warn:#D97706;--bad:#DC2626;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Arial,Helvetica,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
img{max-width:100%}
.wsp-container{max-width:900px;margin:0 auto;padding:0 16px}

/* ===== Top bar + header ===== */
.wsp-topbar{background:var(--navy);color:#fff;font-size:12px;padding:8px 0}
.wsp-topbar-flex{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 14px}
.wsp-topbar a{color:#FCD34D;text-decoration:none;font-weight:bold}
.wsp-header{background:#fff;border-bottom:4px solid var(--gold);padding:12px 0;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.wsp-header-flex{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wsp-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}

/* ===== Hero / search ===== */
.wsp-verify-hero{background:var(--navy);color:#fff;padding:44px 0 36px;text-align:center;position:relative;overflow:hidden}
.wsp-verify-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(20,155,215,.25),transparent 40%),radial-gradient(circle at 85% 10%,rgba(201,162,39,.25),transparent 30%);pointer-events:none}
.wsp-verify-hero>*{position:relative}
.wsp-pill{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:4px 14px;border-radius:20px;font-size:11px;font-weight:800;color:#FCD34D;letter-spacing:.06em}
.wsp-verify-hero h1{margin:10px 0 6px;font-size:32px;font-weight:900;line-height:1.1}
.wsp-sub{opacity:.85;font-size:14px;max-width:540px;margin:0 auto}
.wsp-qr-note{background:rgba(16,185,129,.2);border:1px solid #34D399;color:#D1FAE5;border-radius:10px;padding:8px 14px;margin:14px auto 0;max-width:540px;font-size:12px}
.wsp-qr-note code{background:rgba(255,255,255,.15);padding:1px 6px;border-radius:4px}
.wsp-verify-input-wrap{background:#fff;border-radius:16px;padding:6px;display:flex;gap:8px;max-width:580px;margin:24px auto 8px;box-shadow:0 15px 35px rgba(0,0,0,.25)}
.wsp-verify-input-wrap input{flex:1;min-width:0;border:0;outline:0;font-size:16px;font-weight:900;padding:12px 16px;text-transform:uppercase;color:var(--navy);background:transparent;font-family:inherit}
.wsp-verify-input-wrap button{background:var(--gold2);color:var(--navy);border:0;padding:12px 24px;border-radius:12px;font-weight:900;cursor:pointer;font-size:14px;font-family:inherit;white-space:nowrap;transition:background .15s,transform .1s}
.wsp-verify-input-wrap button:hover{background:var(--gold)}
.wsp-verify-input-wrap button:active{transform:scale(.98)}
.wsp-hint{font-size:11px;opacity:.65;margin:6px 0 0}
.wsp-hint strong{color:#FCD34D}

/* ===== Result card ===== */
.wsp-main{padding-top:24px;padding-bottom:30px}
.wsp-result-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(3,40,72,.12);border:2px solid var(--line)}
.wsp-result-card.is-valid{border-color:#34D399}
.wsp-result-card.is-revoked{border-color:#F87171}
.wsp-result-card.is-expired{border-color:#FBBF24}
.wsp-result-header{padding:18px 24px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.is-valid .wsp-result-header{background:linear-gradient(135deg,#059669,#047857)}
.is-revoked .wsp-result-header{background:linear-gradient(135deg,#DC2626,#B91C1C)}
.is-expired .wsp-result-header{background:linear-gradient(135deg,#D97706,#B45309)}
.wsp-result-title{font-size:18px;display:block;line-height:1.2}
.wsp-result-meta{font-size:12px;opacity:.9;display:block;margin-top:4px}
.wsp-result-tag{background:rgba(255,255,255,.2);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:800;white-space:nowrap}
.wsp-result-body{padding:20px 24px 8px;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.wsp-field{border-bottom:1px dashed var(--line);padding:10px 0;display:flex;justify-content:space-between;gap:14px;font-size:14px;align-items:baseline}
.wsp-field span{color:var(--mut);flex:0 0 auto}
.wsp-field strong{color:var(--navy2);text-align:right;word-break:break-word}
.wsp-field .wsp-mono{font-family:Consolas,Menlo,monospace;letter-spacing:.02em}
.wsp-status-valid{color:var(--ok)!important}.wsp-status-revoked{color:var(--bad)!important}.wsp-status-expired{color:var(--warn)!important}

/* ===== Branded action buttons ===== */
.wsp-result-actions{background:linear-gradient(180deg,#F8FAFC,#EEF3F8);padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wsp-btn,a.wsp-btn,button.wsp-btn{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:10px 18px;border-radius:12px;font:800 13px/1 Arial,Helvetica,sans-serif;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .12s,box-shadow .15s,background .15s,color .15s;white-space:nowrap
}
.wsp-btn .wsp-btn-ic{font-size:15px;line-height:1}
.wsp-btn:hover{transform:translateY(-1px)}
.wsp-btn:active{transform:translateY(0)}
.wsp-btn:focus-visible{outline:3px solid rgba(20,155,215,.45);outline-offset:2px}
.wsp-btn-primary,a.wsp-btn-primary,button.wsp-btn-primary{background:var(--navy2);color:#fff;border-color:var(--navy2);box-shadow:0 6px 16px rgba(5,48,92,.25)}
.wsp-btn-primary:hover{background:var(--teal);border-color:var(--teal)}
.wsp-btn-outline,a.wsp-btn-outline,button.wsp-btn-outline{background:#fff;color:var(--navy2);border-color:#CBD5E1}
.wsp-btn-outline:hover{border-color:var(--navy2);box-shadow:0 6px 16px rgba(5,48,92,.12)}
.wsp-btn-outline.is-done{background:#ECFDF5;border-color:#34D399;color:#047857}
.wsp-btn-gold,a.wsp-btn-gold,button.wsp-btn-gold{background:var(--gold2);color:var(--navy);border-color:var(--gold2);box-shadow:0 6px 16px rgba(232,163,23,.3)}
.wsp-btn-gold:hover{background:var(--gold);border-color:var(--gold)}

/* ===== Not found / ready ===== */
.wsp-notfound{background:#fff;border:2px solid #FCA5A5;border-radius:16px;padding:28px 24px;text-align:center}
.wsp-notfound-ic{font-size:34px;margin-bottom:6px}
.wsp-notfound h3{color:var(--bad);margin:0 0 6px}
.wsp-notfound p{font-size:14px;color:var(--mut);max-width:560px;margin:0 auto 12px}
.wsp-ready{background:#fff;border-radius:16px;border:1px dashed #CBD5E1;padding:36px 20px;text-align:center;color:var(--mut)}
.wsp-ready-ic{font-size:32px;margin-bottom:8px}
.wsp-ready h3{color:var(--navy2);margin:0}
.wsp-ready p{font-size:13px;margin:6px 0 0}

/* ===== Info ===== */
.wsp-info-grid{margin-top:30px;background:#fff;border-radius:16px;padding:24px;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wsp-info-grid h4{margin:0 0 8px;color:var(--navy2)}
.wsp-info-grid p{font-size:13px;color:var(--mut);margin:0}
.wsp-info-grid a{color:var(--teal);font-weight:bold;text-decoration:none}

/* ===== Footer ===== */
.wsp-footer{background:var(--navy);color:#94A3B8;font-size:12px;padding:24px 0;margin-top:40px;text-align:center}
.wsp-footer a{color:#FCD34D;text-decoration:none}

/* ===== Responsive ===== */
@media (max-width:640px){
  .wsp-verify-hero{padding:30px 0 26px}
  .wsp-verify-hero h1{font-size:24px}
  .wsp-verify-input-wrap{flex-direction:column;padding:8px}
  .wsp-verify-input-wrap input{font-size:15px;padding:12px 10px;text-align:center}
  .wsp-verify-input-wrap button{width:100%;padding:14px}
  .wsp-result-header{padding:14px 16px}
  .wsp-result-title{font-size:15px}
  .wsp-result-tag{order:-1}
  .wsp-result-body{grid-template-columns:1fr;padding:14px 16px 4px}
  .wsp-field{flex-direction:column;gap:2px;align-items:flex-start}
  .wsp-field strong{text-align:left}
  .wsp-result-actions{padding:14px 16px;flex-direction:column;align-items:stretch}
  .wsp-btn,a.wsp-btn,button.wsp-btn{width:100%;min-height:46px}
  .wsp-info-grid{grid-template-columns:1fr;padding:18px}
  .wsp-header-flex>div:last-child{width:100%;display:flex;gap:6px}
  .wsp-header-flex>div:last-child a{flex:1;text-align:center}
}
@media print{
  .wsp-topbar,.wsp-header,.wsp-verify-hero,.wsp-result-actions,.wsp-info-grid,.wsp-footer,#wpadminbar{display:none!important}
  body{background:#fff}
  .wsp-result-card{box-shadow:none;border-width:1px}
  .wsp-result-body{grid-template-columns:1fr 1fr}
}