textarea.bigTextArea {max-height: 450px !important;}
textarea.smallTextArea {max-height: 250px !important;}

.form-card {
    width:100%;
    margin:auto;
    display:grid;
    grid-template-columns:390px 1fr;
    background:
        var(--main-banner-bg-url),
        var(--fp-window-bg),
        var(--fp-window-color-bg);
    background-position:
    var(--banner-bg-pos) top,
    var(--banner-bg-pos) bottom,
    bottom var(--banner-bg-pos);

    background-repeat:
    no-repeat,
    no-repeat;
    background-size: 25%, 100%,100%;
    border-radius:28px;
    overflow:hidden;
    
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.form-photo {
    position:relative;
    min-height:400px;
    max-height: inherit;
    width: 100%;
    overflow:hidden;
}

.form-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


.form-content {
    padding:24px;
    width: 100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    gap:18px;
}
.form-title {
    margin:10px 0 0;
    font-size:1.2rem;
    line-height:1;
}
.form-text {
    
    line-height:1.7;
    color:var(--fp-text);
}

.formGroup {
    margin-bottom: 18px;
}
.formGroupFlex {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.formLabel {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
}
.inputWrap {
    position: relative;
}

.formControl {
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    border: 1px solid var(--input-border-color);
    border-radius: 17px;
    padding-block: 0;
    padding-inline: 17px;
    font-size: 1.2rem;
    
    background: var(--input-bg-color);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
textarea.formControl {
    min-height: 54px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: none;
    overflow: hidden;
}

.formControl::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

.formControl:focus {
    border-color: var(--input-border-color-focus);
    background: var(--input-bg-color-focus);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
}

.passwordInput {
    padding-inline-end: 98px;
}

.showPasswordBtn {
    position: absolute;
    inset-block: 8px;
    inset-inline-end: 8px;
    border: 0;
    border-radius: 13px;
    
    font-size: 24px;
    font-weight: 800;
    padding: 0 12px;
    cursor: pointer;
}

.showPasswordBtn:focus-visible,
.loginBtn:focus-visible,
a:focus-visible,
.rememberMe input:focus-visible {
    outline: 3px solid var(--input-focus-shadow);
    outline-offset: 3px;
}

.fieldHint {
    margin: 7px 0 0 20px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.loginOptions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 4px 0 24px 0;
}

.rememberMe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.rememberMe input {
    width: 18px;
    height: 18px;
    
}

.loginOptions a,
.registerLine a {
    color: var(--a-link);
    font-weight: 700;
    text-decoration: none;
}

.loginOptions a:hover,
.registerLine a:hover {
    color: var(--a-link);
    text-decoration: underline;
    text-underline-offset: 4px;
}



.registerLine {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 3px var(--footer-border-color) dotted;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.55;
    display: flex;
    flex-direction: row;
}


/*search*/


.ageOutput {
    text-align: center;
    margin-top: -2px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

.ageSliderBox {
    position: relative;
    height: 28px;
}

.ageTrack {
    position: absolute;
    left: 0;
    right: 0;
    top: 11px;
    height: 8px;
    border-radius: 999px;
    background: var(--range-bg-color);
    box-shadow: 0 0 18px var(--input-focus-shadow);
}

.ageRange {
    position: absolute;
    top: 11px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-color);
    box-shadow: 0 0 18px var(--input-focus-shadow);
}

.ageSliderBox input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.ageSliderBox input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 3px solid var(--accent-color-border);
    box-shadow: 0 5px 18px var(--input-focus-shadow);
    cursor: pointer;
}

.ageSliderBox input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 3px solid var(--accent-color-border);
    box-shadow: 0 5px 18px var(--input-focus-shadow);
    cursor: pointer;
}

.ageSliderBox input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

.ageSliderBox input[type="range"]::-moz-range-track {
    background: transparent;
}
.ageSliderBox input[type="range"]:focus-visible {
    outline: 3px solid var(--input-border-color);
    outline-offset: 4px;
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.switchText {
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.switchOption {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}
.switchOption.acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    max-width: 500px;
    min-width: 306px;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
    border-bottom: 1px var(--main-menu-border) dotted;
}
.searchLabel.acc, .searchLabel {
  font-size: calc(var(--font-size) + 0.2rem);
  border-bottom: 1px var(--main-menu-border) dotted;
  transition: 120ms ease-in-out;
}

.switchText {
    line-height: 1.2;
}

/* This is the REAL checkbox, styled as a switch */
.switchOption .switchInput {
    display: inline-block;
    position: relative;
    opacity: 1;

    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    margin: 0;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    background:
        radial-gradient(circle at 12px 50%, var(--accent-color-dot) 0 8px, transparent 8.5px),
        var(--accent-color-inactive);

    transition: 250ms ease;
}

.switchOption .switchInput:checked {
    background:
        radial-gradient(circle at 30px 50%, var(--accent-color-dot) 0 8px, transparent 8.5px),
        var(--accent-color);
}

.switchOption .switchInput:focus-visible {
    outline: 3px solid var(--input-border-color);
    outline-offset: 4px;
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.switchOption:hover .switchInput {
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.switchOption .switchInput:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.switchOption:has(.switchInput:disabled) {
    cursor: not-allowed;
}


.genderButtons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.genderButtons2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.genderOption {
    position: relative;
    cursor: pointer;
}

.genderOption input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.genderOption span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: center;
    height: 80px !important;
    width: 120px !important;
    border-radius: 14px;
    border: 1px solid var(--input-border-color);
    background: transparent;
    transition: 0.2s ease;
}

.genderOption input:checked + span {
    border-color: var(--input-border-color);
    background: var(--input-bg-color);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.genderOption input:focus-visible + span {
    outline: 3px solid var(--input-border-color);
    outline-offset: 3px;
}

.genderOption input:focus:not(:focus-visible) + span {
    outline: none;
}
.genderOption input:disabled + span {
    opacity: 0.6;
    cursor: not-allowed;
}

.gender-icon {
    width: 40px;
    height: 40px;
    background: var(--horo-bg);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.gender-icon.disabled {
    background: #aeaeae;
}
.gender-icon-small {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: var(--horo-bg);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.gender-icon1 {
  -webkit-mask-image: url("/server/pics/search/1.png");
  mask-image: url("/server/pics/search/1.png");
}
.gender-icon2 {
  -webkit-mask-image: url("/server/pics/search/2.png");
  mask-image: url("/server/pics/search/2.png");
}
.gender-icon3 {
  -webkit-mask-image: url("/server/pics/search/3.png");
  mask-image: url("/server/pics/search/3.png");
}
.gender-icon4 {
  -webkit-mask-image: url("/server/pics/search/4.png");
  mask-image: url("/server/pics/search/4.png");
}
.gender-icon5 {
  -webkit-mask-image: url("/server/pics/search/5.png");
  mask-image: url("/server/pics/search/5.png");
}
.gender-icon11 {
  -webkit-mask-image: url("/server/pics/search/11.png");
  mask-image: url("/server/pics/search/11.png");
}

.gender-icon10 {
  -webkit-mask-image: url("/server/pics/search/10.png");
  mask-image: url("/server/pics/search/10.png");
}
.gender-icon7 {
  -webkit-mask-image: url("/server/pics/search/7.png");
  mask-image: url("/server/pics/search/7.png");
}
.gender-icon8 {
  -webkit-mask-image: url("/server/pics/search/8.png");
  mask-image: url("/server/pics/search/8.png");
}
.gender-icon9 {
  -webkit-mask-image: url("/server/pics/search/9.png");
  mask-image: url("/server/pics/search/9.png");
}

.formLabel {
    display: block;
    margin-bottom: 10px;
}

.select1 {
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--input-border-color);
    border-radius: 17px;
    padding-block: 0;
    padding-inline: 17px;
    font-size: 1.2rem;
    
    background: var(--input-bg-color);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    

    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);

    background-position:
        calc(100% - 24px) 50%,
        calc(100% - 18px) 50%;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}
.small {padding-left: 20px; padding-right: 20px; min-width: 100px; }
.margin-bottom {margin-bottom: 8px !important; display: flex;}
.padding-bottom {padding-bottom: 8px !important; display: flex; border-bottom: 0 !important;}
.input1 {
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--input-border-color);
    border-radius: 17px;
    padding-block: 0;
    padding-inline: 17px;
    font-size: 1.2rem;
    
    background: var(--input-bg-color);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

}


.select1 option {
    color: border: 1px solid var(--input-border-color);
    background: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
}

.select1:focus {
    border-color: var(--input-border-color-focus);
    background: var(--input-bg-color-focus);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
}



@media screen and (min-width: 1px) and (max-width: 920px) {
    .form-card{
        grid-template-columns:1fr;
    }
    .form-photo {
        height:230px;
        min-height:230px;
        
    }
    .form-photo img {
        object-position: top center;
    }

    .form-title{
        font-size:1.1rem;
    }
    .loginOptions {
        flex-direction: column;
    }
    .registerLine {
        flex-direction: column;
        align-items: center;
    }
  }