/* src/css/time.css - REALISTIC RIPPED BOARDING PASS 🎫  */

#time {
    position: relative;
    z-index: 2;
    padding: 3rem 1rem 5rem 1rem;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* FIX: Force no scroll */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow: hidden; 
}

.time-container {
    max-width: 650px; /* Lebar lebih lega */
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Ensure content stays inside */
}

/* HEADER STYLE */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-family: var(--sacramento);
    font-size: 3rem;
    color: var(--heading-text-color);
    margin-bottom: 0.5rem;
}

.section-desc {
    font-size: 0.95rem;
    color: var(--main-text-color);
    opacity: 0.8;
}

/* --- TICKET CONTAINER --- */
.pillar-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1rem;
    perspective: 1000px;
}

/* --- TICKET WRAPPER (SHADOW) --- */
/* Kita butuh wrapper luar untuk drop-shadow karena mask-image akan memotong shadow di elemen utama */
.ticket-wrapper {
    filter: drop-shadow(0 10px 20px var(--shadow-color));
    transition: transform 0.3s ease;
}

.ticket-wrapper:hover {
    transform: translateY(-5px) rotateX(2deg);
}

/* --- TICKET BODY (THE MAIN CLIPPED SHAPE) --- */
.ticket {
    position: relative;
    display: flex;
    width: 100%;
    
    /* BACKGROUND: KIRI PUTIH, KANAN DARK (STUB) */
    background: linear-gradient(
        to right, 
        var(--card-bg-color) 0%, 
        var(--card-bg-color) 68%, 
        var(--heading-text-color) 68%, 
        var(--heading-text-color) 100%
    );

    /* --- MASKING MAGIC (RIPPED EFFECT) --- */
    /* Membuat efek sobekan vertikal di posisi 68% */
    --rip-x: 68%;
    --rip-s: 14px;      /* Ukuran Gerigi/Sobekan */
    --notch-cn: 20px;   /* Ukuran Coakan Sudut Luar */
    
    -webkit-mask-image: 
        /* 1. CORNER NOTCHES (Sudut Luar) */
        radial-gradient(circle at top left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at top right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at bottom left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at bottom right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        
        /* 2. VERTICAL RIPPED LINE (Garis Sobekan Tengah) */
        /* Menggunakan radial-gradient berulang vertikal */
        radial-gradient(circle at var(--rip-x) 50%, transparent 6px, black 6.5px);
        
    -webkit-mask-size: 
        /* Corner Notches: Full Size (No Repeat) */
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        
        /* Ripped Line: Ulang Vertikal setiap 25px */
        100% 20px;
        
    -webkit-mask-position: 
        top left, top right, bottom left, bottom right,
        left top; /* Ripped line position is defined in gradient */
        
    -webkit-mask-repeat: 
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-y;
        
    -webkit-mask-composite: 
        source-in, source-in, source-in, source-in,
        source-in;
        
    /* Standard Syntax Backup */
    mask-image: 
        radial-gradient(circle at top left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at top right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at bottom left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at bottom right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
        radial-gradient(circle at var(--rip-x) 50%, transparent 6px, black 6.5px);
        
    mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 20px;
    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
    mask-position: 
        top left, top right, bottom left, bottom right,
        left top;
    mask-composite: intersect;
    
    padding: 2rem; /* Padding dalam yang aman */
    min-height: 220px;
}

/* ZIGZAG VARIANTS */
/* Default: Stub on RIGHT (tickets 1, 3, 5...) */
.ticket-stub-right {
    flex-direction: row; /* Main left, Stub right */
}

/* Reversed: Stub on LEFT (tickets 2, 4, 6...) */
.ticket-stub-left {
    flex-direction: row-reverse; /* Stub left, Main right */
    
    /* Mirror the background gradient */
    background: linear-gradient(
        to left,  /* REVERSED */
        var(--card-bg-color) 0%, 
        var(--card-bg-color) 68%, 
        var(--heading-text-color) 68%, 
        var(--heading-text-color) 100%
    );
    
    /* Mirror the rip position */
    --rip-x: 32%; /* Flip from 68% to 32% (100% - 68%) */
}

/* --- MAIN PART (LEFT) --- */
.ticket-main {
    flex: 0 0 68%; /* Fix width sesuai titik potong 68% */
    padding-right: 2rem; /* Jarak aman dari sobekan */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* HEADER: LOTTIE & TYPE */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 2px dashed var(--border-color); /* Garis putus halus internal */
    padding-bottom: 0.8rem;
}

.ticket-airline-logo {
    width: 80px;
    height: 80px;
}

.ticket-class {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent-color);
    text-transform: uppercase;
    border: 1px solid var(--accent-color);
    padding: 4px 10px;
    border-radius: 4px;
}

/* PASSENGER INFO */
.ticket-body {
    margin-bottom: 1.5rem;
}

.label {
    display: block;
    font-size: 0.65rem;
    color: var(--main-text-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.passenger-name {
    font-family: var(--sacramento);
    font-size: 2.2rem;
    color: var(--heading-text-color);
    line-height: 1;
    margin: 0;
}

/* FLIGHT GRID */
.flight-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dua kolom: Date | Time */
    gap: 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading-text-color);
}

.location-value {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--main-text-color);
    margin-top: 4px;
}

/* --- STUB PART (RIGHT) --- */
.ticket-stub {
    flex: 0 0 32%; /* Sisa lebar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 1.5rem; /* Kompensasi sobekan */
    border-left: 2px dashed var(--button-primary-text); /* White dashed line on dark bg */
    color: var(--button-primary-text); /* Text white */
}

.stub-code {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--button-primary-text); /* White text */
}

.stub-month {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-color); /* Keep Accent or make White? Let's keep accent for now if visible, otherwise white */
    margin-bottom: 1.5rem;
}

.stub-divider {
    width: 80%;
    height: 1px;
    border-bottom: 2px dashed var(--border-white-light); /* White dashed separator */
    margin: 0.5rem 0 1rem 0;
    opacity: 0.8;
}

/* MAP BUTTON STUB */
.btn-map-stub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--button-primary-text); /* White button */
    color: var(--heading-text-color); /* Dark text */
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.btn-map-stub:hover {
    background-color: var(--accent-color);
    color: var(--button-primary-text);
}

/* BARCODE FAKE Vertical */
.barcode-vertical {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg); /* Barcode Vertikal di sisi kanan */
    width: 100px;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        var(--border-white-light),
        var(--border-white-light) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.5;
    pointer-events: none;
}


/* --- RESPONSIVE MOBILE (TRUE RESPONSIVE HORIZONTAL - SHARP VERSION) --- */
@media screen and (max-width: 600px) {
    /* Full Width & Reduced Padding */
    #time {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .time-container {
        padding: 0;
        overflow: hidden;
    }
    
    .pillar-container {
        perspective: none; /* Disable 3D to prevent blur */
        gap: 1rem;
    }

    .ticket-wrapper {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 0;
        /* REMOVE FILTER DROP-SHADOW WHICH CAUSES BLUR ON MOBILE */
        filter: none; 
    }


    .ticket {
        width: 100%;
        min-width: 0;
        /* REMOVED: flex-direction: row; - Let zigzag classes control this */
        transform: none;
        padding: 0; 
        min-height: auto;
        
        /* Use standard box-shadow instead of filter for sharpness, 
           even if it doesn't perfectly follow the notch (trade-off for clarity) */
        box-shadow: 0 4px 10px var(--shadow-color); 
        
        /* REMOVED: background gradient - Let zigzag classes control this */
        
        /* Simplified Mask for Mobile Performance */
        --rip-x: 70%; /* Give more space to Main (Left) - will be overridden by zigzag classes */
        --notch-cn: 12px;
        
        -webkit-mask-image: 
            radial-gradient(circle at top left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at top right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at bottom left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at bottom right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at var(--rip-x) 50%, transparent 4px, black 4.5px);
            
        mask-image: 
            radial-gradient(circle at top left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at top right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at bottom left, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at bottom right, transparent var(--notch-cn), black calc(var(--notch-cn) + 0.5px)),
            radial-gradient(circle at var(--rip-x) 50%, transparent 4px, black 4.5px);
            
        -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 12px;
        mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 12px;
        
        /* Fix text rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        backface-visibility: hidden;
    }
    
    /* MOBILE ZIGZAG VARIANTS */
    /* Default: Stub on RIGHT (tickets 1, 3, 5...) */
    .ticket-stub-right {
        flex-direction: row; /* Main left, Stub right */
        
        background: linear-gradient(
            to right, 
            var(--card-bg-color) 0%, 
            var(--card-bg-color) 70%, 
            var(--heading-text-color) 70%, 
            var(--heading-text-color) 100%
        );
        
        --rip-x: 70%;
    }
    
    /* Reversed: Stub on LEFT (tickets 2, 4, 6...) */
    .ticket-stub-left {
        flex-direction: row-reverse; /* Stub left, Main right */
        
        background: linear-gradient(
            to left, 
            var(--card-bg-color) 0%, 
            var(--card-bg-color) 70%, 
            var(--heading-text-color) 70%, 
            var(--heading-text-color) 100%
        );
        
        --rip-x: 30%; /* Flip from 70% to 30% */
    }
    
    
    /* --- MAIN PART (LEFT 70%) --- */
    /* Give more width to main content to prevent "messy" wrapping */
    .ticket-main {
        flex: 0 0 70%;
        max-width: 70%;
        padding: 1rem;
        padding-right: 1rem;
        border-right: 1px dashed var(--border-color);  
    }
    
    .ticket-header {
        margin-bottom: 0.8rem;
        padding-bottom: 0.5rem;
        border-bottom-width: 1px;
        display: flex;
        justify-content: flex-start; 
    }
    
    .ticket-airline-logo { width: 35px; height: 35px; } 
    
    .ticket-class { 
        font-size: 0.6rem; 
        font-weight: 700;
        padding: 3px 10px; 
        border: 1px solid var(--heading-text-color);
        border-radius: 4px;
        color: var(--heading-text-color);
        letter-spacing: 1px;
    }
    
    .ticket-body {
        margin-bottom: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        width: 100%;
        overflow: hidden; 
    }
    
    /* Event Name Larger */
    .event-name {
        font-size: 1.1rem; 
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden; 
        text-overflow: ellipsis; 
        max-width: 100%; 
        display: block;
        margin-top: 2px;
    }
    
    .passenger-info {
        width: 100%; 
        overflow: hidden;
    }
    
    /* Compact Grid */
    .flight-info {
        display: flex; 
        flex-direction: column;
        gap: 0.8rem; /* More spacing */
        width: 100%; 
    }
    
    .ticket-row {
        display: flex; 
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem; 
    }
    
    .flight-info .info-item:nth-child(1),
    .flight-info .info-item:nth-child(2) {
        display: inline-block; 
        width: 48%;
    }
    
    .info-item {
        margin-bottom: 2px;
    }
    
    .info-value { 
        font-size: 0.95rem; /* Larger Text */
        color: var(--heading-text-color); 
        font-weight: 700;
    }
    
    .label { 
        font-size: 0.65rem; /* Larger Label */
        color: var(--main-text-color); 
        font-weight: 600;
        margin-bottom: 2px;
    }
    
    .location-value { 
        font-size: 0.85rem; /* Larger Location */
        line-height: 1.3; 
        color: var(--heading-text-color);
    }
    
    /* --- STUB PART (RIGHT 30%) --- */
    .ticket-stub {
        flex: 0 0 30%;
        max-width: 30%;
        padding: 0.8rem 0.5rem;
        border: none;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem; /* Space elements */
        
        color: var(--button-primary-text); /* White text on mobile */
    }
    
    /* New Style for Lottie in Stub */
    .ticket-airline-logo { 
        width: 60px; 
        height: 60px; 
        margin-bottom: 0;
    } 
    
    .stub-code { 
        font-size: 1.8rem; 
        color: var(--button-primary-text); /* White */
        font-weight: 800;
        line-height: 1;
    }
    
    .stub-month { 
        font-size: 0.7rem; 
        font-weight: 700;
        margin-bottom: 0.5rem; 
    }
    
    .btn-map-stub {
        padding: 6px 8px;
        font-size: 0.6rem;
        width: 100%;
        max-width: 80px;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--heading-text-color); /* Dark text */
        background-color: var(--button-primary-text); /* White button */
    }
    
    .barcode-vertical { display: none; }
}