/*=============================================================================
  MODALS

  * Includes overrides for standard Bootstrap modals
  * CSS has not been improved for the modals - Awaiting work
=============================================================================*/

.modal-backdrop {
	background-color: var(--color-bg-overlay);
}

.modal-backdrop.show {
	opacity: var(--opacity-50);
}

.modal-dialog {
	max-width: 588px;
}

.modal-content {
	background-color: var(--color-surface-primary);
	border-radius: var(--border-radius-md);
	border: none;
}

.modal-header {
	border-top-left-radius: var(--border-radius-md);
	border-top-right-radius: var(--border-radius-md);
	border-bottom: var(--border-weight-01) solid var(--color-border-primary);
	padding: var(--spacing-04);
    align-items: center;
}

.modal-title {
    font: var(--text-title-xl);
    letter-spacing: 0;
	margin-right: var(--spacing-06);
}

.modal-subline {
	font: var(--text-body-md-compact);
	color: var(--color-text-secondary);
	padding-top: var(--spacing-02);
}

.modal-header button {
	margin-right: 0;
    margin-top: 0;
    height: fit-content;
}

.modal-header button:hover .icon {
	margin-right: 0;
    margin-top: 0;
}

.modal-header .close {
	margin: 0;
	padding: 0;
}

.modal-header .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
	opacity: var(--opacity-100);
}

.modal-header .h3+.close {
	margin: 0;
}

.modal-header .icon {
	height: var(--icon-size-lg);
	width: var(--icon-size-lg);
	padding: var(--icon-size-lg) 0 0;
	background-size: var(--icon-size-lg);
	background-position: var(--icon-position-lg-black);
}

.modal-header button:hover .icon {
	background-position: var(--icon-position-lg-gray);
}

.modal-body {
	padding: var(--spacing-06) var(--spacing-04);
	background-color: var(--color-surface-primary);
	color: var(--color-text-primary-dark);
	font: var(--text-body-md);
}

.modal-body-title {
	font: var(--text-title-xl);
	color: var(--color-text-primary-dark);
    padding-bottom: var(--spacing-06);
}

.modal-footer {
	border-bottom-left-radius: var(--border-radius-md);
	border-bottom-right-radius: var(--border-radius-md);
	background-color: var(--color-surface-secondary);
	padding: var(--spacing-04);
}

.modal-footer .btn-link {
	font: var(--text-link-lg);
	color: var(--color-text-primary-dark);
	text-decoration: underline;
}

.modal-footer .btn-link:hover {
	text-decoration: none;
}

.modal-footer.login_footer {
    background: none;
    padding-top: 0;
    padding-bottom: 0;
}

.modal-footer-inner {
    width: 100%;
    text-align: center;
    padding: var(--spacing-06) 0 52px;
    border-top: var(--border-weight-01) solid var(--gray-100);
}

.modal-footer-inner-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-02);
}

.modal-footer-inner-note {
    font-size: var(--font-size-50);
    line-height: 1.5384615384615385;
    margin: 0;
}

.modal-full .modal-content {
    border: none;
}

@media (min-width: 480px) {
    .modal-footer.login_footer {
        padding-left: var(--spacing-06);
        padding-right: var(--spacing-06);
    }

    .modal-footer-inner {
        padding-bottom: var(--spacing-06);
    }
}

@media (max-width: 479.98px) {
    .modal-full {
        min-width: 100%;
        margin: 0;
    }

    .modal-full .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }
}

.modal-note {
    font-size: var(--font-size-50);
    margin-top: var(--spacing-04);
}

.in_page_modal {
    background-color: var(--white);
    margin-bottom: var(--spacing-10);
}

.in_page_modal.support {
    width: 100%;
    margin: var(--spacing-06) 0 0;
}

.in_page_modal-small_text {
    font-size: var(--font-size-25);
    text-align: right;
    margin-bottom: var(--spacing-04);
}

.in_page_modal *:last-child {
    margin-bottom: 0;
}

@media (min-width: 480px) {
    .in_page_modal {
        width: 344px;
        padding: var(--spacing-04) var(--spacing-06) var(--spacing-06);
        border-radius: var(--border-radius-sm);
        border: var(--border-weight-01) solid var(--gray-100);
        margin: 0 auto var(--spacing-10);
    }
}

@media (min-width: 576px) {
    .in_page_modal {
        width: 400px;
        padding-top: var(--spacing-06);
    }
}

.modal-frame-iframe {
    width: 100%;
    height: 324px;
}

.modal-frame-iframe.with_recaptcha {
    height: 484px;
}

.modal-logged_in .modal-body {
    padding-top: var(--spacing-16);
}

.modal-logged_in .close {
    position: absolute;
    top: var(--spacing-06);
    right: var(--spacing-06);
    z-index: 3;
}

.modal-logged_in .alert {
    margin-top: var(--spacing-10);
}

.modal-logged_in .image_header-title {
    color: var(--black);
}

.modal-logged_in-heading {
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-med);
    line-height: var(--font-line-height-04);
    text-align: center;
}

.modal-logged_in-shop {
    text-align: center;
}

.modal-sitewide .modal-body {
    font-size: var(--font-size-25);
}

.modal-order .desc_top {
    padding-bottom: 0;
}

@media (max-width: 575.98px) {
    .modal-order {
        width: 100%;
        margin: 0;
    }
}

@media (min-width: 576px) {
    .modal-order {
        padding: 0 18px;
    }
}

@media (min-width: 768px) {
    .modal-order {
        padding: 0 var(--spacing-06);
    }
}

.modal-order.small-view .modal-body {
    padding: 0;
}

.modal-order.small-view .style_ordering {
    padding-top: var(--spacing-06);
}

.modal-order.small-view .style_ordering-area {
    padding: 0;
    border: 0;
}

.modal-order.small-view .desc_top-head {
    padding: 0 var(--spacing-03);
    border: 0;
}

.modal-order.small-view .desc_top-head-title {
    margin-top: 0;
    font-size: var(--font-size-300);
    line-height: var(--font-line-height-04);
}

.modal-order.small-view .desc_top-head-pricing {
    padding: 0 var(--spacing-03);
    margin-top: 0;
}

.modal-order.small-view .desc_top-head-price {
    font-size: var(--font-size-100);
}

.modal-order.small-view .style_ordering-box {
    padding: 0 var(--spacing-03);
}

.modal-order.small-view .ordering_area {
    padding-left: var(--spacing-03);
    padding-right: var(--spacing-03);
}

.modal-order.small-view .style_ordering-add_wrap {
    position: sticky;
    padding: var(--spacing-04) var(--spacing-03);
    bottom: 0;
    width: 100%;
    border-top: var(--border-weight-01) solid var(--gray-100);
    background-color: var(--white);
    z-index: 100;
}

.modal-order.small-view .style_ordering-add_cart {
    display: block;
    width: 100%;
}

.modal-order.small-view .style_ordering-cancel {
    display: none;
}

.modal-order.small-view .style_ordering-racquet-subs {
    padding: 0 var(--spacing-03);
}

@media (min-width: 480px) {
    .modal-order.small-view .desc_top-head {
        padding: 0 var(--spacing-06);
    }

    .modal-order.small-view .desc_top-head-pricing {
        padding: 0 var(--spacing-06);
    }

    .modal-order.small-view .style_ordering-box {
        padding: 0 var(--spacing-06);
    }

    .modal-order.small-view .ordering_area {
        padding-left: var(--spacing-06);
        padding-right: var(--spacing-06);
    }

    .modal-order.small-view .style_ordering-add_wrap {
        display: flex;
        position: relative;
        background-color: var(--gray-50);
        border: 0;
    }

    .modal-order.small-view .style_ordering-add_cart {
        display: inline-block;
        width: auto;
        margin-left: auto;
    }

    .modal-order.small-view .style_ordering-cancel {
        display: inline-block;
        color: var(--black);
    }

    .modal-order.small-view .style_ordering-racquet-subs {
        padding: 0 var(--spacing-06);
    }
}

.modal-order.large-view {
    max-width: 992px;
}

.modal-address_claification .suggested {
    width: auto;
}

/* Afterpay Modal */
.afterpay_container {
    line-height: var(--font-line-height-04);
    padding: var(--spacing-12) var(--spacing-06);
    text-align: left;
}

.afterpay_container-logo .icon {
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-pills-update.svg');
    background-size: 200px 288px;
    width: 200px;
    padding-top: 72px;
}

.afterpay_container-title {
    font-size: var(--font-size-500);
    margin-top: var(--spacing-04);
}

.afterpay_container-details {
    margin-top: var(--spacing-06);
}

.afterpay_container-details .is-detail {
    display: flex;
    align-items: center;
    padding-top: var(--spacing-04);
}

.afterpay_container-details-cart .icon {
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-shop.svg');
}

.afterpay_container-details-checkout .icon {
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-phone-mobile.svg');
}

.afterpay_container-details-login .icon {
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-signup-mobile.svg');
}

.afterpay_container-details-payments .icon {
    background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-fourpayments.svg');
}

.afterpay_container-details .is-detail .icon {
    background-size: 72px;
    width: 72px;
    padding-top: 72px;
    flex: 0 0 72px;
    margin-right: var(--spacing-04);
}

.afterpay_container-details-info {
    flex: 1 1;
}

.afterpay_container-info {
    font-size: 0.6875rem;
    margin-top: var(--spacing-16);
}

@media (min-width: 768px) {
    .afterpay_container {
        text-align: center;
    }

    .afterpay_container-logo .icon {
        margin: auto;
    }

    .afterpay_container-details {
        display: flex;
        flex-wrap: wrap;
    }

    .afterpay_container-details .is-detail {
        display: block;
        font-size: 0.8125rem;
        flex: 0 0 50%;
        padding: var(--spacing-04) var(--spacing-03) 0;
    }

    .afterpay_container-details .is-detail {
        flex: 0 0 25%;
    }

    .afterpay_container-details-checkout .icon {
        background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-laptop.svg');
    }

    .afterpay_container-details-login .icon {
        background-image: url('https://img.tacklewarehouse.com/graphics-resizer/logos/afterpay-signup.svg');
    }

    .afterpay_container-details .is-detail .icon {
        background-size: 96px;
        width: 96px;
        padding-top: 96px;
        margin: auto;
        flex: 0 0 96px;
    }
}

/* Animation for modals */
.animate-bottom {
    position: relative;
    animation: animatebottom 0.4s;
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

/* MSRP Modal */
.modal-msrp {
    max-width: 500px;
}

/* Tooltips */
.popover {
    background-color: var(--color-surface-primary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary-dark);
    font: var(--text-body-sm-compact);
}

/* Recaptcha Disclaimer */
.recaptcha-disclaimer {
    font: var(--text-body-xs-compact);
    color: var(--color-text-primary-dark);
    margin-bottom: 0;
}

.recaptcha-disclaimer a {
    text-decoration: underline;
}

.recaptcha-disclaimer a:hover,
.recaptcha-disclaimer a:active,
.recaptcha-disclaimer a:focus {
    text-decoration: none;
}

.recaptcha-disclaimer a:visited {
    color: var(--color-text-primary-dark);
}
