/* 420 Plugins – Creator Collabs
 * Scoped to .collab-page to avoid bleeding into other layouts.
 */

.collab-page {
  display: flex;
  justify-content: center;
  padding: 80px 16px 100px;
  background:
    /* soft green + cyan glows at the top corners */
    radial-gradient(circle at 0 0, rgba(140, 255, 173, 0.12), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(119, 212, 255, 0.12), transparent 55%),
    /* subtle green glow near the bottom */
    radial-gradient(circle at 50% 100%, rgba(140, 255, 173, 0.10), transparent 60%),
    /* NEW: fade from near-black into purple toward the bottom */
    linear-gradient(180deg, #050609 0%, #050609 40%, #241535 100%);
  color: #f5f5f5;
}

.collab-inner {
  width: 100%;
  max-width: var(--legal-max-width, 880px);
  border-radius: 28px;
  border: 1px solid rgba(212, 255, 231, 0.55); /* brighter border */
  background:
    linear-gradient(145deg, rgba(12, 16, 24, 0.96), rgba(5, 7, 11, 0.98)) padding-box,
    linear-gradient(135deg, rgba(152, 255, 184, 0.45), rgba(148, 203, 255, 0.35), rgba(130, 255, 200, 0.4)) border-box;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 40px 24px 36px;
}

/* Hero */

.collab-hero {
  margin-bottom: 32px;
}

.collab-kicker {
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(210, 230, 255, 0.85);
  margin-bottom: 6px;
}

.collab-hero-title {
  font-size: clamp(28px, 4vw, 34px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.collab-hero-intro {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(230, 238, 255, 0.85);
  max-width: 40rem;
}

/* Sections */

.collab-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.collab-section {
  border-radius: 20px;
  border: 1px solid rgba(196, 248, 222, 0.5); /* brighter card border */
  padding: 18px 16px 18px;
  background: radial-gradient(circle at 0 0, rgba(140, 255, 173, 0.12), transparent 55%) rgba(11, 15, 23, 0.96);
}

.collab-section:nth-of-type(2n) {
  background: radial-gradient(circle at 100% 0, rgba(148, 203, 255, 0.12), transparent 55%) rgba(8, 11, 17, 0.96);
}

.collab-section-title {
  font-size: 18px;
  margin: 0 0 8px;
}

.collab-section-intro {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(222, 235, 255, 0.9);
  margin: 0 0 12px;
}

/* Section 1 – examples */

.collab-examples {
  margin-top: 12px;
}

.collab-examples-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.collab-examples-list {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(230, 238, 255, 0.9);
}

.collab-examples-list li + li {
  margin-top: 3px;
}

.collab-example-name {
  font-size: 13px;
  color: rgba(210, 230, 255, 0.9);
}

.collab-example-name span {
  color: #9af2c7;
}

/* Section 2 – steps */

.collab-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.collab-step {
  border-radius: 14px;
  border: 1px solid rgba(196, 248, 222, 0.7); /* brighter step border */
  padding: 12px 12px 11px;
  background: linear-gradient(140deg, rgba(11, 18, 29, 0.98), rgba(5, 8, 12, 0.98));
}

/* Brighter green pill, high contrast */
.collab-step-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #41eb88, #22d86a);
  color: #04110b;
  margin-bottom: 6px;
  box-shadow:
    0 10px 22px rgba(46, 232, 112, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.collab-step-title {
  font-size: 15px;
  margin: 0 0 4px;
}

.collab-step-body {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(220, 233, 255, 0.9);
}

/* Section 3 – benefits */

.collab-benefits-list {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0;
  font-size: 14px;
  color: rgba(230, 238, 255, 0.9);
}

.collab-benefits-list li + li {
  margin-top: 4px;
}

/* Section 4 – who */

.collab-who-list {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(230, 238, 255, 0.9);
}

.collab-who-list li + li {
  margin-top: 3px;
}

.collab-who-note {
  font-size: 13px;
  color: rgba(205, 223, 255, 0.9);
}

/* Section 5 – form */

.collab-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collab-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collab-field label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(232, 241, 255, 0.96);
}

.field-required {
  color: #ffb3c1;
}

.field-hint {
  font-size: 11px;
  color: rgba(195, 214, 245, 0.9);
}

.collab-field input,
.collab-field textarea {
  width: 100%;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.25); /* darker, higher contrast */
  padding: 7px 9px;
  background: #ffffff;                      /* WHITE fields */
  color: #111827;                           /* dark text */
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12); /* subtle inner depth */
}

.collab-field textarea {
  resize: vertical;
  min-height: 70px;
}

/* Dark grey placeholders so they pop against white */
.collab-field input::placeholder,
.collab-field textarea::placeholder {
  color: rgba(107, 114, 128, 0.9); /* similar to cookies banner tone */
}

/* Keep the 420 green focus ring */
.collab-field input:focus,
.collab-field textarea:focus {
  outline: none;
  border-color: rgba(74, 222, 128, 0.95);       /* brighter green */
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.65),
    0 0 0 4px rgba(22, 163, 74, 0.25);         /* soft glow, not too huge */
}

.collab-form-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* Brighter, cookie-style primary pill */
.collab-submit-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(180deg, #41eb88, #22d86a);
  color: #04110b;
  box-shadow:
    0 10px 22px rgba(46, 232, 112, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    filter 0.12s ease-out,
    background 0.12s ease-out;
}

.collab-submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  background: linear-gradient(180deg, #45f090, #2de077);
  box-shadow:
    0 14px 30px rgba(46, 232, 112, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.collab-submit-btn:active {
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(46, 232, 112, 0.24),
    0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.inline-loader {
  font-size: 12px;
  color: rgba(205, 223, 255, 0.9);
}

.collab-form-success,
.collab-form-error {
  font-size: 12px;
  margin-top: 10px;
}

.collab-form-success {
  color: #9af2c7;
}

.collab-form-error {
  color: #ffb3c1;
}

.collab-form-closing {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(200, 217, 244, 0.9);
}

/* Section 6 – referral */

.collab-section-referral .collab-section-intro {
  margin-bottom: 10px;
}

.collab-referral-box {
  border-radius: 14px;
  border: 1px dashed rgba(196, 248, 222, 0.8); /* brighter dashed border */
  padding: 10px 10px 9px;
  background: radial-gradient(circle at 0 0, rgba(152, 255, 184, 0.08), transparent 60%) rgba(7, 10, 16, 0.98);
}

.collab-referral-label {
  font-size: 12px;
  margin-bottom: 4px;
  color: rgba(215, 231, 255, 0.92);
}

.collab-referral-snippet {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collab-referral-text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(225, 237, 255, 0.9);
}

/* Make the copy pill a bit brighter too */
.collab-referral-copy-btn {
  align-self: flex-start;
  position: relative;              /* anchor for tooltip */
  appearance: none;
  border-radius: 999px;
  border: 1px solid rgba(152, 255, 184, 0.8);
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(5, 7, 16, 0.7);
  color: #e9f9ff;
  cursor: pointer;
  transition:
    background 0.12s ease-out,
    color 0.12s ease-out,
    box-shadow 0.12s ease-out;
}

.collab-referral-copy-btn:hover {
  background: linear-gradient(180deg, #41eb88, #22d86a);
  color: #04110b;
  box-shadow:
    0 10px 22px rgba(46, 232, 112, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}

/* Tooltip-style "Copied" pill */
.collab-referral-copied {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(8px, -50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(4, 17, 11, 0.96);
  border: 1px solid rgba(152, 255, 184, 0.9);
  font-size: 11px;
  color: #9af2c7;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    0 10px 22px rgba(46, 232, 112, 0.28),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* Responsive tweaks */

@media (min-width: 720px) {
  .collab-inner {
    padding: 42px 30px 36px;
  }

  .collab-section {
    padding: 20px 18px 20px;
  }

  .collab-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .collab-referral-snippet {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .collab-referral-text {
    max-width: 80%;
  }
}

/* Creator Collabs: hide legacy theme header/footer just on this template */
body.page-template-creator-collabs #header,
body.page-template-creator-collabs #footer,
body.page-template-creator-collabs #page > hr {
  display: none;
}

/* Remove any extra outer margins from the legacy wrapper */
body.page-template-creator-collabs #page {
  margin: 0;
}

/* Small top nav with home link */
.collab-top-nav {
  max-width: var(--legal-max-width, 880px);
  margin: 18px auto 4px;
  padding: 0 16px;
  display: flex;
  justify-content: flex-start;
}

/* Pill-style back link – brighter, single arrow (from markup only) */
.collab-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  background: linear-gradient(180deg, #41eb88, #22d86a);
  color: #04110b;
  box-shadow:
    0 12px 26px rgba(46, 232, 112, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.06) inset;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    filter 0.12s ease-out,
    background 0.12s ease-out;
}

/* (no ::before – arrow only from text) */

.collab-back-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  background: linear-gradient(180deg, #45f090, #2de077);
  box-shadow:
    0 16px 32px rgba(46, 232, 112, 0.34),
    0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.collab-back-link:active {
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(46, 232, 112, 0.24),
    0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

/* Slight tweak for mobile so it doesn’t feel cramped */
@media (max-width: 640px) {
  .collab-top-nav {
    margin-top: 12px;
    padding: 0 16px;
  }
}