/* ===================================================================
   ENHANCED PROFESSIONAL STYLE.CSS
   - Original rules preserved (kept as-is) and enhancements added below
   - Do NOT remove original blocks; this file is additive and safe to paste
   =================================================================== */

/* -------------------------------------------------------------------
   THEME VARIABLES (easy to tweak colors / sizing in one place)
   ------------------------------------------------------------------- */
:root{
    --brand-blue: #007bff;
    --brand-blue-2: #ffc107;
    --brand-orange: #018837;
    --accent-dark: #1a2c4e;
    --muted: #666;
    --surface: #ffffff;
    --card-border: rgba(0,0,0,0.06);
    --glass: rgba(255,255,255,0.6);
    --shadow-1: 0 4px 15px rgba(0,0,0,0.06);
    --radius-lg: 14px;
    --transition-fast: 0.18s;
    --transition-base: 0.28s;
    --easing: cubic-bezier(.2,.9,.2,1);
}

/* ===================================================================
   1. BASE STYLES (Basic Setup for the whole website)
   =================================================================== */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.55;
}
main.content {
    flex-grow: 1;
}
a, a:hover, a:active {
    text-decoration: none !important;
    transition: color var(--transition-fast) var(--easing), opacity var(--transition-fast) var(--easing);
}
:active, :focus {
    outline: none !important;
}
img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* small utility */
.red-btn { color: red; }

/* ===================================================================
   2. HEADER STYLES (Professional + Demo Compatible)
   =================================================================== */
.top-border {
    width: 100%; height: 4px;
    background: linear-gradient(to left, var(--brand-orange), var(--brand-orange) 33.3%, var(--brand-blue-2) 33.3%, var(--brand-blue-2) 66.6%, #000044 66.6%, #000044);
}
.main-header {
    background: var(--surface);
    padding: 10px 0;
    transition: all 0.3s ease;
    height: 90px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
    border-bottom: 1px solid #e9e9e9;
}
.main-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(3px);
}
.main-header .container { display: flex; justify-content: space-between; align-items: center; }
.header-logo a { display: flex; align-items: center; }
.header-logo img { height: 55px; transition: all var(--transition-base) var(--easing); }
.main-header.sticky .header-logo img { height: 45px; }
.header-logo h4 { color: var(--accent-dark); font-weight: 700; font-size: 20px; margin: 0 0 0 15px; line-height: 1; }
.header-logo h4 span { font-size: 12px; color: #555; font-weight: 400; display: block; }

/* Desktop Navigation */
.main-nav { display: flex; align-items: center; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.main-nav li { margin-left: 35px; position: relative; }
.main-nav li a { color: #333; font-weight: 600; font-size: 16px; position: relative; padding: 5px 0; transition: color var(--transition-fast) var(--easing); }
.main-nav li a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--brand-blue); transition: width var(--transition-fast) var(--easing); }
.main-nav li a:hover, .main-nav li.active a { color: var(--brand-blue); }
.main-nav li a:hover::after, .main-nav li.active a::after { width: 100%; }
.main-nav .nav-buttons { margin-left: 20px; display: flex; align-items: center; }
.main-nav .btn-nav { padding: 8px 18px; border-radius: 50px; font-weight: 600; font-size: 14px; transition: all var(--transition-fast) var(--easing); margin-left: 15px; border: 2px solid transparent; box-shadow: var(--shadow-1); }
.main-nav .btn-nav i { margin-right: 8px; }
.main-nav .btn-nav-apply { background-color: var(--brand-blue); color: #fff; border-color: rgba(0,0,0,0.03); }
.main-nav .btn-nav-apply:hover { background-color: #0056b3; transform: translateY(-2px); }
.main-nav .btn-nav-login { background-color: transparent; color: var(--brand-blue); border-color: var(--brand-blue); }
.main-nav .btn-nav-login:hover { background-color: var(--brand-blue); color: #fff; }

/* Dropdown */
.main-nav .dropdown-toggle::after { display: none; }
.main-nav .dropdown-menu { border-radius: 8px; border: 1px solid #eee; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

/* Mobile Menu */
.mobile-menu-toggle { display: none; font-size: 28px; color: #333; cursor: pointer; }
.mobile-header-buttons { display: none; background: #f7f7f7; padding: 10px; border-bottom: 1px solid #eee; }
.mobile-header-buttons .btn-custom { width: 100%; margin-bottom: 10px; padding: 8px 20px; border-radius: 5px; font-weight: 600; font-size: 14px; }
.mobile-header-buttons .btn-apply { background: var(--brand-blue-2); color: #fff; }
.mobile-header-buttons .btn-login { background: var(--brand-orange); color: #fff; }
.mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.mobile-nav-wrapper { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: #fff; z-index: 1001; padding: 20px; transition: right 0.4s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }
.mobile-nav-wrapper.active { right: 0; }
.mobile-nav-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.mobile-menu-close { font-size: 24px; cursor: pointer; }
.mobile-nav-wrapper ul { list-style: none; padding: 20px 0; }
.mobile-nav-wrapper li a { display: block; padding: 12px 0; font-size: 16px; font-weight: 600; color: #333; }


.wt { position: relative; }
.banner { margin-top: 10px; }
.banner img { width: 100%; border: 1px solid #ddd; border-radius: 8px; }

/* Whats-New (Online Application) Box */
.whats-new { background-color: #fff; border: 1px solid var(--brand-blue-2); min-height: 380px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.whats-new h3 { background-color: var(--brand-blue-2); color: #fff; font-size: 14px; padding: 10px 15px; text-transform: uppercase; letter-spacing: 1px; margin: 0; display:flex; align-items:center; justify-content:space-between; }
.whats-new h3 span { background: transparent; padding: 0; font-size: inherit; color: inherit; }

/* categories scrolling (kept original rules) */
#categories { overflow: hidden; flex-grow: 1; position: relative; height: 290px; } /* Fixed height for scrolling */
#inner_categories { width: 100%; display: block; position: absolute; }
#categories ul { list-style: none; padding: 10px; margin: 0; }
#categories ul li a { display: block; text-decoration: none; padding: 8px 10px 8px 25px; color: #2c2d34; font-size: 13px; background: url(../images/bullet.png) no-repeat #fff 7px 11px; border-bottom: 1px solid #f0f0f0; transition: background var(--transition-fast) var(--easing); }
#categories ul li a:hover { background: #f7fbff; transform: translateX(4px); }

/* marquee animation (original) */
@keyframes marquee { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
#inner_categories.scrolling { animation: marquee 80s linear infinite; }
#categories:hover #inner_categories.scrolling { animation-play-state: paused; }

/* bottom CTA */
.bottom-links-b { text-align: right; padding: 15px; border-top: 1px solid #eee; background: #f8f9fa; }
.bottom-links-b a, .bottom-links-b ul li a { background: var(--brand-blue); color: #fff !important; padding: 10px 25px; border-radius: 5px; font-weight: bold; font-size: 13px; }

/* Notices */
.homenotice { display: flex; align-items: center; border: 1px solid #eee; padding: 8px 15px; margin-top: 20px; background: #fff; border-radius: 8px; }
.homenotice strong { white-space: nowrap; margin-right: 10px; color: var(--brand-orange); font-size: 19px; }
.homenotice marquee { color: #ec0000; font-weight: 500; }

/* Welcome Text & Links */
.content h2 { font-size: 24px; color: #343434; margin: 20px 0px 15px; }
.content p { color: #2c2d34; font-size: 14px; text-align: justify; }
.links ul { list-style: none; padding: 0; margin-top: 25px; }
.links ul li a { display: block; text-decoration: none; padding: 4px 10px 3px 25px; color: #000; font-size: 13px; background: url(../images/bullet.png) no-repeat #fff 7px 6px; transition: all ease-in-out 0.5s; }
.links ul li a:hover { background: #fff8e6; transform: translateX(6px); color: var(--brand-blue-2); }

/* News  */
.imp-link { border: 1px solid var(--brand-orange); margin-top: 20px; min-height: 380px; border-radius: 10px; background: #fff; overflow: hidden; }
.imp-link h3 { background: var(--brand-orange); color: #fff; font-size: 14px; padding: 10px 15px; text-transform: uppercase; letter-spacing: 1px; margin: 0; display:flex; align-items:center; justify-content:space-between; }
.imp-link h3 span { background: transparent; padding: 0; font-size: inherit; color: inherit; }
.imp-link ul { list-style: none; padding: 15px; margin: 0; }

/* keep original small item rules but improved visuals */
.imp-link ul li { font-size: 13px; padding: 8px 0; border-bottom: 1px dashed #ddd; display:block; position:relative; padding-left:22px; }
.imp-link ul li:last-child { border-bottom: none; }
.imp-link ul li a { color: #2c2d34; font-size: 13px; display:block; }

/* New Features Section */
.features-section { padding: 40px 0; background-color: #f8f9fa; text-align: center; }
.features-section h2 { font-weight: 700; color: var(--accent-dark); margin-bottom: 30px; }
.feature-box { background: #fff; padding: 30px; border-radius: 8px; box-shadow: var(--shadow-1); transition: all 0.3s ease; height: 100%; }
.feature-box:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.feature-box .icon { font-size: 40px; color: var(--brand-blue); margin-bottom: 20px; }
.feature-box h4 { font-weight: 600; color: #333; margin-bottom: 15px; }
.feature-box p { color: var(--muted); font-size: 14px; }

/* NEWS & EVENTS: duplicate safer final (preserve earlier customizations) */
.imp-link {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
}

/* FIXED HEIGHT ONLY FOR LIST */
.imp-link ul {
    max-height: 260px;       /* height for scrolling area */
    overflow-y: auto;        /* only list scrolls */
    margin: 0;
    padding-left: 5px;
}

/* Scrollbar */
.imp-link ul::-webkit-scrollbar {
    width: 6px;
}
.imp-link ul::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

/* Bullet styling with PNG icon (uses your bullet1.png) */
.imp-link ul li {
    position: relative;
    padding-left: 22px;   /* icon + spacing */
    margin-bottom: 5px;
    list-style: none;     /* default bullet hide */
}

.imp-link ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;          /* icon size */
    height: 12px;
    background-image: url('../images/bullet1.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .imp-link ul {
        max-height: 390px !important; /* allow more height on mobile */
    }
}

/* blink-dot animation for closed indicator */
.blink-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    margin-left: 5px;
    animation: blink 0.8s infinite;
}
@keyframes blink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
.news-list .news-item {
    margin-bottom: 8px;
    animation: fadeSlide 0.6s ease;
}

.news-list .news-item a {
    color: #0033cc;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.news-list .news-item a:hover {
    color: #ff6600;
    text-decoration: underline;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================================================================
   4.  FORMS STYLES
   =================================================================== */

/* Main container for form pages like login, apply, etc. */
.panel {
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 40px 0;
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    line-height: 1.7;
}
.panel h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 25px 0;
    text-align: center;
    color: #1a2c4e;
}

/* Sub-sections within a form (like Step 1, Step 2) */
.form-panel {
    background: #f8f9fa; /* Lighter background */
    margin-top: 25px;
    border: 1px solid #e9ecef; /* Lighter border */
    border-radius: 8px; /* Consistent rounding */
}
.form-panel .heading {
    background: #e9ecef; /* Lighter heading background */
    color: #333;
    padding: 12px 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
}
.form-panel .box {
    padding: 25px;
}

/* Form Elements Styling */
label, .control-label {
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.form-control {
    border-radius: 5px;
    margin-bottom: 0; /* Let's control margin with .mb-3 class */
    font-size: 15px;
    padding: 10px 15px; /* Consistent padding */
    border: 1px solid #ced4da;
    transition: all 0.2s ease-in-out;
}
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
    border-color: #80bdff;
}

/* Select Dropdown Height Fix */
select.form-control {
    height: auto !important;
}

/* Radio Button Group Styling */
.radio-group label.form-check-label {
    font-weight: normal; /* Make radio labels normal, not bold */
}
.form-check-inline {
    margin-right: 20px !important; /* More space between radio options */
}

/* Form Helper Text */
.form-text {
    color: #6c757d; /* Muted color */
    font-size: 13px;
    margin-top: 5px;
}

/* ===================================================================
   5. FOOTER
   =================================================================== */
footer { margin-top: auto; background: #f2f2f2; color: #333; padding: 20px 0; }
footer .container { padding-top: 20px; padding-bottom: 20px; }
footer p { color: #2c2d34; font-size: 14px; margin: 0; }
footer a { color: #2c2d34; }

/* CTA / Button improved styles */
.btn {
    display:inline-block;
    padding:10px 18px;
    border-radius:8px;
    font-weight:600;
    transition: all var(--transition-base) var(--easing);
    margin-top: 15px;
}
.btn-primary {
    background: linear-gradient(90deg, var(--brand-blue), #0056b3);
    color:#fff;
    border: none;
    box-shadow: 0 6px 18px rgba(0,123,255,0.12);
}
.btn-outline {
    background: transparent;
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
}

/* ===================================================================
   6. 
   =================================================================== */
@media (max-width: 991px) { /* Medium screens (tablets) */
    .main-header { height: auto; padding: 10px 0; }
    .main-nav { display: none; }
    .mobile-menu-toggle { display: block; }
    .mobile-header-buttons { display: block; }
    .whats-new, .imp-link { margin-top: 20px; min-height: auto; }
}
@media (max-width: 767px) { /* Small screens (mobiles) */
    .container { padding-right: 15px !important; padding-left: 15px !important; }
    .main-content-section h2, .panel h3, .welcome-section h2 { font-size: 22px; }
    .panel { margin: 20px 0; padding: 20px; }
    .header-logo { justify-content: center; width: 100%; }
    .banner img { height: auto !important; object-fit: cover; }
}
@media (max-width: 600px) {
    .mob-hide { display:none !important; }
    .mob-show { display:inline-block !important; }
    .mob-show1 { display:block; }
    footer p, .ff { text-align: center !important; }
}
@media (max-width: 480px) {
    .header-logo img { height: 50px; }
    .header-logo h4 { font-size: 18px; }
    .panel { margin: 15px 0; }
    .ff { font-size: 12px; }
    .m-scroll { overflow-x: scroll; }
}

/* ===================================================================
   7. 
   =================================================================== */

/* This code will apply on screens >= 1200px */
@media (min-width: 1200px) {
    .container {
        max-width: 1250px; /* Aapki requirement ke anusaar */
    }
}

/* Mobile container full width */
@media (max-width: 1199px) {
    .container {
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* ===================================================================
   7. (About Us, Contact Us)
   =================================================================== */
.about-section { padding: 20px 0; }
.info-box { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); text-align: center; height: 100%; }
.info-box .icon { font-size: 40px; color: var(--brand-blue); margin-bottom: 15px; }
.info-box h4 { font-weight: 600; margin-bottom: 10px; }

.contact-section { padding: 20px 0; }
.contact-info-box { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); height: 100%; }
.contact-info-box .icon { font-size: 24px; color: var(--brand-blue); }
.contact-info-box h5 { font-weight: 600; margin-bottom: 5px; }
.contact-info-box p { margin: 0; color: var(--muted); }
.contact-form { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); }
.map-container { border-radius: 8px; overflow: hidden; height: 350px; border: 1px solid #ddd; }
.map-container iframe { width: 100%; height: 100%; border: 0; }

/* ===================================================================
   8.  (Terms, Privacy, etc.)
   =================================================================== */

/* This style will apply to any content inside the main .panel class */
.panel {
    line-height: 1.7; /* Improves readability */
}

/* Main Heading (like <h1> or <h2> from editor) */
.panel h1,
.panel h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-dark); /* Dark blue color for headings */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-blue); /* Blue underline */
    display: inline-block; /* Underline only covers the text */
}

/* Sub Headings */
.panel h3,
.panel h4 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* Paragraphs */
.panel p {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 15px;
    text-align: justify;
}

/* Lists */
.panel ul,
.panel ol {
    padding-left: 25px;
    margin-bottom: 20px;
}
.panel ul li {
    padding-left: 10px;
    margin-bottom: 10px;
}
.panel ul li::marker {
    color: var(--brand-blue);
    font-size: 1.2em;
}
.panel a {
    color: var(--brand-blue);
    font-weight: 500;
    text-decoration: underline !important;
}
.panel a:hover { color: #0056b3; }

/* ===================================================================
   10. + PROFESSIONAL)
   =================================================================== */

.dashboard-menu-bar {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
}
.dashboard-menu-bar li {
    padding: 5px;
    flex-grow: 1; /* Make items flexible */
}
.dashboard-menu-bar li a {
    display: block;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dashboard-menu-bar li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
/* ===================================================================
   11.  DASHBOARD
   =================================================================== */
.dashboard-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    padding: 25px;
    margin-bottom: 30px;
}
.dashboard-card h3 {
    font-weight: 700;
    color: #1a2c4e;
    margin-bottom: 5px;
}
.dashboard-card p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Application Table Styling */
.dashboard-table .table {
    border-collapse: separate;
    border-spacing: 0 10px; /* Add space between rows */
}
.dashboard-table thead th {
    background-color: #343a40 !important;
    color: #fff !important;
    border: none;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.dashboard-table tbody tr {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
}
.dashboard-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.dashboard-table tbody td {
    padding: 15px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}
.dashboard-table tbody tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.dashboard-table tbody tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.location-cell .state-dist {
    font-weight: 600;
    color: #333;
    display: block;
}
.location-cell .full-address {
    font-size: 13px;
    color: #777;
    display: block;
    margin-top: 5px;
}

/* Gradient Borders from your Demo */
.dashboard-menu-bar li a.border-g1 { border-image: linear-gradient(to right, #e74c3c, #3498db) 1; }
.dashboard-menu-bar li a.border-g2 { border-image: linear-gradient(to right, #f1c40f, #e67e22) 1; }
.dashboard-menu-bar li a.border-g3 { border-image: linear-gradient(to right, #2ecc71, #1abc9c) 1; }
.dashboard-menu-bar li a.border-g4 { border-image: linear-gradient(to right, #9b59b6, #34495e) 1; }
.dashboard-menu-bar li a.border-g5 { border-image: linear-gradient(to right, #3498db, #2980b9) 1; }
.dashboard-menu-bar li a.border-g6 { border-image: linear-gradient(to right, #1abc9c, #16a085) 1; }
.dashboard-menu-bar li a.border-g7 { border-image: linear-gradient(to right, #e67e22, #d35400) 1; }
.dashboard-menu-bar li a.border-g8 { border-image: linear-gradient(to right, #27ae60, #27ae60) 1; }
.dashboard-menu-bar li a.border-g9 { border-image: linear-gradient(to right, #8e44ad, #9b59b6) 1; }

/* Dashboard Table Styling */
.dashboard-table {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.dashboard-table h3 {
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--accent-dark);
}
.dashboard-table .table {
    margin-bottom: 0;
}
.dashboard-table .action-cell a, .dashboard-table .action-cell button {
    margin-bottom: 5px;
    display: block;
    width: 130px;
    text-align: center;
}
.dashboard-table .action-cell p {
    font-size: 12px;
    color: #dc3545;
    margin-top: 10px;
    font-weight: bold;
}
/* ===================================================================
   12. DASHBOARD PAY NOW IMAGE BUTTON
   =================================================================== */

.pay-now-btn {
    display: inline-block; /* Allows transforms and shadows */
    line-height: 0; /* Removes extra space below the image */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensures image stays within rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.pay-now-btn img {
    width: 120px;
    display: block; /* Removes extra space below the image */
}

.pay-now-btn:hover {
    transform: translateY(-4px); /* Lifts the button up on hover */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.25); /* Adds a blue glow */
}
/* ===================================================================
   13. DASHBOARD ACTION BUTTONS STYLING
   =================================================================== */

.action-btn-view {
    font-weight: 600;
    border-radius: 45px; /* Pill shape */
    padding: 6px 15px;
    font-size: 10px;
    transition: all 0.3s ease;
    border: 2px solid #17a2b8; /* Info color */
    background-color: #17a2b8;
    color: #fff;
    display: inline-block;
    width: auto; /* Remove w-100 if you want it to fit the content */
}

.action-btn-view:hover {
    background-color: #138496;
    border-color: #117a8b;
    color: #fff;
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 4px 10px rgba(23, 162, 184, 0.3);
}
/* ===================================================================
   12. VIEW APPLICATION & PRINT STYLES
   =================================================================== */

/* Professional Table for Details */
.details-table th {
    background-color: #f8f9fa;
    width: 35%;
    font-weight: 600;
}

/* Password hide/show styles */
.password-field {
    position: relative;
}
.password-field input {
    padding-right: 40px;
}
.password-field .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
}

/* Document Modal (Popup) */
#documentModal .modal-dialog {
    max-width: 800px;
}
#documentModal img, #documentModal iframe {
    width: 100%;
    height: 70vh;
}

/* Print-Friendly Styles */
@media print {
    body * {
        visibility: hidden; /* Hide everything by default */
    }
    #application-to-print, #application-to-print * {
        visibility: visible; /* Show only the application form */
    }
    #application-to-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .btn, .main-header, footer {
        display: none !important; /* Hide all buttons, header, and footer */
    }
}
/* ===================================================================
   
   - Micro-interactions, focus styles and utility helpers
   =================================================================== */

.focus-ring:focus { box-shadow: 0 0 0 4px rgba(0,123,255,0.12); outline: none; border-color: var(--brand-blue); }
.fade-in { animation: fadeIn .45s var(--easing) both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }

.text-muted { color: var(--muted); }
.small { font-size:13px; }

/* Accessibility helper for high contrast */
@media (prefers-contrast: more) {
    body { background: #fff; color: #111; }
    .main-header { box-shadow: none; border-bottom: 2px solid #eee; }
}
/* ===================================================================
   13. CUSTOM LIGHTBOX DOCUMENT VIEWER
   =================================================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1055; /* Higher than Bootstrap modal */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
}

.lightbox-content img, .lightbox-content iframe {
    width: 100%;
    height: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.lightbox-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: transform 0.2s;
}
.lightbox-close-btn:hover {
    transform: scale(1.2);
}
/* ===================================================================
   14. DASHBOARD TABLE - FINAL COLUMN STYLES
   =================================================================== */
.mode-cell, .priority-cell {
    font-weight: 500;
}
.mode-cell i {
    font-size: 1.1em;
}
.priority-cell .badge {
    font-size: 0.8em;
}
.status-badge {
    font-size: 0.9em !important;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
/* ===================================================================
   15. FINAL DEMO-STYLED LOGIN PAGE
   =================================================================== */

.login-page-wrapper {
    background: #f0f2f5;
    padding: 50px 0;
}
.login-panel {
    max-width: 500px;
    margin: auto;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.login-panel h3 {
    color: #000;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

/* Icon inside Input Field */
.form-icon-group {
    position: relative;
    margin-bottom: 15px;
}
.form-icon {
    position: absolute;
    top: 1px;
    left: 1px;
    color: #6c757d;
    background: #e9ecef;
    padding: 11px 12px;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    text-align: center;
}
.form-control.p-45 {
    padding-left: 45px !important;
}

/* Captcha Styling */
.captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.captcha-box span {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    padding: 5px 59px;
    background: #eee;
    border-radius: 5px;
    user-select: none; /* Prevent text selection */
}
.btn-refresh {
    padding: 5px 10px;
}
.alert {
    border-radius: 8px !important;
    font-weight: 600;
    padding: 14px 18px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
    animation: slideDown 0.45s ease, fadeIn 0.8s ease;
}

/* SUCCESS */
.alert-success {
    background: #d1f8da !important;
    color: #1b7b31 !important;
    border-left: 5px solid #28a745 !important;
}

/* ERROR / DANGER */
.alert-danger,
.alert-error {
    background: #ffe1e1 !important;
    color: #b71826 !important;
    border-left: 5px solid #dc3545 !important;
}

/* WARNING */
.alert-warning {
    background: #fff3cd !important;
    color: #856404 !important;
    border-left: 5px solid #ffad0a !important;
}

/* INFO */
.alert-info {
    background: #d7ecff !important;
    color: #084298 !important;
    border-left: 5px solid #0d6efd !important;
}

/* Close button */
.alert .btn-close {
    filter: invert(0.5);
    opacity: 0.7;
}
.alert .btn-close:hover {
    opacity: 1;
}

/* Animations */
@keyframes slideDown {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

/* ===================================================================
   16. FINAL TRACK APPLICATION PAGE STYLES
   =================================================================== */

.status-timeline {
    list-style: none;
    padding: 20px 0;
    position: relative;
}
/* The vertical line */
.status-timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 19px; /* Centered with the icon */
    width: 4px;
    background: #e9ecef;
    border-radius: 4px;
}
.status-timeline li {
    margin-bottom: 30px; /* More space between steps */
    padding-left: 60px; /* More space for the icon */
    position: relative;
}
/* Remove margin from the last item */
.status-timeline li:last-child {
    margin-bottom: 0;
}

/* Icon Styling */
.status-timeline li .status-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #adb5bd; /* Default grey for future steps */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 4px solid #f8f9fa; /* Border matching page background */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.status-timeline li.completed .status-icon {
    background: #198754; /* Darker success green */
}
.status-timeline li.current .status-icon {
    background: #ffc107; /* Warning yellow */
    animation: pulse 2s infinite;
}
.status-timeline li.failed .status-icon {
    background: #dc3545; /* Danger red */
}

/* Blinking animation for the current step */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(7, 192, 1, 0.788); }
}

/* Content Box Styling */
.status-timeline li .status-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.status-timeline li .status-content h5 {
    font-weight: 700;
    margin-bottom: 8px;
    color: #343a40;
    font-size: 17px;
    margin-left: 20px;
}
.status-timeline li .status-content p {
    margin-bottom: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}
/* ===================================================================
   17. FINAL PROFESSIONAL SUCCESS PAGE
   =================================================================== */

.success-container {
    text-align: center;
    padding: 40px 20px;
}
.success-icon {
    width: 100px;
    height: 100px;
    background: #eafaf1;
    border-radius: 50%;
    margin: 0 auto 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zoomIn 0.5s ease-out;
}
.success-icon i {
    color: #28a745;
    font-size: 50px;
}
@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.success-container h2 {
    font-weight: 700;
    color: #28a745;
    animation: fadeInDown 0.6s ease-out 0.2s;
    animation-fill-mode: both; /* Keeps state after animation */
}
.success-container p {
    color: #555;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 30px auto;
    animation: fadeInUp 0.6s ease-out 0.4s;
    animation-fill-mode: both;
}

.app-id-box {
    background: #e9f5ff;
    border: 2px dashed #007bff;
    padding: 20px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 30px;
    animation: fadeInUp 0.6s ease-out 0.6s;
    animation-fill-mode: both;
}
.app-id-box .id-label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}
.app-id-box .app-id {
    font-size: 24px;
    font-weight: bold;
    color: #0056b3;
    letter-spacing: 1px;
}

.success-actions .btn {
    font-weight: 600;
    padding: 12px 30px;
    margin: 0 10px;
    border-radius: 50px;
}

/* Animation helpers */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* End of file */