/* VietCALL: the two account sign-up pages (templates/core/auth/register_verify.html and register.html, both marked
   .vc-signup-page) as a card on the login page's warm background, in the same type and colours (vietcall-footer.css).
   Step 1 is Indico's horizontal WTForms form with the CAPTCHA widget; step 2 is Indico's React (Semantic UI) form.
   Both are restacked as one column. Dark colours: vietcall-zz-dark.css. 2026-11-11. */

body:has(.vc-signup-page),
body:has(.vc-signup-page) .main { background: #f7f6f3 !important; }

.fixed-width-standalone-page.vc-signup-page {
  box-sizing: border-box;
  width: auto !important;
  max-width: 460px;
  margin: 48px auto 64px !important;
  padding: 32px !important;
  border: 1px solid #e8e3dd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(50, 62, 105, 0.08);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #5f6368;
}
.fixed-width-standalone-page.vc-signup-form { max-width: 600px; }

/* Title as on the login card */
.vc-signup-page > header { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.vc-signup-page > header .back-button-container,
.vc-signup-page > header .subtitle-container:empty { display: none; }
.vc-signup-page > header .title,
.vc-signup-page > header .title-with-actions { justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.vc-signup-page > header .text { width: 100%; }
.vc-signup-page > header h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #323e69 !important;
  text-align: center;
}
.vc-signup-page > .page-content { margin: 0 !important; padding: 0 !important; width: auto !important; }

.vc-signup-intro { margin: 8px 0 20px; text-align: center; }
.vc-signup-intro p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #5f6368; }
.vc-signup-step {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef0f6;
  color: #323e69;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vc-signup-alt { margin: 18px 0 0; text-align: center; font-size: 14px; color: #5f6368; }
.vc-signup-page a:not(.i-button):not(.button) { color: #bb0400; font-weight: 600; text-decoration: none; }
.vc-signup-page a:not(.i-button):not(.button):hover { color: #8f0300; text-decoration: underline; }

/* Flashed messages (e.g. "You have successfully validated your email address") */
.vc-signup-page .flashed-messages:empty { display: none; }
.vc-signup-page .flashed-messages > div,
.vc-signup-page .flashed-messages .ui.message {
  margin: 0 0 16px !important;
  border-radius: 8px !important;
  font-size: 13.5px;
}

/* Inputs, both steps */
.vc-signup-page input[type=email],
.vc-signup-page input[type=text],
.vc-signup-page input[type=password],
.vc-signup-page .ui.form .ui.input > input {
  box-sizing: border-box;
  width: 100% !important;
  height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid #cfd4de !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 15px !important;
  color: #2c2c2c !important;
}
.vc-signup-page input:focus,
.vc-signup-page .ui.form .ui.input > input:focus {
  border-color: #323e69 !important;
  outline: 2px solid rgba(50, 62, 105, 0.2);
}
.vc-signup-page input[readonly] { background: #f5f6fa !important; color: #5f6368 !important; }

/* Step 1: Indico's horizontal form, stacked */
.vc-signup-page form.i-form,
.vc-signup-page form.i-form .form-group { display: block !important; width: 100% !important; margin: 0 !important; }
.vc-signup-page form.i-form .form-group { margin-bottom: 16px !important; }
.vc-signup-page form.i-form .form-label {
  display: block !important;
  width: auto !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}
.vc-signup-page form.i-form .form-label:empty { display: none !important; }
.vc-signup-page form.i-form .form-label label {
  display: inline !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
  text-transform: none !important;
}
.vc-signup-page form.i-form .form-label .required {
  position: static !important;
  display: inline !important;
  margin-left: 3px;
  color: #bb0400;
  font-style: normal;
}
.vc-signup-page form.i-form .form-field { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.vc-signup-page form.i-form .form-field-error,
.vc-signup-page form.i-form .form-field-warning { font-size: 13px; }
/* CAPTCHA widget (a Semantic UI info message, whose border is a box-shadow) */
.vc-signup-page #captcha .ui.info.message {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid #e8e3dd !important;
  border-radius: 8px !important;
  background: #faf9f7 !important;
  box-shadow: none !important;
  color: #5f6368 !important;
  font-family: inherit !important;
}
.vc-signup-page #captcha .ui.info.message .header {
  margin-bottom: 4px;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #323e69 !important;
}
.vc-signup-page #captcha .ui.info.message *:not(i) { font-family: inherit !important; }
.vc-signup-page #captcha .ui.info.message p { font-size: 13px; line-height: 1.5; color: #5f6368 !important; }
.vc-signup-page #captcha .ui.icon.buttons .button { background: #eef0f6 !important; color: #323e69 !important; }
.vc-signup-page #captcha .ui.icon.buttons .button:hover { background: #dfe2ed !important; }
.vc-signup-page #captcha .ui.form .field { margin: 12px 0 0 !important; }
.vc-signup-page #captcha .ui.input { max-width: none !important; }
.vc-signup-page #captcha img { max-width: 100%; height: auto; border-radius: 6px; background: #fff; }
.vc-signup-page #captcha label { font-weight: 600; color: #2c2c2c !important; }
/* Submit (full width, red) and Back (a quiet link under it) */
.vc-signup-page form.i-form .form-group-footer { margin: 4px 0 0 !important; }
.vc-signup-page form.i-form .form-group-footer .form-field {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.vc-signup-page .i-button.highlight[type=submit] {
  display: block;
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #bb0400 !important;
  box-shadow: none !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  cursor: pointer;
}
.vc-signup-page .i-button.highlight[type=submit]:hover,
.vc-signup-page .i-button.highlight[type=submit]:focus-visible { background: #d62839 !important; }
.vc-signup-page form.i-form a.i-button[data-button-back],
.vc-signup-page a.i-button.vc-signup-secondary {
  display: block;
  height: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #5f6368 !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
  text-shadow: none !important;
}
.vc-signup-page form.i-form a.i-button[data-button-back]::before { content: '\2039\00a0'; }
.vc-signup-page form.i-form a.i-button[data-button-back]:hover,
.vc-signup-page a.i-button.vc-signup-secondary:hover { color: #bb0400 !important; text-decoration: underline; }

/* Step 2: Indico's React form */
.vc-signup-page #signup-container .ui.form fieldset {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
}
.vc-signup-page #signup-container .ui.form fieldset + fieldset { margin-top: 12px !important; padding-top: 16px !important; border-top: 1px solid #ebe7e1 !important; }
.vc-signup-page #signup-container .ui.form legend {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #323e69 !important;
}
.vc-signup-page #signup-container .ui.form .field > label {
  margin: 0 0 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
}
.vc-signup-page #signup-container .ui.form .required.field > label::after { color: #bb0400 !important; }
.vc-signup-page #signup-container .ui.form .field { margin-bottom: 14px !important; }
.vc-signup-page #signup-container .ui.form .fields { margin-bottom: 0 !important; }
.vc-signup-page #signup-container .ui.form .field .ui.pointing.label,
.vc-signup-page #signup-container .ui.form .field .ui.prompt.label { font-size: 12.5px; }
/* Buttons row: Create (red, full width), then Cancel under it */
.vc-signup-page #signup-container .ui.form > div:last-child {
  flex-direction: column !important;
  gap: 8px;
  margin-top: 8px;
}
.vc-signup-page #signup-container .ui.form > div:last-child > .field { width: 100%; margin: 0 !important; }
.vc-signup-page #signup-container .ui.primary.button {
  width: 100%;
  height: 46px;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #bb0400 !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.vc-signup-page #signup-container .ui.primary.button:hover,
.vc-signup-page #signup-container .ui.primary.button:focus-visible { background: #d62839 !important; }
.vc-signup-page #signup-container .disabled.field { opacity: 1 !important; }
.vc-signup-page #signup-container .ui.primary.disabled.button { opacity: 0.45 !important; }
.vc-signup-page #signup-container a.ui.button:not(.primary) {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #5f6368 !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
}
.vc-signup-page #signup-container a.ui.button:not(.primary):hover { color: #bb0400 !important; text-decoration: underline; }

/* Phones: the card takes the width (Indico's page was 1000px wide and the window scrolled sideways). */
@media (max-width: 620px) {
  .fixed-width-standalone-page.vc-signup-page {
    max-width: none;
    margin: 20px 12px 40px !important;
    padding: 24px 18px !important;
  }
  .vc-signup-page > header h2 { font-size: 26px !important; }
  .vc-signup-page #signup-container .ui.form .equal.width.fields { flex-direction: column; margin: 0 !important; }
  .vc-signup-page #signup-container .ui.form .equal.width.fields > .field { width: 100% !important; padding: 0 !important; }
}