/*
Theme Name: PayOps 1.1.7
Theme URI: https://www.payops.co.uk/
Author: PayOps Ltd
Description: A lightweight, responsive WordPress block theme for PayOps Ltd.
Version: 1.1.8
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: payops
*/

:root {
  --payops-blue: #1378f3;
  --payops-blue-dark: #075fc8;
  --payops-navy: #102538;
  --payops-navy-2: #0a1b2b;
  --payops-text: #17324f;
  --payops-muted: #5e7184;
  --payops-pale: #eef7ff;
  --payops-line: #dceaf6;
  --payops-white: #ffffff;
  --payops-shadow: 0 18px 50px rgba(11, 43, 75, .10);
}

html { scroll-behavior: smooth; }
body { background: #fff; }
.wp-site-blocks { overflow: hidden; }
a { text-underline-offset: 3px; }

.payops-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(220,234,246,.85);
}
.payops-header-inner { min-height: 82px; }
.payops-brand-logo {
  display:block; width: 188px; height: 60px;
  background: url('assets/images/payops-logo.png') left center / contain no-repeat;
}
.payops-nav a { color: var(--payops-text) !important; text-decoration: none; font-weight: 650; }
.payops-nav a:hover { color: var(--payops-blue) !important; }

.payops-hero {
  position: relative;
  padding: clamp(64px, 8vw, 118px) 24px clamp(68px, 8vw, 112px);
  background:
    radial-gradient(circle at 83% 20%, rgba(19,120,243,.12), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8fcff 100%);
}
.payops-hero:after {
  content:""; position:absolute; width:min(560px,56vw); height:min(560px,56vw);
  right:-12%; top:-24%; border-radius:50%;
  border: 48px solid var(--payops-blue); opacity:.95; pointer-events:none;
}
.payops-hero-inner { position: relative; z-index:2; }
.payops-eyebrow { color: var(--payops-blue); text-transform: uppercase; font-size:.78rem; letter-spacing:.15em; font-weight:800; }
.payops-hero h1 { max-width: 760px; margin-top:12px !important; font-size: clamp(2.8rem, 6vw, 5.5rem) !important; letter-spacing:-.055em; line-height:.98 !important; }
.payops-hero h1 strong { color: var(--payops-blue); }
.payops-hero-copy { max-width: 690px; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height:1.7; color:var(--payops-muted); }
.payops-actions { margin-top: 28px !important; }
.payops-actions .wp-block-button__link { border-radius:999px; padding:14px 24px; font-weight:750; }
.payops-btn-primary .wp-block-button__link { background:var(--payops-blue); color:#fff; }
.payops-btn-secondary .wp-block-button__link { background:#fff; color:var(--payops-text); border:1px solid var(--payops-line); }
.payops-trust-row { margin-top:42px !important; gap:12px !important; }
.payops-pill { padding:10px 15px; border:1px solid var(--payops-line); border-radius:999px; background:#fff; color:var(--payops-text); box-shadow:0 5px 18px rgba(30,70,110,.05); font-size:.92rem; font-weight:650; }
.payops-pill:before { content:"✓"; margin-right:8px; color:var(--payops-blue); font-weight:900; }

.payops-section { padding: clamp(70px, 8vw, 112px) 24px; }
.payops-section-soft { background: #f6fbff; }
.payops-section-dark { background:linear-gradient(135deg,var(--payops-navy-2),var(--payops-navy)); color:#fff; }
.payops-section-title { max-width:760px; margin-bottom:42px !important; }
.payops-section-title h2 { font-size:clamp(2rem,4vw,3.55rem) !important; letter-spacing:-.045em; margin-bottom:12px !important; }
.payops-section-title p { color:var(--payops-muted); font-size:1.08rem; line-height:1.7; }

.payops-grid { gap:22px !important; }
.payops-card { height:100%; padding:28px; background:#fff; border:1px solid var(--payops-line); border-radius:20px; box-shadow:var(--payops-shadow); }
.payops-card-icon { width:50px; height:50px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; border-radius:14px; background:var(--payops-pale); color:var(--payops-blue); font-size:1.55rem; font-weight:800; }
.payops-card h3 { font-size:1.2rem !important; margin:0 0 10px !important; }
.payops-card p { color:var(--payops-muted); line-height:1.65; margin:0 !important; }

.payops-worker-panel { padding: clamp(34px,5vw,58px); border-radius:28px; background:linear-gradient(135deg,#eaf6ff,#f8fcff); border:1px solid #d8ebfa; }
.payops-worker-panel h2 { font-size:clamp(2rem,4vw,3.2rem) !important; letter-spacing:-.04em; }
.payops-worker-panel h2 strong { color:var(--payops-blue); }
.payops-steps { counter-reset: payops-step; gap:16px !important; }
.payops-step { position:relative; padding:22px 22px 22px 72px; background:#fff; border:1px solid var(--payops-line); border-radius:18px; }
.payops-step:before { counter-increment:payops-step; content:counter(payops-step); position:absolute; left:20px; top:20px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--payops-blue); color:#fff; font-weight:800; }
.payops-step strong { display:block; color:var(--payops-text); margin-bottom:5px; }
.payops-step span { color:var(--payops-muted); line-height:1.55; }

.payops-confidence { gap:28px !important; align-items:center !important; }
.payops-confidence-visual { min-height:360px; border-radius:30px; background:linear-gradient(145deg,#0e6fdf,#1490ff); position:relative; overflow:hidden; }
.payops-confidence-visual:before { content:""; position:absolute; width:380px; height:380px; border:54px solid rgba(255,255,255,.25); border-radius:50%; right:-145px; top:-120px; }
.payops-confidence-visual:after { content:"P"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:10rem; font-weight:900; opacity:.92; }
.payops-confidence-copy h2 { font-size:clamp(2rem,4vw,3.3rem) !important; letter-spacing:-.04em; }
.payops-confidence-copy p { color:var(--payops-muted); line-height:1.75; }

.payops-contact-card { padding:clamp(34px,5vw,56px); border:1px solid rgba(255,255,255,.14); border-radius:28px; background:rgba(255,255,255,.06); }
.payops-contact-card h2 { color:#fff; font-size:clamp(2.1rem,4vw,3.6rem) !important; letter-spacing:-.04em; }
.payops-contact-card p { color:#c9d6e2; font-size:1.08rem; }
.payops-contact-links { gap:14px !important; margin-top:26px !important; }
.payops-contact-links a { display:inline-block; color:#fff !important; font-weight:750; text-decoration:none; padding:13px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); }
.payops-contact-links a:hover { background:rgba(255,255,255,.14); }

.payops-footer { background:#071521; color:#a9bac8; padding:30px 24px; border-top:1px solid rgba(255,255,255,.08); }
.payops-footer-brand { display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; font-size:1.12rem; }
.payops-footer-icon { width:44px; height:44px; background:url('assets/images/payops-icon.png') center/contain no-repeat; }
.payops-footer a { color:#cfe4f7 !important; }

@media (max-width: 782px) {
  .payops-header-inner { min-height:70px; }
  .payops-brand-logo { width:150px; height:46px; }
  .payops-header .wp-block-navigation { display:none; }
  .payops-hero:after { width:360px; height:360px; border-width:34px; right:-50%; top:-12%; }
  .payops-section { padding-left:18px; padding-right:18px; }
  .payops-hero { padding-left:18px; padding-right:18px; }
  .payops-grid .wp-block-column { flex-basis:100% !important; }
  .payops-confidence-visual { min-height:240px; }
  .payops-confidence-visual:after { font-size:7rem; }
}


/* PayOps 1.1 — contact, WhatsApp and presentation refinements */
.payops-header-inner,
.payops-hero-inner,
.payops-section > .wp-block-group,
.payops-section > .wp-block-columns,
.payops-footer > .wp-block-group { max-width: 1180px; margin-left:auto !important; margin-right:auto !important; }

.payops-card,
.payops-step,
.payops-contact-links a,
.payops-actions .wp-block-button__link { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.payops-card:hover { transform:translateY(-4px); box-shadow:0 22px 58px rgba(11,43,75,.14); border-color:#c8e0f3; }
.payops-actions .wp-block-button__link:hover { transform:translateY(-2px); }
.payops-btn-primary .wp-block-button__link:hover { background:var(--payops-blue-dark); }
.payops-btn-whatsapp .wp-block-button__link { background:#25D366; color:#0b2b1a; }
.payops-btn-whatsapp .wp-block-button__link:hover { background:#20bd5a; }


.payops-header-actions { display:flex; align-items:center; margin-left:14px; }
.payops-header-actions .payops-header-wa { display:inline-flex; align-items:center; justify-content:center; padding:10px 17px; border-radius:999px; background:#25D366; color:#0b2b1a !important; text-decoration:none !important; font-size:.9rem; font-weight:850; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; box-shadow:0 5px 16px rgba(18,140,126,.14); }
.payops-header-actions .payops-header-wa:hover { background:#20bd5a; transform:translateY(-1px); box-shadow:0 8px 20px rgba(18,140,126,.2); }

.payops-mobile-actions { display:none; align-items:center; gap:8px; }
.payops-mobile-actions a { text-decoration:none; font-size:.82rem; font-weight:800; padding:9px 12px; border-radius:999px; color:var(--payops-text); border:1px solid var(--payops-line); background:#fff; white-space:nowrap; }
.payops-mobile-actions .payops-mobile-wa { color:#0b2b1a; background:#25D366; border-color:#25D366; }

.payops-process-section { background:#fff; }
.payops-process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.payops-process-card { position:relative; padding:30px; min-height:210px; border-radius:22px; border:1px solid var(--payops-line); background:linear-gradient(180deg,#fff,#f9fcff); box-shadow:0 12px 34px rgba(11,43,75,.07); }
.payops-process-number { display:inline-block; margin-bottom:36px; color:var(--payops-blue); font-size:.82rem; font-weight:900; letter-spacing:.12em; }
.payops-process-card h3 { margin:0 0 10px; color:var(--payops-text); font-size:1.25rem; }
.payops-process-card p { margin:0; color:var(--payops-muted); line-height:1.65; }
.payops-process-card:after { content:""; position:absolute; left:30px; top:69px; width:40px; height:3px; border-radius:4px; background:var(--payops-blue); }

.payops-contact-links .payops-contact-whatsapp { background:#25D366; color:#0b2b1a !important; border-color:#25D366; }
.payops-contact-links .payops-contact-whatsapp:hover { background:#20bd5a; }
.payops-contact-note { max-width:800px; margin-top:18px !important; font-size:.9rem !important; line-height:1.6; color:#9fb2c1 !important; }

.payops-whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:80; display:flex; align-items:center; gap:10px; padding:10px 15px 10px 10px; border-radius:999px; background:#25D366; color:#0b2b1a !important; text-decoration:none !important; font-weight:850; box-shadow:0 14px 38px rgba(0,0,0,.2); transition:transform .2s ease, box-shadow .2s ease; }
.payops-whatsapp-float:hover { transform:translateY(-3px); box-shadow:0 18px 45px rgba(0,0,0,.24); }
.payops-wa-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#128C7E; font-weight:950; font-size:.9rem; }
.payops-wa-label { font-size:.9rem; }

@media (max-width: 782px) {
  .payops-header-actions { display:none; }
  .payops-mobile-actions { display:flex; }
  .payops-hero { padding-top:52px; }
  .payops-hero h1 { font-size:clamp(2.55rem,13vw,4.1rem) !important; }
  .payops-actions { gap:10px !important; }
  .payops-actions .wp-block-button { width:100%; }
  .payops-actions .wp-block-button__link { width:100%; text-align:center; box-sizing:border-box; }
  .payops-process-grid { grid-template-columns:1fr; }
  .payops-process-card { min-height:0; }
  .payops-wa-label { display:none; }
  .payops-whatsapp-float { right:16px; bottom:16px; padding:9px; }
  .payops-wa-icon { width:38px; height:38px; }
}

@media (max-width: 420px) {
  .payops-brand-logo { width:126px; }
  .payops-mobile-actions a:first-child { display:none; }
}
\n\n/* PayOps 1.1.4 — explicit Contact PayOps actions */\n.payops-contact-actions { margin-top:26px !important; gap:12px !important; }\n.payops-contact-actions .wp-block-button__link { border-radius:999px; padding:13px 19px; font-weight:800; text-decoration:none; }\n.payops-contact-call .wp-block-button__link,\n.payops-contact-email .wp-block-button__link { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.24); }\n.payops-contact-whatsapp-button .wp-block-button__link { background:#25D366; color:#0b2b1a; border:1px solid #25D366; }\n.payops-contact-whatsapp-button .wp-block-button__link:hover { background:#20bd5a; }\n@media (max-width:782px) {\n  .payops-contact-actions { align-items:stretch !important; }\n  .payops-contact-actions .wp-block-button { width:100%; }\n  .payops-contact-actions .wp-block-button__link { width:100%; text-align:center; box-sizing:border-box; }\n}\n

/* PayOps 1.1.5 — desktop hero alignment
   Keep the mobile layout unchanged while aligning hero content with the
   main desktop content edge rather than centring each constrained child. */
@media (min-width: 783px) {
  .payops-hero-inner > .payops-eyebrow,
  .payops-hero-inner > h1,
  .payops-hero-inner > .payops-hero-copy,
  .payops-hero-inner > .payops-actions,
  .payops-hero-inner > .payops-trust-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* PayOps 1.1.6 — restore mobile hero glass/outline treatment.
   Desktop remains unchanged. */
@media (max-width: 782px) {
  .payops-hero-inner > .payops-eyebrow {
    display: inline-block;
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid rgba(19,120,243,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(11,43,75,.07);
  }

  .payops-hero-inner > h1 {
    box-sizing: border-box;
    max-width: 100%;
    padding: 16px 18px 18px;
    border: 1px solid rgba(19,120,243,.20);
    border-radius: 22px;
    background: rgba(255,255,255,.34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 34px rgba(11,43,75,.06);
  }

  .payops-hero-inner > .payops-hero-copy {
    box-sizing: border-box;
    max-width: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 34px rgba(11,43,75,.09);
  }
}


/* PayOps 1.1.7 — robust desktop hero left alignment.
   WordPress constrained layouts can re-centre direct children via generated
   layout CSS. These desktop-only rules deliberately override that behaviour. */
@media (min-width: 783px) {
  body .wp-site-blocks .payops-hero .payops-hero-inner {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body .wp-site-blocks .payops-hero .payops-hero-inner > .payops-eyebrow,
  body .wp-site-blocks .payops-hero .payops-hero-inner > h1,
  body .wp-site-blocks .payops-hero .payops-hero-inner > .payops-hero-copy,
  body .wp-site-blocks .payops-hero .payops-hero-inner > .payops-actions,
  body .wp-site-blocks .payops-hero .payops-hero-inner > .payops-trust-row {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}