@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800);

@keyframes ldio-1no4u0qndy5 {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
.ldio-1no4u0qndy5 div {
    left: 94px;
    top: 48px;
    position: absolute;
    animation: ldio-1no4u0qndy5 linear 1s infinite;
    background: #000000;
    width: 12px;
    height: 24px;
    border-radius: 6px / 12px;
    transform-origin: 6px 52px;
}.ldio-1no4u0qndy5 div:nth-child(1) {
     transform: rotate(0deg);
     animation-delay: -0.9166666666666666s;
     background: #000000;
 }.ldio-1no4u0qndy5 div:nth-child(2) {
      transform: rotate(30deg);
      animation-delay: -0.8333333333333334s;
      background: #000000;
  }.ldio-1no4u0qndy5 div:nth-child(3) {
       transform: rotate(60deg);
       animation-delay: -0.75s;
       background: #000000;
   }.ldio-1no4u0qndy5 div:nth-child(4) {
        transform: rotate(90deg);
        animation-delay: -0.6666666666666666s;
        background: #000000;
    }.ldio-1no4u0qndy5 div:nth-child(5) {
         transform: rotate(120deg);
         animation-delay: -0.5833333333333334s;
         background: #000000;
     }.ldio-1no4u0qndy5 div:nth-child(6) {
          transform: rotate(150deg);
          animation-delay: -0.5s;
          background: #000000;
      }.ldio-1no4u0qndy5 div:nth-child(7) {
           transform: rotate(180deg);
           animation-delay: -0.4166666666666667s;
           background: #000000;
       }.ldio-1no4u0qndy5 div:nth-child(8) {
            transform: rotate(210deg);
            animation-delay: -0.3333333333333333s;
            background: #000000;
        }.ldio-1no4u0qndy5 div:nth-child(9) {
             transform: rotate(240deg);
             animation-delay: -0.25s;
             background: #000000;
         }.ldio-1no4u0qndy5 div:nth-child(10) {
              transform: rotate(270deg);
              animation-delay: -0.16666666666666666s;
              background: #000000;
          }.ldio-1no4u0qndy5 div:nth-child(11) {
               transform: rotate(300deg);
               animation-delay: -0.08333333333333333s;
               background: #000000;
           }.ldio-1no4u0qndy5 div:nth-child(12) {
                transform: rotate(330deg);
                animation-delay: 0s;
                background: #000000;
            }
.loadingio-spinner-spinner-0wssshjsatw {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: none;
}
.ldio-1no4u0qndy5 {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.ldio-1no4u0qndy5 div { box-sizing: content-box; }
/* generated by https://loading.io/ */

#btnUpload,
#digitSelector{
    position:fixed;
    margin-left:-150px;
    top:50%;
    left:50%
}
#digitSelector{
    display: none;
}
svg.mon,
svg.mon rect{
    width:64px;
    height:20px
}
#loading{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
    display: none;
}
#loading > div{
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    position: absolute;
}
#btnUpload,
svg.fri,
svg.mon,
svg.sat,
svg.sun,
svg.thu,
svg.tue,
svg.wed{
    text-align:center
}
body{
    font-family:Poppins,sans-serif;
    font-weight:400;
    font-style:normal;
    color:#8a8fa3
}
h1,
h6.big-font{
    font-size:1.5rem
}
.hidden{
    display:none
}
svg.fri,
svg.mon,
svg.sat,
svg.sun,
svg.thu,
svg.tue,
svg.wed{
    display:inline-block;
    font-weight: bolder;
}
body,html{
    height:100%;
    margin:0
}
.wrapper{
    min-height:100%;
    margin-bottom:-50px;
    padding-top: 50px;
}
.footer,
.push{
    height:50px
}
.header-sec{
    overflow: hidden;
}
.header-sec img{
    height:40px
}
.cey{
    float: left;
    margin-left: 15px;
}
.ioc{
    float: right;
    margin-right: 15px;
}
#digitSelector{
    margin-top:-150px
}
#btnUpload{
    margin-top:-24px;
    min-width:300px
}
#fuelCard,
#showQR{
    position:absolute;
    top:60px;
    margin-top:0;
    left:50%;
    margin-left:-179px;
    z-index: -1;
}
#fuelCard{
    border: 2px solid #000;
    border-radius: 10px;
    height: 500px;
    width: 358px;
    padding: 10px 0;
    color: #000;
}
#showQR{
    display: none;
}
.pass-header{
    background: #c0392b;
    color: #fff;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 0;
}
.image-sec{
    background: #e67e22;
    padding: 25px;
    color: #fff;
}
#uploadedImg{
    max-width: 100%;
    max-height: 270px;
}
.min-sec{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 78px;
    padding: 5px 0;
}
.day-notice{
    margin-top: 10px;
}
.ministry{
    max-width: 100%;
    max-height: 100%;
}
#displaySection{
    display:none;
    position:relative;
    height:calc(100vh - 100px)
}
svg.tue,
svg.tue rect{
    width:66px;
    height:20px
}
svg.wed,
svg.wed rect{
    width:90px;
    height:20px
}
svg.thu,
svg.thu rect{
    width:72px;
    height:20px
}
svg.fri,
svg.fri rect{
    width:50px;
    height:20px
}
svg.sat,
svg.sat rect{
    width:70px;
    height:20px
}
svg.sun,
svg.sun rect{
    width:60px;
    height:20px
}

#printView{
    position: fixed;
    left: 50px;
    top: 50%;
    margin-top: -106px;
    width: 150px;
    height: 212px;
    display: none;
}
.print-pos{
    height: 106px;
    border: 1px solid #000;
    cursor: pointer;
}
.print-pos.current{
    background: #eee;
    cursor: default;
}
.print-pos.current::before{
    position: absolute;
    left: 30%;
    top: 50%;
    height: 20%;
    width: 3px;
    background-color: #336699;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}
.print-pos.current::after{
    position: absolute;
    left: 30%;
    bottom: 30%;
    height: 3px;
    width: 50%;
    background-color: #336699;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}
.lang{
    position: fixed;
    top: 5px;
    height: 30px;
    width: 30px;
    background: #ddd;
    border-radius: 50px;
    text-align: center;
    line-height: 30px;
    color: #888;
    cursor: pointer;
    z-index: 1;
}
#en{
    left: 5px;
}
#si{
    left: 40px;
}
#ta{
    left: 75px;
}
.lang.selected{
    background: #e74c3c;
    color: #fff;
    cursor: default;
}
.inline{
    display: inline-block;
}
.lang-change,
svg.lang-change{
    display: none;
}
.lang-change.cur-lang,
svg.lang-change.cur-lang{
    display: block;
}
.lang-change.cur-lang.inline,
svg.lang-change.cur-lang.inline{
    display: inline-block;
}
.no-mobile{
    display: none;
}
.no-tab{
    display: none;
}
@media only screen and (min-width:768px){
    html, body {
        height: 100%;
        overflow: hidden;
    }
    body {
        display: flex;
        flex-direction: column;
    }
    h1{
        font-size:2.5rem
    }
    .no-mobile{
        display: block;
    }
    /* Replace sticky-footer hack with flex layout so footer is always visible */
    .wrapper{
        flex: 1;
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
    }
    .push{
        display: none;
    }
    .footer{
        flex-shrink: 0;
        height: auto;
        padding: 6px 0;
    }
    #showQR{
        top:50%;
        margin-top:-250px;
    }
}
@media only screen and (min-width:992px){
    #printView{
        display: block;
    }
    .no-tab{
        display: block;
    }
}
@media print{
    .non-printable{
        display:none !important;
    }
    #showQR{
        margin-top:0;
        margin-left:0;
    }
    #showQR.topLeftPrint{
        top:0;
        left:0;
    }
    #showQR.topRightPrint{
        top:0;
        left:50%;
    }
    #showQR.bottomLeftPrint{
        top:50%;
        left:0;
    }
    #showQR.bottomRightPrint{
        top:50%;
        left:50%;
    }
    .image-sec{
        background: #e67e22 !important;
        -webkit-print-color-adjust: exact;
    }
    .pass-header{
        background: #c0392b !important;
        -webkit-print-color-adjust: exact;
    }
}

/* ── Live user count ─────────────────────────────────────────────────────── */
#userCountBar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.78rem;
    color: #888;
    margin: 6px 0 2px;
    flex-wrap: wrap;
    justify-content: center;
}
#userCountBar .uc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.75rem;
    color: #555;
    transition: background 0.3s;
}
#userCountBar .uc-badge i {
    color: #e74c3c;
    font-size: 0.72rem;
}
#userCountBar .uc-badge.active-badge i {
    color: #27ae60;
}
#userCountBar .uc-num {
    font-weight: 600;
    color: #333;
}

/* ── Cookie consent banner ───────────────────────────────────────────────── */
#cookieBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    color: #ccc;
    padding: 14px 20px;
    z-index: 9999;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
    line-height: 1.5;
}
#cookieBanner p {
    margin: 0;
    flex: 1 1 300px;
    min-width: 0;
}
#cookieBanner a {
    color: #e74c3c;
    text-decoration: underline;
    cursor: pointer;
}
#cookieBanner a:hover {
    color: #c0392b;
}
#cookieBanner .cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
#btnAcceptCookies {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    transition: background 0.2s;
}
#btnAcceptCookies:hover {
    background: #c0392b;
}
#btnLearnMore {
    background: transparent;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    transition: border-color 0.2s, color 0.2s;
}
#btnLearnMore:hover {
    border-color: #aaa;
    color: #fff;
}

/* ── Legal / Privacy modal ───────────────────────────────────────────────── */
.legal-modal .modal-header {
    background: #1a1a2e;
    color: #fff;
    border-bottom: none;
    align-items: center;
}
/* Keep icon and title text on the same line */
.legal-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.legal-modal .modal-title i {
    flex-shrink: 0;
}
.legal-modal .modal-title .lang-change.cur-lang {
    display: inline !important;
}
.legal-modal .modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}
.legal-modal .modal-header .close:hover {
    opacity: 1;
}
.legal-modal .modal-body {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.7;
    max-height: 65vh;
    overflow-y: auto;
}
.legal-modal .modal-body h6 {
    color: #1a1a2e;
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 4px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.legal-modal .modal-body h6:first-child {
    margin-top: 0;
}
.legal-modal .modal-body ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}
.legal-modal .modal-footer {
    border-top: 1px solid #eee;
    padding: 10px 16px;
}
.legal-modal .badge-nogovt {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.legal-modal .badge-privacy {
    display: inline-block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 12px;
    margin-left: 6px;
    letter-spacing: 0.02em;
}

/* ── Footer legal links ──────────────────────────────────────────────────── */
.footer-legal {
    font-size: 0.78rem;
    color: #aaa;
    margin-top: 4px;
    line-height: 1.6;
}
.footer-legal a {
    display: inline;
    color: #aaa;
    text-decoration: none;
    margin: 0 6px;
    transition: color 0.2s;
}
.footer-legal a:hover {
    color: #e74c3c;
    text-decoration: underline;
}
.footer-legal .sep {
    display: inline;
    color: #ddd;
}
/* Force lang-change spans inside footer links to stay inline */
.footer-legal a .lang-change.cur-lang {
    display: inline !important;
}