/* ✅ General Styling */

.left,
.right {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.whatsapp-login-register {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width:100%;
    margin: 30px auto;
    gap: 100px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

/* Reduce spacing between form rows */
.woocommerce-form-row {
    margin-bottom: 5px !important;
}

/* ✅ Fade-in Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ✅ Login & Register Box */
.whatsapp-otp-login-wrapper,
.whatsapp-otp-register-wrapper {
    width: 10;
    padding: 25px;
    border: 2px solid #A52A2A; /* Brown Border */
    border-radius: 12px;
    background: #faf3e0;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease-in-out;
    position: relative;
}

/* ✅ Floating Effect on Hover */
.whatsapp-otp-login-wrapper:hover,
.whatsapp-otp-register-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

/* ✅ Headings */
.whatsapp-otp-login-wrapper h2,
.whatsapp-otp-register-wrapper h2 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #A52A2A; /* Brown */
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}


/* ✅ Input Fields */
.whatsapp-otp-login-wrapper input,
.whatsapp-otp-register-wrapper input {
    width: 94%;
    padding: 12px;
    margin: 8px 0;
    border: 2px solid #b88917; /* Gold Border */
    border-color: #b88917 !important; /* Lighter Gold */
    border-radius: 8px;
    font-size: 16px;
    transition: 0.3s;
}

/* ✅ Input Focus Effect (Glowing Border) */
.whatsapp-otp-login-wrapper input:focus,
.whatsapp-otp-register-wrapper input:focus {
    border: 2px solid #d4a017;
    border-color: #d4a017; /* Lighter Gold */
    box-shadow: 0px 4px 10px rgba(165, 42, 42, 0.2);
    outline: none;
}

/* ✅ Buttons */
.whatsapp-otp-login-wrapper button,
.whatsapp-otp-register-wrapper button {
    width: 100%;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0px 4px 10px rgba(165, 42, 42, 0.3);
    transform: scale(1);
}

.whatsapp-otp-login-wrapper button:hover,
.whatsapp-otp-register-wrapper button:hover {
    background-color: var(--hover-color, #8B6914) !important;
    box-shadow: 0px 6px 15px rgba(139, 30, 30, 0.3);
}


.whatsapp-otp-login-wrapper button:active,
.whatsapp-otp-register-wrapper button:active {
    transform: scale(0.98);
}

/* ✅ OTP Fields */
#otp_field, #verify_otp_section,
#otp_field_register, #verify_otp_section_register {
    display: none;
    text-align: center;
}

/* ✅ Responsive Design for Mobile Screens */
@media screen and (max-width: 768px) {
    .whatsapp-login-register {
        flex-direction: column; /* Stack Login & Register */
        align-items: center;
    }

    .whatsapp-otp-login-wrapper,
    .whatsapp-otp-register-wrapper {
        width: 86%; /* Adjust width for smaller screens */
        margin-bottom: 15px;
    }
}

/* ✅ Adjust Button Size & Input Fields for Mobile */
@media screen and (max-width: 480px) {
    .whatsapp-otp-login-wrapper input,
    .whatsapp-otp-register-wrapper input {
        font-size: 14px; /* Reduce font size for small screens */
        padding: 10px;
    }

    .whatsapp-otp-login-wrapper button,
    .whatsapp-otp-register-wrapper button {
        font-size: 14px;
        padding: 12px;
    }
}

/* contact Form CSS v.1.0.2 */

#cf7_send_otp,
#cf7-verify-otp,
.wpcf7-form-control.wpcf7-submit {
    width: 100%;
}

.cf7-afojet-whatsapp-otp {
    margin: 10px 0; /* Top & Bottom: 10px, Left & Right: 0 */
}

#phone {
    width: 100%;
}

.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap input[type="text"]{
    width: 100% !important;
    box-sizing: border-box; /* Ensures padding/border don't exceed 100% */
    max-width: 100%; /* Prevent overflow inside containers */
    padding: 10px;
}

.iti.iti--allow-dropdown.iti--separate-dial-code.iti--show-flags {
    width: 100%;
}

.iti__tel-input {
    width: 100% !important;
    padding-left: 87px !important; /* Retain space for the country code dropdown */
    box-sizing: border-box;
}

.wpcf7-form-control-wrap textarea {
    width: 100% !important;
    box-sizing: border-box;
    max-width: 100%;
    resize: vertical; /* Optional: allows vertical resize only */
}


/* ✅ Buttons */
button#cf7_send_otp,
button#cf7-verify-otp,
.wpcf7-form-control-wrap input[type="submit"],
input.wpcf7-submit {
    width: 100%;
    color: #000000;
    border: none;
    padding: 14px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0px 4px 10px rgba(165, 42, 42, 0.3);
    transform: scale(1);
    Background:#d8d7d9
}

/* ========================
   ✅ NEW: OTP Status Styling
======================== */

/* OTP Status Messages */
#otp-status {
    margin-top: 10px;
    font-weight: 600;
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* Success */
#otp-status.success {
    background: #e6f9ed;
    border: 1px solid #28a745;
    color: #155724;
}
#otp-status.success::before {
    content: "✔ ";
    font-weight: bold;
}

/* Error */
#otp-status.error {
    background: #fcebea;
    border: 1px solid #dc3545;
    color: #721c24;
}
#otp-status.error::before {
    content: "✘ ";
    font-weight: bold;
}

/* Info (loading) */
#otp-status.info {
    background: #e8f3fc;
    border: 1px solid #007bff;
    color: #004085;
}
#otp-status.info::before {
    content: "⌛ ";
}