/* Divider line + dot */
.kiosk-divider-line {
    position: relative;
    height: 2px;
    background-color: #333333;
    width: 100%;
    margin: 2px auto 25px auto;
}

.kiosk-divider-dot {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background-color: #cba444;
    border-radius: 50%;
}

/* Boxed pass container aligned to grid tile size */
.kiosk-mypass-box {
    background: #fff !important; /* override inline background:none */
    padding: 20px 30px;
    border-radius: 12px;
    /*box-shadow: 0 4px 12px rgba(0,0,0,.15);*/
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    width: 98%;
    margin-top: 0%;
    border: 1px solid #e5e7eb; /* optional: helps the white box stand out */
    display: inline-block; /* keeps it “boxy” */
    position: relative;
    /*max-width: 1485px;*/
}

.kiosk-mypass-boxRes {
    background: #fff !important; /* override inline background:none */
    padding: 20px 30px;
    border-radius: 12px;
    /*box-shadow: 0 4px 12px rgba(0,0,0,.15);*/
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    width: 98%;
    margin-top: -2%;
    border: 1px solid #e5e7eb; /* optional: helps the white box stand out */
    display: inline-block; /* keeps it “boxy” */
    position: relative;
    /*max-width: 1485px;*/
}

/* Inside the box */
.kiosk-mypass-label {
    font-size: 16px;
    color: #cba444;
    font-weight: 600;
    margin-bottom: 10px;
}

.kiosk-mypass-button {
    font-size: 28px;
    font-weight: 800;
    color: black;
}

    .kiosk-mypass-button span {
        background-color: black;
        color: white;
        padding: 6px 14px;
        border-radius: 6px;
        margin-left: 8px;
    }


.event-option-wrapper {
    margin-bottom: 12px;
}

.event-radio {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 2px solid #cba444;
    border-radius: 8px;
    cursor: pointer;
}

    .event-radio input[type="radio"] {
        margin-right: 10px;
    }


.selectable {
    border: 2px solid #ccc;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s all;
}

    .selectable:hover {
        border-color: #cba444;
        background-color: #fffdf4;
    }

    .selectable.selected {
        border-color: #cba444;
        box-shadow: 0 0 10px #cba444;
        background-color: #fff9ec;
    }

.selectable-event {
    border: 0px solid #ddd;
    border-radius: 10px;
    padding: 6px 1px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: white;
    transition: background-color 0.2s, border-color 0.2s;
}

    .selectable-event:hover {
        background-color: #f5f5f5;
        border-color: #bbb;
    }

    .selectable-event.selected-event {
        background-color: #e0e0e0; /* light black/gray highlight */
        border-color: #333;
    }

.event-name {
    font-weight: bold;
    font-size: 16px;
    text-align:left;
}

.event-time {
    font-size: 14px;
    color: #fff;
    text-align:left;
}

.BadgeUpdateBannerImg {
    width:91%;
    max-width:91%;
    height:auto;
    display:block;
}