/* =========================================================
   Registration / enrollment flow
   ---------------------------------------------------------
   Matches the app's dark surfaces and terracotta accent — the
   same visual language as the Edit Profile modal, so signup
   doesn't feel like a different product from the site the
   student lands in afterward.

   Variables fall back to literals because this page can render
   outside the app shell (a plain WordPress page), where the
   theme's :root vars may not be in scope.
   ========================================================= */

.rc-enroll-wrap{
  --rc-surface:   var(--color-bg-alt, #26251f);
  --rc-line:      rgba(255,255,255,.09);
  --rc-text:      var(--color-text, #e8e6dc);
  --rc-heading:   var(--color-heading, #f5f4ef);
  --rc-muted:     var(--color-text-muted, #a39e93);
  --rc-primary:   var(--color-primary, #cc785c);
  --rc-discord:   #5865F2;

  max-width: 520px;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--rc-text);
}

/* ---------------- Step indicator ---------------- */

.rc-steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.rc-step{ display: flex; align-items: center; gap: 7px; }
.rc-step-dot{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--rc-line);
  background: var(--rc-surface);
  color: var(--rc-muted);
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rc-step-label{
  font-size: .72rem;
  font-weight: 600;
  color: var(--rc-muted);
  white-space: nowrap;
}
.rc-step-line{ width: 26px; height: 1px; background: var(--rc-line); flex-shrink: 0; }

.rc-step.is-current .rc-step-dot{
  background: var(--rc-primary);
  border-color: var(--rc-primary);
  color: #fff;
}
.rc-step.is-current .rc-step-label{ color: var(--rc-heading); }
.rc-step.is-done .rc-step-dot{
  background: rgba(111,168,125,.16);
  border-color: #6fa87d;
  color: #6fa87d;
}
.rc-step.is-done .rc-step-label{ color: var(--rc-text); }

/* ---------------- Cards ---------------- */

.rc-card{
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: 14px;
  padding: 26px 24px;
}
.rc-card-head{ margin-bottom: 18px; }
.rc-card-head h3{
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rc-heading);
}
.rc-card-head p{
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--rc-muted);
}

.rc-card-discord{ text-align: center; }
.rc-card-discord .rc-card-head{ margin-bottom: 20px; }

.rc-discord-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(88,101,242,.14);
  border: 1px solid rgba(88,101,242,.3);
  color: var(--rc-discord);
}
.rc-discord-badge .rc-discord-glyph{ width: 30px; height: 30px; }

.rc-fineprint{
  margin: 14px 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--rc-muted);
}

/* ---------------- Success ---------------- */

.rc-card-success{ text-align: center; }
.rc-success-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(111,168,125,.15);
  border: 1px solid rgba(111,168,125,.4);
  color: #6fa87d;
}
.rc-success-icon svg{ width: 26px; height: 26px; }
.rc-card-success h3{ margin: 0 0 6px; font-size: 1.2rem; color: var(--rc-heading); }
.rc-card-success p{ margin: 0 0 18px; color: var(--rc-muted); font-size: .88rem; }

/* ---------------- Verified banner ---------------- */

.rc-verified{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 10px 13px;
  border-radius: 9px;
  background: rgba(111,168,125,.1);
  border: 1px solid rgba(111,168,125,.3);
  color: var(--rc-text);
  font-size: .82rem;
}
.rc-verified svg{ width: 16px; height: 16px; color: #6fa87d; flex-shrink: 0; }
.rc-verified strong{ color: var(--rc-heading); }

/* ---------------- Notices ---------------- */

.rc-notice{
  padding: 11px 14px;
  border-radius: 9px;
  margin-bottom: 16px;
  font-size: .83rem;
  line-height: 1.5;
}
.rc-notice-error{
  background: rgba(224,75,75,.1);
  border: 1px solid rgba(224,75,75,.35);
  color: #f0a6a6;
}

/* ---------------- Form fields ---------------- */

.rc-form{ display: flex; flex-direction: column; gap: 15px; }

.rc-field{ display: flex; flex-direction: column; gap: 5px; }
.rc-field-label{
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rc-field-hint{
  font-size: .73rem;
  line-height: 1.45;
  color: var(--rc-muted);
  margin-top: -2px;
}

.rc-field input[type="text"],
.rc-field input[type="email"],
.rc-field input[type="date"],
.rc-field select{
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--rc-line);
  border-radius: 9px;
  color: var(--rc-text);
  font-size: .9rem;
  font-family: inherit;
  padding: 11px 13px;
  transition: border-color .15s ease, background .15s ease;
}
.rc-field input:focus,
.rc-field select:focus{
  outline: none;
  border-color: var(--rc-primary);
  background: rgba(0,0,0,.3);
}
.rc-field input::placeholder{ color: rgba(163,158,147,.55); }

.rc-code-input{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-family: 'Courier New', monospace;
  font-size: 1rem !important;
  font-weight: 700;
}

.rc-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
@media (max-width: 480px){
  .rc-field-row{ grid-template-columns: 1fr; }
}

.rc-locked-tag{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: var(--rc-muted);
  font-size: .62rem;
  font-weight: 600;
  text-transform: none;
}
.rc-locked-field{ opacity: .6; cursor: not-allowed; }

/* ---------------- Buttons ---------------- */

.rc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, transform .1s ease;
}
.rc-btn:hover{ filter: brightness(1.08); }
.rc-btn:active{ transform: translateY(1px); }

.rc-btn-primary{ background: var(--rc-primary); color: #fff; margin-top: 4px; }
.rc-btn-discord{ background: var(--rc-discord); color: #fff; }
.rc-btn-discord .rc-discord-glyph{ width: 19px; height: 19px; }

/* =========================================================
   Custom dropdown
   ---------------------------------------------------------
   Replaces <select> entirely. A native select's open option
   list is rendered by the OS and ignores CSS, so on a dark
   theme it comes out light-grey with a blue highlight no
   matter what's applied. Same reason the birthday field is
   three of these rather than <input type="date">, whose
   calendar popup has the identical problem.
   ========================================================= */

.rc-select{ position: relative; }

.rc-select-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--rc-line);
  border-radius: 9px;
  color: var(--rc-text);
  font-family: inherit;
  font-size: .9rem;
  text-align: left;
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rc-select-trigger:hover{ border-color: rgba(255,255,255,.2); }
.rc-select.is-open .rc-select-trigger{
  border-color: var(--rc-primary);
  background: rgba(0,0,0,.3);
}
.rc-select-trigger.is-placeholder .rc-select-value{ color: rgba(163,158,147,.7); }
.rc-select-trigger svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--rc-muted);
  transition: transform .18s ease;
}
.rc-select.is-open .rc-select-trigger svg{ transform: rotate(180deg); }

.rc-select-value{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-select.has-error .rc-select-trigger{
  border-color: #e04b4b;
  background: rgba(224,75,75,.08);
}

.rc-select-panel{
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  background: #201f1d;
  border: 1px solid var(--rc-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  padding: 4px;
}

.rc-select-option{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--rc-text);
  font-family: inherit;
  font-size: .86rem;
  padding: 9px 11px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.rc-select-option:hover{
  background: rgba(255,255,255,.06);
  color: var(--rc-heading);
}
.rc-select-option.is-selected{
  background: rgba(204,120,92,.16);
  color: var(--rc-primary);
  font-weight: 600;
}

/* Scrollbar styled too — the year list is long enough that a default
   light scrollbar would stand out against the dark panel. */
.rc-select-panel::-webkit-scrollbar{ width: 8px; }
.rc-select-panel::-webkit-scrollbar-track{ background: transparent; }
.rc-select-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 4px;
}
.rc-select-panel::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* Birthday: month / day / year, sized to their content lengths. */
.rc-date-group{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  gap: 8px;
}
@media (max-width: 420px){
  .rc-date-group{ grid-template-columns: 1fr; }
}

/* ---------------- Heads-up notice (Discord verification) ---------------- */

.rc-heads-up{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 20px;
  padding: 12px 14px;
  border-radius: 9px;
  background: rgba(204,120,92,.08);
  border: 1px solid rgba(204,120,92,.28);
  text-align: left;
}
.rc-heads-up svg{
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--rc-primary);
}
.rc-heads-up span{
  font-size: .78rem;
  line-height: 1.5;
  color: var(--rc-text);
}
.rc-heads-up strong{ color: var(--rc-heading); }

/* ---------------- Free registration prompt (Step 2) ---------------- */

.rc-free-prompt{
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rc-line);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--rc-muted);
  text-align: center;
}
.rc-link-btn{
  background: none;
  border: none;
  padding: 0;
  color: var(--rc-primary);
  font-weight: 700;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------------- Account page: free-tier course cards ---------------- */

.rc-course-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rc-free-badge{
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(204,120,92,.16);
  color: var(--rc-primary);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rc-course-card.is-free-tier{ border-color: rgba(204,120,92,.3); }

.rc-course-upgrade{
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: .76rem;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
}
.rc-course-upgrade:hover{ text-decoration: underline; }