.quoting-engine-page .icaal-contact-form {
   max-width: 100%;
}

.quoting-engine-page .container {
   width: 100%;
   margin: 0 auto;
}

h1.qe-page-title, .entry-content :where(h1) {
   font-size: 2rem;
   font-weight: 700;
   text-align: center;
   margin-bottom: 1rem;
}

h4.summary-title {
   font-size: 1rem;
   text-transform: capitalize;
   font-weight: 600;
   margin-bottom: 12px;
}

ul.summary-list {
   padding: 0;
   margin: 0;
}

.summary-note,
.summary-note a {
   font-size: 14px;
}

.quoting-engine-form {
   padding: 15px;
   background: #ffffff;
   border-radius: 8px;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.radio-input {
   width: auto !important;
}

.next-btn {
   background: #ffa300;
   color: #fff;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   width: 100%;
   margin-top: 20px;
}
.next-btn:disabled {
   background: #ccc;
   cursor: not-allowed;
}

.option-card {
   position: relative;
   overflow: hidden;
   cursor: pointer;
   aspect-ratio: 1;
   border-radius: 8px;
   transition: border-color 0.2s ease;
   max-height: 324px;
   width: 100%;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.wall-card {
   max-height: 140px;
}
.wall-card:first-child {
   margin-bottom: 20px;
}

.colour-card {
   max-height: 100px;
   max-width: 150px;
}

#frame-colour-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 20px;
}

#internal-frame-colour-options {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   justify-content: flex-start;
}

#roof-material-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 20px;
}

.option-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}

.option-card__overlay {
   position: absolute;
   inset: 0;
   padding: 12px;
   background: rgba(0, 0, 0, 0.75) !important;
   text-align: center;
   display: flex !important;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   gap: 10px;
   transform: translateY(calc(100% - 48px));
   transition: transform 0.25s ease-in-out;
}

.option-card__select {
   font-size: 16px;
   color: #fff;
   background: rgba(255, 163, 0, 0.65);
   padding: 6px 12px;
   border-radius: 4px;
   font-weight: 600;
   z-index: 10;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.option-card__title {
   color: #fff;
   font-weight: 600;
   font-size: 14px;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   width: 100%;
   margin: 0;
   line-height: 1em;
}

.option-card:hover > .option-card__overlay .option-card__select {
   opacity: 1;
   transform: translateY(0);
}

.option-card:hover > .option-card__overlay {
   transform: translateY(0);
}

.option-card:hover > .option-card__overlay {
   justify-content: center;
}

.colour-card {
   font-size: 12px;
}

.roof-card {
   font-size: 14px;
   max-height: 154px;
}

.option-card.active {
   border-color: #ffa300;
   border-width: 2px;
}

.option-card:hover {
   border-color: #93b4f0;
}

/* step layout */
.step-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 500px;
}

.step-layout__image {
   overflow: hidden;
}

.step-layout__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.step-layout__content {
   padding: 20px 40px;
   background: #fff;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.step-layout__content h3 {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 24px;
   padding-bottom: 12px;
   border-bottom: 1px solid #ddd;
}

.step-layout__content label {
   font-weight: 600;
   font-size: 14px;
   margin-bottom: 6px;
   display: block;
}

.step-layout__content select {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
   margin-bottom: 4px;
   background-image: none;
}

.step-layout__content--patio-doors label,
.step-layout__content--infill-panels label,
.step-layout__content--durabase label {
   display: flex;
   align-items: center;
   gap: 10px;
}

.step-layout__content--patio-doors input,
.step-layout__content--infill-panels input,
.step-layout__content--durabase input {
   margin-bottom: 0;
}

.summary-list-item {
   font-weight: 600;
}

.summary-list-item span {
   font-weight: 400;
   text-transform: capitalize;
}

/* Highlight the price row in the summary */
.summary-list-item--price {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid #ddd;
   font-size: 1.5rem;
   list-style-type: none;
}

.summary-list-item--price span {
   font-weight: 700;
   color: #e07b00;
}

@media (max-width: 640px) {
   .option-card__title {
      font-size: 11px;
   }
}

@media (max-width: 768px) {
   .step-layout {
      grid-template-columns: 1fr;
   }

   .step-layout__image {
      max-height: 300px;
   }
   .option-card__title {
      font-size: 12px;
   }
   .step-layout__content {
      padding: 20px 20px;
   }
   .colour-card {
      max-width: 129px;
   }
   .option-card__overlay {
      transform: translateY(calc(100% - 39px));
   }
}

@media (min-width: 640px) {
   .quoting-engine-page .container { max-width: 640px !important; }
}

@media (min-width: 768px) {
   .quoting-engine-page .container { max-width: 768px !important; }
}

@media (min-width: 1024px) {
   .quoting-engine-page .container { max-width: 1024px !important; }
}

@media (min-width: 1260px) {
   .quoting-engine-page .container { max-width: 1200px !important; }
}

@media (min-width: 1536px) {
   .quoting-engine-page .container { max-width: 1200px !important; }
   h1.qe-page-title, .entry-content :where(h1) {
      font-size: 3.5rem;
   }
}