@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Syne:wght@400..800&display=swap');

 
/* ===================================== COLOR VARIABLES ===================================== */
 :root {
     --green-dark: #4A754A;
     --green-light: #93B574;
     --purple-light: #AC4F7E;
     --purple-dark: #5A385F;
     --page-bg: #FEEBF2;
     --dark: #2F3430;
     --text: #444A46;
     --muted: #777D79;
     --border: #E5E5E5;
     --white: #FFFFFF;
}
/* ===================================== GLOBAL ===================================== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: "Poppins", Sans-serif;
     background: var(--page-bg);
     color: var(--text);
}
/* ===================================== LOGIN SECTION ===================================== */
 .ni-login-section {
     min-height: 100vh;
     padding: 50px 15px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
}
/* Background Decoration */
 .ni-login-section::before {
     content: "";
     position: absolute;
     width: 250px;
     height: 250px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -120px;
     left: -80px;
     opacity: 0.7;
}
 .ni-login-section::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     background: var(--green-light);
     border-radius: 50%;
     right: -170px;
     bottom: -150px;
     opacity: 0.25;
}
/* ===================================== MAIN LOGIN BOX ===================================== */
 .ni-login-box {
     width: 100%;
     max-width: 1100px;
     margin: auto;
     display: flex;
     position: relative;
     z-index: 2;
     overflow: hidden;
     background: var(--white);
     border-radius: 25px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, 0.15);
}
/* ===================================== LEFT SIDE ===================================== */
 .ni-login-left {
     width: 50%;
     min-height: 650px;
     padding: 55px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background-image: linear-gradient(50deg, #FA649B 0%, #332D50 100%);
     background-size: cover;
     background-position: center;
}
/* Decorative Shape */
 .ni-login-left::before {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     right: -180px;
     bottom: -170px;
     border-radius: 50%;
     background: var(--green-light);
     opacity: 0.3;
}
 .ni-login-left::after {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     left: -90px;
     top: -90px;
     border-radius: 50%;
     border: 35px solid rgba(254, 235, 242, 0.2);
}
 .ni-left-content {
     position: relative;
     z-index: 2;
     color: #fff;
}
/* ===================================== LOGO ===================================== */
 .ni-logo {
     display: inline-block;
     margin-bottom: 55px;
}
 .ni-logo img {
     width: 230px;
     max-width: 100%;
     height: auto;
}
/* ===================================== LEFT HEADING ===================================== */
 .ni-left-content h1 {
     font-size: 44px;
     line-height: 1.15;
     font-weight: 800;
     margin-bottom: 20px;
}
 .ni-left-content h1 span {
     color: #DCEBCB;
}
 .ni-left-content p {
     max-width: 450px;
     color: rgba(255, 255, 255, 0.85);
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 35px;
}
/* ===================================== FEATURES ===================================== */
 .ni-feature {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 17px;
     font-size: 15px;
     font-weight: 500;
}
 .ni-feature-icon {
     width: 42px;
     height: 42px;
     min-width: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.35);
     color: #fff;
}
/* ===================================== RIGHT SIDE ===================================== */
 .ni-login-right {
     width: 50%;
     padding: 60px;
     display: flex;
     align-items: center;
     background: #fff;
}
 .ni-form-wrapper {
     width: 100%;
     max-width: 430px;
     margin: auto;
}
/* ===================================== LOGIN HEADING ===================================== */
 .ni-login-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 8px 15px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
 .ni-login-title {
     margin-bottom: 35px;
}
 .ni-login-title h2 {
     color: var(--dark);
     font-size: 34px;
     font-weight: 800;
     margin-bottom: 10px;
}
 .ni-login-title p {
     color: var(--muted);
     font-size: 15px;
     margin: 0;
}
/* ===================================== FORM ===================================== */
 .ni-form-label {
     display: block;
     margin-bottom: 8px;
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
}
 .ni-input-box {
     position: relative;
}
 .ni-input-icon {
     position: absolute;
     left: 17px;
     top: 50%;
     transform: translateY(-50%);
     color: #9AA09C;
     font-size: 16px;
     z-index: 2;
}
 .ni-form-control {
     width: 100%;
     height: 56px;
     padding: 0 48px;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
     color: var(--dark);
     font-size: 15px;
     outline: none;
     transition: 0.3s;
}
 .ni-form-control::placeholder {
     color: #A5AAA7;
}
 .ni-form-control:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74, 117, 74, 0.10);
}
/* ===================================== PASSWORD TOGGLE ===================================== */
 .ni-password-toggle {
     position: absolute;
     right: 17px;
     top: 50%;
     transform: translateY(-50%);
     color: #9AA09C;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-password-toggle:hover {
     color: var(--purple-dark);
}
/* ===================================== REMEMBER / FORGOT ===================================== */
 .ni-login-options {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 5px 0 25px;
}
 .ni-remember {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--muted);
     font-size: 14px;
     cursor: pointer;
}
 .ni-remember input {
     width: 16px;
     height: 16px;
     accent-color: var(--green-dark);
}
 .ni-forgot {
     color: var(--purple-dark);
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
}
 .ni-forgot:hover {
     color: var(--purple-light);
}
/* ===================================== LOGIN BUTTON ===================================== */
 .ni-login-btn {
     width: 100%;
     height: 56px;
     border: none;
     border-radius: 50px;
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-login-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74, 117, 74, 0.25);
}
/* ===================================== DIVIDER ===================================== */
 .ni-divider {
     display: flex;
     align-items: center;
     gap: 15px;
     margin: 28px 0;
     color: #A0A5A2;
     font-size: 12px;
     font-weight: 600;
}
 .ni-divider::before, .ni-divider::after {
     content: "";
     height: 1px;
     background: var(--border);
     flex: 1;
}
/* ===================================== GOOGLE BUTTON ===================================== */
 .ni-google-btn {
     width: 100%;
     height: 54px;
     border: 1px solid var(--border);
     border-radius: 50px;
     background: #fff;
     color: var(--dark);
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
}
 .ni-google-btn:hover {
     border-color: var(--purple-light);
     background: #FEF8FA;
}
 .ni-google-btn:disabled,
 .ni-google-btn[disabled] {
     opacity: 0.5;
     cursor: not-allowed;
     background: #f9f9f9;
}
 .ni-google-btn:disabled:hover,
 .ni-google-btn[disabled]:hover {
     border-color: var(--border);
     background: #f9f9f9;
}
 .ni-google-btn i {
     margin-right: 10px;
     color: #DB4437;
}
/* ===================================== REGISTER ===================================== */
 .ni-register {
     margin-top: 28px;
     text-align: center;
     color: var(--muted);
     font-size: 14px;
}
 .ni-register a {
     color: var(--purple-dark);
     font-weight: 700;
     text-decoration: none;
}
 .ni-register a:hover {
     color: var(--purple-light);
}
/* ===================================== SECURITY ===================================== */
 .ni-secure {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 25px;
     color: #9AA09C;
     font-size: 12px;
}
 .ni-secure i {
     color: var(--green-dark);
}
/* ===================================== TABLET ===================================== */
 @media (max-width: 991px) {
     .ni-login-box {
         max-width: 800px;
    }
     .ni-login-left {
         padding: 45px 35px;
    }
     .ni-login-right {
         padding: 45px 35px;
    }
     .ni-left-content h1 {
         font-size: 34px;
    }
     .ni-logo {
         margin-bottom: 40px;
    }
}
/* ===================================== MOBILE ===================================== */
 @media (max-width: 767px) {
     .ni-login-section {
         padding: 20px 12px;
    }
     .ni-login-box {
         display: block;
         border-radius: 20px;
    }
     .ni-login-left, .ni-login-right {
         width: 100%;
    }
     .ni-login-left {
         min-height: auto;
         padding: 40px 25px;
    }
     .ni-logo {
         margin-bottom: 35px;
    }
     .ni-logo img {
         width: 190px;
    }
     .ni-left-content h1 {
         font-size: 31px;
    }
     .ni-left-content p {
         font-size: 14px;
    }
     .ni-login-right {
         padding: 40px 25px;
    }
     .ni-login-title h2 {
         font-size: 29px;
    }
}
/* ===================================== SMALL MOBILE ===================================== */
 @media (max-width: 400px) {
     .ni-login-right {
         padding: 35px 20px;
    }
     .ni-login-options {
         align-items: flex-start;
         flex-direction: column;
         gap: 12px;
    }
}
/* ===================================== SIGNUP SECTION ===================================== */
 .ni-signup-section {
     min-height: 100vh;
     padding: 50px 15px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
}
/* ===================================== BACKGROUND DECORATION ===================================== */
 .ni-signup-section::before {
     content: "";
     position: absolute;
     width: 250px;
     height: 250px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -120px;
     left: -80px;
     opacity: 0.7;
}
 .ni-signup-section::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     background: var(--green-light);
     border-radius: 50%;
     right: -170px;
     bottom: -150px;
     opacity: 0.25;
}
/* ===================================== MAIN SIGNUP BOX ===================================== */
 .ni-signup-box {
     width: 100%;
     max-width: 1100px;
     margin: auto;
     display: flex;
     position: relative;
     z-index: 2;
     overflow: hidden;
     background: var(--white);
     border-radius: 25px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, 0.15);
}
/* ===================================== LEFT SIDE ===================================== */
 .ni-signup-left {
     width: 50%;
     min-height: 650px;
     padding: 55px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background-image: linear-gradient( 50deg, #FA649B 0%, #332D50 100% );
     background-size: cover;
     background-position: center;
}
/* Decorative Shape */
 .ni-signup-left::before {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     right: -180px;
     bottom: -170px;
     border-radius: 50%;
     background: var(--green-light);
     opacity: 0.3;
}
 .ni-signup-left::after {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     left: -90px;
     top: -90px;
     border-radius: 50%;
     border: 35px solid rgba(254, 235, 242, 0.2);
}
/* ===================================== FEATURES ===================================== */
 .ni-feature {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 17px;
     font-size: 15px;
     font-weight: 500;
}
 .ni-feature-icon {
     width: 42px;
     height: 42px;
     min-width: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.35);
     color: #fff;
}
/* ===================================== RIGHT SIDE ===================================== */
 .ni-signup-right {
     width: 50%;
     padding: 45px 60px;
     display: flex;
     align-items: center;
     background: #fff;
}
 .ni-form-wrapper {
     width: 100%;
     max-width: 450px;
     margin: auto;
}
/* ===================================== SIGNUP HEADING ===================================== */
 .ni-signup-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 8px 15px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
 .ni-signup-title {
     margin-bottom: 25px;
}
 .ni-signup-title h2 {
     color: var(--dark);
     font-size: 34px;
     font-weight: 800;
     margin-bottom: 10px;
}
 .ni-signup-title p {
     color: var(--muted);
     font-size: 15px;
     margin: 0;
}
/* ===================================== FORM ROW ===================================== */
 .ni-form-row {
     display: flex;
     gap: 15px;
}
 .ni-form-row .ni-form-group {
     width: 50%;
}
/* ===================================== FORM ===================================== */
 .ni-form-group {
     margin-bottom: 1.5rem!important;
}
 .ni-form-label {
     display: block;
     margin-bottom: 7px;
     color: var(--dark);
     font-size: 13px;
     font-weight: 600;
}
 .ni-input-box {
     position: relative;
}
 .ni-input-icon {
     position: absolute;
     left: 17px;
     top: 50%;
     transform: translateY(-50%);
     color: #9AA09C;
     font-size: 15px;
     z-index: 2;
}
 .ni-form-control {
     width: 100%;
     height: 52px;
     padding: 0 48px;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
     color: var(--dark);
     font-size: 14px;
     outline: none;
     transition: 0.3s;
}
 .ni-form-control::placeholder {
     color: #A5AAA7;
}
 .ni-form-control:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74, 117, 74, 0.10);
}
/* ===================================== PASSWORD TOGGLE ===================================== */
 .ni-password-toggle {
     position: absolute;
     right: 17px;
     top: 50%;
     transform: translateY(-50%);
     color: #9AA09C;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-password-toggle:hover {
     color: var(--purple-dark);
}
/* ===================================== TERMS ===================================== */
 .ni-terms {
     display: flex;
     align-items: flex-start;
     gap: 9px;
     margin: 5px 0 20px;
     color: var(--muted);
     font-size: 12px;
     line-height: 1.5;
     cursor: pointer;
}
 .ni-terms input {
     width: 16px;
     height: 16px;
     min-width: 16px;
     margin-top: 2px;
     accent-color: var(--green-dark);
}
 .ni-terms a {
     color: var(--purple-dark);
     font-weight: 600;
     text-decoration: none;
}
 .ni-terms a:hover {
     color: var(--purple-light);
}
/* ===================================== SIGNUP BUTTON ===================================== */
 .ni-signup-btn {
     width: 100%;
     height: 56px;
     border: none;
     border-radius: 50px;
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-signup-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74, 117, 74, 0.25);
}
/* ===================================== DIVIDER ===================================== */
 .ni-divider {
     display: flex;
     align-items: center;
     gap: 15px;
     margin: 20px 0;
     color: #A0A5A2;
     font-size: 11px;
     font-weight: 600;
}
 .ni-divider::before, .ni-divider::after {
     content: "";
     height: 1px;
     background: var(--border);
     flex: 1;
}
/* ===================================== GOOGLE BUTTON ===================================== */
 .ni-google-btn {
     width: 100%;
     height: 52px;
     border: 1px solid var(--border);
     border-radius: 50px;
     background: #fff;
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
}
 .ni-google-btn:hover {
     border-color: var(--purple-light);
     background: #FEF8FA;
}
 .ni-google-btn:disabled,
 .ni-google-btn[disabled] {
     opacity: 0.5;
     cursor: not-allowed;
     background: #f9f9f9;
}
 .ni-google-btn:disabled:hover,
 .ni-google-btn[disabled]:hover {
     border-color: var(--border);
     background: #f9f9f9;
}
 .ni-google-btn i {
     margin-right: 10px;
     color: #DB4437;
}
/* ===================================== LOGIN LINK ===================================== */
 .ni-login-link {
     margin-top: 20px;
     text-align: center;
     color: var(--muted);
     font-size: 13px;
}
 .ni-login-link a {
     color: var(--purple-dark);
     font-weight: 700;
     text-decoration: none;
}
 .ni-login-link a:hover {
     color: var(--purple-light);
}
/* ===================================== SECURITY ===================================== */
 .ni-secure {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 18px;
     color: #9AA09C;
     font-size: 11px;
}
 .ni-secure i {
     color: var(--green-dark);
}
/* ===================================== TABLET ===================================== */
 @media (max-width: 991px) {
     .ni-signup-box {
         max-width: 800px;
    }
     .ni-signup-left {
         padding: 45px 35px;
    }
     .ni-signup-right {
         padding: 40px 35px;
    }
}
/* ===================================== MOBILE ===================================== */
 @media (max-width: 767px) {
     .ni-signup-section {
         padding: 20px 12px;
    }
     .ni-signup-box {
         display: block;
         border-radius: 20px;
    }
     .ni-signup-left, .ni-signup-right {
         width: 100%;
    }
     .ni-signup-left {
         min-height: auto;
         padding: 40px 25px;
    }
     .ni-left-content h1 {
         font-size: 31px;
    }
     .ni-signup-right {
         padding: 40px 25px;
    }
     .ni-signup-title h2 {
         font-size: 29px;
    }
     .ni-form-row {
         display: block;
    }
     .ni-form-row .ni-form-group {
         width: 100%;
    }
}
/* ===================================== SMALL MOBILE ===================================== */
 @media (max-width: 400px) {
     .ni-signup-right {
         padding: 35px 20px;
    }
}
/* ===================================== FORGOT PASSWORD SECTION ===================================== */
 .ni-forgot-section {
     min-height: 100vh;
     padding: 50px 15px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
}
/* ===================================== BACKGROUND DECORATION ===================================== */
 .ni-forgot-section::before {
     content: "";
     position: absolute;
     width: 250px;
     height: 250px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -120px;
     left: -80px;
     opacity: 0.7;
}
 .ni-forgot-section::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     background: var(--green-light);
     border-radius: 50%;
     right: -170px;
     bottom: -150px;
     opacity: 0.25;
}
/* ===================================== MAIN BOX ===================================== */
 .ni-forgot-box {
     width: 100%;
     max-width: 1100px;
     margin: auto;
     display: flex;
     position: relative;
     z-index: 2;
     overflow: hidden;
     background: var(--white);
     border-radius: 25px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, 0.15);
}
/* ===================================== LEFT SIDE ===================================== */
 .ni-forgot-left {
     width: 50%;
     min-height: 650px;
     padding: 55px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background-image: linear-gradient( 50deg, #FA649B 0%, #332D50 100% );
     background-size: cover;
     background-position: center;
}
/* ===================================== LEFT DECORATIVE SHAPES ===================================== */
 .ni-forgot-left::before {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     right: -180px;
     bottom: -170px;
     border-radius: 50%;
     background: var(--green-light);
     opacity: 0.3;
}
 .ni-forgot-left::after {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     left: -90px;
     top: -90px;
     border-radius: 50%;
     border: 35px solid rgba(254, 235, 242, 0.2);
}
/* ===================================== FEATURES ===================================== */
 .ni-feature {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 17px;
     font-size: 15px;
     font-weight: 500;
}
 .ni-feature-icon {
     width: 42px;
     height: 42px;
     min-width: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.35);
     color: #fff;
}
/* ===================================== RIGHT SIDE ===================================== */
 .ni-forgot-right {
     width: 50%;
     padding: 60px;
     display: flex;
     align-items: center;
     background: #fff;
}
 .ni-form-wrapper {
     width: 100%;
     max-width: 430px;
     margin: auto;
}
/* ===================================== BADGE ===================================== */
 .ni-forgot-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 8px 15px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
/* ===================================== TITLE ===================================== */
 .ni-forgot-title {
     margin-bottom: 30px;
}
 .ni-forgot-title h2 {
     color: var(--dark);
     font-size: 34px;
     font-weight: 800;
     margin-bottom: 10px;
}
 .ni-forgot-title p {
     color: var(--muted);
     font-size: 15px;
     line-height: 1.7;
     margin: 0;
}
/* ===================================== FORM ===================================== */
 .ni-form-label {
     display: block;
     margin-bottom: 8px;
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
}
 .ni-input-box {
     position: relative;
}
 .ni-input-icon {
     position: absolute;
     left: 17px;
     top: 50%;
     transform: translateY(-50%);
     color: #9AA09C;
     font-size: 16px;
     z-index: 2;
}
 .ni-form-control {
     width: 100%;
     height: 56px;
     padding: 0 48px;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
     color: var(--dark);
     font-size: 15px;
     outline: none;
     transition: 0.3s;
}
 .ni-form-control::placeholder {
     color: #A5AAA7;
}
 .ni-form-control:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74, 117, 74, 0.10);
}
/* ===================================== BACK TO LOGIN ===================================== */
 .ni-back-login {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 25px;
     color: var(--muted);
     font-size: 14px;
}
 .ni-back-login a {
     color: var(--purple-dark);
     font-weight: 700;
     text-decoration: none;
}
 .ni-back-login a:hover {
     color: var(--purple-light);
}
/* ===================================== SECURITY ===================================== */
 .ni-secure {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 25px;
     color: #9AA09C;
     font-size: 12px;
}
 .ni-secure i {
     color: var(--green-dark);
}
/* ===================================== TABLET ===================================== */
 @media (max-width: 991px) {
     .ni-forgot-box {
         max-width: 800px;
    }
     .ni-forgot-left {
         padding: 45px 35px;
    }
     .ni-forgot-right {
         padding: 45px 35px;
    }
}
/* ===================================== MOBILE ===================================== */
 @media (max-width: 767px) {
     .ni-forgot-section {
         padding: 20px 12px;
    }
     .ni-forgot-box {
         display: block;
         border-radius: 20px;
    }
     .ni-forgot-left, .ni-forgot-right {
         width: 100%;
    }
     .ni-forgot-left {
         min-height: auto;
         padding: 40px 25px;
    }
     .ni-forgot-right {
         padding: 40px 25px;
    }
     .ni-forgot-title h2 {
         font-size: 29px;
    }
}
/* ===================================== SMALL MOBILE ===================================== */
 @media (max-width: 400px) {
     .ni-forgot-right {
         padding: 35px 20px;
    }
}
/* ===================================== NEW AUTH PAGES (VERIFY EMAIL, FORGOT PASSWORD, RESET PASSWORD) ===================================== */
 .ni-auth-container {
     min-height: 100vh;
     background: var(--page-bg);
     position: relative;
     overflow: hidden;
}
 .ni-auth-row {
     display: flex;
     min-height: 100vh;
     max-width: 1200px;
     margin: 0 auto;
     background: var(--white);
     box-shadow: 0 20px 60px rgba(90, 56, 95, 0.15);
}
/* LEFT SIDE - GRADIENT */
 .ni-auth-left {
     width: 50%;
     min-height: 100vh;
     padding: 60px;
     position: relative;
     overflow: hidden;
     background: linear-gradient(50deg, #FA649B 0%, #332D50 100%);
     display: flex;
     align-items: center;
     justify-content: center;
}
/* ===================================== BOOKING - ERROR BOX (Postcode Not Covered) ===================================== */
 .ni-error-box {
     background: #fff;
     border: 2px solid #e74c3c;
     border-radius: 12px;
     padding: 40px 32px;
     text-align: center;
     margin: 32px 0;
     box-shadow: 0 4px 12px rgba(231, 76, 60, 0.1);
}
 .ni-error-icon {
     font-size: 56px;
     color: #e74c3c;
     margin-bottom: 20px;
     display: block;
}
 .ni-error-content h3 {
     font-size: 26px;
     font-weight: 700;
     color: #2c3e50;
     margin-bottom: 16px;
     line-height: 1.3;
}
 .ni-error-content p {
     font-size: 16px;
     color: #5a6c7d;
     margin-bottom: 14px;
     line-height: 1.7;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
}
 .ni-error-content p strong {
     color: #2c3e50;
     font-weight: 600;
}
 .ni-error-actions {
     display: flex;
     gap: 16px;
     justify-content: center;
     margin-top: 28px;
     flex-wrap: wrap;
}
/* ===================================== BOOKING - EMPTY COURSES MESSAGE ===================================== */
 .ni-empty-courses {
     background: #f8f9fa;
     border: 2px dashed #cbd5e0;
     border-radius: 12px;
     padding: 48px 32px;
     text-align: center;
     margin: 32px 0;
}
 .ni-empty-courses .ni-error-icon {
     color: #a0aec0;
     font-size: 48px;
}
 .ni-empty-courses h3 {
     font-size: 22px;
     font-weight: 600;
     color: #2d3748;
     margin-bottom: 12px;
}
 .ni-empty-courses p {
     font-size: 15px;
     color: #718096;
     line-height: 1.6;
}
/* ===================================== BOOKING - ERROR BOX RESPONSIVE ===================================== */
 @media (max-width: 768px) {
     .ni-error-box {
         padding: 32px 24px;
    }
     .ni-error-content h3 {
         font-size: 22px;
    }
     .ni-error-content p {
         font-size: 15px;
    }
     .ni-error-actions {
         flex-direction: column;
    }
}
 .ni-auth-circles {
     position: absolute;
     inset: 0;
}
 .ni-circle {
     position: absolute;
     border-radius: 50%;
}
 .ni-circle-1 {
     width: 350px;
     height: 350px;
     right: -180px;
     bottom: -170px;
     background: var(--green-light);
     opacity: 0.3;
}
 .ni-circle-2 {
     width: 180px;
     height: 180px;
     left: -90px;
     top: -90px;
     border: 35px solid rgba(254, 235, 242, 0.2);
}
 .ni-circle-3 {
     width: 250px;
     height: 250px;
     top: 20%;
     left: -100px;
     background: rgba(255, 255, 255, 0.1);
}
 .ni-auth-left-content {
     position: relative;
     z-index: 2;
     color: #fff;
}
 .ni-auth-branding {
     margin-bottom: 50px;
}
 .ni-auth-logo {
     width: 200px;
     max-width: 100%;
     height: auto;
     margin-bottom: 30px;
}
 .ni-auth-title {
     font-size: 40px;
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 15px;
     color: #fff;
}
 .ni-auth-subtitle {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 0;
}
 .ni-auth-features {
     margin-top: 40px;
}
 .ni-feature-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 25px;
}
 .ni-feature-icon {
     width: 44px;
     height: 44px;
     min-width: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.35);
     font-size: 18px;
}
 .ni-feature-text h3 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 5px;
     color: #fff;
}
 .ni-feature-text p {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     margin: 0;
}
/* RIGHT SIDE - FORM */
 .ni-auth-right {
     width: 50%;
     padding: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
}
 .ni-auth-form-wrapper {
     width: 100%;
     max-width: 450px;
}
 .ni-auth-form-header {
     margin-bottom: 30px;
}
 .ni-form-title {
     font-size: 32px;
     font-weight: 800;
     color: var(--dark);
     margin-bottom: 10px;
}
 .ni-form-subtitle {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.6;
     margin: 0;
}
 .ni-edit-email-btn {
     background: none;
     border: none;
     color: var(--purple-dark);
     cursor: pointer;
     padding: 0;
     margin-left: 5px;
     font-size: 14px;
     transition: 0.3s;
}
 .ni-edit-email-btn:hover {
     color: var(--purple-light);
}
/* ALERTS */
 .ni-alert {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 18px;
     border-radius: 10px;
     font-size: 14px;
     margin-bottom: 20px;
}
 .ni-alert i {
     font-size: 18px;
}
 .ni-alert-success {
     background: #e7f7e7;
     border: 1px solid #93B574;
     color: #2d5f2d;
}
 .ni-alert-error {
     background: #fef2f2;
     border: 1px solid #f87171;
     color: #991b1b;
}
/* FORM */
 .ni-auth-form {
     margin-bottom: 0;
}
 .ni-form-group {
     margin-bottom: 20px;
}
 .ni-form-label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--dark);
     margin-bottom: 8px;
}
 .ni-required {
     color: #dc2626;
}
 .ni-input-wrapper {
     position: relative;
}
 .ni-input-icon {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #9AA09C;
     font-size: 16px;
     z-index: 2;
}
 .ni-form-input {
     width: 100%;
     height: 54px;
     padding: 0 48px;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
     color: var(--dark);
     font-size: 15px;
     outline: none;
     transition: 0.3s;
}
 .ni-form-input::placeholder {
     color: #A5AAA7;
}
 .ni-form-input:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74, 117, 74, 0.10);
}
 .ni-form-input.ni-input-error {
     border-color: #f87171;
}
 .ni-form-input.ni-input-readonly {
     background: #f9fafb;
     cursor: not-allowed;
}
 .ni-otp-input {
     font-size: 24px;
     font-weight: 600;
     letter-spacing: 0.4em;
     padding: 0 0 0 6px;
}
 .ni-input-hint {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     margin-top: 8px;
     font-size: 13px;
     color: var(--muted);
     line-height: 1.5;
}
 .ni-input-hint i {
     margin-top: 2px;
     color: var(--purple-dark);
}
 .ni-error-text {
     display: block;
     margin-top: 8px;
     font-size: 13px;
     color: #dc2626;
}
 .ni-toggle-password {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: #9AA09C;
     cursor: pointer;
     padding: 0;
     transition: 0.3s;
}
 .ni-toggle-password:hover {
     color: var(--purple-dark);
}
/* BUTTONS */
 .ni-btn {
     width: 100%;
     height: 54px;
     border: none;
     border-radius: 50px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
}
 .ni-btn-primary {
     background: linear-gradient(90deg, var(--green-dark), var(--green-light));
     color: #fff;
}
 .ni-btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74, 117, 74, 0.25);
}
 .ni-btn-outline {
     background: #fff;
     border: 1px solid var(--border);
     color: var(--dark);
}
 .ni-btn-outline:hover {
     border-color: var(--purple-light);
     background: #FEF8FA;
}
 .ni-btn:disabled, .ni-btn.opacity-70 {
     opacity: 0.7;
     cursor: not-allowed;
}
/* LINKS */
 .ni-auth-links {
     margin-top: 20px;
     text-align: center;
}
 .ni-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: var(--purple-dark);
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: 0.3s;
}
 .ni-link:hover {
     color: var(--purple-light);
}
/* FOOTER */
 .ni-auth-footer {
     margin-top: 30px;
}
 .ni-security-badge {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 20px;
     background: #f8f9fa;
     border-radius: 8px;
     color: #9AA09C;
     font-size: 12px;
     text-align: center;
}
 .ni-security-badge i {
     color: var(--green-dark);
     font-size: 16px;
}
/* RESPONSIVE */
 @media (max-width: 1024px) {
     .ni-auth-left {
         padding: 50px 40px;
    }
     .ni-auth-right {
         padding: 50px 40px;
    }
     .ni-auth-title {
         font-size: 34px;
    }
}
 @media (max-width: 768px) {
     .ni-auth-row {
         flex-direction: column;
    }
     .ni-auth-left, .ni-auth-right {
         width: 100%;
         min-height: auto;
    }
     .ni-auth-left {
         padding: 50px 30px;
    }
     .ni-auth-right {
         padding: 50px 30px;
    }
     .ni-auth-title {
         font-size: 28px;
    }
     .ni-form-title {
         font-size: 26px;
    }
}
 @media (max-width: 480px) {
     .ni-auth-left {
         padding: 40px 20px;
    }
     .ni-auth-right {
         padding: 40px 20px;
    }
     .ni-auth-title {
         font-size: 24px;
    }
     .ni-form-title {
         font-size: 22px;
    }
     .ni-form-input {
         height: 50px;
         padding: 0 45px;
    }
     .ni-btn {
         height: 50px;
    }
}
/* ===================================== PASSWORD REQUIREMENTS TOOLTIP ===================================== */
/* Info Icon Trigger */
 .ni-password-info-trigger {
     position: relative;
     display: inline-flex;
     align-items: center;
     margin-left: 6px;
     cursor: help;
}
 .ni-password-info-trigger > i {
     color: #6366f1;
     font-size: 14px;
     transition: all 0.3s ease;
}
 .ni-password-info-trigger:hover > i {
     color: #4f46e5;
     transform: scale(1.1);
}
/* Tooltip Container */
 .ni-password-tooltip {
     position: absolute;
     left: 50%;
     bottom: calc(100% + 8px);
     transform: translateX(-50%);
     min-width: 280px;
     max-width: 320px;
     background: #ffffff;
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
     padding: 16px;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Show tooltip on hover */
 .ni-password-info-trigger:hover .ni-password-tooltip {
     opacity: 1;
     visibility: visible;
     bottom: calc(100% + 12px);
}
/* Tooltip Arrow */
 .ni-password-tooltip::after {
     content: '';
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-top: 8px solid #ffffff;
     filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
}
/* Tooltip Header */
 .ni-tooltip-header {
     font-size: 13px;
     font-weight: 700;
     color: #1e293b;
     margin-bottom: 12px;
     padding-bottom: 8px;
     border-bottom: 1px solid #f1f5f9;
     display: flex;
     align-items: center;
     gap: 6px;
}
 .ni-tooltip-header::before {
     content: '';
     display: inline-block;
     width: 3px;
     height: 14px;
     background: linear-gradient(to bottom, #6366f1, #8b5cf6);
     border-radius: 2px;
}
/* Tooltip List */
 .ni-tooltip-list {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .ni-tooltip-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 6px 0;
     font-size: 12px;
     color: #475569;
     line-height: 1.5;
}
 .ni-tooltip-list li:first-child {
     padding-top: 0;
}
 .ni-tooltip-list li:last-child {
     padding-bottom: 0;
}
 .ni-tooltip-list li i {
     font-size: 10px;
     color: #22c55e;
     margin-top: 2px;
     flex-shrink: 0;
}
/* Mobile: Show tooltip below on small screens */
 @media (max-width: 768px) {
     .ni-password-tooltip {
         left: auto;
         right: 0;
         transform: none;
         min-width: 260px;
         bottom: auto;
         top: calc(100% + 8px);
    }
     .ni-password-info-trigger:hover .ni-password-tooltip {
         top: calc(100% + 12px);
         bottom: auto;
    }
     .ni-password-tooltip::after {
         top: -8px;
         bottom: auto;
         left: auto;
         right: 10px;
         transform: none;
         border-top: none;
         border-bottom: 8px solid #ffffff;
    }
}
/* Dark Mode */
 @media (prefers-color-scheme: dark) {
     .ni-password-tooltip {
         background: #1e293b;
         border-color: #334155;
    }
     .ni-password-tooltip::after {
         border-top-color: #1e293b;
    }
     .ni-tooltip-header {
         color: #f1f5f9;
         border-bottom-color: #334155;
    }
     .ni-tooltip-list li {
         color: #cbd5e1;
    }
     @media (max-width: 768px) {
         .ni-password-tooltip::after {
             border-bottom-color: #1e293b;
             border-top-color: transparent;
        }
    }
}
/* Error Message for Form Inputs */
 .ni-input-error {
     border-color: #dc2626 !important;
}
 .ni-error-message {
     display: block;
     margin-top: 8px;
     font-size: 13px;
     color: #dc2626;
     font-weight: 500;
}
/* ===================================================== BOOKING SECTION ===================================================== */
 .ni-booking-section {
     min-height: 100vh;
     padding: 50px 15px;
     position: relative;
     overflow: hidden;
}
/* Background Decoration */
 .ni-booking-section::before {
     content: "";
     position: absolute;
     width: 320px;
     height: 320px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -170px;
     left: -120px;
     opacity: .45;
}
 .ni-booking-section::after {
     content: "";
     position: absolute;
     width: 400px;
     height: 400px;
     background: var(--green-light);
     border-radius: 50%;
     right: -200px;
     bottom: -220px;
     opacity: .20;
}
/* ===================================================== MAIN WRAPPER ===================================================== */
 .ni-booking-wrapper {
     width: 100%;
     max-width: 1050px;
     margin: auto;
     position: relative;
     z-index: 2;
}
/* ===================================================== PROGRESS BAR ===================================================== */
 .ni-progress-card {
     background: var(--white);
     padding: 22px 30px;
     border-radius: 18px;
     margin-bottom: 25px;
     box-shadow: 0 10px 35px rgba(90, 56, 95, .08);
}
 .ni-progress {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ni-step {
     display: flex;
     align-items: center;
     gap: 10px;
     white-space: nowrap;
}
 .ni-step-number {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #F0F0F0;
     color: #999;
     font-size: 14px;
     font-weight: 700;
}
 .ni-step.active .ni-step-number {
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
     box-shadow: 0 5px 15px rgba(74, 117, 74, .20);
}
 .ni-step-text {
     color: #999;
     font-size: 12px;
     font-weight: 600;
}
 .ni-step.active .ni-step-text {
     color: var(--purple-dark);
}
 .ni-step-line {
     width: 65px;
     height: 2px;
     background: #E5E5E5;
     margin: 0 15px;
}
/* ===================================================== MAIN CARD ===================================================== */
 .ni-booking-card {
     background: var(--white);
     border-radius: 25px;
     padding: 50px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, .12);
}
/* ===================================================== HEADER ===================================================== */
 .ni-booking-header {
     text-align: center;
     margin-bottom: 40px;
}
 .ni-booking-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 17px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .4px;
}
 .ni-booking-header h1 {
     color: var(--dark);
     font-size: 36px;
     line-height: 1.2;
     font-weight: 800;
     margin-bottom: 12px;
}
 .ni-booking-header p {
     max-width: 600px;
     color: var(--muted);
     font-size: 14px;
     line-height: 1.7;
     margin: auto;
}
/* ===================================================== FORM ===================================================== */
 .ni-form-wrapper {
     max-width: 750px;
     margin: auto;
}
 .ni-form-group {
     margin-bottom: 28px;
}
 .ni-form-label {
     display: block;
     margin-bottom: 10px;
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
}
 .ni-required {
     color: var(--purple-light);
}
/* ===================================================== CAR TYPE ===================================================== */
 .ni-car-options {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
}
 .ni-car-option {
     position: relative;
}
 .ni-car-option input {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}
 .ni-car-option label {
     min-height: 145px;
     padding: 25px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 8px;
     border: 2px solid var(--border);
     border-radius: 16px;
     background: #fff;
     cursor: pointer;
     transition: all .3s ease;
}
 .ni-car-option label i {
     font-size: 32px;
     color: var(--purple-dark);
     margin-bottom: 3px;
}
 .ni-car-option label strong {
     color: var(--dark);
     font-size: 16px;
     font-weight: 700;
}
 .ni-car-option label span {
     color: var(--muted);
     font-size: 12px;
}
 .ni-car-option label:hover {
     border-color: var(--green-light);
     transform: translateY(-2px);
}
 .ni-car-option input:checked + label {
     border-color: var(--green-dark);
     background: #F6FAF4;
     box-shadow: 0 8px 25px rgba(74, 117, 74, .12);
}
 .ni-car-option input:checked + label i {
     color: var(--green-dark);
}
 .ni-car-option input:checked + label strong {
     color: var(--green-dark);
}
/* ===================================================== INPUT WRAPPER ===================================================== */
 .ni-input-wrapper {
     position: relative;
}
 .ni-input-icon {
     position: absolute;
     left: 18px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--purple-dark);
     font-size: 16px;
     z-index: 2;
}
/* ===================================================== POSTCODE INPUT ===================================================== */
 .ni-form-control {
     width: 100%;
     height: 58px;
     padding: 0 20px 0 50px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background: #fff;
     color: var(--dark);
     font-family: "Poppins", sans-serif;
     font-size: 14px;
     outline: none;
     transition: .3s;
}
 .ni-form-control::placeholder {
     color: #A5AAA7;
}
 .ni-form-control:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74, 117, 74, .10);
}
/* ===================================================== SELECT ===================================================== */
 .ni-select-wrapper {
     position: relative;
}
 .ni-select-icon {
     position: absolute;
     left: 18px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--purple-dark);
     font-size: 16px;
     z-index: 2;
     pointer-events: none;
}
 .ni-form-select {
     width: 100%;
     height: 58px;
     padding: 0 45px 0 50px;
     border: 1px solid var(--border);
     border-radius: 12px;
     background-color: #fff;
     color: var(--dark);
     font-family: "Poppins", sans-serif;
     font-size: 14px;
     outline: none;
     cursor: pointer;
     transition: .3s;
}
 .ni-form-select:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74, 117, 74, .10);
}
/* ===================================================== INFO BOX ===================================================== */
 .ni-info-box {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 18px 20px;
     margin-top: 5px;
     background: #FAF7F9;
     border: 1px solid #EEE5E9;
     border-radius: 12px;
}
 .ni-info-icon {
     width: 36px;
     height: 36px;
     min-width: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #F3E8EE;
     color: var(--purple-dark);
}
 .ni-info-box p {
     margin: 0;
     color: var(--muted);
     font-size: 12px;
     line-height: 1.7;
}
/* ===================================================== ERROR ===================================================== */
 .ni-error {
     display: none;
     margin-top: 7px;
     color: #C0392B;
     font-size: 12px;
}
/* ===================================================== BUTTON ===================================================== */
 .ni-button-wrapper {
     display: flex;
     justify-content: flex-end;
     margin-top: 30px;
}
 .ni-next-btn {
     height: 56px;
     padding: 0 32px;
     border: none;
     border-radius: 50px;
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
     font-family: "Poppins", sans-serif;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: .3s;
}
 .ni-next-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74, 117, 74, .25);
}

/* ===================================================== RESPONSIVE TABLET ===================================================== */
 @media(max-width: 991px) {
     .ni-booking-card {
         padding: 40px 30px;
    }
     .ni-step-line {
         width: 35px;
         margin: 0 8px;
    }
}
/* ===================================================== RESPONSIVE MOBILE ===================================================== */
 @media(max-width: 767px) {
     .ni-booking-section {
         padding: 20px 12px;
    }
     .ni-progress-card {
         padding: 18px 15px;
    }
     .ni-step-text {
         display: none;
    }
     .ni-step-line {
         width: 25px;
         margin: 0 5px;
    }
     .ni-step-number {
         width: 35px;
         height: 35px;
         font-size: 12px;
    }
     .ni-booking-card {
         padding: 30px 20px;
         border-radius: 20px;
    }
     .ni-booking-header {
         margin-bottom: 30px;
    }
     .ni-booking-header h1 {
         font-size: 28px;
    }
     .ni-booking-header p {
         font-size: 13px;
    }
     .ni-car-options {
         grid-template-columns: 1fr;
    }
     .ni-button-wrapper {
         display: block;
    }
     .ni-next-btn {
         width: 100%;
    }
}
/* ===================================================== SMALL MOBILE ===================================================== */
 @media(max-width: 400px) {
     .ni-progress {
         justify-content: space-between;
    }
     .ni-step-line {
         width: 15px;
         margin: 0 3px;
    }
     .ni-booking-card {
         padding: 25px 15px;
    }
}
/* ======================================== BOOKING SECTION ======================================== */
 .ni-booking-section {
     min-height: 100vh;
     padding: 60px 15px;
     position: relative;
     overflow: hidden;
}
/* Background Decoration */
 .ni-booking-section::before {
     content: "";
     position: absolute;
     width: 280px;
     height: 280px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -150px;
     left: -100px;
     opacity: 0.5;
}
 .ni-booking-section::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     background: var(--green-light);
     border-radius: 50%;
     right: -200px;
     bottom: -200px;
     opacity: 0.25;
}
/* ======================================== MAIN WRAPPER ======================================== */
 .ni-booking-wrapper {
     width: 100%;
     max-width: 1100px;
     margin: auto;
     position: relative;
     z-index: 2;
}
/* ======================================== PROGRESS BAR ======================================== */
 .ni-progress-wrapper {
     background: var(--white);
     border-radius: 15px;
     padding: 20px 25px;
     margin-bottom: 25px;
     box-shadow: 0 10px 35px rgba(90, 56, 95, 0.08);
}
 .ni-progress {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0;
}
 .ni-step {
     display: flex;
     align-items: center;
}
 .ni-step-number {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #F2F2F2;
     color: #999;
     font-size: 14px;
     font-weight: 700;
}
 .ni-step.active .ni-step-number {
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-step.completed .ni-step-number {
     background: var(--purple-dark);
     color: #fff;
}
 .ni-step-text {
     margin-left: 10px;
     font-size: 13px;
     font-weight: 600;
     color: #999;
}
 .ni-step.active .ni-step-text {
     color: var(--purple-dark);
}
 .ni-step-line {
     width: 70px;
     height: 2px;
     background: #E5E5E5;
     margin: 0 15px;
}
 .ni-step.completed + .ni-step-line {
     background: var(--green-dark);
}
/* ======================================== MAIN CARD ======================================== */
 .ni-booking-card {
     background: var(--white);
     border-radius: 25px;
     padding: 45px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, 0.12);
}
/* ======================================== HEADER ======================================== */
 .ni-booking-header {
     text-align: center;
     margin-bottom: 40px;
}
 .ni-booking-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
 .ni-booking-header h1 {
     font-size: 34px;
     font-weight: 800;
     color: var(--dark);
     margin-bottom: 10px;
}
/* ======================================== CUSTOMER DETAILS SUMMARY ======================================== */
 .ni-customer-info {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 18px 22px;
     margin-bottom: 35px;
     border-radius: 12px;
     background: #F8F8F8;
     border: 1px solid var(--border);
}
 .ni-customer-info-item {
     display: flex;
     align-items: center;
     gap: 10px;
}
 .ni-customer-info-icon {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #F6EAF0;
     color: var(--purple-dark);
}
 .ni-customer-info-content small {
     display: block;
     color: var(--muted);
     font-size: 11px;
     margin-bottom: 2px;
}
 .ni-customer-info-content strong {
     display: block;
     color: var(--dark);
     font-size: 14px;
}
/* ======================================== PRODUCT CATEGORY ======================================== */
 .ni-product-category {
     margin-bottom: 30px;
}
 .ni-category-header {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px 20px;
     background: linear-gradient( 90deg, #F7F7F7, #FCFCFC );
     border-radius: 12px 12px 0 0;
     border-bottom: 2px solid var(--green-light);
}
 .ni-category-icon {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     background: linear-gradient( 135deg, var(--purple-light), var(--purple-dark) );
     color: #fff;
}
 .ni-category-header h3 {
     margin: 0;
     color: var(--dark);
     font-size: 18px;
     font-weight: 700;
}
/* ======================================== PRODUCT ROW ======================================== */
 .ni-product-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 20px;
     border-bottom: 1px solid var(--border);
     transition: 0.3s;
}
 .ni-product-row:hover {
     background: #FEF8FA;
}
 .ni-product-info {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .ni-product-icon {
     width: 45px;
     height: 45px;
     min-width: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 17px;
}
 .ni-product-name {
     color: var(--dark);
     font-size: 15px;
     font-weight: 600;
}
 .ni-product-description {
     color: var(--muted);
     font-size: 12px;
     margin-top: 3px;
}
/* ======================================== PRICE + BOOK ======================================== */
 .ni-product-action {
     display: flex;
     align-items: center;
     gap: 10px;
}
 .ni-price {
     min-width: 90px;
     padding: 10px 15px;
     border-radius: 8px;
     text-align: center;
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
     font-size: 15px;
     font-weight: 700;
}
 .ni-book-btn {
     height: 42px;
     padding: 0 22px;
     border: none;
     border-radius: 50px;
     background: linear-gradient( 135deg, var(--purple-light), var(--purple-dark) );
     color: #fff;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-book-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(90, 56, 95, 0.25);
}
/* ======================================== BACK BUTTON ======================================== */
 .ni-back-btn {
     height: 48px;
     padding: 0 25px;
     border: 1px solid var(--border);
     border-radius: 50px;
     background: #fff;
     color: var(--purple-dark);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-back-btn:hover {
     border-color: var(--purple-light);
     background: #FEF8FA;
}
/* ======================================== RESPONSIVE TABLET ======================================== */
 @media (max-width: 991px) {
     .ni-booking-section {
         padding: 40px 15px;
    }
     .ni-booking-card {
         padding: 35px 25px;
    }
     .ni-step-text {
         display: none;
    }
     .ni-step-line {
         width: 50px;
    }
}
/* ======================================== RESPONSIVE MOBILE ======================================== */
 @media (max-width: 767px) {
     .ni-booking-section {
         padding: 25px 12px;
    }
     .ni-progress-wrapper {
         padding: 15px;
    }
     .ni-step-line {
         width: 25px;
         margin: 0 8px;
    }
     .ni-step-number {
         width: 35px;
         height: 35px;
         font-size: 12px;
    }
     .ni-booking-card {
         padding: 25px 18px;
         border-radius: 20px;
    }
     .ni-booking-header {
         margin-bottom: 25px;
    }
     .ni-booking-header h1 {
         font-size: 27px;
    }
     .ni-booking-header p {
         font-size: 13px;
    }
     .ni-customer-info {
         flex-direction: column;
         align-items: flex-start;
    }
     .ni-product-row {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
    }
     .ni-product-info {
         width: 100%;
    }
     .ni-product-action {
         width: 100%;
         justify-content: space-between;
    }
     .ni-price {
         flex: 1;
    }
     .ni-book-btn {
         flex: 1;
    }
}
/* ======================================== SMALL MOBILE ======================================== */
 @media (max-width: 400px) {
     .ni-step-line {
         width: 15px;
         margin: 0 5px;
    }
     .ni-booking-card {
         padding: 22px 15px;
    }
     .ni-product-info {
         align-items: flex-start;
    }
     .ni-product-icon {
         width: 40px;
         height: 40px;
         min-width: 40px;
    }
     .ni-product-name {
         font-size: 14px;
    }
}
/* ===================================================== MAIN SECTION ===================================================== */
 .ni-availability-section {
     min-height: 100vh;
     padding: 60px 15px;
     position: relative;
     overflow: hidden;
}
/* Background Decoration */
 .ni-availability-section::before {
     content: "";
     position: absolute;
     width: 280px;
     height: 280px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -140px;
     left: -100px;
     opacity: 0.5;
}
 .ni-availability-section::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     background: var(--green-light);
     border-radius: 50%;
     right: -180px;
     bottom: -180px;
     opacity: 0.25;
}
/* ===================================================== WRAPPER ===================================================== */
 .ni-availability-wrapper {
     width: 100%;
     max-width: 1100px;
     margin: auto;
     position: relative;
     z-index: 2;
}
/* ===================================================== PROGRESS ===================================================== */
 .ni-progress-wrapper {
     background: #fff;
     border-radius: 15px;
     padding: 20px 25px;
     margin-bottom: 25px;
     box-shadow: 0 10px 35px rgba(90, 56, 95, 0.08);
}
 .ni-progress {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ni-step {
     display: flex;
     align-items: center;
}
 .ni-step-number {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #F2F2F2;
     color: #999;
     font-size: 14px;
     font-weight: 700;
}
 .ni-step.active .ni-step-number {
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-step.completed .ni-step-number {
     background: var(--purple-dark);
     color: #fff;
}
 .ni-step-text {
     margin-left: 10px;
     font-size: 13px;
     font-weight: 600;
     color: #999;
}
 .ni-step.active .ni-step-text {
     color: var(--purple-dark);
}
 .ni-step-line {
     width: 70px;
     height: 2px;
     background: #E5E5E5;
     margin: 0 15px;
}
/* ===================================================== MAIN CARD ===================================================== */
 .ni-availability-card {
     background: #fff;
     border-radius: 25px;
     padding: 45px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, 0.12);
}
/* ===================================================== HEADER ===================================================== */
 .ni-header {
     text-align: center;
     margin-bottom: 35px;
}
 .ni-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
}
 .ni-header h1 {
     font-size: 34px;
     color: var(--dark);
     font-weight: 800;
     margin-bottom: 10px;
}
 .ni-header p {
     color: var(--muted);
     font-size: 14px;
     margin: 0;
}
/* ===================================================== SELECTED PRODUCT ===================================================== */
 .ni-selected-product {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 20px 25px;
     margin-bottom: 35px;
     background: #FCF7F9;
     border: 1px solid #F0E4EA;
     border-radius: 15px;
}
 .ni-selected-product-left {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .ni-product-icon {
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: linear-gradient( 135deg, var(--purple-light), var(--purple-dark) );
     color: #fff;
     font-size: 20px;
}
 .ni-product-info small {
     display: block;
     color: var(--muted);
     font-size: 11px;
     margin-bottom: 4px;
}
 .ni-product-info strong {
     color: var(--dark);
     font-size: 15px;
     font-weight: 700;
}
 .ni-product-meta {
     display: flex;
     gap: 10px;
}
 .ni-meta-item {
     padding: 9px 14px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 8px;
     color: var(--dark);
     font-size: 12px;
     font-weight: 600;
}
/* ===================================================== AVAILABILITY TITLE ===================================================== */
 .ni-availability-title {
     text-align: center;
     margin-bottom: 25px;
}
 .ni-availability-title h2 {
     color: var(--dark);
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 7px;
}
 .ni-availability-title p {
     color: var(--muted);
     font-size: 13px;
     margin: 0;
}
/* ===================================================== DATE NAVIGATION ===================================================== */
 .ni-date-navigation {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
}
 .ni-week-button {
     width: 45px;
     height: 45px;
     border: 1px solid var(--border);
     border-radius: 50%;
     background: #fff;
     color: var(--purple-dark);
     cursor: pointer;
     transition: 0.3s;
}
 .ni-week-button:hover {
     background: var(--purple-dark);
     color: #fff;
     border-color: var(--purple-dark);
}
 .ni-week-title {
     color: var(--dark);
     font-size: 17px;
     font-weight: 700;
}
/* ===================================================== AVAILABILITY GRID ===================================================== */
 .ni-availability-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 10px;
}
/* ===================================================== DAY CARD ===================================================== */
 .ni-day-card {
     border: 1px solid var(--border);
     border-radius: 12px;
     overflow: hidden;
     background: #fff;
     min-height: 230px;
}
 .ni-day-header {
     text-align: center;
     padding: 12px 5px;
     background: #F8F7F7;
     border-bottom: 1px solid var(--border);
}
 .ni-day-name {
     display: block;
     color: var(--muted);
     font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
}
 .ni-day-date {
     display: block;
     color: var(--dark);
     font-size: 17px;
     font-weight: 700;
     margin-top: 3px;
}
/* ===================================================== TIME SLOTS ===================================================== */
 .ni-time-slots {
     padding: 10px;
     display: flex;
     flex-direction: column;
     gap: 7px;
}
 .ni-time-slot {
     width: 100%;
     padding: 8px 5px;
     border: 1px solid #DCE8D8;
     border-radius: 7px;
     background: #F7FAF5;
     color: var(--green-dark);
     font-size: 11px;
     font-weight: 600;
     cursor: pointer;
     transition: 0.25s;
}
 .ni-time-slot:hover {
     background: var(--green-dark);
     color: #fff;
     border-color: var(--green-dark);
     transform: translateY(-1px);
}
 .ni-time-slot.selected {
     background: linear-gradient( 135deg, var(--purple-light), var(--purple-dark) );
     color: #fff;
     border-color: var(--purple-dark);
}
 .ni-no-slot {
     padding: 20px 5px;
     text-align: center;
     color: #AAA;
     font-size: 10px;
     line-height: 1.5;
}
/* ===================================================== SELECTED TIME ===================================================== */
 .ni-selected-time {
     display: none;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     margin-top: 30px;
     padding: 20px 25px;
     background: #F7FAF5;
     border: 1px solid #DCE8D8;
     border-radius: 12px;
}
 .ni-selected-time.show {
     display: flex;
}
 .ni-selected-time-info {
     display: flex;
     align-items: center;
     gap: 12px;
}
 .ni-selected-time-icon {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--green-dark);
     color: #fff;
}
 .ni-selected-time-text small {
     display: block;
     color: var(--muted);
     font-size: 11px;
}
 .ni-selected-time-text strong {
     color: var(--dark);
     font-size: 14px;
}
/* ===================================================== NAVIGATION ===================================================== */
 .ni-navigation {
     display: flex;
     justify-content: space-between;
     gap: 15px;
     margin-top: 35px;
     padding-top: 30px;
     border-top: 1px solid var(--border);
}
 .ni-back-btn, .ni-next-btn {
     height: 52px;
     padding: 0 28px;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
}
 .ni-back-btn {
     background: #F5F2F3;
     border: 1px solid var(--border);
     color: var(--purple-dark);
}
 .ni-next-btn {
     border: none;
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-next-btn.active {
     opacity: 1;
     pointer-events: auto;
}
 .ni-next-btn.active:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74, 117, 74, 0.25);
}
/* ===================================================== MOBILE ===================================================== */
 @media (max-width: 991px) {
     .ni-availability-grid {
         grid-template-columns: repeat(4, 1fr);
    }
     .ni-day-card:nth-child(n+5) {
         margin-top: 10px;
    }
}
 @media (max-width: 767px) {
     .ni-availability-section {
         padding: 25px 12px;
    }
     .ni-availability-card {
         padding: 25px 18px;
         border-radius: 20px;
    }
     .ni-step-text {
         display: none;
    }
     .ni-step-line {
         width: 30px;
         margin: 0 8px;
    }
     .ni-step-number {
         width: 35px;
         height: 35px;
    }
     .ni-header h1 {
         font-size: 27px;
    }
     .ni-selected-product {
         flex-direction: column;
         align-items: flex-start;
    }
     .ni-product-meta {
         width: 100%;
    }
     .ni-meta-item {
         flex: 1;
         text-align: center;
    }
     .ni-availability-grid {
         grid-template-columns: repeat(2, 1fr);
    }
     .ni-day-card:nth-child(n+3) {
         margin-top: 10px;
    }
     .ni-selected-time {
         flex-direction: column;
         align-items: flex-start;
    }
     .ni-navigation {
         flex-direction: column-reverse;
    }
     .ni-back-btn, .ni-next-btn {
         width: 100%;
    }
}
 @media (max-width: 400px) {
     .ni-availability-grid {
         grid-template-columns: 1fr;
    }
     .ni-day-card {
         min-height: auto;
    }
}
/* ===================================================== MAIN SECTION ===================================================== */
 .ni-confirmation-section {
     min-height: 100vh;
     padding: 60px 15px;
     position: relative;
     overflow: hidden;
}
/* Background Shapes */
 .ni-confirmation-section::before {
     content: "";
     position: absolute;
     width: 280px;
     height: 280px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -140px;
     left: -100px;
     opacity: .5;
}
 .ni-confirmation-section::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     background: var(--green-light);
     border-radius: 50%;
     right: -180px;
     bottom: -180px;
     opacity: .25;
}
/* ===================================================== WRAPPER ===================================================== */
 .ni-confirmation-wrapper {
     max-width: 1000px;
     margin: auto;
     position: relative;
     z-index: 2;
}
/* ===================================================== PROGRESS ===================================================== */
 .ni-progress-wrapper {
     background: #fff;
     border-radius: 15px;
     padding: 20px 25px;
     margin-bottom: 25px;
     box-shadow: 0 10px 35px rgba(90,56,95,.08);
}
 .ni-progress {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ni-step {
     display: flex;
     align-items: center;
}
 .ni-step-number {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #F2F2F2;
     color: #999;
     font-size: 14px;
     font-weight: 700;
}
 .ni-step.completed .ni-step-number {
     background: var(--purple-dark);
     color: #fff;
}
 .ni-step.active .ni-step-number {
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-step-text {
     margin-left: 10px;
     font-size: 13px;
     font-weight: 600;
     color: #999;
}
 .ni-step.active .ni-step-text {
     color: var(--purple-dark);
}
 .ni-step-line {
     width: 70px;
     height: 2px;
     background: #E5E5E5;
     margin: 0 15px;
}
/* ===================================================== MAIN CARD ===================================================== */
 .ni-confirmation-card {
     background: #fff;
     border-radius: 25px;
     padding: 45px;
     box-shadow: 0 20px 60px rgba(90,56,95,.12);
}
/* ===================================================== HEADER ===================================================== */
 .ni-header {
     text-align: center;
     margin-bottom: 35px;
}
 .ni-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
}
 .ni-header h1 {
     font-size: 34px;
     color: var(--dark);
     font-weight: 800;
     margin-bottom: 10px;
}
 .ni-header p {
     color: var(--muted);
     font-size: 14px;
}
/* ===================================================== SUCCESS ICON ===================================================== */
 .ni-success-icon {
     width: 75px;
     height: 75px;
     margin: 0 auto 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
     font-size: 32px;
}
/* ===================================================== BOOKING SUMMARY ===================================================== */
 .ni-summary-box {
     border: 1px solid #E8E2E5;
     border-radius: 18px;
     overflow: hidden;
     margin-top: 30px;
}
/* Summary Header */
 .ni-summary-header {
     padding: 20px 25px;
     background: linear-gradient( 135deg, var(--purple-dark), var(--purple-light) );
     color: #fff;
}
 .ni-summary-header h3 {
     font-size: 19px;
     font-weight: 700;
     margin: 0;
}
 .ni-summary-header p {
     font-size: 12px;
     opacity: .85;
     margin: 5px 0 0;
}
/* ===================================================== SUMMARY ROW ===================================================== */
 .ni-summary-body {
     padding: 10px 25px;
}
 .ni-summary-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     padding: 17px 0;
     border-bottom: 1px solid #F0F0F0;
}
 .ni-summary-row:last-child {
     border-bottom: none;
}
 .ni-summary-label {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--muted);
     font-size: 14px;
}
 .ni-summary-label i {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     background: #F8F2F5;
     color: var(--purple-dark);
}
 .ni-summary-value {
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
     text-align: right;
}
 .ni-summary-value.price {
     color: var(--green-dark);
     font-size: 18px;
     font-weight: 800;
}
/* ===================================================== IMPORTANT NOTICE ===================================================== */
 .ni-notice {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     margin-top: 25px;
     padding: 18px 20px;
     background: #FFF9F0;
     border: 1px solid #F2E4C7;
     border-radius: 12px;
}
 .ni-notice-icon {
     color: #C58A2A;
     font-size: 20px;
}
 .ni-notice-content strong {
     display: block;
     color: var(--dark);
     font-size: 13px;
     margin-bottom: 5px;
}
 .ni-notice-content p {
     color: var(--muted);
     font-size: 12px;
     line-height: 1.6;
     margin: 0;
}
/* ===================================================== PICKUP POSTCODE ===================================================== */
 .ni-postcode-box {
     margin-top: 25px;
     padding: 20px;
     background: #F7FAF5;
     border: 1px solid #DCE8D8;
     border-radius: 12px;
}
 .ni-postcode-label {
     display: block;
     color: var(--muted);
     font-size: 12px;
     margin-bottom: 5px;
}
 .ni-postcode-value {
     color: var(--green-dark);
     font-size: 18px;
     font-weight: 700;
}
/* ===================================================== NAVIGATION ===================================================== */
 .ni-next-btn {
     border: none;
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-next-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74,117,74,.25);
}
/* ===================================================== MOBILE ===================================================== */
 @media(max-width:767px) {
     .ni-confirmation-section {
         padding: 25px 12px;
    }
     .ni-confirmation-card {
         padding: 25px 18px;
         border-radius: 20px;
    }
     .ni-step-text {
         display: none;
    }
     .ni-step-line {
         width: 25px;
         margin: 0 7px;
    }
     .ni-step-number {
         width: 35px;
         height: 35px;
    }
     .ni-header h1 {
         font-size: 27px;
    }
     .ni-summary-body {
         padding: 10px 18px;
    }
     .ni-summary-row {
         align-items: flex-start;
         flex-direction: column;
         gap: 7px;
    }
     .ni-summary-value {
         text-align: left;
         padding-left: 44px;
    }
     .ni-back-btn, .ni-next-btn {
         width: 100%;
    }
}
/* ===================================================== MAIN SECTION ===================================================== */
 .ni-pupil-section {
     min-height: 100vh;
     padding: 50px 15px;
     position: relative;
     overflow: hidden;
}
 .ni-pupil-section::before {
     content: "";
     position: absolute;
     width: 280px;
     height: 280px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -140px;
     left: -100px;
     opacity: .5;
}
 .ni-pupil-section::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     background: var(--green-light);
     border-radius: 50%;
     right: -180px;
     bottom: -180px;
     opacity: .25;
}
/* ===================================================== WRAPPER ===================================================== */
 .ni-pupil-wrapper {
     max-width: 1100px;
     margin: auto;
     position: relative;
     z-index: 2;
}
/* ===================================================== PROGRESS ===================================================== */
 .ni-progress-wrapper {
     background: #fff;
     border-radius: 15px;
     padding: 20px 25px;
     margin-bottom: 25px;
     box-shadow: 0 10px 35px rgba(90,56,95,.08);
}
 .ni-progress {
     display: flex;
     align-items: center;
     justify-content: center;
}
 .ni-step {
     display: flex;
     align-items: center;
}
 .ni-step-number {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #F1F1F1;
     color: #999;
     font-size: 14px;
     font-weight: 700;
}
 .ni-step.completed .ni-step-number {
     background: var(--purple-dark);
     color: #fff;
}
 .ni-step.active .ni-step-number {
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-step-text {
     margin-left: 10px;
     font-size: 13px;
     font-weight: 600;
     color: #999;
}
 .ni-step.active .ni-step-text {
     color: var(--purple-dark);
}
 .ni-step-line {
     width: 65px;
     height: 2px;
     background: #E5E5E5;
     margin: 0 15px;
}
/* ===================================================== MAIN CARD ===================================================== */
 .ni-pupil-card {
     background: #fff;
     border-radius: 25px;
     padding: 45px;
     box-shadow: 0 20px 60px rgba(90,56,95,.12);
}
/* ===================================================== HEADER ===================================================== */
 .ni-page-header {
     text-align: center;
     margin-bottom: 40px;
}
 .ni-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
}
 .ni-page-header h1 {
     color: var(--dark);
     font-size: 34px;
     font-weight: 800;
     margin-bottom: 10px;
}
 .ni-page-header p {
     color: var(--muted);
     font-size: 14px;
     margin: 0;
}
/* ===================================================== FORM SECTION ===================================================== */
 .ni-form-section {
     margin-bottom: 35px;
}
 .ni-section-title {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 25px;
     padding-bottom: 15px;
     border-bottom: 1px solid var(--border);
}
 .ni-section-icon {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     background: #F7EEF3;
     color: var(--purple-dark);
}
 .ni-section-title h3 {
     color: var(--dark);
     font-size: 19px;
     font-weight: 700;
     margin: 0;
}
 .ni-section-title p {
     color: var(--muted);
     font-size: 12px;
     margin: 3px 0 0;
}
/* ===================================================== LABEL ===================================================== */
 .ni-label {
     display: block;
     color: var(--dark);
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 8px;
}
 .ni-label span {
     color: var(--purple-light);
}
/* ===================================================== INPUT ===================================================== */
 .ni-input, .ni-select, .ni-textarea {
     width: 100%;
     border: 1px solid var(--border);
     border-radius: 10px;
     background: #fff;
     color: var(--dark);
     font-family: "Poppins", sans-serif;
     font-size: 14px;
     outline: none;
     transition: .3s;
}
 .ni-input, .ni-select {
     height: 52px;
     padding: 0 16px;
}
 .ni-textarea {
     min-height: 100px;
     padding: 15px;
     resize: vertical;
}
 .ni-input:focus, .ni-select:focus, .ni-textarea:focus {
     border-color: var(--green-dark);
     box-shadow: 0 0 0 4px rgba(74,117,74,.10);
}
 .ni-input::placeholder {
     color: #A5AAA7;
}
/* ===================================================== RADIO / OPTIONS ===================================================== */
 .ni-option-group {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
}
 .ni-option {
     position: relative;
}
 .ni-option input {
     position: absolute;
     opacity: 0;
}
 .ni-option label {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 110px;
     height: 48px;
     padding: 0 18px;
     border: 1px solid var(--border);
     border-radius: 10px;
     color: var(--muted);
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: .3s;
}
 .ni-option input:checked + label {
     border-color: var(--green-dark);
     background: #F2F7EF;
     color: var(--green-dark);
     font-weight: 700;
}
/* ===================================================== VOUCHER ===================================================== */
 .ni-voucher {
     display: flex;
     gap: 10px;
}
 .ni-voucher .ni-input {
     flex: 1;
}
 .ni-voucher-btn {
     height: 52px;
     padding: 0 25px;
     border: none;
     border-radius: 10px;
     background: var(--purple-dark);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
}
 .ni-voucher-btn:hover {
     background: var(--purple-light);
}
/* ===================================================== TERMS ===================================================== */
 .ni-terms {
     padding: 20px;
     background: #F8FAF7;
     border: 1px solid #DDE8D9;
     border-radius: 12px;
     margin-top: 25px;
}
 .ni-terms label {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     color: var(--text);
     font-size: 13px;
     line-height: 1.6;
     cursor: pointer;
}
 .ni-terms input {
     width: 18px;
     height: 18px;
     min-width: 18px;
     margin-top: 2px;
     accent-color: var(--green-dark);
}
 .ni-terms a {
     color: var(--purple-dark);
     font-weight: 600;
}
/* ===================================================== ERROR ===================================================== */
 .ni-error {
     display: none;
     color: #C0392B;
     font-size: 12px;
     margin-top: 6px;
}
/* ===================================================== NAVIGATION ===================================================== */
 .ni-back-btn, .ni-next-btn {
     height: 55px;
     padding: 0 20px;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: .3s;
}
 .ni-next-btn {
     border: none;
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-next-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74,117,74,.25);
}
/* ===================================================== MOBILE ===================================================== */
 @media(max-width:767px) {
     .ni-pupil-section {
         padding: 25px 12px;
    }
     .ni-pupil-card {
         padding: 25px 18px;
         border-radius: 20px;
    }
     .ni-step-text {
         display: none;
    }
     .ni-step-line {
         width: 20px;
         margin: 0 6px;
    }
     .ni-step-number {
         width: 35px;
         height: 35px;
    }
     .ni-page-header h1 {
         font-size: 27px;
    }
     .ni-option-group {
         display: grid;
         grid-template-columns: 1fr 1fr;
    }
     .ni-option label {
         width: 100%;
         min-width: 0;
    }
     .ni-voucher {
         flex-direction: column;
    }
     .ni-voucher-btn {
         width: 100%;
    }
}
/* ===================================================== MAIN SECTION ===================================================== */
 .ni-success-section {
     min-height: 100vh;
     padding: 60px 15px;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
}
/* Background Decorations */
 .ni-success-section::before {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     background: #C8BFC2;
     border-radius: 50%;
     top: -150px;
     left: -100px;
     opacity: .5;
}
 .ni-success-section::after {
     content: "";
     position: absolute;
     width: 400px;
     height: 400px;
     background: var(--green-light);
     border-radius: 50%;
     right: -200px;
     bottom: -200px;
     opacity: .25;
}
/* ===================================================== WRAPPER ===================================================== */
 .ni-success-wrapper {
     width: 100%;
     max-width: 850px;
     margin: auto;
     position: relative;
     z-index: 2;
}
/* ===================================================== SUCCESS CARD ===================================================== */
 .ni-success-card {
     background: #fff;
     border-radius: 25px;
     padding: 50px;
     box-shadow: 0 20px 60px rgba(90, 56, 95, .13);
}
/* ===================================================== SUCCESS HEADER ===================================================== */
 .ni-success-header {
     text-align: center;
     margin-bottom: 35px;
}
/* Success Icon */
 .ni-success-icon {
     width: 90px;
     height: 90px;
     margin: 0 auto 25px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient( 135deg, var(--green-dark), var(--green-light) );
     color: #fff;
     font-size: 40px;
     box-shadow: 0 12px 30px rgba(74,117,74,.25);
     animation: successPop .6s ease;
}
 @keyframes successPop {
     0% {
         transform: scale(.5);
         opacity: 0;
    }
     70% {
         transform: scale(1.1);
    }
     100% {
         transform: scale(1);
         opacity: 1;
    }
}
/* Badge */
 .ni-success-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 8px 16px;
     margin-bottom: 15px;
     border-radius: 50px;
     background: #F6EAF0;
     color: var(--purple-dark);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .4px;
}
/* Heading */
 .ni-success-header h1 {
     color: var(--dark);
     font-size: 36px;
     font-weight: 800;
     margin-bottom: 12px;
}
 .ni-success-header p {
     max-width: 600px;
     margin: auto;
     color: var(--muted);
     font-size: 14px;
     line-height: 1.7;
}
/* ===================================================== BOOKING REFERENCE ===================================================== */
 .ni-booking-reference {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 18px 22px;
     margin-bottom: 25px;
     background: #F7FAF5;
     border: 1px solid #DCE8D8;
     border-radius: 12px;
}
 .ni-reference-label {
     color: var(--muted);
     font-size: 12px;
}
 .ni-reference-number {
     color: var(--green-dark);
     font-size: 16px;
     font-weight: 800;
     letter-spacing: 1px;
}
/* ===================================================== SUMMARY ===================================================== */
 .ni-summary-box {
     border: 1px solid #E8E2E5;
     border-radius: 18px;
     overflow: hidden;
}
/* Summary Header */
 .ni-summary-header {
     padding: 20px 25px;
     background: linear-gradient( 135deg, var(--purple-dark), var(--purple-light) );
     color: #fff;
}
 .ni-summary-header h3 {
     margin: 0;
     font-size: 19px;
     font-weight: 700;
}
 .ni-summary-header p {
     margin: 5px 0 0;
     font-size: 12px;
     opacity: .85;
}
/* ===================================================== SUMMARY BODY ===================================================== */
 .ni-summary-body {
     padding: 10px 25px;
}
 .ni-summary-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     padding: 17px 0;
     border-bottom: 1px solid #F0F0F0;
}
 .ni-summary-row:last-child {
     border-bottom: none;
}
/* Label */
 .ni-summary-label {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--muted);
     font-size: 14px;
}
 .ni-summary-label i {
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     background: #F8F2F5;
     color: var(--purple-dark);
}
/* Value */
 .ni-summary-value {
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
     text-align: right;
}
 .ni-summary-value.price {
     color: var(--green-dark);
     font-size: 19px;
     font-weight: 800;
}
/* ===================================================== NEXT STEPS ===================================================== */
 .ni-next-steps {
     margin-top: 25px;
     padding: 22px;
     background: #FAF8F9;
     border-radius: 14px;
}
 .ni-next-steps h4 {
     color: var(--dark);
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 15px;
}
 .ni-next-step {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 12px;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.6;
}
 .ni-next-step:last-child {
     margin-bottom: 0;
}
 .ni-next-step i {
     color: var(--green-dark);
     margin-top: 3px;
}
/* ===================================================== BUTTONS ===================================================== */
 .ni-success-actions {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 35px;
}
 .ni-btn {
     height: 54px;
     padding: 0 28px;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: .3s;
}
/* Dashboard */
 .ni-dashboard-btn {
     background: linear-gradient( 90deg, var(--green-dark), var(--green-light) );
     color: #fff;
}
 .ni-dashboard-btn:hover {
     color: #fff;
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(74,117,74,.25);
}
/* Print */
 .ni-print-btn {
     background: #F5F2F3;
     border: 1px solid var(--border);
     color: var(--purple-dark);
}
 .ni-print-btn:hover {
     background: var(--purple-dark);
     color: #fff;
}
/* ===================================================== SECURITY MESSAGE ===================================================== */
 .ni-secure {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 25px;
     color: #9AA09C;
     font-size: 12px;
}
 .ni-secure i {
     color: var(--green-dark);
}
/* ===================================================== MOBILE ===================================================== */
 @media(max-width:767px) {
     .ni-success-section {
         padding: 25px 12px;
    }
     .ni-success-card {
         padding: 30px 18px;
         border-radius: 20px;
    }
     .ni-success-icon {
         width: 75px;
         height: 75px;
         font-size: 32px;
    }
     .ni-success-header h1 {
         font-size: 28px;
    }
     .ni-booking-reference {
         flex-direction: column;
         align-items: flex-start;
         gap: 5px;
    }
     .ni-summary-body {
         padding: 10px 18px;
    }
     .ni-summary-row {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
    }
     .ni-summary-value {
         text-align: left;
         padding-left: 46px;
    }
     .ni-success-actions {
         flex-direction: column;
    }
     .ni-btn {
         width: 100%;
    }
}


/* =====================================
    AVAILABILITY - COUNTDOWN TIMER (TOP RIGHT)
===================================== */

.ni-countdown-timer {
    position: absolute;
    right: 24px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
    z-index: 10;
    animation: pulseTimer 2s ease-in-out infinite;
}

@keyframes pulseTimer {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
    }
    50% {
        box-shadow: 0 6px 16px rgba(245, 87, 108, 0.5);
    }
}

.ni-countdown-timer i {
    font-size: 16px;
}

.ni-countdown-timer.warning {
    animation: blinkTimer 1s ease-in-out infinite;
}

@keyframes blinkTimer {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.6;
    }
}


/* =====================================
    AVAILABILITY - SKELETON LOADER
===================================== */

.ni-skeleton-loader {
    display: none;
    padding: 24px 0;
}

.ni-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.ni-skeleton-day-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.ni-skeleton-day-header {
    height: 70px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.ni-skeleton-slots {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ni-skeleton-slot {
    height: 42px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


/* =====================================
    AVAILABILITY - DAY CARD STATES
===================================== */

.ni-day-card.unavailable {
    opacity: 0.5;
    background: #f8f9fa;
}

.ni-day-card.unavailable .ni-day-header {
    background: #e9ecef;
}

.ni-time-slot.reserving {
    opacity: 0.6;
    cursor: wait;
}

.ni-time-slot.selected {
    background: linear-gradient(135deg, #4a754a 0%, #93b574 100%);
    color: white;
    border-color: #4a754a;
}

.ni-week-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* =====================================
    AVAILABILITY - RESPONSIVE
===================================== */

@media (max-width: 1200px) {
    .ni-skeleton-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .ni-countdown-timer {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 16px;
        font-size: 13px;
        padding: 8px 16px;
    }

    .ni-skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ni-skeleton-day-header {
        height: 60px;
    }

    .ni-skeleton-slots {
        padding: 12px;
        gap: 8px;
    }

    .ni-skeleton-slot {
        height: 38px;
    }
}

@media (max-width: 480px) {
    .ni-skeleton-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================
    AVAILABILITY - NEXT BUTTON CONTAINER & HINT
===================================== */

.ni-next-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.ni-selection-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #f5576c;
    margin: 0;
    padding: 8px 16px;
    background: #fff5f7;
    border: 1px solid #ffd4dc;
    border-radius: 8px;
    animation: fadeIn 0.3s ease-in;
}

.ni-selection-hint i {
    font-size: 14px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ni-next-container {
        align-items: stretch;
        width: 100%;
    }
    
    .ni-selection-hint {
        font-size: 12px;
        padding: 6px 12px;
        text-align: center;
        justify-content: center;
    }
}


/* ==========================================================================
   PUPIL DETAILS PAGE - ERROR STATES
   ========================================================================== */

.ni-input.error,
.ni-select.error,
.ni-textarea.error {
    border-color: #C0392B !important;
    background-color: #FEF5F5;
}

.ni-input.error:focus,
.ni-select.error:focus,
.ni-textarea.error:focus {
    border-color: #C0392B !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.ni-error {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    color: #C0392B;
    font-weight: 500;
}

.ni-error i {
    margin-right: 4px;
}

/* Radio button error state */
.ni-option-group.error {
    border: 1px solid #C0392B;
    border-radius: 8px;
    padding: 8px;
    background-color: #FEF5F5;
}

/* Success state for verify email */
.ni-input.success {
    border-color: #4A754A !important;
    background-color: #F0F8F0;
}

.ni-input.success:focus {
    border-color: #4A754A !important;
    box-shadow: 0 0 0 3px rgba(74, 117, 74, 0.1);
}

/* Mobile number formatting helper */
.ni-input[name="mobile"]::placeholder {
    color: #999;
}

/* Form section spacing for errors */
.ni-form-section .col-md-6:has(.ni-error[style*="block"]),
.ni-form-section .col-12:has(.ni-error[style*="block"]) {
    margin-bottom: 8px;
}


/* ==========================================================================
   PUPIL DETAILS - INPUT/SELECT WRAPPERS WITH ICONS
   ========================================================================== */

.ni-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ni-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ni-input-icon,
.ni-select-icon {
    position: absolute;
    left: 16px;
    color: #9B6FA7;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.ni-input-wrapper .ni-input,
.ni-input-wrapper .ni-textarea {
    padding-left: 45px;
    width: 100%;
}

.ni-select-wrapper .ni-select {
    padding-left: 45px;
    width: 100%;
}

/* Textarea with icon */
.ni-input-wrapper .ni-textarea {
    padding-left: 45px;
    padding-top: 12px;
}

/* ==========================================================================
   VERIFICATION BUTTONS & BADGES
   ========================================================================== */

.ni-input-with-verify {
    position: relative;
}

.ni-input-with-verify .ni-input {
    padding-right: 100px;
}

.ni-verify-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #9B6FA7 0%, #7D5A8B 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.ni-verify-btn:hover {
    background: linear-gradient(135deg, #8B5F97 0%, #6D4A7B 100%);
    transform: translateY(-50%) scale(1.05);
}

.ni-verify-btn:active {
    transform: translateY(-50%) scale(0.98);
}

.ni-verify-btn i {
    font-size: 14px;
}

.ni-verified-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #4A754A 0%, #3A5F3A 100%);
    color: white;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.ni-verified-badge i {
    font-size: 14px;
}

/* Read-only state for verified inputs */
.ni-input.verified {
    background-color: #F0F8F0;
    border-color: #4A754A;
    cursor: not-allowed;
}

/* ==========================================================================
   OTP VERIFICATION MODAL
   ========================================================================== */

.ni-otp-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.ni-otp-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ni-otp-modal-content {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    overflow: hidden;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ni-otp-header {
    background: linear-gradient(135deg, #9B6FA7 0%, #7D5A8B 100%);
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ni-otp-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.ni-otp-close {
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.ni-otp-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ni-otp-body {
    padding: 32px 24px;
    text-align: center;
}

.ni-otp-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #F5EBFA 0%, #E8D4F0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ni-otp-icon i {
    font-size: 36px;
    color: #9B6FA7;
}

.ni-otp-message {
    font-size: 15px;
    color: #666;
    margin-bottom: 32px;
    line-height: 1.6;
}

.ni-otp-message strong {
    color: #333;
    font-weight: 700;
}

.ni-otp-input-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.ni-otp-input {
    width: 58px;
    height: 56px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    transition: all 0.3s ease;
}

.ni-otp-input:focus {
    outline: none;
    border-color: #9B6FA7;
    box-shadow: 0 0 0 4px rgba(155, 111, 167, 0.1);
}

.ni-otp-input.error {
    border-color: #C0392B;
    background-color: #FEF5F5;
}

.ni-otp-error {
    display: none;
    background: #FEF5F5;
    border-left: 4px solid #C0392B;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #C0392B;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.ni-otp-error i {
    margin-right: 8px;
}

.ni-otp-resend {
    margin-bottom: 24px;
    font-size: 14px;
    color: #666;
}

.ni-otp-resend-btn {
    background: none;
    border: none;
    color: #9B6FA7;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 4px;
    transition: color 0.3s ease;
}

.ni-otp-resend-btn:hover {
    color: #7D5A8B;
}

.ni-otp-submit-btn {
    background: linear-gradient(135deg, #9B6FA7 0%, #7D5A8B 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.ni-otp-submit-btn:hover {
    background: linear-gradient(135deg, #8B5F97 0%, #6D4A7B 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(155, 111, 167, 0.3);
}

.ni-otp-submit-btn:active {
    transform: translateY(0);
}

.ni-otp-submit-btn i {
    font-size: 18px;
}

/* ==========================================================================
   VOUCHER CODE WITH ICON
   ========================================================================== */

.ni-voucher {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ni-voucher .ni-input-wrapper {
    flex: 1;
}

/* ==========================================================================
   MOBILE RESPONSIVE - OTP MODAL
   ========================================================================== */

@media (max-width: 576px) {
    .ni-otp-modal-content {
        width: 95%;
        margin: 16px;
    }

    .ni-otp-input {
        width: 45px;
        height: 50px;
        font-size: 20px;
    }

    .ni-otp-input-group {
        gap: 8px;
    }

    .ni-otp-header {
        padding: 20px 16px;
    }

    .ni-otp-header h3 {
        font-size: 18px;
    }

    .ni-otp-body {
        padding: 24px 16px;
    }

    .ni-otp-icon {
        width: 64px;
        height: 64px;
    }

    .ni-otp-icon i {
        font-size: 28px;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE - VERIFY BUTTONS
   ========================================================================== */

@media (max-width: 576px) {
    .ni-verify-btn,
    .ni-verified-badge {
        padding: 6px 12px;
        font-size: 12px;
    }

    .ni-verify-btn i,
    .ni-verified-badge i {
        font-size: 12px;
    }

    .ni-input-with-verify .ni-input {
        padding-right: 90px;
    }
}


/* ========================================
   INTENSIVE COURSE STYLING
======================================== */

/* Intensive badge next to course name */
.ni-intensive-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-left: 8px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.ni-intensive-badge i {
  font-size: 10px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Intensive course info (hours and period) */
.ni-intensive-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 8px 0;
}

.ni-intensive-hours,
.ni-intensive-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.ni-intensive-hours i,
.ni-intensive-period i {
  color: #8b5cf6;
  font-size: 14px;
}

/* Intensive note (schedule assigned by admin) */
.ni-intensive-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #92400e;
}

.ni-intensive-note i {
  color: #f59e0b;
  font-size: 13px;
}

/* Success page intensive styling */
.ni-intensive-schedule-pending {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.ni-intensive-schedule-pending i {
  font-size: 48px;
  color: #f59e0b;
  margin-bottom: 12px;
}

.ni-intensive-schedule-pending h4 {
  font-size: 18px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 8px;
}

.ni-intensive-schedule-pending p {
  font-size: 14px;
  color: #78350f;
  margin-bottom: 0;
}

/* Student dashboard intensive schedule table */
.ni-intensive-schedule-table {
  width: 100%;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.ni-intensive-schedule-table thead {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.ni-intensive-schedule-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ni-intensive-schedule-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.ni-intensive-schedule-table tbody tr:hover {
  background-color: #f9fafb;
}

.ni-intensive-schedule-table tbody tr:last-child {
  border-bottom: none;
}

.ni-intensive-schedule-table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: #374151;
}

.ni-intensive-schedule-table tbody td:first-child {
  font-weight: 600;
  color: #111827;
}

.ni-intensive-schedule-table tbody td.hours-cell {
  font-weight: 600;
  color: #8b5cf6;
}

.ni-intensive-schedule-summary {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  border-radius: 12px;
  text-align: center;
}

.ni-intensive-schedule-summary p {
  font-size: 15px;
  font-weight: 600;
  color: #6b21a8;
  margin: 0;
}

.ni-intensive-schedule-summary p i {
  margin-right: 8px;
  color: #8b5cf6;
}

/* Intensive badge in booking list */
.ni-booking-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ni-booking-type-badge.intensive {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
  color: #6b21a8;
  border: 1px solid #c084fc;
}

.ni-booking-type-badge.regular {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border: 1px solid #60a5fa;
}

/* Schedule pending status */
.ni-schedule-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.ni-schedule-status.pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}

.ni-schedule-status.assigned {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #34d399;
}

.ni-schedule-status i {
  font-size: 12px;
}

/* Print styling for intensive schedule */
@media print {
  .ni-intensive-schedule-table {
    page-break-inside: avoid;
  }
  
  .ni-intensive-schedule-table thead {
    background: #8b5cf6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}