/* Single event page: registration form, share icons and QR code */

#event_reg input[type="radio"] {
    width: unset;
}
/* registration form on phones and small tablets: full width steps and fields, tighter spacing */
@media screen and (max-width: 768px) {
    #event_reg_form h3 {
        margin-bottom: 5px;
    }
    #event_reg_form .progressbar,
    #response_main .progressbar {
        display: flex;
        width: 100%;
        margin: 25px 0 20px;
        padding: 0;
    }
    #event_reg_form .progressbar li,
    #response_main .progressbar li {
        flex: 1 1 0;
        float: none;
        width: auto;
        font-weight: 600;
        letter-spacing: .5px;
    }
    #event_reg_form fieldset {
        clear: both;
        width: 100%;
        padding: 0;
    }
    #event_reg_form .wid-50,
    #event_reg_form .wid-100 {
        width: 100% !important;
        box-sizing: border-box;
        padding: 0;
    }
    #event_reg_form .wid-50 label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        color: #212121;
    }
    #event_reg_form .wid-50 label br {
        display: none;
    }
    #event_reg_form .wid-50 label > span {
        display: block;
        margin-top: 6px;
    }
    #event_reg_form input[type="text"],
    #event_reg_form input[type="email"],
    #event_reg_form input[type="number"] {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 16px !important;
    }
    #event_reg_form .wid-100.pad-10-5 {
        margin-bottom: 16px;
    }
    #event_reg_form .wid-100.pad-10-5:empty {
        margin-bottom: 0;
    }
    #event_reg_form input[type="submit"] {
        width: 100%;
        margin-top: 4px;
    }
}
.event-mobile-share,
li.event-native-share,
li.event-qr-toggle {
    display: none;
}
@media only screen and (max-width: 1024px) {
    .event-mobile-share {
        display: block;
    }
    .event-mobile-share ul.list-unstyled {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -4px;
        padding: 0;
    }
    .event-mobile-share li.list-inline {
        margin: 5px 4px;
    }
    .event-mobile-share li.event-native-share.is-supported,
    .event-mobile-share li.event-qr-toggle {
        display: inline-block;
    }
    /* the QR stays closed on mobile until its icon is tapped */
    .event-mobile-share .event-qr {
        display: none;
        margin: 5px 0 20px;
    }
    .event-desktop-share {
        display: none;
    }
}
.event-qr {
    margin: 15px 0;
}
.event-qr .event-qr-code {
    width: 170px;
    margin: 10px 0 12px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #f0e6d2;
    border-radius: 8px;
    box-sizing: border-box;
}
.event-qr .event-qr-code img,
.event-qr .event-qr-code canvas {
    display: block;
    width: 100%;
    height: auto;
}
.event-qr .event-qr-btn {
    display: inline-block;
    margin: 0 6px 8px 0;
    padding: 8px 20px;
    font-family: 'Open Sans',sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7em;
    color: #212121;
    background-color: #fcbf48;
    border: 2px solid #fcbf48;
    border-radius: 5em;
    cursor: pointer;
}
.event-qr .event-qr-btn:hover {
    color: #fcbf48;
    background-color: #212121;
    border-color: #212121;
}
.event-qr .event-qr-btn .fa {
    margin-right: 6px;
}
.event-qr .event-qr-share {
    display: none;
}
.event-qr .event-qr-share.is-supported {
    display: inline-block;
}

/* related events: placeholder shown when an event has no featured image, sized like the 4:3 thumbnails */
.edgtf-event-single-holder .edgtf-event-related-holder .edgtf-item-image-holder img.event-fallback-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 12%;
    box-sizing: border-box;
    background-color: #d9d8d5;
}

/* related events: plain centred row used when there are too few events for the slider */
.edgtf-event-single-holder .edgtf-event-related-holder .event-related-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 44px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}
.edgtf-event-single-holder .edgtf-event-related-holder .event-related-grid .edgtf-event-item {
    width: 33.333%;
    margin-bottom: 32px;
}
.edgtf-event-single-holder .edgtf-event-related-holder .event-related-grid .edgtf-item-image-holder img {
    display: block;
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 768px) {
    .edgtf-event-single-holder .edgtf-event-related-holder .event-related-grid .edgtf-event-item {
        width: 50%;
    }
}
@media only screen and (max-width: 480px) {
    .edgtf-event-single-holder .edgtf-event-related-holder .event-related-grid .edgtf-event-item {
        width: 100%;
    }
}

/* related events on phones and tablets: there is no hover, so the event name and date overlay is always shown */
@media only screen and (max-width: 1024px) {
    .edgtf-event-single-holder .edgtf-event-related-holder .edgtf-event-item .edgtf-item-text-overlay {
        opacity: 1;
    }
    .edgtf-event-single-holder .edgtf-event-related-holder .edgtf-event-item .edgtf-item-text-overlay-inner {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    .edgtf-event-single-holder .edgtf-event-related-holder .edgtf-item-text-holder {
        padding: 0 12px;
    }
}