/* cupons disponíveis */
:root {
	--coupons-available-bg: #f7f7f7;
}
/* botão flutuante */
.coupons-available .btn.btn-open-coupons {position: fixed; bottom: 24px; left: 12px; width: 60px; height: 60px; padding: 0; border-radius: 50%; background: var(--primary); display: flex; justify-content: center; align-items: center; box-shadow: 0px 0px 12.7px 0px var(--primary); animation: shake 12.3s ease-in-out infinite; z-index: 10;}
.coupons-available .btn-open-coupons svg {width: 26px; height: 26px; fill: #fff;}
.coupons-available .btn-open-coupons::before {content: ''; width: 16px; height: 16px; background: red; border-radius: 50%; position: absolute; top: 3px; right: -3px; border: 2px solid #fff;}
/* botão flutuante */

/* topo do modal */
.coupons-available .modal-title {font-size: 20px; color: #141414; line-height: normal;}
.coupons-available .modal-description {font-size: 13px; color: #505050;}
.coupons-available .btn-close {position: absolute; right: 8px; top: 8px; font-size: 10px;}
/* topo do modal */

/* cupons */
.coupons-available .coupons {background: var(--coupons-available-bg); display: flex; flex-direction: column; gap: 12px; padding: 24px 12px; border-radius: 4px; max-height: 454px; overflow: hidden; overflow-y: auto;}
.coupons-available .coupon {width: 100%; max-width: 300px; margin: auto; border-radius: 6px; box-shadow: 0 2px 8px 0 #4444441a; padding: 10px; position: relative; background: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;}
.coupons-available .coupon-divisor {width: 100%; border-top: 2px dashed #e7e7e7; position: relative;}
.coupons-available .coupon-divisor::after, .coupons-available .coupon-divisor::before {content: ''; position: absolute; width: 50px; height: 28px; border-radius: 100px; z-index: 1; bottom: 50%; transform: translateY(50%); background: var(--coupons-available-bg);}
.coupons-available .coupon-divisor::after {right: -44px;}
.coupons-available .coupon-divisor::before {left: -44px;}

.coupons-available .coupon-icon {width: 40px; height: 40px; border-radius: 50%; background: var(--green); display: flex; justify-content: center; align-items: center;}
.coupons-available .coupon-icon svg {width: 20px; height: 20px; fill: #fff;}
.coupons-available .coupon-info {flex: 1;}
.coupons-available .coupon-discount {font-size: 13px; color: #141414; font-weight: 700;}
.coupons-available .coupon-description {font-size: 11px; color: #505050;}
.coupons-available .coupon-name {padding: 6px 12px; background: #e5f5ec; color: var(--green); font-weight: 600; margin: 12px 0; text-align: center; border-radius: 6px; border: 2px dashed;}
/* cupons */

/* botão de copiar */
.coupons-available .btn.btn-coupon-copy {font-size: 12px; width: 100%; max-width: 175px; padding: 8px 12px; background: var(--green); color: #fff; font-weight: 600;}
.coupons-available .btn.btn-coupon-copy:hover {background: var(--green-hover); color: #fff;}
.coupons-available .btn.btn-coupon-copy:active {background: var(--green-active); color: #fff;}
.coupons-available .btn.btn-coupon-copy i {font-size: 16px;} 
.coupons-available .btn-coupon-content {display: flex; justify-content: center; align-items: center; gap: 4px; transition: opacity 0.3s ease;}
.coupons-available .btn-coupon-content.fade-out {opacity: 0;}
.coupons-available .btn-coupon-content.fade-in {opacity: 1;}
/* botão de copiar */

.coupons-available .coupon-text-footer {font-size: 13px; margin: 0; text-align: center;}

@keyframes shake {
	0%, 95%, 100% { transform: translateX(0); }
	1%, 3%, 5%, 7%, 9% { transform: translateX(-1.5px); }
	2%, 4%, 6%, 8%, 10% { transform: translateX(1.5px); }
}
/* cupons disponíveis */