/*============================ FOR FORM 1 ===================================*/
.witway-row .search-label, #termsBox, #formMessage {
text-align: left !important;
font-size: 15px;
}
#termsBox{
background: rgba(100, 100, 100, 0.95);
padding: 15px;
z-index: 12000;
}
input#agreed {
width: 18px;
height: 18px;
margin: 10px;
position: static;
transform: none;
}
.header {
text-align: left !important;
font-size: 35px !important;
}
button#regBtn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
margin-top: 20px;
cursor: pointer;
width: 100%;
border-radius: 0px;
}
.form-control, .form-control#fname, #lname, #email, #username, #birthdate, #ageRange, #gender, #memorable, #password, #confirm_password, #witway{
border: 1px solid #fff !important;
}
input.form-controlMsb {
    border: solid 1px #fff !important;
}
span.input-group-text {
border: 1px solid #fff !important;
}
/*==================================================================*/
/* HARD RESET JUST FOR THIS ROW */
.form-control {
line-height: 1.7 !important;
}
.witway-row {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 18px;
margin-top: 6px;
}
/* BASE CHECKBLOCK (SHARED) */
.witway-row .check-block {
display: flex;
flex-direction: column;
}
/* LEFT CHECKBOX: HUG THE SEARCH BAR, LABEL FLOWS LEFT */
.witway-row .left-check {
align-items: flex-end;     /* right edge near search bar */
flex: 0 0 auto;            /* no stretching */
}
.witway-row .left-check .check-label {
display: block;
margin: 0 0 4px 0;
font-size: 12px;
line-height: 1.2;
text-align: right;         /* text extends left */
white-space: nowrap;
}
/* RIGHT CHECKBOX: NORMAL LEFT ALIGN */
.witway-row .right-check {
align-items: flex-start;
flex: 0 0 auto;
}
.witway-row .right-check .check-label {
display: block;
margin: 0 0 4px 0;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
}
/* CHECKBOX INPUTS */
.witway-row .check-input {
width: 18px;
height: 18px;
margin: 0;
position: static;
transform: none;
}
/* MIDDLE SEARCH COLUMN */
.witway-row .search-block {
display: flex;
flex-direction: column;
flex: 1 1 auto;   /* flexible middle */
min-width: 0;
}
.witway-row .search-label {
display: block;
margin: 0 0 4px 0;
font-size: 12px;
}
.witway-row .search-block input[type="text"] {
width: 100%;
padding: 8px;
box-sizing: border-box;
border-radius: 0px;
}
/* MOBILE STACK: ONE PER ROW */
@media (max-width: 767px) {
.witway-row {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.witway-row .check-block,
.witway-row .search-block {
width: 100%;
}
}
@media (max-width: 767px) {
/* Force BOTH checkbox blocks to align left on mobile */
.witway-row .left-check,
.witway-row .right-check {
align-items: flex-start !important;
text-align: left !important;
width: 100% !important;
}
/* Ensure labels don’t stay right-aligned */
.witway-row .left-check .check-label,
.witway-row .right-check .check-label {
text-align: left !important;
width: 100% !important;
}
/* Ensure checkboxes sit directly under their labels */
.witway-row .check-input {
margin-left: 0 !important;
}
}
/*=============================== FOR FROM 2 ===================================*/

#HoroscopeSubscribe2 {
margin-left: 0 !important;
}
.witway-row .search-label, #termsBox2, #formMessage2 {
text-align: left !important;
font-size: 15px;
}
#termsBox2{
background: whitesmoke;
padding: 15px;
}
input#agreed2 {
width: 18px;
height: 18px;
margin: 10px;
position: static;
transform: none;
}
.header {
text-align: left !important;
font-size: 35px !important;
}
button#regBtn2 {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
margin-top: 20px;
cursor: pointer;
width: 100%;
border-radius: 0px;
}
#basic-addon2.input-group-text-Msb2,.form-control-Msb2,.form-control#fname2,#lname2,#email2,#username2,#ageRange2,#gender2,#memorable2,#password2,#confirm_password2,#witway2,.basic-addon2.input-group-text-Msb2{
border: 1px solid #ccc !important;
}
#otherGender2 {
border: solid 1px #ccc !important;
}
.col {
position: relative;
}
/* ======================================= FOR BOTH FORM 1 AND FORM 2 ==================================================*/

/* REQUIRED: anchor the dropdown to the search block */
.witway-row .search-block {
position: relative;
min-width: 0;
}

/* REQUIRED: contain the dropdown panel */
.autocomplete-box {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border-radius: 0px;
overflow-x: hidden;
z-index: 20000;
/*background: white;  optional but recommended */
background: rgba(0,0,0,0.75);
    backdrop-filter: blur(14px);
}

.autocomplete-box div {
padding: 10px 12px;
color: #fff;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.25);
text-align: left;
}
.autocomplete-box div:last-child {
border-bottom: none;
}
.autocomplete-box div:hover {
background: rgba(0,0,0,0.75);
}
.eye-toggle { width: 67px; height: 42px; border-radius: 50%; overflow: hidden; cursor: pointer; transition: all 0.3s ease-in-out; }
.eye-toggle img { width: 100%; height: auto; object-fit: cover; transition: opacity 0.3s ease-in-out; }
.eye-toggle.open img { opacity: 0; }
.gender-wrapper {
position: relative;   /* anchors dropdown */
width: 100%;
}
/* dropdown panel */
.dropdown {
display: none;
position: absolute;   /* must be absolute */
top: 100%;
left: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 6px;
z-index: 999;
}
.dropdown.open {
display: block;
}
.dropdown div {
padding: 10px 12px;
font-size: 14px;
color: #fff;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.25);
text-align: left;
}
.dropdown div:last-child {
border-bottom: none;
}
.dropdown div:hover {
background: rgba(0,0,0,0.90);
backdrop-filter: blur(14px);
}
#otherGender {
border: solid 1px #fff !important;
}




/* Start slightly below and invisible */
.gen-popover {
    opacity: 0 !important;
    transform: translateY(12px) scale(0.96);
    transition:
        opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When Bootstrap finishes positioning */
.gen-popover.show {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
}

/* Glass aesthetic */
.gen-popover {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;

    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;

    color: #000 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;

    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    z-index: 9999 !important;
}

/* Arrow styling */
.gen-popover .popover-arrow::before {
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
}