/* 
e-cards css
Troy Moses
22/10/25
*/

#ecard-form {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

#ecard-form.ecard-thankyou {
    display: block;
    text-align: center;
}

#ecard-form .ecard-content {
    width: 100%;
}

#ecard-form .left-col {
	width: 50%;
}

#ecard-form .right-col {
	width: calc(50% - 150px);
}

#ecard-form .left-col h3 {
    text-align: center;
}

#ecard-form.ecard-payment h3 {
    text-align: left;
}

#ecard-form input, #ecard-form textarea {
	width: 100%;
	box-sizing: border-box;
}

#ecard-form label {
    color: #262262;
    font-weight: 500;
	display: block;
}

#ecard-form .empty {
	border-color: red;
}

#ecard-form p.error {
	color: red;
}

#ecard-form button {
    padding: 10px 15px;
    background: #1c75bc;
    color: #fff;
    border: 1px solid #1c75bc;
    border-radius: 7px;
    transition: all .2s ease-in-out;
}

#ecard-form button:hover {
    background: #fff;
    color: #1c75bc;
}

#ecard-form .amount-wrapper {
    text-align: center;
}

#ecard-form .amount-wrapper label {
    margin: 0 0 15px 0;
}

#ecard-form .amount-selector {
    margin: 0 0 15px 0;
    display: flex;
    gap: 7px;
    justify-content: center;
}

#ecard-form .amount-selector .amount {
    padding: 10px 15px;
    color: #1c75bc;
    border: 1px solid #1c75bc;
    border-radius: 7px;
    cursor: pointer;
}

#ecard-form .amount-selector .amount.selected {
    background: #1c75bc;
    color: #fff;
    border: 1px solid #1c75bc;
}

#ecard-form input.other-amount {
    width: 120px;
    margin: auto;
    text-align: center;
}

#ecard-form .recipients {
	margin: 15px 0 0 0;
    display: none;
}

#ecard-form .recipients.recipient-added {
	display: block;
}

#ecard-form .recipients .recipient {
    margin: 0 0 7px 0;
    display: flex;
    align-items: center;
}

#ecard-form .recipients .recipient .count {
    width: 15px;
}

#ecard-form .recipients .recipient .recipient-name,
#ecard-form .recipients .recipient .recipient-email {
    width: calc(50% - 7.5px);
}

#ecard-form .recipients .recipient .delete-recipient {
    margin: 0 0 0 3px;
    width: 20px;
    height: 20px;
    background: red;
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 10px;
}

#ecard-form.loading .blockOverlay {
	background: rgb(255, 255, 255, .7);
}

#ecard-form.loading .blockElement {
	background-color: transparent !important;
	cursor: default !important;
}

/* pacman loading animation */
.pacman-top {
    background-color: #2b3990;
    height: 15px;
    width: 30px;
    border-radius: 15px 15px 0 0;
    animation: pactop 0.5s infinite linear;
}

.pacman-bottom {
    background-color: #2b3990;
    height: 15px;
    width: 30px;
    border-radius: 0 0 15px 15px;
    animation: pacbottom 0.5s infinite linear;
}

@keyframes pactop {
    0%  {transform: rotate(0deg);}
    50%{transform: rotate(-35deg);}
}

@keyframes pacbottom {
    0%  {transform: rotate(0deg);}
    50%{transform: rotate(35deg);}    
}

/* datepicker */
.ui-widget {
    font-family: 'Work Sans', arial;
    background: #fff;
    border: 1px solid #ccc;
}

.ui-datepicker {
    padding: 0;
    margin: 0;
    z-index: 999 !important;
}

.ui-datepicker-header {
    padding: 7px;
    border: none;
    background: #262262;
    font-weight: normal;
    font-size: 15px;
    overflow: hidden;
}

.ui-datepicker-header .ui-state-hover {}

.ui-datepicker .ui-datepicker-title {
    margin-top: .4em;
    margin-bottom: .3em;
    color: #fff;
    text-align: center;
}

.ui-datepicker select.ui-datepicker-year {
    margin: 15px 0 0 0;
    padding: 5px;
    border-radius: 5px;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-next {
    float: right;
    margin: 0 3px 0 0;
}

.ui-datepicker .ui-datepicker-prev {
    float: left;
    margin: 0 0 0 3px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-prev:before, 
.ui-datepicker .ui-datepicker-next:after {
    color: #fff;
    font-size: 1.8em;
    position: relative;
    top: 4px;
}

.ui-datepicker .ui-datepicker-next:after {
    content: '\203A';
}

.ui-datepicker .ui-datepicker-prev:before {
    content: '\2039';
}

.ui-datepicker table {
    margin: 0;
}

.ui-datepicker th {
    padding: 5px 10px 5px 10px;
    color: #333;
    font-size: 13px;
    font-weight: normal;
    border: none;
    border-bottom: 1px solid #eaeaea;
    text-align: center;
    font-weight: 400;
}

.ui-datepicker td {
    background: #fff;
    border: none;
    padding: 0;
    text-align: center;
}

td .ui-state-default {
    background: transparent;
    border: none;
    text-align: center;
    padding: 2px 5px;
    margin: 0;
    font-weight: normal;
    color: #333;
    font-size: .90em;
    text-decoration: none;
    display: block;
}

.ui-state-disabled  {
    opacity: 1;
}

.ui-state-disabled .ui-state-default {
    color: #bbb;
}

td .ui-state-active,
td .ui-state-hover {
    background: #1c75bc;
    color: #fff;
    display: block;
}

/*ecards page*/
ul.ecards-grid {
    padding: 0;
    margin: 40px 0;
    list-style: none;
    display: grid; 
    grid-gap: 40px;
    grid-template-columns: repeat(7, 1fr);
}

ul.ecards-grid li a {
    color: #222;
}

ul.ecards-grid li a:hover {
    text-decoration: none;
}

ul.ecards-grid li p {
    margin: 0;
}

ul.ecards-grid li .thumbnail {
    aspect-ratio: 1/1;
    border-radius: 9px;
    overflow: hidden;
}

ul.ecards-grid li .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ecard buttons */
.ecard-button {
    width: 300px;
}

.ecard-button a {
    display: block;
}

.ecard-button img {
    width: 100%;
    height: auto;
    display: block;
}

@media only screen and (max-width: 1366px) {
    ul.ecards-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media only screen and (max-width: 1200px) {
    #ecard-form .right-col {
        width: calc(50% - 80px);
    }

    ul.ecards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 1024px) {
    #ecard-form .left-col,
    #ecard-form .right-col {
        width: 100%;
    }

    #ecard-form.ecard-payment .left-col {
        order: 1;
    }

    ul.ecards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 480px) {
    ul.ecards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ecard-button {
        width: 100%;
    }
}