﻿
:root {
    --zura-yellow: #f5c400;
    --zura-yellow-dark: #d9aa00;
    --zura-yellow-soft: #fff8d9;
    --zura-bg: #eef5f9;
    --zura-white: #ffffff;
    --zura-text: #263238;
    --zura-muted: #90a4ae;
    --zura-border: #edf2f5;
    --zura-dark: #263238;
    --zura-success: #26c6da;
    --zura-green: #2f7d32;
    --zura-purple: #7460ee;
    --zura-orange: #ffa726;
}

html,
body {
    font-family: 'Poppins', Arial, sans-serif !important;
    background: var(--zura-bg);
    overflow-x: hidden;
}

.zura-customer-shell {
    width: 100%;
    max-width: none;
    padding-bottom: 42px;
    padding-top: 18px;
    background: var(--zura-bg);
    min-height: calc(100vh - 70px);
    overflow-x: hidden;
}

.zura-page-header {
    background: var(--zura-white);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    padding: 22px 28px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.zura-page-title {
    margin: 0;
    color: #1e88e5;
    font-size: 22px;
    font-weight: 500;
}

.zura-breadcrumb {
    margin-top: 3px;
    color: var(--zura-muted);
    font-size: 13px;
    font-weight: 400;
}

    .zura-breadcrumb a {
        color: #1e88e5;
        text-decoration: none;
    }

.zura-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.zura-action-btn {
    min-height: 38px;
    border-radius: 4px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    transition: .2s ease;
}

    .zura-action-btn:disabled {
        cursor: not-allowed;
        opacity: .82;
        transform: none;
    }

    .zura-action-btn:hover {
        text-decoration: none;
        transform: translateY(-1px);
    }

.zura-btn-yellow {
    background: var(--zura-yellow);
    color: #111111;
}

.zura-btn-spinner {
    animation: zuraSpin .75s linear infinite;
    border: 2px solid rgba(17,17,17,.22);
    border-left-color: #111111;
    border-radius: 50%;
    display: inline-block;
    height: 16px;
    width: 16px;
}

.zura-btn-dark {
    background: var(--zura-dark);
    color: #ffffff;
}

.zura-btn-light {
    background: #f8fafc;
    color: var(--zura-text);
    border: 1px solid var(--zura-border);
}

.zura-hero {
    background: var(--zura-white);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-bottom: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(720px, 1.3fr);
}

.zura-hero-content {
    padding: 28px;
}

.zura-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--zura-yellow-soft);
    color: #7a5a00;
    border-radius: 40px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.zura-hero-title {
    color: var(--zura-text);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
}

.zura-hero-text {
    color: var(--zura-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 820px;
    margin: 0;
}

.zura-hero-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zura-hero-side {
    background:
        radial-gradient(circle at 88% 12%, rgba(245,196,0,.16), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

    .zura-hero-side::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(245,196,0,.12);
        top: -120px;
        right: -120px;
    }

    .zura-hero-side::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(245,196,0,.08);
        bottom: -100px;
        left: -100px;
    }

    .zura-hero-side > * {
        position: relative;
        z-index: 2;
    }

.zura-logo-card {
    position: relative;
    z-index: 1;
    background: var(--zura-white);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    width: min(100%, 300px);
}

    .zura-logo-card img {
        max-width: 210px;
        max-height: 105px;
        object-fit: contain;
    }

    .zura-logo-card span {
        display: block;
        margin-top: 12px;
        color: var(--zura-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

.zura-track-panel {
    width: 100%;
    max-width: 900px;
    background: rgba(255,255,255,.98);
    border-radius: 12px;
    padding: 36px;
    margin: 0;
    box-shadow: 0 16px 36px rgba(38,50,56,.08);
    border: 1px solid #e4edf3;
    font-family: 'Poppins', Arial, sans-serif;
}

.zura-track-title {
    color: var(--zura-text);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
}

.zura-track-subtitle {
    color: #607d8b;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 24px;
}

.zura-search-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* Compact automatic OTP verification modal. */
.zura-otp-modal{font-family:'Poppins',Arial,sans-serif}
.zura-otp-modal .modal-dialog{max-width:460px;padding:12px;width:100%}
.zura-otp-modal .modal-content{border:0;border-radius:16px;box-shadow:0 26px 70px rgba(13,31,45,.28);overflow:hidden}
.zura-otp-modal .modal-header{align-items:center;background:#fff;border-bottom:1px solid #edf1f4;padding:18px 20px}
.zura-otp-heading{align-items:center;display:flex;gap:12px;min-width:0}
.zura-otp-heading-icon{align-items:center;background:#fff5c7;border:1px solid #f2d76d;border-radius:11px;color:#a87300;display:flex;flex:0 0 44px;font-size:23px;height:44px;justify-content:center}
.zura-otp-heading small{color:#718496;display:block;font-size:8px;font-weight:800;letter-spacing:.11em;margin-bottom:2px;text-transform:uppercase}
.zura-otp-heading h3{color:#172536;font-size:17px;font-weight:750;line-height:1.3;margin:0}
.zura-otp-modal .btn-close{box-shadow:none;font-size:10px;margin:0;padding:9px}
.zura-otp-modal .modal-body{background:#fbfcfd;padding:24px 22px 20px;text-align:center}
.zura-otp-copy{color:#52687a;font-size:11.5px;line-height:1.65;margin:0 auto 18px;max-width:360px}
.zura-otp-inputs{display:grid;gap:9px;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 auto;max-width:374px}
.zura-otp-digit{appearance:textfield;background:#fff;border:1px solid #d8e2e9;border-radius:9px;color:#172536;font-family:'Poppins',Arial,sans-serif;font-size:21px;font-weight:700;height:54px;min-width:0;outline:none;text-align:center;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;width:100%}
.zura-otp-digit::-webkit-inner-spin-button,.zura-otp-digit::-webkit-outer-spin-button{appearance:none;margin:0}
.zura-otp-digit:hover{border-color:#b9c8d3}
.zura-otp-digit:focus{border-color:#e4ad00;box-shadow:0 0 0 3px rgba(245,196,0,.17);transform:translateY(-1px)}
.zura-otp-digit.has-value{background:#fffaf0;border-color:#edc443}
.zura-otp-digit.is-invalid{animation:zuraOtpShake .25s ease;border-color:#dc4358;box-shadow:0 0 0 3px rgba(220,67,88,.1)}
.zura-otp-digit:disabled{background:#f0f4f7;color:#536879;cursor:wait}
.zura-otp-message{align-items:center;border-radius:8px;display:flex;font-size:10.5px;font-weight:600;gap:7px;justify-content:center;line-height:1.45;margin:13px auto 0;max-width:374px;padding:9px 11px}
.zura-otp-message[hidden]{display:none!important}
.zura-otp-message.error{background:#fff0f2;border:1px solid #f2cbd1;color:#bd2d43}
.zura-otp-message.error i{font-size:16px}
.zura-otp-message.progress-message{background:#eef7ff;border:1px solid #d2e7f7;color:#315d7c}
.zura-otp-spinner{animation:zuraOtpSpin .7s linear infinite;border:2px solid rgba(49,93,124,.2);border-left-color:#315d7c;border-radius:50%;height:15px;width:15px}
.zura-otp-help{align-items:center;color:#8293a1;display:flex;font-size:9px;gap:5px;justify-content:center;line-height:1.5;margin:15px 0 0}
.zura-otp-help i{font-size:14px}
.zura-otp-modal .modal-footer{align-items:center;background:#fff;border-top:1px solid #edf1f4;display:flex;justify-content:space-between;padding:13px 20px}
.zura-otp-action{align-items:center;background:transparent;border:0;border-radius:8px;color:#526779;display:inline-flex;font-family:inherit;font-size:10.5px;font-weight:650;gap:6px;min-height:34px;padding:6px 9px}
.zura-otp-action:hover{background:#f3f6f8;color:#172536}
.zura-otp-action.link-action{color:#9b6c00}
.zura-otp-action:disabled{cursor:not-allowed;opacity:.55}
@keyframes zuraOtpSpin{to{transform:rotate(360deg)}}
@keyframes zuraOtpShake{0%,100%{transform:translateX(0)}35%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
@media(max-width:480px){.zura-otp-modal .modal-dialog{margin:8px auto;padding:8px}.zura-otp-modal .modal-body{padding:20px 14px 17px}.zura-otp-inputs{gap:6px}.zura-otp-digit{border-radius:8px;font-size:18px;height:48px}.zura-otp-modal .modal-header{padding:15px}.zura-otp-modal .modal-footer{padding:11px 14px}}

/* Secure complaint supplementation workspace. */
.zura-supplement-alert{align-items:center;background:linear-gradient(135deg,#fff9e7 0%,#fffdf5 100%);border-bottom:1px solid #f2df9c;border-top:1px solid #f2df9c;display:flex;gap:16px;padding:18px 22px}
.zura-supplement-alert[hidden]{display:none!important}
.zura-supplement-alert-icon{align-items:center;background:#fff0b5;border:1px solid #f3d66b;border-radius:12px;color:#b87700;display:flex;flex:0 0 48px;font-size:25px;height:48px;justify-content:center}
.zura-supplement-alert-copy{flex:1;min-width:0}
.zura-supplement-eyebrow{color:#9b6500;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.zura-supplement-alert-copy h4{color:#172536;font-size:17px;font-weight:700;margin:3px 0 4px}
.zura-supplement-alert-copy p{color:#637286;font-size:12px;line-height:1.5;margin:0}
.zura-supplement-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
.zura-supplement-btn{align-items:center;border:1px solid transparent;border-radius:9px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:12px;font-weight:700;gap:7px;justify-content:center;min-height:40px;padding:0 15px;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.zura-supplement-btn i{font-size:17px}
.zura-supplement-btn.primary{background:#f8be00;border-color:#e9ad00;color:#172536;box-shadow:0 5px 14px rgba(201,143,0,.18)}
.zura-supplement-btn.primary:hover{background:#ffc928;box-shadow:0 7px 18px rgba(201,143,0,.25)}
.zura-supplement-btn.secondary{background:#fff;border-color:#dce5ed;color:#263b4e}
.zura-supplement-btn.secondary:hover{background:#f5f8fa;border-color:#b9c8d5}
.zura-supplement-btn:disabled{cursor:not-allowed;opacity:.65}
.zura-supplement-btn.is-loading i{animation:zuraSupplementSpin .8s linear infinite}
@keyframes zuraSupplementSpin{to{transform:rotate(360deg)}}

.zura-supplement-modal{font-family:Poppins,Arial,sans-serif}
.zura-supplement-modal .modal-dialog{
    height:calc(100vh - 32px);
    margin:16px auto;
    max-height:calc(100vh - 32px);
}
.zura-supplement-modal .modal-content{border:0;border-radius:16px;box-shadow:0 24px 65px rgba(14,32,48,.22);overflow:hidden}
.zura-supplement-modal .modal-content{
    display:flex;
    flex-direction:column;
    height:100%;
    max-height:calc(100vh - 32px);
    min-height:0;
}
.zura-supplement-modal .modal-content>form{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    height:100%;
    min-height:0;
    overflow:hidden;
}
.zura-supplement-modal .modal-header{align-items:center;background:#fff;border-bottom:1px solid #e7edf2;padding:18px 22px}
.zura-supplement-modal .modal-header,.zura-supplement-modal .modal-footer{flex:0 0 auto}
.zura-supplement-modal .modal-body{
    background:#f7f9fb;
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:22px;
    scrollbar-color:#a9b8c5 #edf2f5;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
}
.zura-supplement-modal .modal-body::-webkit-scrollbar{width:9px}
.zura-supplement-modal .modal-body::-webkit-scrollbar-track{background:#edf2f5}
.zura-supplement-modal .modal-body::-webkit-scrollbar-thumb{background:#a9b8c5;border:2px solid #edf2f5;border-radius:999px}
.zura-supplement-modal .modal-body::-webkit-scrollbar-thumb:hover{background:#8498a9}
.zura-supplement-modal .modal-footer{background:#fff;border-top:1px solid #e7edf2;gap:8px;padding:14px 22px}
.zura-modal-heading{align-items:center;display:flex;gap:12px}
.zura-modal-heading>span{align-items:center;background:#fff1bd;border:1px solid #f2da7b;border-radius:11px;color:#ac7200;display:flex;font-size:22px;height:44px;justify-content:center;width:44px}
.zura-modal-heading small{color:#7a8b9a;display:block;font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.zura-modal-heading h3{color:#152536;font-size:18px;font-weight:750;margin:2px 0 0}
.zura-supplement-status{align-items:flex-start;background:#fff7df;border:1px solid #efd681;border-radius:11px;color:#6f4d00;display:flex;gap:12px;margin-bottom:16px;padding:14px 16px}
.zura-supplement-status>i{font-size:23px}
.zura-supplement-status strong,.zura-supplement-status span{display:block}
.zura-supplement-status strong{font-size:12px;line-height:1.5}
.zura-supplement-status span{color:#9a6a00;font-size:10px;font-weight:700;margin-top:3px}
.zura-supplement-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;background:#fff;border:1px solid #e1e8ee;border-radius:11px;overflow:hidden}
.zura-supplement-summary-grid>div{border-bottom:1px solid #edf1f4;border-right:1px solid #edf1f4;min-height:74px;padding:14px 16px}
.zura-supplement-summary-grid>div:nth-child(3n){border-right:0}
.zura-supplement-summary-grid>div:nth-last-child(-n+3){border-bottom:0}
.zura-supplement-summary-grid small{color:#8493a1;display:block;font-size:9px;font-weight:700;letter-spacing:.05em;margin-bottom:5px;text-transform:uppercase}
.zura-supplement-summary-grid strong{color:#253a4d;display:block;font-size:12px;line-height:1.4}
.zura-supplement-reason{align-items:flex-start;background:#fff;border:1px solid #efc6c9;border-left:4px solid #ec5964;border-radius:11px;display:flex;gap:12px;margin-bottom:14px;padding:16px}
.zura-supplement-reason>span{align-items:center;background:#fff0f1;border-radius:9px;color:#df3f4c;display:flex;flex:0 0 38px;font-size:20px;height:38px;justify-content:center}
.zura-supplement-reason small{color:#ba3340;display:block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.zura-supplement-reason p{color:#273d50;font-size:13px;line-height:1.65;margin:5px 0 0;white-space:pre-line}
.zura-supplement-instructions,.zura-supplement-description,.zura-existing-documents,.zura-upload-section{background:#fff;border:1px solid #e1e8ee;border-radius:11px;margin-top:14px;padding:16px}
.zura-supplement-instructions h4,.zura-supplement-description h4,.zura-section-title h4{align-items:center;color:#263b4e;display:flex;font-size:12px;font-weight:750;gap:7px;margin:0}
.zura-supplement-instructions h4 i,.zura-supplement-description h4 i,.zura-section-title h4 i{color:#3a77c7;font-size:18px}
.zura-supplement-instructions p,.zura-supplement-description p{color:#596e81;font-size:12px;line-height:1.65;margin:10px 0 0;white-space:pre-line}
.zura-section-title{align-items:flex-start;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}
.zura-section-title>span{background:#eef3f7;border-radius:999px;color:#607488;font-size:9px;font-weight:700;padding:5px 8px}
.zura-section-title p{color:#7b8c9b;font-size:10px;margin:4px 0 0}
.zura-document-list{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.zura-document-list>a{align-items:center;background:#f8fafb;border:1px solid #e5ebf0;border-radius:9px;color:#263b4e;display:flex;gap:10px;min-width:0;padding:10px 11px;text-decoration:none}
.zura-document-list>a:hover{background:#f1f6fa;border-color:#cbd8e2;color:#174f8b}
.zura-document-icon{align-items:center;background:#fff0f1;border-radius:7px;color:#df4350;display:flex;flex:0 0 32px;font-size:18px;height:32px;justify-content:center}
.zura-document-copy{flex:1;min-width:0}
.zura-document-copy strong,.zura-document-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zura-document-copy strong{font-size:10px}.zura-document-copy small{color:#8493a1;font-size:8.5px;margin-top:3px}
.zura-document-open{color:#7790a6;font-size:15px}
.zura-no-documents{align-items:center;color:#8493a1;display:flex;font-size:10px;gap:7px;padding:6px}

.zura-form-notice{align-items:center;background:#eef7ff;border:1px solid #d4e7f7;border-radius:10px;color:#355b7c;display:flex;font-size:11px;gap:9px;line-height:1.5;margin-bottom:16px;padding:12px 14px}
.zura-form-notice i{font-size:20px}
.zura-supplement-form-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.zura-form-field.full{grid-column:1/-1}
.zura-form-field label{color:#31475a;display:block;font-size:10px;font-weight:700;margin-bottom:6px}
.zura-form-field label span{color:#8493a1;font-weight:500}
.zura-form-field .form-control{background:#fff;border:1px solid #dce5ec;border-radius:8px;color:#21374a;font-size:11px;min-height:43px;padding:10px 12px}
.zura-form-field textarea.form-control{line-height:1.55;resize:vertical}
.zura-form-field .form-control:focus{border-color:#e9b000;box-shadow:0 0 0 3px rgba(245,190,0,.14)}
.zura-form-field>small{color:#8293a2;display:block;font-size:9px;margin-top:5px}
.form-documents{margin-top:16px}
.zura-upload-dropzone{align-items:center;background:#fbfcfd;border:2px dashed #cbd8e2;border-radius:11px;color:#486074;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:135px;padding:20px;text-align:center;transition:.18s ease}
.zura-upload-dropzone:hover,.zura-upload-dropzone.is-dragging{background:#fff9e8;border-color:#eab200;color:#725100}
.zura-upload-dropzone>i{color:#d49a00;font-size:32px;margin-bottom:6px}.zura-upload-dropzone strong{font-size:12px}.zura-upload-dropzone span{color:#8191a0;font-size:9px;margin-top:4px}.zura-upload-dropzone input{height:1px;opacity:0;position:absolute;width:1px}
.zura-selected-files{display:grid;gap:8px;margin-top:10px}
.zura-selected-file{align-items:center;background:#f8fafb;border:1px solid #e3eaf0;border-radius:8px;display:flex;gap:9px;padding:8px 10px}
.zura-selected-file-icon{align-items:center;background:#eaf7ef;border-radius:7px;color:#299a56;display:flex;font-size:17px;height:31px;justify-content:center;width:31px}
.zura-selected-file-copy{flex:1;min-width:0}.zura-selected-file-copy strong,.zura-selected-file-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zura-selected-file-copy strong{color:#2a4053;font-size:10px}.zura-selected-file-copy small{color:#8293a2;font-size:8.5px;margin-top:2px}
.zura-selected-file button{background:#fff;border:1px solid #dfe6ec;border-radius:7px;color:#d64c57;height:30px;width:30px}
.zura-resubmit-declaration{align-items:center;background:#fff;border:1px solid #e1e8ee;border-radius:10px;cursor:pointer;display:flex;gap:10px;margin-top:16px;padding:13px 14px}
.zura-resubmit-declaration input{height:18px;width:18px}.zura-resubmit-declaration>span{color:#2c9a58;font-size:19px}.zura-resubmit-declaration strong{color:#40566a;font-size:10.5px;font-weight:600}
.zura-form-error{align-items:flex-start;background:#fff0f1;border:1px solid #efc8cc;border-radius:8px;color:#c73845;display:flex;font-size:10.5px;font-weight:600;gap:7px;line-height:1.5;margin-top:12px;padding:10px 12px;white-space:normal}
.zura-form-error[hidden]{display:none!important}
.zura-form-error i{flex:0 0 auto;font-size:17px;line-height:1.15}
.swal2-container{z-index:20050!important}
.zura-form-field .zura-field-error{align-items:flex-start;color:#c6283d;display:none;font-size:10px;font-weight:600;gap:5px;line-height:1.4;margin-top:6px}
.zura-form-field .form-control.is-invalid + .zura-field-error,
.zura-form-field .form-control:invalid:not(:placeholder-shown) + .zura-field-error,
.zura-form-field .zura-field-error.is-visible{display:flex}
.zura-form-field .zura-field-error i{flex:0 0 auto;font-size:14px;line-height:1.1;margin-top:0}
.zura-form-field .form-control.is-invalid,
.zura-form-field .form-control:invalid:not(:placeholder-shown){border-color:#dc4358;box-shadow:0 0 0 3px rgba(220,67,88,.1)}

@media(max-width:991px){.zura-supplement-alert{align-items:flex-start;flex-wrap:wrap}.zura-supplement-actions{justify-content:flex-start;width:100%}.zura-supplement-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zura-supplement-summary-grid>div:nth-child(3n){border-right:1px solid #edf1f4}.zura-supplement-summary-grid>div:nth-child(2n){border-right:0}.zura-supplement-summary-grid>div:nth-last-child(-n+3){border-bottom:1px solid #edf1f4}.zura-supplement-summary-grid>div:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:575px){.zura-supplement-alert{padding:15px}.zura-supplement-alert-icon{height:42px;width:42px}.zura-supplement-actions{display:grid;grid-template-columns:1fr}.zura-supplement-modal .modal-dialog{height:calc(100vh - 12px);margin:6px;max-height:calc(100vh - 12px)}.zura-supplement-modal .modal-content{border-radius:12px;max-height:calc(100vh - 12px)}.zura-supplement-modal .modal-body{padding:14px}.zura-supplement-modal .modal-header,.zura-supplement-modal .modal-footer{padding:14px}.zura-supplement-summary-grid,.zura-supplement-form-grid,.zura-document-list{grid-template-columns:1fr}.zura-supplement-summary-grid>div{border-bottom:1px solid #edf1f4!important;border-right:0!important}.zura-supplement-summary-grid>div:last-child{border-bottom:0!important}.zura-supplement-modal .modal-footer .zura-supplement-btn{flex:1}}

    .zura-search-row .form-control {
        flex: 1 1 260px;
        min-width: 0;
        height: 54px;
        border: 1px solid #dfe7ec;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 400;
        font-family: 'Poppins', sans-serif;
        padding: 0 18px;
        box-shadow: none;
        transition: all .25s ease;
    }

    .zura-search-row #searchInput {
        flex: 1.35 1 340px;
    }

    .zura-search-row #trackingContact {
        flex: 1 1 280px;
    }

    .zura-search-row .form-control::placeholder {
        color: #526773;
        opacity: 1;
    }

    .zura-search-row .form-control.is-invalid {
        border-color: #c62828;
        box-shadow: 0 0 0 3px rgba(198,40,40,.12);
    }

        .zura-search-row .form-control:focus {
            border-color: var(--zura-yellow);
            box-shadow: 0 0 0 4px rgba(245,196,0,.15);
        }

    .zura-search-row .zura-action-btn {
        height: 54px;
        border-radius: 8px;
        padding: 0 22px;
        white-space: nowrap;
        font-family: 'Poppins', Arial, sans-serif !important;
        font-weight: 600;
    }

        .zura-search-row .zura-action-btn span {
            font-family: 'Poppins', Arial, sans-serif !important;
            font-weight: 600;
        }

.zura-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.zura-span-3 {
    grid-column: span 3;
}

.zura-span-4 {
    grid-column: span 4;
}

.zura-span-5 {
    grid-column: span 5;
}

.zura-span-6 {
    grid-column: span 6;
}

.zura-span-7 {
    grid-column: span 7;
}

.zura-span-8 {
    grid-column: span 8;
}

.zura-span-12 {
    grid-column: span 12;
}

.zura-card {
    background: var(--zura-white);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border: 1px solid rgba(255,255,255,.7);
    min-width: 0;
    overflow: hidden;
}

.zura-card-body {
    padding: 22px;
}

.zura-kpi {
    min-height: 152px;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .zura-kpi::before {
        content: "";
        height: 4px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .zura-kpi:hover {
        border-color: rgba(245,196,0,.45);
        box-shadow: 0 14px 30px rgba(38,50,56,.08);
        transform: translateY(-2px);
    }

.zura-kpi-total::before {
    background: var(--zura-purple);
}

.zura-kpi-new::before {
    background: #607d8b;
}

.zura-kpi-active::before {
    background: var(--zura-orange);
}

.zura-kpi-resolved::before {
    background: var(--zura-success);
}

.zura-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.zura-kpi-eyebrow {
    color: var(--zura-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.zura-kpi-value {
    color: var(--zura-text);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 7px;
}

.zura-kpi-label {
    color: var(--zura-muted);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.zura-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 26px;
}

.zura-icon-purple {
    background: rgba(116,96,238,.1);
    color: var(--zura-purple);
}

.zura-icon-dark {
    background: rgba(96,125,139,.1);
    color: #6c757d;
}

.zura-icon-yellow {
    background: rgba(255,167,38,.13);
    color: var(--zura-orange);
}

.zura-icon-cyan {
    background: rgba(38,198,218,.12);
    color: var(--zura-success);
}

.zura-progress {
    height: 7px;
    background: #edf3f7;
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
}

    .zura-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
    }

.zura-fill-purple {
    background: var(--zura-purple);
}

.zura-fill-dark {
    background: #6c757d;
}

.zura-fill-yellow {
    background: var(--zura-orange);
}

.zura-fill-cyan {
    background: var(--zura-success);
}

.zura-fill-gold {
    background: var(--zura-yellow);
}

.zura-kpi-note {
    color: var(--zura-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    margin: 12px 0 0;
}

.zura-card-head {
    padding: 18px 22px 12px;
    border-bottom: 1px solid #edf2f5;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.zura-card-title {
    margin: 0;
    color: var(--zura-text);
    font-size: 17px;
    font-weight: 500;
}

.zura-card-subtitle {
    color: var(--zura-muted);
    font-size: 12px;
    font-weight: 400;
    margin: 4px 0 0;
}

.zura-pill {
    background: var(--zura-yellow-soft);
    color: #7a5a00;
    border-radius: 30px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.zura-chart {
    width: 100%;
    min-height: 315px;
}

.zura-chart-large {
    min-height: 380px;
}

.zura-chart-donut {
    min-height: 350px;
}

.zura-sector-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zura-sector-head {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
}

.zura-sector-tile {
    align-items: stretch;
    border: 0;
    border-radius: 10px;
    display: flex;
    gap: 14px;
    min-height: 126px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(38,50,56,.12);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .zura-sector-tile:hover {
        box-shadow: 0 22px 42px rgba(38,50,56,.18);
        transform: translateY(-2px);
    }

    .zura-sector-tile::before {
        content: "";
        background: rgba(255,255,255,.2);
        border-radius: 999px;
        height: 112px;
        opacity: .9;
        right: -42px;
        position: absolute;
        top: -42px;
        width: 112px;
    }

.zura-sector-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.zura-sector-topline {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

    .zura-sector-topline strong {
        color: #ffffff;
        display: block;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }

    .zura-sector-topline span {
        color: rgba(255,255,255,.9);
        display: block;
        font-size: 13px;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
        font-family: 'Poppins', Arial, sans-serif;
        font-weight: 600;
    }

    .zura-sector-content small {
        color: rgba(255,255,255,.78);
        display: block;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        margin-top: 8px;
    }

.zura-sector-icon {
    align-items: center;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    color: #ffffff !important;
    display: flex;
    flex: 0 0 52px;
    font-size: 27px;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.zura-sector-meter {
    background: rgba(255,255,255,.24);
    border-radius: 999px;
    height: 7px;
    margin-top: 14px;
    overflow: hidden;
}

.zura-card.zura-resolution-card {
    border: 1px solid #e4edf3;
    box-shadow: 0 16px 36px rgba(38,50,56,.08);
}

    .zura-sector-meter span {
        background: #ffffff !important;
        border-radius: inherit;
        display: block;
        height: 100%;
    }

.zura-sector-petroleum::before {
    background: rgba(255,255,255,.18);
}

.zura-sector-petroleum {
    background: linear-gradient(135deg, #ff9f43 0%, #ff6f61 100%);
}

.zura-sector-petroleum .zura-sector-icon {
    background: rgba(255,167,38,.14);
    color: var(--zura-orange);
}

.zura-sector-petroleum .zura-sector-meter span {
    background: #ffffff;
}

.zura-sector-zeco::before {
    background: rgba(255,255,255,.18);
}

.zura-sector-zeco {
    background: linear-gradient(135deg, #7460ee 0%, #4f8cff 100%);
}

.zura-sector-zeco .zura-sector-icon {
    background: rgba(116,96,238,.12);
    color: var(--zura-purple);
}

.zura-sector-zeco .zura-sector-meter span {
    background: #ffffff;
}

.zura-sector-zawa::before {
    background: rgba(255,255,255,.18);
}

.zura-sector-zawa {
    background: linear-gradient(135deg, #26c6da 0%, #0097a7 100%);
}

.zura-sector-zawa .zura-sector-icon {
    background: rgba(96,125,139,.12);
    color: #607d8b;
}

.zura-sector-zawa .zura-sector-meter span {
    background: #ffffff;
}

.zura-sector-lpg::before {
    background: rgba(255,255,255,.18);
}

.zura-sector-lpg {
    background: linear-gradient(135deg, #263238 0%, #607d8b 100%);
}

.zura-sector-lpg .zura-sector-icon {
    background: rgba(38,198,218,.14);
    color: var(--zura-success);
}

.zura-sector-lpg .zura-sector-meter span {
    background: #ffffff;
}

.zura-resolution-panel {
    background:
        radial-gradient(circle at 88% 12%, rgba(245,196,0,.16), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    color: var(--zura-text);
    min-height: 100%;
    padding: 22px;
}

.zura-resolution-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.zura-resolution-kicker {
    align-items: center;
    color: var(--zura-text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
}

    .zura-resolution-kicker i {
        color: var(--zura-success);
        font-size: 20px;
    }

.zura-resolution-badge {
    background: var(--zura-yellow-soft);
    border: 1px solid rgba(245,196,0,.55);
    border-radius: 999px;
    color: #7a5a00;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 10px;
    white-space: nowrap;
}

.zura-resolution-main {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 158px minmax(0, 1fr);
}

.zura-ring-wrap {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.zura-ring {
    --value: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(var(--zura-yellow) calc(var(--value) * 1%), #e9eef2 0);
    box-shadow: inset 0 0 0 1px rgba(38,50,56,.04), 0 18px 38px rgba(245,196,0,.20);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
}

    .zura-ring::after {
        content: "";
        width: 106px;
        height: 106px;
        background: #ffffff;
        border-radius: 50%;
        position: absolute;
    }

    .zura-ring strong {
        position: relative;
        z-index: 1;
        color: #111827;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }

    .zura-ring span {
        color: #607d8b;
        font-size: 11px;
        font-weight: 800;
        margin-top: 6px;
        position: relative;
        text-transform: uppercase;
        z-index: 1;
    }

.zura-ring-copy h3 {
    color: var(--zura-text);
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 7px;
}

.zura-ring-copy p {
    color: var(--zura-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.zura-resolution-stats {
    border-top: 1px solid var(--zura-border);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
    padding-top: 18px;
}

    .zura-resolution-stats div {
        background: #ffffff;
        border: 1px solid #e4edf3;
        border-radius: 8px;
        padding: 12px 10px;
    }

    .zura-resolution-stats strong {
        color: var(--zura-text);
        display: block;
        font-size: 20px;
        font-weight: 800;
        line-height: 1;
    }

    .zura-resolution-stats span {
        color: var(--zura-muted);
        display: block;
        font-size: 11px;
        font-weight: 700;
        margin-top: 7px;
    }

.zura-list {
    display: grid;
    gap: 10px;
}

.zura-list-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fbfdfe;
    border: 1px solid var(--zura-border);
    border-radius: 4px;
}

.zura-list-title {
    margin: 0;
    color: var(--zura-text);
    font-size: 13px;
    font-weight: 500;
}

.zura-list-meta {
    margin: 3px 0 0;
    color: var(--zura-muted);
    font-size: 12px;
    font-weight: 400;
}

.zura-count {
    min-width: 38px;
    padding: 7px 9px;
    border-radius: 4px;
    background: var(--zura-white);
    border: 1px solid var(--zura-border);
    color: var(--zura-text);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.zura-table-wrap {
    overflow-x: auto;
}

.zura-table-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.zura-export-pdf {
    min-height: 40px;
    padding-left: 16px;
    padding-right: 16px;
}

#complaintsTable {
    margin: 0;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    #complaintsTable thead th {
        background: #f8fafc;
        border: 0;
        color: var(--zura-muted);
        font-size: 11px;
        font-weight: 800;
        padding: 13px 14px;
        text-align: left;
        text-transform: uppercase;
    }

    #complaintsTable tbody td {
        background: var(--zura-white);
        border-top: 1px solid #e6eef3;
        border-bottom: 1px solid #e6eef3;
        color: var(--zura-muted);
        font-size: 12px;
        font-weight: 400;
        padding: 14px;
        text-align: left;
        vertical-align: middle;
    }

        #complaintsTable tbody td:first-child {
            border-left: 1px solid #e6eef3;
            border-radius: 8px 0 0 8px;
            color: var(--zura-text);
            font-weight: 600;
        }

        #complaintsTable tbody td:last-child {
            border-radius: 0 8px 8px 0;
            border-right: 1px solid #e6eef3;
        }

    #complaintsTable tbody tr {
        box-shadow: 0 7px 20px rgba(38,50,56,.035);
    }

    #complaintsTable tbody tr:hover td {
        background: #fffdf2;
        border-color: rgba(245,196,0,.34);
        color: #455a64;
    }

.zura-results-table {
    font-family: 'Poppins', Arial, sans-serif;
}

.zura-ref-code {
    background: #fff8d9;
    border: 1px solid rgba(245,196,0,.52);
    border-radius: 999px;
    color: #6f5100;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 10px;
    white-space: nowrap;
}

.zura-table-strong {
    color: var(--zura-text);
    font-weight: 700;
}

.zura-status-badge {
    background: #eef5f9;
    border: 1px solid #dbe7ee;
    border-radius: 999px;
    color: #455a64;
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 10px;
    white-space: nowrap;
}

.zura-table-loading {
    align-items: center;
    color: var(--zura-text);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 86px;
}

.zura-document-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--zura-yellow-soft);
    border: 1px solid var(--zura-yellow);
    color: #5f4300;
    border-radius: 30px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 4px 2px 0;
    text-decoration: none;
    max-width: 200px;
}

@keyframes zuraSpin {
    to {
        transform: rotate(360deg);
    }
}

    .zura-document-link span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zura-document-link:hover {
        background: var(--zura-yellow);
        color: #111111;
        text-decoration: none;
    }

.zura-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.zura-summary-box {
    background: #fbfdfe;
    border: 1px solid var(--zura-border);
    border-radius: 4px;
    padding: 16px;
}

    .zura-summary-box strong {
        color: var(--zura-text);
        font-size: 22px;
        font-weight: 500;
        display: block;
        line-height: 1;
    }

    .zura-summary-box span {
        display: block;
        margin-top: 8px;
        color: var(--zura-muted);
        font-size: 12px;
    }

.zura-track-table {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
}

.zura-track-result-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.zura-track-table .zura-card-head {
    padding: 20px 24px;
}

.zura-track-table .zura-card-body {
    padding: 24px;
}

.zura-track-table .zura-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.zura-track-table #complaintsTable {
    width: 100% !important;
    min-width: 100%;
}

.zura-track-table .zura-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.zura-track-table .zura-card-subtitle {
    margin-top: 4px;
}

@media (max-width: 768px) {

    .zura-track-table {
        margin-top: 18px;
        margin-bottom: 18px;
    }

        .zura-track-table .zura-card-head,
        .zura-track-table .zura-card-body {
            padding: 18px;
        }
}

@media (max-width: 1199.98px) {
    .zura-hero,
    .zura-ring-wrap {
        grid-template-columns: 1fr;
    }

    .zura-resolution-main {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .zura-span-3,
    .zura-span-4,
    .zura-span-5,
    .zura-span-6,
    .zura-span-7,
    .zura-span-8 {
        grid-column: span 6;
    }
}

.zura-track-table {
    display: none;
}

@media (max-width: 767.98px) {

    .zura-chart {
        min-height: 330px;
    }

    .zura-chart-large {
        min-height: 390px;
    }

    .zura-chart-donut {
        min-height: 390px;
    }

    .zura-sector-summary {
        grid-template-columns: 1fr;
    }

    .zura-resolution-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .zura-resolution-main {
        gap: 16px;
    }

    .zura-resolution-stats {
        grid-template-columns: 1fr;
    }

    .zura-sector-tile {
        min-height: 112px;
    }

    .zura-search-row {
        flex-direction: column;
    }

        .zura-search-row .form-control {
            flex: 0 0 auto;
            width: 100%;
            height: 48px;
            min-height: 48px;
            line-height: 48px;
        }

.zura-phone-hint {
    display: block;
    margin-top: 9px;
    color: #607d8b;
    font-size: 12px;
    line-height: 1.5;
}

        .zura-search-row .zura-action-btn {
            width: 100%;
        }

    .zura-track-panel {
        padding: 22px;
    }
}

.zura-portal-summary-card {
    overflow: hidden;
}

.zura-summary-head .zura-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zura-summary-modern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.zura-summary-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fbfdfe;
    border: 1px solid var(--zura-border);
    border-radius: 10px;
    padding: 16px;
}

    .zura-summary-tile strong {
        display: block;
        color: var(--zura-text);
        font-size: 26px;
        font-weight: 600;
        line-height: 1;
    }

    .zura-summary-tile span {
        display: block;
        margin-top: 7px;
        color: var(--zura-muted);
        font-size: 12px;
        font-weight: 500;
    }

.zura-summary-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

    .zura-summary-icon.purple {
        background: rgba(116, 96, 238, .12);
        color: var(--zura-purple);
    }

    .zura-summary-icon.yellow {
        background: rgba(245, 196, 0, .18);
        color: #8a6500;
    }

    .zura-summary-icon.dark {
        background: rgba(38, 50, 56, .10);
        color: var(--zura-dark);
    }

    .zura-summary-icon.cyan {
        background: rgba(38, 198, 218, .14);
        color: var(--zura-success);
    }

@media (max-width: 767px) {
    .zura-summary-modern {
        grid-template-columns: 1fr;
    }
}


