.promo-section {
  background-color: #f9f9f9;
  padding: 8px;
  display: flex;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.promo-item img {
  width: 21px;
  height: 21px;
  margin-bottom: 4px;
}
.promo-item h6 {
  font-weight: bold;
  margin: 0;
  color: #000;
  font-size: 14px;
}
.promo-item p {
  margin: 0;
  color: #000;
  font-size: 11px;
}
.promo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.auth_title_wrap {
    text-align: center;
    margin-bottom: 20px;
}
.auth_container {
    max-width: 500px;
    margin: auto;
    padding: 40px 20px;
}
.auth_title_wrap h2 {
    line-height: 1.3;
    font-weight: 600;
    font-size: 24px;
}
.auth_title_wrap p.data_protected_txt img {
    width: 11px;
    aspect-ratio: 1;
    object-fit: contain;
    height: 11px;
    line-height: 1;
}
.auth_title_wrap p.data_protected_txt {
    color: #338e68;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    margin-top: 3px;
    line-height: 1;
}
.auth_title_wrap p.data_protected_txt svg {
    width: 10px;
}
.form-group .form-label {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
    color: #181818;
}
.form-group {
    padding: 10px 0 0 0;
}
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="url"], .form-group input[type="tel"], .form-group input[type="number"], .form-group input[type="password"] {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 16px;
}
.form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group input[type="url"]:focus, .form-group input[type="tel"]:focus, .form-group input[type="number"]:focus, .form-group input[type="password"]:focus {
    border-color: #000;
}
.btn_submit {
    display: block;
    width: 100%;
    border: none;
    background-color: #000;
    color: white;
    padding: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    margin-top: 10px;
    position: relative;
    text-transform: uppercase;
    font-size: 18px;
}
.form-group label.error {
    font-size: 12px;
    color: red;
    line-height: 1.1;
    display: block;
    margin-top: 3px;
}
.btn_submit:hover {
    background-color: #262626;
}
.form-group input[readonly] {
    opacity: 0.6;
    background: #efefef;
    cursor: not-allowed;
    border-color: #ccc !important;
}
.cs_check {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  gap: 10px;
  position: relative;
  color: #181818;
  cursor: pointer;
}

/* Hide default checkbox */
.cs_check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom box */
.cs_check span::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #181818;
    display: inline-block;
    border-radius: 0;
    margin: 0 5px;
    transition: all 0.2s ease;
    vertical-align: middle;
    min-width: 15px;
}
/* Checked state */
.cs_check input:checked + span::before {
  background-color: #000;
  border-color: #000;
}

/* Checkmark */
.cs_check input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    color: #fff;
    line-height: 1;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g id="Interface / Check"><path id="Vector" d="M6 12L10.2426 16.2426L18.727 7.75732" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></g></svg>');
    width: 16px;
    height: 16px;
}
/* Hover effect */
.cs_check:hover span::before {
  border-color: #555;
}
.style-prefer-list {
    display: flex;
    gap: 6px 15px;
    flex-wrap: wrap;
}
.password-wrapper {
  position: relative;
}
.password-wrapper input {
    padding-right: 36px !important;
}
.password-wrapper input {
  width: 100%;
  padding-right: 40px;
}
.cs_check>span {
    display: flex;
    line-height: 1.2;
}
.cs_check a {
    color: #000;
}
.style-prefer-list .cs_check span {
    align-items: center;
    line-height: 1;
}
.toggle-password, .toggle-password.hide-pass  {
    position: absolute;
    right: 8px;
    top: 11px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    width: 20px;
    height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM208.9 175.1C241 156.2 278.1 144 320 144C385.2 144 438.8 173.6 479.9 211.7C518.4 247.4 545 290 558.5 320C544.9 350 518.3 392.5 479.9 428.3C476.8 431.1 473.7 433.9 470.5 436.7L425.8 392C439.8 371.5 448 346.7 448 320C448 249.3 390.7 192 320 192C293.3 192 268.5 200.2 248 214.2L208.9 175.1zM390.9 357.1L282.9 249.1C294 243.3 306.6 240 320 240C364.2 240 400 275.8 400 320C400 333.4 396.7 346 390.9 357.1zM135.4 237.2L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L384.2 486C364.2 492.4 342.8 496 320 496C254.8 496 201.2 466.4 160.1 428.3C121.6 392.6 95 350 81.5 320C91.9 296.9 110.1 266.4 135.5 237.2z"/></svg>');
    background-repeat: no-repeat;
    opacity: 0.8;
}
.toggle-password.show-pass{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 144C254.8 144 201.2 173.6 160.1 211.7C121.6 247.5 95 290 81.4 320C95 350 121.6 392.5 160.1 428.3C201.2 466.4 254.8 496 320 496C385.2 496 438.8 466.4 479.9 428.3C518.4 392.5 545 350 558.6 320C545 290 518.4 247.5 479.9 211.7C438.8 173.6 385.2 144 320 144zM127.4 176.6C174.5 132.8 239.2 96 320 96C400.8 96 465.5 132.8 512.6 176.6C559.4 220.1 590.7 272 605.6 307.7C608.9 315.6 608.9 324.4 605.6 332.3C590.7 368 559.4 420 512.6 463.4C465.5 507.1 400.8 544 320 544C239.2 544 174.5 507.2 127.4 463.4C80.6 419.9 49.3 368 34.4 332.3C31.1 324.4 31.1 315.6 34.4 307.7C49.3 272 80.6 220 127.4 176.6zM320 400C364.2 400 400 364.2 400 320C400 290.4 383.9 264.5 360 250.7C358.6 310.4 310.4 358.6 250.7 360C264.5 383.9 290.4 400 320 400zM240.4 311.6C242.9 311.9 245.4 312 248 312C283.3 312 312 283.3 312 248C312 245.4 311.8 242.9 311.6 240.4C274.2 244.3 244.4 274.1 240.5 311.5zM286 196.6C296.8 193.6 308.2 192.1 319.9 192.1C328.7 192.1 337.4 193 345.7 194.7C346 194.8 346.2 194.8 346.5 194.9C404.4 207.1 447.9 258.6 447.9 320.1C447.9 390.8 390.6 448.1 319.9 448.1C258.3 448.1 206.9 404.6 194.7 346.7C192.9 338.1 191.9 329.2 191.9 320.1C191.9 309.1 193.3 298.3 195.9 288.1C196.1 287.4 196.2 286.8 196.4 286.2C208.3 242.8 242.5 208.6 285.9 196.7z"/></svg>');
}
.readonly_wrapper {
    position: relative;
}
span.readonly_edit svg {
    width: 17px;
}
span.readonly_edit {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    cursor: pointer;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_submit::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/wp-content/themes/faisal/assets/img/btn-loader-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    display: none;
}
.btn_submit.loading::before {
    display: block;
}
.login-stylepreference-group {
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.verification_wrap {
    display: flex;
    max-width: 90%;
    margin: auto;
    margin-bottom: 40px;
    position: relative;
}

.modal-content .otp_mail {
    text-align: center;
    font-size: 16px;
    margin-bottom: 23px;
}

.verification_wrap .btn_resend {
    min-width: 85px;
    border: none;
    background: #000;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
    transition: 0.3s;
}
.verification_wrap .btn_resend[disabled] {
    opacity: 0.5;
    pointer-events: none;
}
.verification_wrap .btn_resend:hover {
    background: #262626;
}
.verification_wrap label.error {
    position: absolute;
    top: 100%;
}
.auth-wrapper {
    padding: 100px 0;
}
.auth_title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 7px;
}
.otp-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 7px;
}
.otp-input {
    width: 55px !important;
    height: 60px;
    text-align: center;
    font-size: 22px !important;
    border: 1px solid #ddd !important;
    background: #fafafa;
    border-radius: 0;
    transition: 0.2s ease;
}
.otp-input:focus {
    border-color: #800080; /* purple like screenshot */
    background: #fff;
    outline: none;
}
.otp-input.filled {
    background: #fff;
    border-color: #000;
}
.verification_wrap.otp_verification_wrap {
    flex-direction: column;
    gap: 13px;
    justify-content: center;
    align-items: center;
}
.verification_wrap.otp_verification_wrap .btn_resend {
    padding: 8px;
}
.login_otp p.otp_phone {
    text-align: center;
}
.verification_wrap.otp_verification_wrap label.error {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 7px;
    left: 50%;
    transform: translateX(-50%);
}
.login-input-group .verification_wrap.otp_verification_wrap {
    margin-bottom: 11px;
}
html[dir="rtl"] .cs_check input:checked + span::after {
    left: unset;
    right: 5px;
}
.fz_pass_btns {
    display: flex;
    gap: 12px;
}
.fz_reset_pass_alt {
    text-align: center;
    display: block;
    margin-top: 11px;
    color: #000;
    font-weight: 500;
}
.verification_wrap.verification_wrap {
    max-width: 100%;
    margin-bottom: 20px;
}
@media (max-width:567px) {
    .auth_container {
        padding: 20px 0;
    }
    .auth_title {
        font-size: 18px;
    }
    .promo-item h6 {
        font-size: 12px;
    }
    .promo-item p {
        font-size: 10px;
    }
    .otp-input {
        width: 40px !important;
        height: 50px;
        font-size: 18px !important;
    }
    .otp-container {
        gap: 8px;
    }
    .auth-wrapper {
        padding: 40px 0;
    }
}