:root {
            --ios-bg: #F2F2F7;
            --ios-card: #FFFFFF;
            --ios-text: #1C1C1E;
            --ios-sub: #8E8E93;
            --ios-blue: #007AFF;
            --ios-green: #34C759;
            --ios-red: #FF3B30;
            --ios-orange: #FF9500;
            --ios-separator: rgba(60, 60, 67, 0.12);
            --pass-dark: #1C1C1E;
            --pass-darker: #000000;
            --gold-accent: #D4AF37;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: var(--ios-bg);
            color: var(--ios-text);
            padding-bottom: 50px;
        }

        .mobile-container {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }

        /* =============================================================
           APPLE PAY / WALLET FROSTED HEADER & SPOTLIGHT SEARCH
           ============================================================= */
        header {
            position: sticky;
            top: 0;
            background: rgba(242, 242, 247, 0.82);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 0.5px solid var(--ios-separator);
            padding: 14px 16px 12px;
            z-index: 100;
        }

        .header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .header-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .brand-logo-wrap {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        }

        .brand-logo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .header-brand-text h1 {
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: -0.4px;
            color: var(--ios-text);
            line-height: 1.1;
        }

        .header-brand-text span {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--ios-sub);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .wallet-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #000;
            color: #fff;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: -0.1px;
        }

        .wallet-pill svg {
            width: 13px;
            height: 13px;
        }

        /* Spotlight Search Input */
        .search-wrapper {
            position: relative;
        }

        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            width: 16px;
            height: 16px;
            color: var(--ios-sub);
            pointer-events: none;
        }

        .search-input {
            width: 100%;
            padding: 10px 36px 10px 36px;
            border-radius: 12px;
            border: 1px solid transparent;
            font-size: 0.93rem;
            background-color: rgba(118, 118, 128, 0.12);
            color: var(--ios-text);
            outline: none;
            transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
            letter-spacing: -0.2px;
        }

        .search-input::placeholder {
            color: var(--ios-sub);
        }

        .search-input:focus {
            background-color: #FFFFFF;
            border-color: rgba(0, 122, 255, 0.4);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
        }

        .search-clear {
            position: absolute;
            right: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #C7C7CC;
            color: #fff;
            border: none;
            font-size: 12px;
            line-height: 1;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Professional Apple Spotlight Dropdown */
        .search-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border-radius: 16px;
            border: 0.5px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
            max-height: 350px;
            overflow-y: auto;
            display: none;
            z-index: 200;
            padding: 6px;
        }

        .search-dropdown-header {
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--ios-sub);
            padding: 6px 10px 4px;
        }

        .search-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .search-item:hover, .search-item:active {
            background-color: rgba(0, 122, 255, 0.08);
        }

        .search-item-left {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: 0;
            flex: 1;
        }

        .search-item-avatar {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: linear-gradient(135deg, #1C1C1E, #3A3A3C);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            flex-shrink: 0;
        }

        .search-item-info {
            min-width: 0;
            flex: 1;
        }

        .search-item-title {
            font-weight: 600;
            font-size: 0.88rem;
            color: var(--ios-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: -0.2px;
        }

        .search-item-sub {
            font-size: 0.74rem;
            color: var(--ios-sub);
            margin-top: 2px;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .search-item-right {
            text-align: right;
            flex-shrink: 0;
        }

        .search-item-price {
            font-size: 0.86rem;
            font-weight: 700;
            color: var(--ios-text);
        }

        .search-item-OrderNo {
            font-size: 0.68rem;
            color: var(--ios-blue);
            font-weight: 600;
            background: rgba(0, 122, 255, 0.1);
            padding: 2px 6px;
            border-radius: 6px;
            display: inline-block;
            margin-top: 2px;
        }

        /* =============================================================
           APPLE PAY PASS & GROUPED LIST CARDS
           ============================================================= */
        .content-area {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        /* Top Dark Apple Pay Card */
        .apple-pass-card {
            background: linear-gradient(145deg, #242426 0%, #121214 60%, #000000 100%);
            color: #ffffff;
            border-radius: 22px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
        }

        .apple-pass-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 240px;
            height: 240px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
            pointer-events: none;
        }

        .pass-top-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 18px;
        }

        .pass-chip-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nfc-chip {
            width: 34px;
            height: 26px;
            border-radius: 5px;
            background: linear-gradient(135deg, #e6c665 0%, #b58d28 100%);
            position: relative;
            box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nfc-chip::before {
            content: '';
            width: 20px;
            height: 14px;
            border: 1px solid rgba(0,0,0,0.35);
            border-radius: 3px;
        }

        .pass-merchant-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.65);
            font-weight: 600;
        }

        .pass-order-id {
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: -0.3px;
            color: #fff;
        }

        .status-pill {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 5px 11px;
            border-radius: 20px;
            letter-spacing: 0.2px;
            text-transform: uppercase;
        }

        .status-delivered-successfully { background: rgba(52, 199, 89, 0.2); color: #4cd964; border: 1px solid rgba(52, 199, 89, 0.35); }
        .status-pending { background: rgba(255, 204, 0, 0.2); color: #ffd60a; border: 1px solid rgba(255, 204, 0, 0.35); }
        .status-rejected, .status-cancelled-by-customer, .status-invalid-customer-details { background: rgba(255, 59, 48, 0.2); color: #ff6961; border: 1px solid rgba(255, 59, 48, 0.35); }
        .status-on-the-way { background: rgba(10, 132, 255, 0.2); color: #64d2ff; border: 1px solid rgba(10, 132, 255, 0.35); }
        .status-product-out-of-stock, .status-out-of-service-area { background: rgba(255, 149, 0, 0.2); color: #ff9f0a; border: 1px solid rgba(255, 149, 0, 0.35); }
        .status-default { background: rgba(255, 255, 255, 0.14); color: #ebebf5; }

        .pass-amount-block {
            margin-bottom: 18px;
        }

        .pass-amount-lbl {
            font-size: 0.72rem;
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .pass-amount-val {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.8px;
            color: #fff;
            line-height: 1.15;
        }

        .pass-product-line {
            font-size: 0.88rem;
            color: rgba(255,255,255,0.85);
            font-weight: 500;
            margin-top: 2px;
        }

        .pass-bottom-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding-top: 14px;
            border-top: 1px solid rgba(255,255,255,0.12);
        }

        .pass-meta-item span {
            display: block;
            font-size: 0.64rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 3px;
        }

        .pass-meta-item strong {
            font-size: 0.78rem;
            font-weight: 600;
            color: #fff;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* iOS Grouped List Sections */
        .ios-section-title {
            font-size: 0.76rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--ios-sub);
            margin: 0 0 6px 14px;
        }

        .card {
            background: var(--ios-card);
            border-radius: 16px;
            padding: 4px 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            font-size: 0.88rem;
            border-bottom: 0.5px solid var(--ios-separator);
            gap: 12px;
        }

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

        .detail-label {
            color: var(--ios-sub);
            font-weight: 400;
            flex-shrink: 0;
        }

        .detail-value {
            font-weight: 600;
            text-align: right;
            color: var(--ios-text);
            word-break: break-word;
            letter-spacing: -0.2px;
        }

        .masked-mono {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.4px;
        }

        /* Apple Pay Style Action Button */
        .btn-apple-pay {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 15px 18px;
            border-radius: 14px;
            font-size: 0.96rem;
            font-weight: 600;
            border: none;
            cursor: pointer;
            background: #000000;
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
            transition: transform 0.15s ease, opacity 0.15s ease;
            letter-spacing: -0.2px;
        }

        .btn-apple-pay:active {
            transform: scale(0.98);
            opacity: 0.9;
        }

        .btn-apple-blue {
            background: var(--ios-blue);
            box-shadow: 0 8px 20px rgba(0, 122, 255, 0.25);
        }

        /* Empty State */
        .empty-placeholder {
            text-align: center;
            padding: 60px 24px;
            background: var(--ios-card);
            border-radius: 20px;
            margin-top: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        }

        .empty-icon-circle {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            background: linear-gradient(135deg, #000000, #3a3a3c);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            box-shadow: 0 8px 18px rgba(0,0,0,0.15);
        }

        /* =============================================================
           MODAL SHEET (APPLE WALLET PASS PREVIEW)
           ============================================================= */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 14px;
            z-index: 300;
        }

        .modal-body {
            background: var(--ios-bg);
            width: 100%;
            max-width: 450px;
            border-radius: 24px;
            padding: 16px;
            max-height: 94vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
            animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes modalPop {
            from { transform: scale(0.95) translateY(10px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        .modal-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 0 4px;
        }

        .modal-close-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background: rgba(118, 118, 128, 0.16);
            color: var(--ios-text);
            font-size: 1.1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* =============================================================
           PRINTABLE / DOWNLOADABLE WARRANTY CERTIFICATE CARD
           ============================================================= */
        .warranty-card {
            background: #ffffff;
            border: 1.5px solid #1C1C1E;
            border-radius: 16px;
            padding: 20px;
            position: relative;
            color: #1C1C1E;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        .warranty-card::before {
            content: '';
            position: absolute;
            top: 5px; left: 5px; right: 5px; bottom: 5px;
            border: 1px solid var(--gold-accent);
            border-radius: 12px;
            pointer-events: none;
        }

        .wc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1.5px solid #1C1C1E;
            padding-bottom: 12px;
            margin-bottom: 12px;
        }

        .wc-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .wc-brand img {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            object-fit: cover;
        }

        .wc-brand h2 {
            font-size: 1.02rem;
            font-weight: 800;
            letter-spacing: 0.3px;
            color: #1C1C1E;
        }

        .wc-brand span {
            display: block;
            font-size: 0.62rem;
            color: #b58d28;
            letter-spacing: 1.4px;
            font-weight: 700;
        }

        .wc-badge {
            background: #1C1C1E;
            color: #fff;
            font-size: 0.62rem;
            font-weight: 800;
            padding: 5px 10px;
            border-radius: 20px;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .wc-title-banner {
            text-align: center;
            margin-bottom: 14px;
        }

        .wc-title-banner h3 {
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: 0.8px;
            color: #1C1C1E;
            text-transform: uppercase;
        }

        .wc-title-banner p {
            font-size: 0.68rem;
            color: var(--ios-sub);
            margin-top: 2px;
        }

        .wc-product-box {
            background: #F2F2F7;
            border-left: 4px solid #1C1C1E;
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 12px;
        }

        .wc-prod-name {
            font-size: 0.92rem;
            font-weight: 700;
            color: #1C1C1E;
        }

        .wc-prod-specs {
            font-size: 0.74rem;
            color: #636366;
            margin-top: 2px;
        }

        /* Precision Timeline Grid */
        .wc-dates-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }

        .wc-date-cell {
            background: #FAFAFC;
            border: 1px solid #E5E5EA;
            border-radius: 10px;
            padding: 9px 10px;
        }

        .wc-date-cell.highlight {
            background: #F0FDF4;
            border-color: #BBF7D0;
        }

        .wc-date-cell.no-warranty-cell {
            background: #F2F2F7;
            border-color: #D1D1D6;
        }

        .wc-date-cell.full {
            grid-column: span 2;
            background: #EFF6FF;
            border-color: #BFDBFE;
        }

        .wc-date-lbl {
            font-size: 0.62rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--ios-sub);
            letter-spacing: 0.5px;
        }

        .wc-date-val {
            font-size: 0.82rem;
            font-weight: 700;
            color: #1C1C1E;
            margin-top: 2px;
        }

        .wc-time-val {
            font-size: 0.7rem;
            color: #636366;
            font-weight: 500;
        }

        /* Order Meta Details Table */
        .wc-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.75rem;
            margin-bottom: 12px;
        }

        .wc-table td {
            padding: 5px 0;
            border-bottom: 1px dashed #E5E5EA;
        }

        .wc-table td:first-child {
            color: var(--ios-sub);
            width: 42%;
        }

        .wc-table td:last-child {
            font-weight: 600;
            text-align: right;
            color: #1C1C1E;
        }

        /* Guarantee Signoff footer */
        .wc-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 8px;
            padding-top: 10px;
            border-top: 1px solid #E5E5EA;
        }

        .wc-stamp {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.65rem;
            color: var(--ios-sub);
        }

        .wc-seal {
            width: 34px;
            height: 34px;
            border: 1.5px solid var(--gold-accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.52rem;
            font-weight: 900;
            color: #b58d28;
            transform: rotate(-12deg);
            letter-spacing: 0.5px;
        }

        .wc-signature-box {
            text-align: right;
        }

        .wc-signature-line {
            font-family: 'Brush Script MT', 'Snell Roundhand', cursive, sans-serif;
            font-size: 1.1rem;
            color: #1C1C1E;
        }

        .wc-sign-sub {
            font-size: 0.6rem;
            color: var(--ios-sub);
            text-transform: uppercase;
            border-top: 1px solid #C7C7CC;
            padding-top: 2px;
            margin-top: 2px;
        }