/* --- Base layout --- */
body {
    font-family: "Poppins", sans-serif;
    background-color: #f9fafb;
    color: #222;
    margin: 0;
    padding: 0;
}

.main-q-box {
    width: 100%;
    max-width: 1400px;
    margin: 30px auto;
    background: transparent;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 1199px) {
.main-q-box {
        margin: 30px auto;
    }
}

/* Animation keyframes */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutSlide {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutToRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@keyframes fadeOutToLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

/* Animation classes */
.section-fade-out {
    animation: fadeOutToRight 0.3s ease-in forwards;
}

.section-fade-out-back {
    animation: fadeOutToLeft 0.3s ease-in forwards;
}

.section-fade-in {
    animation: slideInFromRight 0.4s ease-out forwards;
}

.section-fade-in-back {
    animation: slideInFromLeft 0.4s ease-out forwards;
}

.questions-sec {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    padding: 3rem;
}

.questions {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.heade-sec {
    width: 100%;
    text-align: center;
}

.heade-sec h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

.heade-sec p {
    color: #555;
    margin-bottom: 18px;
    font-size: 0.95rem;
}

.modal-close {
	background-color: #1a1a1a !important;
}
#not-elegible h2 {
	font-size: 25px;
}
.field.your-pcode {
	width: 400px;
	max-width: 100%;
}

/* --- Cards --- */
.ashp-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Default icon */
.ashp-card p {
    position: relative;
    padding-left: 28px;
}

.ashp-card p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-image: url('/wp-content/uploads/circle-regular-full.svg');
    background-size: contain;
    background-repeat: no-repeat;
}


/* Hover icon 
.ashp-card:hover p::before {
    background-image: url('https://oakwood.draftforclients.com/wp-content/uploads/circle-solid-full.svg');
}


 Active / Selected icon 
.ashp-card.active p::before {
    background-image: url('https://oakwood.draftforclients.com/wp-content/uploads/circle-solid-full.svg');
}*/

.ashp-card.active p::before,
.ashp-card:hover p::before {
    background-image: url('/wp-content/uploads/White_circle.svg');
}


.ashp-card.selected p::before {
    background-image: url('/wp-content/themes/kadence-child/image/check_icon_white.svg');
}

.ashp-cards .ashp-card {
    flex: 1 1 auto;
    min-width: 300px;
    max-width: 350px;
}

.ashp-card {
    background: #fbf1f1;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px 16px 16px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
    min-height: 80px !important;
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
    width: 100%;
    max-width: 100%;
    transform: scale(1);
}

.ashp-card:active {
    transform: scale(0.98);
}

.ashp-card img {
    max-width: 90px;
    margin-right: 12px;
}

.ashp-card p {
    font-size: 0.98rem;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.ashp-card:hover {
    border-color: #007bff;
    background-color: #e9f3ff;
}

.ashp-card:hover, .ashp-card.selected {
    border-color: #BD1515;
    background-color: #BD1515;
}
.ashp-card:hover strong, .ashp-card.selected strong,
.ashp-card:hover p, .ashp-card.selected p {
    color: #ffffff;
}

.phone-wrapper input[type=tel] {
    border: none;
}

#hear-about-us img {
    display: none;
}








@media (max-width: 768px) {
    .questions-sec {
        padding: 1rem;
    }
    .ashp-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .ashp-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .ashp-card div {
        text-align: left !important;
    }

#hear-about-us .ashp-card {
    justify-content: flex-start !important;
}
.main-q-box {
    padding: 15px !important;
}

   
}
/* 1st step */

/* --- MOBILE: 1 column (stacked) ------------------------- */
@media screen and (max-width: 1199px) {
    #loft-type .ashp-cards {
        flex-wrap: wrap;
        justify-content: center;
    }

    #loft-type .ashp-cards .ashp-card {
        min-width: 100%;
        max-width: 100%;
    }

    #loft-extra-work .ashp-card div {
        text-align: left !important;
    }
}

/* --- DESKTOP MID RANGE: 2 columns × 2 rows (1200–1744px) --- */
@media screen and (min-width: 1200px) and (max-width: 1744px) {

    .main-q-box {
            margin: 30px auto !important;
        }

    #loft-type .ashp-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
        width: 720px;
    }

    #loft-type .ashp-cards .ashp-card {
        flex: 0 0 46%;
        /* was 50% - now smaller */
        max-width: 46%;
        /* match flex-basis */
    }

     #hear-about-us .ashp-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 boxes in row */
        gap: 25px;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* Second row should auto-place 2 items perfectly centered */
    #hear-about-us .ashp-card:nth-last-child(-n+2) {
        grid-column: span 1; /* keep them normal */
    }

    #hear-about-us .ashp-cards > :nth-child(4),
    #hear-about-us .ashp-cards > :nth-child(5) {
        justify-self: center; /* center 2 items on second row */
        width: 100%;
    }
 #hear-about-us .ashp-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 boxes in row */
        gap: 25px;
        max-width: 1100px;
        margin: 0 auto;
    }

         #hear-about-us .ashp-cards {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 20px;
             width: 100%;
             max-width: 1100px;
             margin: 0 auto;
             justify-items: center;
         }
    
         /* Make all cards same height */
         #hear-about-us .ashp-card {
            /* height: 200px;  */
             width: 100%;
             max-width: 350px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
    
         /* Second row should auto-place 2 items perfectly centered */
         #hear-about-us .ashp-card:nth-last-child(-n+2) {
             grid-column: span 1;
             /* keep them normal */
         }
    
         #hear-about-us .ashp-cards> :nth-child(4),
         #hear-about-us .ashp-cards> :nth-child(5) {
             justify-self: center;
             /* center 2 items on second row */
             width: 100%;
             grid-column: span 1;
         }


}



/* 2nd step  */

#loft-house-type .ashp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns */
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#loft-house-type .ashp-card {
    padding: 20px;
}

/* 3rd step */

#loft-work .ashp-card p:last-of-type::before {
    display: none !important;
}
#loft-work .ashp-card p:not(:first-of-type)::before {
    display: none !important;
}

#loft-work .ashp-card div {
    text-align: left !important;
}

#loft-work .ashp-card {
    min-height: 125px !important;
    padding: 16px !important;
}
/* 4th step */

#loft-extra-work .ashp-card.multi {
    /* padding-left: 30px; */
}

@media screen and (min-width: 1200px) and (max-width: 1744px) {

    #loft-extra-work .ashp-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 720px;
            margin: 0 auto;
            justify-content: center;
            align-items: stretch;
        }

    #loft-extra-work .ashp-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
}

/* hear-about-us step */

#hear-about-us .ashp-card .multi {
    height: 175px;
}


#hear-about-us .ashp-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px !important;
}

/* --- Buttons --- */
.btn-group,
.buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.btn-group button {
    width: 100px !important;
}

button.btn-back {
    background-color: #BD1515;
    color: #ffffff;
}

button.btn-next {
    background-color: #1A1A1A;
    color: #ffffff;
}

button.btn-back:hover {
    background-color: #1A1A1A;
}

button.btn-next:hover {
    background-color: #BD1515;

}

button,
.button {
    border: none;
    cursor: pointer;
    border-radius: 28px;
    padding: 10px 18px;
    font-size: 0.98rem;
    font-weight: 600;
    transition: all 0.18s ease;
    transform: scale(1);
    position: relative;
}

button:active,
.button:active {
    transform: scale(0.96);
}

button:focus,
.button:focus {
    outline: 2px solid #BD1515;
    outline-offset: 2px;
}

.btn-next,
.button.is-primary {
    background-color: #007bff;
    color: #fff;
}

.btn-next:hover,
.button.is-primary:hover {
    background-color: #0056b3;
}

.btn-back,
.button.backBtn {
    background-color: #BD1515;
    color: #ffffff;
}

.btn-back:hover,
.button.backBtn:hover {
    background-color: #1A1A1A;
}

/* --- Textarea box --- */
.description-box {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.description-box textarea,
#skylight-description,
#loftHouseOtherInput,
#loftMainDesc,
#rewiringDesc {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    border: 2px solid #d1d5db;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #222;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.description-box textarea:focus,
#skylight-description:focus,
#loftHouseOtherInput:focus,
#loftMainDesc:focus,
#rewiringDesc:focus {
    outline: none;
    border-color: #BD1515;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.description-box textarea::placeholder,
#skylight-description::placeholder,
#loftHouseOtherInput::placeholder,
#loftMainDesc::placeholder,
#rewiringDesc::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.description-box label,
#skylight-description-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
    font-size: 1rem;
    line-height: 1.4;
}

section#loft-main-description {
    max-width: 800px;
}

#skylight-description-box {
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
    padding: 0;
    animation: fadeInUp 0.3s ease-out;
}

#skylight-description-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
    font-size: 1rem;
}

/* --- Headline input --- */
.headline-input-box {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
}

#postcode {
	border: 2px solid #d1d5db;
}

.headline-input-box input,
#jobHeadlineInput,
#jobDescriptionInput,
#postcode,
#firstName,
#lastName,
#phoneNumber,
#email {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #222;
    transition: all 0.2s ease;
    height: auto;
}

.headline-input-box input:focus,
#jobHeadlineInput:focus,
#jobDescriptionInput:focus,
#postcode:focus,
#firstName:focus,
#lastName:focus,
#phoneNumber:focus,
#email:focus {
    outline: none;
    border-color: #BD1515;
}

.headline-input-box input::placeholder,
#jobHeadlineInput::placeholder,
#jobDescriptionInput::placeholder,
#postcode::placeholder,
#firstName::placeholder,
#lastName::placeholder,
#phoneNumber::placeholder,
#email::placeholder {
    color: #9ca3af;
}

section#job-headline {
    width: 800px;
}

section#find-your-location {
    width: 800px;
}

.control {
    display: flex;
    justify-content: center;
}

.control button {
    width: 200px;
}

.button.is-info {
    background-color: #BD1515;
    height: 40px;
}

.button.is-info:hover {
    background-color: #1A1A1A;
}

/* --- Image Upload --- */
/* LAYOUT */
/* .upload-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 16px 0;
} */

/* Left column (controls) */
.upload-column {
    flex: 0 0 320px;
    /* fixed-ish left column width */
    min-width: 260px;
}

/* Upload card/button */
.upload-card {
    display: block;
    cursor: pointer;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    background: #fafafa;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.upload-card:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    border-color: #9fbdfa;
}

.upload-btn {
    background: #007bff;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 8px;
}

.upload-hint {
    color: #666;
    font-size: 0.9rem;
    margin-top: 6px;
}

/* Right column (previews) */
.preview-column {
    flex: 1 1 auto;
    min-height: 120px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    max-height: 320px;
    /* scroll area */
    overflow-y: auto;
}

/* Empty state */
.preview-empty {
    color: #888;
    font-size: 0.95rem;
    padding: 16px;
}

/* Thumbnail box */
.thumb {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e8f0;
    background: #f7fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* image inside thumb */
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* pdf icon/filename fallback */
.thumb .file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    font-size: 12px;
    color: #333;
}

/* remove button */
.thumb .remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff4757;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* responsive: stack on small screens */
@media (max-width: 760px) {
    .upload-layout {
        flex-direction: column;
    }

    .upload-column {
        width: 100%;
    }

    .preview-column {
        width: 100%;
        max-height: 300px;
    }
}

/* --- Multi select check icon --- */
.ashp-card.multi {
    /* padding-right: 46px; */
}
  .ashp-card img {
      display: block;
      margin: 0 auto 12px auto;
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
  }

  /* Center content in card divs */
  .ashp-card>div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
  }

  /* Style for main text in cards */
  .ashp-card>div>p:first-of-type {
      margin: 0;
      width: 100%;
  }

  /* Style for description text (if any) */
  .ashp-card>div>p:not(:first-of-type) {
      width: 100%;
  }
.ashp-card .check-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0;
    transition: 0.12s ease;
    background: #111;
    color: #fff;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.ashp-card.selected .check-icon {
    opacity: 1;
}

/* --- Additional form improvements --- */
.field.box.your-pcode {
    width: 100%;
    max-width: 100%;
}

.field.box.your-pcode .control input {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    border: 2px solid #d1d5db;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #222;
    transition: all 0.2s ease;
}

.field.box.your-pcode .control input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.selectBox select {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    border: 2px solid #d1d5db;
    padding: 14px 16px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #222;
    transition: all 0.2s ease;
}

.selectBox select:focus {
    outline: none;
    border-color: #BD1515;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* --- Validation Styles --- */
.error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 6px;
    display: none;
    padding-left: 40px;
}

.error-message.show {
    display: block;
}

.input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.input-success {
    border-color: #22c55e !important;
}

/* --- Loader Styles --- */
.submit-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.submit-btn-loading {
    opacity: 0.7;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Ensure description boxes have proper spacing */
#loft-house-other-box.description-box {
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
    padding: 0;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .ashp-cards {
        grid-template-columns: 1fr;
    }

    section#job-headline{
        width: 100%;
    }
    section#find-your-location{
        width: 100%;
    }

    .description-box textarea,
    #skylight-description,
    #loftHouseOtherInput,
    #loftMainDesc,
    #rewiringDesc {
        min-height: 100px;
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    .headline-input-box input,
    #jobHeadlineInput,
    #jobDescriptionInput {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
}

.phone-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    background: #fff;
}

.country-code-box {
    display: flex;
    align-items: center;
    background: #f3f3f3;
    padding: 24px 10px;
    font-size: 1rem;
    white-space: nowrap;
}

.country-flag {
    width: 22px;
    height: 16px;
    margin-right: 6px;
}

.phone-input {
    border: none;
    padding: 12px;
    flex: 1;
    outline: none;
    font-size: 1rem;
    box-sizing: border-box;
}




/* Individual image box wrapper */
.image-box {
    position: relative;
    display: inline-block;
    margin: 6px;
}

/* Thumbnail image */
.image-box img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Remove (X) button */
.remove-image {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #ff4d4d;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 22px;
    padding: 0;
    transition: 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}