.calculator {
        background-color: #171717;
    border-radius: 16px;
    display: block;
    padding:48px 30px;
  background-image: linear-gradient(135deg, #222 25%, transparent 25%, transparent 50%, #222 50%, #222 75%, transparent 75%, transparent);
      background-size: 5px 5px;
}

.calculator input[type="text"] {
      border: none;
    height: auto;
    margin: 0.3rem 0 1rem 0;
    padding: 1rem;
    width: 100%;
    border-radius: 6px;
}
.calculator__main h3{
color:#F5F5F5;
  text-align:center;
}

.calculator__cta .plain_text{
    color: #7BCB79;
    text-align: center;
    display: block;
  
text-decoration: none !important;
}
.calculator__cta .plain_text:hover{
opacity:0.8;
}
.calculator__main p{
color:#E5E5E5;
  font-size:18px;
  line-height:26px;
  text-align:center;
}
.calculator__results .calculator__cta,
.calculator__results .calculator__main,
.result-error,
.result-error-type {
 display: none; 
}

.calculator__main-result-image{
    background: #fff;
    border-radius: 16px;
    padding: 25px;
      max-width: 80%;
    margin: 0 auto;
}
.calculator .calculator__input-field {
 position: relative;
}
.calculator__results{
max-width: 550px;
    margin: 0 auto;
}
.calculator span.unit {
        font-size: 14px;
    position: absolute;
    right: 10px;
    color: rgba(0, 0, 0, 0.4);
    bottom: 29px;
}
#calculator--Kennel label{
font-size:18px;
  color:#F5F5F5
}
#calculator--Kennel label span{
font-size:14px;
  display:block;
  line-height:20px;
  color:#D4D4D4;
  margin-top:5px;
      cursor: pointer;
}
#calculator--Kennel label span:hover{
    opacity: 0.8;
}
.calculator__intro h3{
color:#F5F5F5;
  text-align:center;
}
#calculator--Kennel{
    background: transparent;
    max-width: 380px;
    margin: 0 auto;
}
.support-images {
    margin: 3rem;
    width: 40%;
    float: left;
    display: table-cell;
}

.support-images h3 {
 text-align: center;
}

@media screen and (max-width: 1100px) {
  .support-images,
  .calculator {
    width: 100%;
  }
  .support-images {
    margin: 2rem 0rem;
  }
  .support-images img {
    width: 100%;
  }
}

/* --- edits -- */

.result-dimension {
  display:none;
}

.choice-point{
display:flex;
  justify-content:start;
  align-items: start;
      margin-top: 15px;
}
#calculator--Kennel .choice-point label{
margin-right: 15px;
    font-size: 16px;
    line-height: 12px;
}


/* Make the container relative so the popup positions itself based on this div */
/* Main page container for context */
.snub {
  position: relative;
}

/* Trigger Styling (make it look clickable) */
.snub-popup-trigger {
  color: #E5E5E5;
  text-decoration: underline;
}

/* Revised Popup Container */
.snub-popup {
background: #fff;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    padding: 0px;
    text-align: left;
    position: relative;
    margin: 40px 0;
    overflow-y: auto;
    height: auto;
    aspect-ratio: auto;
}


/* Popup Header Styling */
.popup-header {
 display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #F5F5F5;
}
.popup-button-container{
padding: 12px 20px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #F5F5F5;
}
.popup-title {
     font-weight: 600;
    font-size: 20px;
    color: #171717;
}

/* Close Icon Styling (Circle with an 'X') */
.popup-close-icon {
     display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 6px;
    color: #737373;
    border: 1px solid #737373;
}

.popup-close-icon:hover {
  background-color: #f0f0f0;
  color: #333;
}

.svg-close {
  width: 20px; /* The 'X' size */
  height: 20px;
  fill: currentColor;
}

/* Popup Body Styling */
.popup-body {
  padding:20px 20px 0 20px;
  color: #525252; /* Matching the subtitle color */
}
.result-error h6{
color:red
}
.popup-subtitle {
  margin-bottom: 12px;
  color: #525252; /* Lighter gray text, just like image */
}

.popup-breed-list {
  margin-bottom: 24px;
  line-height: 1.6; /* Comfortable reading spacing */
  text-align: left;
}

/* Close Button Container to align to the right */
.popup-button-container {
  display: flex;
  justify-content: flex-end; /* Push to the far right */
}

/* Large Green Close Button Styling */

  cursor: pointer;

}

.popup-close-btn:hover {
  background-color: #72b072;
}
#breedListPopup{
  display:none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 60px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}
#breedListPopup.show{
display:flex; !important
}
#calculator--Kennel .cal.light_green{
margin-top:15px;
  width:100%
}
.calculator__main-result-image img{
max-width:100%;
}
.calculator__cta{
text-align:center;
  margin-top:15px;
}
.calculator__cta p, .calculator__cta a{
color:#E5E5E5;
  font-size:18px;
  line-height:24px;
}