.flight-switcher{

    display:flex;

    width:fit-content;

    margin:0 auto calc(16px * var(--mobile-scale));

    padding:4px;

    background:#f4efe5;

    border:1px solid rgba(205,163,73,.25);

    border-radius:999px;

}

.flight-tab{

    padding:
        calc(8px * var(--mobile-scale))
        calc(18px * var(--mobile-scale));

    border:none;

    border-radius:999px;

    background:transparent;

    color:#777;

    font-family:var(--body-font);

    font-size:calc(.85rem * var(--mobile-scale));

    cursor:pointer;

    transition:.25s ease;

}

.flight-tab--active{

    background:var(--gold);

    color:#fff;

}

/* ============================
   Flight Switcher
============================ */

.flight-switcher {
    width: 100%;
    margin-bottom: 18px;
}

.flight-switcher-inner {
    display: flex;
    width: 100%;

    border: 1px solid rgba(198, 154, 58, 0.25);
    border-radius: 28px;

    overflow: hidden;
}

.flight-tab {
    position: relative;

    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 16px 14px;

    border: none;
    background: transparent;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;

    color: #777;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

/* Divider between the two tabs */

.flight-tab + .flight-tab {
    border-left: 1px solid rgba(198, 154, 58, 0.15);
}

/* Aircraft icon */

.flight-tab-icon {
    font-size: 16px;
    line-height: 1;

    opacity: 0.55;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Active tab */

.flight-tab--active {
    color: #c99b3b;
    font-weight: 700;
}

/* Active underline */

.flight-tab::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: 0;

    height: 3px;

    background: #c99b3b;

    border-radius: 3px 3px 0 0;

    transform: scaleX(0);

    transition: transform 0.2s ease;
}

.flight-tab--active::after {
    transform: scaleX(1);
}

.flight-tab--active .flight-tab-icon {
    opacity: 1;
    transform: translateY(-1px);
}

/* ============================
   Boarding Pass
============================ */

.boarding-pass{

    width:100%;

    max-width:100%;


    background:
    linear-gradient(
        rgba(255,255,255,.97),
        rgba(255,255,255,.97)
    ),
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,.008) 8px,
        rgba(0,0,0,.008) 9px
    );

    border:2px solid rgba(205,163,73,.35);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 24px 55px rgba(0,0,0,.10);

     transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.boarding-pass:hover{

    transform:translateY(-6px);

    box-shadow:
        0 34px 70px rgba(0,0,0,.14);

}

/* ============================
   Header
============================ */

.ticket-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 40px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.ticket-title{

    display:flex;

    align-items:center;

    gap:20px;

}

.ticket-title h1{

    color: #cda447;

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:2.8rem;

    font-weight:600;

}

.ticket-title p{

    margin:4px 0 0;

    color:#888;

}

.plane-icon{

    font-size:2rem;

    color:#c8a24b;

}

.ticket-ref{

    color:#c8a24b;

    font-size:1rem;

    letter-spacing:5px;

    font-weight:600;

}

/* ============================
   Body
============================ */

.ticket-body{

    display:grid;

    grid-template-columns:1fr 110px;

}

.ticket-main{

    min-height:250px;

    padding:50px;

    position:relative;

}

/* perforated divider */

.ticket-main::after{

    content:"";

    position:absolute;

    top:0;

    right:-1px;

    width:2px;

    height:100%;

    background:
        repeating-linear-gradient(

            to bottom,

            rgba(0,0,0,.18),

            rgba(0,0,0,.18) 8px,

            transparent 8px,

            transparent 16px

        );

}

/* ============================
   Stub
============================ */

.ticket-stub{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    padding:20px;

    background:#faf8f2;

}

.stub-airline{

    font-size:.85rem;

    font-weight:600;

    letter-spacing:3px;

    color:var(--gold);

}

.stub-flight{

    font-size:1.4rem;

    font-weight:700;

    color:var(--text);

}

.stub-route{

    font-size:.95rem;

    color:#666;

}

.stub-date{

    font-size:1.1rem;

    font-weight:600;

    color:var(--text);

}

.stub-barcode{

    width:42px;

    height:120px;

    background:
        repeating-linear-gradient(
            to right,

            #111 0px,
            #111 2px,

            transparent 2px,
            transparent 4px,

            #111 4px,
            #111 5px,

            transparent 5px,
            transparent 7px,

            #111 7px,
            #111 10px,

            transparent 10px,
            transparent 12px,

            #111 12px,
            #111 13px,

            transparent 13px,
            transparent 16px
        );

        margin:10px 0;

}

.stub-label{

    font-size:.7rem;

    letter-spacing:2px;

    color:#999;

}

/* ticket cut-outs */

.ticket-stub::before{

    content:"";

    position:absolute;

    left:-18px;

    top:-18px;

    width:36px;

    height:36px;

    background:#f5f1e8;

    border-radius:50%;

}

.ticket-stub::after{

    content:"";

    position:absolute;

    left:-18px;

    bottom:-18px;

    width:36px;

    height:36px;

    background:#f5f1e8;

    border-radius:50%;

}

.flight-route{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:10px;

    margin-top:55px;

}

.airport{

    text-align:center;

}

.airport-code{

    font-family:"Cormorant Garamond",serif;

    font-size:4.8rem;

    letter-spacing: -2px;

    font-weight:700;

    color:#222;

    line-height:1;

}

.airport-name{

    margin-top:4px;

    font-size:1.2rem;

    color:#666;

}

.flight-date{

    margin-top:18px;

    font-size:.95rem;

    color:#777;

}

.flight-time{

    margin-top:2px;

    font-size:2.2rem;

    font-weight:700;

    color:#000;

}

.route{

    position:relative;

    width:360px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.route-line{

    width:100%;

    height:3px;

    border-radius:10px;

    background:linear-gradient(
        to right,
        #cda349,
        #e7cb79,
        #cda349
    );

}

.plane{

    position:absolute;

    left:50%;

    top:50%;

    /* Moderate climb */
transform:translate(-50%,-50%) rotate(30deg);

    background:white;

    padding:8px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.plane svg{

    width:24px;

    height:24px;

    color:var(--gold);

    stroke-width:2.2;

}

.flight-duration{

    position:absolute;

    top:38px;

    left:50%;

    transform:translateX(-50%);

    text-align:center;

    white-space:nowrap;

}

.flight-duration span{

    display:block;

    font-size:.8rem;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#999;

}

.flight-duration strong{

    display:block;

    margin-top:6px;

    font-size:1.1rem;

    font-weight:600;

    color:#333;

}

.flight-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:12px;

    padding:8px 14px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.5px;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

}

.status-scheduled{

    background:#eef8ef;

    color:#2e7d32;

}

.status-scheduled .status-dot{

    background:#43a047;

}

.status-delayed{

    background:#fff8e1;

    color:#ef6c00;

}

.status-delayed .status-dot{

    background:#fb8c00;

}

.status-boarding{

    background:#e3f2fd;

    color:#1565c0;

}

.status-boarding .status-dot{

    background:#1e88e5;

}

.status-cancelled{

    background:#ffebee;

    color:#c62828;

}

.status-cancelled .status-dot{

    background:#e53935;

}

.flight-info{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

/* ======================================================
   BOARDING PASS DISCLAIMER
   ====================================================== */

.boarding-pass-disclaimer{
    margin:10px auto 0;
    padding:8px 12px;

    text-align:center;

    color:#888;

    font-family:var(--body-font);

    font-size:.85rem;

    line-height:1.5;
}

.boarding-pass-disclaimer strong{
    display:block;

    margin-bottom:3px;

    color:#777;

    font-size:.75rem;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:600;
}

.boarding-pass-disclaimer span{
    display:block;
}