/* Container card */
.gwy-card{
  max-width: 420px;
  margin: 24px auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  overflow:hidden;
  border:1px solid #eee;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#222;
}
.gwy-card.-secret{ max-width: 720px; }

/* Top metrics bar */
.gwy-metrics{
  display:flex;
  gap:0;
  border-bottom:1px solid #eee;
}
.gwy-metric{
  flex:1;
  text-align:center;
  padding:12px 8px;
  position:relative;
}
.gwy-metric + .gwy-metric { border-left:1px solid #eee; }
.gwy-metric-number{ font-weight:700; font-size:20px; line-height:1.2; }
.gwy-metric-label{ font-size:12px; color:#666; margin-top:2px; }
.gwy-metrics.-compact .gwy-metric-number{ font-size:18px; }

/* Hero media (featured image / custom image) */
.gwy-hero-media{
  width:100%;
  height:180px;
  overflow:hidden;
  border-bottom:1px solid #f1f1f1;
}
.gwy-hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.gwy-hero-media.-compact{ height:200px; }

/* Optional old placeholder block */
.gwy-hero-image{
  height:140px; background:#e7f1f0; border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}

/* Title & blurb */
.gwy-hero{
  padding:16px 16px 8px;
  border-bottom:1px solid #f1f1f1;
}
.gwy-hero.slim{ padding-top:12px; }
.gwy-hero-title{ font-size:20px; font-weight:700; margin-bottom:6px; }
.gwy-hero-sub{ color:#666; font-size:13px; }

/* Actions list */
.gwy-actions{ padding:8px; }
.gwy-action{
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.gwy-action:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); border-color:#e6e6e6; }

.gwy-action.-with-body{ display:block; }
.gwy-action-head{ display:flex; align-items:center; justify-content:space-between; }

.gwy-action-left{ display:flex; align-items:center; gap:10px; }
.gwy-action-title{ font-weight:600; font-size:14px; }

.gwy-action-right .gwy-pill,
.gwy-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  background:#f5f7fb;
  border:1px solid #e7ebf5;
}
.gwy-badge{ background:#f6fbf5; border-color:#e3f2e0; }

.gwy-action-body{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #eee;
  width:100%;
}

/* Secret-code media (panel image) */
.gwy-secret-media{
  width:100%;
  height:220px;
  overflow:hidden;
  border-radius:10px;
  margin-bottom:10px;
}
.gwy-secret-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Panels (standalone secret code) */
.gwy-panel{ margin:12px; border:1px solid #eee; border-radius:10px; overflow:hidden; }
.gwy-panel-head{
  display:flex; align-items:center; gap:8px;
  background:#f8fafc; border-bottom:1px solid #eee; padding:10px 12px; font-weight:700;
}
.gwy-panel-body{ padding:12px; }
.gwy-help{ color:#666; font-size:13px; margin:10px 0 0; }

/* Inputs & buttons */
.gwy-secret-form{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.gwy-input{
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:8px;
  font-size:14px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.gwy-input:focus{ border-color:#88b; box-shadow:0 0 0 3px rgba(120,150,255,.15); }

.gwy-input-row{ display:flex; gap:8px; }
.gwy-input-label{ display:block; font-size:12px; color:#666; margin:2px 0 4px; }

.gwy-btn{
  padding:10px 14px; border:none; border-radius:8px; font-weight:700; font-size:14px;
  background:#1f7aec; color:#fff; cursor:pointer; transition:filter .15s ease;
}
.gwy-btn:hover{ filter:brightness(.95); }

.gwy-linkbtn{
  padding:8px 10px; border:none; background:transparent; color:#777; cursor:pointer; font-size:13px;
}

.gwy-msg{ margin-top:8px; font-size:13px; }
.gwy-msg.success{ color:#157347; }
.gwy-msg.error{ color:#b42318; }

/* Footer */
.gwy-footer{
  padding:12px; border-top:1px solid #f1f1f1; text-align:center; background:#fafafa;
}
.gwy-link{ color:#666; text-decoration:underline; }

/* Minimal icon placeholders (swap with SVGs later) */
.gwy-icon{
  width:18px; height:18px; display:inline-block; background:#dbe3ef; border-radius:4px;
}
.gwy-icon-key::after{ content:"🔑"; display:block; text-align:center; }
.gwy-icon-agent::after{ content:"🕵️"; display:block; text-align:center; }
.gwy-icon-facebook::after{ content:"f"; font: 600 12px/18px system-ui; display:block; text-align:center; }
.gwy-icon-x::after{ content:"x"; font: 700 12px/18px system-ui; display:block; text-align:center; }
.gwy-icon-instagram::after{ content:"◐"; font: 700 12px/18px system-ui; display:block; text-align:center; }
.gwy-icon-youtube::after{ content:"▶"; font: 700 12px/18px system-ui; display:block; text-align:center; }
.gwy-icon-website::after{ content:"⎈"; font: 700 12px/18px system-ui; display:block; text-align:center; }
.gwy-icon-newsletter::after{ content:"✉"; font: 700 12px/18px system-ui; display:block; text-align:center; }

/* Responsive */
@media (max-width: 420px){
  .gwy-secret-form{ flex-direction:column; align-items:stretch; }
  .gwy-input-row{ flex-direction:column; }
  .gwy-btn, .gwy-linkbtn{ width:100%; }
}

/* === UX FIXES (append-only) ======================================= */

/* Ensure action rows can wrap, so messages can drop below the button */
.gwy-action{ flex-wrap: wrap; }

/* Make messages in a flex .gwy-action flow onto their own row */
.gwy-action .gwy-msg{
  flex-basis: 100%;           /* force onto new line under the row */
  order: 2;                   /* show after the main row content */
  margin-top: 8px;
  min-height: 1em;            /* reserve space to avoid layout shift */
}

/* Button/link hardening: prevent double-clicks and show disabled state */
.gwy-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.gwy-btn[disabled],
.gwy-action.is-loading .gwy-btn{
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;       /* anchors won't be clickable while loading */
}

/* Optional: loading affordance on the action row */
.gwy-action.is-loading{
  position: relative;
}
.gwy-action.is-loading::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.50);
  border-radius: 10px;
  pointer-events: none;
}

/* Style the generic error block used by shortcodes when campaign is invalid */
.gwy-error{
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid #f3d5d7;
  background: #fff6f6;
  color: #b42318;
  border-radius: 8px;
  font-size: 14px;
}

/* Focus visibility for keyboard users */
.gwy-btn:focus-visible,
.gwy-linkbtn:focus-visible,
.gwy-input:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,122,236,.25);
}

/* Subtle success/error glyphs */
.gwy-msg.success::before { content:"✓ "; font-weight:700; }
.gwy-msg.error::before   { content:"⨯ "; font-weight:700; }

/* Extra mobile nicety */
@media (max-width: 420px){
  .gwy-action{ flex-wrap: wrap; }  /* already set, but reaffirm on small screens */
  .gwy-action .gwy-msg{ order: 3; }/* put message last on mobile */
}