/* === Modal Overlay === */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(3px);
            justify-content: center;
            align-items: flex-end;
            animation: fadeIn 0.3s ease forwards;
        }
        
        /* === Konten Modal ala iPhone Slide Up === */
        .modal-content {
            width: 100%;
            max-height: 90vh;
            background: #fff;
            border-radius: 20px 20px 0 0;
            padding: 20px;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
            transform: translateY(100%);
            animation: slideUp 0.4s ease forwards;
            overflow-y: auto;
            position: relative;
        }
        
        /* === Close Button === */
        .close-button {
            position: absolute;
            right: 20px;
            top: 15px;
            font-size: 24px;
            cursor: pointer;
            z-index: 10;
            color: #8a8a8e;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-right: 30px;
        }
        
        .product-info {
            display: flex;
            margin-bottom: 20px;
            gap: 15px;
        }
        
        .modal-product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
        }
        
        .modal-product-details {
            flex: 1;
        }
        
        .modal-product-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .modal-product-price {
            font-size: 18px;
            font-weight: 700;
            background: linear-gradient(to bottom, #2A0D45, var(--dark-bg));
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #c6c6c8;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #0071e3;
        }
        
        .pay-button {
            width: 100%;
            background: #25D366;
            color: white;
            border: none;
            padding: 16px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            transition: background 0.2s;
            position: relative;
            overflow: hidden;
        }
        
        .pay-button:hover {
            background: #128C7E;
        }
        
        /* Animasi Truck */
        .truck-animation {
            position: absolute;
            bottom: -30px;
            left: -80px;
            transition: transform 1.2s ease-in-out;
            transform: translateX(-100%);
            z-index: 10;
        }
        
        .truck-body {
            width: 60px;
            height: 25px;
            background: #ff6b6b;
            border-radius: 5px 5px 0 0;
            position: relative;
        }
        
        .truck-cabin {
            width: 25px;
            height: 20px;
            background: #ff8e8e;
            position: absolute;
            right: -15px;
            top: -10px;
            border-radius: 5px 5px 0 0;
        }
        
        .truck-window {
            width: 12px;
            height: 8px;
            background: #a6e1ff;
            position: absolute;
            right: -10px;
            top: -7px;
            border-radius: 2px;
        }
        
        .truck-wheels {
            display: flex;
            position: absolute;
            bottom: -8px;
            left: 5px;
            gap: 25px;
        }
        
        .wheel {
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            position: relative;
        }
        
        .wheel::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            background: #ccc;
            border-radius: 50%;
            top: 3px;
            left: 3px;
        }
        
        .package {
            width: 20px;
            height: 18px;
            background: #4ecdc4;
            position: absolute;
            top: -25px;
            left: 10px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .package::before {
            content: '';
            width: 12px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 2px;
        }
        
        /* Jalur jalan */
        .road {
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 3px;
            background: #777;
        }
        
        /* Efek truck bergerak */
        .pay-button.active .truck-animation {
            transform: translateX(400px);
        }
        
        /* Efek getaran pada paket */
        @keyframes packageShake {
            0%, 100% { transform: translateY(0) rotate(0); }
            25% { transform: translateY(-2px) rotate(-2deg); }
            75% { transform: translateY(2px) rotate(2deg); }
        }
        
        .package {
            animation: packageShake 0.4s infinite alternate;
        }
        
        /* Efek roda berputar */
        @keyframes wheelRoll {
            from { transform: rotate(0); }
            to { transform: rotate(360deg); }
        }
        
        .wheel::after {
            animation: wheelRoll 0.8s linear infinite;
        }
        
        /* === Animasi === */
        @keyframes fadeIn {
            from { background: rgba(0,0,0,0); }
            to { background: rgba(0,0,0,0.4); }
        }
        
        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes slideDown {
            from { transform: translateY(0); opacity: 1; }
            to { transform: translateY(100%); opacity: 0; }
        }
        
        
        /* === Handle untuk iPhone Notch (Safe Area) === */
        @supports(padding: max(0px)) {
            .modal-content {
                padding-bottom: calc(90px + env(safe-area-inset-bottom));
            }
            
            .pay-button {
                margin-bottom: env(safe-area-inset-bottom);
            }
        }