/*
 * SBT styling for plugin-owned buttons that the migration deliberately leaves
 * in place: WPComplete progress buttons and any legacy OptimizePress image
 * buttons. Loaded by the child theme so it is independent of the shortcode shim.
 */

:root{
  --sbt-primary:#0088CC; --sbt-cyan:#00C2D7; --sbt-primary-dark:#00669B;
  --sbt-ok:#15A05B; --sbt-ok-dark:#0E7E47;
  --sbt-grad:linear-gradient(135deg,#0088CC 0%,#00C2D7 100%);
  --sbt-grad-ok:linear-gradient(135deg,#17A862 0%,#0E9C74 100%);
}

/* ============================================================
   WPComplete - "Mark as complete" progress buttons
   States: .wpc-button-complete = not done yet
           .wpc-completed / .wpc-button-completed = done
   ============================================================ */
.sbt-article .wpc-button,
.wpc-button{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:.5em;
  width:fit-content;
  max-width:100%;
  margin:6px 0 14px;
  padding:12px 26px !important;
  min-height:44px;
  border:0 !important;
  border-radius:11px !important;
  background-image:var(--sbt-grad) !important;
  background-color:#0088CC !important;
  color:#fff !important;
  font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:center;
  text-decoration:none !important;
  text-shadow:none !important;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,136,204,.24) !important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease !important;
  -webkit-appearance:none;appearance:none;
}
.sbt-article .wpc-button:before,
.wpc-button:before{
  content:"";
  width:16px;height:16px;
  flex:0 0 16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.9;
}
.wpc-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,136,204,.32) !important;
  filter:brightness(1.04);
  color:#fff !important;
}
.wpc-button:active{transform:translateY(0);}
.wpc-button:focus-visible{outline:3px solid var(--sbt-primary);outline-offset:3px;}

/* completed state: green, checkmark stays, subtle */
.wpc-completed,
.wpc-button-completed,
.wpc-button.wpc-completed{
  background-image:var(--sbt-grad-ok) !important;
  background-color:var(--sbt-ok) !important;
  box-shadow:0 8px 20px rgba(21,160,91,.22) !important;
  cursor:default;
}
.wpc-completed:hover,
.wpc-button-completed:hover{transform:none;filter:none;box-shadow:0 8px 20px rgba(21,160,91,.22) !important;}

/* WPComplete progress bars, if shown */
.wpc-progress,
.wpc-progress-bar{
  background:#EAF4FB !important;
  border-radius:99px !important;
  overflow:hidden;
  height:10px !important;
}
.wpc-progress .wpc-progress-inner,
.wpc-progress-bar > span{
  background-image:var(--sbt-grad) !important;
  border-radius:99px !important;
}

/* ============================================================
   Legacy OptimizePress image buttons that were kept as-is
   (e.g. the "Aged Domain Table" glossy blue button). Tame the
   dated chrome so it reads as a modern button but still works.
   ============================================================ */
.sbt-article a > img[src*="/button/"],
.sbt-article a > img[src*="aged"],
.sbt-article a > img[src$="-table.png"]{
  border-radius:11px;
  box-shadow:0 8px 20px rgba(0,136,204,.20);
  transition:transform .2s ease,box-shadow .2s ease;
  max-width:100%;height:auto;
}
.sbt-article a:hover > img[src*="/button/"],
.sbt-article a:hover > img[src*="aged"]{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,136,204,.28);
}

@media (max-width:600px){
  .wpc-button{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .wpc-button,.wpc-button:hover{transition:none;transform:none;}
}