.elementor-1661 .elementor-element.elementor-element-b45e03a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1661 .elementor-element.elementor-element-8d6f14b{background-color:var( --e-global-color-da64670 );margin:60px 60px calc(var(--kit-widget-spacing, 0px) + 60px) 60px;padding:50px 50px 50px 50px;border-radius:11px 11px 11px 11px;--e-form-steps-indicators-spacing:17px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-primary-color:var( --e-global-color-primary );--e-form-steps-indicator-active-secondary-color:#FAF9F600;--e-form-steps-indicator-completed-primary-color:#1BBF3D;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:3px;--e-form-steps-divider-gap:37px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group{padding-right:calc( 20px/2 );padding-left:calc( 20px/2 );margin-bottom:10px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-form-fields-wrapper{margin-left:calc( -20px/2 );margin-right:calc( -20px/2 );margin-bottom:-10px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group.recaptcha_v3-bottomleft, .elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-labels-inline .elementor-field-group > label{padding-left:8px;}body:not(.rtl) .elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-labels-inline .elementor-field-group > label{padding-right:8px;}body .elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-labels-above .elementor-field-group > label{padding-bottom:8px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group > label, .elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-subgroup label{color:var( --e-global-color-secondary );}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group > label{font-family:"Inter", Sans-serif;font-weight:600;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-type-html{padding-bottom:2px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group .elementor-field, .elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-subgroup label{font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:var( --e-global-color-accent );border-radius:8px 8px 8px 8px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-field-group .elementor-select-wrapper select{background-color:var( --e-global-color-accent );border-radius:8px 8px 8px 8px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-button span{justify-content:center;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-button{font-family:"Inter", Sans-serif;font-weight:700;padding:0px 0px 0px 0px;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .e-form__buttons__wrapper__button-next{background-color:#114594;color:#ffffff;transition-duration:200ms;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-button[type="submit"]{background-color:#114594;color:#ffffff;transition-duration:200ms;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-button[type="submit"] svg *{fill:#ffffff;transition-duration:200ms;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-text );color:#ffffff;transition-duration:200ms;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .e-form__buttons__wrapper__button-next:hover{background-color:var( --e-global-color-secondary );color:#ffffff;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-button[type="submit"]:hover{background-color:var( --e-global-color-secondary );color:#ffffff;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .e-form__buttons__wrapper__button-previous:hover{background-color:var( --e-global-color-secondary );color:#ffffff;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .elementor-message{font-family:"Inter", Sans-serif;font-size:25px;font-weight:600;}.elementor-1661 .elementor-element.elementor-element-8d6f14b .e-form__indicators__indicator, .elementor-1661 .elementor-element.elementor-element-8d6f14b .e-form__indicators__indicator__label{font-family:"Inter", Sans-serif;font-size:19px;font-weight:600;}body.elementor-page-1661:not(.elementor-motion-effects-element-type-background), body.elementor-page-1661 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}:root{--page-title-display:none;}/* Start custom CSS for form, class: .elementor-element-8d6f14b */.elementor-1661 .elementor-element.elementor-element-8d6f14b .section-divider {
  
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D81E2F; /* Your brand red */
    margin: 28px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBE5D8;
    width: 100%;
}
.pw-strength-wrapper {
    margin-top: 12px;
    margin-bottom: 20px;
    width: 100%;
}
.strength-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.strength-label { 
    font-size: 11px; 
    color: #5A6A8A; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}
#strength-text { 
    font-size: 11px; 
    font-weight: 700; 
}

.strength-meter { 
    display: flex; 
    gap: 6px; 
    height: 6px; 
}
.strength-seg { 
    flex: 1; 
    background: #EBE5D8; /* Empty color */
    border-radius: 4px; 
    transition: all 0.4s ease; 
}

/* Colors applied by the Script */
.strength-seg.weak { background: #D81E2F !important; }
.strength-seg.medium { background: #FFC107 !important; }
.strength-seg.strong { background: #1a7a3a !important; }

/* When the form has a mismatch, disable the Next button */
/* When the form has a mismatch class, the Next button becomes a ghost */
/* The "Ghost" Lock for the Next Button */
.bdlo-pw-lock .e-form__buttons__wrapper__button-next {
    opacity: 0.4 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Base style for strength bars */
.strength-seg {
    height: 6px;
    flex: 1;
    background: #EBE5D8;
    border-radius: 4px;
    transition: 0.3s;
}

/* Optional: Red border for invalid phone while typing */
.phone-error {
    border-color: #D81E2F !important;
}
/* Position the eye icon container */
.elementor-field-group {
    position: relative;
}

.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 38px; /* Adjust this based on your label height */
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    color: #5A6A8A;
    width: 20px;
    height: 20px;
}

.password-toggle-icon:hover {
    color: #1a7a3a;
}

/* Ensure strength bars don't overlap with icons */
.pw-strength-wrapper {
    position: relative;
    z-index: 5;
}
/* ============================================================
   1. FORM SECURITY & LOCK LOGIC
   ============================================================ */
/* Prevents clicking 'Next' or 'Submit' if validation fails */
.bdlo-pw-lock .e-form__buttons__wrapper__button-next,
.bdlo-pw-lock .elementor-button[type="submit"] {
    opacity: 0.4 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ============================================================
   2. PASSWORD & INPUT UI
   ============================================================ */
/* Eye Toggle Positioning */
.elementor-field-group { 
    position: relative; 
}

.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 42px; /* Adjusted for standard label height */
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    color: #5A6A8A;
    width: 20px;
    height: 20px;
    transition: color 0.2s ease;
}

.password-toggle-icon:hover {
    color: #1a7a3a; /* Turns green on hover */
}

/* Password Strength Segments (Optional if using visual bars) */
.strength-seg {
    height: 6px;
    flex: 1;
    background: #EBE5D8;
    border-radius: 4px;
    transition: 0.3s;
    margin-top: 5px;
}

/* ============================================================
   3. REVIEW & SUBMIT PAGE (The "Posh" Layout)
   ============================================================ */
/* The Blue Student ID Header Box */
.id-display-box {
    background: #112956; /* Deep Navy */
    border-radius: 8px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(17, 41, 86, 0.15);
}

.id-text-group p { 
    font-size: 12px; 
    opacity: 0.8; 
    margin: 0 0 5px 0; 
    letter-spacing: 0.5px;
}

.id-text-group h2 { 
    font-size: 26px; 
    font-weight: 700;
    letter-spacing: 2px; 
    margin: 0; 
    color: #ffffff;
}

.copy-id-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.copy-id-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Section Labels (e.g., PERSONAL INFORMATION) */
.review-section-label {
    color: #D81E2F; /* BDLO Official Red */
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    margin: 25px 0 12px 0;
    text-transform: uppercase;
}

/* The Data Grid */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns like the sample image */
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    overflow: hidden;
    background: #F0F0F0; /* Creates the thin grey border lines */
    gap: 1px; 
}

.review-cell {
    padding: 18px 20px;
    background: #FFFFFF;
}

.review-cell label {
    display: block;
    font-size: 10px;
    color: #8C8C8C; /* Muted label color */
    margin-bottom: 5px;
    font-weight: 500;
    text-transform: uppercase;
}

.review-cell span {
    font-weight: 600;
    color: #112956; /* Navy value color */
    font-size: 15px;
    display: block;
}
/* --- 1. THE BLUE ID HEADER BOX --- */
.id-display-box {
    background: #112956;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(17, 41, 86, 0.15);
}

.id-text-group p { 
    font-size: 12px; 
    opacity: 0.8; 
    margin: 0 0 5px 0; 
    letter-spacing: 0.5px;
}

.id-text-group h2 { 
    font-size: 26px; 
    font-weight: 700;
    letter-spacing: 2px; 
    margin: 0; 
    color: #ffffff !important;
}

.copy-id-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* --- 2. SECTION TITLES (E.G. PERSONAL INFO) --- */
.review-section-label {
    color: #D81E2F; /* BDLO Red */
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    margin: 25px 0 12px 0;
    text-transform: uppercase;
    display: block;
    width: 100%;
}

/* --- 3. THE DATA GRID --- */
.review-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Forces 2 columns */
    border: 1px solid #EAEAEA !important;
    border-radius: 8px;
    overflow: hidden;
    background: #F0F0F0; /* Grid line color */
    gap: 1px; 
    width: 100%;
}

.review-cell {
    padding: 18px 20px !important;
    background: #FFFFFF !important;
    display: flex;
    flex-direction: column;
}

.review-cell label {
    display: block !important;
    font-size: 10px !important;
    color: #8C8C8C !important;
    margin-bottom: 5px !important;
    font-weight: 500;
    text-transform: uppercase;
}

.review-cell span {
    font-weight: 600 !important;
    color: #112956 !important;
    font-size: 15px !important;
    display: block;
}
.strength-seg.weak { background: #D81E2F !important; }
.strength-seg.medium { background: #FFC107 !important; }
.strength-seg.strong { background: #1a7a3a !important; }
.photo-review-container {
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
.elementor-message-danger {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 5px !important;
    padding: 15px !important;
    font-weight: bold !important;
    margin-top: 20px !important;
}
/* SUCCESS MESSAGE CONTAINER */
.elementor-message-success {
    background-color: #f0fdf4 !important; /* Soft mint background */
    border: 2px solid #1a7a3a !important; /* BDLO Success Green */
    border-radius: 12px !important;
    padding: 25px !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    margin-top: 30px !important;
}

/* SUCCESS TEXT */
.elementor-message-success::before {
    content: '🎉'; /* Adding a small celebration icon */
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
}

.elementor-message-success {
    color: #112956 !important; /* Deep Blue text */
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

/* SUBTEXT EFFECT */
.elementor-message-success::after {
    content: 'Please wait, redirecting you to your dashboard...';
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #5A6A8A;
    margin-top: 8px;
}
#rev-photo-preview {
    width: 120px;
    height: 120px;
    object-fit: cover; /* Keeps the face from stretching */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 4. MOBILE RESPONSIVENESS --- */
@media (max-width: 767px) {
    .review-grid { 
        grid-template-columns: 1fr !important; /* Stack to 1 column on mobile */
    }
    
    .id-display-box {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}
/* ============================================================
   4. RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width: 767px) {
    /* Collapse grid to single column on mobile */
    .review-grid { 
        grid-template-columns: 1fr; 
    } 
    
    .id-display-box { 
        flex-direction: column; 
        text-align: center; 
        gap: 15px; 
        padding: 20px;
    }
    
    .id-text-group h2 { 
        font-size: 22px; 
        
    }/* End custom CSS */