:root {
    --bg: #1a0f0a;
    --text: #ffffff;
    --accent: #981813;
    --accent-2: #c40808;
    --gold-1: #c7ae0c;
    --gold-2: #ffb005;
    --particle-size-vmin: 20;
    --particle-base-duration: 6s
}

.rw-register {
    font-family: Arial, sans-serif;
    background: linear-gradient(rgba(26, 15, 10, 0.85), rgba(26, 15, 10, 0.85)), url("../images/register/bg.jpg") center/cover no-repeat fixed;
    color: var(--text);
    position: relative;
    isolation: isolate;
}

/*.rw-register.modal-open {*/
/*    z-index: 100000;*/
/*}*/

.rw-register .page {
    position: relative;
    z-index: 1;
    padding: 2rem;
    background: transparent !important;
}

@media (max-width: 1024px) {
    .rw-register .page {
        padding: 1.5rem
    }
}

@media (max-width: 768px) {
    .rw-register .page {
        padding: 1rem
    }
}

@media (max-width: 480px) {
    .rw-register .page {
        padding: .75rem
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.rw-register .button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 7vh;
    animation: fadeUp .8s ease forwards
}

.rw-register .btn-primary:hover {
    background: linear-gradient(90deg, #c7ae0c 0%, #ffb005 50%, #c7ae0c 100%);
    filter: brightness(1.05);
    transform: translateY(-3px) scale(1.05)
}

.rw-register.embed .modal {
    /*position: fixed;*/
    /*inset: 0;*/
    /*display: none;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*padding: 1rem;*/
    /*background: rgba(0, 0, 0, .123);*/
    /*backdrop-filter: blur(6px);*/
    /*-webkit-backdrop-filter: blur(6px);*/
    /*z-index: 100000;*/
    /*opacity: 0;*/
    /*transition: opacity .4s ease;*/
    /*overflow: auto;*/
    /*-ms-overflow-style: none;*/
    /*scrollbar-width: none;*/
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

.rw-register .modal.active {
    display: flex;
    opacity: 1;
    /*animation: fadeInScale .5s ease;*/
    /*margin-top: 161px*/
}

.rw-register .modal-content {
    background: #2f1010;
    border-radius: 16px;
    padding: 1rem;
    width: min(900px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.85);
    animation: popUp .5s ease forwards
}

.rw-register .close-btn {
    position: absolute;
    top: 10px;
    right: 24px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    background-color: red;
    border: 0;
    cursor: pointer
}

.rw-register .form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

@media (min-width: 768px) {
    .rw-register .form-wrapper {
        flex-direction: row
    }
}

.rw-register .form-box, .benefits-box {
    flex: 1;
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    padding: .25rem
}

.rw-register .form-box h2, .benefits-box h2 {
    color: #ff0800
}

.rw-register form input {
    padding: 10px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    margin: 5px;
    transition: all .3s ease
}

.rw-register form input:focus {
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 10px rgba(255, 176, 5, .8);
    transform: scale(1.03)
}

.rw-register .terms {
    font-size: .8rem;
    margin-top: 10px
}

.rw-register .terms a {
    color: #f5b400;
    text-decoration: none
}

.rw-register .benefits-box ul {
    text-align: left;
    padding-left: 1rem
}

.rw-register .benefits-box li {
    margin: .5rem 0
}

.rw-register .benefits-box li strong {
    color: #f5b400
}

.rw-register .ambassador {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1.5rem
}

.rw-register .ambassador img {
    max-width: 320px;
    margin-bottom: 1rem;
    width: 100%;
    height: auto
}

.rw-register .ambassador .highlight {
    font-size: 9px;
    line-height: 1.4;
    color: #fff;
    white-space: pre-line
}

@media (max-width: 360px) {
    .rw-register .ambassador {
        margin-top: 1rem
    }

    .rw-register .ambassador img {
        width: min(80vw, 260px)
    }

    .rw-register .ambassador p {
        font-size: clamp(.8rem, .75rem + .5vw, .95rem)
    }
}

@media (min-width: 480px) {
    .rw-register .ambassador img {
        width: min(60vw, 320px)
    }
}

@media (min-width: 768px) {
    .rw-register .ambassador {
        display: grid;
        grid-template-columns:auto 1fr;
        align-items: center;
        gap: 1rem
    }

    .rw-register .ambassador img {
        margin: 0;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .rw-register .benefits-box .ambassador {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center
    }
}

.rw-register .phone-field {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px
}

@media (max-width: 420px) {
    .rw-register .phone-field {
        grid-template-columns: 110px 1fr
    }
}

.rw-register .select-wrap {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .14)
}

.rw-register .select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 28px 10px 10px;
    border: 0;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    font: inherit;
    line-height: 1.2;
    cursor: pointer
}

.rw-register .select-wrap select option {
    color: #000
}

.rw-register .select-wrap .chev {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .8
}

.rw-register #phone {
    width: auto;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 12px;
    border-radius: 8px;
    outline: none;
    transition: box-shadow .15s, border .15s
}

.rw-register #phone::-moz-placeholder {
    color: rgba(255, 255, 255, .7)
}

.rw-register #phone::placeholder {
    color: rgba(255, 255, 255, .7)
}

.rw-register #phone:focus {
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .06)
}

.rw-register .background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #3e1e68;
    overflow: hidden;
    z-index: 0;
    pointer-events: none
}

.rw-register .background span {
    position: absolute;
    width: calc(var(--particle-size-vmin) * 1vmin);
    height: calc(var(--particle-size-vmin) * 1vmin);
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    animation-name: bg-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

@keyframes bg-move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg)
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-register .background span {
        animation-duration: 0s !important;
        animation-iteration-count: 0 !important
    }
}

.rw-register .header-img {
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 320px;
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity .6s ease, transform .6s ease
}

.rw-register .modal.active ~ .header-img, .header-img.show {
    opacity: 1;
    transform: translateY(0)
}

.rw-register .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    justify-content: center;
    align-items: center;
    padding: .75rem;
    z-index: 10;
    opacity: 0;
    transition: opacity .4s ease
}

.rw-register .modal.active {
    display: flex;
    opacity: 1;
    animation: fadeInScale .5s ease
}

.rw-register .modal-content {
    background: #2f1010;
    padding: 1rem;
    border-radius: 16px;
    max-width: 80%;
    transform: scale(0.85);
    animation: popUp .5s ease forwards
}

@keyframes fadeInScale {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes popUp {
    from {
        transform: scale(0.85);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.rw-register .promo-layout {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px;
    background: #3a1515;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    animation: cardIn .45s ease forwards
}

.rw-register .promo-layout::-webkit-scrollbar {
    width: 0;
    height: 0;
}

@media (max-width: 900px) {
    .rw-register .promo-layout {
        grid-template-columns:1fr
    }
}

.rw-register .panel {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    padding: 18px
}

.rw-register .title {
    margin: 0 0 10px;
    color: #ff2a1f;
    letter-spacing: .3px
}

.rw-register .promo-title {
    margin: 4px 0 10px;
    color: #ff2a1f
}

.rw-register .reg-form {
    display: grid;
    gap: 14px
}

.rw-register .field {
    display: grid;
    gap: 6px;
    position: relative;
}

.rw-register .field span {
    color: #ffd6cc;
    font-size: .95rem
}

.rw-register .field a {
    font-size: .8rem;
    font-style: italic;
    height: 20px;
    line-height: 8px;
    padding-left: 5px;
    color: #ffffff;
}

.rw-register .field input[type="password"],
.rw-register .field input[type="text"] {
    padding-right: 38px;
}

.rw-register .pw-toggle {
    position: absolute;
    right: 10px;
    top: calc(50% + 8px);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s;
    font-size: 0;
}

.rw-register .pw-toggle:hover {
    opacity: 1;
}

.rw-register .pw-toggle.eye-open {
    background: center/20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffd6cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.rw-register .pw-toggle.eye-closed {
    background: center/20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffd6cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.1 6.3A13.94 13.94 0 0 0 1 12s4 7 11 7c2.1 0 4.02-.54 5.72-1.45'/%3E%3Cpath d='M21.9 17.7A13.94 13.94 0 0 0 23 12s-4-7-11-7c-2.1 0-4.02.54-5.72 1.45'/%3E%3Cpath d='M9.9 9.9a3 3 0 1 0 4.2 4.2'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
}

.rw-register .hint {
    color: #c9b6b1;
    font-size: .8rem;
    font-style: italic;
}

.rw-register form input {
    padding: 12px 12px;
    border-radius: 8px;
    border: 0;
    outline: none;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transition: box-shadow .25s ease, transform .25s ease, background .25s ease
}

.rw-register form input::-moz-placeholder {
    color: rgba(255, 255, 255, .75)
}

.rw-register form input::placeholder {
    color: rgba(255, 255, 255, .75)
}

form input:focus {
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 2px rgba(255, 176, 5, .35), 0 6px 16px rgba(0, 0, 0, .35);
    transform: translateY(-1px)
}

.rw-register .phone-field {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    font-size: 14px;
}

@media (max-width: 480px) {
    .rw-register .phone-field {
        grid-template-columns:120px 1fr
    }
}

.rw-register .select-wrap {
    position: relative;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .08)
}

.rw-register .select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 12px 30px 12px 12px;
    border: 0;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    font: inherit;
    cursor: pointer
}

.rw-register .select-wrap .chev {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .8;
    pointer-events: none
}

.rw-register .terms {
    display: block;
    font-size: .8rem;
    color: #e6d9d5;
    margin-top: 6px
}

.rw-register .terms a {
    color: #ffb005;
    text-decoration: none
}

.rw-register .btn-primary {
    background: linear-gradient(90deg, #981813 0%, #c40808 50%, #981813 100%);
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: filter .3s, transform .2s, box-shadow .2s ease
}

.rw-register .btn-primary:hover {
    background: linear-gradient(90deg, #c7ae0c 0%, #ffb005 50%, #c7ae0c 100%);
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35)
}

.rw-register .perk-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.rw-register .perk-list li {
    display: flex;
    align-items: flex-start;
    margin: .6rem 0
}

.rw-register .perk-list .icon {
    width: 2rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 1.2rem
}

.rw-register .perk-list .text {
    display: flex;
    flex-direction: column
}

.rw-register .perk-list .highlight {
    font-size: 1.05rem;
    font-weight: bold;
    color: #ffd28a
}

.rw-register .perk-list .sub {
    font-size: .9rem;
    color: #fff;
    margin-left: .2rem
}

.rw-register .promo-art {
    display: grid;
    place-items: center;
    background: radial-gradient(120px 60px at 60% 40%, rgba(255, 176, 5, 0.25), transparent 60%);
    padding: 8px;
    margin: 6px 0 10px
}

.rw-register .promo-img {
    max-width: 100%;
    height: auto;
    animation: floatY 4.5s ease-in-out infinite;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45))
}

.rw-register .promo-note {
    color: #e8e1de;
    font-size: .9rem;
    margin: 8px 0 0
}

@keyframes floatY {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-8px)
    }
    100% {
        transform: translateY(0)
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.rw-register .lines {
    position: absolute;
    inset: 0 0 0 0;
    width: 90vw;
    margin: auto;
    display: flex;
    justify-content: space-between;
    z-index: 0;
    pointer-events: none
}

.rw-register .line {
    position: relative;
    width: 1px;
    height: 98%;
    background: transparent;
    border: 0;
    overflow: hidden
}

.rw-register .line::after {
    content: "";
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
    animation: drop 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97)
}

.rw-register .line:nth-child(1)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FF4500 75%, #FF4500 100%);
    animation-delay: .5s
}

.rw-register .line:nth-child(2)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #32CD32 75%, #32CD32 100%);
    animation-delay: 1s
}

.rw-register .line:nth-child(3)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #1E90FF 75%, #1E90FF 100%);
    animation-delay: 1.5s
}

.rw-register .line:nth-child(4)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFD700 75%, #FFD700 100%);
    animation-delay: 2s
}

.rw-register .line:nth-child(5)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #8A2BE2 75%, #8A2BE2 100%);
    animation-delay: 2.5s
}

.rw-register .line:nth-child(6)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #20B2AA 75%, #20B2AA 100%);
    animation-delay: 3s
}

.rw-register .line:nth-child(7)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #DC143C 75%, #DC143C 100%);
    animation-delay: 3.5s
}

.rw-register .line:nth-child(8)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #00FA9A 75%, #00FA9A 100%);
    animation-delay: 4s
}

.rw-register .line:nth-child(9)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FF1493 75%, #FF1493 100%);
    animation-delay: 4.5s
}

.rw-register .line:nth-child(10)::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #00BFFF 75%, #00BFFF 100%);
    animation-delay: 5s
}

@keyframes drop {
    0% {
        top: -50%
    }
    100% {
        top: 110%
    }
}

.rw-register video.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.5);
    pointer-events: none;
    /*top: 0;*/
    /*left: 0;*/
    /*min-width: 100%;*/
    /*min-height: 100%;*/
    /*-o-object-fit: cover;*/
    /*object-fit: cover;*/
    /*z-index: -1;*/
    /*filter: brightness(0.5)*/
}

.rw-register .banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto 1.5rem;
    text-align: center
}

.rw-register .banner img {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block
}

@media (min-width: 768px) {
    .rw-register .banner img {
        max-width: 400px
    }
}

@media (min-width: 1024px) {
    .rw-register .banner img {
        max-width: 500px
    }
}

.rw-register .button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem
}