*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.mobile-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;

}

.mobile-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;

}

.mobile-flight-tab--active{

    background:var(--gold);

    color:#fff;

}

/* ======================================================
   MOBILE FLIGHT SWITCHER
   ====================================================== */

.mobile-flight-switcher{
    width:100%;
    margin:0 auto calc(18px * var(--mobile-scale));
}

.mobile-flight-switcher-inner{
    display:flex;
    width:100%;
    padding:4px;

    background:#f4efe5;

    border:1px solid rgba(205,163,73,.30);
    border-radius:12px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.05);
}

.mobile-flight-tab{
    position:relative;

    flex:1;

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

    min-height:42px;
    padding:10px 8px;

    border:none;
    border-radius:9px;

    background:transparent;

    font-family:var(--body-font);
    font-size:calc(.78rem * var(--mobile-scale));
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;

    color:#777;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .15s ease;
}


/* Divider between options */

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


/* Aircraft icon */

.mobile-flight-tab-icon{
    font-size:calc(15px * var(--mobile-scale));
    line-height:1;

    opacity:.55;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* Active flight */

.mobile-flight-tab--active{
    background:var(--gold);
    color:#fff;

    box-shadow:
        0 3px 8px rgba(0,0,0,.12);
}


/* Active icon */

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


/* Press feedback */

.mobile-flight-tab:active{
    transform:scale(.98);
}

.boarding-pass-mobile{

    --mobile-scale:0.70;

    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);

}

.mobile-header{

    display:grid;

    grid-template-columns:1fr auto auto;

    align-items:center;

    gap:calc(12px * var(--mobile-scale));

    padding:
        calc(10px * var(--mobile-scale))
        calc(14px * var(--mobile-scale));

    border-bottom:1px solid rgba(205,163,73,.15);

}

.mobile-ticket-body{

    display:grid;

    grid-template-columns:4.6fr .75fr;

}

.mobile-main-ticket{

    display:flex;

    align-items:center;

    justify-content:center;

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

}

.mobile-sidebar{

    padding:18px;

    border-left:1px dashed rgba(0,0,0,.15);

}

.mobile-header-left{

    display:flex;

    align-items:center;

    gap:calc(16px * var(--mobile-scale));

}

.mobile-header-centre{

    display:flex;

    justify-content:center;

}

.mobile-header-right{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:calc(10px * var(--mobile-scale));

}

.mobile-plane-icon{

    display:flex;

    align-items:center;

    justify-content:center;

}

.mobile-plane-icon svg{

    width:calc(28px * var(--mobile-scale));

    height:calc(28px * var(--mobile-scale));

    color:var(--gold);

}

.mobile-airline{

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

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

    color:var(--gold);

}

.mobile-flight-number{

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

    letter-spacing:calc(2px * var(--mobile-scale));

    text-transform:uppercase;

    color:var(--gold);

}

.mobile-flight-number span{

    font-weight:600;

}

.mobile-status{

    display:inline-flex;

    align-items:center;

    gap:calc(6px * var(--mobile-scale));

    padding:
    calc(6px * var(--mobile-scale))
    calc(10px * var(--mobile-scale));

    background:#edf8ed;

    border-radius:999px;

    color:#2d8b3d;

    font-weight:600;

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

}

.mobile-status-dot{

    width:calc(10px * var(--mobile-scale));

    height:calc(10px * var(--mobile-scale));

    background:#38b000;

    border-radius:50%;

}

.mobile-route{

    display:grid;

    grid-template-columns:1fr calc(56px * var(--mobile-scale)) 1fr;

    align-items:start;

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

}

.mobile-departure,
.mobile-arrival{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.mobile-airport-code{

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

    height:calc(10px * var(--mobile-scale));

    font-weight:700;

    line-height:.9;

    color:#1d1d1d;

    letter-spacing:calc(-1px * var(--mobile-scale));

}

.mobile-airport-name{

    margin-top:calc(2px * var(--mobile-scale));

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

    color:#666;

    font-weight:500;

}

.mobile-flight-date{

    margin-top:calc(46px * var(--mobile-scale));

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

    color:#999;

    text-transform:none;

    letter-spacing:calc(1px * var(--mobile-scale));

}

.mobile-flight-time{

    margin-top:4px;

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

    font-weight:700;

    color:#111;

    line-height:1;

}

.mobile-flight-label{

    margin-top:calc(10px * var(--mobile-scale));

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

    text-transform:uppercase;

    letter-spacing:calc(2px * var(--mobile-scale));

    color:var(--gold);

    font-weight:600;

}

.mobile-route-centre{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.mobile-plane{

    width:calc(56px * var(--mobile-scale));

    height:calc(56px * var(--mobile-scale));

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border-radius:50%;

    position:relative;

    top:calc(29px * var(--mobile-scale));

    z-index:2;

    font-size:calc(26px * var(--mobile-scale));

    color:var(--gold);

}

.mobile-plane svg{

    width:calc(28px * var(--mobile-scale));

    height:calc(28px * var(--mobile-scale));

    color:var(--gold);

    transform:rotate(0deg);

}

.mobile-route-line{

    width:calc(250px * var(--mobile-scale));

    height:calc(3px * var(--mobile-scale));

    border-radius:999px;

    background:var(--gold);

    position:relative;

    top:calc(2px * var(--mobile-scale));

}

.mobile-route-line::before,
.mobile-route-line::after{

    content:"";

    position:absolute;

    top:50%;

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

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

    background:var(--gold);

    border-radius:50%;

    transform:translateY(-50%);

}

.mobile-route-line::before{

    left:calc(-4px * var(--mobile-scale));

}

.mobile-route-line::after{

    right:calc(-4px * var(--mobile-scale));

}

.mobile-sidebar{

    position:relative;

    display:flex;

    flex-direction:column;

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

    padding:
        calc(16px * var(--mobile-scale))
        calc(12px * var(--mobile-scale));

    border-left:1px dashed rgba(205,163,73,.35);

}

.mobile-sidebar::before{

    content:"";

    position:absolute;

    left:calc(-10px * var(--mobile-scale));

    top:calc(-13px * var(--mobile-scale));

    width:calc(20px * var(--mobile-scale));

    height:calc(20px * var(--mobile-scale));

    border-radius:50%;

    background:#f5f1e8;

}

.mobile-sidebar::after{

    content:"";

    position:absolute;

    left:calc(-10px * var(--mobile-scale));

    bottom:calc(-10px * var(--mobile-scale));

    width:calc(20px * var(--mobile-scale));

    height:calc(20px * var(--mobile-scale));

    border-radius:50%;

    background:#f5f1e8;

}

.mobile-info-card{

    display:flex;

    flex-direction:column;

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

    padding-bottom:calc(14px * var(--mobile-scale));

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

}

.mobile-info-card:last-of-type{


    padding-bottom:0;

}

.mobile-info-label{

    display:flex;

    align-items:center;

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

    text-transform:uppercase;

    letter-spacing:calc(2px * var(--mobile-scale));

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

    font-weight:600;

    color:var(--gold);

}

.mobile-info-label svg{

    width:calc(15px * var(--mobile-scale));

    height:calc(15px * var(--mobile-scale));

}

.mobile-info-value{

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

    font-weight:600;

    color:#222;

    line-height:1.4;

}

.mobile-barcode{

    width:92%;

    height:calc(30px * var(--mobile-scale));

    margin-top:calc(2px * var(--mobile-scale));

    margin-left:auto;

    margin-right:auto;

    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
    );

    opacity:.8;

}

.mobile-barcode-label{

    text-align:center;

    margin-top:calc(4px * var(--mobile-scale));

    letter-spacing:calc(2px * var(--mobile-scale));

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

    color:var(--gold);

}

/* ======================================================
   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;
}