:root{--c-bg:#130f11;--c-panel:#fff;--c-ink:#1f2937;--c-muted:#6b7280;--c-orange:#ff5a1f;--c-border:#e5e7eb;--c-success:#087f5b;--c-danger:#c92a2a;--c-warning:#b26a00}
*{box-sizing:border-box}body.customer-body{margin:0;background:linear-gradient(135deg,#130f11,#2b1518);color:#fff;font-family:Alexandria,Arial,sans-serif;min-height:100vh}a{color:inherit}.customer-header{position:sticky;top:0;z-index:20;background:rgba(17,12,14,.96);border-bottom:1px solid rgba(255,255,255,.09)}.customer-header-inner{max-width:1180px;margin:auto;padding:14px 20px;display:flex;align-items:center;gap:20px}.customer-brand{text-decoration:none;font-weight:800}.customer-nav{display:flex;gap:10px;align-items:center;margin-inline-start:auto}.customer-nav a,.customer-nav button{border:0;background:transparent;color:#eee;text-decoration:none;padding:10px 12px;border-radius:8px;font-family:inherit;cursor:pointer}.customer-nav a:hover,.customer-nav a.active{background:rgba(255,90,31,.16);color:#ff7b47}.customer-language{display:flex;gap:4px}.customer-language button{padding:7px 8px;font-size:11px;border:1px solid rgba(255,255,255,.15)}.customer-main{max-width:1180px;margin:auto;padding:38px 20px 80px}.customer-page-title{margin:0 0 8px;font-size:clamp(25px,4vw,42px)}.customer-page-intro{color:#c7c1c3;margin:0 0 26px}.customer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.customer-card{grid-column:span 12;background:var(--c-panel);color:var(--c-ink);border:1px solid var(--c-border);border-radius:16px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.customer-card.half{grid-column:span 6}.customer-card.third{grid-column:span 4}.customer-card h2,.customer-card h3{margin-top:0}.customer-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.customer-field{display:flex;flex-direction:column;gap:7px}.customer-field.full{grid-column:1/-1}.customer-field label{font-weight:700;font-size:14px}.customer-field input,.customer-field select,.customer-field textarea{width:100%;border:1px solid #cfd4dc;border-radius:10px;padding:12px 13px;background:#fff;color:#111827;font:inherit}.customer-field textarea{min-height:120px;resize:vertical}.customer-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;background:var(--c-orange);color:#fff;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}.customer-button.secondary{background:#eee;color:#222}.customer-button.danger{background:var(--c-danger)}.customer-button.success{background:var(--c-success)}.customer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.customer-alert{border-radius:10px;padding:12px 14px;margin:12px 0;background:#eef2ff;color:#263a76}.customer-alert.success{background:#e6fcf5;color:#087f5b}.customer-alert.error{background:#fff0f0;color:#c92a2a}.customer-alert.warning{background:#fff4e6;color:#9c5300}.customer-table-wrap{overflow:auto}.customer-table{width:100%;border-collapse:collapse}.customer-table th,.customer-table td{padding:12px;border-bottom:1px solid var(--c-border);text-align:start;white-space:nowrap}.customer-table small{display:block;color:var(--c-muted)}.status-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff4e6;color:#c04a00;font-size:12px;font-weight:700}.status-badge.status-delivered{background:#e6fcf5;color:#087f5b}.status-badge.status-cancelled{background:#fff0f0;color:#c92a2a}.timeline{list-style:none;padding:0;margin:0}.timeline li{position:relative;padding:0 28px 22px}.timeline li:before{content:"";position:absolute;inset-inline-start:5px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--c-orange)}.timeline li:after{content:"";position:absolute;inset-inline-start:10px;top:17px;bottom:0;width:2px;background:#ffd5c5}.timeline li:last-child:after{display:none}.timeline time{color:var(--c-muted);font-size:12px}.message-list{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow:auto}.message{padding:12px 14px;border-radius:12px;background:#f3f4f6}.message.customer{background:#fff0e9}.message.staff{background:#ecfdf5}.message small{display:block;color:var(--c-muted);margin-top:6px}.rating-stars{display:flex;direction:ltr;gap:7px}.rating-stars input{position:absolute;opacity:0}.rating-stars label{font-size:30px;color:#ccc;cursor:pointer}.rating-stars input:checked~label,.rating-stars label:hover,.rating-stars label:hover~label{color:#ff9f1c}.metric{font-size:32px;font-weight:800;color:var(--c-orange)}.muted{color:var(--c-muted)}.customer-login-shell{max-width:520px;margin:65px auto}.customer-footer{text-align:center;color:#bbb;padding:25px}.proof-item,.change-item,.invoice-box{border:1px solid var(--c-border);border-radius:12px;padding:14px;margin:10px 0}.print-only{display:none}@media(max-width:800px){.customer-card.half,.customer-card.third{grid-column:span 12}.customer-form{grid-template-columns:1fr}.customer-nav{display:none}.customer-header-inner{justify-content:space-between}}@media print{.customer-header,.customer-footer,.no-print{display:none!important}.customer-body{background:#fff;color:#000}.customer-main{max-width:none;padding:0}.customer-card{box-shadow:none;border:0}.print-only{display:block}}


/* Customer cargo weight fields */
.customer-weight-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.55fr);
    gap: 10px;
}

.customer-weight-group input,
.customer-weight-group select {
    width: 100%;
    min-width: 0;
}


/* ===== DIAMOND CUSTOMER AUTH SLIDER START ===== */
.customer-auth-shell {
    width: min(100%, 1020px);
    margin: 38px auto 70px;
}

.customer-auth-card {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
    color: var(--c-ink);
}

.customer-auth-form-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 50%;
    display: grid;
    place-items: center;
    padding: 48px;
    background: #ffffff;
    transition:
        transform 0.68s cubic-bezier(0.2, 0.75, 0.2, 1),
        opacity 0.45s ease;
}

.customer-auth-login-panel {
    z-index: 2;
}

.customer-auth-register-panel {
    z-index: 1;
    opacity: 0;
}

.customer-auth-shell.auth-register-active .customer-auth-login-panel {
    transform: translateX(100%);
}

html[dir="rtl"] .customer-auth-shell.auth-register-active .customer-auth-login-panel {
    transform: translateX(-100%);
}

.customer-auth-shell.auth-register-active .customer-auth-register-panel {
    z-index: 5;
    opacity: 1;
    transform: translateX(100%);
    animation: diamond-auth-panel-show 0.68s;
}

html[dir="rtl"] .customer-auth-shell.auth-register-active .customer-auth-register-panel {
    transform: translateX(-100%);
}

@keyframes diamond-auth-panel-show {
    0%,
    48% {
        opacity: 0;
        z-index: 1;
    }

    49%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

.customer-auth-form-content {
    width: min(100%, 390px);
}

.customer-auth-eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: #e64611;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.customer-auth-form-content h1 {
    margin: 0;
    color: #21171a;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}

.customer-auth-intro {
    min-height: 48px;
    margin: 12px 0 24px;
    color: #766d70;
    font-size: 14px;
    line-height: 1.8;
}

.customer-auth-form {
    display: grid;
    gap: 14px;
}

.customer-auth-field {
    display: grid;
    gap: 7px;
    color: #3d3336;
    font-size: 13px;
    font-weight: 700;
}

.customer-auth-field input {
    width: 100%;
    min-width: 0;
    border: 1px solid #e1d9dc;
    border-radius: 12px;
    padding: 13px 14px;
    outline: none;
    background: #fbf9fa;
    color: #21171a;
    font: inherit;
    font-weight: 500;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.customer-auth-field input:focus {
    border-color: #ff5a1f;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.12);
}

.customer-auth-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-auth-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -2px;
}

html[dir="rtl"] .customer-auth-row {
    justify-content: flex-start;
}

.customer-auth-link,
.customer-auth-footnote a {
    color: #df4511;
    font-weight: 700;
    text-decoration: none;
}

.customer-auth-link:hover,
.customer-auth-footnote a:hover {
    text-decoration: underline;
}

.customer-auth-submit {
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #ff651f, #e63d0d);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(230, 61, 13, 0.25);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.customer-auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(230, 61, 13, 0.32);
}

.customer-auth-footnote {
    margin: 18px 0 0;
    color: #766d70;
    font-size: 12px;
    line-height: 1.8;
}

.customer-auth-overlay-container {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    z-index: 20;
    width: 50%;
    overflow: hidden;
    transition: transform 0.68s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.customer-auth-shell.auth-register-active .customer-auth-overlay-container {
    transform: translateX(-100%);
}

html[dir="rtl"] .customer-auth-shell.auth-register-active .customer-auth-overlay-container {
    transform: translateX(100%);
}

.customer-auth-overlay {
    position: relative;
    inset-inline-start: -100%;
    width: 200%;
    height: 100%;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.16), transparent 28%),
        radial-gradient(circle at 85% 78%, rgba(255, 146, 98, 0.18), transparent 32%),
        linear-gradient(145deg, #2f1d24 0%, #5b2730 48%, #ef4d15 100%);
    color: #ffffff;
    transform: translateX(0);
    transition: transform 0.68s cubic-bezier(0.2, 0.75, 0.2, 1);
}

html[dir="rtl"] .customer-auth-overlay {
    inset-inline-start: auto;
    right: -100%;
}

.customer-auth-shell.auth-register-active .customer-auth-overlay {
    transform: translateX(50%);
}

html[dir="rtl"] .customer-auth-shell.auth-register-active .customer-auth-overlay {
    transform: translateX(-50%);
}

.customer-auth-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
}

.customer-auth-overlay-panel {
    position: absolute;
    inset-block: 0;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 54px;
    text-align: center;
    transition: transform 0.68s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.customer-auth-overlay-left {
    inset-inline-start: 0;
    transform: translateX(-18%);
}

html[dir="rtl"] .customer-auth-overlay-left {
    transform: translateX(18%);
}

.customer-auth-shell.auth-register-active .customer-auth-overlay-left {
    transform: translateX(0);
}

.customer-auth-overlay-right {
    inset-inline-end: 0;
    transform: translateX(0);
}

.customer-auth-shell.auth-register-active .customer-auth-overlay-right {
    transform: translateX(18%);
}

html[dir="rtl"] .customer-auth-shell.auth-register-active .customer-auth-overlay-right {
    transform: translateX(-18%);
}

.customer-auth-overlay-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 900;
    letter-spacing: 0.1em;
    backdrop-filter: blur(8px);
}

.customer-auth-overlay-panel h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3vw, 42px);
}

.customer-auth-overlay-panel p {
    max-width: 340px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 1.9;
}

.customer-auth-ghost {
    min-width: 150px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 12px 22px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.customer-auth-ghost:hover {
    transform: translateY(-2px);
    background: #ffffff;
    color: #3a2027;
}

.customer-auth-mobile-tabs {
    display: none;
}

@media (max-width: 900px) {
    .customer-auth-shell {
        max-width: 600px;
        margin-top: 24px;
    }

    .customer-auth-card {
        min-height: auto;
        overflow: visible;
        border-radius: 22px;
    }

    .customer-auth-overlay-container {
        display: none;
    }

    .customer-auth-form-panel {
        position: relative;
        inset: auto;
        width: 100%;
        display: none;
        padding: 34px 26px;
        opacity: 1;
        transform: none !important;
        animation: none !important;
    }

    .customer-auth-login-panel {
        display: grid;
    }

    .customer-auth-shell.auth-register-active .customer-auth-login-panel {
        display: none;
    }

    .customer-auth-shell.auth-register-active .customer-auth-register-panel {
        display: grid;
    }

    .customer-auth-mobile-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
        padding: 6px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.1);
    }

    .customer-auth-mobile-tabs button {
        border: 0;
        border-radius: 10px;
        padding: 11px 10px;
        background: transparent;
        color: #ddd4d7;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .customer-auth-mobile-tabs button.active {
        background: #ffffff;
        color: #e54812;
    }

    .customer-auth-password-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .customer-main {
        padding-inline: 14px;
    }

    .customer-auth-form-panel {
        padding: 28px 20px;
    }

    .customer-auth-form-content h1 {
        font-size: 28px;
    }

    .customer-auth-intro {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-auth-form-panel,
    .customer-auth-overlay-container,
    .customer-auth-overlay,
    .customer-auth-overlay-panel {
        transition: none !important;
        animation: none !important;
    }
}
/* ===== DIAMOND CUSTOMER AUTH SLIDER END ===== */