/* ============================================================
   FREE CLEANING INSPECTION CHECKLIST GENERATOR
   Scoped styles only – all selectors are namespaced with .icg-
   so nothing on this page can affect other KV Cleaning pages.
   Brand tokens follow the existing site design system.
   ============================================================ */

.icg-page {
    /* Brand palette (matches site design tokens) */
    --icg-blue: #007bff;
    --icg-blue-dark: #0069d9;
    --icg-blue-light: #eaf4ff;
    --icg-green: #88bf6a;
    --icg-green-dark: #72a956;
    --icg-green-light: #eff7ea;
    --icg-accent: #85c815;
    --icg-dark: #171717;
    --icg-text: #333333;
    --icg-muted: #6b7280;
    --icg-border: #eeeeee;
    --icg-bg: #ffffff;
    --icg-bg-soft: #f7f9fc;

    /* Status palette */
    --icg-pass: #1e8e3e;
    --icg-pass-bg: #e9f7ec;
    --icg-fail: #d93025;
    --icg-fail-bg: #fdeceb;
    --icg-na: #6b7280;
    --icg-na-bg: #f1f3f5;
    --icg-pending: #b26a00;
    --icg-pending-bg: #fff4e0;

    --icg-radius: 18px;
    --icg-radius-sm: 12px;
    --icg-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    --icg-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
    --icg-speed: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   LAYOUT PRIMITIVES
------------------------------------------------------------ */

.icg-page .icg-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.icg-page .icg-section {
    padding: 72px 0;
}

.icg-page .icg-section--tight {
    padding: 48px 0;
}

.icg-page .icg-section--soft {
    background: var(--icg-bg-soft);
}

.icg-page .icg-section-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.icg-page .icg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--icg-blue-light);
    color: var(--icg-blue-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.icg-page h1,
.icg-page h2,
.icg-page h3,
.icg-page h4 {
    margin-top: 0;
    color: var(--icg-dark);
}

.icg-page h2 {
    margin-bottom: 16px;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.2;
}

.icg-page h3 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.3;
}

.icg-page p {
    margin: 0 0 16px;
    color: var(--icg-text);
    font-size: 16px;
    line-height: 1.75;
}

.icg-page a {
    color: var(--icg-blue);
    text-decoration: none;
}

.icg-page a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   BANNER (page top – clears the fixed site header)
------------------------------------------------------------ */

.icg-page .tj-breadcrumb-area {
    background-image: url('/assets/images/home/kv-cleaning-quality-check-sydney.webp');
}

.icg-page .tj-breadcrumb-body a {
    color: #ffffff;
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */

.icg-page .icg-hero {
    padding: 70px 0 30px;
}

.icg-page .icg-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
}

.icg-page .icg-hero-content h1 {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
}

.icg-page .icg-hero-content p {
    font-size: 16.5px;
    line-height: 1.8;
}

.icg-page .icg-hero-usps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 4px 0 26px;
    padding: 0;
    list-style: none;
}

.icg-page .icg-hero-usps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--icg-text);
    font-size: 14.5px;
    font-weight: 600;
}

.icg-page .icg-hero-usps i {
    color: var(--icg-accent);
    font-size: 15px;
}

.icg-page .icg-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.icg-page .icg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 30px;
    border-radius: 30px;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--icg-speed), color var(--icg-speed),
        border-color var(--icg-speed), transform var(--icg-speed),
        box-shadow var(--icg-speed);
}

.icg-page .icg-btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.icg-page .icg-btn:focus-visible {
    outline: 2px solid var(--icg-blue-dark);
    outline-offset: 3px;
}

.icg-page .icg-btn--primary {
    background: var(--icg-blue);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 123, 255, 0.28);
}

.icg-page .icg-btn--primary:hover {
    background: var(--icg-blue-dark);
    color: #ffffff;
}

.icg-page .icg-btn--outline {
    background: transparent;
    color: var(--icg-dark);
    border-color: var(--icg-dark);
}

.icg-page .icg-btn--outline:hover {
    background: var(--icg-dark);
    color: #ffffff;
}

.icg-page .icg-btn--green {
    background: var(--icg-accent);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(133, 200, 21, 0.3);
}

.icg-page .icg-btn--green:hover {
    background: #74ad11;
    color: #ffffff;
}

.icg-page .icg-btn--ghost {
    background: var(--icg-blue-light);
    color: var(--icg-blue-dark);
}

.icg-page .icg-btn--ghost:hover {
    background: #d8ebff;
}

.icg-page .icg-btn--danger {
    background: transparent;
    color: var(--icg-fail);
    border-color: var(--icg-fail);
}

.icg-page .icg-btn--danger:hover {
    background: var(--icg-fail);
    color: #ffffff;
}

.icg-page .icg-btn--small {
    min-height: 44px;
    padding: 8px 20px;
    font-size: 14px;
}

.icg-page .icg-btn[disabled],
.icg-page .icg-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Hero visual */

.icg-page .icg-hero-visual {
    position: relative;
}

.icg-page .icg-hero-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--icg-radius);
    box-shadow: var(--icg-shadow-lg);
    display: block;
}

.icg-page .icg-hero-badge {
    position: absolute;
    left: -14px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #ffffff;
    border-radius: var(--icg-radius-sm);
    box-shadow: var(--icg-shadow-lg);
    max-width: 78%;
}

.icg-page .icg-hero-badge i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--icg-blue-light);
    color: var(--icg-blue);
    font-size: 18px;
    flex-shrink: 0;
}

.icg-page .icg-hero-badge strong {
    display: block;
    color: var(--icg-dark);
    font-size: 15px;
    line-height: 1.3;
}

.icg-page .icg-hero-badge span {
    color: var(--icg-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* ------------------------------------------------------------
   HOW IT WORKS
------------------------------------------------------------ */

.icg-page .icg-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.icg-page .icg-step-card {
    position: relative;
    padding: 30px 24px;
    background: #ffffff;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius);
    box-shadow: var(--icg-shadow);
    transition: transform var(--icg-speed), box-shadow var(--icg-speed);
}

.icg-page .icg-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--icg-shadow-lg);
}

.icg-page .icg-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--icg-blue);
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 16px;
}

.icg-page .icg-step-card:nth-child(even) .icg-step-num {
    background: var(--icg-accent);
}

.icg-page .icg-step-card h3 {
    font-size: 18px;
}

.icg-page .icg-step-card p {
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ------------------------------------------------------------
   GENERATOR SHELL
------------------------------------------------------------ */

.icg-page .icg-generator {
    background: #ffffff;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius);
    box-shadow: var(--icg-shadow-lg);
    overflow: hidden;
}

/* Wizard progress header */

.icg-page .icg-wizard-head {
    padding: 26px 30px 22px;
    background: var(--icg-bg-soft);
    border-bottom: 1px solid var(--icg-border);
}

.icg-page .icg-wizard-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.icg-page .icg-wizard-title h2 {
    margin: 0;
    font-size: 22px;
}

.icg-page .icg-wizard-title p {
    margin: 0;
    font-size: 14px;
    color: var(--icg-muted);
}

.icg-page .icg-wizard-steps {
    display: flex;
    gap: 6px;
}

.icg-page .icg-wizard-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid var(--icg-border);
    color: var(--icg-muted);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: all var(--icg-speed);
}

.icg-page .icg-wizard-step--active {
    background: var(--icg-blue);
    border-color: var(--icg-blue);
    color: #ffffff;
}

.icg-page .icg-wizard-step--done {
    background: var(--icg-green-light);
    border-color: var(--icg-green);
    color: var(--icg-green-dark);
}

.icg-page .icg-wizard-step i {
    font-size: 13px;
}

.icg-page .icg-wizard-body {
    padding: 30px;
}

.icg-page .icg-step-panel[hidden] {
    display: none;
}

/* Inline validation messages */

.icg-page .icg-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 13px 16px;
    border-radius: var(--icg-radius-sm);
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 600;
}

.icg-page .icg-alert--error {
    background: var(--icg-fail-bg);
    color: var(--icg-fail);
}

.icg-page .icg-alert--warning {
    background: var(--icg-pending-bg);
    color: var(--icg-pending);
}

.icg-page .icg-alert--success {
    background: var(--icg-pass-bg);
    color: var(--icg-pass);
}

.icg-page .icg-alert.is-visible {
    display: flex;
}

.icg-page .icg-alert i {
    margin-top: 2px;
}

/* Step nav */

.icg-page .icg-step-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--icg-border);
}

/* ------------------------------------------------------------
   STEP 1 – FACILITY CARDS
------------------------------------------------------------ */

.icg-page .icg-facility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.icg-page .icg-facility-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 18px;
    background: #ffffff;
    border: 2px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color var(--icg-speed), background var(--icg-speed),
        transform var(--icg-speed), box-shadow var(--icg-speed);
}

.icg-page .icg-facility-card:hover {
    border-color: var(--icg-blue);
    background: var(--icg-blue-light);
    transform: translateY(-3px);
    box-shadow: var(--icg-shadow);
}

.icg-page .icg-facility-card:focus-visible {
    outline: 2px solid var(--icg-blue-dark);
    outline-offset: 3px;
}

.icg-page .icg-facility-card[aria-pressed="true"] {
    border-color: var(--icg-blue);
    background: var(--icg-blue-light);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.14);
}

.icg-page .icg-facility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--icg-blue-light);
    color: var(--icg-blue);
    font-size: 21px;
}

.icg-page .icg-facility-card[aria-pressed="true"] .icg-facility-icon {
    background: var(--icg-blue);
    color: #ffffff;
}

.icg-page .icg-facility-name {
    color: var(--icg-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.icg-page .icg-facility-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--icg-blue);
    color: #ffffff;
    font-size: 11px;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--icg-speed);
}

.icg-page .icg-facility-card[aria-pressed="true"] .icg-facility-check {
    opacity: 1;
    transform: scale(1);
}

.icg-page .icg-facility-hint {
    display: none;
}

/* ------------------------------------------------------------
   STEP 2 – AREA SELECTION
------------------------------------------------------------ */

.icg-page .icg-area-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.icg-page .icg-area-count {
    margin-left: auto;
    color: var(--icg-muted);
    font-size: 14px;
    font-weight: 700;
}

.icg-page .icg-area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.icg-page .icg-area-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    background: #ffffff;
    border: 2px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
    cursor: pointer;
    transition: border-color var(--icg-speed), background var(--icg-speed);
}

.icg-page .icg-area-option:hover {
    border-color: var(--icg-green);
    background: var(--icg-green-light);
}

.icg-page .icg-area-option:focus-within {
    outline: 2px solid var(--icg-blue-dark);
    outline-offset: 2px;
}

.icg-page .icg-area-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.icg-page .icg-area-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid #cbd2dc;
    border-radius: 6px;
    background: #ffffff;
    color: #ffffff;
    font-size: 11px;
    flex-shrink: 0;
    transition: all var(--icg-speed);
}

.icg-page .icg-area-option input[type="checkbox"]:checked ~ .icg-area-box {
    background: var(--icg-green);
    border-color: var(--icg-green);
}

.icg-page .icg-area-option input[type="checkbox"]:checked ~ .icg-area-box::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

.icg-page .icg-area-name {
    color: var(--icg-dark);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}

.icg-page .icg-area-option--custom {
    border-style: dashed;
}

.icg-page .icg-area-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-right: -6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--icg-fail);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--icg-speed);
}

.icg-page .icg-area-remove:hover {
    background: var(--icg-fail-bg);
}

/* Custom area adder */

.icg-page .icg-custom-area {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    background: var(--icg-bg-soft);
    border: 1px dashed #c8d2e0;
    border-radius: var(--icg-radius-sm);
}

.icg-page .icg-custom-input {
    flex: 1;
    min-width: 220px;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid #d4dbe5;
    border-radius: var(--icg-radius-sm);
    background: #ffffff;
    color: var(--icg-dark);
    font-family: inherit;
    font-size: 15px;
    transition: border-color var(--icg-speed);
}

.icg-page .icg-custom-input:focus {
    border-color: var(--icg-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.icg-page .icg-custom-help {
    flex-basis: 100%;
    margin: 0;
    color: var(--icg-muted);
    font-size: 13px;
}

/* ------------------------------------------------------------
   STEP 3 – CHECKLIST
------------------------------------------------------------ */

.icg-page .icg-progress-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px 18px;
    background: var(--icg-bg-soft);
    border-radius: var(--icg-radius-sm);
    position: sticky;
    top: 86px;
    z-index: 20;
}

.icg-page .icg-progress-label {
    margin: 0;
    color: var(--icg-dark);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.icg-page .icg-progress-track {
    flex: 1;
    min-width: 160px;
    height: 10px;
    border-radius: 30px;
    background: #e3e8f0;
    overflow: hidden;
}

.icg-page .icg-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(90deg, var(--icg-blue), var(--icg-accent));
    transition: width 0.35s ease;
}

.icg-page .icg-progress-pct {
    margin: 0;
    color: var(--icg-blue-dark);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

/* Area group */

.icg-page .icg-area-group {
    margin-bottom: 26px;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
    overflow: hidden;
}

.icg-page .icg-area-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 16px 20px;
    background: var(--icg-blue-light);
    border-bottom: 1px solid var(--icg-border);
}

.icg-page .icg-area-group-head h3 {
    margin: 0;
    font-size: 17px;
}

.icg-page .icg-area-group-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
}

.icg-page .icg-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 30px;
    background: #ffffff;
    color: var(--icg-muted);
}

.icg-page .icg-pill--good {
    background: var(--icg-pass-bg);
    color: var(--icg-pass);
}

.icg-page .icg-pill--needs-attention {
    background: var(--icg-fail-bg);
    color: var(--icg-fail);
}

.icg-page .icg-pill--na {
    background: var(--icg-na-bg);
    color: var(--icg-na);
}

.icg-page .icg-pill--pending {
    background: var(--icg-pending-bg);
    color: var(--icg-pending);
}

/* Task row */

.icg-page .icg-task {
    padding: 18px 20px;
    border-bottom: 1px solid var(--icg-border);
    background: #ffffff;
    transition: background var(--icg-speed);
}

.icg-page .icg-task:last-child {
    border-bottom: none;
}

.icg-page .icg-task--good {
    background: #fbfefb;
    border-left: 4px solid var(--icg-pass);
}

.icg-page .icg-task--needs-attention {
    background: #fffafb;
    border-left: 4px solid var(--icg-fail);
}

.icg-page .icg-task--na {
    background: #fbfcfd;
    border-left: 4px solid #b7bfc9;
}

.icg-page .icg-task-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.icg-page .icg-task-text {
    flex: 1;
    min-width: 240px;
    margin: 0;
    color: var(--icg-dark);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.icg-page .icg-task--na .icg-task-text {
    color: var(--icg-muted);
}

/* Status segmented control */

.icg-page .icg-status-group {
    display: inline-flex;
    border: 1px solid #d4dbe5;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
}

.icg-page .icg-status-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.icg-page .icg-status-opt input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.icg-page .icg-status-opt label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 16px;
    color: var(--icg-muted);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--icg-speed);
    user-select: none;
}

.icg-page .icg-status-opt label i {
    font-size: 13px;
}

.icg-page .icg-status-opt input:focus-visible + label {
    outline: 2px solid var(--icg-blue-dark);
    outline-offset: -3px;
}

.icg-page .icg-status-opt--good input:checked + label {
    background: var(--icg-pass);
    color: #ffffff;
}

.icg-page .icg-status-opt--needs-attention input:checked + label {
    background: var(--icg-fail);
    color: #ffffff;
}

.icg-page .icg-status-opt--na input:checked + label {
    background: var(--icg-na);
    color: #ffffff;
}

.icg-page .icg-status-opt--good input:checked + label,
.icg-page .icg-status-opt--needs-attention input:checked + label,
.icg-page .icg-status-opt--na input:checked + label {
    border-radius: 0;
}

.icg-page .icg-status-opt + .icg-status-opt label {
    border-left: 1px solid #d4dbe5;
}

.icg-page .icg-status-opt--good:hover label {
    color: var(--icg-pass);
    background: var(--icg-pass-bg);
}

.icg-page .icg-status-opt--needs-attention:hover label {
    color: var(--icg-fail);
    background: var(--icg-fail-bg);
}

.icg-page .icg-status-opt--na:hover label {
    color: var(--icg-na);
    background: var(--icg-na-bg);
}

/* Task notes + actions */

.icg-page .icg-task-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.icg-page .icg-task-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.icg-page .icg-task-field label {
    color: var(--icg-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.icg-page .icg-task-field textarea,
.icg-page .icg-task-field input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d4dbe5;
    border-radius: 10px;
    background: #ffffff;
    color: var(--icg-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--icg-speed);
}

.icg-page .icg-task-field textarea {
    min-height: 60px;
}

.icg-page .icg-task-field textarea:focus,
.icg-page .icg-task-field input:focus {
    border-color: var(--icg-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.13);
}

.icg-page .icg-task-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.icg-page .icg-task-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--icg-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--icg-speed);
}

.icg-page .icg-task-reset:hover {
    background: var(--icg-na-bg);
    color: var(--icg-dark);
}

/* ------------------------------------------------------------
   STEP 4 – DETAILS, SUMMARY, DOWNLOAD
------------------------------------------------------------ */

.icg-page .icg-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}

.icg-page .icg-stat-card {
    padding: 18px 14px;
    background: #ffffff;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
    text-align: center;
    box-shadow: var(--icg-shadow);
}

.icg-page .icg-stat-value {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
}

.icg-page .icg-stat-label {
    display: block;
    color: var(--icg-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.icg-page .icg-stat-card--total .icg-stat-value { color: var(--icg-dark); }
.icg-page .icg-stat-card--good .icg-stat-value { color: var(--icg-pass); }
.icg-page .icg-stat-card--needs-attention .icg-stat-value { color: var(--icg-fail); }
.icg-page .icg-stat-card--na .icg-stat-value { color: var(--icg-na); }
.icg-page .icg-stat-card--pending .icg-stat-value { color: var(--icg-pending); }
.icg-page .icg-stat-card--pct .icg-stat-value { color: var(--icg-blue); }

.icg-page .icg-completion-box {
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
    box-shadow: var(--icg-shadow);
    margin-bottom: 34px;
}

.icg-page .icg-completion-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.icg-page .icg-completion-head h3 {
    margin: 0;
    font-size: 17px;
}

.icg-page .icg-completion-pct {
    margin: 0;
    color: var(--icg-blue-dark);
    font-size: 18px;
    font-weight: 800;
}

.icg-page .icg-completion-note {
    margin: 12px 0 0;
    color: var(--icg-muted);
    font-size: 13.5px;
}

/* Details form */

.icg-page .icg-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.icg-page .icg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.icg-page .icg-field--wide {
    grid-column: 1 / -1;
}

.icg-page .icg-field label {
    color: var(--icg-dark);
    font-size: 14px;
    font-weight: 700;
}

.icg-page .icg-field .icg-req {
    color: var(--icg-fail);
}

.icg-page .icg-field input,
.icg-page .icg-field textarea {
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #d4dbe5;
    border-radius: 10px;
    background: #ffffff;
    color: var(--icg-text);
    font-family: inherit;
    font-size: 15px;
    transition: border-color var(--icg-speed);
}

.icg-page .icg-field textarea {
    min-height: 96px;
    resize: vertical;
}

.icg-page .icg-field input:focus,
.icg-page .icg-field textarea:focus {
    border-color: var(--icg-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.13);
}

.icg-page .icg-field input.icg-invalid,
.icg-page .icg-field textarea.icg-invalid {
    border-color: var(--icg-fail);
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}

.icg-page .icg-field-error {
    color: var(--icg-fail);
    font-size: 13px;
    font-weight: 600;
}

/* Download panel */

.icg-page .icg-download-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding: 26px;
    background: linear-gradient(120deg, var(--icg-blue-light), #f3fbff);
    border: 1px solid #cfe6ff;
    border-radius: var(--icg-radius);
}

.icg-page .icg-download-info {
    flex: 1;
    min-width: 240px;
}

.icg-page .icg-download-info h3 {
    margin-bottom: 6px;
}

.icg-page .icg-download-info p {
    margin: 0;
    font-size: 14.5px;
    color: var(--icg-muted);
}

.icg-page .icg-download-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ------------------------------------------------------------
   LEAD CTA BAND
------------------------------------------------------------ */

.icg-page .icg-cta-band {
    text-align: center;
    padding: 70px 24px;
    background:
        linear-gradient(rgba(7, 51, 140, 0.88), rgba(7, 51, 140, 0.88)),
        url('/assets/images/home/commercial-cleaning-team-sydney.webp') center / cover no-repeat;
    border-radius: var(--icg-radius);
    color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}

.icg-page .icg-cta-band h2 {
    color: #ffffff;
    max-width: 720px;
    margin: 0 auto 14px;
}

.icg-page .icg-cta-band p {
    max-width: 730px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
}

/* ------------------------------------------------------------
   INTERNAL LINKS (SEO)
------------------------------------------------------------ */

.icg-page .icg-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.icg-page .icg-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
    transition: border-color var(--icg-speed), transform var(--icg-speed),
        box-shadow var(--icg-speed);
}

.icg-page .icg-link-card:hover {
    border-color: var(--icg-blue);
    transform: translateY(-2px);
    box-shadow: var(--icg-shadow);
    text-decoration: none;
}

.icg-page .icg-link-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--icg-blue-light);
    color: var(--icg-blue);
    font-size: 16px;
    flex-shrink: 0;
}

.icg-page .icg-link-card span {
    color: var(--icg-dark);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
}

.icg-page .icg-link-card:hover span {
    color: var(--icg-blue-dark);
}

/* ------------------------------------------------------------
   NOSCRIPT
------------------------------------------------------------ */

.icg-page .icg-noscript {
    padding: 30px;
    text-align: center;
}

/* ------------------------------------------------------------
   RESUME BANNER
------------------------------------------------------------ */

.icg-page .icg-resume-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 22px;
    background: linear-gradient(120deg, #fff7e6, #fff);
    border: 1px solid #f5d99a;
    border-radius: var(--icg-radius-sm);
    box-shadow: var(--icg-shadow);
}

.icg-page .icg-resume-text {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icg-page .icg-resume-text i {
    color: var(--icg-pending);
    font-size: 22px;
}

.icg-page .icg-resume-text strong {
    display: block;
    color: var(--icg-dark);
    font-size: 15px;
}

.icg-page .icg-resume-text span {
    color: var(--icg-muted);
    font-size: 13.5px;
}

.icg-page .icg-resume-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   FACILITY CARD DESCRIPTION
------------------------------------------------------------ */

.icg-page .icg-facility-desc {
    color: var(--icg-muted);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 2px;
}

/* ------------------------------------------------------------
   AREA DESCRIPTIONS + TOGGLE
------------------------------------------------------------ */

.icg-page .icg-area-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.icg-page .icg-area-desc {
    color: var(--icg-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

.icg-page .icg-area-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--icg-muted);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--icg-speed), color var(--icg-speed);
}

.icg-page .icg-area-toggle:hover {
    background: var(--icg-blue-light);
    color: var(--icg-blue);
}

/* ------------------------------------------------------------
   TASK FOLLOW-UP + PHOTOS
------------------------------------------------------------ */

.icg-page .icg-task-followup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: var(--icg-fail-bg);
    border: 1px solid #f5c6c2;
    border-radius: 10px;
}

.icg-page .icg-task-followup[hidden] { display: none; }

.icg-page .icg-task-notes {
    margin-top: 6px;
}

.icg-page .icg-photo-input {
    font-size: 13px;
    color: var(--icg-muted);
}

.icg-page .icg-photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.icg-page .icg-photo-thumb {
    position: relative;
    display: inline-block;
}

.icg-page .icg-photo-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--icg-border);
}

.icg-page .icg-photo-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--icg-fail);
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
}

/* ------------------------------------------------------------
   REVIEW BLOCKS
------------------------------------------------------------ */

.icg-page .icg-review-block {
    margin-bottom: 24px;
}

.icg-page .icg-review-block h3 {
    font-size: 17px;
    margin-bottom: 10px;
}

.icg-page .icg-review-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icg-page .icg-review-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--icg-border);
    border-radius: var(--icg-radius-sm);
}

.icg-page .icg-review-empty {
    color: var(--icg-muted);
    font-style: italic;
    border-style: dashed !important;
}

.icg-page .icg-review-area-name {
    flex: 1;
    min-width: 120px;
    color: var(--icg-dark);
    font-weight: 700;
    font-size: 14.5px;
}

.icg-page .icg-review-task-text {
    flex-basis: 100%;
    color: var(--icg-dark);
    font-size: 14px;
    font-weight: 600;
}

.icg-page .icg-review-task-note {
    flex-basis: 100%;
    color: var(--icg-muted);
    font-size: 13px;
    line-height: 1.5;
}

.icg-page .icg-summary-grid--compact {
    grid-template-columns: repeat(6, 1fr);
}

/* ------------------------------------------------------------
   COMPACT SUMMARY GRID (mobile)
------------------------------------------------------------ */

@media (max-width: 575px) {
    .icg-page .icg-summary-grid--compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ------------------------------------------------------------
   RESPONSIVE – Laptop (1280) and below
------------------------------------------------------------ */

@media (max-width: 1280px) {
    .icg-page .icg-facility-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ------------------------------------------------------------
   RESPONSIVE – Tablet landscape / small laptop (1024)
------------------------------------------------------------ */

@media (max-width: 1024px) {
    .icg-page .icg-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .icg-page .icg-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .icg-page .icg-hero-visual {
        max-width: 560px;
        margin: 0 auto;
    }

    .icg-page .icg-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .icg-page .icg-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .icg-page .icg-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .icg-page .icg-wizard-steps {
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* ------------------------------------------------------------
   RESPONSIVE – Tablet (768)
------------------------------------------------------------ */

@media (max-width: 768px) {
    .icg-page .icg-section {
        padding: 52px 0;
    }

    .icg-page .icg-facility-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .icg-page .icg-task-fields {
        grid-template-columns: 1fr;
    }

    .icg-page .icg-details-grid {
        grid-template-columns: 1fr;
    }

    .icg-page .icg-wizard-head,
    .icg-page .icg-wizard-body {
        padding: 22px 18px;
    }

    .icg-page .icg-progress-wrap {
        position: static;
    }

    .icg-page .icg-hero {
        padding: 46px 0 24px;
    }

    .icg-page .icg-hero-badge {
        left: 10px;
        max-width: calc(100% - 20px);
    }

    .icg-page .icg-cta-band {
        padding: 52px 20px;
    }
}

/* ------------------------------------------------------------
   RESPONSIVE – Mobile (575 and below)
------------------------------------------------------------ */

@media (max-width: 575px) {
    .icg-page .icg-container {
        width: calc(100% - 30px);
    }

    .icg-page .icg-section {
        padding: 42px 0;
    }

    .icg-page .icg-facility-grid {
        grid-template-columns: 1fr;
    }

    .icg-page .icg-area-grid {
        grid-template-columns: 1fr;
    }

    .icg-page .icg-steps-grid {
        grid-template-columns: 1fr;
    }

    .icg-page .icg-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .icg-page .icg-links-grid {
        grid-template-columns: 1fr;
    }

    .icg-page .icg-task-top {
        flex-direction: column;
        align-items: stretch;
    }

    .icg-page .icg-status-group {
        display: flex;
        width: 100%;
    }

    .icg-page .icg-status-opt {
        flex: 1;
    }

    .icg-page .icg-status-opt label {
        width: 100%;
        justify-content: center;
        padding: 10px 6px;
        font-size: 12.5px;
        text-align: center;
    }

    .icg-page .icg-step-nav {
        flex-direction: column-reverse;
    }

    .icg-page .icg-step-nav .icg-btn {
        width: 100%;
    }

    .icg-page .icg-download-actions {
        width: 100%;
    }

    .icg-page .icg-download-actions .icg-btn {
        width: 100%;
    }

    .icg-page .icg-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .icg-page .icg-hero-buttons .icg-btn {
        width: 100%;
    }

    .icg-page .icg-area-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .icg-page .icg-area-toolbar .icg-btn {
        width: 100%;
    }

    .icg-page .icg-area-count {
        margin-left: 0;
        text-align: center;
    }

    .icg-page .icg-custom-area {
        flex-direction: column;
    }

    .icg-page .icg-custom-area .icg-btn {
        width: 100%;
    }

    .icg-page .icg-area-group-stats {
        margin-left: 0;
    }

    .icg-page .icg-download-panel {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ------------------------------------------------------------
   ACCESSIBILITY / MOTION
------------------------------------------------------------ */

.icg-page .icg-btn:focus-visible,
.icg-page .icg-facility-card:focus-visible,
.icg-page .icg-area-remove:focus-visible,
.icg-page .icg-task-reset:focus-visible,
.icg-page .icg-status-opt input:focus-visible + label {
    outline: 2px solid var(--icg-blue-dark);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .icg-page *,
    .icg-page *::before,
    .icg-page *::after {
        transition: none !important;
        animation: none !important;
    }
}