:root {
  --accent: #62bc18; /* Green accent */
  --bg: #ffffff;
  --text: #222;
  --muted: #666;
  --card-radius: 6px;
}

* { box-sizing: border-box; }
body {   font-family: 'Montserrat', sans-serif !important;
  margin:0; color:var(--text); background: #f7f7f7; }
.container { max-width: 840px; margin: 0px auto; padding: 0 16px; }
.site-header { background: #353536; border-bottom: 1px solid #eee; }
.site-header .container { display:flex; justify-content: space-between; align-items:center; max-width: 1140px !important; padding: 18px 16px; }
.brand { margin: 0; font-size: 18px; color:var(--accent); }

.card { background: white; border-radius: 0 0 6px 6px; padding: 60px;    padding-top: 10px;  margin-bottom: 18px; }
.form-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; flex-direction:column }
.form-row .field { flex:1; min-width:160px; }
label { display:block; font-size:16px; margin-bottom:6px; color:var(--muted); }
input[type="text"],input[type="password"], input[type="email"], input[type="number"], select, textarea { width:100%; padding:10px 12px; border-radius:3px;  border:2px solid #dddddd80; font-size:15px; }
input:focus{outline:none;}
.checkbox { display:flex; align-items:center; gap:8px; }
.actions { display:flex; justify-content:space-between; margin-top:26px;     align-items: center;}


.btn {     background: var(--accent);
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500; 
  font-family:'Montserrat' ;
  font-size: 16px;
}


.btn.secondary { background:#e6e6e6; color:#333;  text-decoration: none;}
.error { color:#b00020; font-size:13px; margin-top:6px; }

.progress-wrap { padding: 12px 40px; background: white; border-bottom:0px solid #eee;width: 809px; border-radius: 6px 6px 0 0;
  place-self: center; margin-top: 80px; padding-top: 40px; }
.progress-inner { background:#f0f0f0; height:8px; border-radius:6px; overflow:hidden; margin-bottom:6px; }
.progress-inner .progress-bar { height:100%; background:var(--accent); width:0; transition:width .3s ease; }
.progress-label { font-size:13px; color:var(--muted); }

.field-note { font-size:13px; color:var(--muted); margin-top:6px; }

.result-summary { display:flex; gap:12px; flex-wrap:wrap; }
.result-card { flex:1; min-width:220px; padding:12px; border-radius:10px; background:#fff; border:1px solid #eee; }
.table { width:100%; border-collapse: collapse; margin-top:10px; }
.table th, .table td { padding:8px 6px; text-align:left; border-bottom:1px solid #f1f1f1; font-size:13px; }
.small-muted { font-size:14px; color:var(--muted); }

@media (max-width:720px) {
  .form-row { flex-direction:column; }
  .actions { flex-direction:column-reverse; gap:8px; }
  .site-header .container { display:flex; align-items: start; flex-direction: column; gap: 5px; }
  .logo img{ width: 110px;}
  .brand{font-size: 12px;}
  .actions{align-items: start;}
  #exportForm{display: inline-block !important;}
  .progress-wrap{width: 92%; align-self: center;}
  .child-section {margin-left: 20px !important;}
  .card{padding: 20px !important;}
}


.two-coloum-layout{
  display: grid
;
    justify-content: space-between;
    grid-template-columns: 2fr 2fr;
    gap:40px;
}

/* parent container */
.parent-section {

}

/* child indentation (nesting visual) */
.child-section {
  margin-left: 60px;
  
}

.card.step5 .field{
min-width: 48%;
}

.card.step5  .form-row{
  width: 100%;
  flex-direction: row !important;

  gap:25px !important;
}

:root {
  --accent: #62bc18;
}

/* Hide the default checkbox */
input[type="checkbox"] {
  appearance: none; /* Remove default style */
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s, border-color 0.3s;
  background-color: white;
}

/* Checked state */
input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Tick mark */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


:root {
  --accent: #62bc18;
}

/* Hide the default radio button */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s;
  background-color: white;
}

/* When checked, change border and show inner circle */
input[type="radio"]:checked {
  border-color: var(--accent);
  background-color: white; /* keep background white for clarity */
}

/* Inner circle for checked radio */
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent);
}

.margin0{
  margin: 0 !important;
}

input{
  font-family: 'Montserrat';
}



.logo img{
width: 200px;
}

.site-footer{
    margin:50px 0 30px 0;
    
}

.progress-wrap {
  margin-inline: auto !important;
}


body.result main{
    margin-top: 100px;
}

body.login .progress-wrap,body.register .progress-wrap{
    display:none ;
}

body.login .card,body.register .card{
    margin-top:100px;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 280px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Fix alignment issue in Firefox */
.field label {
  display: flex;
  align-items: center;
  gap: 5px;
}


label.parent-label {
    display: flex
;
    gap: 10px;
    align-items: center;
}