/* 0. Root color variables for easy customization */
:root {
  --primary-color: #1e3a8a; /* Deep Blue */
  --primary-light: #3b82f6; /* Lighter Blue */
  --secondary-color: #f97316; /* Vibrant Orange */
  --secondary-light: #fdba74; /* Light Orange */
  --bg-color: #f9fafb; /* Light background */
  --text-color: #333;
  --border-color: #d1d5db;
  --font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* 1. TYPE SELECTORS */
/*  */
body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

/* Inputs & Selects */
input, select, textarea {
  width: 220px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Buttons */
button {
  padding: 10px 25px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: var(--primary-color);
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

/* 2. CLASS SELECTORS */
/* ELEMENTS FROM TOP TO BOTTOM */
/* FIXED HEADER */
.app-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	background: linear-gradient(
		90deg,
		#1e3a8a 0%,
		#1e3a8a 40%,
		#f97316 100%
	);
	border-bottom: none;
	z-index: 5000;
}

/* BANNER */
.header-banner-left-top {
	position: absolute;
	top: 6px;
	left: 20px;
	background: #f5f1e6;
	color: #5a4a2f;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: bold;
	border-radius: 3px;
	letter-spacing: 0.4px;
	border: 1px solid #e2d8c3;	
}

.header-banner-left-bottom {
	position: absolute;
	top: 40px;
	left: 20px;
	background: #f5f1e6;
	color: #5a4a2f;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: bold;
	border-radius: 3px;
	letter-spacing: 0.4px;
	border: 1px solid #e2d8c3;	
}

.header-title {
	flex:1;
	text-align: center;
	margin: 0;
	color: white;
	font-family: "Georgia", "Times New Roman", serif;
	font-weight: bold;
	font-size: 36px;	
}

/* PAGE CONTENT */
.page-content {
	padding-top: 40px;	
}

/* HEADING */
.center-heading {
  text-align: center;
  margin-top: 0px;
  color: var(--primary-color);
  font-size: 32px;
  font-weight: bold;
}

/* DROPDOWN DIV */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.center-container label {
  font-weight: bold;
  color: var(--primary-color);
}

/* DROPDOWN-SELECTION DIV */
.content-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.content-container.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* DROPDOWN-SELECTION CONTENT */
.content {
  display: none;
  text-align: center;
  border: 2px solid var(--primary-light);
  border-radius: 10px;
  padding: 25px;
  width: 320px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.content h3 {
  color: var(--secondary-color);
  margin-bottom: 15px;
}

/* Consumer Name Row */
.consumer-name-row {
  display: none;
  margin-top: 15px;
  font-weight: bold;
  color: var(--secondary-color);
}

/* Form Rows */
.form-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 75px;
  gap: 20px;
  margin-bottom: 15px;
}

.form-row-phone {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 40px;
  gap: 20px;
  margin-bottom: 15px;
}

.form-row-otp {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 44px;
  gap: 18px;
  margin-bottom: 15px;
}

.form-row label {
  width: 140px;
  text-align: right;
  font-weight: bold;
  color: var(--primary-color);
}

.form-row-phone label {
  width: 140px;
  text-align: right;
  font-weight: bold;
  color: var(--primary-color);
}

.form-row-otp label {
  width: 140px;
  text-align: right;
  font-weight: bold;
  color: var(--primary-color);
}

.field-group.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.field-group-three.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* LOADER */
.loader::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.logo {
      filter: drop-shadow(0 0 10px #ff704d);
      animation: glow 1.5s alternate infinite;
}
@keyframes glow {
      0% {
        filter: drop-shadow(0 0 10px #ff704d);
}
      100%{
        filter: drop-shadow(0 0 25px #ff704d);
      }
}

@keyframes glow1 {
      0% {
        filter: drop-shadow(0 0 10px aqua);
      }
      100% {
        filter: drop-shadow(0 0 25px aqua);
      }
}

.itcell_stamp {
	position: fixed;
    right: 0;
    bottom: 0;
    transform: rotate(-90deg); 
    transform-origin: right; 
    z-index: 999;
    background-color: black; 
    padding: 10px;
    margin-bottom: 25%;
    margin-right: 1%;
    color: yellow;
    border-radius: 15px;
}

@media(max-width:756px){
  .itcell_stamp{
    display:none;
  }
}

.needhelpbtn{
  position: fixed;
  top: 25%; 
  right: 0;  
  z-index: 999;
  background-color: teal;
  padding: 10px 20px; 
  color: white;
  border-radius: 20px;
  border: 2px solid #5eaac9; 
  cursor: pointer;
  box-shadow: 5px 5px 5px black; 
  animation: glow1 1.5s alternate infinite; 
}

.hidden {
    display: none;
}

.closebtnend{
  border: #ff704d;
  background-color: red;
  color: white;
  border-radius: 15px;
  padding: 5px;
  margin-left: 10%;
}

.contact_hedding{
  background: rgb(85, 0, 86);
}

.contact_hedding button{
  background: rgb(85, 0, 86);
  border: rgb(85, 0, 86);
  color: #f0f0f0;
}

.contact_name{
  color: #f0f0f0;
  background-color: rgb(149, 1, 152);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stlink a:hover {
  background: linear-gradient(to right, #4caf50, #8bc34a); /* Change gradient on hover */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px #4caf50; /* Add glowing effect */
}

.submitButton {
  align-items: center;
  justify-content: center;
  margin-left: 18px;
}

/* 3. ID SELECTORS */
/* ELEMENTS FROM TOP TO BOTTOM */
#otpRow {
	display: none;	
}

#otpRow.enabled {
  display: flex;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  padding-left: 44px;
  gap: 18px;
  margin-bottom: 15px;
}

#otpRow.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Comments */
#comments {
  height: 80px;
  padding: 8px;
  resize: none;
}

#verify-btn {
	padding: 6px 14px;
  	cursor: pointer;
  	border: none;
  	border-radius: 6px;
  	font-size: 14px;
  	font-weight: 600;
  	color: #fff;
  	background-color: var(--primary-color);
  	transition: background 0.3s ease, transform 0.2s ease;	
}

#verifyOtpBtn {
	padding: 6px 14px;
  	cursor: pointer;
  	border: none;
  	border-radius: 6px;
  	font-size: 14px;
  	font-weight: 600;
  	color: #fff;
  	background-color: var(--primary-color);
  	transition: background 0.3s ease, transform 0.2s ease;	
}

#resendOtpBtn {
	padding: 6px 14px;
  	cursor: pointer;
  	border: none;
  	border-radius: 6px;
  	font-size: 14px;
  	font-weight: 600;
  	color: #fff;
  	background-color: var(--primary-color);
  	transition: background 0.3s ease, transform 0.2s ease;
}

/* Result Section */
#resultSection {
  display: none;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  border-top: 3px solid var(--secondary-color);
  padding-top: 20px;
}

#resultSection h3 {
  color: var(--primary-color);
  margin-bottom: 20px;
}

/* POPUP OVERLAY */
#overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 3000;	
}

/* POPUP */
#popup {
	display: none;
	position: fixed;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 25px;
	width: 300px;
	text-align: center;
	border-radius: 6px;
	z-index: 3001;
}

/* LOADER */
#loader {
  display: none;
  align-items: center;
  gap: 8px;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

#contact_details_cotainer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #f0f0f0;
    padding: 20px;
    transition: right 0.3s ease-in;
    font-size: medium;
}