/* ============================================================
   OnlinePaymentHelp Article Style Pro
   Reusable conversion-focused article system
   Version: 1.0.0
   ============================================================ */

.oph-article,
.ecom-hosting-pro,
.asia-hosting,
.bkh-wrap{
  --oph-navy:#071d36;
  --oph-navy2:#0b3c63;
  --oph-blue:#1769d2;
  --oph-teal:#079889;
  --oph-green:#07876f;
  --oph-orange:#ff8700;
  --oph-orange2:#ff6d00;
  --oph-pink:#d81468;
  --oph-gold:#ffb020;
  --oph-red:#db4b3d;
  --oph-light:#f4f8fb;
  --oph-border:#dce7ef;
  --oph-text:#273746;
  --oph-muted:#657786;

  max-width:1100px;
  margin:0 auto;
  color:var(--oph-text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.75;
}

.oph-article *,
.ecom-hosting-pro *,
.asia-hosting *,
.bkh-wrap *{
  box-sizing:border-box;
}

.oph-article p,
.ecom-hosting-pro p,
.asia-hosting p,
.bkh-wrap p{
  font-size:17px;
  line-height:1.75;
  margin:0 0 18px;
}

.oph-article h2,
.ecom-hosting-pro h2,
.asia-hosting h2,
.bkh-wrap h2{
  color:var(--oph-navy);
  font-size:31px;
  line-height:1.28;
  margin:48px 0 18px;
  font-weight:800;
}

.oph-article h3,
.ecom-hosting-pro h3,
.asia-hosting h3,
.bkh-wrap h3{
  color:var(--oph-navy);
  font-size:23px;
  line-height:1.35;
  font-weight:800;
  margin:26px 0 10px;
}

/* HERO */
.oph-hero,
.eh-hero,
.ah-hero,
.bkh-hero{
  position:relative;
  overflow:hidden;
  padding:55px 43px;
  margin:20px 0 28px;
  color:#fff;
  border-radius:22px;
  background:
    radial-gradient(circle at 90% 15%,rgba(17,180,183,.24),transparent 29%),
    linear-gradient(135deg,#06182e 0%,#0b3558 58%,#08656a 100%);
  box-shadow:0 17px 48px rgba(7,29,54,.18);
}

.oph-hero h1,
.eh-hero h1,
.ah-hero h1,
.bkh-hero h1{
  position:relative;
  z-index:2;
  max-width:920px;
  margin:0 0 18px;
  color:#fff !important;
  font-size:45px;
  line-height:1.14;
  font-weight:900;
}

.oph-kicker,
.eh-kicker,
.ah-badge,
.bkh-kicker{
  position:relative;
  z-index:2;
  display:inline-block;
  margin-bottom:17px;
  padding:7px 14px;
  color:#096f68;
  background:#dffaf4;
  border-radius:50px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
}

.oph-lead,
.eh-lead,
.bkh-lead{
  position:relative;
  z-index:2;
  max-width:850px;
  color:#e7f1f6;
  font-size:18px !important;
}

/* BUTTONS */
.oph-btn,
.eh-btn,
.ah-btn,
.bkh-btn{
  display:inline-block;
  padding:14px 24px;
  border-radius:9px;
  font-size:15px;
  font-weight:800;
  line-height:1.4;
  text-decoration:none !important;
  transition:.2s ease;
  border:0;
}

.oph-btn:hover,
.eh-btn:hover,
.ah-btn:hover,
.bkh-btn:hover{
  transform:translateY(-2px);
}

.oph-btn-primary,
.oph-btn-convert,
.eh-btn-primary,
.eh-btn-convert,
.eh-btn-big,
.ah-btn,
.bkh-btn-primary,
.bkh-btn-aff,
.bkh-btn-convert{
  color:#fff !important;
  background:linear-gradient(135deg,var(--oph-orange),var(--oph-orange2));
  box-shadow:0 8px 19px rgba(255,116,0,.25);
}

.oph-btn-outline,
.eh-btn-outline,
.bkh-btn-light{
  color:#fff !important;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.32);
}

.oph-btn-white,
.eh-btn-white{
  color:var(--oph-navy) !important;
  background:#fff;
}

/* DISCLOSURE */
.oph-disclosure,
.eh-disclosure,
.ah-disclosure,
.bkh-disclosure{
  padding:13px 18px;
  margin:22px 0;
  border-left:4px solid var(--oph-gold);
  border-radius:8px;
  background:#fff8e7;
  font-size:13px;
}

/* QUICK ANSWER */
.oph-quick,
.eh-quick-answer,
.ah-answer,
.bkh-quick{
  display:flex;
  gap:18px;
  padding:24px;
  margin:28px 0;
  border:1px solid #cde4f4;
  border-left:5px solid var(--oph-blue);
  border-radius:13px;
  background:#eef8ff;
}

.oph-quick-icon,
.eh-quick-icon,
.bkh-quick-icon{
  flex:0 0 39px;
  width:39px;
  height:39px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--oph-blue);
  font-size:20px;
  font-weight:900;
}

/* CARDS / PICKS */
.oph-picks,
.eh-picks,
.ah-facts,
.bkh-picks{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:27px 0 38px;
}

.oph-card,
.oph-pick,
.eh-pick,
.ah-fact,
.ah-card,
.bkh-pick,
.bkh-card,
.bkh-global-card{
  padding:20px;
  border:1px solid var(--oph-border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 22px rgba(20,50,70,.06);
}

.oph-card-label,
.oph-pick-label,
.eh-pick-label,
.ah-card-label,
.bkh-pick-label,
.bkh-card-tag{
  display:inline-block;
  padding:5px 9px;
  border-radius:50px;
  color:#087667;
  background:#e5faf5;
  font-size:10px;
  font-weight:900;
}

/* PROVIDER / WINNER */
.oph-provider,
.eh-provider,
.ah-winner,
.bkh-provider{
  position:relative;
  padding:30px;
  margin:22px 0;
  overflow:hidden;
  border:1px solid var(--oph-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 9px 30px rgba(20,50,70,.07);
}

.oph-provider-featured,
.eh-provider-winner,
.bkh-featured{
  border:2px solid #0a9c87;
  box-shadow:0 14px 38px rgba(0,130,110,.11);
}

/* TABLES */
.oph-table-wrap,
.eh-table-wrap,
.ah-table-wrap,
.bkh-table-wrap{
  width:100%;
  margin:23px 0 35px;
  overflow-x:auto;
  border-radius:13px;
}

.oph-table,
.eh-table,
.ah-table,
.bkh-table{
  width:100%;
  min-width:760px;
  margin:0 !important;
  border-collapse:collapse;
  background:#fff;
}

.oph-table th,
.eh-table th,
.ah-table th,
.bkh-table th{
  padding:15px;
  color:#fff;
  background:var(--oph-navy);
  text-align:left;
  font-weight:800;
}

.oph-table td,
.eh-table td,
.ah-table td,
.bkh-table td{
  padding:15px;
  border-bottom:1px solid var(--oph-border);
  vertical-align:middle;
}

.oph-table tbody tr:nth-child(even) td,
.eh-table tbody tr:nth-child(even) td,
.ah-table tbody tr:nth-child(even) td,
.bkh-table tbody tr:nth-child(even) td{
  background:#f7fafc;
}

.oph-mini-btn,
.eh-mini-btn,
.ah-mini-btn,
.bkh-mini-btn{
  display:inline-block;
  padding:8px 13px;
  border-radius:7px;
  color:#fff !important;
  background:var(--oph-orange);
  text-decoration:none !important;
  font-size:13px;
  font-weight:800;
}

/* CHECK LIST */
.oph-checks,
.eh-checks,
.ah-checks,
.bkh-checks{
  margin:17px 0 !important;
  padding:0 !important;
  list-style:none !important;
}

.oph-checks li,
.eh-checks li,
.ah-checks li,
.bkh-checks li{
  position:relative;
  margin:9px 0;
  padding-left:28px;
  list-style:none !important;
}

.oph-checks li:before,
.eh-checks li:before,
.ah-checks li:before,
.bkh-checks li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--oph-green);
  font-weight:900;
}

/* GRID UTILITIES */
.oph-grid-2,
.eh-two-col,
.ah-grid,
.bkh-global-grid,
.bkh-buy-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.oph-grid-3,
.eh-security-grid,
.bkh-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.oph-grid-4,
.eh-feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

/* CTA SECTIONS */
.oph-cta,
.eh-mid-cta,
.eh-big-cta,
.eh-final,
.ah-callout,
.bkh-cta,
.bkh-final{
  padding:36px;
  margin:44px 0 25px;
  border-radius:20px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,138,0,.25),transparent 30%),
    linear-gradient(135deg,#06182d,#0d4568);
  box-shadow:0 15px 40px rgba(7,29,54,.15);
}

.oph-cta h2,
.eh-mid-cta h2,
.eh-big-cta h2,
.eh-final h2,
.ah-callout h2,
.bkh-cta h2,
.bkh-final h2{
  color:#fff !important;
  margin-top:0;
}

/* ALERT / WARNING */
.oph-warning,
.eh-warning,
.bkh-warning{
  padding:18px;
  margin:24px 0;
  border-left:5px solid var(--oph-red);
  border-radius:9px;
  background:#fff3f0;
}

/* STEPS */
.oph-step,
.eh-step,
.bkh-step{
  display:flex;
  gap:18px;
  padding:18px;
  margin:11px 0;
  border:1px solid var(--oph-border);
  border-radius:13px;
  background:#fff;
}

.oph-step > span,
.eh-step > span,
.bkh-step > span{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,var(--oph-blue),var(--oph-navy2));
  font-weight:900;
}

/* FAQ */
.oph-faq details,
.eh-faq details,
.ah-faq details,
.bkh-faq details{
  margin:10px 0;
  overflow:hidden;
  border:1px solid var(--oph-border);
  border-radius:11px;
  background:#fff;
}

.oph-faq summary,
.eh-faq summary,
.ah-faq summary,
.bkh-faq summary{
  padding:17px 19px;
  cursor:pointer;
  color:var(--oph-navy);
  font-weight:800;
  list-style:none;
}

.oph-faq summary::-webkit-details-marker,
.eh-faq summary::-webkit-details-marker,
.ah-faq summary::-webkit-details-marker,
.bkh-faq summary::-webkit-details-marker{
  display:none;
}

.oph-faq summary:after,
.eh-faq summary:after,
.bkh-faq summary:after{
  content:"+";
  float:right;
  color:var(--oph-orange);
  font-size:22px;
  line-height:1;
}

.oph-faq details[open] summary:after,
.eh-faq details[open] summary:after,
.bkh-faq details[open] summary:after{
  content:"−";
}

.oph-faq details p,
.eh-faq details p,
.ah-faq details p,
.bkh-faq details p{
  padding:0 19px 18px;
  margin:0;
  font-size:15px;
}

/* WOODMART COMPATIBILITY */
.single-post .entry-content .oph-article a.oph-btn,
.single-post .entry-content .oph-article a.oph-mini-btn,
.single-post .entry-content .ecom-hosting-pro a.eh-btn,
.single-post .entry-content .ecom-hosting-pro a.eh-mini-btn,
.single-post .entry-content .asia-hosting a.ah-btn,
.single-post .entry-content .asia-hosting a.ah-mini-btn,
.single-post .entry-content .bkh-wrap a.bkh-btn{
  text-decoration:none !important;
}

.single-post .entry-content .oph-article table,
.single-post .entry-content .ecom-hosting-pro table,
.single-post .entry-content .asia-hosting table,
.single-post .entry-content .bkh-wrap table{
  margin-bottom:0;
}

/* TABLET */
@media(max-width:900px){
  .oph-picks,
  .eh-picks,
  .ah-facts,
  .bkh-picks,
  .oph-grid-4,
  .eh-feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .oph-grid-3,
  .eh-security-grid,
  .bkh-benefits{
    grid-template-columns:repeat(2,1fr);
  }

  .oph-grid-2,
  .eh-two-col,
  .ah-grid,
  .bkh-global-grid,
  .bkh-buy-grid{
    grid-template-columns:1fr;
  }
}

/* MOBILE */
@media(max-width:700px){
  .oph-article h2,
  .ecom-hosting-pro h2,
  .asia-hosting h2,
  .bkh-wrap h2{
    font-size:25px;
  }

  .oph-hero,
  .eh-hero,
  .ah-hero,
  .bkh-hero{
    padding:31px 22px;
    border-radius:15px;
  }

  .oph-hero h1,
  .eh-hero h1,
  .ah-hero h1,
  .bkh-hero h1{
    font-size:31px;
  }

  .oph-btn,
  .eh-btn,
  .ah-btn,
  .bkh-btn{
    display:block;
    width:100%;
    margin-top:9px;
    text-align:center;
  }

  .oph-picks,
  .eh-picks,
  .ah-facts,
  .bkh-picks,
  .oph-grid-2,
  .oph-grid-3,
  .oph-grid-4,
  .eh-feature-grid,
  .eh-security-grid,
  .bkh-benefits{
    grid-template-columns:1fr;
  }

  .oph-provider,
  .eh-provider,
  .ah-winner,
  .bkh-provider{
    padding:21px;
  }

  .oph-quick,
  .eh-quick-answer,
  .bkh-quick{
    display:block;
  }

  .oph-quick-icon,
  .eh-quick-icon,
  .bkh-quick-icon{
    margin-bottom:12px;
  }

  .oph-cta,
  .eh-mid-cta,
  .eh-big-cta,
  .eh-final,
  .ah-callout,
  .bkh-cta,
  .bkh-final{
    padding:27px 21px;
  }
}