/* Section container */
.action-panel {
/*  margin-top: 4rem;*/
  padding: 4rem 1.5rem;

  display: flex;
  justify-content: center;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.55)
    ),
    url("../images/actions-banner.png"); /* replace with your image */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.action-panel-inner {
  display: flex;
  flex-direction: column;      /* ⬅️ stack caption above buttons */
  align-items: center;         /* ⬅️ center text + buttons */
  gap: 0.9rem;                 /* space between caption and buttons */

  padding: 1.4rem 2rem;
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.16);
}

.btn-action-primary {
  padding: 0.65rem 1.6rem;

  border-radius: 999px;
  background: #fff;
  color: #000;

  font-weight: 500;
  text-decoration: none;

  border: 1px solid #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-action-primary:hover {
  background: transparent;
  color: #fff;
}


.btn-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.6rem 1.2rem;
  border-radius: 12px;

  background: transparent;
  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  font-weight: 500;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.btn-action-secondary i {
  font-size: 1.1rem;
}

.btn-action-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}


.action-panel-caption {
  margin: 0 0 0.75rem;
  text-align: center;

  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;

  color: rgba(255, 255, 255, 0.7);
}

.action-panel-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}


/* ACTION PANEL LAYOUT */
.action-panel {
  padding: 4rem 1.5rem;
  display: flex;
  justify-content: center;
}

.action-panel-inner {
  max-width: 960px;
  width: 100%;
  text-align: center;
}

.action-panel-caption {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* BUTTON ROW */
.action-panel-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;          /* desktop: single row */
}

/* Base button styles */
.btn-action-primary,
.btn-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;        /* keep label on one line on desktop */
}

/* Make text wrap nicely on smaller screens if needed */
@media (max-width: 768px) {
  .action-panel-actions {
    flex-direction: column;   /* 🔹 stack vertically */
    align-items: stretch;     /* full width */
  }

  .btn-action-primary,
  .btn-action-secondary {
    width: 100%;              /* each button full row */
    white-space: normal;      /* allow wrapping on mobile */
    text-align: center;
  }
}













/* Modal panel */
.wechat-modal {
  background: rgba(22, 20, 24, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 1rem;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
}

/* QR Image */
.wechat-qr-img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 18px rgba(255,255,255,0.15);
}

/* White close button */
.btn-close-white {
  filter: invert(1) brightness(2);
}