@import '../cart_base.css';

:root {
    --cart-chrome-color: #f3f5f7;
    --cart-background-color: #fff;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

:root, body {
    background: unset;
}

:root {
    background-color: var(--cart-chrome-color);
}

body {
    background-color: var(--cart-background-color);
}

.v-page-content {
    background: transparent;
}

.ticket-selector-fields .ticket-selector-item__title {
    font-size: 1.2rem;
    font-weight: 400;
    color: #202C30;
    line-height: 1.75rem;
}

.ticket-selector-fields .ticket-selector-item__price {
    font-size: 1.175rem;
    font-weight: 500;
    color: #202C30;
    letter-spacing: 0.00937em;
    line-height: 1.75rem;
}

.ticket-selector-fields .ticket-selector-item--fees {
    font-size: 1.05rem;
    font-weight: 400;
    color: #46626E;
    line-height: 1.375rem;
    letter-spacing: 0.00714em;
}

[class*="mdc-typography--subtitle"] {
    color: #596D79;
}

.v-typography > i {
    min-width: 1em;
    text-align: center;
    margin-right: 3px;
}

.event-line-item-title .v-typography i {
    color: #B2BEC4;
}

.v-progress {
    /*
        the default `position: relative` bumps the body content down by the
        height of the progress bar (typically 4px), resulting in the entire
        cart having a (useless) vertical scrollbar that scrolls only ~4px.
        `position: fixed` with a `z-index` corrects this behavior.
     */
    position: fixed;
    z-index: 1;
}

.mdc-layout-grid__inner {
    grid-gap: var(--v-padding2);
}

.modal-checkout {
    display: flex;
    flex-direction: row;
}

.modal-layout--left {
    display: flex;
    flex-direction: column;
    height: 100vh; /* force middle area to overflow vertically if needed */
}

.modal-layout--middle {
    /* grows and shrinks vertically as needed with a scrollbar */
    flex: 1 1 auto;
    overflow: auto;
}

.modal-layout--bottom {
    display: flex;
    align-items: center;
}

#event_card .event-synopsis {
    padding: var(--v-padding3) var(--v-padding5) !important;
}

#ticket_selector_form .mdc-select {
    height: unset;
    margin: 0;
}

#ticket_selector_form .mdc-select > .mdc-select__dropdown-icon {
    bottom: 7px;
}

#ticket_selector_form .mdc-select.mdc-select--focused > .mdc-select__dropdown-icon {
    transform: rotate(180deg); /* "unset" translateY from MDC */
}

#ticket_selector_form .mdc-select > .mdc-select__native-control {
    max-width: 70px;
    height: unset;
    padding:  0.5em 2.5em 0.5em 1.25em;
}

.event-synopsis {
    display: flex;
}

.v-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.v-input, .v-radio, .v-checkbox {
    margin: 0;
}

#close-modal {
    position: absolute;
    top: var(--v-padding2);
    right: var(--v-padding2);
    z-index: 999;
}

.v-card-border-left {
    border-bottom: 1px solid #EDF0F2;
    border-radius: 0;
}

.modal-ticket-selection {
    background-color: transparent;
}

#promo-gift-card .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
    background-color: #FFFFFF;
}

.promo-gift-card-inputs {
    display: flex;
}

.promo-gift-card-inputs > :first-child {
    flex-grow: 1;
    margin-right: 1rem;
}

.promo-gift-card-inputs button {
    height: auto;
}

/* smaller promo code/gift card input: */
#gift_card_promo_code {
    margin: unset;
    height: 100%;
}

#gift_card_promo_code > input {
    padding: var(--v-padding2);
    line-height: inherit;
}

#gift_card_promo_code .mdc-floating-label:not(.mdc-floating-label--float-above) {
    top: calc(50% - 1rem/2);
}

.event-donation-card {
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
                0px 1px 1px 0px rgba(0, 0, 0, 0.14),
                0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.14);
}

#cart-contents {
    max-height: 340px;
    overflow: auto;
}

.v-timer {
    display: inline-flex;
    flex-wrap: nowrap;
}

#summary_tos a {
    font-weight: revert;
    text-decoration: revert;
}

.wallet_payment_separator {
    position: relative;
    display: inline-block;
    padding: 0 1.1ch;
    background: var(--cart-background-color);
    font-size: 1.1rem;
}

.wallet_payment_separator_container::before {
    position: absolute;
    content: '';
    pointer-events: none;
    user-select: none;
    height: 1px;
    top: 50%;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.40);
}

#next_step_button {
    flex: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.modal-layout--bottom button {
    font-size: 1rem;
}

/* mobile-only; controlled below */
.cart-summary-scrim {
    display: none;
}

.event-donation-thumbnail img {
    width: auto;
}

.event-donation-card--inner {
    display: flex;
    align-items: flex-start;
    gap: var(--v-padding2);
}

.event-donation-card--inner > :last-child {
  flex-grow: 1;
}

/* https://stackoverflow.com/questions/9333379/check-if-an-elements-content-is-overflowing/34299947#34299947 */
/*
    temporarily disabled: `background-position: local` is very broken in Safari 14 and 15.
    see: https://bugs.webkit.org/show_bug.cgi?id=219324

.indicate-overflow {
    background: linear-gradient(var(--cart-background-color) 10%, transparent),
                linear-gradient(transparent, var(--cart-background-color) 90%) 0 100%,
                radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), transparent),
                radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), transparent) 0 100%;
    background: linear-gradient(var(--cart-background-color) 10%, transparent),
                linear-gradient(transparent, var(--cart-background-color) 90%) 0 100%,
                radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), transparent),
                radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) 0 100%;
    background-repeat: no-repeat;
    background-color: var(--cart-background-color);
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}
*/

/* remove this workaround for if Safari ever implements a fix for the above: */
@media screen and (min-width: 840px) {
    .modal-layout--top {
        box-shadow: 0 0 5px 0 rgb(0, 0, 0, .27);
    }

    .modal-layout--bottom {
        box-shadow: 0 0 5px 0 rgb(0, 0, 0, .27);
    }

    .modal-layout--right {
        border-left: 1px solid #bed5de;
    }
}


/* phone, small tablet */
@media screen and (max-width: 839px) {
    .modal-checkout {
        flex-direction: column;
    }

    .modal-layout--top,
    .modal-layout--bottom {
        background: var(--cart-chrome-color);
    }

    .modal-layout--bottom {
        z-index: 2;
    }

    .modal-layout--right {
        padding: 0 !important;
    }

    .event-thumbnail,
    .event-donation-thumbnail,
    #summary_header,
    #summary_tos,
    #applied_promo_codes {
        display: none;
    }

    .modal-checkout #summary > .v-card .v-card-content {
        display: flex;
        flex-direction: column;
    }

    .mobile-cart-summary-button-container {
        display: flex;
        align-items: center;
    }

    .mobile-cart-summary-button-container > * + * {
        margin-left: var(--v-padding2);
    }

    .mobile-cart-summary-button-container .line-item--ticket-name:after {
        font-size: 1rem;
        font-weight: 500;
    }

    .mobile-cart-summary-button-container .mobile_cart_summary_content {
        display: flex;
        flex-direction: column;
    }

    .mobile-cart-summary-button-container .mobile_cart_summary_quantity_price {
        display: flex;
    }

    .mobile-cart-summary-button-container .cart_total_text {
        font-weight: 500;
        font-size: 1.175rem;
        letter-spacing: unset;
    }

    .mobile-cart-summary-button-container .enter_promo_code_cta_text {
        position: relative;
        top: 5px;
        margin-top: -5px;
        font-weight: normal;
    }

    #place_order > i {
        display: none;
    }

    /*
        on mobile screens, the cart summary is initially hidden.
        after adding items to their cart, users can tap the up chevron next to
        the cart quantity icon and total to bring up a sheet (#summary) showing
        price info (fees, subtotal, etc.).
        tapping the chevron while #summary is visible hides the sheet.
    */
    #summary > .v-card:first-child {
        display: none;

        position: fixed;
        bottom: calc(2 * var(--v-padding4) + 36px);
        width: 100%;
        z-index: 1;

        animation: slideOutDown 0.25s forwards;

        background: var(--cart-chrome-color);
        padding: var(--v-padding3) var(--v-padding4) 0 var(--v-padding4);

        /* "medium" shape radius: 4px */
        /* (from COPRL: views/mdc/node_modules/@material/shape/_variables.scss) */
        border-radius:  4px 4px 0 0;
    }

    #cart_totals_container {
        padding: 0 !important;
    }

    .cart-summary--open #summary > .v-card:first-child {
        display: unset;
        animation-name: slideInUp;
    }

    .cart-summary-scrim {
        display: revert;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
        transition: opacity cubic-bezier(0, 0, .2, 1) 0.25s;
        background: rgba(0, 0, 0, 0.32); /* from `@material/dialog/_variables.scss` in COPRL */
    }

    .cart-summary--open .cart-summary-scrim {
        opacity: 1;
        z-index: 0;
    }

    #toggle_cart_summary_icon::before {
        font-family: 'Material Icons';
        content: 'expand_less';
    }

    .cart-summary--open #toggle_cart_summary_icon::before {
        content: 'expand_more';
    }

    #next_step_button {
        justify-content: space-between;
    }

    #next_step_button button > i {
        display: none;
    }

    .modal-layout--bottom .back-button {
        display: none;
    }

    #wallet_payment_form_wrapper {
        padding-top: var(--v-padding1) !important;
    }
}

/* large tablet, desktop */
@media screen and (min-width: 840px) {
    .modal-layout--left {
        flex: 0 0 67%;
    }

    .modal-layout--right {
        background: url('/images/poweredbyevvnt.png') no-repeat bottom 1em right 1em,
                    var(--cart-chrome-color);
        flex: 0 0 33%;
        max-height: 100vh;
        overflow: auto;
    }

    /* see modal_checkout/summary.pom */
    .cart-empty .modal-layout--right {
        background: url('/images/poweredbyevvnt.png') no-repeat bottom 1em right 1em,
                    url('/images/cart/empty.svg') no-repeat center 35%/12em,
                    var(--cart-chrome-color);
    }

    .mobile-cart-summary-button-container {
        display: none;
    }

    #wallet_payment_form {
        width: 45%;
        margin: 0 auto;
    }

    .modal-layout--top .back-button-container {
        display: none;
    }

    .modal-layout--bottom {
        padding-top: var(--v-padding3) !important;
        padding-bottom: var(--v-padding3) !important;
    }
}

[id^="product_card_images_"] > .v-image {
    height: 330px;
}

#product_offers .v-input {
    margin-bottom: 12px;
}

#product_offers .v-card-border-top {
    border: 1px solid rgba(0, 0, 0, 0.27);
}

#product_offers .v-card-content > .v-grid {
    padding: 10px !important;
}