/* ----------------------------
   Form Step Control
---------------------------- */
.form-step {
    display: none;
}
.form-step.active {
    display: block;
}
.form-progress {
    height: 10px;
    border-radius: 20px;
    overflow: hidden;
}
.progress-bar-color {
    width: 25%;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
}

/* ----------------------------
   Input Group (with icon)
---------------------------- */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding-right: 2.5rem; /* space for custom icon */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
}

/* Custom icon inside input/select (🎂, 🔽 etc) */
.input-group .icon,
.position-relative span {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    color: #555;
    pointer-events: auto;
    z-index: 5;
}

/* ----------------------------
   Remove default date picker icon
---------------------------- */
/* Chrome, Safari, Edge, Opera */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Firefox */
input[type="date"]::-moz-calendar-picker-indicator {
    display: none !important;
}

/* Remove spin/clear buttons in webkit */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
    display: none !important;
}

/* Safari/Opera extra fix */
input[type="date"] {
    background-image: none !important;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

/* ----------------------------
   Remove default dropdown arrow
---------------------------- */
select,
select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important; /* bootstrap bg-image भी हटेगा */
    padding-right: 2.5rem; /* icon के लिए space */
}

/* ----------------------------
   Responsive Layout (Grid fix)
---------------------------- */
/* Mobile view (full width) */
@media (max-width: 767px) {
    .col-md-6,
    .col-md-4,
    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .form-step .row.g-3 > div {
        margin-bottom: 10px;
    }
}

/* Tablet view (50–50%) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Father & Mother name → 50-50 */
    .father-col, .mother-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* DOB, Gender, Phone, Email → 50-50 in two rows */
    .dob-col, .gender-col, .phone-col, .email-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Religion & Category → 50-50 */
    .religion-col, .category-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* City & State → 50-50 */
    .city-col, .state-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Desktop view (custom % widths) */
@media (min-width: 992px) {
    /* Father & Mother → 50% each */
    .father-col, .mother-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* DOB, Gender, Phone, Email → 20-20-25-35% */
    .dob-col {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .gender-col {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .phone-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .email-col {
        flex: 0 0 35%;
        max-width: 35%;
    }

    /* Religion & Category → 50% each */
    .religion-col, .category-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* City & State → 50% each */
    .city-col, .state-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.cake-icon{
	padding-right: 0.75rem !important;
	top: 68% !important;
}
.other-icon{
	padding-right: 0.75rem !important;
	top: 72% !important;
}
/* ----------------------------
   Textarea (Address full width)
---------------------------- */
textarea[name="address"] {
    min-height: 100px;
    resize: vertical;
}

.form-step { display: none; }
.form-step.active { display: block; }
.form-progress { height:10px; border-radius:20px; overflow:hidden; }
.progress-bar-color { background: linear-gradient(90deg,#6a11cb,#2575fc); width:25%; }

.form-icon {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    font-size:18px;
}
.top-textarea {
    top:10px !important;
    transform:none !important;
}

/* Hide default date & select icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
select::-ms-expand {
    display:none !important;
}
select, input[type="date"] {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:none !important;
}
.doc-preview {
    max-height: 75px;
    width: 100%;
    display: block;
  }
  
 .position-relative .delete-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  color: red;
  font-size: 20px;
  line-height: 18px;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

/* Style for the new upload boxes */
.upload-box {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-box:hover {
  border-color: #007bff;
  background-color: #f8f9fa;
}
.upload-box .plus {
  font-size: 2rem;
  font-weight: bold;
  color: #aaa;
  line-height: 1;
}
.upload-box .label {
  color: #777;
  font-size: 0.9rem;
  margin-top: 5px;
}
.upload-box .preview-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-box .doc-preview {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.upload-box .delete-icon {
  position: absolute;
  top: 0px;
  right: 5px;
  font-size: 1.5rem;
  color: #dc3545;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.upload-box .delete-icon:hover {
  background: #dc3545;
  color: #fff;
}
.main-docs-row {
  margin-bottom: 1.5rem;
}
.doc-col {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.other-docs-row {
  margin-top: 1.5rem;
}

/* Responsive layout */
@media (min-width: 768px) {
  .doc-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (max-width: 767.98px) {
  .doc-col {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 1rem;
  }
}
.upload-box {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease-in-out;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .upload-box:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .upload-box .plus {
            font-size: 2rem;
            font-weight: bold;
            color: #aaa;
            line-height: 1;
        }
        .upload-box .label {
            color: #777;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .upload-box .preview-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .upload-box .doc-preview {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        .upload-box .delete-icon {
            position: absolute;
            top: 0px;
            right: 5px;
            font-size: 1.5rem;
            color: #dc3545;
            cursor: pointer;
            background: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease-in-out;
        }
        .upload-box .delete-icon:hover {
            background: #dc3545;
            color: #fff;
        }
        .main-docs-row {
            margin-bottom: 1.5rem;
        }
        .doc-col {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }
        .other-docs-row {
            margin-top: 1.5rem;
        }
        /* Responsive layout */
        @media (min-width: 768px) {
            .doc-col {
                flex: 0 0 25%;
                max-width: 25%;
            }
        }
        @media (max-width: 767.98px) {
            .doc-col {
                flex: 0 0 50%;
                max-width: 50%;
                margin-bottom: 1rem;
            }
        }

        /* Image Editor Modal specific styles */
        #imageEditorModal .modal-dialog {
			max-width: 90% !important;
			height: 100vh; /* Make the modal dialog occupy 100% of the viewport height */
			margin: auto;
			display: flex;
			align-items: center;
		}

		#imageEditorModal .modal-content {
			height: 100%;
			width: 100%;
		}

		#imageEditorModal .modal-body {
			flex-grow: 1;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
		}

		.img-container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f5f5f5;
		}

		.img-container img {
			display: block;
			max-width: 100%;
			max-height: 100%;
		}

        /* Your existing CSS styles */
        .upload-box {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease-in-out;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .upload-box:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .upload-box .plus {
            font-size: 2rem;
            font-weight: bold;
            color: #aaa;
            line-height: 1;
        }
        .upload-box .label {
            color: #777;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .upload-box .preview-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .upload-box .doc-preview {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        .upload-box .delete-icon {
            position: absolute;
            top: 0px;
            right: 5px;
            font-size: 1.5rem;
            color: #dc3545;
            cursor: pointer;
            background: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease-in-out;
        }
        .upload-box .delete-icon:hover {
            background: #dc3545;
            color: #fff;
        }
        .main-docs-row {
            margin-bottom: 1.5rem;
        }
        .doc-col {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }
        .other-docs-row {
            margin-top: 1.5rem;
        }
        /* Responsive layout */
        @media (min-width: 768px) {
            .doc-col {
                flex: 0 0 25%;
                max-width: 25%;
            }
        }
        @media (max-width: 767.98px) {
            .doc-col {
                flex: 0 0 50%;
                max-width: 50%;
                margin-bottom: 1rem;
            }
        }
        .img-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }
        .img-container img {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }
        /* New styles for ID Proof Pop-up */
        .id-proof-sidebar {
            border-right: 1px solid #ddd;
            padding-right: 15px;
        }
        .id-proof-canvas {
            position: relative;
            height: 500px;
            border: 2px dashed #ddd;
            overflow: hidden;
            /* Chessboard pattern */
            background-color: #eee;
            background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
            background-size: 25px 25px;
        }
        .id-proof-image {
            position: absolute;
            cursor: grab;
            max-width: 100%;
            max-height: 400px; /* Updated: Max height set to 400px */
            transition: transform 0.2s ease-in-out;
            touch-action: none;
            user-select: none;
        }
        .id-proof-image.active {
            outline: 2px dashed #007bff;
            outline-offset: 5px;
        }
        /* Style for id-proof-thumbnail to match upload-box */
        .id-proof-thumbnail {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease-in-out;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        .id-proof-thumbnail.active {
            border-color: #007bff;
        }
        .id-proof-thumbnail-label {
            position: static; /* Change to static to match upload-box label flow */
            transform: none; /* Remove transform to match upload-box label flow */
            color: #777; /* Match color of upload-box label */
            font-size: 0.9rem; /* Match font size of upload-box label */
            font-weight: normal; /* Reset font weight */
            margin-top: 5px; /* Add margin to match upload-box label */
        }


		
		/* ID Proof Editor Modal */
#idProofEditorModal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
/* Updated canvas dimensions */
.id-proof-canvas {
    border: 2px dashed #ccc;
    width: 700px; /* Canvas width set to 700px as requested */
    height: 300px; /* Canvas height set to 300px as requested */
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.id-proof-image {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: grab;
    transition: transform 0.3s ease;
}
.id-proof-image.active {
    border: 2px solid #007bff;
    z-index: 1;
}
.id-proof-thumbnail {
    width: 100px;
    height: 70px;
    border: 2px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.id-proof-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.id-proof-thumbnail .delete-icon {
    top: -5px;
    right: -5px;
}
.id-proof-thumbnail-label {
    font-size: 0.8em;
    color: #666;
    text-align: center;
}
.id-proof-crop-area {
    border: 2px solid #ffc107;
    position: absolute;
    cursor: move;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}
.id-proof-crop-handle {
    width: 10px;
    height: 10px;
    background: #ffc107;
    border: 1px solid #fff;
    position: absolute;
}
.id-proof-crop-handle.top-left { top: -5px; left: -5px; cursor: nwse-resize; }
.id-proof-crop-handle.top-right { top: -5px; right: -5px; cursor: nesw-resize; }
.id-proof-crop-handle.bottom-left { bottom: -5px; left: -5px; cursor: nesw-resize; }
.id-proof-crop-handle.bottom-right { bottom: -5px; right: -5px; cursor: nwse-resize; }

#studentMessage {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 300px;
    max-width: 90%;
    text-align: center;
    z-index: 1050;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* Allows clicks to pass through when not active */
}

/* Add a class to hide the element */
.d-none {
    display: none !important;
}

.form-text-view{
	padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color:#eee;
}
.form-select-view{
	padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-height:38px;
}
.preview-x{
	position:absolute; 
	top:-12px; 
	right:0px; 
	cursor:pointer; 
    color:red;  
	border-radius:50%; 
    padding:0px 6px; 
	font-size:28px;
	font-weight:bold;
}
.preview-img{
	width:100%; 
	height:180px; 
	border:1px solid #ccc; 
	border-radius:6px;
	position:relative;
}
.preview-div{
	position:relative;
}
.fs-10 {
    font-size: 10px !important;
}
.tooltip-warning .tooltip-inner {
    background-color: #fd7e14 !important; /* Bootstrap warning orange */
    color: #fff !important;
    font-weight: 500;
    font-size: 0.875rem;
}

.tooltip-warning .tooltip-arrow::before {
    border-top-color: #fd7e14 !important;
}