/* <--- START to overwrite materialize style ---- */

.btn-success {
    height:unset; text-transform:unset;
}

/* <--- END to overwrite materialize style ---- */

.sq3-user-select-none {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fs-7 {
    font-size: .8em;
}

.voucher-cart { border-radius:5px; border:1px solid transparent;
           -moz-transition: all 0.5s ease-out 0s;
           -webkit-transition: all 0.5s ease-out 0s;
           -o-transition: all 0.5s ease-out 0s; }
.voucher-cart:not(.opacity-25):hover, 
.voucher-cart:not(.opacity-25):focus { cursor:pointer; background-color:#eaeaea; border: 1px solid #259959; box-shadow: 0px 0px 12px #259959;}
.voucher-cart .iconTick { display:none; position:absolute; top:-10px; right:-10px; z-index:10; }
.voucher-cart-selected { background-color:#ABD406 !important; border: 1px solid #259959;box-shadow: 0px 0px 12px #259959; }
.voucher-cart-selected .iconTick { display:block !important; }

/* ---> Start :: voucherMicro - clip-path + drop-shadow */
/* Standard for Modes: hardcode voucher font color & drop-shadow color */
.voucherMicro-wrapper {
    color: #212529;
    filter: drop-shadow(0 0 1px black);
}
.voucherMicro {
    width: 115px;
    height: 50px;
    /* clip-path: path("
                   M 0,0
                   h 30
                   a 5 5 0 0 0 10,0
                   H 115
                   v 20
                   a 5 5 0 0 0 0,10
                   v 20
                   h -75
                   a 5 5 0 0 0 -10,0
                   H 0
                   v -20
                   a 5 5 0 0 0 0,-10
                   Z");*/
    clip-path: path(" M 0,0 h 30 a 5 5 0 0 0 10,0 H 115 v 20 a 5 5 0 0 0 0,10 v 20 h -75 a 5 5 0 0 0 -10,0 H 0 v -20 a 5 5 0 0 0 0,-10 Z");
}
.voucherMicro-left {
    width: 35px;
    height: 50px;
}
.voucherMicro-right {
    width: 80px;
    height: 50px;
}
/* <--- End :: voucherMicro - clip-path + drop-shadow */


/* ---> Start :: voucher330 - clip-path + drop-shadow */
/* Standard for Modes: hardcode voucher font color & drop-shadow color */
.voucher330-wrapper {
    display: flex;
    align-items: center;
    height: 128px;
    color: #212529;
    filter: drop-shadow(0 0 2px black);
    transition: transform 0.3s ease;
}
.voucher330-wrapper:not(.opacity-25):hover, .voucher330-wrapper:not(.opacity-25):focus {
    transform: scale(1.05);
}
.voucher330-content-left {
    margin-left: -1px; /* this is to solve chrome rendering unneccessary a line problem */
    margin-right: -1px; /* this is to solve chrome rendering unneccessary a line problem */
    width: 63px; /*70px;*/
    height: 128px;
}
.voucher330-content-left .voucher-icon-border {
    text-shadow: 2px 2px 3px black, 2px -2px 3px black, -2px 2px 3px black, -2px -2px 3px black;
}
.voucher330-content-right {
    margin-left: -1px; /* this is to solve chrome rendering unneccessary a line problem */
    margin-right: -1px; /* this is to solve chrome rendering unneccessary a line problem */
    width: 203px; /*210px;*/
    height: 128px;
}
.voucher330-content-splitor {
    width: 32px;
    height: 128px;
    /* clip-path: path("
                   M 0,0
                   h 1
                   a 15 15 0 0 0 30,0
                   h 1
                   v128
                   h -1
                   a 15 15 0 0 0 -30,0
                   h -1
                   Z");*/

    clip-path: path(" M 0,0 h 1 a 15 15 0 0 0 30,0 h 1 v128 h -1 a 15 15 0 0 0 -30,0 h -1 Z");
}
.voucher330-content-splitor-left {
    width: 16px;
    height: 128px;
    /*clip-path: path("
                   M 0,0
                   H 16
                   v 21
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 21
                   H 0
                   Z");*/
    clip-path: path("M 0,0 H 16 v 21 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 21 H 0 Z");
}
.voucher330-content-splitor-right {
    width: 16px;
    height: 128px;
    /*clip-path: path("
                   M 16,0
                   H 0
                   v 21
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   v 21
                   H 16
                   Z");*/
    clip-path: path(" M 16,0 H 0 v 21 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 v 21 H 16 Z");
}
.voucher330-scallop-left {
    width: 16px; /* The total width of the left strip */
    height: 128px; /* The total height */
    /*clip-path: path("
                   M 16,0
                   H 0
                   v 5
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 3
                   a 4 4 0 0 1 0,8
                   v 5
                   H 16
                   Z");*/
    clip-path: path("M 16,0 H 0 v 5 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 3 a 4 4 0 0 1 0,8 v 5 H 16 Z");
}
.voucher330-scallop-right {
    width: 16px;
    height: 128px;
    /*clip-path: path("
                   M 0,0
                   H 16
                   v 5
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 3
                   a 4 4 0 0 0 0,8
                   v 5
                   H 0
                   Z");*/
    clip-path: path("M 0,0 H 16 v 5 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 3 a 4 4 0 0 0 0,8 v 5 H 0 Z");
}
/* <--- End :: voucher330 - clip-path + drop-shadow */

.voucher330-wrapper.expiring-red-pulse {
    animation: pulseDropShadow 1s ease-in-out infinite;
}

@keyframes pulseDropShadow {
    0% {
        filter: drop-shadow(0 0 2px black) drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 2px black) drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
    }

    100% {
        filter: drop-shadow(0 0 2px black) drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
    }
}


/* ---> Start :: Flip Card */

/* Flip Card Voucher330 width & height (bigger than actual Voucher330) */
.flip-card-voucher330 {
    width: 366px;
    height: 168px;
}
.flip-card {
    background-color: transparent; /* Doesn't need a color */
    perspective: 1000px; /* Important: Creates the 3D space */
    /* No border here, the clipped elements define the shape */
    /*cursor: pointer;*/ /* Indicate it's clickable */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* This container holds front/back and does the actual flip */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smoother transition */
    transform-style: preserve-3d; /* Important: Makes children exist in 3D */
    /* No shadow here, apply to faces if needed */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
    /* The trigger class added by JavaScript */
.flip-card-inner.is-flipped {
    transform: rotateY(180deg); /* The actual flip */
}

/* Position the front and back faces */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Hide the back side of the element */
    backface-visibility: hidden; /* Standard syntax */
    display: flex; /* Optional: nice centering */
    flex-direction: column; /* Optional: nice centering */
    justify-content: center; /* Optional: nice centering */
    align-items: center; /* Optional: nice centering */
    box-sizing: border-box; /* Include padding in width/height */
    overflow: hidden; /* Hide content overflowing the clip-path */
}
/* Style the front face */
.flip-card-front {}
/* Style the back face (initially hidden because it's facing away) */
.flip-card-back {
    transform: rotateY(180deg) translateZ(1px); /* Push it forward slightly */
}