:root {
	--ninja-bleu: #013fa4;
	--bs-primary: #013fa4;
	--bs-primary-rgb: 1, 63, 164;
    --bg-gradient: linear-gradient(135deg, #ffffff 0%, rgba(1, 63, 164, .10) 100%);
}

body {
	margin: 0;
}

@media (min-width: 768px) {
	body {
		background: var(--bg-gradient);
	}
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #002258; /* Teinte plus foncée */
  --bs-btn-hover-border-color: #002258;
}

#app-content {
	background: var(--bg-gradient);
}

@media (min-width: 576px) {
	.w-md-50 {
		max-width: 50% !important;
	}
}

.h-100 {
  height: 100% !important; /* Ensure 100% height overrides other styles */
}
.bg-grey-10 {
	background-color: rgba(0,0,0,.1);
	color: grey;
}
.bg-ninja, .btn-ninja {
	background-color: var(--ninja-bleu) !important;
	color: white !important;
}
.btn-ninja:hover {
	background-color: rgb(0, 80, 209) !important;
}
.bg-ninja-2, .bg-ninja-20 {
	background-color: rgba(1, 63, 164, .2);
}
.bg-ninja-10 {
	background-color: rgba(1, 63, 164, .1);
}
.bg-ninja-05 {
	background-color: rgba(1, 63, 164, .05);
}

.text-ninja {
	color: var(--ninja-bleu);
}
.border-ninja {
	border-color: var(--ninja-bleu) !important;
}
.text-orange {
	color: rgb(237, 147, 9);
}
.border-orange {
	border-color: rgb(237, 147, 9);
}
.bg-orange {
	background-color: rgb(237, 147, 9);
}
.bg-orange-2 {
	background-color: rgba(237, 147, 9, .2);
}
.bg-white-2 {
	background-color: rgba(255, 255, 255, .2);
}

.bg-success-10 {
	background-color: rgba(25, 135, 84, .1) !important;
}
.semi-underline {
    /* Create the line using a linear gradient */
    background-image: linear-gradient(to right, 
        rgba(255, 255, 255, 0.2), /* Semi-transparent white color (70% opacity) */
        rgba(255, 255, 255, 0.2)
    );
    
    /* Set the position and size of the "underline" */
    background-size: 70% 12px; /* Full width, 3px height */
    background-repeat: no-repeat;
    background-position: 0 95%; /* Position it at the bottom (95% from the top) */
    
    /* Add padding to prevent the underline from touching the text */
    padding-bottom: 2px;
}
		
#trois-etapes .modal-dialog {
    margin: 0;
    transform: none !important;
}
		
.modal {
    position: absolute; /* or relative, or fixed */
    /* Initial position (optional) */
    top: 50px;
    left: 50px;
}
/* card */
/* --- Styles for the Left Icon Stack --- */
.grow-element {
    transition: transform 0.3s ease-in-out;
    transition-delay: 1s; 
}

.grow-element > .card-info {
	transition: transform 0.3s ease-in-out;
}

.grow-element:hover {
    transform: scale(1.02);
    transition-delay: 0s; 
}

.grow-element:hover .card-info {
    transform: scale(1.03);
    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.6);
    transition-delay: 0s; 
}

#etape1-form * {
	font-size: 1rem;
}

#etape1-form .custom-form-control,
#etape1-form .custom-input-group-text {
	background-color: #e9ecef;
	color: #424242 !important;
}

#etape1-form .custom-input-group-text {
	border-color: #d9d9d9; 
	border-width: 2px 0 2px 2px;
}

#etape1-form .custom-form-control {
	border-color: #d9d9d9; 
	border-width: 2px 2px 2px 0;
}


#place-picker-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

#place-picker-container {
	text-align: left;
}

.autocomplete-container {
    position: relative;
    width: 300px;
}

.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    z-index: 1000;
    
    /* Hide by default */
    display: none; 
}

.suggestions-list li {
    padding: 8px 10px;
    cursor: pointer;
}

.suggestions-list li:hover {
    background-color: #f0f0f0;
}

#etape2-categories li {
	border: 0;
	margin-left: 0;
    transition: margin-left 0.5s ease-in-out;
}
#etape2-categories li > i {
	opacity: 0;
}
#etape2-categories li.active {
	border-radius: 6px;
	background-color: var(--ninja-bleu);
} 
#etape2-categories li.active > i {
	opacity: 1;
}
#etape2-categories li:hover {
	background-color: rgba(0,0,0,.05);
	margin-left: 8px;
}
#etape2-categories li.active:hover {
	margin-left: 0;
	background-color: var(--ninja-bleu);
}

.etape2-swith {
	background: white;
	color: grey;
}
.etape2-swith.active {
	background: var(--ninja-bleu);
	color: white;
}

.etape2-card {
	cursor: pointer;
}

.etape2-card.mail {
	box-shadow: 0 .5rem .8rem .5rem rgba(1, 63, 164, 0.15);
	transition: transform 0.3s ease-in-out;
}

.etape2-card.mail:hover {
	box-shadow: 0 .5rem 1.1rem 1rem rgba(1, 63, 164, 0.15);
	background-color: rgba(1, 63, 164, .05);
}

.etape2-card.sms {
	box-shadow: 0 .5rem .8rem .5rem rgba(25, 135, 84, 0.15);
	transition: transform 0.3s ease-in-out;
}

.etape2-card.sms:hover {
	box-shadow: 0 .5rem 1.1rem 1rem rgba(25, 135, 84, 0.15);
	background-color: rgba(25, 135, 84, .05);
}

.etape2-card .etape2-badge {
    transition: transform 0.3s ease-in-out; /* Add transition property */
}

.etape2-card:hover .etape2-badge {
    transform: scale(1.1);
}

.custom-code-input {
    height: calc(5vw + 30px); /* Fixed height */
    width: 100%; /* Full width within its small column */
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold;
    border: 1px solid rgba(0,0,0, 0.3); /* Light grey border */
    border-radius: 0.8rem; /* Rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* Focus state to match the clean aesthetic (removes the default blue shadow) */
.custom-code-input:focus {
    box-shadow: 0 0 .3rem .3rem rgba(0,0,0, 0.15);
    border-color: rgba(0,0,0, 0.3);
    outline: none;
}

.custom-divider-container {
    width: 100%; /* Ensure it spans the available width */
    max-width: 600px; /* Optional: Constrain max width for better aesthetics */
    margin-left: auto; /* Center the container if max-width is set */
    margin-right: auto;
}

/* The lines on either side of the text */
.custom-divider-line {
    border-top: 1px solid #dee2e6; /* Light grey line */
    height: 0; /* Ensures the div itself doesn't take vertical space */
}

/* The text in the middle */
.custom-divider-text {
    font-size: 0.9rem; /* Slightly smaller text */
    color: #6c757d; /* Muted grey color (Bootstrap's text-muted is similar) */
    white-space: nowrap; /* Prevents text from wrapping */
}

/* section camera */


#video-container {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    background: #000;
    background-image: url('../img/office.webp'); 
    background-size: cover;
    background-position: left center;
    animation: pan-background 10s linear infinite alternate;
}

@keyframes pan-background {
    0% {
        background-position: left center;
    }
    100% {
        background-position: right center;
    }
}

#video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; 
    transition: opacity 0.5s ease-in-out;
}

.video-active {
    opacity: 1 !important;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
    background: radial-gradient(circle at center, 
                rgba(0, 0, 0, 0.2) 0%, /* Lighter in the center */
                rgba(0, 0, 0, 0.6) 50%, /* Gradually darker */
                rgba(0, 0, 0, 0.8) 100%); /* Darkest at the edges */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.close-button {
    position: absolute;
    top: 20px;
    left: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 15;
}
.instructions-card {
    max-width: 90%;
}
.instruction-btn {
    width: 300px;
    max-width: 80%;
    margin: 10px auto;
    padding: 12px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    cursor: default; /* Not actual buttons, just list items */
}
.camera-icon-bg {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 20px;
    margin-bottom: 20px;
}
.camera-icon {
    font-size: 40px;
}
.record-button-container {
    position: absolute;
    bottom: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.record-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.8);
    background-color: red;
    cursor: pointer;
}
.record-button.active {
    width: 70px;
    height: 70px;
    border-radius: 25%;
    border: 5px solid rgba(255, 255, 255, 0.8);
    background-color: red;
    cursor: pointer;
}

.timer-group {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* Updated Timer Styling (removed absolute positioning) */
.timer-display {
    background-color: red;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    font-weight: bold;
    opacity: 0; 
    transition: opacity 0.3s;
    box-shadow: 0 0 15px rgba(255, 0, 0, 1); 
    margin-bottom: 5px; /* Space between timer and bar */
}

/* NEW: Progress Bar Container Styling */
.camera-progress-bar-container {
margin: 10px auto;
    min-width: 340px; /* Fixed width for the bar */
    height: 8px;
    border-radius: 10px; /* Pill shape */
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3); /* Light background for the track */
    opacity: 0; 
    transition: opacity 0.3s;
}

.camera-progress-bar {
    height: 100%;
    background-color: red !important; /* Ensure it's red */
    transition: width 1s linear; /* Smooth animation when updating width */
}

.pulse-circle {
  width: 15px;
  height: 15px;
  background-color: white; /* The circle color */
  border-radius: 50%; /* Makes the div a circle */
  animation: pulse 1s infinite ease-in-out; /* Apply the animation */
  display: inline-block;
  margin: 5px 5px 0 ;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1); /* Slightly larger */
    opacity: 0.5; /* Slightly faded */
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* post capture */

.post-capture-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
z-index: 5; /* Below the close button/install button, but above the main overlay */
display: flex;
flex-direction: column;
align-items: center;
/* Matches the original image's overlay effect */
background: radial-gradient(circle at center, 
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.8) 100%);
}

.post-capture-content {
width: 100%;
height: 100%;
position: relative;
}

/* Blue status bar at the top */
.capture-status-bar {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
background-color: #0d6efd; /* Bootstrap Primary Blue */
padding: 8px 15px;
border-radius: 20px;
display: flex;
align-items: center;
font-weight: bold;
font-size: 14px;
}

/* Card at the bottom */
.confirmation-card {
position: absolute;
bottom: 20px;
width: 90%;
left: 50%;
margin-left: calc(90vw / -2);
border: solid 1px;
border-radius: 15px;
padding: 20px;
}

.confirmation-card .card-header {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.confirmation-card p {
color: #ccc;
font-size: 14px;
margin-bottom: 20px;
}

/* Counter Controls */
.room-counter-controls {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
}

.room-counter-controls button {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
border: none;
}

.room-count {
font-size: 36px;
font-weight: bold;
margin: 0 30px;
line-height: .5;
text-align: center;
}

.room-count span {
display: block;
font-size: 40px;
}

/* Action Buttons */
.action-buttons button {
padding: 12px 20px;
border-radius: 25px;
font-weight: bold;
}


.icon-pill, .icon-pill-lg, .icon-pill-28, .icon-pill-sm, .icon-pill-xl {
	min-width: 40px; 
	max-width: 40px;
	height: 40px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-radius: 8px;
	padding: 5px;
	margin-right: 1rem;
	font-size: 1.2rem;
}

.icon-pill-lg {
	min-width: 60px; 
	max-width: 60px;
	height: 60px; 
	border-radius: 12px;
	font-size: 1.5rem;
}

.icon-pill-28, .icon-pill-sm {
	min-width: 28px; 
	max-width: 28px;
	height: 28px; 
	border-radius: 5px;
	padding: 3px;
	font-size: 1rem;
}

.icon-pill-xl {
	min-width: 82px; 
	max-width: 82px;
	height: 83px; 
	font-size: 1.8rem;
}

.otp-field {
    width: 55px;
    height: 70px;
    border-radius: 12px;
    border: 1px solid #d1d9e6;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    transition: all 0.2s;
}

.otp-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 55, 165, 0.1);
    outline: none;
}

.etape2-video .btn-delete {
	opacity: 0.5;
	height: 28px;
    width: 28px;
    padding: 0;
    border: solid 1px silver;
    background-color: transparent;
}

.etape2-video:hover {
    box-shadow: 0 0 5px 3px rgba(1, 63, 164, 0.2);
    transition-delay: 0s; 
}

.etape2-video:hover .btn-delete {
	opacity: 1;
}

.etape2-video:hover .btn-delete:hover {
	opacity: 1;
    background-color:#f8d7da;
    border-color:#f8888a;
	color: #ff0000;
}

.a {
background: linear-gradient(to bottom,  rgba(248,241,249,1) 0%,rgba(173,70,255,1) 2%,rgba(173,70,255,1) 4%,rgba(215,171,255,1) 6%,rgba(218,179,255,1) 9%,rgba(219,180,255,1) 13%,rgba(226,195,254,1) 15%,rgba(230,206,252,1) 17%,rgba(239,224,254,1) 53%,rgba(248,242,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}



.icon-circle, .icon-circle-sm, .icon-circle-lg {
	min-width: 40px; 
	max-width: 40px;
	height: 40px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-radius: 20px;
	padding: 5px;
	margin-right: 1rem;
	font-size: 1.2rem;
}
.icon-circle-sm {
	min-width: 28px; 
	max-width: 28px;
	height: 28px; 
	border-radius: 14px;
	padding: 3px;
	font-size: 1rem;
}
.icon-pill-lg {
	min-width: 60px; 
	max-width: 60px;
	height: 60px; 
	border-radius: 30px;
	font-size: 1.5rem;
	padding: 8px;
}