/**
 * @package    VP Abandoned Cart Recovery for VirtueMart
 * @author     Abhishek Das <info@virtueplanet.com>
 * @copyright  (C) 2024 Virtueplanet Services LLP. All rights reserved.
 * @license    VirtuePlanet Proprietary License
 * @link       https://www.virtueplanet.com
 */

/* You can use the folllowing CSS variables to customize the appearance of the modal and its components 
:root {
    --vpacr-background-color: #fff;
    --vpacr-text-color: #333;
    --vpacr-content-color: #333;
    --vpacr-border-radius: 0.3rem;
    --vpacr-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
    --vpacr-max-width: 400px;
    --vpacr-padding-x: 2rem;
    --vpacr-padding-y: 2.5rem;
    --vpacr-margin-x: 1.5rem;
    --vpacr-margin-y: 1.5rem;
    --vpacr-z-index: 6000;
    --vpacr-animation-in: vpacr-fade-in 0.5s ease forwards;
    --vpacr-animation-out: vpacr-fade-out 0.5s ease forwards;
    --vpacr-content-animation-in: vpacr-slide-up 0.5s ease forwards;
    --vpacr-close-btn-background-color: transparent;
    --vpacr-close-btn-color: #222;
    --vpacr-label-color: inherit;
    --vpacr-input-color: #495057;
    --vpacr-input-placeholder-color: #6c757d;
    --vpacr-input-background-color: #fff;
    --vpacr-input-border-color: #ced4da;
    --vpacr-input-focus-border-color: #80bdff;
    --vpacr-input-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    --vpacr-border-width: 1px;
    --vpacr-border-radius: 0.375rem;
    --vpacr-input-padding-top: .5rem;
    --vpacr-input-padding-bottom: .5rem;
    --vpacr-input-padding-left: .75rem;
    --vpacr-input-padding-right: .75rem;
    --vpacr-input-font-size: 1rem;
    --vpacr-input-font-weight: 400;
    --vpacr-input-line-height: 1.5;
    --vpacr-invalid-label-color: #dc3545;
    --vpacr-invalid-input-border-color: #dc3545;
    --vpacr-invalid-input-color: #dc3545;
    --vpacr-valid-label-color: #198754;
    --vpacr-valid-input-border-color: #198754;
    --vpacr-valid-input-color: #198754;
    --vpacr-success-content-color: #198754;
    --vpacr-success-content-background-color: #fff;
    --vpacr-success-content-animation-in: vpacr-fade-in 0.5s ease forwards;
    --vpacr-floating-input-padding-top: 1rem;
    --vpacr-floating-input-padding-bottom: 1rem;
    --vpacr-floating-input-padding-left: 0.75rem;
    --vpacr-floating-input-padding-right: 0.75rem;
    --vpacr-floating-input-height: 3.5rem;
    --vpacr-floating-input-line-height: 1.5;
    --vpacr-btn-padding-x: 0.75rem;
    --vpacr-btn-padding-y: 0.5rem;
    --vpacr-btn-font-size: 1rem;
    --vpacr-btn-font-weight: 400;
    --vpacr-btn-line-height: 1.5;
    --vpacr-btn-color: #333;
    --vpacr-btn-bg: transparent;
    --vpacr-btn-border-color: transparent;
    --vpacr-btn-hover-color: #333;
    --vpacr-btn-hover-bg: transparent;
    --vpacr-btn-hover-border-color: transparent;
    --vpacr-btn-box-shadow: none;
    --vpacr-btn-disabled-opacity: 0.65;
    --vpacr-btn-focus-box-shadow: none;
    --vpacr-btn-font-family: inherit;
    --vpacr-btn-border-radius: 0.375rem;
    --vpacr-btn-primary-color: #fff;
    --vpacr-btn-primary-bg: #007bff;
    --vpacr-btn-primary-border-color: #007bff;
    --vpacr-btn-primary-hover-color: #fff;
    --vpacr-btn-primary-hover-bg: #0056b3;
    --vpacr-btn-primary-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    --vpacr-btn-primary-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    --vpacr-btn-secondary-color: #333;
    --vpacr-btn-secondary-bg: #fff;
    --vpacr-btn-secondary-border-color: #ccc;
    --vpacr-btn-secondary-hover-color: #333;
    --vpacr-btn-secondary-hover-bg: #e9ecef;
    --vpacr-btn-secondary-box-shadow: none;
    --vpacr-btn-secondary-focus-box-shadow: none;
    --vpacr-btn-lg-padding-x: 1rem;
    --vpacr-btn-lg-padding-y: 0.8rem;
    --vpacr-btn-lg-font-size: 1.15rem;
}
*/

.vpacr-modal,
.vpacr-modal * {
    box-sizing: border-box;
}

.vpacr-modal {
    --background-color: var(--vpacr-background-color, #fff);
    --text-color: var(--vpacr-text-color, #333);
    --invalid-text-color: #dc3545;
    --valid-text-color: #198754;
    --content-color: var(--vpacr-content-color, #333);
    --border-radius: var(--vpacr-border-radius, 0.3rem);
    --box-shadow: var(--vpacr-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.15));
    --max-width: var(--vpacr-max-width, 400px);
    --padding-x: var(--vpacr-padding-x, 2rem);
    --padding-y: var(--vpacr-padding-y, 2.5rem);
    --margin-x: var(--vpacr-margin-x, 1.5rem);
    --margin-y: var(--vpacr-margin-y, 1.5rem);
    --z-index: var(--vpacr-z-index, 6000);
    --animation-in: var(--vpacr-animation-in, vpacr-fade-in 0.5s ease forwards);
    --animation-out: var(--vpacr-animation-out, vpacr-fade-out 0.5s ease forwards);
    --content-animation-in: var(--vpacr-content-animation-in, vpacr-slide-up 0.5s ease forwards);
    position: relative;
    z-index: var(--z-index);
}

.vpacr-modal.vpacr-closing:before,
.vpacr-modal.vpacr-closing .vpacr-modal--dialog {
    animation: var(--animation-out);
}

.vpacr-modal:before,
.vpacr-modal--dialog {
    position: fixed;
    inset: 0;
    animation: var(--animation-in);
    z-index: var(--z-index);
    background-color: transparent;
}

.vpacr-modal:not(.vpacr-open):not(.vpacr-closing) {
    display: none;
}

.vpacr-modal:before {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-index) - 1);
}

.vpacr-modal--dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vpacr-modal--content {
    position: relative;
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    max-width: var(--max-width);
    width: 100%;
    margin-top: var(--margin-y);
    margin-right: var(--margin-x);
    margin-bottom: var(--margin-y);
    margin-left: var(--margin-x);
}

.vpacr-modal.vpacr-open .vpacr-modal--content {
    animation: var(--content-animation-in);
}

.vpacr-modal--body {
    position: relative;
    padding-top: var(--padding-y);
    padding-right: var(--padding-x);
    padding-bottom: var(--padding-y);
    padding-left: var(--padding-x);
}

.vpacr-modal--title {
    margin-top: 0;
    margin-bottom: 1.15rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.vpacr-modal--message {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.vpacr-modal--action-success-message {
    --content-color: var(--vpacr-success-content-color, #198754);
    --content-background-color: var(--vpacr-success-content-background-color, #fff);
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: var(--content-color);
    opacity: 0;
    background-color: var(--content-background-color);
    border-radius: var(--border-radius);
}

.vpacr-modal--action-success .vpacr-modal--action-success-message {
    display: flex;
    animation: var(--vpacr-success-content-animation-in, vpacr-fade-in 0.5s ease forwards);
}

.vpacr-btn-close {
    --btn-background-color: var(--vpacr-close-btn-background-color, transparent);
    --btn-color: var(--vpacr-close-btn-color, #222);
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    width: 1rem;
    height: 1rem;
    background-image: none !important;
    background-color: var(--btn-background-color) !important;
    border: 0 !important;
    opacity: 0.5;
    line-height: 1rem;
    padding: 0 !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: all 0.3s ease;
    z-index: 1;
}

.vpacr-btn-close:hover {
    opacity: 1;
    background-image: none !important;
    background-color: var(--btn-background-color) !important;
    border: 0 !important;
}

.vpacr-btn-close:before,
.vpacr-btn-close:after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    height: 1rem;
    width: 2px;
    background-color: var(--btn-color);
}

.vpacr-btn-close:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.vpacr-btn-close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.vpacr-form-group {
    margin-bottom: 1.5rem;
}

.vpacr-form-label {
    --label-color: var(--vpacr-label-color, inherit);
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--label-color);
}

.vpacr-form-control {
    --input-color: var(--vpacr-input-color, #495057);
    --input-placeholder-color: var(--vpacr-input-placeholder-color, #6c757d);
    --input-background-color: var(--vpacr-input-background-color, #fff);
    --input-border-color: var(--vpacr-input-border-color, #ced4da);
    --input-focus-border-color: var(--vpacr-input-focus-border-color, #80bdff);
    --input-focus-box-shadow: var(--vpacr-input-focus-box-shadow, 0 0 0 0.2rem rgba(0, 123, 255, 0.25));
    --input-border-width: var(--vpacr-border-width, 1px);
    --input-border-radius: var(--vpacr-border-radius, 0.375rem);
    --input-padding-top: var(--vpacr-input-padding-top, .5rem);
    --input-padding-bottom: var(--vpacr-input-padding-bottom, .5rem);
    --input-padding-left: var(--vpacr-input-padding-left, .75rem);
    --input-padding-right: var(--vpacr-input-padding-right, .75rem);
    --input-font-size: var(--vpacr-input-font-size, 1rem);
    --input-font-weight: var(--vpacr-input-font-weight, 400);
    --input-line-height: var(--vpacr-input-line-height, 1.5);
    display: block;
    width: 100%;
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    color: var(--input-color);
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--input-background-color);
    background-clip: padding-box;
    border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0;
}

.vpacr-form-control::placeholder,
.vpacr-form-control::-ms-input-placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
}

.vpacr-form-control:focus {
    color: var(--input-color);
    background-color: var(--input-background-color);
    border-color: var(--input-focus-border-color);
    outline: 0;
    box-shadow: var(--input-focus-box-shadow);
}

.vpacr-form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.vpacr-form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.vpacr-form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
}

.vpacr-form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: .25em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}

.vpacr-form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.vpacr-form-check .vpacr-form-check-input {
    float: left;
    margin-left: -1.5em;
}

.vpacr-form-check-label {
    display: inline-block;
}

.vpacr-has-error .vpacr-form-label {
    --label-color: var(--vpacr-invalid-label-color, #dc3545);
}

.vpacr-has-error .vpacr-form-control:not(:focus) {
    --input-border-color: var(--vpacr-invalid-input-border-color, #dc3545);
    --input-color: var(--vpacr-invalid-input-color, #dc3545);
}

.vpacr-has-success .vpacr-form-label {
    --label-color: var(--vpacr-valid-label-color, #198754);
}

.vpacr-has-success .vpacr-form-control:not(:focus) {
    --input-border-color: var(--vpacr-valid-input-border-color, #198754);
    --input-color: var(--vpacr-valid-input-color, #198754);
}

.vpacr-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-color);
}

.vpacr-invalid-feedback {
    --text-color: var(--invalid-text-color);
}

.vpacr-valid-feedback {
    --text-color: var(--valid-text-color);
}

.vpacr-has-error .vpacr-invalid-feedback:not(:empty) {
    display: block;
}

.vpacr-has-success .vpacr-valid-feedback:not(:empty) {
    display: block;
}

.vpacr-form-floating {
    --vpacr-input-padding-top: var(--vpacr-floating-input-padding-top, 1rem);
    --vpacr-input-padding-bottom: var(--vpacr-floating-input-padding-bottom, 1rem);
    --vpacr-input-padding-left: var(--vpacr-floating-input-padding-left, 0.75rem);
    --vpacr-input-padding-right: var(--vpacr-floating-input-padding-right, 0.75rem);
    --input-height: var(--vpacr-floating-input-height, 3.5rem);
    --label-line-height: var(--vpacr-floating-input-line-height, 1.5);
    position: relative;
}

.vpacr-form-floating .vpacr-form-control {
    height: calc(var(--input-height) + calc(var(--input-border-width)* 2));
    min-height: calc(var(--input-height) + calc(var(--input-border-width)* 2));
}

.vpacr-form-floating .vpacr-form-control:focus,
.vpacr-form-floating>.vpacr-form-control:not(:placeholder-shown) {
    padding-top: calc(var(--input-padding-top) + calc(var(--input-padding-top) * .5) + calc(var(--label-line-height) * .1rem));
    padding-bottom: calc(var(--input-padding-bottom) - calc(var(--input-padding-bottom) * .5) - calc(var(--label-line-height) * .1rem));
}

.vpacr-form-floating .vpacr-form-control::placeholder {
    color: transparent;
}

.vpacr-form-floating>label {
    --input-padding-top: var(--vpacr-input-padding-top, 1rem);
    --input-padding-bottom: var(--vpacr-input-padding-bottom, 1rem);
    --input-padding-left: var(--vpacr-input-padding-left, 0.75rem);
    --input-padding-right: var(--vpacr-input-padding-right, 0.75rem);
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding-top: var(--input-padding-top);
    padding-bottom: var(--input-padding-bottom);
    padding-left: var(--input-padding-left);
    padding-right: var(--input-padding-right);
    line-height: var(--label-line-height);
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--input-border-width) solid transparent;
    opacity: 1;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.vpacr-form-floating .vpacr-form-control:focus~label,
.vpacr-form-floating>.vpacr-form-control:not(:placeholder-shown)~label {
    opacity: 0.65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.vpacr-btn {
    --btn-padding-x: var(--vpacr-btn-padding-x, 0.75rem);
    --btn-padding-y: var(--vpacr-btn-padding-y, 0.5rem);
    --btn-font-size: var(--vpacr-btn-font-size, 1rem);
    --btn-font-weight: var(--vpacr-btn-font-weight, 400);
    --btn-line-height: var(--vpacr-btn-line-height, 1.5);
    --btn-color: var(--vpacr-btn-color, #333);
    --btn-bg: var(--vpacr-btn-bg, transparent);
    --btn-border-width: var(--vpacr-border-width, 1px);
    --btn-border-color: var(--vpacr-btn-border-color, transparent);
    --btn-border-radius: var(--vpacr-border-radius, 0.375rem);
    --btn-hover-color: var(--vpacr-btn-hover-color, #333);
    --btn-hover-bg: var(--vpacr-btn-hover-bg, transparent);
    --btn-hover-border-color: transparent;
    --btn-box-shadow: var(--vpacr-btn-box-shadow, none);
    --btn-disabled-opacity: var(--vpacr-btn-disabled-opacity, 0.65);
    --btn-focus-box-shadow: var(--vpacr-btn-box-shadow, none);
    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    color: var(--btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--btn-border-width) solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    background-color: var(--btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.vpacr-btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.vpacr-btn.disabled,
.vpacr-btn:disabled {
    pointer-events: none;
}

.vpacr-btn.disabled:not([data-running]),
.vpacr-btn:disabled:not([data-running]) {
    opacity: var(--btn-disabled-opacity);
}

.vpacr-btn:focus:not(:focus-visible) {
    box-shadow: var(--btn-focus-box-shadow);
    outline: 0;
}

.vpacr-btn[data-running] {
    position: relative;
    pointer-events: none;
}

.vpacr-btn[data-running]:after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: var(--border-radius);
    margin: calc(var(--border-width)* -1);
    z-index: calc(var(--z-index, 0) + 1);
}

.vpacr-btn[data-running]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    border: .3em solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    background-color: transparent;
    margin-left: -1em;
    margin-top: -1em;
    z-index: calc(var(--z-index, 0) + 2);
    animation: vpacr-spin 1s linear infinite;
    backface-visibility: hidden;
}

.vpacr-btn-lg {
    --btn-padding-x: 1rem;
    --btn-padding-y: 0.8rem;
    --btn-font-size: 1.15rem;
}

.vpacr-btn-primary {
    --btn-color: #fff;
    --btn-bg: #007bff;
    --btn-border-color: #007bff;
    --btn-hover-color: #fff;
    --btn-hover-bg: #0056b3;
    --btn-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    --btn-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.vpacr-btn-secondary {
    --btn-color: #333;
    --btn-bg: #fff;
    --btn-border-color: #ccc;
    --btn-hover-color: #333;
    --btn-hover-bg: #e9ecef;
    --btn-box-shadow: none;
    --btn-focus-box-shadow: none;
}

.vpacr-form-buttons {
    display: grid;
    gap: .5rem !important;
    margin-bottom: 1rem;
}

.vpacr-preview-form-container {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.vpacr-preview-inner {
    min-width: 350px;
    max-width: 35rem;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 1.5rem;
}

.vpacr-preview-form-title {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

@keyframes vpacr-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vpacr-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes vpacr-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes vpacr-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}