/* =========================================================
   EnviroPros Report — Global Styles (ALL STEPS)
   ========================================================= */

.epr-form-wrap {
    max-width: 1300px;
    margin: 40px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    font-family: Arial, Helvetica, sans-serif;
}

/* =========================================================
   SECTION HEADER — REVIEW PAGE
========================================================= */
.epr-section-title {
    background-color: #2f6b3a;   /* green bar */
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 18px 0 12px 0;
}

/* ---------------------------------------------------------
   TITLES
--------------------------------------------------------- */

.epr-page-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #286232;
    margin-bottom: 15px;
}

.epr-step-title {
    background: #286232;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 25px;
}

.epr-step-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    margin-top: 13px;
}

.epr-assessment-id {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------
   QUESTION BLOCKS
--------------------------------------------------------- */

.question-block,
.checkbox-block,
.fieldset {
    background: #f9fbfd;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 22px;
}

.question-header {
    margin-bottom: 10px;
}

.question-number {
    font-size: 14px;
    font-weight: bold;
    color: #1f4d26;
}

/* ---------------------------------------------------------
   QUESTION TEXT
--------------------------------------------------------- */

.question-text,
.checkbox-text {
    display: block;
    font-size: 13px;
    color: #333;
}

/* ---------------------------------------------------------
   RADIO + CHECKBOX ROWS (STABLE & CLEAN)
--------------------------------------------------------- */

.radio-row,
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 10px 0 14px;
}

.radio-row label,
.checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

/* Normalize native inputs */
.radio-row input,
.checkbox-row input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #286232;
}

/* ---------------------------------------------------------
   TEXTAREAS + INPUTS
--------------------------------------------------------- */

.question-body label,
.fieldset label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin: 10px 0 6px;
    color: #2f5d34;
}

textarea,
input[type="text"],
input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    background: #eef4ff;
}

textarea {
    resize: vertical;
}

/* ---------------------------------------------------------
   IMAGE UPLOAD SYSTEM (STEP 1–9)
--------------------------------------------------------- */

/* Upload wrapper */
.epr-upload-wrap {
    margin-top: 8px;
}

/* Hide native file input completely */
.epr-hidden-file-input {
    display: none !important;
}

/* Add Images button */
.epr-upload-btn {
    background: #cc5500;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

.epr-upload-btn:hover {
    background: #b24a00;
}


/* Preview card */
.epr-image-preview,
.epr-image-card {
/*     border: 1px solid #cfd8dc; */
/*     padding: 6px; */
/*     border-radius: 6px; */
/*     background: #f9fafb; */
}

.epr-image-preview img,
.epr-image-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* Optional note field under images */
.epr-image-note {
    width: 100%;
    margin-top: 6px;
    font-size: 13px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* ---------------------------------------------------------
   STEP 17 / 18 FIX
--------------------------------------------------------- */

.fieldset textarea {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.epr-step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

/* If ONLY a primary button exists (Step 1), push it right */
.epr-step-buttons:has(.epr-btn):not(:has(.epr-btn-light)) {
    justify-content: flex-end;
}

.epr-btn,
.epr-btn-light {
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

.epr-btn {
    background: #cc5500;
    color: #fff;
}

.epr-btn:hover {
    background: #b24a00;
}

.epr-btn-light {
    background: #286232;
    color: #ffffff;
}

.epr-btn-light:hover {
    background: #1f4d26;
}

/* ---------------------------------------------------------
   RESPONSE / ERRORS
--------------------------------------------------------- */

.epr-response-msg {
    margin-top: 15px;
    font-size: 13px;
}

.epr-error {
    background: #ffe5e5;
    border: 1px solid #e0b4b4;
    color: #a94442;
    padding: 10px;
    border-radius: 6px;
}


.epr-observation-block {
    border: 1px solid #dfe6ee;
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 22px;
    background: #ffffff;
}

.epr-observation-title {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 8px;
    color: #1f4d26;
}

.epr-observation-question {
    font-size: 14px;
    margin-bottom: 8px;
}

.epr-observation-answer {
    font-size: 14px;
    margin-bottom: 12px;
}

.epr-readonly-box {
    background: #f3f7fb;
    border: 1px solid #d6dee8;
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.epr-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.epr-image-item img {
    max-width: 220px;
    border-radius: 4px;
    border: 1px solid #ccc;
}



/* ======================================================
   UNIVERSAL IMAGE PREVIEW GRID (ALL STEPS)
====================================================== */

.epr-preview-grid,
.epr-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.epr-preview-item,
.epr-image-cell {
    width: 100%;
    box-sizing: border-box;
margin-bottom: 22px;
}

.epr-preview-item img,
.epr-image-cell img {
    width: 100%;
    height: auto;
    display: block;
}




/* ======================================================
   FIX: FORCE JS PREVIEW IMAGES INTO 3-COLUMN GRID
   (when .epr-preview-item wrapper is missing)
====================================================== */

.epr-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 22px;
}

/* JS preview cards */
.epr-preview-grid > .epr-image-preview {
    width: 100% !important;
    max-width: 100% !important;
}

/* Images inside JS preview */
.epr-preview-grid > .epr-image-preview img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}




/* ---------------------------------------------------------
   STEP QUESTIONS — spacing, emphasis, textarea height
--------------------------------------------------------- */

/* 1. Add more space above and below question labels */
.epr-field-block label {
    display: block;
    margin-top: 18px;     /* space above question */
    margin-bottom: 8px;  /* space below question */
    font-weight: 700;    /* 2. Bold the question text */
}

/* Optional: slightly darker question text for emphasis */
.epr-field-block label {
    color: #1f4d26;
}

/* 3. Make all textarea fields twice as tall */
.epr-field-block textarea {
    min-height: 120px;   /* previously ~60px */
    resize: vertical;   /* allow user resize if needed */
}

/* ======================================================
   HARD OVERRIDE — STEP 5 IMAGE SIZE FIX
   Kill legacy float-based sizing ONLY for Step 5
====================================================== */

#step5-preview.epr-preview-grid .epr-preview-item {
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
}

/* Ensure grid controls sizing */
#step5-preview.epr-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

/* Images fill grid cell */
#step5-preview.epr-preview-grid img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ======================================================
   FINAL FIX — STEP 5 IMAGE SIZE (REAL CLASS)
====================================================== */

/* Ensure Step 5 grid controls layout */
#step5-preview.epr-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

/* Fix Step 5 preview wrapper */
#step5-preview .epr-preview-item,
#step5-preview .epr-preview-new {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Force images to fill the grid cell */
#step5-preview .epr-preview-item img,
#step5-preview .epr-preview-new img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ======================================================
   STEP 5 — FORCE PREVIEW IMAGES TO FILL GRID CELLS
   (Fix tiny thumbnails)
====================================================== */

#step5-preview {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

#step5-preview .epr-preview-item {
    width: 100% !important;
    aspect-ratio: 4 / 3;           /* maintains visual consistency */
    overflow: hidden !important;
    background: #f9fafb;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
}

#step5-preview .epr-preview-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ======================================================
   FAST FIX — HANDLE PREVIEW GRIDS WITH DIRECT <img> NODES
   (Step 1, legacy steps, JS previews without wrappers)
====================================================== */

.epr-preview-grid > img {
    float: left !important;
    width: 31.333% !important;     /* 3 across */
    margin-right: 3% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Remove margin on every 3rd image */
.epr-preview-grid > img:nth-child(3n) {
    margin-right: 0 !important;
}

/* Ensure images scale correctly */
.epr-preview-grid > img {
    max-width: 100% !important;
    height: auto !important;
}

/* ======================================================
   FINAL FAST FIX — RAW <img> PREVIEW GRIDS
   Disable grid so float-based layout can apply
====================================================== */

.epr-preview-grid:has(> img) {
    display: block !important;   /* kill grid */
}

/* ======================================================
   FINAL FIX — STABILIZE FLOAT-BASED 3-COLUMN PREVIEWS
   (Applies ONLY when raw <img> children are used)
====================================================== */

.epr-preview-grid:has(> img) {
    overflow: hidden !important;   /* contain floats */
}

.epr-preview-grid:has(> img) > img {
    max-width: 100% !important;
}

/* ======================================================
   FINAL OVERRIDE — KILL INLINE IMAGE CONSTRAINTS
   (Step 1 legacy inline styles)
====================================================== */

.epr-preview-grid > img {
    max-width: none !important;
    margin: 0 3% 12px 0 !important;
}

/* Clean right edge every 3rd item */
.epr-preview-grid > img:nth-child(3n) {
    margin-right: 0 !important;
}

/* ======================================================
   FIX — RESTORE LOADING OVERLAY CONTEXT (STEP 5 ONLY)
====================================================== */

#step5-preview,
#step5-preview-wrapper,
#step5-preview.epr-preview-grid {
    position: relative !important;
}

/* Ensure overlay stays on top */
#step5-preview .epr-loading-overlay,
#step5-preview-wrapper .epr-loading-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9999 !important;
}


/* ======================================================
   GLOBAL IMAGE DELETE BUTTON (ALL STEPS)
====================================================== */

.epr-remove-image {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(192, 57, 43, 0.95);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epr-remove-image:hover {
    background: rgba(169, 50, 38, 1);
}

/* ======================================================
   GLOBAL IMAGE DELETE BUTTON (Savvy-style)
====================================================== */

.epr-remove-image {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #c0392b !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 34px !important;
    line-height: 26px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}

/* Hover feedback */
.epr-remove-image:hover {
    background: #a93226 !important;
}

/* Ensure image wrappers can host overlay controls */
.epr-image-card,
.epr-preview-item,
.epr-image-preview {
    position: relative !important;
}


/* ======================================================
   FIX — ENSURE DELETE BUTTON IS ALWAYS VISIBLE
   (Overrides any hover-based visibility rules)
====================================================== */

.epr-remove-image {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ======================================================
   FINAL GLOBAL FIX — IMAGE PREVIEW POSITION LOCK
   Ensures delete buttons never drift (Steps 1–9)
====================================================== */

.epr-image-preview,
.epr-image-card,
.epr-preview-item {
    position: relative !important;
}
/* ======================================================
   FINAL GLOBAL FIX — DELETE BUTTON ANCHOR
   (Handles sibling DOM structure safely)
====================================================== */

.epr-upload-wrap {
    position: relative !important;
}
/* ======================================================
   FINAL SAFETY NET — FIELD BLOCK IMAGE ANCHOR
   (Covers legacy / single-image previews)
====================================================== */

.epr-field-block {
    position: relative !important;
}

/* ======================================================
   DIVI MOBILE GUTTER OVERRIDE – REDUCE SIDE SPACE
   Savvy / EnviroPros
   ====================================================== */
@media (max-width: 767px) {

    /* Override Divi gutter padding */
    .et_pb_row.et_pb_gutters3 .et_pb_column,
    .et_pb_row.et_pb_gutters3.et_pb_row_inner .et_pb_column {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ensure form wrapper stays flat */
    body .spa-form-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: none !important;
    }
    .et_pb_row {
    width: 95%;
    margin: auto;
    position: relative;
}