:root {
    --amp-purple: #6531b9;
    --amp-purple-dark: #51239c;
    --amp-purple-light: #7b43cc;
    --amp-background: #f4f5f8;
    --amp-card: #ffffff;
    --amp-text: #17172a;
    --amp-muted: #737788;
    --amp-border: #e3e5eb;
    --amp-green: #20a63a;
    --amp-blue: #159dc0;
    --amp-orange: #ff9518;
    --amp-red: #e83c42;
    --amp-radius: 10px;
    --amp-shadow: 0 2px 10px rgba(25, 20, 40, 0.09);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    color: var(--amp-text);
    background: #eef0f5;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.amp-body {
    min-height: 100vh;
}

.amp-app-shell {
    width: 100%;
    min-height: 100vh;
}

/* =====================================================================
   LOGIN
   ===================================================================== */

.amp-login-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            var(--amp-purple-dark) 0%,
            var(--amp-purple) 52%,
            #7340c6 100%
        );
}

.amp-login-brand-area {
    min-height: 39vh;
    padding: 14px 22px 38px;
    color: #fff;
}

.amp-login-status,
.amp-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.amp-courier-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 35px;
    text-align: center;
}

.amp-bird-mark {
    width: 62px;
    height: 48px;
    margin-bottom: 8px;
    font-size: 54px;
    line-height: 48px;
    font-weight: 900;
    transform: rotate(-18deg);
}

.amp-brand-name {
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.amp-brand-subtitle {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.25em;
}

.amp-login-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 65vh;
    padding: 30px 21px 18px;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -7px 28px rgba(31, 14, 61, 0.13);
}

.amp-login-heading {
    margin-bottom: 30px;
    text-align: center;
}

.amp-login-heading h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 750;
}

.amp-login-heading p {
    margin: 8px 0 0;
    color: var(--amp-muted);
    font-size: 13px;
}

.amp-form {
    display: grid;
    gap: 18px;
}

.amp-field {
    display: grid;
    gap: 7px;
}

.amp-field > span {
    font-size: 12px;
    font-weight: 650;
}

.amp-input-wrap {
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid #d9dce5;
    border-radius: 7px;
    background: #fff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.amp-input-wrap:focus-within {
    border-color: var(--amp-purple);
    box-shadow: 0 0 0 3px rgba(101, 49, 185, 0.1);
}

.amp-input-icon {
    width: 37px;
    flex: 0 0 37px;
    color: #777d90;
    text-align: center;
}

.amp-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--amp-text);
    background: transparent;
    font-size: 13px;
}

.amp-input-wrap input::placeholder {
    color: #9b9eaa;
}

.amp-password-toggle {
    width: 42px;
    height: 42px;
    border: 0;
    color: #777d90;
    background: transparent;
    cursor: pointer;
}

.amp-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -3px;
    color: var(--amp-purple);
    font-size: 11px;
}

.amp-remember {
    display: flex;
    align-items: center;
    gap: 7px;
}

.amp-remember input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--amp-purple);
}

.amp-forgot {
    font-weight: 600;
}

.amp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.amp-btn-primary {
    color: #fff;
    background:
        linear-gradient(
            90deg,
            var(--amp-purple) 0%,
            #7040c3 100%
        );
}

.amp-btn-block {
    width: 100%;
}

.amp-version {
    margin: 29px 0 0;
    color: #9699a5;
    text-align: center;
    font-size: 10px;
}

/* =====================================================================
   COMMON
   ===================================================================== */

.amp-alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.amp-alert-danger {
    border: 1px solid #ffd2d4;
    color: #a9282d;
    background: #fff0f1;
}

/* =====================================================================
   DASHBOARD APP SHELL
   ===================================================================== */

.amp-mobile-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 69px;
    background: var(--amp-background);
}

.amp-purple-header {
    position: relative;
    z-index: 20;
    padding: 11px 16px 10px;
    color: #fff;
    background:
        linear-gradient(
            100deg,
            var(--amp-purple-dark) 0%,
            var(--amp-purple) 58%,
            #7040c3 100%
        );
    box-shadow: 0 2px 8px rgba(62, 25, 119, 0.2);
}

.amp-header-row {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    min-height: 43px;
}

.amp-header-row h1 {
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

.amp-header-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.amp-dashboard-content {
    padding: 10px 12px 18px;
}

.amp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.amp-kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 75px;
    padding: 12px 13px;
    border: 1px solid #ececf1;
    border-radius: var(--amp-radius);
    background: var(--amp-card);
    box-shadow: var(--amp-shadow);
}

.amp-kpi-card div {
    display: grid;
    gap: 8px;
}

.amp-kpi-card span:first-child {
    color: #555a6c;
    font-size: 10px;
}

.amp-kpi-card strong {
    font-size: 20px;
    line-height: 1;
}

.amp-kpi-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
}

.amp-kpi-purple {
    color: var(--amp-purple);
    background: #f0e9fb;
}

.amp-kpi-blue {
    color: var(--amp-blue);
    background: #e7f7fb;
}

.amp-kpi-orange {
    color: var(--amp-orange);
    background: #fff3e2;
}

.amp-kpi-red {
    color: var(--amp-red);
    background: #ffebec;
}

.amp-search-strip {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 36px;
    align-items: center;
    min-height: 43px;
    margin-top: 9px;
    border: 1px solid #e0e2e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--amp-shadow);
}

.amp-search-icon {
    color: #777c8d;
    text-align: center;
    font-size: 20px;
}

.amp-search-strip input {
    width: 100%;
    min-width: 0;
    height: 41px;
    padding: 0 3px;
    border: 0;
    outline: 0;
    color: var(--amp-text);
    background: transparent;
    font-size: 11px;
}

.amp-search-strip input::placeholder {
    color: #9599a7;
}

.amp-filter-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    color: #289990;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.amp-list-section {
    margin-top: 10px;
}

.amp-list-section h2 {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
}

.amp-delivery-list {
    display: grid;
    gap: 6px;
}

.amp-delivery-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19px;
    align-items: center;
    min-height: 88px;
    padding: 10px 9px 10px 13px;
    border: 1px solid #e4e5eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(25, 20, 40, 0.08);
}

.amp-delivery-list-card[hidden] {
    display: none !important;
}

.amp-delivery-main {
    min-width: 0;
}

.amp-delivery-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.amp-booking-number {
    overflow: hidden;
    color: var(--amp-purple);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-status-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #2478dd;
    background: #eaf4ff;
    font-size: 8px;
    font-weight: 600;
}

.amp-consignee-name {
    overflow: hidden;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-route-text {
    overflow: hidden;
    margin-top: 4px;
    color: #353949;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-delivery-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    color: #363a49;
    font-size: 9px;
}

.amp-summary-divider {
    color: #b2b4bd;
}

.amp-card-chevron {
    color: #666b7d;
    text-align: right;
    font-size: 25px;
    font-weight: 300;
}

.amp-empty-state {
    padding: 38px 20px;
    border: 1px dashed #d6d8e0;
    border-radius: 10px;
    color: var(--amp-muted);
    background: #fff;
    text-align: center;
}

.amp-empty-icon {
    margin-bottom: 8px;
    color: var(--amp-purple);
    font-size: 30px;
}

.amp-empty-state h3 {
    margin: 0;
    color: var(--amp-text);
    font-size: 14px;
}

.amp-empty-state p {
    margin: 7px 0 0;
    font-size: 11px;
    line-height: 1.5;
}

.amp-search-empty {
    margin-top: 7px;
}

/* =====================================================================
   BOTTOM NAVIGATION
   ===================================================================== */

.amp-bottom-nav {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 64px;
    border-top: 1px solid #dedfe6;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -3px 12px rgba(25, 20, 40, 0.07);
}

.amp-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border: 0;
    color: #777b89;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.amp-nav-item span {
    font-size: 21px;
    line-height: 1;
}

.amp-nav-item small {
    font-size: 8px;
}

.amp-nav-active {
    color: var(--amp-purple);
    font-weight: 700;
}

.amp-nav-disabled {
    cursor: default;
}

/* =====================================================================
   SIDE MENU AND PROFILE
   ===================================================================== */

.amp-side-overlay {
    position: fixed;
    z-index: 39;
    inset: 0;
    background: rgba(16, 11, 30, 0.44);
}

.amp-side-menu {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 315px);
    padding: 30px 18px;
    background: #fff;
    box-shadow: 8px 0 28px rgba(19, 12, 37, 0.2);
}

.amp-side-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--amp-border);
}

.amp-side-avatar,
.amp-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    color: #fff;
    background: var(--amp-purple);
    font-weight: 800;
}

.amp-side-menu-header div:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.amp-side-menu-header strong,
.amp-side-menu-header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-side-menu-header strong {
    font-size: 13px;
}

.amp-side-menu-header span {
    color: var(--amp-muted);
    font-size: 10px;
}

.amp-side-menu > a {
    display: block;
    padding: 15px 4px;
    border-bottom: 1px solid #f0f0f3;
    color: var(--amp-text);
    text-decoration: none;
    font-size: 13px;
}

.amp-profile-panel {
    position: fixed;
    z-index: 45;
    right: 12px;
    bottom: 73px;
    display: grid;
    justify-items: center;
    width: min(270px, calc(100vw - 24px));
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--amp-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(25, 20, 40, 0.2);
    text-align: center;
}

.amp-profile-panel > strong {
    font-size: 13px;
}

.amp-profile-panel > span {
    color: var(--amp-muted);
    font-size: 10px;
}

.amp-profile-logout {
    width: 100%;
    margin-top: 7px;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    background: var(--amp-purple);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

/* =====================================================================
   ACCESS DENIED
   ===================================================================== */

.amp-message-page {
    display: grid;
    min-height: 100vh;
    padding: 24px;
    place-items: center;
    background: var(--amp-background);
}

.amp-message-card {
    width: 100%;
    padding: 34px 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--amp-shadow);
    text-align: center;
}

.amp-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    color: #fff;
    background: var(--amp-red);
    font-size: 27px;
    font-weight: 800;
}

.amp-message-card h1 {
    margin: 18px 0 8px;
    font-size: 22px;
}

.amp-message-card p {
    margin: 0 0 22px;
    color: var(--amp-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* =====================================================================
   DESKTOP PREVIEW
   ===================================================================== */

@media (min-width: 560px) {
    .amp-app-shell {
        width: 430px;
        min-height: 100vh;
        margin: 0 auto;
        overflow: hidden;
        border-right: 1px solid #d9dae1;
        border-left: 1px solid #d9dae1;
        background: #fff;
        box-shadow: 0 0 45px rgba(21, 16, 35, 0.15);
    }

    .amp-mobile-page,
    .amp-login-page {
        min-height: 100vh;
    }

    .amp-bottom-nav {
        right: auto;
        left: 50%;
        width: 430px;
        transform: translateX(-50%);
    }

    .amp-side-menu {
        left: calc(50% - 215px);
        width: 315px;
    }

    .amp-side-overlay {
        right: auto;
        left: 50%;
        width: 430px;
        transform: translateX(-50%);
    }

    .amp-profile-panel {
        right: calc(50% - 203px);
    }
}

@media (max-height: 650px) {
    .amp-login-brand-area {
        min-height: 34vh;
    }

    .amp-courier-brand {
        padding-top: 13px;
    }

    .amp-login-panel {
        min-height: 70vh;
        padding-top: 20px;
    }

    .amp-login-heading {
        margin-bottom: 18px;
    }

    .amp-form {
        gap: 13px;
    }

    .amp-version {
        margin-top: 16px;
    }
}

/* =====================================================================
   PHASE 2C.1 — VISUAL PRECISION OVERRIDES
   ===================================================================== */

[hidden] {
    display: none !important;
}

.amp-login-status,
.amp-status-row {
    display: none !important;
}

.amp-mobile-page {
    padding-bottom: 57px;
}

.amp-purple-header {
    padding: 7px 12px 6px;
}

.amp-header-row {
    min-height: 48px;
    grid-template-columns: 32px 1fr 32px;
}

.amp-header-row h1 {
    font-size: 14px;
}

.amp-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0;
}

.amp-header-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amp-dashboard-content {
    padding: 9px 10px 14px;
}

.amp-kpi-grid {
    gap: 6px;
}

.amp-kpi-card {
    min-height: 62px;
    padding: 9px 10px;
    border-radius: 8px;
}

.amp-kpi-card div {
    gap: 5px;
}

.amp-kpi-card span:first-child {
    font-size: 9px;
}

.amp-kpi-card strong {
    font-size: 18px;
}

.amp-kpi-symbol {
    width: 25px;
    height: 25px;
    font-size: 14px;
}

.amp-search-strip {
    min-height: 39px;
    margin-top: 7px;
    grid-template-columns: 29px minmax(0, 1fr) 32px;
    border-radius: 7px;
}

.amp-search-icon {
    font-size: 17px;
}

.amp-search-strip input {
    height: 37px;
    font-size: 10px;
}

.amp-filter-button {
    width: 32px;
    height: 32px;
    font-size: 17px;
}

.amp-list-section {
    margin-top: 8px;
}

.amp-list-section h2 {
    margin-bottom: 6px;
    font-size: 11px;
}

.amp-delivery-list {
    gap: 5px;
}

.amp-delivery-list-card {
    min-height: 76px;
    padding: 8px 8px 8px 11px;
    grid-template-columns: minmax(0, 1fr) 17px;
    border-radius: 7px;
}

.amp-booking-number {
    font-size: 10px;
}

.amp-status-badge {
    padding: 4px 7px;
    font-size: 7px;
}

.amp-consignee-name {
    margin-top: 4px;
    font-size: 9px;
}

.amp-route-text {
    margin-top: 3px;
    font-size: 8px;
}

.amp-delivery-summary {
    margin-top: 3px;
    font-size: 8px;
}

.amp-card-chevron {
    font-size: 21px;
}

.amp-bottom-nav {
    height: 55px;
}

.amp-nav-item {
    gap: 2px;
}

.amp-nav-item span {
    font-size: 18px;
}

.amp-nav-item small {
    font-size: 7px;
}

.amp-profile-panel {
    position: fixed !important;
    z-index: 60;
    right: 8px;
    bottom: 62px;
    width: min(245px, calc(100vw - 16px));
    gap: 6px;
    padding: 15px;
    border-radius: 10px;
}

.amp-profile-avatar {
    width: 37px;
    height: 37px;
}

.amp-profile-panel > strong {
    font-size: 11px;
}

.amp-profile-panel > span {
    font-size: 9px;
}

.amp-profile-logout {
    margin-top: 5px;
    padding: 8px;
    font-size: 10px;
}

.amp-side-menu {
    width: min(79vw, 285px);
    padding: 23px 16px;
}

.amp-login-brand-area {
    min-height: 36vh;
    padding-top: 20px;
}

.amp-courier-brand {
    padding-top: 22px;
}

.amp-login-panel {
    min-height: 67vh;
    padding: 25px 19px 15px;
}

.amp-login-heading {
    margin-bottom: 23px;
}

.amp-login-heading h1 {
    font-size: 20px;
}

.amp-login-heading p {
    font-size: 12px;
}

.amp-form {
    gap: 15px;
}

.amp-input-wrap {
    min-height: 41px;
}

.amp-input-wrap input {
    height: 39px;
    font-size: 12px;
}

.amp-btn {
    min-height: 42px;
}

@media (min-width: 560px) {
    .amp-app-shell {
        width: 390px;
    }

    .amp-bottom-nav {
        width: 390px;
    }

    .amp-side-menu {
        left: calc(50% - 195px);
        width: 285px;
    }

    .amp-side-overlay {
        width: 390px;
    }

    .amp-profile-panel {
        right: calc(50% - 187px);
    }
}

@media (max-width: 559px) {
    .amp-app-shell {
        width: 100%;
    }

    .amp-profile-panel {
        right: 8px;
    }
}

/* =====================================================================
   PHASE 2D — DELIVERY DETAIL FOUNDATION
   ===================================================================== */

.amp-delivery-list-card {
    color: inherit;
    text-decoration: none;
}

.amp-delivery-list-card:hover,
.amp-delivery-list-card:focus {
    color: inherit;
    text-decoration: none;
}

.amp-detail-page {
    padding-bottom: 72px;
}

.amp-detail-header .amp-header-row {
    grid-template-columns: 32px 1fr 32px;
}

.amp-back-button {
    color: #fff;
    text-decoration: none;
}

.amp-detail-content {
    padding: 9px 10px 16px;
}

.amp-detail-booking-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 12px;
    border: 1px solid #e6e6ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--amp-shadow);
}

.amp-detail-booking-card > div {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.amp-detail-label {
    color: var(--amp-muted);
    font-size: 9px;
}

.amp-detail-booking-number {
    overflow: hidden;
    color: var(--amp-purple);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-detail-status-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid #bed9ff;
    border-radius: 999px;
    color: #2478dd;
    background: #eef6ff;
    font-size: 8px;
    font-weight: 650;
}

.amp-detail-information-card {
    margin-top: 8px;
    border: 1px solid #e6e6ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--amp-shadow);
}

.amp-detail-row {
    display: grid;
    grid-template-columns: 25px 105px minmax(0, 1fr);
    align-items: center;
    min-height: 47px;
    gap: 6px;
    padding: 9px 11px;
    border-bottom: 1px solid #f0f0f3;
}

.amp-detail-row:last-child {
    border-bottom: 0;
}

.amp-detail-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--amp-purple);
}

.amp-detail-row-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amp-detail-row-label {
    color: #555968;
    font-size: 9px;
}

.amp-detail-row strong {
    overflow-wrap: anywhere;
    color: #1d1e2d;
    text-align: right;
    font-size: 9px;
    line-height: 1.35;
}

.amp-detail-action-bar {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px 10px;
    border-top: 1px solid #dedfe6;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -3px 12px rgba(25, 20, 40, 0.08);
}

.amp-detail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 43px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
}

.amp-detail-action span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.amp-action-delivered {
    background: var(--amp-green);
}

.amp-action-refused {
    background: var(--amp-red);
}

.amp-detail-action:disabled {
    cursor: not-allowed;
    filter: saturate(0.85);
    opacity: 0.88;
}

@media (min-width: 560px) {
    .amp-detail-action-bar {
        right: auto;
        left: 50%;
        width: 390px;
        transform: translateX(-50%);
    }
}

/* =====================================================================
   PHASE 2E — PROOF OF DELIVERY FOUNDATION
   ===================================================================== */

.amp-detail-action {
    text-decoration: none;
}

.amp-detail-action:hover,
.amp-detail-action:focus {
    color: #fff;
    text-decoration: none;
}

.amp-pod-page {
    padding-bottom: 0;
}

.amp-pod-content {
    padding: 12px 11px 20px;
}

.amp-pod-form {
    display: grid;
    gap: 13px;
}

.amp-pod-field-group {
    display: grid;
    gap: 7px;
}

.amp-pod-label,
.amp-pod-field > span {
    color: #272938;
    font-size: 10px;
    font-weight: 650;
}

.amp-pod-upload-area {
    position: relative;
    display: grid;
    min-height: 176px;
    overflow: hidden;
    border: 1.5px dashed #c8c9d4;
    border-radius: 9px;
    background: #fff;
    place-items: center;
}

.amp-pod-upload-area.is-dragging {
    border-color: var(--amp-purple);
    background: #f8f4ff;
}

.amp-pod-upload-prompt {
    display: grid;
    justify-items: center;
    gap: 5px;
    color: var(--amp-purple);
    text-align: center;
    pointer-events: none;
}

.amp-pod-upload-prompt svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amp-pod-upload-prompt strong {
    font-size: 12px;
}

.amp-pod-upload-prompt span {
    color: #767a89;
    font-size: 9px;
}

.amp-pod-upload-prompt .amp-pod-gallery-text {
    color: var(--amp-purple);
    font-weight: 650;
}

.amp-pod-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.amp-pod-preview {
    width: 100%;
    height: 176px;
    object-fit: cover;
}

.amp-pod-file-info {
    overflow: hidden;
    color: #4f5364;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-pod-help {
    margin: 0;
    color: #8b8e9a;
    font-size: 8px;
}

.amp-pod-field {
    display: grid;
    gap: 6px;
}

.amp-pod-field input,
.amp-pod-field textarea {
    width: 100%;
    border: 1px solid #d9dbe3;
    border-radius: 7px;
    outline: 0;
    color: var(--amp-text);
    background: #fff;
    font-size: 10px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.amp-pod-field input {
    height: 40px;
    padding: 0 11px;
}

.amp-pod-field textarea {
    min-height: 82px;
    padding: 10px 11px;
    resize: vertical;
}

.amp-pod-field input:focus,
.amp-pod-field textarea:focus {
    border-color: var(--amp-purple);
    box-shadow: 0 0 0 3px rgba(101, 49, 185, 0.09);
}

.amp-pod-booking-reference {
    padding: 9px 10px;
    border-radius: 7px;
    color: #626677;
    background: #eeeef3;
    font-size: 9px;
}

.amp-pod-booking-reference strong {
    color: var(--amp-purple);
}

.amp-pod-confirm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 45px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--amp-green);
    font-size: 11px;
    font-weight: 750;
}

.amp-pod-confirm-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.amp-pod-confirm-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.amp-pod-foundation-notice {
    margin: -3px 0 0;
    color: #8c8f9c;
    text-align: center;
    font-size: 8px;
    line-height: 1.45;
}

/* =====================================================================
   PHASE 2E.1 — POD SAVE FOUNDATION
   ===================================================================== */

.amp-alert {
    padding: 10px 11px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1.45;
}

.amp-alert-danger {
    border: 1px solid #f2b8bd;
    color: #a42832;
    background: #fff0f1;
}

.amp-alert-success {
    border: 1px solid #afe0bf;
    color: #176c37;
    background: #edfff3;
}

.amp-pod-existing-proof {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 6px;
    color: #176c37;
    background: #edfff3;
    font-size: 8px;
}

.amp-pod-existing-proof span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.amp-pod-existing-proof strong {
    overflow: hidden;
    max-width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
   PHASE 2E.2 — LIVE DELIVERY CONFIRMATION
   ===================================================================== */

.amp-pod-save-button,
.amp-pod-confirm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 45px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
}

.amp-pod-save-button {
    background: var(--amp-purple);
}

.amp-pod-confirm-button {
    background: var(--amp-green);
}

.amp-pod-save-button span,
.amp-pod-confirm-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.amp-pod-save-button:active,
.amp-pod-confirm-button:active {
    transform: translateY(1px);
}

.amp-pod-live-notice {
    margin: -3px 0 0;
    padding: 8px 9px;
    border-radius: 6px;
    color: #176c37;
    background: #edfff3;
    text-align: center;
    font-size: 8px;
    line-height: 1.45;
}

.amp-delivery-success-page {
    min-height: calc(100vh - 20px);
    padding: 24px 14px;
    background:
        linear-gradient(
            180deg,
            var(--amp-purple) 0,
            var(--amp-purple) 175px,
            #f5f5f8 175px,
            #f5f5f8 100%
        );
}

.amp-success-card {
    width: 100%;
    max-width: 390px;
    padding: 29px 19px 20px;
}

.amp-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 15px;
    border-radius: 50%;
    color: #fff;
    background: var(--amp-green);
    box-shadow: 0 10px 25px rgba(32, 169, 93, 0.25);
}

.amp-success-icon span {
    font-size: 35px;
    font-weight: 700;
}

.amp-success-booking {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 8px;
    background: #f0ebfa;
    text-align: left;
}

.amp-success-booking span,
.amp-success-details span {
    color: #7b7e8c;
    font-size: 8px;
}

.amp-success-booking strong {
    color: var(--amp-purple);
    font-size: 13px;
}

.amp-success-details {
    display: grid;
    gap: 1px;
    margin: 11px 0 17px;
    overflow: hidden;
    border: 1px solid #e4e5eb;
    border-radius: 8px;
    background: #e4e5eb;
    text-align: left;
}

.amp-success-details > div {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    background: #fff;
}

.amp-success-details strong {
    color: #252736;
    font-size: 10px;
}

.amp-success-button {
    width: 100%;
}

/* =====================================================================
   PHASE 2S.1 — RESPONSIVE STABILIZATION
   ===================================================================== */

html {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.amp-body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.amp-app-shell,
.amp-mobile-page,
.amp-dashboard-page,
.amp-dashboard-content,
.amp-delivery-list,
.amp-delivery-card,
.amp-detail-page,
.amp-pod-page,
.amp-pod-form {
    min-width: 0;
    max-width: 100%;
}

.amp-app-shell {
    width: 100%;
    max-width: 480px;
    margin-right: auto;
    margin-left: auto;
}

.amp-header-row,
.amp-kpi-grid,
.amp-search-row,
.amp-delivery-card,
.amp-delivery-card-header,
.amp-delivery-card-body {
    min-width: 0;
}

.amp-delivery-card *,
.amp-detail-page *,
.amp-pod-page * {
    overflow-wrap: anywhere;
    word-break: normal;
}

.amp-search-row input,
.amp-pod-form input,
.amp-pod-form textarea,
.amp-pod-form button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 480px) {
    .amp-app-shell {
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 380px) {
    .amp-dashboard-content {
        padding-right: 10px;
        padding-left: 10px;
    }

    .amp-kpi-grid {
        gap: 7px;
    }

    .amp-kpi-card {
        padding-right: 8px;
        padding-left: 8px;
    }
}
/* PHASE 2C.2 — DASHBOARD UI ALIGNMENT */

:root {
    --amp-dashboard-purple: #6531b9;
    --amp-dashboard-purple-dark: #4f2397;
    --amp-dashboard-purple-light: #8c63d2;
    --amp-dashboard-surface: #f5f4f8;
    --amp-dashboard-card: #ffffff;
    --amp-dashboard-text: #252132;
    --amp-dashboard-muted: #797486;
    --amp-dashboard-border: #ebe8f0;
}

.amp-dashboard-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    background:
        linear-gradient(
            180deg,
            #ede7f7 0,
            #f5f4f8 240px,
            #f5f4f8 100%
        );
}

.amp-dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 205px;
    padding:
        calc(14px + env(safe-area-inset-top))
        20px
        30px;
    border-radius: 0 0 28px 28px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 255, 255, 0.20),
            transparent 31%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(255, 255, 255, 0.12),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple-dark),
            var(--amp-dashboard-purple) 55%,
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 15px 34px rgba(78, 39, 143, 0.24);
}

.amp-dashboard-hero::after {
    position: absolute;
    right: -45px;
    bottom: -74px;
    width: 190px;
    height: 190px;
    border: 25px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.amp-dashboard-hero .amp-header-row {
    position: relative;
    z-index: 2;
    min-height: 42px;
}

.amp-dashboard-hero .amp-header-row h1 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.2px;
}

.amp-dashboard-hero .amp-header-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(8px);
}

.amp-dashboard-hero .amp-header-icon:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.20);
}

.amp-driver-welcome {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-top: 25px;
}

.amp-driver-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, 0.48);
    border-radius: 19px;
    color: var(--amp-dashboard-purple-dark);
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(29, 10, 68, 0.24);
    font-size: 22px;
    font-weight: 850;
}

.amp-driver-welcome-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.amp-greeting-label {
    color: rgba(255, 255, 255, 0.73);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.amp-driver-welcome-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-driver-role {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.77);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-online-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.amp-online-dot {
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: #4fe19a;
    box-shadow: 0 0 0 3px rgba(79, 225, 154, 0.15);
}

.amp-dashboard-content {
    position: relative;
    z-index: 3;
    padding: 0 16px 22px;
}

.amp-dashboard-content .amp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: -20px;
}

.amp-dashboard-content .amp-kpi-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 89px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    padding: 16px 14px;
    border: 1px solid rgba(101, 49, 185, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 10px 28px rgba(42, 30, 70, 0.09),
        0 2px 7px rgba(42, 30, 70, 0.05);
}

.amp-dashboard-content .amp-kpi-card::after {
    position: absolute;
    right: -23px;
    bottom: -30px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: rgba(101, 49, 185, 0.035);
    content: "";
}

.amp-dashboard-content .amp-kpi-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.amp-dashboard-content .amp-kpi-card span:first-child {
    color: var(--amp-dashboard-muted);
    font-size: 10px;
    font-weight: 650;
}

.amp-dashboard-content .amp-kpi-card strong {
    color: var(--amp-dashboard-text);
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.8px;
}

.amp-dashboard-content .amp-kpi-symbol {
    position: relative;
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 13px;
    font-size: 17px;
    font-weight: 800;
}

.amp-kpi-purple {
    color: #6934bd;
    background: #f0e7ff;
}

.amp-kpi-blue {
    color: #2078d8;
    background: #e7f3ff;
}

.amp-kpi-orange {
    color: #d77911;
    background: #fff1dd;
}

.amp-kpi-red {
    color: #d64d5d;
    background: #ffe9ec;
}

.amp-search-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 6px 7px 6px 14px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(42, 30, 70, 0.055);
}

.amp-search-strip:focus-within {
    border-color: rgba(101, 49, 185, 0.45);
    box-shadow:
        0 0 0 3px rgba(101, 49, 185, 0.08),
        0 8px 24px rgba(42, 30, 70, 0.07);
}

.amp-search-icon {
    color: var(--amp-dashboard-purple);
    font-size: 20px;
    font-weight: 700;
}

.amp-search-strip input {
    min-width: 0;
    height: 42px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--amp-dashboard-text);
    background: transparent;
    font-size: 12px;
}

.amp-search-strip input::placeholder {
    color: #aaa6b2;
}

.amp-filter-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 13px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple),
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 7px 15px rgba(101, 49, 185, 0.22);
    font-size: 16px;
}

.amp-list-section {
    margin-top: 20px;
}

.amp-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
    padding: 0 2px;
}

.amp-section-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--amp-dashboard-purple);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.amp-list-heading h2 {
    margin: 0;
    color: var(--amp-dashboard-text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.25px;
}

.amp-delivery-count {
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--amp-dashboard-purple);
    background: #ede5fa;
    font-size: 8px;
    font-weight: 750;
    white-space: nowrap;
}

.amp-delivery-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.amp-delivery-list-card {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 15px 13px 15px 16px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 19px;
    color: inherit;
    background: #ffffff;
    box-shadow:
        0 8px 22px rgba(42, 30, 70, 0.065),
        0 2px 5px rgba(42, 30, 70, 0.035);
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.amp-delivery-list-card::before {
    position: absolute;
    top: 17px;
    bottom: 17px;
    left: 0;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background:
        linear-gradient(
            180deg,
            var(--amp-dashboard-purple),
            var(--amp-dashboard-purple-light)
        );
    content: "";
}

.amp-delivery-list-card:active {
    transform: scale(0.985);
    border-color: rgba(101, 49, 185, 0.25);
    box-shadow: 0 4px 13px rgba(42, 30, 70, 0.08);
}

.amp-delivery-main {
    min-width: 0;
    flex: 1;
}

.amp-delivery-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.amp-booking-number {
    overflow: hidden;
    color: var(--amp-dashboard-purple);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-status-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    color: #2078d8;
    background: #e8f3ff;
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.amp-consignee-name {
    overflow: hidden;
    margin-top: 7px;
    color: var(--amp-dashboard-text);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-route-text {
    overflow: hidden;
    margin-top: 4px;
    color: var(--amp-dashboard-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-delivery-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    margin-top: 9px;
    color: #686374;
    font-size: 9px;
    white-space: nowrap;
}

.amp-delivery-summary strong {
    color: var(--amp-dashboard-text);
    font-weight: 800;
}

.amp-summary-divider {
    color: #d6d2dc;
}

.amp-card-chevron {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 10px;
    color: var(--amp-dashboard-purple);
    background: #f0e8fb;
    font-size: 21px;
    font-weight: 500;
}

.amp-dashboard-page .amp-empty-state {
    padding: 35px 20px;
    border: 1px dashed #d9d3e2;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.75);
}

.amp-bottom-nav {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    width: 100%;
    max-width: 480px;
    min-height: 64px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 auto;
    padding:
        7px
        7px
        calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(77, 64, 98, 0.08);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -9px 30px rgba(41, 31, 62, 0.10);
    backdrop-filter: blur(14px);
}

.amp-bottom-nav .amp-nav-item {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: 13px;
    color: #8a8492;
    background: transparent;
    text-decoration: none;
}

.amp-bottom-nav .amp-nav-item > span {
    font-size: 19px;
    line-height: 1;
}

.amp-bottom-nav .amp-nav-item small {
    font-size: 7px;
    font-weight: 650;
}

.amp-bottom-nav .amp-nav-active {
    color: var(--amp-dashboard-purple);
    background: #f1eafb;
}

.amp-bottom-nav .amp-nav-disabled {
    opacity: 0.48;
}

.amp-profile-panel {
    bottom: calc(76px + env(safe-area-inset-bottom));
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(37, 25, 61, 0.22);
}

@media (min-width: 481px) {
    .amp-dashboard-page {
        min-height: 860px;
    }

    .amp-dashboard-hero {
        border-radius: 0 0 28px 28px;
    }
}

@media (max-width: 350px) {
    .amp-dashboard-hero {
        padding-right: 14px;
        padding-left: 14px;
    }

    .amp-dashboard-content {
        padding-right: 12px;
        padding-left: 12px;
    }

    .amp-driver-welcome {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .amp-driver-avatar {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .amp-online-status {
        display: none;
    }

    .amp-dashboard-content .amp-kpi-card {
        min-height: 82px;
        padding: 13px 11px;
    }

    .amp-dashboard-content .amp-kpi-symbol {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 14px;
    }
}

/* END PHASE 2C.2 — DASHBOARD UI ALIGNMENT */

/* PHASE 2C.3 — DELIVERY CARD UX ALIGNMENT */

.amp-delivery-card-v2 {
    align-items: stretch;
    min-height: 168px;
    padding: 16px 13px 14px 17px;
}

.amp-delivery-card-v2::before {
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 0 6px 6px 0;
}

.amp-delivery-card-v2 .amp-delivery-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.amp-delivery-card-v2 .amp-delivery-title-row {
    align-items: flex-start;
}

.amp-delivery-card-v2 .amp-booking-number {
    padding-top: 2px;
    font-size: 12px;
    letter-spacing: 0.15px;
}

.amp-status-out-delivery {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    color: #176bb9;
    background: #e8f4ff;
    box-shadow: inset 0 0 0 1px rgba(32, 120, 216, 0.08);
}

.amp-status-dot {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #2b8ce4;
    box-shadow: 0 0 0 3px rgba(43, 140, 228, 0.12);
}

.amp-delivery-card-v2 .amp-consignee-name {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.3;
}

.amp-delivery-card-v2 .amp-route-text {
    position: relative;
    margin-top: 5px;
    padding-left: 13px;
    color: #777181;
    font-size: 9px;
    line-height: 1.4;
}

.amp-delivery-card-v2 .amp-route-text::before {
    position: absolute;
    top: 4px;
    left: 2px;
    width: 6px;
    height: 6px;
    border: 2px solid #8a5acb;
    border-radius: 50%;
    content: "";
}

.amp-delivery-card-metrics {
    display: grid;
    grid-template-columns:
        minmax(62px, 0.75fr)
        minmax(78px, 1fr)
        minmax(98px, 1.2fr);
    gap: 6px;
    margin-top: 12px;
}

.amp-delivery-metric {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 8px 7px;
    border: 1px solid #efebf3;
    border-radius: 11px;
    background: #faf9fc;
}

.amp-delivery-metric > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.amp-delivery-metric small {
    overflow: hidden;
    color: #96909e;
    font-size: 7px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-delivery-metric strong {
    overflow: hidden;
    color: #302b38;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-delivery-amount strong {
    color: #54308e;
}

.amp-metric-icon {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    place-items: center;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 850;
}

.amp-metric-package {
    color: #6839ad;
    background: #eee5fa;
}

.amp-metric-payment {
    color: #137a72;
    background: #e2f5f2;
}

.amp-metric-amount {
    color: #bf6b09;
    background: #fff0d9;
}

.amp-delivery-contact-preview {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    color: #706a79;
    background: #f7f5f9;
    font-size: 8px;
}

.amp-delivery-contact-preview span:not(.amp-contact-icon) {
    color: #96909e;
}

.amp-delivery-contact-preview strong {
    overflow: hidden;
    color: #494351;
    font-size: 8px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-contact-icon {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 7px;
    color: #6531b9;
    background: #ece4f8;
    font-size: 9px;
}

.amp-delivery-card-v2 .amp-card-chevron {
    align-self: center;
    margin-left: 1px;
}

@media (max-width: 370px) {
    .amp-delivery-card-v2 {
        padding-right: 10px;
        padding-left: 14px;
    }

    .amp-delivery-card-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .amp-delivery-metric {
        gap: 4px;
        padding: 7px 5px;
    }

    .amp-metric-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
        font-size: 8px;
    }

    .amp-delivery-metric small {
        font-size: 6px;
    }

    .amp-delivery-metric strong {
        font-size: 7px;
    }

    .amp-status-out-delivery {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 6px;
    }
}

@media (min-width: 420px) {
    .amp-delivery-card-v2 {
        min-height: 174px;
        padding: 17px 15px 15px 19px;
    }

    .amp-delivery-card-v2 .amp-consignee-name {
        font-size: 14px;
    }

    .amp-delivery-metric {
        padding: 9px 8px;
    }

    .amp-delivery-metric strong {
        font-size: 9px;
    }
}

/* END PHASE 2C.3 — DELIVERY CARD UX ALIGNMENT */

/* PHASE 2C.4 — DELIVERY DETAIL PAGE POLISH */

.amp-detail-page-v2 {
    padding-bottom: 104px;
    background:
        linear-gradient(
            180deg,
            #6940a9 0,
            #6940a9 72px,
            #f4f3f7 72px,
            #f4f3f7 100%
        );
}

.amp-detail-page-v2 .amp-detail-header {
    position: relative;
    z-index: 2;
    padding-bottom: 18px;
    background:
        linear-gradient(
            135deg,
            #7650b8 0%,
            #58348f 100%
        );
}

.amp-detail-page-v2 .amp-detail-header::after {
    position: absolute;
    right: -30px;
    bottom: -48px;
    width: 130px;
    height: 130px;
    border: 24px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.amp-detail-content-v2 {
    position: relative;
    z-index: 3;
    margin-top: -8px;
    padding: 0 14px 20px;
}

.amp-detail-booking-card-v2 {
    position: relative;
    overflow: hidden;
    min-height: 84px;
    padding: 17px 16px;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 12px 30px rgba(48, 29, 76, 0.12),
        0 2px 8px rgba(48, 29, 76, 0.05);
}

.amp-detail-booking-card-v2::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background:
        linear-gradient(
            180deg,
            #8351ca,
            #5c3098
        );
    content: "";
}

.amp-detail-booking-card-v2 .amp-detail-label {
    color: #9a94a1;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.amp-detail-booking-card-v2 .amp-detail-booking-number {
    display: block;
    margin-top: 5px;
    color: #2f2937;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
}

.amp-detail-status-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(42, 139, 226, 0.12);
    border-radius: 999px;
    color: #176cb7;
    background: #eaf5ff;
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.amp-detail-status-dot {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #258be3;
    box-shadow: 0 0 0 3px rgba(37, 139, 227, 0.13);
}

.amp-detail-payment-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: 9px;
    margin-top: 12px;
}

.amp-detail-payment-copy,
.amp-detail-payment-state {
    display: flex;
    min-width: 0;
    min-height: 76px;
    flex-direction: column;
    justify-content: center;
    padding: 13px;
    border-radius: 16px;
}

.amp-detail-payment-copy {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #6e3da8,
            #4f2d83
        );
    box-shadow: 0 9px 20px rgba(83, 45, 134, 0.2);
}

.amp-detail-payment-state {
    border: 1px solid #ece8f0;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(45, 35, 58, 0.05);
}

.amp-detail-payment-copy span,
.amp-detail-payment-state span {
    margin-bottom: 5px;
    font-size: 8px;
    font-weight: 650;
}

.amp-detail-payment-copy span {
    color: rgba(255, 255, 255, 0.72);
}

.amp-detail-payment-state span {
    color: #98919d;
}

.amp-detail-payment-copy strong {
    overflow: hidden;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-detail-payment-copy small {
    margin-left: 3px;
    font-size: 9px;
    font-weight: 750;
}

.amp-detail-payment-state strong {
    overflow: hidden;
    color: #42394b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.amp-detail-information-card-v2 {
    overflow: hidden;
    margin-top: 12px;
    padding: 4px 14px;
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(48, 38, 58, 0.07);
}

.amp-detail-information-card-v2 .amp-detail-row {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(78px, 0.72fr) minmax(0, 1.28fr);
    min-height: 58px;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    border-bottom: 1px solid #f0edf2;
}

.amp-detail-information-card-v2 .amp-detail-row:last-child {
    border-bottom: 0;
}

.amp-detail-information-card-v2 .amp-detail-row-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 11px;
    color: #7041ad;
    background: #f0e8f8;
}

.amp-detail-information-card-v2 .amp-detail-row-icon svg {
    width: 16px;
    height: 16px;
}

.amp-detail-information-card-v2 .amp-detail-row-label {
    color: #9a949e;
    font-size: 8px;
    font-weight: 650;
    line-height: 1.3;
}

.amp-detail-information-card-v2 .amp-detail-row > strong {
    min-width: 0;
    color: #3d3743;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.amp-detail-contact-row {
    grid-template-columns:
        38px
        minmax(70px, 0.65fr)
        minmax(0, 1fr)
        auto !important;
}

.amp-detail-call-button {
    display: inline-flex;
    min-width: 47px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded0ee;
    border-radius: 9px;
    color: #63349d;
    background: #f4edf9;
    font-size: 7px;
    font-weight: 850;
    text-decoration: none;
}

.amp-detail-call-button:active {
    transform: scale(0.97);
    background: #eadcf5;
}

.amp-detail-action-bar-v2 {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    transform: translateX(-50%);
    display: grid;
    max-width: 480px;
    grid-template-columns: minmax(0, 1.65fr) minmax(88px, 0.65fr);
    gap: 8px;
    margin: 0 auto;
    padding:
        10px
        13px
        calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(79, 56, 99, 0.08);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 25px rgba(43, 31, 53, 0.11);
    backdrop-filter: blur(12px);
}

.amp-detail-action-bar-v2 .amp-detail-action {
    min-height: 55px;
    border-radius: 14px;
}

.amp-detail-action-bar-v2 .amp-action-delivered {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 14px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7141ad,
            #4d287f
        );
    box-shadow: 0 8px 18px rgba(87, 43, 139, 0.23);
}

.amp-action-main-icon {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.17);
    font-size: 16px;
    font-weight: 900;
}

.amp-action-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.amp-action-copy strong {
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.15px;
}

.amp-action-copy small {
    overflow: hidden;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 6px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-detail-action-bar-v2 .amp-action-refused {
    color: #9c7176;
    background: #f8edef;
    box-shadow: none;
    opacity: 0.68;
}

@media (max-width: 360px) {
    .amp-detail-content-v2 {
        padding-right: 10px;
        padding-left: 10px;
    }

    .amp-detail-payment-summary {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 6px;
    }

    .amp-detail-payment-copy,
    .amp-detail-payment-state {
        padding: 10px;
    }

    .amp-detail-payment-copy strong {
        font-size: 14px;
    }

    .amp-detail-information-card-v2 {
        padding-right: 10px;
        padding-left: 10px;
    }

    .amp-detail-information-card-v2 .amp-detail-row {
        grid-template-columns: 34px 70px minmax(0, 1fr);
        gap: 5px;
    }

    .amp-detail-contact-row {
        grid-template-columns:
            34px
            62px
            minmax(0, 1fr)
            auto !important;
    }

    .amp-detail-call-button {
        min-width: 42px;
    }

    .amp-detail-action-bar-v2 {
        grid-template-columns: minmax(0, 1.55fr) 78px;
        padding-right: 9px;
        padding-left: 9px;
    }
}

@media (min-width: 420px) {
    .amp-detail-content-v2 {
        padding-right: 18px;
        padding-left: 18px;
    }

    .amp-detail-booking-card-v2 {
        padding: 19px 18px;
    }

    .amp-detail-information-card-v2 {
        padding-right: 16px;
        padding-left: 16px;
    }

    .amp-detail-information-card-v2 .amp-detail-row {
        min-height: 62px;
    }

    .amp-detail-information-card-v2 .amp-detail-row > strong {
        font-size: 10px;
    }
}

/* END PHASE 2C.4 — DELIVERY DETAIL PAGE POLISH */

/* PHASE 2C.7 — DRIVER PROFILE WORKSPACE */

.amp-driver-workspace {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 0;
    display: block;
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 82px);
    margin: 0 auto;
    padding:
        10px
        17px
        calc(18px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 27px 27px 0 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #fbfafd 100%
        );
    box-shadow:
        0 -20px 55px rgba(35, 21, 62, 0.24),
        0 -4px 15px rgba(35, 21, 62, 0.08);
    text-align: left;
    animation: amp-profile-workspace-open 0.22s ease-out;
}

.amp-driver-workspace[hidden] {
    display: none;
}

@keyframes amp-profile-workspace-open {
    from {
        transform: translateY(22px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.amp-workspace-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #dcd7e4;
}

.amp-workspace-header {
    display: grid;
    grid-template-columns: 57px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 18px;
    border-bottom: 1px solid var(--amp-dashboard-border);
}

.amp-workspace-avatar {
    display: grid;
    width: 57px;
    height: 57px;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple-dark),
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 9px 20px rgba(101, 49, 185, 0.24);
    font-size: 21px;
    font-weight: 850;
}

.amp-workspace-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.amp-workspace-eyebrow {
    color: var(--amp-dashboard-purple);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1px;
}

.amp-workspace-identity strong {
    overflow: hidden;
    color: var(--amp-dashboard-text);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-workspace-identity > span:last-child {
    overflow: hidden;
    color: var(--amp-dashboard-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-workspace-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 999px;
    color: #12814f;
    background: #e6f8ef;
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.amp-workspace-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #28b875;
    box-shadow: 0 0 0 3px rgba(40, 184, 117, 0.13);
}

.amp-workspace-section {
    margin-top: 17px;
}

.amp-workspace-section-heading {
    margin-bottom: 9px;
    color: var(--amp-dashboard-purple);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.9px;
}

.amp-workspace-info-list {
    overflow: hidden;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 6px 19px rgba(42, 30, 70, 0.045);
}

.amp-workspace-info-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid #f0edf4;
}

.amp-workspace-info-row:last-child {
    border-bottom: 0;
}

.amp-workspace-info-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: var(--amp-dashboard-purple);
    background: #f0e9fb;
    font-size: 13px;
    font-weight: 800;
}

.amp-workspace-info-row > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.amp-workspace-info-row small {
    color: var(--amp-dashboard-muted);
    font-size: 7px;
}

.amp-workspace-info-row strong {
    overflow: hidden;
    color: var(--amp-dashboard-text);
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-workspace-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.amp-workspace-metrics article {
    display: flex;
    min-height: 67px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(42, 30, 70, 0.045);
}

.amp-workspace-metrics small {
    color: var(--amp-dashboard-muted);
    font-size: 7px;
    font-weight: 700;
}

.amp-workspace-metrics strong {
    color: var(--amp-dashboard-purple);
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.amp-workspace-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 17px;
    background: #ffffff;
}

.amp-workspace-app-grid > div {
    display: flex;
    min-width: 0;
    min-height: 54px;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 11px 13px;
    border-right: 1px solid #f0edf4;
    border-bottom: 1px solid #f0edf4;
}

.amp-workspace-app-grid > div:nth-child(2n) {
    border-right: 0;
}

.amp-workspace-app-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.amp-workspace-app-grid small {
    color: var(--amp-dashboard-muted);
    font-size: 7px;
}

.amp-workspace-app-grid strong {
    overflow: hidden;
    color: var(--amp-dashboard-text);
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-workspace-status-ready {
    color: #12814f !important;
}

.amp-workspace-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 18px;
}

.amp-workspace-dashboard,
.amp-driver-workspace .amp-profile-logout {
    display: grid;
    min-height: 43px;
    place-items: center;
    margin: 0;
    padding: 10px 13px;
    border-radius: 13px;
    text-align: center;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
}

.amp-workspace-dashboard {
    border: 1px solid rgba(101, 49, 185, 0.22);
    color: var(--amp-dashboard-purple);
    background: #f1eafb;
}

.amp-driver-workspace .amp-profile-logout {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple-dark),
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 7px 17px rgba(101, 49, 185, 0.20);
}

@media (max-width: 350px) {
    .amp-driver-workspace {
        padding-right: 13px;
        padding-left: 13px;
    }

    .amp-workspace-header {
        grid-template-columns: 51px minmax(0, 1fr);
    }

    .amp-workspace-avatar {
        width: 51px;
        height: 51px;
        border-radius: 16px;
    }

    .amp-workspace-online {
        display: none;
    }
}

/* END PHASE 2C.7 — DRIVER PROFILE WORKSPACE */

/* PHASE 2C.8 — COMPLETED DELIVERIES */

.amp-history-page,
.amp-history-detail-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    background: #f5f4f8;
}

.amp-history-hero {
    min-height: 190px;
    padding:
        calc(17px + env(safe-area-inset-top))
        18px
        28px;
    border-radius: 0 0 28px 28px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(255, 255, 255, 0.20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple-dark),
            var(--amp-dashboard-purple) 55%,
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 15px 34px rgba(78, 39, 143, 0.24);
}

.amp-history-header-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
}

.amp-history-back {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    text-decoration: none;
    font-size: 28px;
    line-height: 1;
}

.amp-history-header-row > div:nth-child(2) {
    min-width: 0;
}

.amp-history-header-row span,
.amp-history-detail-header > div span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.9px;
}

.amp-history-header-row h1,
.amp-history-detail-header h1 {
    overflow: hidden;
    margin: 3px 0 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-total {
    display: flex;
    min-width: 48px;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
}

.amp-history-total strong {
    font-size: 16px;
    font-weight: 850;
}

.amp-history-total small {
    color: rgba(255, 255, 255, 0.74);
    font-size: 6px;
}

.amp-history-driver {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 25px;
}

.amp-history-driver-avatar {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-radius: 14px;
    color: var(--amp-dashboard-purple-dark);
    background: #ffffff;
    font-weight: 850;
}

.amp-history-driver > div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.amp-history-driver small {
    color: rgba(255, 255, 255, 0.70);
    font-size: 7px;
}

.amp-history-driver strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-content {
    position: relative;
    z-index: 2;
    padding: 0 16px 22px;
}

.amp-history-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: -20px;
}

.amp-history-kpis article {
    display: flex;
    min-width: 0;
    min-height: 80px;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 9px 25px rgba(42, 30, 70, 0.08);
}

.amp-history-kpi-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 850;
}

.amp-history-green {
    color: #16855a;
    background: #e5f8ef;
}

.amp-history-red {
    color: #cf4354;
    background: #ffe9ec;
}

.amp-history-orange {
    color: #d77911;
    background: #fff1dd;
}

.amp-history-kpis article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.amp-history-kpis small {
    color: var(--amp-dashboard-muted);
    font-size: 6px;
    font-weight: 700;
}

.amp-history-kpis strong {
    color: var(--amp-dashboard-text);
    font-size: 18px;
    font-weight: 850;
}

.amp-history-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 17px;
    padding: 6px 14px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(42, 30, 70, 0.05);
}

.amp-history-search > span {
    color: var(--amp-dashboard-purple);
    font-size: 19px;
}

.amp-history-search input {
    min-width: 0;
    height: 40px;
    border: 0;
    outline: 0;
    color: var(--amp-dashboard-text);
    background: transparent;
    font-size: 10px;
}

.amp-history-filters {
    display: flex;
    gap: 7px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.amp-history-filters::-webkit-scrollbar {
    display: none;
}

.amp-history-filter {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 999px;
    color: var(--amp-dashboard-muted);
    background: #ffffff;
    text-decoration: none;
    font-size: 7px;
    font-weight: 750;
}

.amp-history-filter-active {
    border-color: transparent;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple),
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 6px 14px rgba(101, 49, 185, 0.20);
}

.amp-history-list-section {
    margin-top: 18px;
}

.amp-history-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.amp-history-list-heading span {
    color: var(--amp-dashboard-purple);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.9px;
}

.amp-history-list-heading h2 {
    margin: 3px 0 0;
    color: var(--amp-dashboard-text);
    font-size: 15px;
    font-weight: 850;
}

.amp-history-list-heading > small {
    color: var(--amp-dashboard-muted);
    font-size: 7px;
}

.amp-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.amp-history-card {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 14px 12px 13px 16px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 18px;
    color: inherit;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(42, 30, 70, 0.06);
    text-decoration: none;
}

.amp-history-card[hidden] {
    display: none;
}

.amp-history-card::before {
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 0;
    width: 4px;
    border-radius: 0 5px 5px 0;
    content: "";
}

.amp-history-card-delivered::before {
    background: #31b779;
}

.amp-history-card-refused::before {
    background: #d84b5c;
}

.amp-history-card-returned::before {
    background: #df8b1c;
}

.amp-history-card-main {
    min-width: 0;
    flex: 1;
}

.amp-history-card-title {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.amp-history-card-title > strong {
    overflow: hidden;
    color: var(--amp-dashboard-purple);
    font-size: 10px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-status {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 6px;
    font-weight: 800;
    white-space: nowrap;
}

.amp-history-status-delivered {
    color: #16855a;
    background: #e5f8ef;
}

.amp-history-status-refused {
    color: #cf4354;
    background: #ffe9ec;
}

.amp-history-status-returned {
    color: #d77911;
    background: #fff1dd;
}

.amp-history-card h3 {
    overflow: hidden;
    margin: 7px 0 0;
    color: var(--amp-dashboard-text);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-destination {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    margin-top: 4px;
    color: var(--amp-dashboard-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-card-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) 0.65fr 1fr;
    gap: 7px;
    margin-top: 11px;
    padding: 9px;
    border-radius: 11px;
    background: #f8f7fa;
}

.amp-history-card-meta > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.amp-history-card-meta small {
    color: var(--amp-dashboard-muted);
    font-size: 6px;
}

.amp-history-card-meta strong {
    overflow: hidden;
    color: var(--amp-dashboard-text);
    font-size: 7px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: var(--amp-dashboard-muted);
    font-size: 7px;
}

.amp-history-payment strong {
    overflow: hidden;
    color: var(--amp-dashboard-text);
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-chevron {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 9px;
    color: var(--amp-dashboard-purple);
    background: #f0e8fb;
    font-size: 20px;
}

.amp-history-empty {
    margin-top: 10px;
}

.amp-history-detail-page {
    padding-bottom: 20px;
}

.amp-history-detail-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding:
        calc(17px + env(safe-area-inset-top))
        18px
        29px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple-dark),
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 12px 30px rgba(78, 39, 143, 0.22);
}

.amp-history-detail-header .amp-history-status {
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.amp-history-detail-content {
    padding: 16px;
}

.amp-history-detail-summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(42, 30, 70, 0.06);
}

.amp-history-detail-check {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    color: #16855a;
    background: #e5f8ef;
    font-size: 22px;
    font-weight: 850;
}

.amp-history-detail-summary > div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.amp-history-detail-summary small {
    color: var(--amp-dashboard-purple);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
}

.amp-history-detail-summary strong {
    color: var(--amp-dashboard-text);
    font-size: 11px;
}

.amp-history-detail-card {
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--amp-dashboard-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(42, 30, 70, 0.05);
}

.amp-history-detail-heading {
    padding: 12px 14px 9px;
    border-bottom: 1px solid #f0edf4;
    color: var(--amp-dashboard-purple);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.9px;
}

.amp-history-detail-row {
    display: grid;
    grid-template-columns: minmax(95px, 0.8fr) minmax(0, 1.4fr);
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid #f3f1f5;
}

.amp-history-detail-row:last-child {
    border-bottom: 0;
}

.amp-history-detail-row small {
    color: var(--amp-dashboard-muted);
    font-size: 8px;
}

.amp-history-detail-row strong {
    overflow-wrap: anywhere;
    color: var(--amp-dashboard-text);
    font-size: 9px;
    font-weight: 750;
    text-align: right;
}

.amp-history-detail-return {
    display: grid;
    min-height: 45px;
    margin-top: 15px;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--amp-dashboard-purple-dark),
            var(--amp-dashboard-purple-light)
        );
    box-shadow: 0 7px 17px rgba(101, 49, 185, 0.20);
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
}

@media (max-width: 350px) {
    .amp-history-content,
    .amp-history-detail-content {
        padding-right: 12px;
        padding-left: 12px;
    }

    .amp-history-kpis article {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .amp-history-card-meta {
        grid-template-columns: 1fr 0.55fr;
    }

    .amp-history-card-meta > div:last-child {
        grid-column: 1 / -1;
    }
}

/* END PHASE 2C.8 — COMPLETED DELIVERIES */



/* PHASE 3.1A — PREMIUM DRIVER PROFILE PAGE */

.amp-profile-page {
    min-height: 100vh;
    padding-bottom: 104px;
    background:
        radial-gradient(circle at top right, rgba(128, 88, 255, 0.11), transparent 35%),
        #f6f4fb;
}

.amp-profile-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 20px 34px;
    color: #ffffff;
    border-radius: 0 0 34px 34px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.22), transparent 29%),
        linear-gradient(145deg, #43106d 0%, #6827a8 48%, #8f4bd7 100%);
    box-shadow: 0 18px 42px rgba(74, 24, 116, 0.28);
}

.amp-profile-top-row {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 12px;
}

.amp-profile-title {
    text-align: center;
}

.amp-profile-title small {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    opacity: 0.72;
}

.amp-profile-title h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
}

.amp-profile-back,
.amp-profile-header-logout {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.amp-profile-back span {
    font-size: 31px;
    line-height: 1;
    transform: translateY(-1px);
}

.amp-profile-header-logout {
    font-size: 20px;
}

.amp-profile-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 27px;
}

.amp-profile-photo-wrap {
    position: relative;
    flex: 0 0 auto;
}

.amp-profile-photo {
    display: flex;
    width: 92px;
    height: 92px;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    color: #5d258f;
    font-size: 28px;
    font-weight: 900;
    border: 4px solid rgba(255, 255, 255, 0.92);
    border-radius: 30px;
    background: #f4eaff;
    box-shadow: 0 14px 30px rgba(34, 8, 55, 0.28);
}

.amp-profile-online-dot {
    position: absolute;
    right: -2px;
    bottom: 5px;
    width: 18px;
    height: 18px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #38d98b;
}

.amp-profile-identity-copy {
    min-width: 0;
}

.amp-profile-identity-copy h2 {
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.18;
    text-overflow: ellipsis;
}

.amp-profile-identity-copy p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.8;
}

.amp-profile-employee-pill {
    display: inline-flex;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 10px;
    font-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.amp-profile-employee-pill span {
    opacity: 0.7;
}

.amp-profile-content {
    width: min(100%, 650px);
    margin: 0 auto;
    padding: 20px 16px 26px;
}

.amp-profile-progress-card,
.amp-profile-info-card,
.amp-profile-stat-card,
.amp-profile-action-button {
    border: 1px solid rgba(91, 47, 135, 0.08);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(55, 30, 80, 0.08);
}

.amp-profile-progress-card {
    padding: 18px;
    border-radius: 23px;
}

.amp-profile-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.amp-profile-progress-heading small {
    display: block;
    margin-bottom: 3px;
    color: #8e7d9c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
}

.amp-profile-progress-heading strong {
    color: #4b216f;
    font-size: 25px;
    font-weight: 900;
}

.amp-profile-progress-heading > span {
    color: #76518f;
    font-size: 13px;
    font-weight: 800;
}

.amp-profile-progress-track {
    height: 9px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 99px;
    background: #ece5f2;
}

.amp-profile-progress-value {
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, #6c2aa5, #a55ce2);
}

.amp-profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.amp-profile-stat-card {
    padding: 15px 8px;
    text-align: center;
    border-radius: 20px;
}

.amp-profile-stat-icon {
    display: flex;
    width: 34px;
    height: 34px;
    margin: 0 auto 7px;
    align-items: center;
    justify-content: center;
    color: #67309a;
    border-radius: 12px;
    background: #f1e8f8;
}

.amp-profile-stat-card strong {
    display: block;
    color: #2f2038;
    font-size: 21px;
    font-weight: 900;
}

.amp-profile-stat-card small {
    color: #8a7b94;
    font-size: 10px;
    font-weight: 700;
}

.amp-profile-stat-success .amp-profile-stat-icon {
    color: #168c5b;
    background: #e5f8ef;
}

.amp-profile-stat-danger .amp-profile-stat-icon {
    color: #c14355;
    background: #ffe9ed;
}

.amp-profile-stat-warning .amp-profile-stat-icon {
    color: #ca7a11;
    background: #fff2dd;
}

.amp-profile-section {
    margin-top: 22px;
}

.amp-profile-section-title {
    margin: 0 4px 9px;
    color: #705d7c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.amp-profile-info-card {
    overflow: hidden;
    border-radius: 24px;
}

.amp-profile-info-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 15px 17px;
    border-bottom: 1px solid #f0ebf3;
}

.amp-profile-info-row:last-child {
    border-bottom: 0;
}

.amp-profile-info-icon {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: #692e99;
    font-size: 15px;
    font-weight: 900;
    border-radius: 13px;
    background: #f2e9f9;
}

.amp-profile-info-row small {
    display: block;
    margin-bottom: 3px;
    color: #95879e;
    font-size: 10px;
    font-weight: 700;
}

.amp-profile-info-row strong {
    display: block;
    color: #392742;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.amp-profile-actions {
    display: grid;
    gap: 11px;
    margin-top: 23px;
}

.amp-profile-action-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px;
    color: #54237c;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    border-radius: 19px;
}

.amp-profile-action-button strong {
    font-size: 23px;
}

.amp-profile-action-logout {
    color: #be3f52;
    border-color: rgba(190, 63, 82, 0.12);
    background: #fff8f9;
}

@media (max-width: 440px) {
    .amp-profile-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amp-profile-identity {
        align-items: flex-start;
    }

    .amp-profile-photo {
        width: 82px;
        height: 82px;
        border-radius: 27px;
    }

    .amp-profile-identity-copy h2 {
        font-size: 19px;
    }
}

/* END PHASE 3.1A — PREMIUM DRIVER PROFILE PAGE */

/* PHASE 2F.1 — CDS DASHBOARD REDESIGN */

.amp-cds-dashboard {
    --amp-cds-purple: #6327be;
    --amp-cds-purple-dark: #321477;
    --amp-cds-purple-soft: #8c5ad9;
    --amp-cds-orange: #d97706;
    --amp-cds-green: #169447;
    --amp-cds-red: #d9465f;
    --amp-cds-blue: #2378d4;
    background: #f7f7fb;
}

.amp-cds-hero {
    min-height: 270px;
    padding-bottom: 34px;
    background:
        radial-gradient(
            circle at 85% 95%,
            rgba(255, 255, 255, 0.13) 0 24%,
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #341477 0%,
            #6427be 52%,
            #8d60dc 100%
        );
}

.amp-cds-driver-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 155px;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
}

.amp-cds-driver-row .amp-driver-welcome {
    min-width: 0;
    margin: 0;
}

.amp-cds-driver-row .amp-driver-welcome-copy strong {
    display: block;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-avatar-online-dot {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 15px;
    height: 15px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #20aa54;
}

.amp-active-route-card {
    display: flex;
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.amp-active-route-card > span {
    color: #77f19a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.amp-active-route-card > strong {
    overflow: hidden;
    margin-top: 5px;
    font-size: 22px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-active-route-card > small {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.83);
    font-size: 10px;
}

.amp-cds-dashboard .amp-dashboard-content {
    position: relative;
    z-index: 4;
    margin-top: -24px;
    padding-top: 0;
}

.amp-route-progress-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 22px;
    border: 1px solid #ece8f3;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 13px 35px rgba(45, 32, 71, 0.09);
}

.amp-route-ring {
    --amp-progress: 0;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--amp-cds-purple) calc(var(--amp-progress) * 1%),
            #eee8f8 0
        );
}

.amp-route-ring::before {
    position: absolute;
    width: 89px;
    height: 89px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.amp-route-ring-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amp-route-ring-inner strong {
    color: var(--amp-cds-purple);
    font-size: 28px;
    line-height: 1;
}

.amp-route-ring-inner span {
    margin-top: 7px;
    color: #5f5a68;
    font-size: 10px;
}

.amp-route-progress-content {
    min-width: 0;
}

.amp-route-progress-content h2 {
    margin: 0;
    color: #211a3c;
    font-size: 17px;
}

.amp-route-progress-track {
    overflow: hidden;
    height: 8px;
    margin-top: 20px;
    border-radius: 999px;
    background: #eee8f8;
}

.amp-route-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #5520b2,
        #7a36d3
    );
}

.amp-route-progress-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 17px;
}

.amp-route-progress-summary > div {
    display: flex;
    min-width: 0;
    gap: 7px;
    align-items: center;
    padding: 0 8px;
    border-right: 1px solid #eeeaf3;
}

.amp-route-progress-summary > div:first-child {
    padding-left: 0;
}

.amp-route-progress-summary > div:last-child {
    padding-right: 0;
    border-right: 0;
}

.amp-summary-icon {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.amp-route-progress-summary strong,
.amp-route-progress-summary small {
    display: block;
}

.amp-route-progress-summary strong {
    font-size: 17px;
    line-height: 1;
}

.amp-route-progress-summary small {
    overflow: hidden;
    margin-top: 4px;
    color: #6f6979;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-route-summary-delivered .amp-summary-icon {
    background: #e3f6e9;
    color: var(--amp-cds-green);
}

.amp-route-summary-delivered strong {
    color: var(--amp-cds-green);
}

.amp-route-summary-pending .amp-summary-icon {
    background: #fff0d9;
    color: var(--amp-cds-orange);
}

.amp-route-summary-pending strong {
    color: var(--amp-cds-orange);
}

.amp-route-summary-assigned .amp-summary-icon {
    background: #efe6fb;
    color: var(--amp-cds-purple);
}

.amp-route-summary-assigned strong {
    color: var(--amp-cds-purple);
}

.amp-cds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.amp-cds-kpi-card {
    display: flex;
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    border: 1px solid #ece9f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 9px 25px rgba(43, 34, 59, 0.06);
    text-align: center;
}

.amp-cds-kpi-icon {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
}

.amp-cds-kpi-card small {
    overflow: hidden;
    width: 100%;
    margin-top: 7px;
    color: #302a3b;
    font-size: 9px;
    text-overflow: ellipsis;
}

.amp-cds-kpi-card strong {
    margin-top: 6px;
    font-size: 21px;
    line-height: 1;
}

.amp-kpi-assigned .amp-cds-kpi-icon {
    background: #efe6fb;
    color: var(--amp-cds-purple);
}

.amp-kpi-assigned strong {
    color: var(--amp-cds-purple);
}

.amp-kpi-pending .amp-cds-kpi-icon {
    background: #fff0da;
    color: var(--amp-cds-orange);
}

.amp-kpi-pending strong {
    color: var(--amp-cds-orange);
}

.amp-kpi-delivered .amp-cds-kpi-icon {
    background: #e4f6e9;
    color: var(--amp-cds-green);
}

.amp-kpi-delivered strong {
    color: var(--amp-cds-green);
}

.amp-kpi-refused .amp-cds-kpi-icon {
    background: #fde6eb;
    color: var(--amp-cds-red);
}

.amp-kpi-refused strong {
    color: var(--amp-cds-red);
}

.amp-kpi-returned .amp-cds-kpi-icon {
    background: #e5f1fd;
    color: var(--amp-cds-blue);
}

.amp-kpi-returned strong {
    color: var(--amp-cds-blue);
}

.amp-other-routes-note {
    display: flex;
    gap: 5px;
    flex-direction: column;
    margin-top: 12px;
    padding: 12px 15px;
    border: 1px solid #e6daf8;
    border-radius: 15px;
    background: #f3ecfc;
    color: #5525a2;
}

.amp-other-routes-note strong {
    font-size: 11px;
}

.amp-other-routes-note span {
    color: #736982;
    font-size: 9px;
}

.amp-cds-dashboard .amp-search-section {
    margin-top: 16px;
}

.amp-cds-dashboard .amp-search-row {
    border-radius: 20px;
}

.amp-cds-dashboard .amp-search-filter-button {
    border-radius: 15px;
}

.amp-queue-cds-name {
    display: block;
    margin-top: 4px;
    color: #756e80;
    font-size: 9px;
    font-weight: 700;
}

.amp-no-active-route {
    padding: 28px 20px;
    border: 1px solid #e7e2ed;
    border-radius: 22px;
    background: #ffffff;
    text-align: center;
}

.amp-no-active-route h2 {
    margin: 10px 0 5px;
    color: #282133;
    font-size: 18px;
}

.amp-no-active-route p {
    margin: 0;
    color: #77717e;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 410px) {
    .amp-cds-driver-row {
        grid-template-columns: minmax(0, 1fr) 130px;
        gap: 8px;
    }

    .amp-active-route-card {
        min-height: 100px;
        padding: 12px;
    }

    .amp-active-route-card > strong {
        font-size: 18px;
    }

    .amp-route-progress-card {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .amp-route-ring {
        width: 92px;
        height: 92px;
    }

    .amp-route-ring::before {
        width: 73px;
        height: 73px;
    }

    .amp-route-ring-inner strong {
        font-size: 23px;
    }

    .amp-route-progress-summary > div {
        padding: 0 4px;
    }

    .amp-summary-icon {
        display: none;
    }

    .amp-cds-kpi-grid {
        gap: 5px;
    }

    .amp-cds-kpi-card {
        min-height: 96px;
        padding: 8px 2px;
    }

    .amp-cds-kpi-icon {
        width: 30px;
        height: 30px;
    }

    .amp-cds-kpi-card small {
        font-size: 7px;
    }

    .amp-cds-kpi-card strong {
        font-size: 18px;
    }
}

@media (max-width: 350px) {
    .amp-cds-driver-row {
        grid-template-columns: 1fr;
    }

    .amp-active-route-card {
        min-height: auto;
    }

    .amp-route-progress-card {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .amp-route-progress-content {
        width: 100%;
    }

    .amp-cds-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* END PHASE 2F.1 — CDS DASHBOARD REDESIGN */

/* ================================================================
   DELIVERED BUTTON TEXT ALIGNMENT HOTFIX
   ================================================================ */

.amp-detail-action-bar-v2 .amp-action-delivered {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.amp-detail-action-bar-v2 .amp-action-delivered .amp-action-main-icon {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
}

.amp-detail-action-bar-v2 .amp-action-delivered .amp-action-copy {
    display: block;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
}

.amp-detail-action-bar-v2 .amp-action-delivered .amp-action-copy strong {
    display: block;
    overflow: visible;
    width: auto;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* PHASE 2F.3 — MOBILE DELIVERY RESULT */

.amp-detail-action-bar-v2 .amp-action-refused {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background: #d94a5e;
    box-shadow: 0 8px 18px rgba(217, 74, 94, 0.24);
    opacity: 1;
}

.amp-detail-action-bar-v2 .amp-action-refused:hover,
.amp-detail-action-bar-v2 .amp-action-refused:focus {
    color: #ffffff;
    background: #c93d51;
    text-decoration: none;
}

.amp-result-page {
    min-height: 100vh;
    padding-bottom: 88px;
    background: #f7f9fd;
}

.amp-result-content {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 18px 16px 30px;
}

.amp-result-booking-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid #e2e7f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(23, 47, 90, 0.06);
}

.amp-result-booking-icon {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(145deg, #2d7de8, #0756c7);
}

.amp-result-booking-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amp-result-booking-main {
    min-width: 0;
}

.amp-result-booking-main small,
.amp-result-booking-info small {
    display: block;
    margin-bottom: 4px;
    color: #657086;
    font-size: 12px;
    font-weight: 600;
}

.amp-result-booking-main strong {
    display: block;
    overflow: hidden;
    color: #0a45a5;
    font-size: 19px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-result-booking-info {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
    padding-top: 2px;
}

.amp-result-booking-info strong {
    display: block;
    color: #172033;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.45;
}

.amp-result-heading {
    margin: 24px 2px 18px;
}

.amp-result-heading h2 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 19px;
    font-weight: 850;
}

.amp-result-heading p {
    margin: 0;
    color: #657086;
    font-size: 14px;
    line-height: 1.5;
}

.amp-result-option {
    overflow: hidden;
    margin-bottom: 15px;
    border: 1.5px solid;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(20, 39, 75, 0.05);
}

.amp-result-option-refused {
    border-color: #ff536d;
}

.amp-result-option-attempted {
    border-color: #ffa62b;
}

.amp-result-option summary {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    gap: 14px;
    min-height: 96px;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.amp-result-option summary::-webkit-details-marker {
    display: none;
}

.amp-result-option-icon {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #ffffff;
    font-size: 29px;
    font-weight: 700;
}

.amp-result-option-refused .amp-result-option-icon {
    background: linear-gradient(145deg, #ff5c75, #ee294a);
}

.amp-result-option-attempted .amp-result-option-icon {
    background: linear-gradient(145deg, #ffb844, #ff9418);
}

.amp-result-option-copy {
    min-width: 0;
}

.amp-result-option-copy strong {
    display: block;
    margin-bottom: 5px;
    color: #172033;
    font-size: 17px;
    font-weight: 850;
}

.amp-result-option-copy small {
    display: block;
    color: #465167;
    font-size: 13px;
    line-height: 1.45;
}

.amp-result-chevron {
    color: #172033;
    font-size: 31px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.amp-result-option[open] .amp-result-chevron {
    transform: rotate(90deg);
}

.amp-result-form {
    padding: 18px 16px 20px;
    border-top: 1px solid #edf0f5;
    background: #ffffff;
}

.amp-result-field {
    margin-bottom: 18px;
}

.amp-result-field label {
    display: block;
    margin-bottom: 8px;
    color: #182135;
    font-size: 14px;
    font-weight: 800;
}

.amp-result-field label span {
    color: #e73d58;
}

.amp-result-field select,
.amp-result-field textarea {
    width: 100%;
    border: 1px solid #cfd7e5;
    border-radius: 10px;
    outline: none;
    color: #192236;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.amp-result-field select {
    min-height: 50px;
    padding: 0 13px;
}

.amp-result-field textarea {
    min-height: 132px;
    padding: 13px;
    line-height: 1.5;
    resize: vertical;
}

.amp-result-field select:focus,
.amp-result-field textarea:focus {
    border-color: #1768d5;
    box-shadow: 0 0 0 3px rgba(23, 104, 213, 0.12);
}

.amp-result-helper {
    display: block;
    margin-top: 6px;
    color: #8791a4;
    font-size: 11px;
    text-align: right;
}

.amp-result-submit {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(90deg, #0757c9, #0b69df);
    box-shadow: 0 7px 16px rgba(11, 105, 223, 0.22);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.amp-result-submit:hover,
.amp-result-submit:focus {
    background: linear-gradient(90deg, #064cae, #095bc5);
}

@media (max-width: 360px) {
    .amp-result-content {
        padding-right: 11px;
        padding-left: 11px;
    }

    .amp-result-option summary {
        grid-template-columns: 48px minmax(0, 1fr) 18px;
        gap: 10px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .amp-result-option-icon {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    .amp-result-option-copy strong {
        font-size: 15px;
    }

    .amp-result-option-copy small {
        font-size: 12px;
    }
}

/* END PHASE 2F.3 — MOBILE DELIVERY RESULT */

/* PHASE 2F.3.1 — REFUSED BUTTON ALIGNMENT HOTFIX */

.amp-detail-action-bar-v2 .amp-action-refused {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background: #dc4b60 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.amp-detail-action-bar-v2 .amp-action-refused .amp-action-main-icon {
    display: flex !important;
    width: 33px !important;
    height: 33px !important;
    flex: 0 0 33px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.amp-detail-action-bar-v2 .amp-action-refused .amp-action-copy {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
}

.amp-detail-action-bar-v2 .amp-action-refused .amp-action-copy strong {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

@media (max-width: 360px) {
    .amp-detail-action-bar-v2 .amp-action-refused {
        gap: 6px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .amp-detail-action-bar-v2 .amp-action-refused .amp-action-main-icon {
        width: 29px !important;
        height: 29px !important;
        flex-basis: 29px !important;
        font-size: 17px !important;
    }

    .amp-detail-action-bar-v2 .amp-action-refused .amp-action-copy strong {
        font-size: 9px !important;
    }
}

/* END PHASE 2F.3.1 — REFUSED BUTTON ALIGNMENT HOTFIX */


/* =====================================================================
   PHASE 3.2A — ARABIC RTL FOUNDATION
   ===================================================================== */

.amp-profile-language-block {
    width: 100%;
    padding: 16px;
}

.amp-profile-language-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.amp-profile-language-heading > div {
    min-width: 0;
    flex: 1 1 auto;
}

.amp-profile-language-heading small,
.amp-profile-language-heading strong {
    display: block;
}

.amp-profile-language-heading small {
    margin-bottom: 3px;
    color: #888394;
    font-size: 11px;
    font-weight: 700;
}

.amp-profile-language-heading strong {
    color: #302d38;
    font-size: 14px;
    font-weight: 800;
}

.amp-language-form {
    display: grid;
    gap: 10px;
}

.amp-language-option {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid #e6e1ec;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
}

.amp-language-option-active {
    border-color: #7040bf;
    background: #f7f2ff;
}

.amp-language-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.amp-language-radio {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid #b9b2c5;
    border-radius: 50%;
    background: #ffffff;
}

.amp-language-option-active .amp-language-radio {
    border-color: #7040bf;
}

.amp-language-option-active .amp-language-radio::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7040bf;
    content: "";
    transform: translate(-50%, -50%);
}

.amp-language-copy {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.amp-language-copy strong,
.amp-language-copy small {
    display: block;
}

.amp-language-copy strong {
    color: #2d2933;
    font-size: 14px;
    font-weight: 800;
}

.amp-language-copy small {
    margin-top: 3px;
    color: #8b8593;
    font-size: 11px;
}

.amp-language-save-button {
    width: 100%;
    min-height: 48px;
    margin-top: 3px;
    border: 0;
    border-radius: 14px;
    background: #6737b8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.amp-language-message {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.amp-language-success {
    background: #eaf8f0;
    color: #258151;
}

.amp-language-error {
    background: #fff0f1;
    color: #bd3f51;
}

html[dir="rtl"],
html[dir="rtl"] body,
body.amp-rtl {
    direction: rtl;
}

html[dir="rtl"] body.amp-body {
    font-family:
        Tahoma,
        Arial,
        sans-serif;
}

html[dir="rtl"] .amp-app-shell,
html[dir="rtl"] .amp-mobile-page,
html[dir="rtl"] .amp-login-page {
    direction: rtl;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .amp-booking-number,
html[dir="rtl"] .amp-profile-employee-pill strong {
    direction: ltr;
    text-align: right;
    unicode-bidi: embed;
}

html[dir="rtl"] .amp-side-menu {
    right: 0;
    left: auto;
}

html[dir="rtl"] .amp-profile-back span,
html[dir="rtl"] .amp-back-button svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .amp-profile-info-row,
html[dir="rtl"] .amp-profile-language-heading,
html[dir="rtl"] .amp-language-option,
html[dir="rtl"] .amp-driver-welcome,
html[dir="rtl"] .amp-delivery-main,
html[dir="rtl"] .amp-language-copy {
    text-align: right;
}

/* END PHASE 3.2A — ARABIC RTL FOUNDATION */


/* PHASE 3.3A — DASHBOARD PAYMENT SUMMARY */

.amp-cds-hero {
    padding-bottom: 18px;
}

.amp-cds-driver-row {
    margin-top: 12px;
}

.amp-cds-driver-row .amp-driver-welcome {
    min-height: 92px;
    padding: 14px;
}

.amp-active-route-card {
    min-height: 92px;
    padding: 14px;
}

.amp-route-secondary-summary {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #eeeaf4;
}

.amp-route-secondary-summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #797486;
    font-size: 12px;
    font-weight: 600;
}

.amp-route-secondary-summary strong {
    color: #252132;
    font-size: 14px;
}

.amp-payment-summary-card {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #ebe8f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(54, 41, 77, 0.08);
}

.amp-payment-summary-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.amp-payment-summary-heading h2 {
    margin: 3px 0 0;
    color: #252132;
    font-size: 18px;
    line-height: 1.25;
}

.amp-payment-currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    border-radius: 10px;
    background: #f1ebfb;
    color: #6531b9;
    font-size: 11px;
    font-weight: 800;
}

.amp-payment-primary-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6531b9, #8c63d2);
    color: #ffffff;
}

.amp-payment-primary-total > span {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
}

.amp-payment-primary-total strong {
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
}

.amp-payment-primary-total small {
    margin-left: 3px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.85;
}

.amp-payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.amp-payment-summary-grid article {
    min-width: 0;
    padding: 13px;
    border: 1px solid #ebe8f0;
    border-radius: 14px;
    background: #faf9fc;
}

.amp-payment-summary-grid article > span {
    display: block;
    margin-bottom: 7px;
    color: #797486;
    font-size: 11px;
    font-weight: 700;
}

.amp-payment-summary-grid article strong {
    display: block;
    overflow: hidden;
    color: #252132;
    font-size: 16px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-payment-summary-grid article small {
    font-size: 9px;
    font-weight: 700;
    color: #797486;
}

.amp-payment-summary-grid .amp-payment-delivered {
    border-color: #cfe9d9;
    background: #f1fbf5;
}

.amp-payment-summary-grid .amp-payment-delivered strong {
    color: #18864b;
}

.amp-manual-booking-number {
    display: block;
    margin-top: 3px;
    color: #797486;
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 380px) {
    .amp-payment-summary-grid {
        grid-template-columns: 1fr;
    }

    .amp-payment-primary-total strong {
        font-size: 21px;
    }

    .amp-route-secondary-summary {
        justify-content: space-between;
    }
}

/* PHASE 3.3B — PREMIUM RESPONSIVE MOBILE START */

/*
 * Amaziy Mobile Platform
 * Responsive dashboard alignment.
 * UI-only. No workflow or business-logic changes.
 */

html,
body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.amp-mobile-page,
.amp-mobile-shell,
.amp-dashboard-page,
.amp-dashboard-shell,
.amp-app-shell,
main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Main dashboard background */
.amp-dashboard-page,
.amp-dashboard-shell,
.amp-mobile-page {
    background:
        linear-gradient(
            180deg,
            #f7f5fc 0%,
            #ffffff 48%,
            #f8f7fc 100%
        ) !important;
}

/* Premium purple header */
.amp-dashboard-header,
.amp-mobile-dashboard-header,
.amp-hero,
.amp-dashboard-hero {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: 360px !important;
    margin: 0 !important;
    padding: 24px 30px 32px !important;
    overflow: hidden;
    border-radius: 0 0 38px 38px !important;
    background:
        radial-gradient(
            circle at 85% 90%,
            rgba(174, 115, 255, 0.48) 0,
            rgba(174, 115, 255, 0.18) 25%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            #281080 0%,
            #4f16b4 47%,
            #7e35de 100%
        ) !important;
    box-shadow: 0 16px 38px rgba(51, 25, 111, 0.16);
}

/* Header title */
.amp-dashboard-title,
.amp-page-title,
.amp-header-title {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

/* Header buttons */
.amp-menu-button,
.amp-notification-button,
.amp-header-action,
.amp-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    padding: 0 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Driver identity */
.amp-driver-profile,
.amp-driver-summary,
.amp-welcome-block {
    min-width: 0 !important;
}

.amp-driver-avatar,
.amp-profile-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 122px !important;
    height: 122px !important;
    border-radius: 30px !important;
    color: #4d17b8 !important;
    background: #ffffff !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 32px rgba(35, 13, 86, 0.17);
}

.amp-welcome-label {
    margin: 0 0 8px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 19px !important;
    font-weight: 500 !important;
}

.amp-driver-name,
.amp-employee-name {
    display: block !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-driver-role {
    color: rgba(255, 255, 255, 0.90) !important;
    font-size: 17px !important;
}

/* Online indicator */
.amp-online-status,
.amp-driver-online {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    margin-top: 12px !important;
    padding: 8px 16px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.11) !important;
}

/* Active route card */
.amp-active-route,
.amp-active-route-card,
.amp-route-card {
    min-width: 280px !important;
    padding: 26px 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 29px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.amp-active-route-label,
.amp-route-label {
    color: #55f078 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.amp-active-route-number,
.amp-route-number {
    margin: 12px 0 10px !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}

/* Shared dashboard cards */
.amp-route-progress-card,
.amp-payment-summary-card,
.amp-dashboard-card,
.amp-summary-card {
    width: calc(100% - 48px) !important;
    max-width: 1120px !important;
    margin: 20px auto 0 !important;
    padding: 26px !important;
    border: 1px solid rgba(80, 54, 135, 0.09) !important;
    border-radius: 27px !important;
    background: #ffffff !important;
    box-shadow:
        0 13px 35px rgba(45, 28, 91, 0.08) !important;
}

/* Route progress title */
.amp-route-progress-card h2,
.amp-route-progress-card h3,
.amp-payment-summary-card h2,
.amp-payment-summary-card h3,
.amp-card-title {
    margin: 0 !important;
    color: #15132b !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

/* Progress layout */
.amp-route-progress-content,
.amp-route-progress-body,
.amp-progress-content {
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 28px !important;
}

/* Donut */
.amp-progress-circle,
.amp-route-progress-circle,
.amp-progress-ring {
    width: 190px !important;
    height: 190px !important;
    min-width: 190px !important;
    border-radius: 50% !important;
}

.amp-progress-percent,
.amp-progress-value {
    color: #4c16bd !important;
    font-size: 48px !important;
    font-weight: 800 !important;
}

/* Horizontal progress bar */
.amp-progress-bar,
.amp-route-progress-bar {
    height: 15px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: #ebe6f7 !important;
}

.amp-progress-bar-fill,
.amp-route-progress-fill {
    height: 100% !important;
    border-radius: inherit !important;
    background:
        linear-gradient(
            90deg,
            #4812ba,
            #7d2cdf
        ) !important;
}

/* Route metrics */
.amp-route-stats,
.amp-progress-stats,
.amp-route-metrics {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 22px !important;
}

.amp-route-stat,
.amp-progress-stat,
.amp-route-metric {
    min-width: 0 !important;
    padding: 4px 14px !important;
    text-align: center !important;
    border-right: 1px solid #e7e2f0;
}

.amp-route-stat:last-child,
.amp-progress-stat:last-child,
.amp-route-metric:last-child {
    border-right: 0;
}

.amp-route-stat-value,
.amp-stat-value,
.amp-metric-value {
    display: block !important;
    margin: 6px 0 2px !important;
    color: #4b17b7 !important;
    font-size: 31px !important;
    font-weight: 800 !important;
}

.amp-route-stat-label,
.amp-stat-label,
.amp-metric-label {
    display: block !important;
    color: #343140 !important;
    font-size: 14px !important;
}

/* Payment summary title */
.amp-payment-summary-card {
    overflow: hidden !important;
}

.amp-payment-summary-header,
.amp-summary-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

/* Payment metric grid */
.amp-payment-summary-grid,
.amp-payment-grid,
.amp-payment-items,
.amp-payment-statistics {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
}

/* Also support direct child structures */
.amp-payment-summary-card > .amp-payment-item,
.amp-payment-summary-card .amp-payment-item,
.amp-payment-summary-card .amp-payment-stat,
.amp-payment-summary-card .amp-summary-item {
    min-width: 0 !important;
    padding: 14px 18px !important;
    text-align: center !important;
    border-right: 1px solid #e7e2ef !important;
}

.amp-payment-summary-card .amp-payment-item:last-child,
.amp-payment-summary-card .amp-payment-stat:last-child,
.amp-payment-summary-card .amp-summary-item:last-child {
    border-right: 0 !important;
}

.amp-payment-label,
.amp-payment-stat-label,
.amp-summary-label {
    display: block !important;
    color: #292636 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

.amp-payment-value,
.amp-payment-stat-value,
.amp-summary-value {
    display: block !important;
    margin-top: 8px !important;
    color: #4d17bc !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* Other active CDS message */
.amp-other-stage-notice,
.amp-other-cds-notice,
.amp-route-notice {
    width: calc(100% - 48px) !important;
    max-width: 1120px !important;
    margin: 18px auto !important;
    padding: 18px 24px !important;
    border: 1px solid #d9c9fa !important;
    border-radius: 20px !important;
    color: #28105e !important;
    background:
        linear-gradient(
            90deg,
            #f3edff,
            #faf7ff
        ) !important;
}

/* Search area */
.amp-delivery-search,
.amp-search-wrapper,
.amp-search-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: calc(100% - 48px) !important;
    max-width: 1120px !important;
    margin: 20px auto 6px !important;
    padding: 8px 0 !important;
    background: rgba(248, 247, 252, 0.94) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.amp-delivery-search input,
.amp-search-input,
input[type="search"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    padding: 0 54px 0 48px !important;
    color: #1d1a29 !important;
    border: 1px solid #c8c3d2 !important;
    border-radius: 17px !important;
    outline: none !important;
    background: #ffffff !important;
    font-size: 18px !important;
    box-shadow: 0 8px 22px rgba(39, 24, 79, 0.05);
}

/* Delivery queue */
.amp-delivery-queue,
.amp-delivery-list,
.amp-delivery-section {
    width: calc(100% - 48px) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding-bottom: 110px !important;
}

.amp-delivery-list-card,
.amp-delivery-card-v2,
.amp-delivery-card {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 13px 0 !important;
    padding: 20px !important;
    color: #171429 !important;
    text-decoration: none !important;
    border: 1px solid #ebe7f2 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow:
        0 10px 26px rgba(39, 25, 77, 0.08) !important;
}

.amp-delivery-card-title,
.amp-booking-number {
    overflow: hidden !important;
    color: #151326 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-delivery-card-subtitle,
.amp-consignee-name {
    margin-top: 5px !important;
    overflow: hidden !important;
    color: #292634 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-manual-booking,
.amp-manual-number,
.amp-status-badge,
.amp-payment-badge {
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 30px !important;
    padding: 5px 12px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-manual-booking,
.amp-manual-number {
    color: #c35c00 !important;
    background: #fff0dd !important;
}

.amp-status-badge {
    color: #4b16bb !important;
    background: #eee7ff !important;
}

.amp-delivery-amount,
.amp-card-amount {
    color: #151326 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Bottom navigation */
.amp-bottom-navigation,
.amp-bottom-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding:
        7px 12px
        calc(7px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #eeeaf3 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 -8px 28px rgba(40, 23, 82, 0.09) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.amp-bottom-navigation a,
.amp-bottom-nav a,
.amp-bottom-nav-item {
    min-height: 58px !important;
    border-radius: 16px !important;
}

/* Tablet */
@media (max-width: 820px) {
    .amp-dashboard-header,
    .amp-mobile-dashboard-header,
    .amp-hero,
    .amp-dashboard-hero {
        min-height: 330px !important;
        padding: 20px 22px 30px !important;
        border-radius: 0 0 32px 32px !important;
    }

    .amp-driver-avatar,
    .amp-profile-avatar {
        width: 92px !important;
        height: 92px !important;
        border-radius: 24px !important;
        font-size: 38px !important;
    }

    .amp-driver-name,
    .amp-employee-name {
        font-size: 25px !important;
    }

    .amp-active-route,
    .amp-active-route-card,
    .amp-route-card {
        min-width: 230px !important;
        padding: 20px !important;
    }

    .amp-route-progress-content,
    .amp-route-progress-body,
    .amp-progress-content {
        grid-template-columns: 150px minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .amp-progress-circle,
    .amp-route-progress-circle,
    .amp-progress-ring {
        width: 145px !important;
        height: 145px !important;
        min-width: 145px !important;
    }

    .amp-progress-percent,
    .amp-progress-value {
        font-size: 38px !important;
    }

    .amp-payment-summary-grid,
    .amp-payment-grid,
    .amp-payment-items,
    .amp-payment-statistics {
        overflow-x: auto !important;
        grid-template-columns: repeat(5, minmax(145px, 1fr)) !important;
        scrollbar-width: none;
    }

    .amp-payment-summary-grid::-webkit-scrollbar,
    .amp-payment-grid::-webkit-scrollbar,
    .amp-payment-items::-webkit-scrollbar,
    .amp-payment-statistics::-webkit-scrollbar {
        display: none;
    }
}

/* True mobile layout */
@media (max-width: 600px) {
    html,
    body {
        width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .amp-dashboard-header,
    .amp-mobile-dashboard-header,
    .amp-hero,
    .amp-dashboard-hero {
        min-height: 318px !important;
        padding: 18px 16px 24px !important;
        border-radius: 0 0 28px 28px !important;
    }

    .amp-dashboard-title,
    .amp-page-title,
    .amp-header-title {
        font-size: 23px !important;
    }

    .amp-menu-button,
    .amp-notification-button,
    .amp-header-action,
    .amp-icon-button {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 17px !important;
    }

    .amp-driver-profile,
    .amp-driver-summary,
    .amp-welcome-block {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 13px !important;
        width: 56% !important;
    }

    .amp-driver-avatar,
    .amp-profile-avatar {
        width: 72px !important;
        height: 72px !important;
        border-radius: 20px !important;
        font-size: 30px !important;
    }

    .amp-welcome-label {
        margin-bottom: 3px !important;
        font-size: 13px !important;
    }

    .amp-driver-name,
    .amp-employee-name {
        margin-bottom: 4px !important;
        font-size: 19px !important;
    }

    .amp-driver-role {
        font-size: 13px !important;
    }

    .amp-online-status,
    .amp-driver-online {
        min-height: 36px !important;
        margin-top: 8px !important;
        padding: 5px 11px !important;
        font-size: 13px !important;
    }

    .amp-active-route,
    .amp-active-route-card,
    .amp-route-card {
        position: absolute !important;
        right: 14px !important;
        bottom: 28px !important;
        width: 40% !important;
        min-width: 0 !important;
        padding: 17px 15px !important;
        border-radius: 22px !important;
    }

    .amp-active-route-label,
    .amp-route-label {
        font-size: 13px !important;
    }

    .amp-active-route-number,
    .amp-route-number {
        margin: 8px 0 !important;
        font-size: 22px !important;
    }

    .amp-route-progress-card,
    .amp-payment-summary-card,
    .amp-dashboard-card,
    .amp-summary-card,
    .amp-other-stage-notice,
    .amp-other-cds-notice,
    .amp-route-notice,
    .amp-delivery-search,
    .amp-search-wrapper,
    .amp-search-container,
    .amp-delivery-queue,
    .amp-delivery-list,
    .amp-delivery-section {
        width: calc(100% - 24px) !important;
    }

    .amp-route-progress-card,
    .amp-payment-summary-card,
    .amp-dashboard-card,
    .amp-summary-card {
        margin-top: 13px !important;
        padding: 18px 15px !important;
        border-radius: 22px !important;
    }

    .amp-route-progress-card h2,
    .amp-route-progress-card h3,
    .amp-payment-summary-card h2,
    .amp-payment-summary-card h3,
    .amp-card-title {
        font-size: 19px !important;
    }

    .amp-route-progress-content,
    .amp-route-progress-body,
    .amp-progress-content {
        grid-template-columns: 105px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    .amp-progress-circle,
    .amp-route-progress-circle,
    .amp-progress-ring {
        width: 103px !important;
        height: 103px !important;
        min-width: 103px !important;
    }

    .amp-progress-percent,
    .amp-progress-value {
        font-size: 29px !important;
    }

    .amp-route-stats,
    .amp-progress-stats,
    .amp-route-metrics {
        grid-template-columns: repeat(5, minmax(68px, 1fr)) !important;
        overflow-x: auto !important;
        margin-top: 14px !important;
        scrollbar-width: none;
    }

    .amp-route-stats::-webkit-scrollbar,
    .amp-progress-stats::-webkit-scrollbar,
    .amp-route-metrics::-webkit-scrollbar {
        display: none;
    }

    .amp-route-stat,
    .amp-progress-stat,
    .amp-route-metric {
        min-width: 68px !important;
        padding: 2px 8px !important;
    }

    .amp-route-stat-value,
    .amp-stat-value,
    .amp-metric-value {
        font-size: 23px !important;
    }

    .amp-route-stat-label,
    .amp-stat-label,
    .amp-metric-label {
        font-size: 11px !important;
    }

    .amp-payment-summary-header,
    .amp-summary-header {
        margin-bottom: 13px !important;
    }

    .amp-payment-summary-grid,
    .amp-payment-grid,
    .amp-payment-items,
    .amp-payment-statistics {
        display: flex !important;
        gap: 0 !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .amp-payment-summary-grid::-webkit-scrollbar,
    .amp-payment-grid::-webkit-scrollbar,
    .amp-payment-items::-webkit-scrollbar,
    .amp-payment-statistics::-webkit-scrollbar {
        display: none;
    }

    .amp-payment-summary-card .amp-payment-item,
    .amp-payment-summary-card .amp-payment-stat,
    .amp-payment-summary-card .amp-summary-item {
        flex: 0 0 145px !important;
        min-width: 145px !important;
        padding: 10px 12px !important;
        scroll-snap-align: start;
    }

    .amp-payment-label,
    .amp-payment-stat-label,
    .amp-summary-label {
        font-size: 12px !important;
    }

    .amp-payment-value,
    .amp-payment-stat-value,
    .amp-summary-value {
        font-size: 17px !important;
    }

    .amp-other-stage-notice,
    .amp-other-cds-notice,
    .amp-route-notice {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        padding: 14px 16px !important;
        border-radius: 17px !important;
    }

    .amp-delivery-search,
    .amp-search-wrapper,
    .amp-search-container {
        margin-top: 8px !important;
        padding: 7px 0 !important;
    }

    .amp-delivery-search input,
    .amp-search-input,
    input[type="search"] {
        height: 50px !important;
        padding-right: 43px !important;
        padding-left: 40px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
    }

    .amp-delivery-list-card,
    .amp-delivery-card-v2,
    .amp-delivery-card {
        grid-template-columns: 54px minmax(0, 1fr) auto !important;
        gap: 12px !important;
        margin: 10px 0 !important;
        padding: 15px 13px !important;
        border-radius: 19px !important;
    }

    .amp-delivery-card-title,
    .amp-booking-number {
        font-size: 18px !important;
    }

    .amp-delivery-card-subtitle,
    .amp-consignee-name {
        font-size: 14px !important;
    }

    .amp-delivery-amount,
    .amp-card-amount {
        font-size: 16px !important;
    }

    .amp-bottom-navigation,
    .amp-bottom-nav {
        min-height: 70px !important;
    }
}

/* Compact phones */
@media (max-width: 390px) {
    .amp-dashboard-header,
    .amp-mobile-dashboard-header,
    .amp-hero,
    .amp-dashboard-hero {
        min-height: 300px !important;
    }

    .amp-active-route,
    .amp-active-route-card,
    .amp-route-card {
        width: 42% !important;
        right: 10px !important;
    }

    .amp-driver-name,
    .amp-employee-name {
        font-size: 17px !important;
    }

    .amp-active-route-number,
    .amp-route-number {
        font-size: 19px !important;
    }

    .amp-route-progress-content,
    .amp-route-progress-body,
    .amp-progress-content {
        grid-template-columns: 92px minmax(0, 1fr) !important;
    }

    .amp-progress-circle,
    .amp-route-progress-circle,
    .amp-progress-ring {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
    }
}

/* PHASE 3.3B — PREMIUM RESPONSIVE MOBILE END */

/* PHASE 3.3D — EXACT MOBILE COMPONENTS START */

.amp-route-progress-exact,
.amp-payment-summary-exact {
    display: block !important;
    width: calc(100% - 24px) !important;
    max-width: 1080px !important;
    margin: 14px auto 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(59, 35, 104, 0.07) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 31px rgba(41, 24, 78, 0.08) !important;
}

.amp-exact-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.amp-exact-section-title h2 {
    margin: 0 !important;
    color: #16132a !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.amp-exact-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: #5118bf;
    border-radius: 12px;
    background: #f0eaff;
}

.amp-exact-title-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Route progress */

.amp-exact-route-body {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    margin-top: 17px;
}

.amp-exact-route-ring {
    --amp-progress: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background:
        conic-gradient(
            #4e16bd calc(var(--amp-progress) * 1%),
            #eee9fa 0
        );
}

.amp-exact-route-ring::before {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.amp-exact-route-ring-center {
    position: relative;
    z-index: 1;
    text-align: center;
}

.amp-exact-route-ring-center strong {
    display: block;
    color: #4d16bb;
    font-size: 31px;
    font-weight: 850;
    line-height: 1;
}

.amp-exact-route-ring-center span {
    display: block;
    margin-top: 7px;
    color: #302c3d;
    font-size: 10px;
}

.amp-exact-route-right {
    min-width: 0;
}

.amp-exact-progress-track {
    width: 100%;
    height: 9px;
    margin-bottom: 19px;
    overflow: hidden;
    border-radius: 999px;
    background: #ece7f7;
}

.amp-exact-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4c14ba, #7d2bdd);
}

.amp-exact-route-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}

.amp-exact-stat {
    min-width: 0;
    padding: 0 5px;
    text-align: center;
    border-right: 1px solid #e5e0ed;
}

.amp-exact-stat:last-child {
    border-right: 0;
}

.amp-exact-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    margin: 0 auto 6px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
}

.amp-exact-stat strong {
    display: block;
    margin-bottom: 4px;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.amp-exact-stat small {
    display: block;
    min-height: 24px;
    color: #312d3c;
    font-size: 9px;
    line-height: 1.1;
}

.amp-exact-delivered .amp-exact-stat-icon {
    color: #06933e;
    background: #ddf5e6;
}

.amp-exact-delivered strong {
    color: #06933e;
}

.amp-exact-remaining .amp-exact-stat-icon {
    color: #dc6800;
    background: #fff0dd;
}

.amp-exact-remaining strong {
    color: #dc6800;
}

.amp-exact-assigned .amp-exact-stat-icon {
    color: #561cc0;
    background: #eee8ff;
}

.amp-exact-assigned strong {
    color: #561cc0;
}

.amp-exact-refused .amp-exact-stat-icon {
    color: #d62948;
    background: #fde4e9;
}

.amp-exact-refused strong {
    color: #d62948;
}

.amp-exact-returned .amp-exact-stat-icon {
    color: #1559b3;
    background: #e4f1ff;
}

.amp-exact-returned strong {
    color: #1559b3;
}

/* Payment summary */

.amp-exact-payment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.amp-exact-payment-chevron {
    color: #575064;
    font-size: 24px;
    line-height: 1;
}

.amp-exact-payment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
}

.amp-exact-payment-item {
    min-width: 0;
    padding: 0 6px;
    text-align: center;
    border-right: 1px solid #e5e0ed;
}

.amp-exact-payment-item:last-child {
    border-right: 0;
}

.amp-exact-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
}

.amp-exact-payment-item small {
    display: block;
    min-height: 27px;
    color: #302d3a;
    font-size: 9px;
    line-height: 1.15;
}

.amp-exact-payment-item strong {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    white-space: normal;
}

.amp-exact-payment-total .amp-exact-payment-icon,
.amp-exact-payment-delivered .amp-exact-payment-icon {
    color: #5419bf;
    background: #eee8ff;
}

.amp-exact-payment-total strong,
.amp-exact-payment-delivered strong {
    color: #4e16ba;
}

.amp-exact-payment-cod .amp-exact-payment-icon {
    color: #06933e;
    background: #ddf5e6;
}

.amp-exact-payment-cod strong {
    color: #07923e;
}

.amp-exact-payment-cc .amp-exact-payment-icon {
    color: #1558b7;
    background: #e3f1ff;
}

.amp-exact-payment-cc strong {
    color: #1558b7;
}

.amp-exact-payment-advance .amp-exact-payment-icon {
    color: #e16a00;
    background: #fff0de;
}

.amp-exact-payment-advance strong {
    color: #df6800;
}

/* Wider phones and tablets */

@media (min-width: 601px) {
    .amp-route-progress-exact,
    .amp-payment-summary-exact {
        width: calc(100% - 48px) !important;
        padding: 25px 27px !important;
        border-radius: 27px !important;
    }

    .amp-exact-section-title h2 {
        font-size: 24px !important;
    }

    .amp-exact-title-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .amp-exact-route-body {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 30px;
    }

    .amp-exact-route-ring {
        width: 184px;
        height: 184px;
    }

    .amp-exact-route-ring::before {
        inset: 18px;
    }

    .amp-exact-route-ring-center strong {
        font-size: 46px;
    }

    .amp-exact-route-ring-center span {
        font-size: 15px;
    }

    .amp-exact-stat-icon {
        width: 47px;
        height: 47px;
        font-size: 25px;
    }

    .amp-exact-stat strong {
        font-size: 30px;
    }

    .amp-exact-stat small {
        font-size: 14px;
    }

    .amp-exact-payment-icon {
        width: 49px;
        height: 49px;
        font-size: 25px;
    }

    .amp-exact-payment-item small {
        font-size: 14px;
    }

    .amp-exact-payment-item strong {
        font-size: 19px;
        white-space: nowrap;
    }
}

/* Compact phones */

@media (max-width: 390px) {
    .amp-route-progress-exact,
    .amp-payment-summary-exact {
        padding: 15px 10px !important;
    }

    .amp-exact-route-body {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
    }

    .amp-exact-route-ring {
        width: 92px;
        height: 92px;
    }

    .amp-exact-route-ring-center strong {
        font-size: 27px;
    }

    .amp-exact-stat {
        padding: 0 2px;
    }

    .amp-exact-stat-icon {
        width: 27px;
        height: 27px;
        font-size: 16px;
    }

    .amp-exact-stat strong {
        font-size: 18px;
    }

    .amp-exact-stat small,
    .amp-exact-payment-item small {
        font-size: 8px;
    }

    .amp-exact-payment-item {
        padding: 0 3px;
    }

    .amp-exact-payment-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .amp-exact-payment-item strong {
        font-size: 9px;
    }
}

/* PHASE 3.3D — EXACT MOBILE COMPONENTS END */


/* ================================================================================================
   PHASE 3.4A — ACTIVE CDS NAVIGATOR
   ================================================================================================ */

.amp-cds-route-navigator {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.amp-cds-nav-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
    font-size: 29px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform 120ms ease,
        background 120ms ease;
}

.amp-cds-nav-button:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.25);
}

.amp-cds-route-number {
    display: block;
    min-width: 0;
    overflow: hidden;
    margin-top: 6px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-cds-route-navigator .amp-cds-route-number {
    margin-top: 0;
    font-size: 18px;
}

.amp-cds-route-position {
    display: block;
    margin-top: 7px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 9px !important;
    font-weight: 750;
    text-align: center;
}

.amp-cds-route-started,
.amp-cds-route-state {
    text-align: center;
}

html[dir="rtl"] .amp-cds-nav-button {
    transform: scaleX(-1);
}

html[dir="rtl"] .amp-cds-nav-button:active {
    transform: scaleX(-1) scale(0.92);
}

@media (max-width: 410px) {
    .amp-cds-route-navigator {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 5px;
    }

    .amp-cds-nav-button {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 25px;
    }

    .amp-cds-route-navigator .amp-cds-route-number {
        font-size: 15px;
    }

    .amp-cds-route-position {
        font-size: 8px !important;
    }
}

/* END PHASE 3.4A — ACTIVE CDS NAVIGATOR */


/* ================================================================================================
   PHASE 3.4B — HISTORY SMART FILTERS
   ================================================================================================ */

.amp-history-filters {
    display: flex;
    overflow-x: auto;
    gap: 7px;
    padding-bottom: 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.amp-history-filters::-webkit-scrollbar {
    display: none;
}

.amp-history-filter {
    flex: 0 0 auto;
    white-space: nowrap;
}

.amp-history-cds-selector {
    margin: 13px 0 17px;
    padding: 14px;
    border: 1px solid rgba(105, 62, 177, 0.11);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(65, 40, 104, 0.08);
}

.amp-history-cds-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.amp-history-cds-selector-header > div {
    min-width: 0;
}

.amp-history-cds-selector-header span {
    display: block;
    margin-bottom: 2px;
    color: var(--amp-dashboard-purple);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.8px;
}

.amp-history-cds-selector-header h3 {
    margin: 0;
    color: var(--amp-dashboard-text);
    font-size: 13px;
    font-weight: 850;
}

.amp-history-cds-selector-header > small {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 9px;
    color: var(--amp-dashboard-purple-dark);
    background: rgba(105, 62, 177, 0.09);
    font-size: 7px;
    font-weight: 800;
}

.amp-history-cds-select-wrap {
    position: relative;
}

.amp-history-cds-select-wrap select {
    width: 100%;
    min-height: 46px;
    padding: 0 42px 0 13px;
    border: 1px solid rgba(105, 62, 177, 0.17);
    border-radius: 13px;
    outline: 0;
    color: var(--amp-dashboard-text);
    background: #faf9fc;
    font-size: 10px;
    font-weight: 750;
    appearance: none;
    -webkit-appearance: none;
}

.amp-history-cds-select-wrap select:focus {
    border-color: var(--amp-dashboard-purple);
    box-shadow: 0 0 0 3px rgba(105, 62, 177, 0.10);
}

.amp-history-cds-select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    pointer-events: none;
    color: var(--amp-dashboard-purple);
    font-size: 15px;
    transform: translateY(-50%);
}

.amp-history-selected-cds {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(35, 169, 99, 0.08);
}

.amp-history-selected-cds > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: #ffffff;
    background: #23a963;
    font-size: 10px;
    font-weight: 900;
}

.amp-history-selected-cds > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.amp-history-selected-cds small {
    color: var(--amp-dashboard-muted);
    font-size: 7px;
}

.amp-history-selected-cds strong {
    overflow: hidden;
    color: var(--amp-dashboard-text);
    font-size: 10px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-history-cds-warning {
    margin-top: 10px;
    font-size: 8px;
}

.amp-history-cds-badge {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    margin-bottom: 7px;
    padding: 4px 7px;
    overflow: hidden;
    border: 1px solid rgba(105, 62, 177, 0.12);
    border-radius: 8px;
    color: var(--amp-dashboard-purple-dark);
    background: rgba(105, 62, 177, 0.08);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[dir="rtl"] .amp-history-cds-select-wrap select {
    padding-right: 13px;
    padding-left: 42px;
}

html[dir="rtl"] .amp-history-cds-select-arrow {
    right: auto;
    left: 14px;
}

@media (max-width: 350px) {
    .amp-history-cds-selector {
        padding: 12px;
    }

    .amp-history-filter {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* END PHASE 3.4B — HISTORY SMART FILTERS */

/* PHASE 3.5 — PREMIUM DELIVERY DETAIL UI START */

.amp-p35-detail-page {
    min-height: 100%;
    padding-bottom: 104px;
    background:
        linear-gradient(
            180deg,
            #f4f0fc 0,
            #faf9fc 210px,
            #f7f6fa 100%
        );
}

.amp-p35-header .amp-header-row {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.amp-p35-header h1 {
    overflow: hidden;
    margin: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-p35-content {
    display: grid;
    width: min(100% - 24px, 760px);
    margin: 0 auto;
    padding: 16px 0 24px;
    gap: 13px;
}

.amp-p35-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(65, 41, 107, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 9px 24px rgba(48, 30, 82, 0.075);
}

.amp-p35-booking-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbf9ff 62%,
            #f3edff 100%
        );
}

.amp-p35-booking-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 17px;
    background:
        linear-gradient(145deg, #b477ef, #7443db);
    box-shadow:
        0 9px 20px rgba(112, 61, 204, 0.24);
}

.amp-p35-booking-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amp-p35-booking-copy {
    min-width: 0;
}

.amp-p35-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #777181;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.amp-p35-booking-number {
    display: block;
    overflow: hidden;
    color: #171327;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 850;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-p35-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.amp-p35-badge {
    display: inline-flex;
    max-width: 100%;
    min-height: 25px;
    align-items: center;
    padding: 4px 9px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-p35-badge-route {
    color: #2a70c6;
    border: 1px solid #b8dafd;
    background: #edf7ff;
}

.amp-p35-badge-progress {
    color: #3a64ae;
    background: #e8f1ff;
}

.amp-p35-badge-payment {
    color: #16833d;
    border: 1px solid #a9deb7;
    background: #ebfaef;
}

.amp-p35-section-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.amp-p35-section-heading h2 {
    min-width: 0;
    margin: 0;
    color: #1e1a2c;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.25;
}

.amp-p35-heading-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}

.amp-p35-heading-icon svg,
.amp-p35-inline-icon svg,
.amp-p35-call-button svg,
.amp-p35-map-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amp-p35-icon-purple {
    color: #7a39ce;
    background: #f3eaff;
}

.amp-p35-icon-green {
    color: #1b9a4b;
    background: #e9f9ee;
}

.amp-p35-icon-blue {
    color: #237fd3;
    background: #eaf5ff;
}

.amp-p35-primary-value {
    margin-bottom: 13px;
    overflow-wrap: anywhere;
    color: #181523;
    font-size: 18px;
    font-weight: 820;
    line-height: 1.3;
}

.amp-p35-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.amp-p35-info-item {
    min-width: 0;
    padding: 11px;
    border-radius: 13px;
    background: #faf9fc;
}

.amp-p35-info-item span,
.amp-p35-contact-copy span,
.amp-p35-route-place span,
.amp-p35-address-block span,
.amp-p35-summary-row > span {
    display: block;
    margin-bottom: 4px;
    color: #777181;
    font-size: 10px;
    font-weight: 650;
}

.amp-p35-info-item strong,
.amp-p35-contact-copy strong,
.amp-p35-route-place strong,
.amp-p35-address-block strong {
    display: block;
    overflow-wrap: anywhere;
    color: #23202d;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.4;
}

.amp-p35-contact-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #eeebf2;
    border-radius: 14px;
}

.amp-p35-contact-copy {
    min-width: 0;
}

.amp-p35-call-button {
    display: inline-flex;
    min-height: 39px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    color: #216ed0;
    text-decoration: none;
    border-radius: 12px;
    background: #edf5ff;
    font-size: 11px;
    font-weight: 800;
}

.amp-p35-call-button:hover,
.amp-p35-call-button:focus {
    color: #185bb2;
    text-decoration: none;
}

.amp-p35-inline-detail {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eeebf2;
}

.amp-p35-inline-icon {
    display: inline-flex;
    color: #6d7180;
}

.amp-p35-inline-detail > span:not(.amp-p35-inline-icon) {
    color: #777181;
    font-size: 11px;
    font-weight: 650;
}

.amp-p35-inline-detail strong {
    overflow-wrap: anywhere;
    color: #25212f;
    text-align: right;
    font-size: 11px;
    font-weight: 780;
}

.amp-p35-route-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        26px
        minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.amp-p35-route-place {
    min-width: 0;
    padding: 11px;
    border-radius: 13px;
    background: #faf9fc;
}

.amp-p35-origin span {
    color: #1f9950;
}

.amp-p35-destination span {
    color: #e67b24;
}

.amp-p35-route-arrow {
    color: #8d8797;
    text-align: center;
    font-size: 17px;
    font-weight: 750;
}

.amp-p35-address-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
    padding-top: 13px;
    border-top: 1px solid #ece9f0;
}

.amp-p35-map-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #2476cf;
    border-radius: 13px;
    background: #edf5ff;
}

.amp-p35-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.amp-p35-summary-card {
    min-width: 0;
}

.amp-p35-small-heading {
    align-items: flex-start;
}

.amp-p35-small-heading h2 {
    font-size: 13px;
}

.amp-p35-summary-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #efedf2;
}

.amp-p35-summary-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.amp-p35-summary-row > span {
    min-width: 0;
    margin: 0;
}

.amp-p35-summary-row > strong {
    max-width: 60%;
    overflow-wrap: anywhere;
    color: #24202d;
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.amp-p35-summary-row small {
    color: inherit;
    font-size: 9px;
    font-weight: 700;
}

.amp-p35-payment-text,
.amp-p35-amount-row strong {
    color: #18823d !important;
}

.amp-p35-route-information .amp-p35-summary-row:first-child {
    padding-top: 0;
}

.amp-p35-state-pill {
    display: inline-flex;
    width: auto;
    padding: 4px 9px;
    color: #2768b9 !important;
    border-radius: 999px;
    background: #e9f2ff;
}

.amp-p35-action-bar {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 760px);
    margin: 0 auto;
    padding:
        10px
        12px
        calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(62, 47, 87, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 -9px 28px rgba(40, 25, 71, 0.13);
    backdrop-filter: blur(14px);
}

.amp-p35-action {
    display: inline-flex;
    min-width: 0;
    min-height: 57px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 12px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 19px rgba(30, 25, 42, 0.16);
    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.amp-p35-action:hover,
.amp-p35-action:focus {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(0.97);
}

.amp-p35-action:active {
    transform: translateY(1px);
}

.amp-p35-action-delivered {
    background:
        linear-gradient(135deg, #26a84f, #168a3c);
}

.amp-p35-action-refused {
    background:
        linear-gradient(135deg, #ef4444, #d52c39);
}

.amp-p35-action-icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
}

@media (min-width: 620px) {
    .amp-p35-content {
        padding-top: 20px;
        gap: 16px;
    }

    .amp-p35-card {
        padding: 21px;
    }

    .amp-p35-booking-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .amp-p35-booking-icon {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 430px) {
    .amp-p35-content {
        width: calc(100% - 20px);
    }

    .amp-p35-card {
        padding: 15px;
        border-radius: 18px;
    }

    .amp-p35-booking-card {
        grid-template-columns: 49px minmax(0, 1fr);
        gap: 11px;
    }

    .amp-p35-booking-icon {
        width: 49px;
        height: 49px;
        border-radius: 15px;
    }

    .amp-p35-booking-icon svg {
        width: 25px;
        height: 25px;
    }

    .amp-p35-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 350px) {
    .amp-p35-info-grid {
        grid-template-columns: 1fr;
    }

    .amp-p35-route-grid {
        grid-template-columns: 1fr;
    }

    .amp-p35-route-arrow {
        transform: rotate(90deg);
    }

    .amp-p35-action {
        min-height: 53px;
        padding: 9px 7px;
        font-size: 11px;
    }
}

/* PHASE 3.5 — PREMIUM DELIVERY DETAIL UI END */

/* PHASE 3.6 — COMPACT MOBILE DASHBOARD START */

/* Keep the app at mobile width on laptop and desktop. */

html,
body,
.amp-body {
    min-height: 100%;
    background: #eceaf1 !important;
}

.amp-app-shell {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: hidden !important;
    background: #f8f7fb !important;
    box-shadow:
        0 0 36px rgba(38, 24, 70, 0.14) !important;
}

.amp-bottom-nav {
    right: auto !important;
    left: 50% !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
}

.amp-side-overlay {
    right: auto !important;
    left: 50% !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
}

.amp-side-menu {
    left: max(calc(50% - 215px), 0px) !important;
    width: min(315px, 82vw) !important;
}

/* Reduce the purple dashboard header. */

.amp-dashboard-hero.amp-cds-hero {
    min-height: 245px !important;
    height: auto !important;
    padding-bottom: 18px !important;
    border-radius: 0 0 27px 27px !important;
}

.amp-dashboard-hero .amp-header-row {
    min-height: 54px !important;
    padding:
        calc(7px + env(safe-area-inset-top))
        16px
        6px !important;
}

.amp-dashboard-hero .amp-header-row h1 {
    font-size: 17px !important;
}

.amp-cds-driver-row {
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 14px 0 !important;
}

.amp-driver-welcome {
    min-width: 0 !important;
    flex: 1 1 52% !important;
    gap: 9px !important;
}

.amp-driver-avatar {
    width: 57px !important;
    height: 57px !important;
    min-width: 57px !important;
    border-radius: 18px !important;
    font-size: 21px !important;
}

.amp-driver-welcome-copy {
    min-width: 0 !important;
}

.amp-driver-eyebrow {
    font-size: 8px !important;
}

.amp-driver-welcome-copy > strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 13px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-driver-role {
    font-size: 10px !important;
}

.amp-online-status {
    min-height: 26px !important;
    margin-top: 5px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
}

.amp-active-route-card {
    width: 46% !important;
    min-width: 0 !important;
    min-height: 128px !important;
    padding: 12px 10px !important;
    border-radius: 18px !important;
}

.amp-active-route-label {
    font-size: 8px !important;
}

.amp-cds-route-number {
    overflow: hidden !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-cds-nav-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
}

.amp-cds-route-position,
.amp-cds-route-started,
.amp-cds-route-state {
    font-size: 8px !important;
}

/* Move content upward and keep all dashboard sections mobile width. */

.amp-dashboard-content {
    width: 100% !important;
    max-width: none !important;
    margin-top: -14px !important;
    padding:
        0
        11px
        calc(82px + env(safe-area-inset-bottom)) !important;
}

.amp-route-progress-exact,
.amp-payment-summary-exact {
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    padding: 14px 13px !important;
    border-radius: 19px !important;
}

.amp-exact-section-title h2 {
    font-size: 16px !important;
}

.amp-exact-route-body {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-top: 13px !important;
}

.amp-exact-route-ring {
    width: 80px !important;
    height: 80px !important;
}

.amp-exact-route-ring::before {
    inset: 9px !important;
}

.amp-exact-route-ring-center strong {
    font-size: 22px !important;
}

.amp-exact-route-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.amp-exact-stat {
    padding: 0 2px !important;
}

.amp-exact-stat-icon {
    width: 25px !important;
    height: 25px !important;
    margin: 0 auto 4px !important;
    font-size: 10px !important;
}

.amp-exact-stat strong {
    font-size: 13px !important;
}

.amp-exact-stat small {
    font-size: 6px !important;
}

.amp-exact-payment-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.amp-exact-payment-item {
    min-width: 0 !important;
    padding: 5px 2px !important;
}

.amp-exact-payment-icon {
    width: 27px !important;
    height: 27px !important;
}

.amp-exact-payment-item small {
    font-size: 6px !important;
}

.amp-exact-payment-item strong {
    font-size: 8px !important;
}

/* Compact route notice and search. */

.amp-other-routes-note {
    width: 100% !important;
    margin: 11px 0 !important;
    padding: 11px 13px !important;
    border-radius: 15px !important;
}

.amp-search-section {
    width: 100% !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
}

.amp-search-row {
    width: 100% !important;
}

.amp-search-row input {
    height: 49px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
}

/* Full-width compact delivery queue. */

.amp-delivery-queue-section,
.amp-delivery-list {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.amp-section-heading {
    margin-bottom: 10px !important;
}

.amp-delivery-list-card.amp-delivery-card-v2 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 11px !important;
    padding: 14px 13px 13px 16px !important;
    overflow: hidden !important;
    border: 1px solid #ebe7f2 !important;
    border-left: 4px solid #632bc5 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow:
        0 8px 22px rgba(42, 26, 76, 0.075) !important;
}

.amp-delivery-main {
    width: 100% !important;
    min-width: 0 !important;
}

.amp-delivery-title-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding-right: 30px !important;
}

.amp-booking-number {
    max-width: 58% !important;
    overflow: hidden !important;
    font-size: 13px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.amp-manual-booking-number,
.amp-status-out-delivery {
    font-size: 7px !important;
}

.amp-consignee-name {
    margin-top: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.amp-route-text {
    display: block !important;
    margin-top: 5px !important;
    font-size: 9px !important;
}

.amp-p36-delivery-type-badge {
    display: inline-flex !important;
    min-height: 26px !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 8px !important;
    padding: 4px 9px !important;
    color: #16833f !important;
    border: 1px solid #b9e3c5 !important;
    border-radius: 999px !important;
    background: #ecfaef !important;
    font-size: 8px !important;
    font-weight: 800 !important;
}

.amp-p36-delivery-type-icon {
    font-size: 12px !important;
    line-height: 1 !important;
}

.amp-delivery-card-metrics {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 9px !important;
    padding-right: 36px !important;
}

.amp-delivery-metric {
    min-width: 0 !important;
    padding: 7px 5px !important;
    border-radius: 10px !important;
}

.amp-delivery-metric small {
    font-size: 6px !important;
}

.amp-delivery-metric strong {
    font-size: 8px !important;
}

.amp-delivery-contact-preview {
    margin-top: 8px !important;
    padding: 7px 8px !important;
    font-size: 8px !important;
}

.amp-card-chevron {
    position: absolute !important;
    right: 11px !important;
    bottom: 17px !important;
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 11px !important;
    background: #efe7ff !important;
    font-size: 18px !important;
}

/* Smaller phones. */

@media (max-width: 390px) {
    .amp-dashboard-hero.amp-cds-hero {
        min-height: 235px !important;
    }

    .amp-cds-driver-row {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .amp-dashboard-content {
        padding-right: 9px !important;
        padding-left: 9px !important;
    }
}

/* PHASE 3.6 — COMPACT MOBILE DASHBOARD END */


/* ================================================================================================
   PHASE 4.0B — PROGRESSIVE WEB APP FOUNDATION
   ================================================================================================ */

.amp-pwa-install-button {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #6531b9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 12px 30px rgba(67, 33, 122, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.amp-pwa-install-button[hidden] {
    display: none !important;
}

.amp-pwa-install-button:disabled {
    opacity: 0.65;
    cursor: default;
}

.amp-pwa-install-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 17px;
}

.amp-pwa-ios-hint {
    position: fixed;
    right: 16px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 1210;
    display: grid;
    gap: 5px;
    max-width: 398px;
    margin: 0 auto;
    padding: 16px 44px 16px 18px;
    border: 1px solid rgba(101, 49, 185, 0.15);
    border-radius: 18px;
    background: #ffffff;
    color: #25183a;
    box-shadow: 0 16px 42px rgba(42, 24, 72, 0.20);
}

.amp-pwa-ios-hint strong {
    font-size: 15px;
}

.amp-pwa-ios-hint span {
    color: #6c6278;
    font-size: 13px;
    line-height: 1.45;
}

.amp-pwa-hint-close {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f2edf9;
    color: #6531b9;
    font-size: 22px;
    line-height: 28px;
    cursor: pointer;
}

.amp-pwa-standalone body {
    overscroll-behavior-y: contain;
}

@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: contain;
    }

    .amp-app-shell {
        min-height: 100dvh;
    }
}


/* ================================================================================================
   PHASE 4.1B — PWA NATIVE EXPERIENCE
   ================================================================================================ */

.amp-pwa-status-region {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    z-index: 1600;
    display: grid;
    justify-items: center;
    pointer-events: none;
}

.amp-pwa-connectivity-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    width: min(100%, 420px);
    padding: 12px 15px;
    border-radius: 15px;
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(31, 22, 46, 0.24);
    pointer-events: auto;
    animation: amp-pwa-banner-enter 0.22s ease-out;
}

.amp-pwa-offline-banner {
    background: #9f2f3d;
}

.amp-pwa-restored-toast {
    background: #21845b;
}

.amp-pwa-connectivity-icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 17px;
    font-weight: 800;
}

.amp-pwa-connectivity-banner > span:last-child {
    display: grid;
    gap: 2px;
}

.amp-pwa-connectivity-banner strong {
    font-size: 14px;
    line-height: 1.2;
}

.amp-pwa-connectivity-banner small {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.3;
}

.amp-pwa-update-banner {
    position: fixed;
    right: 14px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 14px;
    z-index: 1550;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(101, 49, 185, 0.16);
    border-radius: 18px;
    background: #ffffff;
    color: #25183a;
    box-shadow: 0 17px 42px rgba(43, 25, 74, 0.24);
    animation: amp-pwa-banner-enter 0.24s ease-out;
}

.amp-pwa-update-banner[hidden] {
    display: none !important;
}

.amp-pwa-update-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.amp-pwa-update-copy > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.amp-pwa-update-copy strong {
    font-size: 14px;
    line-height: 1.2;
}

.amp-pwa-update-copy small {
    color: #746a80;
    font-size: 11px;
    line-height: 1.35;
}

.amp-pwa-update-icon {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0e9fa;
    color: #6531b9;
    font-size: 21px;
    font-weight: 800;
}

.amp-pwa-update-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #6531b9;
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.amp-pwa-update-button:disabled {
    opacity: 0.68;
    cursor: default;
}

.amp-pwa-navigation-loading {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0);
    color: #6531b9;
    font-size: 14px;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.16s ease,
        background 0.16s ease;
}

.amp-pwa-navigation-loading[hidden] {
    display: none !important;
}

.amp-pwa-navigation-loading-visible {
    background: rgba(255, 255, 255, 0.78);
    opacity: 1;
    pointer-events: auto;
}

.amp-pwa-navigation-spinner,
.amp-pwa-button-spinner {
    display: inline-block;
    width: 19px;
    height: 19px;
    border: 2px solid rgba(101, 49, 185, 0.22);
    border-top-color: #6531b9;
    border-radius: 50%;
    animation: amp-pwa-spin 0.72s linear infinite;
}

.amp-pwa-button-spinner {
    width: 16px;
    height: 16px;
    border-color: rgba(255, 255, 255, 0.32);
    border-top-color: #ffffff;
}

.amp-form-submitting button[type="submit"] {
    cursor: wait;
}

.amp-form-submitting button[type="submit"]:disabled {
    opacity: 0.76;
}

.amp-network-offline form button[type="submit"] {
    filter: saturate(0.78);
}

@keyframes amp-pwa-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes amp-pwa-banner-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 430px) {
    .amp-pwa-update-banner {
        align-items: stretch;
    }

    .amp-pwa-update-button {
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amp-pwa-connectivity-banner,
    .amp-pwa-update-banner,
    .amp-pwa-navigation-loading {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   AMAZIY MOBILE — PHASE 4.3B PUSH NOTIFICATION FOUNDATION
   ========================================================================== */

.amp-notification-button[data-push-ready="1"],
.amp-header-icon[data-push-ready="1"] {
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
}

.amp-push-toast {
    position: fixed;
    left: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 10050;
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #202124;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transform: translate(-50%, 20px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

.amp-push-toast-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.amp-push-toast-error {
    background: #b3261e;
}

/* ==========================================================
   JMISS MOBILE UI R1
   Scoped to JMISS screens only.
   ========================================================== */

.amp-jmiss-page {
    min-height: 100vh;
    padding-bottom: 78px;
    background: #f4f5f8;
}

.amp-jmiss-hero {
    padding: 14px 16px 22px;
    color: #fff;
    background:
        linear-gradient(135deg, #402090 0%, #6d30c7 62%, #843ee1 100%);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 22px rgba(71, 34, 139, 0.18);
}

.amp-jmiss-topbar {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.amp-jmiss-topbar h1 {
    margin: 0;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.amp-jmiss-header-button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    font-size: 20px;
}

.amp-jmiss-driver-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.amp-jmiss-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #5b2ca0;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.amp-jmiss-driver-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.amp-jmiss-driver-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.amp-jmiss-driver-role,
.amp-jmiss-driver-vehicle {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}

.amp-jmiss-online {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 11px;
    font-weight: 700;
}

.amp-jmiss-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35e17b;
    box-shadow: 0 0 0 3px rgba(53, 225, 123, 0.16);
}

.amp-jmiss-content {
    padding: 0 14px 16px;
}

.amp-jmiss-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: -10px 0 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(31, 35, 48, 0.08);
}

.amp-jmiss-stat {
    padding: 14px 6px 13px;
    text-align: center;
}

.amp-jmiss-stat-middle {
    border-right: 1px solid #ececf2;
    border-left: 1px solid #ececf2;
}

.amp-jmiss-stat strong {
    display: block;
    color: #17142d;
    font-size: 20px;
    line-height: 1.1;
}

.amp-jmiss-stat span {
    display: block;
    margin-top: 4px;
    color: #747283;
    font-size: 11px;
}

.amp-jmiss-section {
    margin-bottom: 22px;
}

.amp-jmiss-last-section {
    margin-bottom: 12px;
}

.amp-jmiss-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 2px 10px;
}

.amp-jmiss-section-heading h2 {
    margin: 0;
    color: #17142d;
    font-size: 16px;
    font-weight: 800;
}

.amp-jmiss-section-count {
    min-width: 24px;
    padding: 4px 8px;
    border-radius: 20px;
    text-align: center;
    color: #5b2ca0;
    background: #ebe2fb;
    font-size: 11px;
    font-weight: 800;
}

.amp-jmiss-active-card,
.amp-jmiss-trip-card,
.amp-jmiss-empty {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(24, 20, 48, 0.07);
}

.amp-jmiss-active-card {
    padding: 16px;
}

.amp-jmiss-trip-card {
    margin-bottom: 10px;
    padding: 14px;
    color: inherit;
    text-decoration: none;
}

.amp-jmiss-empty {
    padding: 18px;
    color: #7c7988;
    font-size: 13px;
}

.amp-jmiss-active-title {
    margin-bottom: 12px;
    color: #17142d;
    font-size: 15px;
}

.amp-jmiss-route-row,
.amp-jmiss-card-route {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.amp-jmiss-route-icon,
.amp-jmiss-card-route > span {
    color: #632bc1;
    font-size: 13px;
}

.amp-jmiss-route-row small {
    display: block;
    margin-bottom: 2px;
    color: #858190;
    font-size: 11px;
}

.amp-jmiss-route-row strong,
.amp-jmiss-card-route strong {
    color: #322e42;
    font-size: 13px;
    font-weight: 700;
}

.amp-jmiss-route-arrow {
    display: inline-block;
    margin: 0 4px;
    color: #7035cc;
}

.amp-jmiss-active-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 13px 0;
    color: #777383;
    font-size: 11px;
}

.amp-jmiss-active-meta strong {
    color: #393544;
    text-align: right;
}

.amp-jmiss-primary-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff !important;
    background: linear-gradient(90deg, #5225ac, #6b2fd1);
    font-size: 13px;
    font-weight: 800;
}

.amp-jmiss-trip-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.amp-jmiss-trip-card-top > strong {
    color: #19152e;
    font-size: 13px;
}

.amp-jmiss-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
}

.amp-jmiss-badge-ready {
    color: #b85c08;
    background: #fff0df;
}

.amp-jmiss-badge-progress {
    color: #1b61ad;
    background: #e3f0ff;
}

.amp-jmiss-badge-review {
    color: #5130a3;
    background: #eee8ff;
}

.amp-jmiss-badge-completed {
    color: #16804c;
    background: #e1f5e9;
}

.amp-jmiss-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #efedf4;
}

.amp-jmiss-card-grid small {
    display: block;
    margin-bottom: 3px;
    color: #8a8794;
    font-size: 10px;
}

.amp-jmiss-card-grid strong {
    display: block;
    color: #45414d;
    font-size: 11px;
    font-weight: 700;
}

.amp-jmiss-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #efedf4;
    color: #6129ba;
    font-size: 11px;
    font-weight: 800;
}

.amp-jmiss-completed-card .amp-jmiss-card-route > span {
    color: #19995b;
}

.amp-jmiss-bottom-nav {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 7px 5px max(7px, env(safe-area-inset-bottom));
    border-top: 1px solid #e6e4eb;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -4px 18px rgba(25, 20, 45, 0.08);
}

.amp-jmiss-nav-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    text-decoration: none;
    color: #84818e;
}

.amp-jmiss-nav-item > span {
    font-size: 18px;
    line-height: 1.2;
}

.amp-jmiss-nav-item small {
    font-size: 9px;
}

.amp-jmiss-nav-active {
    color: #662bc2;
    font-weight: 800;
}

.amp-jmiss-nav-disabled {
    opacity: 0.65;
}

@media (max-width: 360px) {
    .amp-jmiss-driver-name {
        font-size: 14px;
    }

    .amp-jmiss-driver-vehicle {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .amp-jmiss-card-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   JMISS MOBILE UI R2 — DASHBOARD / TABS / MONEY
   ========================================================== */

.amp-jmiss-dashboard-tabs {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: -10px 0 20px;
    padding: 7px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(28, 19, 52, 0.10);
}

.amp-jmiss-dashboard-tab {
    min-width: 0;
    padding: 10px 3px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #777282;
    cursor: pointer;
}

.amp-jmiss-dashboard-tab strong {
    display: block;
    margin-bottom: 4px;
    color: #1b1730;
    font-size: 18px;
    line-height: 1;
}

.amp-jmiss-dashboard-tab span {
    display: block;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-jmiss-dashboard-tab-active {
    color: #fff;
    background: linear-gradient(135deg, #5423b2, #7534d5);
    box-shadow: 0 4px 12px rgba(99, 43, 192, 0.22);
}

.amp-jmiss-dashboard-tab-active strong {
    color: #fff;
}

.amp-jmiss-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 3px 3px 14px;
}

.amp-jmiss-page-title-row small {
    display: block;
    margin-bottom: 3px;
    color: #7b7587;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.amp-jmiss-page-title-row h2 {
    margin: 0;
    color: #17142c;
    font-size: 19px;
}

.amp-jmiss-large-count {
    display: flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 20px;
    background: #eadffc;
    color: #6125b9;
    font-size: 14px;
    font-weight: 800;
}

.amp-jmiss-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.amp-jmiss-summary-card {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 13px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(23, 20, 44, 0.07);
}

.amp-jmiss-summary-icon {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #642ac2;
    background: #eee6fc;
    font-size: 13px;
    font-weight: 900;
}

.amp-jmiss-summary-card small {
    display: block;
    margin-bottom: 3px;
    color: #85808f;
    font-size: 9px;
    font-weight: 700;
}

.amp-jmiss-summary-card strong {
    display: block;
    color: #211c33;
    font-size: 15px;
}

.amp-jmiss-money-summary {
    background: linear-gradient(135deg, #4f249e, #7132ca);
}

.amp-jmiss-money-summary .amp-jmiss-summary-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 9px;
}

.amp-jmiss-money-summary small,
.amp-jmiss-money-summary strong {
    color: #fff;
}

.amp-jmiss-dashboard-block {
    margin-bottom: 22px;
}

.amp-jmiss-status-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.amp-jmiss-status-dashboard button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    text-align: left;
    background: #fff;
    box-shadow: 0 3px 12px rgba(25, 20, 43, 0.06);
}

.amp-jmiss-status-dashboard strong {
    display: block;
    color: #211d30;
    font-size: 16px;
}

.amp-jmiss-status-dashboard small {
    display: block;
    margin-top: 2px;
    color: #85818d;
    font-size: 9px;
}

.amp-jmiss-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
}

.amp-jmiss-status-pending {
    background: #ed9b35;
}

.amp-jmiss-status-progress {
    background: #3187df;
}

.amp-jmiss-status-review {
    background: #7d4bd1;
}

.amp-jmiss-status-closed {
    background: #28a66a;
}

.amp-jmiss-text-button {
    padding: 4px;
    border: 0;
    background: transparent;
    color: #642bc1;
    font-size: 11px;
    font-weight: 800;
}

.amp-jmiss-dashboard-trip-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 0 0;
    border-top: 1px solid #eeeaf3;
}

.amp-jmiss-dashboard-trip-info small {
    display: block;
    margin-bottom: 3px;
    color: #8b8693;
    font-size: 9px;
}

.amp-jmiss-dashboard-trip-info strong {
    color: #393443;
    font-size: 11px;
}

.amp-jmiss-money-value {
    color: #5b25af !important;
}

.amp-jmiss-completed-group {
    margin-bottom: 22px;
}

.amp-jmiss-tab-panel {
    animation: ampJmissPanelFade 0.18s ease-out;
}

@keyframes ampJmissPanelFade {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 350px) {

    .amp-jmiss-dashboard-tab span {
        font-size: 8px;
    }

    .amp-jmiss-summary-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   JMISS TRIP DETAIL UI R5
   ========================================================== */

.amp-jmiss-detail-page {
    min-height: 100vh;
    padding-bottom: 78px;
    background: #f4f5f8;
}

.amp-jmiss-detail-hero {
    padding: 14px 16px 22px;
    color: #fff;
    background: linear-gradient(
        135deg,
        #402090 0%,
        #6d30c7 62%,
        #843ee1 100%
    );
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 22px rgba(71, 34, 139, 0.18);
}

.amp-jmiss-detail-topbar {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
}

.amp-jmiss-detail-topbar > span {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
}

.amp-jmiss-detail-back {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.14);
    font-size: 26px;
    line-height: 1;
}

.amp-jmiss-detail-top-spacer {
    width: 38px;
    height: 38px;
}

.amp-jmiss-detail-heading h2 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 800;
}

.amp-jmiss-detail-status-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.amp-jmiss-detail-status-line > span {
    color: rgba(255,255,255,0.80);
    font-size: 11px;
    font-weight: 700;
}

.amp-jmiss-detail-content {
    padding: 16px 14px;
}

.amp-jmiss-detail-card {
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(23,20,44,0.07);
}

.amp-jmiss-detail-card-title {
    margin: 0 0 13px;
    color: #211c34;
    font-size: 15px;
    font-weight: 800;
}

.amp-jmiss-detail-card p {
    margin: 0 0 12px;
    color: #494554;
    font-size: 12px;
}

.amp-jmiss-detail-card p:last-child {
    margin-bottom: 0;
}

.amp-jmiss-detail-card p strong {
    display: inline-block;
    margin-bottom: 3px;
    color: #817c89;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.amp-jmiss-action-card {
    margin: 14px 0;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        #f6f1ff 0%,
        #ffffff 100%
    );
    border: 1px solid #e8ddfb;
    box-shadow: 0 5px 18px rgba(73, 39, 131, 0.08);
}

.amp-jmiss-action-title {
    margin: 0 0 14px;
    color: #33186d;
    font-size: 17px;
    font-weight: 900;
}

.amp-jmiss-action-card label {
    display: block;
    color: #3f3947;
    font-size: 12px;
}

.amp-jmiss-action-card input[type="number"],
.amp-jmiss-action-card input[type="text"],
.amp-jmiss-action-card textarea {
    border: 1px solid #d8d2e3 !important;
    border-radius: 11px !important;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.amp-jmiss-action-card input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    padding: 9px;
    border: 1px dashed #cfc4df;
    border-radius: 10px;
    background: #fff;
    color: #5d5866;
    font-size: 11px;
}

.amp-jmiss-action-button {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(
        90deg,
        #5423b2,
        #6d30cc
    );
    box-shadow: 0 5px 14px rgba(91, 44, 160, 0.20);
    font-size: 15px;
    font-weight: 800;
}

.amp-jmiss-action-button:disabled {
    opacity: 0.65;
}

.amp-jmiss-start-card {
    border-top: 4px solid #6b32c8;
}

.amp-jmiss-complete-card {
    border-top: 4px solid #2fa86f;
}

@media (max-width: 360px) {

    .amp-jmiss-detail-heading h2 {
        font-size: 18px;
    }

    .amp-jmiss-detail-content {
        padding-right: 11px;
        padding-left: 11px;
    }

}


/* ==========================================================
   JMISS TRIP DETAILS R6
   Professional driver mobile polish
   ========================================================== */

.amp-jmiss-detail-content {
    padding-bottom: 92px;
}

/* ---------- Route ---------- */

.amp-jmiss-detail-card:first-child {
    position: relative;
    overflow: hidden;
}

.amp-jmiss-detail-card:first-child > div {
    position: relative;
    padding-left: 24px;
}

.amp-jmiss-detail-card:first-child > div::before {
    position: absolute;
    left: 2px;
    top: 4px;
    width: 10px;
    height: 10px;
    border: 3px solid #6d30cc;
    border-radius: 50%;
    background: #fff;
    content: "";
}

.amp-jmiss-detail-card:first-child > div:first-of-type::after {
    position: absolute;
    left: 8px;
    top: 18px;
    width: 2px;
    height: 28px;
    background: #ded3f3;
    content: "";
}

.amp-jmiss-detail-card:first-child > div:last-of-type::before {
    border-radius: 2px;
    background: #6d30cc;
}

/* ---------- Information cards ---------- */

.amp-jmiss-detail-card p {
    padding: 9px 0;
    margin: 0;
    border-bottom: 1px solid #f0edf4;
}

.amp-jmiss-detail-card p:last-child {
    border-bottom: 0;
}

.amp-jmiss-r6-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 12px;
    background: #f4effd;
}

.amp-jmiss-r6-money span {
    color: #696273;
    font-size: 11px;
    font-weight: 700;
}

.amp-jmiss-r6-money strong {
    color: #6325c3;
    font-size: 15px;
    font-weight: 900;
}

/* ---------- Pending progress ---------- */

.amp-jmiss-r6-progress-pending {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 13px;
    background: #f7f3ff;
}

.amp-jmiss-r6-progress-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 4px solid #dfd1f7;
    border-radius: 50%;
    background: #6d30cc;
}

.amp-jmiss-r6-progress-pending strong {
    display: block;
    margin-bottom: 3px;
    color: #30165f;
    font-size: 13px;
}

.amp-jmiss-r6-progress-pending small {
    display: block;
    color: #746d7d;
    font-size: 10px;
    line-height: 1.4;
}

/* ---------- Start / Complete Journey ---------- */

.amp-jmiss-r6-action-card {
    margin: 14px 0;
    padding: 16px;
    border: 1px solid #e7dcfa;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            #f7f2ff 0%,
            #ffffff 100%
        );
    box-shadow: 0 6px 18px rgba(72, 37, 132, 0.08);
}

.amp-jmiss-r6-complete-card {
    border-top: 4px solid #34a875;
}

.amp-jmiss-r6-action-card label {
    display: block;
    margin-bottom: 5px;
    color: #28222f;
    font-size: 12px;
    font-weight: 800 !important;
}

.amp-jmiss-r6-action-card input[type="number"],
.amp-jmiss-r6-action-card textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px !important;
    border: 1px solid #d9d3e1 !important;
    border-radius: 11px !important;
    outline: none;
    background: #fff;
    font-size: 14px;
}

.amp-jmiss-r6-action-card input[type="number"]:focus,
.amp-jmiss-r6-action-card textarea:focus {
    border-color: #7335d0 !important;
    box-shadow: 0 0 0 3px rgba(115,53,208,0.09);
}

/* ---------- File inputs ---------- */

.amp-jmiss-r6-file-input {
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px !important;
    border: 1px dashed #c9b8e6 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #514b58;
    font-size: 11px;
}

.amp-jmiss-r6-file-input::file-selector-button {
    margin-right: 10px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: #eee5fc;
    color: #5720ac;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

/* ---------- Primary action ---------- */

.amp-jmiss-action-button {
    min-height: 48px;
    margin-top: 5px;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: .01em;
}

/* ---------- Bottom navigation ---------- */

.amp-jmiss-bottom-nav {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 430px;
    margin: 0 auto;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid #ebe7f0;
    background: rgba(255,255,255,0.97);
    box-shadow: 0 -6px 20px rgba(32,24,49,0.08);
}

.amp-jmiss-nav-item {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 3px 1px;
    text-decoration: none;
    color: #85808d;
}

.amp-jmiss-nav-item > span {
    font-size: 18px;
    line-height: 1;
}

.amp-jmiss-nav-item small {
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.amp-jmiss-nav-active {
    color: #6727c5;
}

.amp-jmiss-nav-disabled {
    opacity: .45;
}



/* ==========================================================
   JMISS DASHBOARD R7 — TRUE TOTALS + DRILLDOWN
   ========================================================== */

.amp-jmiss-r7-summary-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.amp-jmiss-r7-summary-link:active {
    transform: scale(.98);
}

.amp-jmiss-r7-drilldown {
    padding-bottom: 100px;
}

.amp-jmiss-r7-total-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.amp-jmiss-r7-total-grid > div {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(41,29,66,.07);
}

.amp-jmiss-r7-total-grid small,
.amp-jmiss-r7-money-total small {
    display: block;
    color: #777080;
    font-size: 10px;
    font-weight: 800;
}

.amp-jmiss-r7-total-grid strong {
    display: block;
    margin-top: 5px;
    color: #21162f;
    font-size: 20px;
}

.amp-jmiss-r7-note {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #f5f0fd;
    color: #665e70;
    font-size: 10px;
    line-height: 1.5;
}

.amp-jmiss-r7-detail-card {
    display: block;
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(41,29,66,.07);
    color: inherit;
    text-decoration: none;
}

.amp-jmiss-r7-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.amp-jmiss-r7-route {
    margin: 11px 0;
    padding-bottom: 11px;
    border-bottom: 1px solid #efebf3;
    color: #30283a;
    font-size: 12px;
    font-weight: 800;
}

.amp-jmiss-r7-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.amp-jmiss-r7-metric-grid small {
    display: block;
    margin-bottom: 3px;
    color: #8a8390;
    font-size: 9px;
    font-weight: 700;
}

.amp-jmiss-r7-metric-grid strong {
    color: #29222f;
    font-size: 12px;
}

.amp-jmiss-r7-highlight {
    color: #6528c4 !important;
}

.amp-jmiss-r7-money-total {
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg,#5522ad,#7b36dd);
    color: #fff;
    box-shadow: 0 8px 24px rgba(93,42,177,.18);
}

.amp-jmiss-r7-money-total small {
    color: rgba(255,255,255,.8);
}

.amp-jmiss-r7-money-total strong {
    display: block;
    margin: 6px 0;
    font-size: 25px;
}

.amp-jmiss-r7-money-total span {
    font-size: 10px;
    opacity: .85;
}

.amp-jmiss-r7-money-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #f5effe;
}

.amp-jmiss-r7-money-row span {
    color: #71697b;
    font-size: 10px;
    font-weight: 700;
}

.amp-jmiss-r7-money-row strong {
    color: #6425c4;
    font-size: 15px;
}



/* =========================================================
   JMISS R8D — KM variance + received money
   ========================================================= */

.amp-jmiss-r8-metric-grid,
.amp-jmiss-r8-money-summary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:8px;
}

.amp-jmiss-r8-metric-grid > div,
.amp-jmiss-r8-money-summary > div {
    background:#f7f7fa;
    border-radius:12px;
    padding:12px;
}

.amp-jmiss-r8-metric-grid small,
.amp-jmiss-r8-money-summary small {
    display:block;
    margin-bottom:5px;
    opacity:.72;
}

.amp-jmiss-r8-metric-grid strong,
.amp-jmiss-r8-money-summary strong {
    display:block;
    font-size:17px;
}

.amp-jmiss-r8-status {
    margin-top:12px;
    border-radius:12px;
    padding:12px 14px;
    border:1px solid transparent;
}

.amp-jmiss-r8-status span,
.amp-jmiss-r8-status small {
    display:block;
}

.amp-jmiss-r8-status strong {
    display:block;
    margin:3px 0;
    font-size:17px;
}

.amp-jmiss-r8-status-match {
    background:#eaf8ef;
    border-color:#b9e4c8;
}

.amp-jmiss-r8-status-warning,
.amp-jmiss-r8-status-partial {
    background:#fff8df;
    border-color:#eed98b;
}

.amp-jmiss-r8-status-danger,
.amp-jmiss-r8-status-excess {
    background:#fff0f0;
    border-color:#efb6b6;
}

.amp-jmiss-r8-status-none {
    background:#f4f4f6;
    border-color:#dedee5;
}

.amp-jmiss-r8-success {
    margin-top:12px;
    padding:10px 12px;
    border-radius:10px;
    background:#eaf8ef;
}

.amp-jmiss-r8-error {
    margin-top:12px;
    padding:10px 12px;
    border-radius:10px;
    background:#fff0f0;
}

.amp-jmiss-r8-receipt-form {
    margin-top:16px;
}

.amp-jmiss-r8-receipt-form label {
    display:block;
    font-weight:600;
    margin:11px 0 6px;
}

.amp-jmiss-r8-receipt-form input {
    width:100%;
    box-sizing:border-box;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #d9d9e1;
    border-radius:11px;
    background:#fff;
    font-size:16px;
}

.amp-jmiss-r8-add-money {
    width:100%;
    min-height:48px;
    margin-top:14px;
    border:0;
    border-radius:12px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
}

.amp-jmiss-r8-history {
    margin-top:18px;
    border-top:1px solid #ececf1;
    padding-top:14px;
}

.amp-jmiss-r8-history h4 {
    margin:0 0 8px;
}

.amp-jmiss-r8-history-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid #eeeeF2;
}

.amp-jmiss-r8-history-row small {
    display:block;
    margin-top:3px;
    opacity:.7;
}

.amp-jmiss-r8-history-date {
    text-align:right;
    white-space:nowrap;
    font-size:12px;
    opacity:.7;
}

.amp-jmiss-r8-empty {
    margin-top:14px;
    padding:11px;
    border-radius:10px;
    background:#f7f7fa;
    opacity:.75;
}

.amp-jmiss-r8-dashboard-button {
    display:block;
    margin-top:16px;
    padding:12px;
    border-radius:11px;
    text-align:center;
    text-decoration:none;
    font-weight:700;
    background:#f4f4f7;
}



/* =========================================================
   JMISS R8E — Approved Performance + Money UI
   ========================================================= */


/* ---------------- PERFORMANCE ---------------- */

.amp-jmiss-r8e-km-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-top:14px;
    border-top:1px solid #ececf2;
    border-bottom:1px solid #ececf2;
}

.amp-jmiss-r8e-km-grid > div {
    padding:13px 8px;
    text-align:center;
    border-right:1px solid #ececf2;
}

.amp-jmiss-r8e-km-grid > div:last-child {
    border-right:0;
}

.amp-jmiss-r8e-km-grid small {
    display:block;
    opacity:.65;
    font-size:12px;
    margin-bottom:4px;
}

.amp-jmiss-r8e-km-grid strong {
    display:block;
    font-size:19px;
}

.amp-jmiss-r8e-diff-match {
    color:#159447;
}

.amp-jmiss-r8e-diff-warning {
    color:#d48b00;
}

.amp-jmiss-r8e-diff-danger {
    color:#d9272f;
}

.amp-jmiss-r8e-km-state,
.amp-jmiss-r8e-receipt-status {
    margin-top:10px;
    padding:10px 12px;
    border-radius:10px;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

.amp-jmiss-r8e-state-match {
    background:#e4f8ea;
    color:#137a38;
}

.amp-jmiss-r8e-state-warning {
    background:#fff3ca;
    color:#946200;
}

.amp-jmiss-r8e-state-danger {
    background:#ffe4e5;
    color:#bd2027;
}

.amp-jmiss-r8e-state-none {
    background:#f0f1f5;
    color:#686d79;
}


/* ---------------- MONEY SUMMARY ---------------- */

.amp-jmiss-r8e-money-page {
    padding-bottom:95px;
}

.amp-jmiss-r8e-money-summary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:20px;
}

.amp-jmiss-r8e-summary-card {
    background:#fff;
    border-radius:14px;
    padding:15px;
    box-shadow:0 4px 16px rgba(36,18,79,.07);
    border:1px solid #ece8f6;
}

.amp-jmiss-r8e-summary-card small {
    display:block;
    margin-bottom:6px;
    opacity:.67;
    font-weight:600;
}

.amp-jmiss-r8e-summary-card strong {
    display:block;
    font-size:21px;
    color:#5926c9;
}

.amp-jmiss-r8e-summary-card > span {
    display:block;
    font-size:11px;
    margin-top:3px;
    opacity:.7;
}

.amp-jmiss-r8e-summary-received strong {
    color:#159447;
}

.amp-jmiss-r8e-summary-remaining strong {
    color:#d87900;
}


/* ---------------- MONEY JOURNEY LIST ---------------- */

.amp-jmiss-r8e-money-list h3 {
    margin:6px 2px 12px;
}

.amp-jmiss-r8e-money-trip {
    background:#fff;
    border-radius:15px;
    padding:14px;
    margin-bottom:13px;
    box-shadow:0 4px 16px rgba(36,18,79,.07);
    border-left:4px solid #d8d8df;
}

.amp-jmiss-r8e-trip-match {
    border-left-color:#21a557;
}

.amp-jmiss-r8e-trip-partial {
    border-left-color:#e0a21e;
}

.amp-jmiss-r8e-trip-excess {
    border-left-color:#e03c43;
}

.amp-jmiss-r8e-trip-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.amp-jmiss-r8e-trip-head > div > strong {
    display:block;
    font-size:17px;
}

.amp-jmiss-r8e-trip-head > div > small {
    display:block;
    margin-top:5px;
    font-weight:600;
}

.amp-jmiss-r8e-money-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:13px;
    border-top:1px solid #eeeef3;
    border-bottom:1px solid #eeeef3;
}

.amp-jmiss-r8e-money-grid > div {
    text-align:center;
    padding:12px 5px;
    border-right:1px solid #eeeef3;
}

.amp-jmiss-r8e-money-grid > div:last-child {
    border-right:0;
}

.amp-jmiss-r8e-money-grid small,
.amp-jmiss-r8e-money-grid span {
    display:block;
    font-size:11px;
    opacity:.67;
}

.amp-jmiss-r8e-money-grid strong {
    display:block;
    font-size:18px;
    margin:3px 0;
}

.amp-jmiss-r8e-money-received {
    color:#16984a;
}

.amp-jmiss-r8e-money-remaining {
    color:#d87900;
}

.amp-jmiss-r8e-money-excess {
    color:#d9272f;
}

.amp-jmiss-r8e-money-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
}

.amp-jmiss-r8e-money-actions a {
    display:block;
    text-align:center;
    border:1px solid #7133df;
    border-radius:9px;
    padding:9px 6px;
    text-decoration:none;
    color:#6126c8;
    font-size:12px;
    font-weight:700;
}

.amp-jmiss-r8e-money-actions .amp-jmiss-r8e-money-add {
    background:#7133df;
    color:#fff;
}


/* ---------------- R8E BOTTOM NAV ---------------- */

.amp-jmiss-r8e-bottom-nav {
    position:fixed;
    z-index:30;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(100%, 768px);
    box-sizing:border-box;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    background:#fff;
    border-top:1px solid #e6e3ec;
    box-shadow:0 -4px 18px rgba(35,19,73,.08);
}

.amp-jmiss-r8e-bottom-nav a {
    text-align:center;
    padding:9px 4px 8px;
    text-decoration:none;
    opacity:.60;
}

.amp-jmiss-r8e-bottom-nav a span,
.amp-jmiss-r8e-bottom-nav a small {
    display:block;
}

.amp-jmiss-r8e-bottom-nav a span {
    font-size:18px;
}

.amp-jmiss-r8e-bottom-nav a small {
    font-size:10px;
    margin-top:2px;
}

.amp-jmiss-r8e-bottom-nav a.active {
    opacity:1;
    font-weight:700;
    color:#6825d4;
}


/* ---------------- MOBILE FIT ---------------- */

@media (max-width:420px) {

    .amp-jmiss-r8e-summary-card {
        padding:12px;
    }

    .amp-jmiss-r8e-summary-card strong {
        font-size:18px;
    }

    .amp-jmiss-r8e-km-grid strong,
    .amp-jmiss-r8e-money-grid strong {
        font-size:16px;
    }
}