.gift-card{}

/** Common **/
.gift-card .card-mini-item{border: 1px solid #ddd; border-radius: 16px; padding: 16px 16px 0;}
.gift-card .card-mini-item .title{padding-bottom: 16px;}
.gift-card .card-mini-item .title .img{display: inline-block; vertical-align: middle;}
.gift-card .card-mini-item .title .img img{margin-right: 16px; width: 164px; aspect-ratio: 800/431; object-fit: cover;}
.gift-card .card-mini-item .title .txt{display: inline-block; padding: 10px 0; vertical-align: middle;}
.gift-card .card-mini-item .charges{}
.gift-card .card-mini-item .charges .box{border-top: 1px solid #ededed; padding: 10px 0;}
.gift-card .card-mini-item .charges .box .amount-text{}
.gift-card .card-mini-item .charges .box .amount-text.total{font-weight: bold;}
.gift-card .card-mini-item .charges .box .amount{text-align: right;}
.gift-card .card-mini-item .charges .box .amount.total{font-weight: bold;}


/** PAGE: giftCard/customize **/
.gift-card.customize{}
@media screen and (min-width: 1200px){
    .gift-card.customize{
        background: linear-gradient(90deg, #fff 53%, #f6f6f6 53%);
    }
}
.gift-card.customize .main{}
.gift-card.customize .main .box{padding: 20px 0 30px;}
.gift-card.customize .main .gift-box,
.gift-card.payment .main .gift-box{border-radius: 0 0 20px 20px; background-color: #fff; padding: 0;}
.gift-card.customize .main .box .promo{padding: 0 14px 14px;}
.gift-card.payment .main .box .promo {padding-left: 14px; padding-bottom: 16px;}
.gift-card.customize .main .box .promo-form,
.gift-card.payment .main .box .promo-form {display: flex; align-items: center;}
.gift-card.payment .main .gift-box h3 {color: #222; font-size: 16px; line-height: 22px; margin: 10px 0 0;}
.gift-card.payment .main .gift-box p {color: #7d7d7d; font-size: 12px; line-height: 16px;}
.gift-card.customize .main .box .promo-form button,
.gift-card.payment .main .box .promo-form button{
    border-radius: 0;
    font-size: 14px;
    line-height: 19px;
    padding: 10px 36px;
    width: 112px;
    box-shadow: none;
}
.gift-card.customize .main .box .promo-form input,
.gift-card.payment .main .box .promo-form input{
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px 0 0 6px;
    color: #2e2e2e;
    height: auto;
    font-size: 14px;
    line-height: 19px;
    margin-right: -5px;
    outline: none;
    padding: 9px 18px;
    text-align: left;
}
.gift-card.customize .main .gift-box .msg,
.gift-card.payment .main .gift-box .msg{
    margin-top:12px;
    display:none;
    background-color: rgba(12, 178, 27, 0.08);
    text-align: center;
    padding: 10px;
    color: #0cb21b;
}
.gift-card.customize .main .gift-box .msg.txt-red,
.gift-card.payment .main .gift-box .msg.txt-red{background-color: rgba(250, 105, 105, 0.08); color: #fa6969;}
.gift-card.customize .main .action-check-out {margin-top: 40px;}

.gift-card.customize .main .box + .box{border-top: 1px solid #ddd;}

.gift-card.customize .main .box.design{}
.gift-card.customize .main .box.design .items{display: flex; justify-content: space-between;}
.gift-card.customize .main .box.design .items .item{
    background-color: #f6f6f6;
    border-radius: 16px;
    cursor: pointer;
    padding: 8px;
    text-align: center;
    width: 32%;
}
.gift-card.customize .main .box.design .items .item img{border-radius: 14px; margin-bottom: 16px; width: 100%; aspect-ratio: 800/431; object-fit: cover; object-position: center;}

.gift-card.customize .main .box.amount{}
.gift-card.customize .main .box.amount .items{
    background-color: #f6f6f6;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 2px;
}
.gift-card.customize .main .box.amount .items .item{
    display: inline-block;
    margin: 0;
    position: relative;
    text-align: center;
    width:25%;
}
.gift-card.customize .main .box.amount .items .item input{display: none;}
.gift-card.customize .main .box.amount .items .item div{
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
}
.gift-card.customize .main .box.amount .items .item input:checked + div{background-color: #fff;}
.gift-card.customize .main .box.amount input[type="text"]{
    font-size: 16px;
    height: auto;
    padding: 16px;
    width: 100%;
}

.gift-card.customize .main .box.info{}
.gift-card.customize .main .box.info label{font-size: 13px; font-weight: 500; padding: 8px 16px 0;}
.gift-card.customize .main .box.info textarea,
.gift-card.customize .main .box.info input[type="text"]{
    font-size: 16px;
    height: auto;
    padding: 16px;
    width: 100%;
}
.gift-card.customize .main .box.info .counter{font-size: 12px;}

.gift-card.customize .main .card-preview{
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.06);
    font-size: 0;
}
.gift-card.customize .main .card-preview p{word-break: break-word;}
.gift-card.customize .main .card-preview img{border-radius: 20px 20px 0 0; width: 100%; aspect-ratio: 800/431; object-fit: cover;}
.gift-card.customize .main .card-preview .txt{font-size: 14px; padding: 24px 36px 48px;}
.gift-card.customize .main .card-preview .txt .amount{color: #002d78; font-size: 36px; font-weight: 600;}


/** PAGE: giftCard/pay **/
.gift-card.payment{}
.gift-card.payment .btn-back{display: block; font-size: 16px; margin-left: 20px; padding: 0 10px;}
.gift-card.payment .btn-back span{font-size: 18px; font-weight: 600;}

:root {
    --company-color: #1e7eee;
}
/** PAGE: giftCard/success_payment **/
.gift-card.success{}
.gift-card.success .share{}
.gift-card.success .share .social-pages{margin-left: -10px;}
.gift-card.success .share .social-pages>a:first-child{}
.gift-card.success .share .social-pages .container-picture{background-color: var(--company-color); height: 48px; width: 48px;}
.gift-card.success .share .social-pages .container-picture.link{background-color: #fff;}

.errorMessage {
    color: #e43d4c;
}