/* ================================
   Tutor LMS – Registration Card
   Look: transparent, white labels/text, #AF9266 borders
   Layout: centred wide 2-column (stacks on mobile)
   ================================ */

.registration-card { --brand:#AF9266; }

/* Container: centred, wide, transparent */
.registration-card{
  width:100%;
  max-width:1280px;                /* adjust if you want */
  margin-inline:auto !important;   /* hard centre */
  float:none !important;
  background:transparent !important;
}
.registration-card .tutor-wrap,
.registration-card form{
  width:100%;
  margin-inline:0 !important;
  background:transparent !important;
  box-shadow:none;
}

/* Labels/Headings */
.registration-card label,
.registration-card .tutor-form-label,
.registration-card .tutor-form-wrap h2,
.registration-card .tutor-form-wrap h3{ color:#fff; }

/* Field spacing */
.registration-card .tutor-form-group{ margin-bottom:16px; }

/* Controls */
.registration-card input[type="text"],
.registration-card input[type="email"],
.registration-card input[type="password"],
.registration-card input[type="tel"],
.registration-card input[type="url"],
.registration-card select,
.registration-card textarea,
.registration-card .tutor-form-control{
  width:100%;
  background:transparent !important;
  color:#fff;
  caret-color:#fff;
  border:1.5px solid var(--brand);
  border-radius:50px;
  padding:12px 18px;
  box-shadow:none;
  box-sizing:border-box;
}

/* Placeholders */
.registration-card ::placeholder{ color:#fff; opacity:1; }
.registration-card :-ms-input-placeholder{ color:#fff; }
.registration-card ::-ms-input-placeholder{ color:#fff; }

/* Focus */
.registration-card input:focus,
.registration-card select:focus,
.registration-card textarea:focus{
  outline:3px solid rgba(175,146,102,.55);
  outline-offset:2px;
  box-shadow:none;
}

/* Checkbox/radio alignment */
.registration-card .tutor-form-check{ display:flex; align-items:center; gap:10px; }

/* Button */
.registration-card .tutor-btn,
.registration-card button[type="submit"],
.registration-card input[type="submit"]{
  background:var(--brand) !important;
  color:#fff !important;
  border:1px solid var(--brand);
  border-radius:100px;
  padding:15px 50px;
  line-height:1.2;
  box-shadow:none;
}
.registration-card .tutor-btn:hover,
.registration-card button[type="submit"]:hover{ filter:brightness(1.05); }
.registration-card .tutor-btn:disabled,
.registration-card button[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }

/* Helpers / reCAPTCHA spacing */
.registration-card .tutor-g-recaptcha{ margin:12px 0 4px; }
.registration-card .tutor-form-group .tutor-form-help,
.registration-card .tutor-text-warning,
.registration-card .tutor-text-danger{ margin-top:6px; }

/* ---------- Grid layout ---------- */

.registration-card form{
  display:grid;
  grid-template-columns:repeat(2, minmax(420px, 1fr));
  grid-auto-flow:row dense;         /* lets later items backfill left gaps */
  justify-content:center;           /* keep columns centred */
  column-gap:32px;
  row-gap:18px;
}

/* Default: full width */
.registration-card form .tutor-form-group{ grid-column:1 / -1; }

/* Two-up: names, username, email */
@supports selector(:has(*)) {
  .registration-card form .tutor-form-group:has(input[name="first_name"]),
  .registration-card form .tutor-form-group:has(input[name="last_name"]),
  .registration-card form .tutor-form-group:has(input[name="user_login"]),
  .registration-card form .tutor-form-group:has(input[name="username"]),
  .registration-card form .tutor-form-group:has(input[name="user_name"]),
  .registration-card form .tutor-form-group:has(input[name="user_email"]),
  .registration-card form .tutor-form-group:has(input[name="email"]){
    grid-column:span 1;
  }

  /* Password pair (broad, case-insensitive) */
  /* Force the FIRST password group to the left column */
  .registration-card form .tutor-form-group:has(input[type="password"]:not([name*="confirm" i])){ grid-column:1 !important; }

  /* Treat any "confirm" password group as the right column */
  .registration-card form .tutor-form-group:has(
    input[name*="confirm" i],
    input[name*="pass2" i],
    input[name*="password2" i],
    input[name*="retype" i],
    input[name*="repeat" i],
    input[name*="again"  i],
    input[name*="verify" i],
    input[name="password_confirmation"],
    input[name="confirm_password"],
    input[name="cpassword"],
    input[name="user_pass_confirm"],
    input[name="confirm_pass"]
  ){ grid-column:2 !important; }

  /* If a helper block sits between them and is full-width, keep it full-width but allow backfill */
  .registration-card form .tutor-form-group:has(.tutor-password-hint),
  .registration-card form .tutor-form-group:has(.password-hint),
  .registration-card form .tutor-form-group:has(.password-strength){ grid-column:1 / -1; }
}

/* Always full width rows */
.registration-card form .tutor-g-recaptcha,
.registration-card form .tutor-reg-terms,
.registration-card form .tutor-privacy,
.registration-card form .tutor-form-submit,
.registration-card form .tutor-profile-photo,
.registration-card form .tutor-terms-conditions{ grid-column:1 / -1 !important; }

/* Centre the submit row/button */
.registration-card .tutor-form-submit{ display:flex; justify-content:center; }

/* ---------- Mobile ---------- */
@media (max-width:980px){
  .registration-card{ max-width:100%; }
  .registration-card form{ grid-template-columns:1fr; }
  .registration-card form .tutor-form-group{ grid-column:1 / -1 !important; }
}