/* =========================================================
   MODERN OTP / REGISTRATION DIALOG
   ========================================================= */

.modern-otp-dialog {
    width: min(440px, 92vw) !important;
    max-width: 92vw !important;
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden;
}


/* Dialog header */
 


/* Remove default panel styling */
.modern-otp-dialog .ui-panel {
    border: none !important;
    box-shadow: none !important;
}


/* Dialog content */
.modern-otp-dialog .ui-dialog-content {
    padding: 0 !important;
    overflow-x: hidden;
}


/* =========================================================
   OTP CARD
   ========================================================= */

.otp-card {
    padding: clamp(20px, 5vw, 32px);
    background: #ffffff;
}


/* OTP Header */
.otp-header {
    text-align: center;
    margin-bottom: 25px;
}


/* Icon */
.otp-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef2ff;
    color: #1123fb;

    font-size: 25px;
}


.otp-header h2 {
    margin: 0;

    font-size: clamp(20px, 5vw, 25px);
    font-weight: 700;

    color: #172554;
}


.otp-header p {
    margin: 8px auto 0;

    max-width: 340px;

    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.5;

    color: #64748b;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.form-field,
.registration-field {
    margin-bottom: 18px;
}


.modern-label {
    display: block;

    margin-bottom: 7px;

    font-size: clamp(13px, 3.5vw, 14px);
    font-weight: 600;

    color: #334155;
}


/* Inputs */
.modern-input {
    width: 100% !important;
    height: 42px !important;

    box-sizing: border-box !important;

    padding: 8px 12px !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    font-size: 15px !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.modern-input:focus {
    border-color: #1123fb !important;

    box-shadow: 0 0 0 3px rgba(17, 35, 251, 0.10) !important;

    outline: none !important;
}


/* OTP input */
.otp-input {
    letter-spacing: 3px;
    font-weight: 600;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.message-container {
    min-height: 20px;

    margin-top: 5px;
    margin-bottom: 8px;
}


.success-message {
    color: #15803d !important;

    font-size: 13px !important;
    line-height: 1.4;
}


.error-message {
    color: #dc2626 !important;

    font-size: 13px !important;
    line-height: 1.4;
}


/* =========================================================
   SIGN UP LINK
   ========================================================= */

.signup-link {
    margin-top: 18px;

    text-align: center;

    font-size: 13px;

    color: #64748b;
}


.modern-link {
    margin-left: 5px;

    color: #1123fb !important;

    font-weight: 600;

    text-decoration: none;
}


.modern-link:hover {
    text-decoration: underline;
}


/* =========================================================
   DIALOG FOOTER
   ========================================================= */

.modern-otp-dialog .ui-dialog-footer {
    padding: 0 20px 22px !important;

    border: none !important;

    background: #ffffff !important;
}


.dialog-footer {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    width: 100%;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.modern-primary-button,
.modern-retry-button,
.modern-secondary-button {
    min-width: 120px !important;
    height: 40px !important;

    padding: 8px 18px !important;

    border: none !important;
    border-radius: 9px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.modern-validate-button {
    background: rgb(0, 128, 64) !important;
    color: #ffffff !important;
}

.modern-validate-button:hover {
    background:  #00ff40    !important;
    box-shadow: 0 5px 14px rgba(17, 35, 251, 0.25);
}



.modern-retry-button {
    background: #008080!important;
    color: #ffffff !important;
}

.modern-retry-button:hover {
    background: #0b1ed6 !important;
    box-shadow: 0 5px 14px rgba(17, 35, 251, 0.25);
}


.modern-primary-button {
    background: #1123fb !important;
    color: #ffffff !important;
}

.modern-primary-button:hover {
    background: #0b1ed6 !important;
    box-shadow: 0 5px 14px rgba(17, 35, 251, 0.25);
}


.modern-secondary-button {
    background: #e2e8f0 !important;
    color: #334155 !important;
}


.modern-secondary-button:hover {
    background: #cbd5e1 !important;
}


.modern-primary-button:active,
.modern-secondary-button:active {
    transform: scale(0.98);
}


/* =========================================================
   REGISTRATION
   ========================================================= */

.modern-registration-panel .ui-panel-titlebar {
    padding: 18px 24px !important;

    border: none !important;

    background: #ffffff !important;

    color: #172554 !important;

    font-size: 20px !important;
    font-weight: 700 !important;
}


.registration-container {
    padding: 5px clamp(18px, 5vw, 28px) 25px;
}


/* Mobile number two-column layout */
.mobile-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}


/* Registration buttons */
.registration-buttons {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 10px;
}


.registration-messages {
    min-height: 30px;

    margin-top: 15px;

    text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 600px) {

    .modern-otp-dialog {
        width: 92vw !important;
        max-width: 92vw !important;
    }

    .otp-card {
        padding: 22px 18px;
    }

    .modern-otp-dialog .ui-dialog-footer {
        padding: 0 18px 18px !important;
    }

    .modern-primary-button,
    .modern-secondary-button {
        min-width: 110px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .modern-otp-dialog {
        width: 94vw !important;
        max-width: 94vw !important;

        border-radius: 14px !important;
    }


    .otp-card {
        padding: 20px 16px;
    }


    .otp-icon {
        width: 50px;
        height: 50px;

        font-size: 21px;
    }


    .otp-header {
        margin-bottom: 20px;
    }


    .modern-input {
        height: 40px !important;
    }


    /* Stack mobile number fields */
    .mobile-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    /* Stack buttons */
    .dialog-footer {
        flex-direction: column;

        gap: 8px;
    }


    .registration-buttons {
        flex-direction: column;

        gap: 8px;
    }


    .modern-primary-button,
    .modern-secondary-button {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 350px) {

    .modern-otp-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
    }


    .otp-card {
        padding: 18px 12px;
    }


    .registration-container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .otp-header h2 {
        font-size: 19px;
    }


    .otp-header p {
        font-size: 12px;
    }
}


.modern-close-button {
    background: #dc2626 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;

    min-width: 120px !important;
    height: 40px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    transition: all 0.2s ease;
}

.modern-close-button:hover {
    background: #b91c1c !important;
    box-shadow: 0 5px 14px rgba(220, 38, 38, 0.25);
}

.modern-close-button:active {
    transform: scale(0.98);
}

/* ============================
   OTP HEADER
   ============================ */

.otp-header {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: clamp(18px, 4vw, 28px);
}


/* Icon */
.otp-icon {
    width: clamp(45px, 12vw, 60px);
    height: clamp(45px, 12vw, 60px);

    margin: 0 auto clamp(8px, 2vw, 14px);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef2ff;
    color: #1123fb;

    font-size: clamp(20px, 5vw, 26px);
}


/* Heading */
.otp-header h2 {
    margin: 0;

    font-size: clamp(19px, 5vw, 26px);
    line-height: 1.2;

    font-weight: 700;

    color: #172554;

    word-break: break-word;
}


/* Description */
.otp-header p {
    width: 100%;
    max-width: 360px;

    margin: clamp(7px, 2vw, 10px) auto 0;

    padding: 0 8px;

    box-sizing: border-box;

    font-size: clamp(12px, 3.5vw, 15px);
    line-height: 1.5;

    color: #64748b;

    overflow-wrap: break-word;
}