:root {
    --ds-body-font-family: 'IBM Plex Sans', sans-serif;
    --ds-primary: #f56416;
    --ds-primary-rgb: 245, 100, 22;
    --ds-warning: #ffab00;
}

body {
    font-family: 'IBM Plex Sans', sans-serif !important;
}
.swal2-container .swal2-actions button.swal2-confirm{
    background-color:#f56416!important;
    color:#fff!important;
}
.navbar-nav {
    overflow: hidden;
    overflow-y: auto;
}
.or-divider {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 30px 0px;
}

.or-divider:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
    background: rgba(128, 128, 128, .3);
}

.or-divider span {
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    background: #fff;
}

/* Stepper UI */
.stepper-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.step-circle-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.step-completed-icon {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ds-primary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stepper-item.completed .step-completed-icon {
    opacity: 1;
    transform: scale(1);
}

.stepper-item.completed .step-circle {
    opacity: 0;
}

.stepper-item.active .step-circle {
    background: var(--ds-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(245, 100, 22, 0.15);
}

.step-label {
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
}

.stepper-item.active .step-label {
    color: #212529;
    font-weight: bold;
}

.stepper-item.completed .step-label {
    color: var(--ds-primary);
}

.stepper-line {
    flex-grow: 1;
    height: 2px;
    background: #e9ecef;
    margin: 0 10px;
}

.stepper-line.active {
    background: var(--ds-primary);
}

/* Lease Type buttons */
.lease-type-btn {
    font-size: 15px;
    transition: all 0.2s ease;
}

.lease-type-btn:hover {
    background: #f8f9fa;
}

.lease-type-btn.active {
    background: var(--ds-primary) !important;
    color: white !important;
    border-color: var(--ds-primary) !important;
}

/* Transition effects */
.step-content {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cursor-pointer {
    cursor: pointer;
}

/* Template Cards */
.template-card {
    transition: all 0.2s ease;
    border: 2px solid #e9ecef !important;
    padding-top:27px !important;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.template-card:hover {
    border-color: var(--ds-primary) !important;
    background-color: #fff !important;
    transform: translateY(-2px);
}

.template-card.active {
    border-color: var(--ds-primary) !important;
    background-color: rgba(0, 167, 111, 0.05) !important;
}

/* Custom Checkbox UI - Theme Aligned */
.custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 11px;
    transition: all 0.2s ease;
}

.field-item.active .custom-checkbox {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: white;
}

.field-item.active {
    background-color: rgba(0, 167, 111, 0.05) !important;
}

.hover-bg-light:hover {
    background-color: #f8f9fa !important;
}

.transition-all {
    transition: all 0.2s ease;
}


/* Upload UI */
.upload-zone {
    background-color: white;
    transition: all 0.2s ease;
}

.upload-zone:hover {
    border-color: var(--ds-primary) !important;
    background-color: #f8faff;
}

.upload-zone.dragover {
    border-color: var(--ds-primary) !important;
    background-color: rgba(0, 167, 111, 0.08);
    transform: scale(1.02);
}

.fs-xs {
    font-size: 11px !important;
}

/* Progress Circle */
.progress-circle-wrap {
    width: 40px;
    height: 40px;
}

.progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #6c757d;
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
        conic-gradient(var(--ds-primary) var(--progress, 0%), #e9ecef 0);
    border: 1px solid #e9ecef;
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.border-dashed {
    border-style: dashed !important;
}

/* Buttons & Delivery */
.due-date-display {
    transition: all 0.3s ease;
}

.due-date-display:hover {
    transform: translateY(-5px);
}

.due-date-display.bg-primary-subtle {
    border: 1px solid rgba(0, 167, 111, 0.2);
}

.services-included ul li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.rush-sub-options {
    transition: all 0.3s ease;
    opacity: 0.6;
}

.rush-sub-options.active {
    opacity: 1;
}

/* Step 5 Payment Specifics */
.payment-tabs .nav-link {
    border-radius: 6px;
    color: #6c757d;
    font-weight: bold;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    margin: 0 5px;
}

.payment-tabs .nav-link.active {
    background: var(--ds-primary) !important;
    color: white !important;
    border-color: var(--ds-primary);
}

.summary-item label {
    letter-spacing: 0.5px;
}

.price-breakdown span {
    font-size: 15px;
}

#finalTotalAmount {
    font-size: 32px;
}

.input-group-text img {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* Step 6 Thank You Specifics */
.success-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--ds-primary) !important;
    animation: scaleInCheck 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes scaleInCheck {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#step-thankyou h2 {
    color: #2c3e50;
    font-size: 2.2rem;
}

.tracking-tight {
    letter-spacing: 2px;
}

.btn-outline-dark:hover {
    background-color: #2c3e50;
    color: white !important;
}

.btn-warning {
    background-color: var(--ds-warning) !important;
    border-color: var(--ds-warning) !important;
    color: #fff !important;
}
.btn-warning:hover {
    filter: brightness(90%);
}



/* Layout Styles */
#content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 80px 0px 0px 40px;
}

.main-content {
    overflow: hidden;
    overflow-y: auto;
    padding-right: 40px; /* Space for scrollbar */
    padding-bottom:30px;
}

/* Footer Styles */
.site-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    margin-top: auto;
    animation: slideUp 0.5s ease-out;
    margin-left: -40px;
}

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

.footer-glass-card {
    background: rgba(244, 248, 246, 0.65); /* Semi-transparent light green-gray */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

.footer-item-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 14px 18px;
    /* Shiny, metallic Emerald Green Gradient */
    background: linear-gradient(135deg, rgba(30, 130, 85, 0.9) 0%, rgba(0, 0, 0, 0.95) 35%, rgba(20, 105, 65, 0.95) 65%, rgba(15, 85, 50, 0.9) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Slightly stronger glass edge for the shine */
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* Stronger highlight top edge */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    height: 100%;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* Premium sweeping shine animation */
.footer-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-25deg);
    animation: premiumShine 6s infinite;
    pointer-events: none;
    z-index: 1;
}

/* Stagger the shine so they ripple across the footer */
.footer-item:nth-child(1) .footer-item-inner::before { animation-delay: 0s; }
.footer-item:nth-child(2) .footer-item-inner::before { animation-delay: 0.3s; }
.footer-item:nth-child(3) .footer-item-inner::before { animation-delay: 0.6s; }
.footer-item:nth-child(4) .footer-item-inner::before { animation-delay: 0.9s; }

@keyframes premiumShine {
    0% { left: -150%; }
    20% { left: 250%; }
    100% { left: 250%; }
}

.footer-item-inner:hover {
    background: linear-gradient(135deg, rgba(40, 150, 100, 0.95) 0%, rgba(2, 75, 41, .95) 35%, rgba(25, 125, 75, 1) 65%, rgba(20, 100, 60, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2);
}

.icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-item-inner:hover .icon-box {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

.text-box h6 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.15rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.text-box p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    margin-bottom: 0;
    line-height: 1.3;
}
.d-card-wrap .card-body {
    padding: 50px 20px;
}
.d-card-wrap .card-body .icon-shape {
    font-size: 20px;
}

/* Rating Modal Styling */
#ratingModal .rating-modal-glass, 
#feedbackCard .rating-modal-glass {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

#feedbackCard {
    background-color: rgb(230, 230, 230);
}

#ratingModal .rating-stars,
#feedbackCard .rating-stars {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

#ratingModal .star-item,
#feedbackCard .star-item {
    font-size: 2.5rem;
    color: #b7b9bc;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
}

#ratingModal .star-item:hover,
#feedbackCard .star-item:hover,
#ratingModal .star-item.hover,
#feedbackCard .star-item.hover {
    color: var(--ds-warning);
    transform: scale(1.2);
}

#ratingModal .star-item.active,
#feedbackCard .star-item.active {
    color: var(--ds-warning);
    text-shadow: 0 0 15px rgba(255, 171, 0, 0.4);
}

#ratingModal .rating-feedback-area,
#feedbackCard .rating-feedback-area {
    border-radius: 12px;
    border: 1px solid #e9ecef;
    padding: 15px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    resize: none;
}

#ratingModal .rating-feedback-area:focus,
#feedbackCard .rating-feedback-area:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 4px rgba(0, 167, 111, 0.1);
    outline: none;
}

#ratingModal .btn-premium-submit,
#feedbackCard .btn-premium-submit {
    background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary) 100%);
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(245, 100, 22, 0.2);
}

#ratingModal .btn-premium-submit:hover,
#feedbackCard .btn-premium-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 0.25rem rgba(245, 100, 22, 0.55);
    color: white;
}

#ratingModal .rating-project-title,
#feedbackCard .rating-project-title {
    color: var(--ds-primary);
    font-weight: 700;
}
.rating-trigger i {
    color: #b7b9bc;
}
.cstm-tabs .nav-tabs .nav-item:not(:last-child) {
    margin-right: 20px;
}
.cstm-tabs .nav-tabs .nav-link {
    border: none;
    position: relative;
    padding: 6px 0px;
}
.cstm-tabs .nav-tabs .nav-link:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0px;
    left: 0px;
    transition: all ease-in-out .3s;
}
.cstm-tabs .nav-tabs .nav-link:hover:after,
.cstm-tabs .nav-tabs .nav-link.active:after {
    background: var(--ds-primary);
    width: 100%;
}
.fullheightModal .carousel-inner {
    height: calc(100vh - 200px);
    overflow: hidden;
    overflow-y: auto;
}

/* ==========================================================================
   Compact White Dashboard Banners (Real Data Sync)
   ========================================================================== */
.banner .rounded-4 {
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 1.5rem !important; /* Compact padding */
    color: #1a202c !important;
    position: relative;
    overflow: hidden;
    border: 1px solid #edf2f7 !important; /* Subtle border for definition */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 180px; /* Reduced height */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Theme Accents (Top Border for color coding) */
.banner .bg-info-lighter { border-top: 4px solid #4f46e5 !important; }
.banner .bg-success-lighter { border-top: 4px solid #10b981 !important; }
.banner .bg-danger-lighter { border-top: 4px solid #f43f5e !important; }

/* Top-Left Icons (Now themed instead of white) */
.banner .rounded-4::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(0, 0, 0, 0.03);
}

/* Specific Icon Glyphs */
.banner .bg-info-lighter::before { content: '\f0ca'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #f56416; font-size: 0.9rem; }
.banner .bg-success-lighter::before { content: '\f201'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #f56416; font-size: 0.9rem; }
.banner .bg-danger-lighter::before { content: '\f06b'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #f43f5e; font-size: 0.9rem; }

/* Title Layout */
.banner h5 {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 2.5rem !important; /* Spacing for the smaller icon */
    margin-bottom: 0.75rem !important;
    color: #718096 !important; /* Muted slate for titles */
    font-weight: 700 !important;
    z-index: 1;
}

.banner ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.banner ul li {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    justify-content: flex-start; /* Left align items */
    align-items: center;
    padding: 4px 10px !important;
    margin-bottom: 2px !important;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid transparent;
    text-align: left !important;
}

/* Eye-Catching Icon Bullets */
.banner ul li::before {
    content: '\f058'; /* FontAwesome Check Circle */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.8rem; /* Smaller icons */
    margin-right: 8px; /* Tighter spacing */
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Thematic Icons for Different Cards */
.banner .bg-info-lighter ul li::before {
    content: '\f1b2'; /* Cube for Services */
    background: linear-gradient(135deg, #f56416, #f56416);
    -webkit-background-clip: text;
}

.banner .bg-success-lighter ul li::before {
    content: '\f080'; /* Chart Bar for Stats */
    background: linear-gradient(135deg, #f56416, #f56416);
    -webkit-background-clip: text;
}

/* Glassmorphic Hover Interaction */
.banner ul li:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(4px);
    border-color: #f1f5f9 !important;
    transform: translateX(4px) scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    color: #0f172a !important;
}

.banner ul li:hover::before {
    transform: scale(1.25) translateY(-2px); /* Pop & Bounce Transition */
    filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.3));
}

/* High-End Stats Badges */
.banner ul li span {
    font-weight: 800;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    color: #475569;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    border: 1px solid #e2e8f0;
    min-width: 45px;
    text-align: center;
    transition: all 0.3s ease;
    margin-left: auto; /* Pushes badges to the right */
}

.banner ul li:hover span {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

/* Universal Banner Card Styling: High-Visibility Shadows & Depth */
.banner .rounded-4 {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    padding: 0.75rem 1.25rem !important; /* Ultra-sleek compact padding */
    border-radius: 20px !important;
    position: relative;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.03),
        0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Elevated Hover State with High Visibility */
.banner .rounded-4:hover {
    transform: translateY(-4px) !important; /* Subtle lift for ultra-compact scale */
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Subtle Accent Glows for Card Types */
.banner .bg-info-lighter::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 70%);
}

.banner .bg-success-lighter::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 70%);
}

/* Refer a Friend: Modern Direct Typography UI (No Lists) */
.banner .bg-danger-lighter {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Premium Icon Animations */
.banner .bg-danger-lighter .reward-icon-box {
    width: 40px;
    height: 40px;
    background: #fff1f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #f56416;
    position: relative;
    z-index: 1;
    border:1px solid #f56416;
    box-shadow: 0 5px 15px rgba(244, 63, 94, 0.1);
    margin-bottom: 0.4rem !important;
}

@keyframes iconSoftPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.1); }
}

@keyframes iconTada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.2) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.2) rotate(-3deg); }
    100% { transform: scale(1.1) rotate(0); }
}

/* Hover State: The Launch */
.banner .bg-danger-lighter:hover .reward-icon-box {
    background: #f43f5e;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(244, 63, 94, 0.3);
}

/* Subtle Animated Background Pulse */
.banner .bg-danger-lighter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.04), transparent 70%);
    z-index: 0;
}

.banner .bg-danger-lighter h5 {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important; /* Smaller sleek header */
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.3px !important;
    border: none !important;
    position: relative;
    z-index: 1;
}

.banner .bg-danger-lighter p {
    font-size: 0.8rem !important; /* Sleeker text */
    color: #475569 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important; /* Tighter margin */
    max-width: 230px;
    position: relative;
    z-index: 1;
}

/* Premium Button: Refer with Friend */
.banner .bg-danger-lighter .btn-refer {
    background: #f56416 !important;
    color: #ffffff !important;
    padding: 8px 24px !important; /* Sleeker compact button */
    border-radius: 100px !important;
    border: none !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px !important;
    box-shadow: 0 8px 20px rgba(244, 63, 94, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* Hover Effects */
.banner .bg-danger-lighter:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(245, 100, 22, 0.3) !important;
    border-color: rgba(245, 100, 22, 0.2) !important;
}

.banner .bg-danger-lighter:hover .reward-icon-box {
    background: #f56416;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(244, 63, 94, 0.3);
}

.banner .bg-danger-lighter:hover .btn-refer {
    transform: scale(1.05);
    background: #f56416 !important;
    box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4) !important;
}

/* Tooltip Fixes */
.tooltip {
    pointer-events: none !important;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */
[data-bs-theme=dark] {
    --ds-body-bg: #141a21;
    --ds-card-bg: #1c252e;
    --ds-border-color: #2d3748;
    --ds-text-muted: #919eab;
    --ds-text-heading: #f9fafb;
    --ds-text-body: #dfe3e8;
}

[data-bs-theme=dark] body {
    color: var(--ds-text-body);
}

[data-bs-theme=dark] .or-divider span {
    background: var(--ds-card-bg);
    color: var(--ds-text-muted);
}

[data-bs-theme=dark] .step-circle {
    background: var(--ds-border-color);
    color: var(--ds-text-muted);
}

[data-bs-theme=dark] .step-label {
    color: var(--ds-text-muted);
}

[data-bs-theme=dark] .stepper-item.active .step-label {
    color: var(--ds-text-heading);
}

[data-bs-theme=dark] .stepper-line {
    background: var(--ds-border-color);
}

[data-bs-theme=dark] .lease-type-btn {
    color: var(--ds-text-body);
    border-color: var(--ds-border-color);
}

[data-bs-theme=dark] .lease-type-btn:hover {
    background: var(--ds-border-color);
    color: var(--ds-white);
}

[data-bs-theme=dark] .template-card {
    background: var(--ds-card-bg);
    border-color: var(--ds-border-color) !important;
}

[data-bs-theme=dark] .template-card h6 {
    color: var(--ds-text-heading);
}

[data-bs-theme=dark] .template-card:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme=dark] .custom-checkbox {
    background: var(--ds-border-color);
    border-color: #454f5b;
}

[data-bs-theme=dark] .hover-bg-light:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme=dark] .upload-zone {
    background-color: var(--ds-card-bg);
    border-color: var(--ds-border-color) !important;
}

[data-bs-theme=dark] .upload-zone:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-bs-theme=dark] .footer-glass-card {
    background: rgba(20, 26, 33, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme=dark] .footer-item-inner {
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(20, 100, 65, 0.8) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(15, 80, 50, 0.9) 65%, rgba(10, 60, 35, 0.8) 100%);
}

[data-bs-theme=dark] .payment-tabs .nav-link {
    background: var(--ds-card-bg);
    border-color: var(--ds-border-color);
    color: var(--ds-text-muted);
}

[data-bs-theme=dark] #ratingModal .rating-modal-glass,
[data-bs-theme=dark] #feedbackCard .rating-modal-glass {
    background: rgba(28, 37, 46, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme=dark] #ratingModal .modal-header,
[data-bs-theme=dark] #ratingModal .modal-footer {
    border-color: var(--ds-border-color);
}

[data-bs-theme=dark] #ratingModal .modal-title,
[data-bs-theme=dark] #ratingModal .rating-project-title,
#feedbackCard .rating-project-title {
    color: var(--ds-text-heading);
}

[data-bs-theme=dark] .rating-project-title {
    color: var(--ds-primary);
}

[data-bs-theme=dark] .main-content::-webkit-scrollbar-track,
[data-bs-theme=dark] .navbar-nav::-webkit-scrollbar-track {
    background: var(--ds-body-bg);
}

[data-bs-theme=dark] .main-content::-webkit-scrollbar-thumb,
[data-bs-theme=dark] .navbar-nav::-webkit-scrollbar-thumb {
    background: var(--ds-border-color);
}

[data-bs-theme=dark] .form-label {
    color: var(--ds-text-heading) !important;
}

[data-bs-theme=dark] .text-dark {
    color: var(--ds-text-heading) !important;
}

[data-bs-theme=dark] .text-muted {
    color: var(--ds-text-muted) !important;
}

[data-bs-theme=dark] .banner h5 {
    color: var(--ds-text-heading);
}

[data-bs-theme=dark] .banner ul li {
    color: var(--ds-text-body);
}

[data-bs-theme=dark] .banner ul li i {
    color: var(--ds-primary) !important;
}

[data-bs-theme=dark] .reward-label {
    color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme=dark] .progress-circle {
    color: var(--ds-text-heading);
    background-color: var(--ds-gray-100);
}

[data-bs-theme=dark] .step-text {
    color: var(--ds-text-muted);
}

[data-bs-theme=dark] .stepper-item.active .step-text {
    color: var(--ds-text-heading);
}

[data-bs-theme=dark] .card h5, 
[data-bs-theme=dark] .card h6 {
    color: var(--ds-text-heading);
}

[data-bs-theme=dark] .card p {
    color: var(--ds-text-body);
}

[data-bs-theme=dark] .btn-outline-primary:not(:hover) {
    color: var(--ds-primary);
    border-color: var(--ds-primary);
}

/*css-list-inside-swal-start*/
.lease-valid-list{
    padding:0px;
}
.lease-valid-list li{
    list-style:none;
    text-align:left;
    position:relative;
    padding-left:25px;
    font-size:14px;
}
.lease-valid-list li:not(:last-child){
    margin-bottom:15px;
}
.lease-valid-list li:before{
    content:'\f0a4';
    font-family:'Font Awesome 5 Free';
    position:absolute;
    left:0;
    font-size:17px;
    color: var(--ds-danger);
}
h2[class*="-title"]{
    font-size:22px;
    line-height:34px;
}
/*css-list-inside-swal-end*/


.loader-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
    z-index: 9999;
}

.loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    position: absolute;
}

    .loader:before,
    .loader:after {
        border-radius: 50%;
        content: "";
        display: block;
        height: 20px;
        width: 20px;
    }

    .loader:before {
        animation: ball1 1s infinite;
        background-color: var(--ds-warning);
        box-shadow: 30px 0 0 #ff3d00;
        margin-bottom: 10px;
    }

    .loader:after {
        animation: ball2 1s infinite;
        background-color: var(--ds-primary);
        box-shadow: 30px 0 0 #fff;
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(0.8)
    }

    50% {
        transform: rotate(360deg) scale(1.2)
    }

    100% {
        transform: rotate(720deg) scale(0.8)
    }
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 #ff3d00;
    }

    50% {
        box-shadow: 0 0 0 #ff3d00;
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #ff3d00;
        margin-bottom: 10px;
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 #3985f5;
    }

    50% {
        box-shadow: 0 0 0 #3985f5;
        margin-top: -20px;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #3985f5;
        margin-top: 0;
    }
}

.no-resize {
    resize: none;
}

.rlss-green-color {
    color: #00a76f;
    text-decoration: none;
}

#sign-up-note .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.disabled-div {
    /*pointer-events: none;*/
    opacity: 0.5;
    cursor: not-allowed;
}

/* Search input */

.dataTables_filter input {
    width: 220px !important;
    height: 42px;
    border: 1px solid #e5e7eb !important;
    border-radius: 30px !important;
    padding: 0 18px !important;
    outline: none !important;
    box-shadow: none !important;
    margin-left: 10px !important;
}

/* Pagination container */

.pagination {
    display: flex !important;
    align-items: center;
    gap: 1px;
}

    /* Pagination buttons */

    .pagination .dt-paging-button .page-link {
        width: 40px;
        height: 40px;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        
        /*color: #555 !important;*/
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 1px !important;
        padding: 0 !important;
        transition: .3s;
    }
    .pagination .dt-paging-button .page-item .page-link {
        z-index: 3;
        background-color: green !important;
        border-color: #0d6efd;
    }
        /* Hover */
    .pagination .dt-paging-button .page-item.active .page-link,
    .pagination .dt-paging-button .page-item:hover .page-link {
        background: var(--ds-btn-focus-shadow) !important;
        border-color: var(--ds-btn-focus-shadow) !important;
    }

        /* Active button */

.pagination .dt-paging-button.current {
   
}

    /* Previous & Next buttons */

.pagination .dt-paging-button .previous,
.pagination .dt-paging-button .next {
   /* background: #f3f4f6 !important;
    border: none !important;*/
}

    /* Remove focus outline */

.pagination .dt-paging-button:focus {
    /*outline: none !important;*/
    box-shadow: none !important;
}
.modal-body .fields-list {
    height: 500px; /* or max-height: 500px */
    overflow-y: auto;
    overflow-x: hidden;
}

.read-only-star {
    cursor: default;
}

    .read-only-star:hover {
        color: gold; /* Your hover style */
    }
.ribbon {
    width: fit-content;
    line-height: 16px;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 2;
    overflow: hidden;
    color: #fff;
    padding: 4px 8px;
    background: #149b00;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
}
.finc-detail {
    margin: auto 0px;
    min-height: 60px;
    padding: 10px 0px;
}
div.dt-scroll-body{
    box-shadow:none;
    border:none !important;
}

div.dt-processing > div:last-child > div {
    background-color: #f564168c !important;
}

div.dt-processing.card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable th.dt-right div.dt-column-header,
table.dataTable th.dt-right div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer,
table.dataTable td.dt-right div.dt-column-header,
table.dataTable td.dt-right div.dt-column-footer {
    flex-direction: row !important;
}

/* Search term highlight inside DataTables */
table.dataTable tbody mark.dt-search-highlight {
    background-color: #ffe066;
    color: inherit;
    padding: 0;
    border-radius: 2px;
    font-weight: inherit;
}