/*
* custom styles for the new case form
*/

/* --- Variables --- */
:root {
    --cs-primary: #0073ea;
    --cs-secondary: #019cd2;
    --cs-success: #10b981;
    --cs-text-dark: #1e293b;
    --cs-text-light: #64748b;
    --cs-background: #f8fafc;
    --cs-border-color: #dcdfe6;
    --cs-border-radius: 12px;
    --cs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.btn-outline-primary {
    --bs-btn-color: #0073ea;
    --bs-btn-border-color: #0073ea;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0073ea;
    --bs-btn-hover-border-color: #0073ea;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0073ea;
    --bs-btn-active-border-color: #0073ea;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0073ea;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0073ea;
}


#cs_age_increment, #cs_age_decrement{
    z-index: 1;
}

.image-upload-wrapper{
    cursor: pointer !important;
    transition: all 200ms ease-in-out;
    opacity: 0.8;
    background:#e2e2e7;
    min-height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.image-upload-wrapper:hover{
    opacity: 1;
    transform:scale(1.03);
    background:#c1c1c1;
}

.image-upload-wrapper.drag-over {
    border: 2px dashed var(--cs-primary);
    background: #f0f0fa;
}

.circle-btn{
    height: 40px;
    width: 40px;
    padding: 0;
    text-align: center;
    display: flex
;
    align-items: center;
    justify-content: center;
}

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

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

/* In assets/css/clear-smile-new-case.css */

/* --- Styles for Preview Step --- */
#case-preview-content .card-header h5 {
    margin-bottom: 0;
    font-size: 1.1rem;
    color: var(--cs-primary);
}
#case-preview-content .preview-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid #dcdfe6;
}
#case-preview-content .preview-row:last-child {
    border-bottom: none;
}
#case-preview-content .preview-row dt {
    font-weight: 600;
    color: #343a40;
}
#case-preview-content .preview-row dd {
    margin-bottom: 0;
    text-transform: capitalize;
}
.preview-image-wrapper {
    position: relative;
    text-align: center;
    border: 1px solid #dcdfe6;
    padding: 5px;
    border-radius: 0.25rem;
}
.preview-image-wrapper img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.preview-image-caption {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 5px;
    text-transform: capitalize;
}

/* In assets/css/clear-smile-new-case.css */

.preview-file-list {
    list-style: none;
    padding-left: 0;
}

.preview-file-list li {
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
    border: 1px solid #dcdfe6;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.preview-file-list li a {
    text-decoration: none;
    font-weight: 500;
}

/* Increase horizontal padding on preview cards for better spacing */
#case-preview-content .card-body {
    --bs-card-spacer-x: 2rem;
}

/* Set a specific border color for preview cards */
#case-preview-content .card {
    border: 1px solid #dcdfe6 !important;
}

/* --- Main Layout --- */
.cs-new-case-container {
    background-color: var(--cs-background);
    padding: 3rem 3rem;
}

.cs-steps-content .cs-step-pane {
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--cs-border-radius);
    box-shadow: var(--cs-shadow);
}

.cs-steps-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--cs-text-dark);
    margin-bottom: 0.5rem;
}

.cs-steps-content h4,
.cs-steps-content h5 {
    font-weight: 600;
    color: var(--cs-text-dark);
}

/* --- Stepper Navigation --- */
.cs-stepper .cs-step {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 12px;
    border-radius: var(--cs-border-radius);
    background: #fff;
    box-shadow: var(--cs-shadow);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
}

.cs-stepper .cs-step:hover:not(.active):not(.disabled) {
    border-color: var(--cs-primary);
    transform: translateY(-2px);
}

.cs-stepper .cs-step .step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef2ff;
    color: #0073ea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 16px;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

.cs-stepper .cs-step .step-label {
    font-weight: 500;
    color: var(--cs-text-dark);
}

/* Stepper States */
.cs-stepper .cs-step.active {
    background: var(--cs-primary);
}
.cs-stepper .cs-step.active .step-icon {
    background: #fff;
    color: var(--cs-primary);
}
.cs-stepper .cs-step.active .step-label {
    color: #fff;
    font-weight: 600;
}

.cs-stepper .cs-step.completed {
    background: #eef2ff;
}

/* Style for the completed step's icon container - UPDATED */
.cs-stepper .cs-step.completed .step-icon {
    background: var(--cs-success);
    color: #fff;
    font-size: 0;
}

.cs-stepper .cs-step.completed .step-icon::before {
    content: '✓';
    font-size: 20px;
    line-height: 32px;
    font-weight: bold;
}

.cs-stepper .cs-step.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f1f5f9;
}

/* --- Form Elements --- */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--cs-border-color);
    padding: .750rem .75rem !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--cs-primary) 0%, #7c3aed 100%);
    border: none;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
}

/* --- Styles for Special Preview Grids --- */
.preview-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding-top: 5px;
}
.preview-grid-item {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px;
    text-align: center;
    font-size: 0.9rem;
    background-color: #f8fafc;
}
.preview-grid-key {
    display: block;
    font-weight: 600;
    color: #4f46e5;
    font-size: 0.8rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2px;
    padding-bottom: 2px;
}
.preview-grid-value {
    display: block;
    color: #334155;
}


@media (max-width: 1590px) {

    .circle-btn {
        height: 34px;
        width: 34px;
    }
}

@media (max-width: 1390px) {

    .circle-btn {
        height: 30px;
        width: 30px;
    }
}

/* Tooth interaction styles - UPDATED */
.tooth-lock-container {
    position: relative;
    display: inline-block;
}

.tooth-lock-icon {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: none;
    z-index: 10;
    font-size: 10px;
    line-height: 11px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

/* Yellow lock for NDM selected teeth */
.tooth-button-locked .tooth-lock-icon {
    display: block !important;
    background-color: #ffc107 !important;
}

.tooth-button-locked .tooth-lock-icon::after {
    content: '🔒';
    font-size: 8px;
}

/* Red cross for TE selected teeth */
.tooth-button-crossed .tooth-lock-icon {
    display: block !important;
    background-color: #dc3545 !important;
}

.tooth-button-crossed .tooth-lock-icon::after {
    content: '✕';
    font-size: 10px;
    line-height: 12px;
}

/* Disabled teeth (grayed out) */
.tooth-button-disabled label {
    opacity: 0.5 !important;
    pointer-events: none !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.tooth-button-disabled input {
    pointer-events: none !important;
}

/* Responsive input fields for gap/deglaze sections */
.deglaze-amount-input,
.gap-record-input, 
.reserve-gap-input {
    width: 40px !important;
    min-width: 35px !important;
    max-width: 50px !important;
    font-size: 0.8rem !important;
    padding: 0.25rem 0.1rem !important;
    text-align: center !important;
    margin: 0 3px !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1590px) {
    .deglaze-amount-input,
    .gap-record-input,
    .reserve-gap-input {
        width: 35px !important;
        max-width: 40px !important;
        font-size: 0.7rem !important;
    }
}

@media (max-width: 1390px) {
    .deglaze-amount-input,
    .gap-record-input,
    .reserve-gap-input {
        width: 30px !important;
        max-width: 35px !important;
        font-size: 0.65rem !important;
        padding: 0.2rem 0.05rem !important;
    }
}

@media (max-width: 1200px) {
    .deglaze-amount-input,
    .gap-record-input,
    .reserve-gap-input {
        width: 28px !important;
        max-width: 32px !important;
        font-size: 0.6rem !important;
    }
}

/* Container adjustments for better alignment */
.d-flex.flex-wrap input[type="text"] {
    flex: 0 0 auto !important;
}

/* Hidden teeth and fields styles */
.tooth-lock-container:hidden,
.circle-btn:hidden,
input[type="text"]:hidden {
    display: none !important;
}

/* Disabled input field styles */
.disabled-input {
    background-color: #e9e9e9 !important;
    border-color: #cdcecf !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.tooth-hidden {
    display: none !important;
}

/* --- Custom Button Design for Choices --- */
.btn-choice {
    --cs-choice-border-color: #dcdfe6; /* Light grey border */
    --cs-choice-text-color: #606266;   /* Grey text */
    --cs-choice-bg-color: #ffffff;     /* White background */

    border: 1px solid var(--cs-choice-border-color);
    color: var(--cs-choice-text-color);
    background-color: var(--cs-choice-bg-color);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-weight: 500;
}

.btn-choice.circle-btn.is-selected-in-diagnosis {
    --cs-choice-border-color: var(--cs-primary);
    --cs-choice-text-color: var(--cs-primary);
}

/* Hover effect - FINAL FIX */
.btn-choice:hover {
    background-color: #ffffff;
    border-color: var(--cs-primary) !important;
    color: var(--cs-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 115, 234, 0.15);
}

/* 1. Disable hover effects for ALL non-interactive tooth number labels */
.btn-choice.is-static-label:hover {
    border-color: var(--cs-choice-border-color) !important; /* Keep original grey border */
    color: var(--cs-choice-text-color) !important;      /* Keep original grey text */
    transform: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Reset to default shadow */
    cursor: default; /* Change cursor to normal arrow */
}

/* Style for tooth labels (static OR clickable) disabled by extraction selection */
.is-static-label.is-disabled-by-extraction,
.btn-choice.is-disabled-by-extraction {
    background-color: #ffffff !important;
    cursor: not-allowed;
    /* Also remove any selection-based blue styling */
    --cs-choice-border-color: #dcdfe6 !important;
    --cs-choice-text-color: #606266 !important;
}

.btn-check:checked + .btn-choice:hover {
    color: #ffffff !important;
}

/* Selected/Checked state */
.btn-check:checked + .btn-choice {
    background-color: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 115, 234, 0.4);
}

/* Add a checkmark icon to the selected button */
.btn-check:checked + .btn-choice::before {
    content: '✓';
    font-weight: 600;
    margin-right: 8px;
    display: none;
}

/* --- Custom Style for Age Spinner/Input Group --- */
.cs-input-spinner .btn {
    background-color: #ffffff;
    border: 1px solid #cdcecf; /* Same border as our choice buttons */
    color: #374151;
    box-shadow: none !important;
}

/* Hover effect for spinner buttons */
.cs-input-spinner .btn:hover {
    border-color: var(--cs-primary) !important;
    color: var(--cs-primary);
    background-color: #f8fafc;
    z-index: 2; /* Taake hover border saaf dikhe */
}

/* Style for the number input field */
.cs-input-spinner .form-control {
    border-color: #cdcecf;
    box-shadow: none !important;
    background-color: #ffffff !important; /* readonly field ka background theek karne ke liye */
}

/* Focus effect for the number input field */
.cs-input-spinner .form-control:focus {
    border-color: var(--cs-primary);
    z-index: 3; /* Taake focus border saaf dikhe */
}

/* Add Arrow Icons to Navigation Buttons */

/* Add Left Arrow Icon to Previous Button */
.btn-secondary.cs-previous-step::before {
    content: '←';
    margin-right: 8px;
    font-weight: bold;
}

/* Add Right Arrow Icon to Next Button */
.cs-next-step::after {
    content: '→';
    margin-left: 8px;
    font-weight: bold;
}

/* Override Next Step button to have a solid color instead of gradient */
.cs-next-step.btn-primary {
    background: var(--cs-primary);
}

/* Submit aur Update buttons se arrow hatane ke liye */
#submit-case-btn::after,
#update-case-btn::after {
    content: none;
}


/* --- Success Message Styling --- */
#submission-success {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    animation: fadeIn 0.5s ease-in-out;
}

.submission-success-content {
    background: #fff;
    padding: 3rem 4rem;
    border-radius: var(--cs-border-radius);
    box-shadow: var(--cs-shadow);
    text-align: center;
    max-width: 600px;
}

.success-icon {
    width: 80px;
    height: 80px;
    background-color: var(--cs-success);
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    animation: popIn 0.3s ease-out 0.2s backwards;
}

.submission-success-content h2 {
    color: var(--cs-text-dark);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.case-id-display {
    background-color: #eef2ff;
    border: 1px dashed var(--cs-primary);
    padding: 0.75rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    font-size: 1.1rem;
}

.case-id-display strong {
    color: var(--cs-primary);
    font-weight: bold;
}

.success-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

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

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Success page ke "Go to Dashboard" button ka color theek karne ke liye */
#submission-success .btn-primary {
    background: var(--cs-primary);
}

/* --- START: Styles for Disabled Step Links --- */
.cs-step-link.disabled {
    color: #adb5bd; /* Halkay grey rang ka text */
    pointer-events: none; /* Click ko disable karega */
    cursor: not-allowed; /* Disable wala cursor dikhaye ga */
    background-color: #f8f9fa; /* Halkay grey rang ka background */
}

.cs-step-link.disabled .step-number {
    background-color: #e9ecef;
    color: #6c757d;
}
/* --- END: Styles for Disabled Step Links --- */


/* --- START: Styles for Image Upload Overlay --- */
.image-upload-wrapper .upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.0rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Taake overlay hover ko block na kare */
    border-radius: 0.25rem; /* Wrapper ke border-radius se match karega */
}

.image-upload-wrapper:hover .upload-overlay {
    opacity: 1;
    pointer-events: auto; /* Ab icons per click ho sakega */
}

.overlay-icon {
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.overlay-icon:hover {
    transform: scale(1.2);
}
/* --- END: Styles for Image Upload Overlay --- */


/* Styles for the new Other Annexes wrapper */
#other-annexes-wrapper {
    min-height: 150px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; /* Light background */
}

/* Style for the file link container when a file is loaded */
#other-annexes-wrapper .file-link-container {
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute; /* Take up the whole space */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eef2ff; /* Light blue background when file exists */
    padding: 1rem;
    border-radius: inherit; /* Match wrapper's border radius */
}

#other-annexes-wrapper .file-link-container a {
    color: var(--cs-primary);
    font-weight: 600;
    text-decoration: none;
    word-break: break-all; /* Prevent long filenames from overflowing */
}

#other-annexes-wrapper .file-link-container a i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cs-text-light);
}

/* Style for the delete icon inside the file link container */
#other-annexes-wrapper .file-link-container .delete-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #dc3545; /* Red color */
    background: white;
    padding: 6px;
    border-radius: 50%;
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

#other-annexes-wrapper .file-link-container .delete-icon:hover {
    background-color: #fbeeee; /* Light red on hover */
}



/* Styles for the Other Annexes file list */
#other-annexes-file-list .list-group-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background-color: #f8f9fa; /* Light background for items */
    border-top: 1px solid #dee2e6 !important; /* Separator lines */
}

#other-annexes-file-list .list-group-item:first-child {
    border-top: none !important; /* Remove top border for the first item */
}

#other-annexes-file-list .annex-file-link {
    color: var(--cs-text-dark);
    text-decoration: none;
    word-break: break-all; /* Prevent long filenames from breaking layout */
}

#other-annexes-file-list .annex-file-link:hover {
    color: var(--cs-primary);
    text-decoration: underline;
}

#other-annexes-file-list .delete-annex-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1; /* Ensure icon is vertically centered */
}

#other-annexes-file-list .delete-annex-btn i {
    pointer-events: none; /* Make sure clicks go to the button */
}


/* Ensure wrappers with files hide the label and show the link container */
.image-upload-wrapper.has-file .file-link-container {
    display: flex !important; /* Force display when file exists */
}
.image-upload-wrapper.has-file > label { /* Target direct label child */
    display: none !important; /* Hide label when file exists */
}

/* Styles for the CBCT Data wrapper specifically */
#cbct-data-wrapper {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2e2e7;
}

#cbct-data-wrapper .file-link-container {
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eef2ff; 
    padding: 1rem;
    border-radius: inherit; 
}

#cbct-data-wrapper .file-link-container a {
    color: var(--cs-primary);
    font-weight: 600;
    text-decoration: none;
    word-break: break-all; 
}

#cbct-data-wrapper .file-link-container a i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cs-text-light);
}

#cbct-data-wrapper .file-link-container .delete-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #dc3545; 
    background: white;
    padding: 6px;
    border-radius: 50%;
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}
#cbct-data-wrapper .file-link-container .delete-icon:hover {
     background-color: #fbeeee; 
}


/* --- Dark Theme for Image Lightbox --- */

/* Modal ka backdrop thora dark karein */
.modal-backdrop.show {
    opacity: 0.8; /* Default 0.5 hota hai */
}

/* Custom class wale modal per apply karein */
.cs-image-lightbox-dark .modal-dialog {
    /* Max width set karein taake bohat bara na ho jaye */
    max-width: 90%; 
}

/* Image ko corners round dein (optional) */
.cs-image-lightbox-dark #lightboxImage {
    border-radius: 12px; /* Optional rounded corners */
}

/* Ensure modal content itself is transparent */
.cs-image-lightbox-dark .modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important; /* Optional: Remove default shadow if needed */
}


/* --- CLOSE BUTTON Style (Matching Screenshot) --- */
.cs-image-lightbox-dark .cs-lightbox-close-btn {
    /* Positioning (Keep as is, relative to image container) */
    position: absolute; 
    top: 10px;  
    right: 10px; 
    z-index: 1056; 
    
    /* --- Appearance --- */
    /* Remove default Bootstrap background/border */
    background-color: transparent;
    border: none;
    
    /* Set dimensions and shape */
    width: 32px;  /* Adjust size as needed */
    height: 32px; /* Adjust size as needed */
    padding: 0;   /* Remove padding */
    border-radius: 50%; /* Make it circular */
    
    /* Dark semi-transparent background */
    background-color: rgb(40, 40, 40); /* Dark grey with 80% opacity */
    
    /* Style the SVG icon (thin white X) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%; /* Adjust icon size within the circle */
    
    /* Remove default filter if any was left */
    filter: none; 
    
    /* Opacity and Transition */
    opacity: 0.85; /* Slightly more visible */
    transition: opacity .15s ease-in-out, background-color .15s ease-in-out;
    cursor: pointer;
}

.cs-image-lightbox-dark .cs-lightbox-close-btn:hover {
     opacity: 1;
     background-color: rgba(0, 0, 0, 0.9); /* Darker on hover */
}

/* Ensure focus style is visible */
.cs-image-lightbox-dark .cs-lightbox-close-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.4); /* White focus ring */
}

/* Remove default Bootstrap focus shadow if needed */
.cs-image-lightbox-dark .btn-close:focus {
    box-shadow: none; 
}


/* --- Fix Lightbox Backdrop Click Issue (Alternative) --- */

/* Make the dialog itself ignore clicks */
.cs-image-lightbox-dark .modal-dialog {
    pointer-events: none;
}

/* Re-enable clicks ONLY on the modal content */
.cs-image-lightbox-dark .modal-content {
    pointer-events: auto;
    /* Ensure it's still transparent */
    background-color: transparent !important; 
    border: none !important;
    box-shadow: none !important;
}

/* =================================================== */
/* == FINAL FORM RTL FIXES (100% WORKING) == */
/* =================================================== */

/* 1. STEP WIZARD FIX (Gap between Number & Text) */
/* Number ko Text se door karne ke liye Left Margin dein */
body.rtl .cs-step .step-icon {
    margin-right: 0 !important;
    margin-left: 14px !important; /* Gap barhaya hai */
}


/* 2. MALE/FEMALE RADIUS FIX (Button Group) */
/* Problem: Input field beech main hone ki wajah se radius apply nahi ho raha tha. */
/* Solution: Hum 'nth-of-type' use karenge jo sirf Labels ko ginti karega. */

/* Pehla Button (Jo Hebrew main Right side par hai - Male) */
body.rtl .btn-group > label.btn:nth-of-type(1):not(:only-of-type) {
    border-top-right-radius: var(--cs-border-radius, 4px) !important;
    border-bottom-right-radius: var(--cs-border-radius, 4px) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px !important; 
}

/* Aakhri Button (Jo Hebrew main Left side par hai - Female) */
body.rtl .btn-group > label.btn:nth-of-type(2) {
    border-top-left-radius: var(--cs-border-radius, 4px) !important;
    border-bottom-left-radius: var(--cs-border-radius, 4px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* 3. MECHANISM DROPDOWN FIX (Arrow Position) */
/* Problem: Arrow Right side par text ke upar tha. */
/* Solution: Arrow ko Left side shift kiya aur text ki padding adjust ki. */
body.rtl select.form-select {
    background-position: left 0.75rem center !important; /* Icon ko Left le jao */
    padding-left: 2.25rem !important; /* Left se jagah choro icon ke liye */
    padding-right: 0.75rem !important; /* Right side normal rakho text ke liye */
    text-align: right !important; /* Text ko Right align karo */
}


/* 4. AGE WORD GAP FIX */
/* Problem: "Age" word - + ke sath chipka hua tha. */
/* Solution: Margin-right ko 0 kiya aur Margin-left add kiya. */
body.rtl .d-flex.align-items-center .form-label.me-3 {
    margin-right: 0 !important;
    margin-left: 15px !important; /* Ye gap dega Age word aur Spinner ke beech */
}


/* 5. AGE SPINNER CORNERS (Safe Check) */
/* Input group ke liye bhi corners fix */
body.rtl .input-group > .btn:first-child {
    border-radius: 0 4px 4px 0 !important;
}
body.rtl .input-group > .btn:last-child {
    border-radius: 4px 0 0 4px !important;
}


/* 6. Navigation buttons arrow direction ---- */
/* Hebrew mein Previous button pe RIGHT arrow hona chahiye */
body.rtl .btn-secondary.cs-previous-step::before {
    content: '→' !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    font-weight: bold;
    order: 1;
}

body.rtl .btn-secondary.cs-previous-step::after {
    content: none !important;
}

body.rtl .btn-secondary.cs-previous-step {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
}

/* Hebrew mein Next button pe LEFT arrow hona chahiye */
body.rtl .cs-next-step::after {
    content: '←' !important; /* Reverse arrow */
    margin-right: 8px !important;
    margin-left: 0 !important;
}


/* 7. IS-INVALID ICON RTL FIX */
/* Hebrew mein validation error icon Right side par aana chahiye */
body.rtl .form-control.is-invalid,
body.rtl .form-select.is-invalid {
    background-position: left 0.75rem center !important;
    padding-left: 2.25rem !important;
    padding-right: 0.75rem !important;
}


/* 8. MALE/FEMALE BUTTON RADIUS FIX - English jaisa */
body.rtl .btn-group .btn-choice {
    border-radius: 6px !important;
}
body.rtl .btn-group > label.btn:nth-of-type(1):not(:only-of-type) {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
body.rtl .btn-group > label.btn:nth-of-type(2) {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* 9. TEETH CHART CENTER LINE FIX (SUPER RTL FIX) */
/* Target Bootstrap border classes */
body.rtl .cs-new-case-container .border-end,
body.rtl .cs-new-case-container .border-right {
    border-right: 0 !important;
    border-left: 1px dashed #dee2e6 !important; /* 'solid' ko 'dashed' kar diya */
}

/* Target Inline Styles */
body.rtl .cs-new-case-container [style*="border-right"] {
    border-right: 0 !important;
    border-left: 1px dashed #dee2e6 !important; /* 'solid' ko 'dashed' kar diya */
}

/* Target Step 3 Grid directly */
body.rtl .cs-step-pane[data-step="3"] .row > .col-6:first-child,
body.rtl .cs-step-pane[data-step="3"] .row > .col-md-6:first-child {
    border-right: 0 !important;
    border-left: 1px dashed #dee2e6 !important; /* 'solid' ko 'dashed' kar diya */
}