/* ==========================================================================
   Unlock Page (go.php) — Sub2Unlock.io style redesign
   Scoped entirely under .s2u-unlock-* classes so it never touches the
   shared .hero-card / .task-btn / .unlock-wrap styles used on the
   homepage or create-link page.
   ========================================================================== */

.s2u-unlock-page {
  background: #ffffff;
  min-height: calc(100vh - 160px);
  padding: 40px 16px 60px;
  display: flex;
  justify-content: center;
}

.s2u-unlock-card {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(20, 20, 43, 0.08), 0 1px 4px rgba(20, 20, 43, 0.05);
  border: 1px solid #f0f1f6;
  padding: 32px 24px 28px;
  animation: s2uFadeIn 0.5s ease both;
}

@keyframes s2uFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.s2u-unlock-head {
  text-align: center;
  margin-bottom: 22px;
}

.s2u-unlock-head h1 {
  font-family: 'Sora', Inter, Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #10152b;
  margin: 0 0 6px;
}

.s2u-unlock-head p {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0;
}

/* ---------- Ad slots ----------
   Ad network code (banners, XM/Adsterra/Monetag snippets, etc.) is raw
   HTML pasted by the admin and often ships with its own fixed pixel
   widths (e.g. 728x90) or inline positioning. Without this wrapper that
   markup can force the whole page wider than the device viewport, which
   makes mobile browsers shrink-to-fit the entire layout — the ad ends up
   visually overlapping the card above/below it and the page looks
   "cut in half" with dead space on the right. This wrapper contains and
   normalizes whatever gets pasted in. */
.s2u-ad-slot {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  margin: 0 0 22px;
  text-align: center;
}

.s2u-ad-slot:empty {
  display: none;
  margin: 0;
}

.s2u-ad-slot img,
.s2u-ad-slot iframe,
.s2u-ad-slot ins,
.s2u-ad-slot video {
  display: block;
  margin: 0 auto;
  max-width: 100% !important;
  width: auto;
  height: auto;
}

.s2u-ad-slot table,
.s2u-ad-slot div,
.s2u-ad-slot a {
  max-width: 100% !important;
}

.s2u-ad-slot iframe {
  border: 0;
}

/* ---------- Task buttons ---------- */

.s2u-task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.s2u-task-btn {
  position: relative;
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  cursor: pointer;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.s2u-task-btn:hover:not(.is-done):not(.is-pending) {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.s2u-task-btn:active:not(.is-done):not(.is-pending) {
  transform: scale(0.99);
}

.s2u-task-btn .s2u-task-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-right: 14px;
}

.s2u-task-btn .s2u-task-label {
  flex: 1 1 auto;
  text-align: left;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.s2u-task-btn .s2u-task-arrow {
  flex: 0 0 auto;
  font-size: 1rem;
  margin-left: 12px;
  opacity: 0.9;
  transition: transform 0.18s ease;
}

.s2u-task-btn:hover:not(.is-done):not(.is-pending) .s2u-task-arrow {
  transform: translateX(3px);
}

/* Pending / verifying state */
.s2u-task-btn.is-pending {
  cursor: default;
  filter: brightness(0.96);
}

.s2u-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  animation: s2uSpin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes s2uSpin {
  to { transform: rotate(360deg); }
}

/* Done state */
.s2u-task-btn.is-done {
  background: #22c55e !important;
  cursor: default;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.s2u-task-btn.is-done .s2u-task-label {
  text-align: center;
}

/* ---------- Progress ---------- */

.s2u-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 8px;
}

.s2u-progress-track {
  width: 100%;
  height: 8px;
  background: #eef0f6;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 22px;
}

.s2u-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 20px;
  transition: width 0.45s ease;
}

/* ---------- Final unlock button ---------- */

.s2u-unlock-final {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 10px;
  background: #e2e5ec;
  color: #8a8f9c;
  font-family: Inter, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  cursor: not-allowed;
  transition: background 0.3s ease, color 0.3s ease, transform 0.18s ease;
}

.s2u-unlock-final.is-active {
  background: #d3f4e0;
  color: #16a34a;
  justify-content: space-between;
  cursor: pointer;
}

.s2u-unlock-final.is-active .s2u-final-text {
  flex: 1;
  text-align: center;
}

.s2u-unlock-final.is-active i {
  font-size: 1.15rem;
  flex: 0 0 auto;
}

.s2u-unlock-final.is-active:hover {
  transform: scale(1.015);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.22);
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .s2u-unlock-card { padding: 26px 16px 22px; border-radius: 16px; }
  .s2u-unlock-head h1 { font-size: 1.4rem; }
  .s2u-task-btn { height: 56px; font-size: 0.92rem; padding: 0 14px; }
  .s2u-task-btn .s2u-task-icon { margin-right: 10px; }
}

@media (min-width: 768px) {
  .s2u-unlock-card { max-width: 520px; padding: 38px 32px 32px; }
}