body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    text-align: -webkit-center;
}

    /* Progress Circle + Line */
    .progress-wrapper {
      display: flex;
      justify-content: center;
      margin-right: 40px;
    }

    input#interior-size, #interior-themes {
    width: 390px;
    height: 30px;
    border-radius: -3px !important;
    margin-bottom: 14px;
}

    .step-circle {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: lightgray;
      color: white;
      text-align: center;
      line-height: 30px;
      font-weight: bold;
      position: relative;
      z-index: 1;
    }

    .step-circle.active {
      background-color: #EEC23C;
    }

    .step-line {
      width: 50px;
      height: 4px;
      background-color: lightgray;
      margin: 5px 5px;
      position: relative;
      z-index: 0;
    }

    .step-line.active {
      background-color: #EEC23C;
    }

    /* Form Steps */
    .hidden { display: none; }
    .step { margin-bottom: 20px; }
    button { margin: 5px; padding: 5px 10px; }

    .error {
      color: red;
      font-size: 14px;
    }


    .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    background-color: #333;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 40;
}

.logo img {
    height: 70px;
}
/* Steps Styles */

.logo img {
    height: 70px;
    margin-left: 40px;
}

/* .progress-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    max-width: 700px;
    margin-right: 65px;
    position: relative;
    overflow-x: auto; Allows scrolling for narrow screens 
} */

.content{
    width: 75%;
    max-width: 560px;
    background-color: white;
    margin: 0px;
    text-align: center;
    min-height: calc(100vh - 160px);
    /* padding-bottom: 80px; */
}

.foot {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    box-shadow: 0px -6px 8px rgba(0, 0, 0, 0.1);
}

footer {
    position: sticky;
    bottom: 0;
    width: 75%;
    max-width: 560px;
    background-color: white;
    margin: 0px;
    text-align: center;
}

.foot button{
    padding: 7px 25px;
    background-color: #EEC23C;
    color: white;
    border-radius: 15px;
    border: 0px solid;
     cursor: pointer;
}


h1 {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 30px;
    color: #333;
}

a {
    color: #f44336;
    text-decoration: none;
    font-weight: bold;
}

label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    flex-direction: column;
    width: fit-content;
    margin: 8px;
}

label input[type="radio"] {
    display: none;
}

label input[type="radio"]:checked ~ * {
    /* This applies styles to all sibling elements inside the label */
    color: #eec23c;
}

label:has(input[type="radio"]:checked) {
    border-color: #eec23c;
    background: #ffffff;
    color: #eec23c;
}

.label-text {
    margin-top: -38px;
}

.container {
    padding: 20px 60px;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

input.box{
        width: -webkit-fill-available;
    padding: 8px;
}
/* img.card-image {
    width: 395px;
    border-radius: 10px;
} */


.card-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* margin-bottom: 10px; */
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
input[type="radio"]:checked + .card .card-header {
    color: #eec23c;
}
input[type="radio"]:checked + .card .para {
    color: #000000;
}

.details {
    margin-top: 10px;
    text-align: left;
}

.details p {
    margin: 5px 0;
    font-size: 14px;
    color: #333;
}

.details span {
    font-weight: bold;
}
.inpt {
    height: 43px;
    width: -webkit-fill-available;
    border-radius: 6px;
    border: 1px solid;
    border-color: whitesmoke;
    margin: 4px;
    padding-left: 10px;
}

/* for popup */



.popup-overlay {
  position: fixed;
  top: 0; left: 0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  font-family: sans-serif;
}

.popup-content h2 {
  margin-top: 0;
  color: #2c3e50;
}

.popup-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.estimate-total {
  font-size: 20px;
  margin: 10px 0;
}

.estimate-note {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
}

.btn-view {
  display: inline-block;
  padding: 10px 18px;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.btn-view:hover {
  background: #219150;
}

.small-popup { max-width: 400px; }

.details-popup { max-width: 700px;
height:400px; }
.details-container {
  max-height: 325px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #f9f9f9;
  margin-top: 10px;
}
.details-container table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.details-container th, .details-container td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}
.details-container th {
  background: #27ae60;
  color: #fff;
}
.details-container tr.estimate-highlight td {
  font-weight: bold;
  background: #f1c40f;
}


@media screen and (max-width: 480px) {
  .content{
    width: 100%;
  }
  .container{
    padding: 8px;
  }
  footer{
    width: 100%;
  }
  input#l-A {
    margin-left: 1px;
}
input#s-A {
    margin-left: 1px;
}
input#u-A{
  margin-left: 1px;
}
input#u-C{
  margin-left: 1px;
}
input#p-A {
    margin-left: 1px;
}
input#p-B {
    margin-top: 1px;
}
.uc-type{
  right: 62px !important;
}
.ub-type{
  left: 105px !important;
}
.ua-type{
  left: 73px !important;
}
}