/* Content/css/v2/sections/register-page.css
   Powers Register.cshtml (real registration form, 'Start Trial' CTA
   target). Ported as-is from assets.3.0/css/style.1.0.6.css, in
   original order, with three real gaps filled in:

   1. .btn-register never had a base background/color rule anywhere in
      the legacy sheet outside its #modal-scoped version
      (.modal-content .btn-register.btn), which can't reach this page
      at all (no .modal-content ancestor here). Reused the confirmed
      real color value (#0B6DFF) from that modal rule.

   2. .btn-w-full's actual width:100%!important/display:block rule was
      ported for Resources page (scoped to .message-area) but never
      duplicated here - only its ::before pseudo-element width modifier
      was.

   3. .account-form's own base rule (margin-left/right:-2.5px;
      overflow:hidden - the clearfix containing its floated .form-group
      children) was never ported here either, only the child
      .form-group rules were. Without it, .account-form.message-form
      collapsed to near-zero height around its floats, and the
      turnstile widget + submit button rendered below the visible white
      card instead of inside it.

   Every selector below was scoped to .registration-page, even ones
   that look 'safe' by name - several of these are the EXACT same
   class names already used and scoped elsewhere for a different
   context: .account-form/.message-form/.form-group (already scoped
   to .message-area in resources-page.css), .form-check-ht (already
   scoped to #modal in modals.css), .btn-register.btn.btn-w-full
   (already scoped to .message-area in resources-page.css). Left bare
   here, any of these would either leak onto Resources page or collide
   right back with it.

   .registration-page.hero-area p exists in the legacy source but the
   real markup here never has both classes on the same element (no
   .hero-area on this page's section) - ported faithfully anyway,
   it's simply inert. */


.registration-page .form-check-ht {
    padding-left: 75px;
}

.bg-vector-light {
    background: url("../../../../assets.3.0/img/bg-vector-light.png") no-repeat center left / cover !important;
}

/* NEW - .account-form's own base rule (the clearfix that contains its
   floated .form-group children) was never ported here, only the child
   .form-group rules were. Without it, .account-form.message-form
   collapses to near-zero height around its floated fields, and the
   turnstile widget + submit button both end up rendering below the
   visible white card instead of inside it. Same rule I already have
   for Resources page (scoped to .message-area there); this is its
   .registration-page counterpart. */
.registration-page .account-form {
    margin-left: -2.5px;
    margin-right: -2.5px;
    overflow: hidden;
}

.registration-page .account-form .form-group {
    width: 180px;
    float: left;
    padding-left: 2.5px;
    padding-right: 2.5px;
}

.registration-page .account-form .form-group input,
.registration-page .account-form .form-group select {
    height: 50px;
    border-radius: 5px;
    border: 0;
    color: black;
    font-weight:600;
    font-size: 13px;
    line-height: 20px;
    padding: 15px; 
}

.registration-page .form-control:focus {
    box-shadow: none
}

.registration-page .account-form .form-group:last-child {
    width: auto;
}

.registration-page .message-form .form-group input,
.registration-page .message-form .form-group select {
    border: 1px solid #C4C4C4;
}

.registration-page .account-form .form-group input:focus {
    border-color: #2B70D6;
}

.registration-page .message-form .form-group {
    width: 100%;
    margin-bottom: 10px;
}

.registration-page .account-form .form-group select {
    width: 100%;
    background: #fff;
    color: #33383D;
    appearance: none;
    background-image: url("../../../../assets.3.0/img/icon/s-arrow-down.png");
    background-repeat: no-repeat;
    background-position: right 19px center;
    background-size: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    cursor: pointer;
}

.registration-page .message-form .form-group:last-child {
    width: 100%;
}

.register-ht-box {
    position: relative;
    box-shadow: none;
}

.registration-page .account-form.message-form {
    margin-left: auto;
    margin-right: auto;
    width: 650px;
    border-radius: 40px;
    box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.10);
    padding: 50px 47.5px;
}

.registration-page .hero-title h1 {
    line-height: 52.5px;
    font-size: 35px;
    margin-bottom: 18px;
}

.registration-page .hero-title {
    padding-left: 49px;
    line-height: 52.5px;
    padding-bottom: 0;
}

.registration-page.hero-area p {
    line-height: 20px;
    font-weight: 500;
    color: #C4C4C4;
}

.registration-page .form-check-ht input {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #c4c4c4;
    margin-top: 10px;
}

.registration-page .form-check-ht label { 
    font-size: 13px;
    color: #33383D;
    top: -4px;
    position: relative;
    padding-left: 9px;
}

.registration-page .form-check-ht label a {
    color: #0B6DFF;
    text-decoration: underline;
}

.registration-page .btn-register {
    border-radius: 30px;
    margin-top: 25px;
}

/* NEW - .btn-register never had a base color rule anywhere in the
   legacy sheet outside #modal's version (.modal-content .btn-register.btn),
   which can't reach this page at all (no .modal-content ancestor here).
   That's a real legacy gap, not something missed on the port - reusing
   the confirmed real color value (#0B6DFF) from that modal rule instead
   of guessing. */
.registration-page .btn-register.btn {
    background: #0B6DFF;
    color: #fff;
}

/* NEW - .btn-w-full's actual width/display rule was ported for
   Resources page (scoped to .message-area) but never duplicated here -
   only the ::before pseudo-element width modifier was. Without this,
   the button had no width/display:block, defaulting to shrink-to-fit
   inline-block sizing - which combined with no color made it look like
   plain text sitting outside the card. */
.registration-page .btn-w-full {
    width: 100% !important;
    display: block;
}

.registration-page .title-style-3 p {
    color: #0B6DFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    margin: 0;
}

.registration-page .title-style-3.section-title h2 {
    line-height: 48px;
    width: 427px;
    margin: auto;
    margin-bottom: 15px;
}

.registration-page .title-style-3 p.section-paragraph {
    font-size: 16px;
    color: #494949;
    font-weight: 500;
    line-height: 20px;
    width: 370px;
    margin: auto;
}

.registration-page {
    padding-top: 51px;
    padding-bottom: 90px;
}

.registration-page .form-check-ht {
    padding-left: 0;
}

.registration-page .section-title.title-style-3 {
    margin-bottom: 30px;
}

.registration-page .form-check-ht label a {
    font-weight: 600;
}

.registration-page .btn-register.btn.btn-w-full::before {
    width: 550px;
}