/* ####################################################
        Website Application Complaint Custom StyleSheet
    ####################################################### */

/* ======== Complaint Top Hero section ======== */
/* File New And Track Existing Complain Cards Content */
    .path-cards {
        max-width: 760px;
        margin-top: 30px;
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr 1fr;
    }
    .path-card {
        padding: 22px;
        display: flex;
        gap: 16px;
        align-items: center;
        cursor: pointer;
        transition: all 0.15s;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg-card);
    }
    .path-card:hover {
        transform: translateY(-2px);
        border-color: var(--navy);
    }
    .path-card.active {
        color: #fff;
        border-color: var(--navy);
        background: var(--navy);
    }
    .path-card i {
        padding: 12px;
        flex-shrink: 0;
        color: var(--mint-deep);
        font-size: 28px;
        border-radius: 12px;
        background: var(--mint-soft);
    }
    .path-card.active i {
        color: var(--navy);
        background: var(--mint);
    }
    .path-card h3 {
        margin-bottom: 2px;
        font-weight: 500;
        font-size: 18px;
        font-family: 'Fraunces', serif;
    }
    .path-card p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
    }
    .path-card.active p { color: var(--light-blue); }

/* ======== Main Complain Detail Section ======== */
    .complaint-area { padding: 40px 0; }
    .complaint-grid {
        display: grid;
        gap: 30px;
        align-items: start;
        grid-template-columns: 1fr 320px;
    }

    /* Complain Wizard Progress Bar Block */
    .steps-bar {
        margin-bottom: 28px;
        padding: 18px 22px;
        display: flex;
        gap: 0;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg-card);
    }
    .step-pill {
        display: flex;
        flex: 1;
        gap: 10px;
        align-items: center;
        position: relative;
    }
    .step-pill .num {
        width: 26px;
        height: 26px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
        font-family: 'Fraunces', serif;
        background: var(--bg-cream);
    }
    .step-pill.done .num {
        color: var(--mint-deeper);
        background: var(--mint);
    }
    .step-pill.active .num {
        color: #fff;
        background: var(--navy);
    }
    .step-pill .label {
        color: var(--muted);
        font-size: 12px;
    }
    .step-pill.active .label {
        color: var(--navy);
        font-weight: 500;
    }
    .step-pill.done .label { color: var(--text); }
    .step-pill::after {
        margin: 0 10px;
        height: 1px;
        flex: 1;
        content: '';
        background: var(--border);
    }
    .step-pill:last-child::after { display: none; }

    /* Complain From Card Block */
    .form-card {
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: var(--bg-card);
    }
    .form-card .step-eyebrow {
        margin-bottom: 6px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--mint-deep);
        font-size: 11px;
    }
    .form-card h2 {
        margin-bottom: 8px;
        line-height: 1.2;
        color: var(--navy);
        font-weight: 400;
        font-size: 26px;
        font-family: 'Fraunces', serif;
    }
    .form-card .step-desc {
        margin-bottom: 26px;
        line-height: 1.55;
        color: var(--muted);
        font-size: 14px;
    }

    /* Complain About Who Section */
    .form-row { margin-bottom: 18px; }
    .form-row .lbl {
        margin-bottom: 8px;
        display: block;
        color: var(--navy);
        font-size: 13px;
        font-weight: 500;
    }
    .form-row .hint {
        margin-top: 4px;
        color: var(--muted);
        font-size: 11px;
    }
    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 13px 16px;
        outline: none;
        color: var(--text);
        font-size: 14px;
        font-family: inherit;
        border-radius: 10px;
        transition: border-color 0.15s;
        border: 1px solid var(--border);
        background: var(--bg-cream);
    }
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        border-color: var(--navy);
        background: var(--bg-card);
    }
    .form-textarea {
        height: 120px;
        resize: vertical;
    }
    .radio-cards {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }
    .radio-card {
        padding: 16px;
        display: flex;
        gap: 12px;
        align-items: start;
        cursor: pointer;
        border-radius: 12px;
        transition: all 0.15s;
        border: 1px solid var(--border);
        background: var(--bg-cream);
    }
    .radio-card:hover { border-color: var(--navy); }
    .radio-card.on {
        border-color: var(--mint-deep);
        background: var(--mint-soft);
    }
    .radio-card .ic {
        width: 36px;
        height: 36px;
        background: var(--bg-card);
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        font-size: 18px;
        border-radius: 9px;
    }
    .radio-card.on .ic {
        color: var(--mint-deeper);
        background: var(--mint);
    }
    .radio-card .t {
        margin-bottom: 3px;
        font-weight: 500;
        font-size: 14px;
    }
    .radio-card .d {
        line-height: 1.45;
        color: var(--muted);
        font-size: 11px;
    }

    /* Type Of Issues Section */
    .cat-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .cat-chip {
        padding: 8px 14px;
        cursor: pointer;
        transition: all 0.15s;
        color: var(--text);
        font-size: 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--bg-cream);
    }
    .cat-chip:hover { border-color: var(--navy); }
    .cat-chip.on {
        color: #fff;
        border-color: var(--navy);
        background: var(--navy);
    }

    /* Upload Block */
    .upload-zone {
        padding: 28px;
        transition: all 0.15s;
        cursor: pointer;
        text-align: center;
        border-radius: 12px;
        border: 2px dashed var(--border);
        background: var(--bg-cream-2);
    }
    .upload-zone:hover {
        border-color: var(--navy);
        background: var(--bg-cream);
    }
    .upload-zone i {
        margin-bottom: 10px;
        display: block;
        color: var(--muted);
        font-size: 32px;
    }
    .upload-zone .t {
        margin-bottom: 3px;
        color: var(--navy);
        font-weight: 500;
        font-size: 13px;
    }
    .upload-zone .d {
        color: var(--muted);
        font-size: 11px;
    }
    .upload-list {
        margin-top: 12px;
        display: flex;
        gap: 8px;
        flex-direction: column;
    }
    .upload-item {
        padding: 10px 14px;
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 12px;
        border-radius: 10px;
        background: var(--bg-cream);
    }
    .upload-item i.file {
        color: var(--blue);
        font-size: 18px;
    }
    .upload-item .n {
        flex: 1;
        color: var(--text);
        font-weight: 500;
    }
    .upload-item .s { color: var(--muted); }
    .upload-item i.x {
        cursor: pointer;
        color: var(--muted);
    }

    /* Priority Section */
    .priority-row {
        display: flex;
        gap: 8px;
    }
    .priority-row > div {
        padding: 14px;
        flex: 1;
        cursor: pointer;
        text-align: center;
        transition: all 0.15s;
        font-size: 13px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--bg-cream);
    }
    .priority-row > div .ic {
        margin-bottom: 4px;
        display: block;
        font-size: 18px;
    }
    .priority-row > div.on.low {
        color: var(--mint-deeper);
        font-weight: 500;
        border-color: var(--mint-deep);
        background: var(--mint-soft);
    }
    .priority-row > div.on.med {
        color: var(--amber);
        font-weight: 500;
        border-color: var(--amber);
        background: var(--amber-soft);
    }
    .priority-row > div.on.high {
        color: var(--red-dark);
        font-weight: 500;
        border-color: var(--red);
        background: var(--red-soft);
    }

    /* Privary Section */
    .toggle-row {
        padding: 16px;
        display: flex;
        gap: 12px;
        align-items: center;
        border-radius: 12px;
        background: var(--bg-cream);
    }
    .toggle-row .ti-shield-lock {
        color: var(--mint-deep);
        font-size: 24px;
    }
    .toggle-row .label-block { flex: 1; }
    .toggle-row .t {
        color: var(--navy);
        font-weight: 500;
        font-size: 13px;
    }
    .toggle-row .d {
        margin-top: 2px;
        color: var(--muted);
        font-size: 11px;
    }
    .switch {
        width: 42px;
        height: 24px;
        position: relative;
        cursor: pointer;
        border-radius: 999px;
        transition: background 0.15s;
        background: var(--border);
    }
    .switch.on { background: var(--mint-deep); }
    .switch::after {
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        position: absolute;
        content: '';
        background: #fff;
        border-radius: 50%;
        transition: transform 0.15s;
    }
    .switch.on::after { transform: translateX(18px); }

    /* From Button Group Section */
    .form-foot {
        margin-top: 28px;
        padding-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--border);
    }
    .form-foot-left {
        display: flex;
        gap: 5px;
        align-items: center;
        color: var(--muted);
        font-size: 11px;
    }

    /* Progress Tracking Information Block */
    .side-card {
        margin-bottom: 14px;
        padding: 22px;
        border-radius: 14px;
        background: var(--bg-card);
        border: 1px solid var(--border);
    }
    .side-card h4 {
        margin-bottom: 14px;
        color: var(--navy);
        font-weight: 500;
        font-size: 16px;
        font-family: 'Fraunces', serif;
    }
    .side-card.dark {
        color: #fff;
        border: none;
        background: var(--navy);
    }
    .side-card.dark h4 { color: #fff; }

    /* Common Asking Questions Block */
    .help-item {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    .help-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    .help-item .q {
        margin-bottom: 4px;
        color: var(--navy);
        font-weight: 500;
        font-size: 13px;
    }
    .help-item .a {
        line-height: 1.5;
        color: var(--muted);
        font-size: 12px;
    }

    /* Reach Out To Us Information Block */
    .contact-block {
        padding: 12px 0;
        display: flex;
        gap: 12px;
        align-items: center;
    }
    .contact-block i {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mint-deep);
        font-size: 16px;
        border-radius: 9px;
        background: var(--mint-soft);
    }
    .contact-block .ct {
        color: var(--muted);
        font-size: 12px;
    }
    .contact-block .cv {
        color: var(--navy);
        font-weight: 500;
        font-size: 13px;
    }

/* ======== Cases Tracker Section ======== */
    .tracker-area {
        padding: 50px 0;
        color: #fff;
        background: var(--navy);
    }
    .tracker-area .eyebrow { color: var(--mint); }
    .tracker-area h2 {
        margin-bottom: 8px;
        color: #fff;
        font-weight: 400;
        font-size: 30px;
        font-family: 'Fraunces', serif;
    }
    .tracker-area p.lede {
        margin-bottom: 22px;
        color: var(--light-blue);
        font-size: 14px;
    }
    .tracker-form {
        max-width: 720px;
        padding: 22px;
        display: flex;
        gap: 10px;
        align-items: end;
        border-radius: 14px;
        background: var(--navy-2);
    }
    .tracker-form input {
        padding: 13px 16px;
        flex: 1;
        outline: none;
        color: #fff;
        font-size: 14px;
        font-family: inherit;
        border-radius: 10px;
        background: var(--navy-3);
        border: 1px solid var(--navy-3);
    }
    .tracker-form input::placeholder { color: #8FAACC; }
    .tracker-form button {
        padding: 13px 22px;
        display: flex;
        gap: 6px;
        align-items: center;
        color: var(--navy);
        font-weight: 500;
        font-size: 14px;
        border-radius: 10px;
        background: var(--mint);
    }

    /* Sample Tracking Result Block */
    .track-result {
        max-width: 720px;
        margin-top: 22px;
        padding: 24px;
        border-radius: 14px;
        background: var(--navy-2);
    }
    .track-result-h {
        margin-bottom: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .track-id {
        color: #fff;
        font-weight: 500;
        font-size: 18px;
        font-family: 'Fraunces', serif;
    }
    .track-id span {
        color: var(--mint);
        font-style: italic;
    }
    .track-status {
        padding: 5px 12px;
        display: inline-flex;
        gap: 5px;
        align-items: center;
        border-radius: 999px;
        color: var(--amber);
        font-weight: 500;
        font-size: 12px;
        background: var(--amber-soft);
    }

    /* Body Tracking Step Detail Information Block */
    .track-timeline { display: flex; }
    .track-step {
        padding: 0 8px;
        flex: 1;
        position: relative;
    }
    .track-step .dot {
        width: 18px;
        height: 18px;
        margin: 0 auto 10px;
        position: relative;
        z-index: 1;
        border: 2px solid #1F3560;
        background: #1F3560;
        border-radius: 50%;
    }
    .track-step.done .dot {
        border-color: var(--mint);
        background: var(--mint);
    }
    .track-step.current .dot {
        animation: pulse-ring 2s infinite;
        border-color: var(--mint);
        background: var(--mint);
    }
    .track-step::before {
        top: 8px;
        left: 0;
        right: 0;
        height: 2px;
        content: '';
        position: absolute;
        z-index: 0;
        background: #1F3560;
    }
    .track-step.done::before,
    .track-step.current::before {
        background: var(--mint);
    }
    .track-step:first-child::before { left: 50%; }
    .track-step:last-child::before { right: 50%; }
    .track-step .t {
        margin-bottom: 3px;
        text-align: center;
        color: #fff;
        font-weight: 500;
        font-size: 12px;
    }
    .track-step .d {
        text-align: center;
        color: #8FAACC;
        font-size: 10px;
    }
    @keyframes pulse-ring {
        0% { box-shadow: 0 0 0 0 rgba(111,231,183,0.6); }
        100% { box-shadow: 0 0 0 8px rgba(111,231,183,0); }
    }

/* ======== Recent Real Outcome Solutions Section ======== */
    .resolutions-section { padding: 60px 0; }
    .resolutions-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .res-card {
        padding: 22px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg-card);
    }
    .res-card-head {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .res-card .case {
        color: var(--mint-deep);
        font-size: 13px;
        font-style: italic;
        font-family: 'Fraunces', serif;
    }
    .res-card h4 {
        margin-bottom: 8px;
        line-height: 1.3;
        color: var(--navy);
        font-weight: 500;
        font-size: 17px;
        font-family: 'Fraunces', serif;
    }
    .res-card p {
        margin-bottom: 14px;
        line-height: 1.55;
        color: var(--muted);
        font-size: 12px;
    }
    .res-card .meta {
        padding-top: 12px;
        display: flex;
        justify-content: space-between;
        color: var(--muted);
        font-size: 11px;
        border-top: 1px solid var(--border);
    }
    .res-card .meta b {
        color: var(--navy);
        font-weight: 500;
    }

    /* ################
        Media Query
    ################### */
    @media (max-width: 1024px) {
        .complaint-grid { grid-template-columns: 1fr; }
        .resolutions-grid { grid-template-columns: 1fr 1fr; }
        .path-cards { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
        .resolutions-grid { grid-template-columns: 1fr; }
        .radio-cards { grid-template-columns: 1fr; }
        .priority-row { flex-direction: column; }
        .steps-bar { padding: 14px; overflow-x: auto; }
        .step-pill .label { display: none; }
        .step-pill::after { margin: 0 4px; }
        .form-card { padding: 22px; }
        .tracker-form { flex-direction: column; }
    }