/* Copy all the CSS from your original HTML file here */
/* I'm including the full CSS from your original file, but in a real plugin, */
/* you would separate it into a proper CSS file structure */

/* Custom dropdown arrow */
select {
  appearance: none; /* Remove default arrow */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="black" d="M0 0L5 6L10 0Z"/></svg>'); /* Downward arrow */ /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center; /* Position the arrow */
  background-size: 10px; /* Size of the arrow */
  padding-right: 30px; /* Add space for the arrow */
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
  body {
    font-family: Verdana;
    /* font-family: Montserrat; */
    /* background:#87CEEB ; */
    margin: 0;
    padding:0;    
    display: flex;
    justify-content: center;
  }

  /* for architecture-sub-title */
  .architecture-sub-title {
  margin-left: 23px; /* Adjust the left margin for mobile */
}

  #area-fields input::placeholder {
text-align: center; /* Center the placeholder text */
}

.reduced-padding {
  padding-bottom: 0px; /* Reduce bottom padding */
}

label.highlight {
  border-color: #039a19; /* Highlight border */
  /* background-color: rgba(144, 238, 144, 0.2); Optional: light background */
}


#area-fields input {
  text-align: left; /* Center the user input text */
}

  /* .plot-label {
font-size: 16px;
color: #ff5733;
font-weight: bold; */


  .form-wrapper {
    width: 80%;
    max-width: 100%;
    /* new */
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    gap: 5px; /* Add spacing between sections */
    align-items: stretch; /* Ensure sections take full width */
    background-color: #f0f0f0; /* Light background for contrast */
  }

  h2 {
    text-align: center;
    margin-bottom: 15px;
  }

  .section {
    /* border: 1px solid #ccc; */
    padding: 5px 5px 5px 5px; /* Top, Right, Bottom, Left */;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #fff;
  }

  .section-header {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color:#FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  }


  .section-header-for-LCI    {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    
  } 

  .section-header input[type="radio"] {
    margin: 0;
    transform: scale(1.2); /* Scale the checkbox */
  }

  .section-title {
    /* border: 1px solid #ccc;  */
    /* font-size: 35px; */
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    
  }

  .field-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: -4px;
  }

/* 
.length-label, .area-label {
    font-size: large;
    font-weight: bold;
    color: #808080;
  } */

.length-label, .area-label {
    font-size: 1rem;
    font-weight: 550;
    color: #000000;
    margin-left: 1px;
  }

  /* .length-width-fields span, .area-fields span {

    font-size: large;
    font-weight: bolder;
    color: #808080;

  } */


    .field-box {
      flex: 1;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
      background-color: #FFFFFF;
    }

    .field-box label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .field-box input[type="number"] {
      width: 100%;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #aaa;
    }

    .radio-group,.radio-group-Int {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;   /*new */
    }

    .radio-label {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 5px;
  /* background-color: #f9f9f9; */
  width: 100%;
  box-sizing: border-box;
  font-weight: bolder;
  color: #808080;

  }
    .radio-box {
      display: flex;
      align-items: center;
      border: 1px solid #ccc;
      padding: 10px;  /* Reduced top and bottom padding */
      border-radius: 5px;
      background-color: #FFFFFF;
      flex: 1 1 250px;
      box-sizing: border-box; /*Ensures padding is included in the width */
    }

    .radio-box input[type="radio"] {
      margin-right: 5px  ;  /* Adjust spacing between the radio button and the label */
    }
    
    .radio-box label {
    margin: 0; /* Remove any default margin from the label */
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1.2; /* Tighter line spacing */
    font-weight: 550; 
    color: #000000;
    font-size: 15px; /* Adjust font size */
    }

    .compact-radio-box {
      padding: 4px 10px;
      line-height: 1.2;
    }

    .compact-radio-box label {
      /* font-weight: normal; */
      color:#000000 ;
      font-size: 15px;
    }

    .compact-radio-box span {
      font-weight: 550;
      font-size: 15px;

    }

    .description-box {
      /* border: 1px solid #ccc; */
      padding: 12px;
      border-radius: 5px;
      background-color: #FFFFFF;
      margin-top: 10px;
    }

    .submit-button {
      width: 100%;
      padding: 12px;
      font-size: 1rem;
      background-color: #039a19;
      color: #FFFFFF;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .submit-button:hover {
      background-color: #77b47d;
    }

    .section-sub-title {
      font-style: normal;
      color: #000000;
      font-size: 15px;
      /* margin-left: 4px; */
      margin-left: 20px;
      
    }

    .liaisoning-sub-title {
      font-style: normal;
      color: #000000;
      font-size: 15px;
      margin-left: 3px;
      font-weight:200 ;
    }

    .construction-options-sub-title{
      font-style: normal;
      color: #000000;
      font-size: 15px;
      margin-left: 3px;
    }

    .interior-sub-title{
      font-style: normal;
      color: #000000;
      font-size: 15px;
      margin-left: 3px;
    }

    .custom-list {
      /* list-style-type: disc; */
      padding-left: 20px;
      margin: 0;
    }

    .custom-list li {
      margin-bottom: 10px;
    }

    .item-title {
      list-style-type: disc;
      font-weight: normal;
      color: #000000;
    }

    .item-desc {
      margin-left: 16px;
      font-size: 15px;
      color: #616060;
    }

    .two-part-block {
      display: flex;
      gap: 10px;
      align-items: stretch;
      background-color: #E8E4E4;
      margin: 0px 0px; /* Added margin above and below the block */
      padding: 5px; /* Added padding inside the block */
    }

    
    .right-form {
      flex: 1;
      /* border: 1px solid #ddd; */
      border-radius: 8px;
      background-color: #E8E4E4;
      padding:  5px 12px;
      margin-top: 25px;
      margin-bottom: 5px;
       margin-left: 5px;
       margin-right: 0px;
      align-items: stretch;
      color:#706f6f;
      display: flex;
      position: relative;
      top:-15px;
      flex-direction: column; /* Ensures content inside stacks properly */
    }

    .left-content
    {
      flex: 1;
      /* border: 1px solid #ddd; */
      border-radius: 8px;
      background-color: #E8E4E4;
      padding:  5px 12px;
      margin-top: 20px;
      margin-bottom: 20px;
      color:#706f6f;
      display: flex;
      flex-direction: column; /* Ensures content inside stacks properly */

    }

    .left-content ul li {
      font-weight: normal;
      color: #000000;
      margin-bottom: 10px;
      font-size: 16px;
    }

    .right-form form {
      display: flex;
      flex-direction: column;
     

    }

    .right-form input,
    .right-form select {
    
      width: 100%; 
     
      padding: 10px; 
      font-size: 13px; 
      border: 1px solid #ccc; 
      border-radius: 4px; 
      background-color: #fff; 
      margin-top: 2px;
      margin-bottom: 3px;
      color:#7c7878;
      font-size: 13px;
      font-weight: normal;
      box-sizing: border-box;

    }

    .phone-group input[type="text"] {
    width: 100%; /* Ensure the input field takes full width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color:#080808;       /* new*/
  }

  mobile-number:focus {
  border-color:#000000; /* Change border color to black */
  outline: none; /* Remove the default outline */
}

      /* Add a custom arrow for the dropdown  all select*/
   /* select:focus, input:focus{
    outline: none; /* Remove the default focus outline 
    border-color: #0833cc; Highlight border on focus 
  }
   */
  
  
select:invalid {
  color: #888; /* Color for the placeholder (default option) */
}
    /* old */
    .right-form button {
      margin-top: 2px; 
      width: 100%;
      padding: 12px;
      background: #ef6d03 ;
      color: #FFFFFF;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      box-sizing: border-box;
      
    }

    .right-form button:hover {
      background-color: #dc8718;
  
    }

    .sub-title {
      font-size: 16px;
      font-weight: normal;
      color: #808080;
      text-align: left;
      padding-bottom: 10px;
      margin-left: 10px;

    }
    input::placeholder {
    color: #7c7878; /* Change this to your desired color */
    opacity: 1; /* Ensure the placeholder is fully visible */
    font-size: 15px;
    font-weight: normal;
    
  }

  input:focus::placeholder {
    color: transparent /* Optional: Change color when the input is focused */
    
  }
     
     /* General styles for the input fields */
  
  #area-fields {
    flex-direction: column; /* Stack fields vertically */
    align-items: flex-start; /* Align items to the start */
    gap: 10px; /* Add spacing between elements */
    width: 100%; /* Ensure full width */
    /* border: 1px solid #ddd; 
    border-radius: 5px;  */
    padding: 0px; /* Add padding inside the container */
    margin: 0;
    box-sizing: border-box; /* Include padding and border in width */
        
  }

  #area-fields label {
    width: 100%; /* Ensure labels take full width */
    display: flex; /* Use flex for proper alignment */
    flex-direction: row; /* Stack label text and input vertically */
    gap: 5px; /* Add spacing between label text and input */
    border: 1px solid #ccc; 
    border-radius: 5px; 
    padding: 10px; /* Add padding inside labels */
    box-sizing: border-box; /* Include padding and border in width */
    font-size:15px;
    color: #7c7878;
}
   
#length-width-fields {
  display: flex;
  flex-direction: row; /* Align fields horizontally */
  gap: 10px; /* Add spacing between fields */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

#length-width-fields label {
  display: flex;
  flex-direction: column; /* Stack label text and input vertically */
  gap: 5px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  width: calc(50% - 5px); /* Take half the width with spacing */
  box-sizing: border-box;
  font-size:15px;
  color: #7c7878; /* Text color */
  margin-left: 5px;
}

  #length-width-fields input,
   #area-fields input
{
    width: 100%; /* Full width for input and select fields */
    padding: 10px; /* Add padding for better touch interaction */
    text-align: center; /* Align text to the left */
    box-sizing: border-box; /* Include padding in width */
    padding: 8px; /* Add padding for better usability */
    box-sizing: border-box; /* Include padding and border in width */
    color: #000000; /* Text color */
    border: 1px solid #aaa; /* Default border color */
    border-radius: 4px; 
  }
  #length-width-fields div,
  #area-fields div {
    display: flex; /* Use flex for proper alignment */
    flex-direction: column; /* Stack input and select vertically */
    gap: 5px; /* Add spacing between input and select */
    width: 100%; /* Ensure full width */
  }
    /* Borders for sections */
    .section {
    /* border: 1px solid #ccc; 
    border-radius: 8px;  */
    /* padding: 10px;  */
    background-color: #fff; /* Ensure white background */
    }

    #length-width-fields select{
        color: #383838;
        text-align: center; /* Align text to the center */
        font-size: 15px;
        font-weight: normal;
        width: 100%; /* Full width for input fields */
        padding: 10px; /* Add padding for better touch interaction */
        text-align: center; /* Align text to the left */
        box-sizing: border-box; /* Include padding in width */
        
    }

    #area-fields select {
        color: #383838;
        text-align: center; /* Align text to the center */
        font-size: 15px;
        font-weight: normal;
        width: 100%; /* Full width for input fields */
        padding: 10px; /* Add padding for better touch interaction */
        text-align: center; /* Align text to the left */
        box-sizing: border-box; /* Include padding in width */
        background-color:rgba(77, 78, 77, 0.2);
        border-radius: 5px;

        
    }

    .responsive-label {
    display: block; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    margin-bottom: 5px; 
    width: 100%; 
    box-sizing: border-box; 
    color: #808080;
    
    }

    .responsive-labels {
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 5px;
    width: 50%;
    box-sizing: border-box; 
    color: #333;
    /* font-weight: bolder; */

    }

    /* .responsive-labels span {
  font-size: large;
  font-weight: bolder;
  color: #ae0b0b;
} 

.length-width-fields span{
  font-size: large;
  font-weight: bolder;
  color: #df1f1f;

} */

    .field-inputs {         /* new */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: 20px;
  align-items: center;  
  }

.input-group {    /* new */
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  flex: 1 1 45%;
  min-width: 140px;
}

.input-box {
  text-align: center;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  width: 100%;
}

.phone-group input[type="tel"] {
    width: 100%; /* Ensure the input field takes full width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #080808;       /* new*/
  }

  .dropdown-arrow {
  color: #7c7878; /* Set the arrow color to black */
  cursor: pointer;
  transform: rotate(0deg);
  transition: transform 0.3s;
  /* width: 25px; /* Set the width of the arrow */
  /* height: 4px; Set the height of the arrow */
  /* font-size: 0.8rem; Decrease the size of the arrow */ 
  
}

/* architecture css */

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* .checkbox-container.highlight {
  border: 2px solid #e64805; 
  border-radius: 5px;
  background-color: #f9f9f9; 
  padding: 5px; /* Optional:
} */

.section-header.highlight {
  border: 2px solid #039a19  !important; /* Highlight border */

  
 
}

.radio-box.selected {
  border-color:#039a19  !important; /* Highlighted border color */
 
}


.compact-radio-box.selected {
  border: 2px solid #039a19 !important;
 
}
 

.section-box.highlight {
  border: 2px solid #039a19 !important;
 
}


.checkbox-input {
  margin: 0;
  transform: scale(1.2); /* Adjusted margin and scaled checkbox */
}

.dropdown-arrow {
  cursor: pointer;
  transform: rotate(0deg);
  transition: transform 0.3s;
}

/* .section-sub-title {
  margin-left: 20px;
  color: #706f6f;
} */

.section-box {
  display: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-top: 2px;
}
 
Radio-box:hover {
  background-color: #f0f0f0; /* Change background color on hover */
}

                            /* // RESPONSIVE STYLE//  */

@media (max-width: 600px) {
    /* Make #length-width-fields and #area-fields responsive */
    #length-width-fields
     {
      flex-direction: column; /* Stack fields vertically */
      align-items: flex-start; /* Align items to the start */
      gap: 10px; /* Add spacing between elements */
      /* margin-left: 5px; Remove left margin for mobile */
      width: 100%; /* Ensure full width */
    }
    .length-label, .area-label {
    font-size: 1rem;
    font-weight: 450;
    color: #000000;
font-size:14px;
  }
    /* Adjust the length-width-fields and area-fields for mobile */
    #area-fields {
      flex-direction: column; /* Stack fields vertically */
      align-items: flex-start; /* Align items to the start */
      gap: 10px; /* Add spacing between elements */
      /* margin-left: 5px; Remove left margin for mobile */
      width: 100%; /* Ensure full width */
      display: flex;
    }

         /* for architecture-sub-title */
    .architecture-sub-title {
    margin-left: 28px; /* Adjust the left margin for mobile */
    }

    .section-sub-title {
      font-style: normal;
      color: #000000;
      font-size: 15px;
      /* margin-left: 4px; */
      margin-left: 20px;
    }

    .liaisoning-sub-title {
      font-style: normal;
      color: #000000;
      font-size: 15px;
      margin-left: 3px;
    }

    .construction-options-sub-title{
      font-style: normal;
      color: #000000;
      font-size: 15px;
      margin-left: 3px;
    }

    .interior-sub-title{
      font-style: normal;
      color: #000000;
      font-size: 15px;
      margin-left: 3px;
    }

    #length-width-fields label,
    #area-fields label {
      width: 100%; /* Ensure labels and divs take full width */
      display: flex; /* Use flex for proper alignment */
      flex-direction: column; /* Stack label text and input vertically */
      gap: 5px; /* Add spacing between label text and input */
    }


  #length-width-fields div,
  #area-fields div {
    display: flex; /* Use flex for proper alignment */
    flex-direction: column; /* Stack input and select vertically */
    gap: 5px; /* Add spacing between input and select */
    width: 100%; /* Ensure full width */
  }

    #length-width-fields input,
    #area-fields input
    {
      width: 100%; /* Full width for input fields */
      padding: 10px; /* Add padding for better touch interaction */
      text-align: center; /* Align text to the left */
      box-sizing: border-box; /* Include padding in width */
     
    }
    .field-group {
      display: flex; /* new */
      gap: 15px; /* Increase gap between sections for better spacing */
      flex-direction: column; /* Stack the fields vertically */
    }
    .responsive-label {
        width: 100%; /* Full width on mobile */
    }

    .responsive-labels {
        width: 100%; /* Full width on mobile */

    }
    body {
      padding: 10px;
      flex-direction: column;
    }

    .form-wrapper {
      width: 100%;
      padding: 15px;
  
    }

    .two-part-block {
      flex-direction: column; /* Stack the left and right sections vertically */
      gap: 20px;
    }

    .left-content,
    .right-form {
      /* margin-top: 10px;
      margin-bottom: 10px;
      padding: 10px; */
      width: 100%; /* Ensure both sections take full width */
      margin: 0; /* Remove any extra margins */
      padding: 0px; /* Add consistent padding */
      box-sizing: border-box; /* Include padding and border in width *
    }

    .section-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10px; /* Add spacing between elements */
      width: 100%; /* Ensure full width */
    
    }

    .section-header input[type="checkbox"] {
      margin: 0;
      transform: scale(1.2); /* Scale the checkbox */
      /* position: relative; */
      /* top: -16px;  */
      
    }

    .field-group,
    .radio-group ,
    .radio-group-Int
    {
      flex-direction: column;
      gap: 15px;
    }

    .radio-box {
      flex: 1 1 100%;
    }

    
    .submit-button {
      font-size: 18px;
      padding: 10px;
    }

    h2 {
      font-size: 20px; /* Adjust heading size for smaller screens */
    }

    .section-title {
      font-weight: 600;
      font-size: 16px; /* Adjust section title size */
      color:#000000;

    }

    .phone-group {
      /* flex-direction: column; 
      gap: 10px; */
      display: flex;
      align-items: center;
      gap: 5px;
      width: 100%; /* Ensure the container takes full width */
      color: #706f6f;

    }
    .phone-group input[type="tel"] {
    width: 100%; /* Ensure the input field takes full width */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #080808;       /* new*/
  }
    
    select {
      font-size: 16px;
    
       text-align: center;
       text-align-last: center; /* This centers the selected value */

    }

    .compact-radio-box {
      padding: 8px;
    }

    .left-content ul li {
      font-size: 14px; /* Adjust font size for list items */
    }
    .submit-button {
      font-size: 1.2rem; 
      padding: 14px; 
  }
  .field-inputs {
    flex-direction: column;
    margin-left: 0;
  }

  .input-group {
    flex: 1 1 100%;
  }

  .compact-radio-box span {
  flex: 1;
  word-break: break-word;
  font-weight: 450; /* Adjust font weight */
  font-size:14px;
}

.construction-options-sub-title{
  font-weight: 450; /* Adjust font weight */
  font-size:14px;
}
.liaisoning-sub-title{
  font-weight: 450; /* Adjust font weight */
  font-size:14px;
}