/* === ActionDisplay Styles (scoped to act-*) === */

.action-box {
  padding: 4px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* === Generic container for each action === */
.act-row {
  margin-bottom: 8px;  
  border-radius: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

/* === Shared styles for block layout === */
.act-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.act-text {
  font-size: 14px;
  color: #333;
}

.act-prompt {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  padding: 6px 6px;
}

/* === Form Inputs === */
.act-input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%
}

.act-input:focus {
  border-color: #333;
  outline: none;
}

/* === Question options === */
.act-option-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

/* === Submit Button === */
.act-button {
  padding: 8px 16px;
  background-color: #111;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  display: block;
  margin: 8px auto 8px auto; /* top margin + center horizontally */
}


.act-button:hover {
  background-color: #444;
}

/* === Donation-specific === */
.act-donation-bar-wrap {
  margin-top: 6px;
}

.act-donation-bar-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.act-donation-bar-bg {
  width: 100%;
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.act-donation-bar-fill {
  height: 100%;
  background-color: #d62828;
  width: 0%;
  transition: width 0.3s ease;
}

/* === Volunteer-specific === */
.act-volunteer-note {
  font-size: 13px;
  color: #777;
}

/* === Petition-specific === */
.act-link {
  color: #0a58ca;
  font-weight: 500;
  text-decoration: underline;
}

.act-link:hover {
  text-decoration: none;
}
.act-no-actions {
  background-color: #111;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
  text-align: left;
  color: #ccc;
}

.act-no-actions h3 {
  margin-top: 0;
  color: #fff;
  font-size: 1.2rem;
}

.act-no-actions p {
  margin: 8px 0 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.act-header {
  font-size: 1rem;
  font-weight: 600;
  color: #085ad4;
  margin-bottom: 12px;
  text-align: center;
  padding-left: 4px;
}
.act-option-list {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 4px;
}

.act-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  line-height: 1.2;
  transition: background-color 0.2s;
}

.act-option-row:hover {
  background-color: #f8f8f8;
}

.act-option-row input {
  margin: 0;
}
.act-petition .act-prompt {
  font-size: 15px;
  color: rgb(48, 47, 47);
  margin-bottom: 8px;
}

.act-petition-link-wrap {
  margin-top: 6px;
  text-align: center;
  word-break: break-word;
}

.act-petition-link {
  display: inline-block;
  font-size: 16px;
  color: #07b9f5;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

.act-petition-link:hover {
  color: #70d3ff;
}
/* Create Event action block */
.act-createevent {
  border-top: 1px solid #e0e0e0;
  padding: 14px;
  margin-top: 12px;
}

.act-createevent .act-prompt {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #222;
  line-height: 1.4;
}

.act-createevent .act-submit {
  text-align: center;
}

.act-createevent .act-submit .act-button {
  padding: 8px 18px;
  background-color: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.act-createevent .act-submit .act-button:hover {
  background-color: #000;
}
.form-help-text {
  font-size: 0.85em;
  color: #777;
  margin-top: 4px;
}
.act-user-response {
  font-size: 0.9em;
  color: #4682b4;
  margin-bottom: 8px;
  padding: 4px 8px;
  background-color: #f0f8ff;
  border-left: 3px solid #4682b4;
  border-radius: 4px;
}
.gift-chip{
    display:inline-block;
    padding:2px 6px;
    font-size:11px;
    border-radius:999px;
    border:1px solid #f59e0b;
    color:#92400e;
    background:#fffbeb;
    margin-right:6px;
    vertical-align:middle;
  }
  .gift-line strong{ font-weight:700; }
  .gift-note{ color:#334155; font-style:italic; }
  .gift-dm{ font-size:12px; text-decoration:underline; color:#2563eb; }
  .donate-card{border:1px solid #e5e7eb;border-radius:12px;padding:8px;background:#fff}
  .donate-header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
  .donate-icon{width:28px;height:28px}
  .donate-title .h{font-weight:700;font-size:15px;line-height:1.2}
  .donate-title .sub{color:#64748b;font-size:12px}
  .donate-help{font-size:12px;text-decoration:underline}
  .donate-options{display:grid;gap:12px}
  .donate-option{padding:6px}
  .donate-option-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
  .donate-option-icon{width:26px;height:26px;margin-top:1px}
  .donate-option-title{font-weight:600}
  .donate-option-sub{color:#64748b;font-size:12px}
  .donate-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .donate-form .input{padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px}
  .donate-form .donate-amount{width:140px}
  .donate-form .donate-note{flex:1;min-width:220px}
  .donate-msg{font-size:12px;margin-left:4px}
  .donate-msg.ok{color:#15803d}
  .donate-msg.err{color:#b91c1c}
  .donate-goal{margin-top:10px}
  .donate-goal-top{display:flex;justify-content:space-between;font-size:12px;color:#334155;margin-bottom:4px}
  .donate-bar{height:8px;background:#f1f5f9;border-radius:999px;overflow:hidden}
  .donate-bar-fill{height:100%;width:0%;background:#0ea5e9;transition:width .35s ease;border-radius:999px}
  .donate-external .act-button.ghost{background:#fff;border:1px solid #cbd5e1;color:#0f172a}
  .donate-footnote{margin-top:10px;color:#64748b;font-size:12px}
    .act-donation-counter{
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:#334155; /* slate-700 */
    margin-bottom:6px;
  }
  .act-donation-counter.over .count{ font-weight:600; color:#166534; } /* green-800 */

  .pill-over{
    font-size:12px; line-height:1;
    border:1px solid #86efac;       /* green-300 */
    background:#ecfdf5;              /* green-50  */
    color:#166534;                   /* green-800 */
    border-radius:999px; padding:3px 8px;
  }

  .act-donation-bar-bg{
    position:relative; width:100%; height:10px;
    border-radius:999px; background:#eef2f7; /* neutral */
    overflow:hidden;
  }
  .act-donation-bar-fill{
    height:100%; width:0%;
    background:#2563eb;              /* blue-600 */
    transition:width .35s ease;
  }
  .act-donation-bar-fill.over{
    background:#16a34a;              /* green-600 when over goal */
  }
  /* ==== Go Live card ==== */
.act-go-live .go-live-card{
  display:flex; align-items:center;
  padding:6px 8px; border-radius:10px;
  background: linear-gradient(180deg,#0e1218,#0b0f14);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

@media (min-width:768px){
  .act-go-live .go-live-card{ padding:14px 16px }
}

.act-go-live .gl-icon-wrap{
  position:relative; 
  display:grid; place-items:center;   
}
.act-go-live .gl-icon{ width:66px; display:block; }

.act-go-live .gl-ping{
  position:absolute; inset:-4px; border-radius:14px;
  animation: glPing 1.8s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(255,75,75,.55);
}
@keyframes glPing{
  0%   { box-shadow: 0 0 0 0   rgba(255,75,75,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(255,75,75,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,75,75,0); }
}
@media (prefers-reduced-motion: reduce){
  .act-go-live .gl-ping{ animation: none; }
}

.act-go-live .gl-body{ flex:1; min-width:0 }
.act-go-live .gl-title{ font-weight:800; letter-spacing:.2px; }
.act-go-live .gl-desc{ font-size:15px; color:#edf1f5; opacity:.95; margin-top:2px; }

.act-go-live .gl-cta{ display:flex; align-items:center }
.act-go-live .gl-btn{
  background: linear-gradient(180deg,#26c567,#1ea756);
  border:1px solid #178a46; color:#0b1a10;
  border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer;
}
.act-go-live .gl-btn:active{ transform: translateY(0.5px); }

.act-groupLink{padding:4px 4px;background:#fff}
.act-groupLink-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.act-groupLink-title{font-weight:700}
.act-groupLink-save{border:0;border-radius:10px;padding:8px 12px;background:#111;color:#fff;opacity:.6}
.act-groupLink-save.enabled{opacity:1}
.act-groupLink-list{display:flex;flex-wrap:wrap;gap:8px}
.act-groupChip{display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:12px;padding:6px 10px;background:#f9fafb}
.act-groupChip img{width:32px;height:32px;border-radius:999px;object-fit:cover}
.act-groupChip.is-on{border-color:#111;background:#eef2ff}
.act-groupLink-msg{margin-top:8px;font-size:12px;color:#444}
/* Make chips positionable */
.act-groupChip{
  position: relative;
  overflow: hidden;
}

/* Check badge (hidden by default) */
.act-groupChip .act-groupChip-check{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: rgba(16,185,129,0.95); /* green */
  box-shadow: 0 2px 10px rgba(16,185,129,0.35);
}

/* Selected state */
.act-groupChip.is-on{
  border-color: rgba(16,185,129,0.9);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.25);
  background: rgba(16,185,129,0.10);
}

/* Show the check when selected */
.act-groupChip.is-on .act-groupChip-check{
  display: inline-flex;
}

/* Optional: slightly dim the logo when selected so the check pops */
.act-groupChip.is-on img{
  filter: saturate(1.1) contrast(1.05);
}