:root {
--dark-bg-color: #245B10;
--button-color: #6F8D2F;
--advantages: #7D9934;
--disadvantages: #B72E27;
--advantages-bg: #f2f5eb;
--disadvantages-bg: #f8eae9;
--stars: #FFC20A;
--light-bg: #FFEDE1;
--button-text-color: #fff;
--linking-a: #232224;
}
.gift {
position: fixed;
z-index: 333;
top: 125px;
right: 10px;
}
.gift__icon {
width: 51px;
height: 52px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='52' fill='none'%3E%3Cpath fill='%23fff' stroke='%2338a89d' stroke-width='3' d='M23 50.5c11.874 0 21.5-9.626 21.5-21.5S34.874 7.5 23 7.5 1.5 17.126 1.5 29 11.126 50.5 23 50.5Z'/%3E%3Cmask id='a' width='40' height='40' x='3' y='9' mask-type='alpha' maskUnits='userSpaceOnUse'%3E%3Cpath fill='%2324B90C' d='M23 49c11.046 0 20-8.954 20-20S34.046 9 23 9 3 17.954 3 29s8.954 20 20 20Z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23F43434' d='M42.198 25.658 9.881 17c-.338-.09-.717.227-.847.71L1.766 44.836c-.13.483.04.948.378 1.038l32.317 8.66c.339.09.718-.227.847-.71l7.269-27.127c.13-.483-.04-.948-.379-1.039Z'/%3E%3Cpath fill='%23DF1010' d='M41.566 28.012 9.25 19.352a.622.622 0 0 0-.771.425l-.63 2.354L41.39 31.12l.63-2.354a.622.622 0 0 0-.455-.753Z'/%3E%3Cpath fill='%23FFDB57' d='M29.238 22.186 22.84 20.47c-.346-.092-.728.212-.853.679l-7.034 26.253c-.126.467.053.921.4 1.014l6.397 1.714c.346.093.727-.211.853-.678L29.637 23.2c.125-.468-.053-.922-.4-1.014Z'/%3E%3Cpath fill='%23F5BA3D' d='m29.126 22.153-6.17-1.653a.629.629 0 0 0-.768.448l-.65 2.428 7.378 1.977.65-2.428a.629.629 0 0 0-.44-.772Z'/%3E%3Cpath fill='%23FFDB57' d='M43.81 14.004c-.175-1.718-.701-3.492-1.408-4.745-.26-.46-.69-.773-1.241-.907-1.825-.444-5.396 1.064-10.614 4.482a.636.636 0 0 0-.266.367l-.865 3.228a.628.628 0 0 0 .44.772l9.29 2.49c2.07.554 3.198-.235 3.779-.994.775-1.012 1.089-2.679.885-4.693Z'/%3E%3Cpath fill='%23EF9325' d='M43.871 15.16a.633.633 0 0 0-.032-.197c-.538-1.638-2.649-1.645-4.324-1.362-4.867.822-7.39 3.074-7.495 3.17a.637.637 0 0 0-.191.617.624.624 0 0 0 .445.46l6.874 1.843c1.317.353 2.403.206 3.228-.437.98-.763 1.498-2.179 1.495-4.094Z'/%3E%3Cpath fill='%23FFDB57' d='M26.383 11.718c-2.81-5.568-5.149-8.66-6.95-9.188-.546-.16-1.075-.103-1.53.165-1.238.731-2.58 2.005-3.59 3.406-1.184 1.642-1.746 3.242-1.581 4.506.123.948.705 2.195 2.775 2.75l9.29 2.489a.629.629 0 0 0 .767-.449l.865-3.228a.635.635 0 0 0-.046-.45Z'/%3E%3Cpath fill='%23EF9325' d='M23.14 14.391c-.044-.135-1.102-3.347-4.907-6.492-1.31-1.083-3.14-2.132-4.426-.983a.635.635 0 0 0-.126.155c-.96 1.657-1.22 3.142-.753 4.293.394.969 1.261 1.64 2.578 1.992l6.874 1.842a.624.624 0 0 0 .617-.177.638.638 0 0 0 .142-.63Z'/%3E%3Cpath fill='%23F5BA3D' d='m31.21 12.149-5.06-1.356a.629.629 0 0 0-.767.449l-1.026 3.831a.628.628 0 0 0 .44.772l5.06 1.356a.629.629 0 0 0 .767-.448l1.027-3.832a.629.629 0 0 0-.44-.772Z'/%3E%3Cpath fill='%23F43434' d='M47.277 20.712 7.955 10.176c-.355-.095-.73.161-.84.572l-1.967 7.34c-.11.41.087.82.441.915l39.322 10.536c.355.095.73-.161.84-.572l1.967-7.34c.11-.41-.087-.82-.441-.915Z'/%3E%3Cpath fill='%23FFDB57' d='m32.03 16.627-8.828-2.365-2.365 8.826 8.827 2.366 2.365-8.827Z'/%3E%3C/g%3E%3Cpath fill='%23F43434' d='M42.198 25.658 9.881 17c-.338-.09-.66.015-.72.236l-3.325 12.41c-.06.22.167.473.506.564l32.317 8.66c.338.09.66-.016.72-.236l3.325-12.41c.06-.221-.167-.474-.506-.565Z'/%3E%3Cpath fill='%23DF1010' d='M41.566 28.012 9.25 19.352a.622.622 0 0 0-.771.425l-.63 2.354L41.39 31.12l.63-2.354a.622.622 0 0 0-.455-.753Z'/%3E%3Cpath fill='%23FFDB57' d='M29.238 22.186 22.84 20.47c-.346-.092-.696.093-.782.415l-4.842 18.071c-.087.322.124.658.47.75l6.398 1.715c.345.092.696-.093.782-.415l4.842-18.071c.086-.322-.124-.658-.47-.75Z'/%3E%3Cpath fill='%23F5BA3D' d='m29.126 22.153-6.17-1.653a.629.629 0 0 0-.768.448l-.65 2.428 7.378 1.977.65-2.428a.629.629 0 0 0-.44-.772Z'/%3E%3Cpath fill='%23FFDB57' d='M43.81 14.004c-.175-1.718-.701-3.492-1.408-4.745-.26-.46-.69-.773-1.241-.907-1.825-.444-5.396 1.064-10.614 4.482a.636.636 0 0 0-.266.367l-.865 3.228a.628.628 0 0 0 .44.772l9.29 2.49c2.07.554 3.198-.235 3.779-.994.775-1.012 1.089-2.679.885-4.693Z'/%3E%3Cpath fill='%23EF9325' d='M43.871 15.16a.633.633 0 0 0-.032-.197c-.538-1.638-2.649-1.645-4.324-1.362-4.867.822-7.39 3.074-7.495 3.17a.637.637 0 0 0-.191.617.624.624 0 0 0 .445.46l6.874 1.843c1.317.353 2.403.206 3.228-.437.98-.763 1.498-2.179 1.495-4.094Z'/%3E%3Cpath fill='%23FFDB57' d='M26.383 11.718c-2.81-5.568-5.149-8.66-6.95-9.188-.546-.16-1.075-.103-1.53.165-1.238.731-2.58 2.005-3.59 3.406-1.184 1.642-1.746 3.242-1.581 4.506.123.948.705 2.195 2.775 2.75l9.29 2.489a.629.629 0 0 0 .767-.449l.865-3.228a.635.635 0 0 0-.046-.45Z'/%3E%3Cpath fill='%23EF9325' d='M23.14 14.391c-.044-.135-1.102-3.347-4.907-6.492-1.31-1.083-3.14-2.132-4.426-.983a.635.635 0 0 0-.126.155c-.96 1.657-1.22 3.142-.753 4.293.394.969 1.261 1.64 2.578 1.992l6.874 1.842a.624.624 0 0 0 .617-.177.638.638 0 0 0 .142-.63Z'/%3E%3Cpath fill='%23F5BA3D' d='m31.21 12.149-5.06-1.356a.629.629 0 0 0-.767.449l-1.026 3.831a.628.628 0 0 0 .44.772l5.06 1.356a.629.629 0 0 0 .767-.448l1.027-3.832a.629.629 0 0 0-.44-.772Z'/%3E%3Cpath fill='%23F43434' d='M47.277 20.712 7.955 10.176c-.355-.095-.73.161-.84.572l-1.967 7.34c-.11.41.087.82.441.915l39.322 10.536c.355.095.73-.161.84-.572l1.967-7.34c.11-.41-.087-.82-.441-.915Z'/%3E%3Cpath fill='%23FFDB57' d='m32.03 16.627-8.828-2.365-2.365 8.826 8.827 2.366 2.365-8.827Z'/%3E%3C/svg%3E");
cursor: pointer;
animation: present 10s linear 5s infinite;
transition: color 0.3s ease, background 0.3s ease;
position: relative;
z-index: 333;
}
.gift__icon-num {
position: absolute;
bottom: 0;
left: 30px;				
background-color: #38a89d;
color: white;
font-size: 12px;
font-weight: 600;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
border-radius: 8px;
}
@keyframes present {
0% {
transform: rotateZ(-15deg);
}
1% {
transform: rotateZ(15deg);
}
2% {
transform: rotateZ(-15deg);
}
3% {
transform: rotateZ(15deg);
}
4% {
transform: rotateZ(0deg);
}
}
.gift__content {
display: none;
position: absolute;
right: 0;
top: 66px;
z-index: 333;
}
.gift-open .gift__content {
display: block;
}
.gift__content::before {
position: absolute;
content: '';
width: 20px;
height: 20px;
border-top: 2px solid var(--advantages);
border-right: 2px solid var(--advantages);
background-color: #4dc0b5;
transform: rotate(-45deg);
right: 20px;
top: -9px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
}
.gift__content-close {
position: absolute;
top: -10px;
left: 11px;
color: #4dc0b5;
background-color: white;
border: 2px solid #4dc0b5;
border-radius: 13px;
width: 24px;
height: 24px;
text-align: center;
line-height: 22px;
box-sizing: content-box;
transform: rotate(45deg);
font-size: 26px;
cursor: pointer;
}
.gift__content-close:hover {
color: var(--dark-bg-color);
border: 2px solid var(--dark-bg-color);
}
.gift__item {
display: grid;
grid-template-columns: 90px 250px 100px;
gap: 12px;
align-items: center;
justify-items: center;
padding: 6px 12px;
border: 2px solid #4dc0b5;
background-color: #0d0833;
margin-bottom: 5px;
border-radius: 8px;
}
.us-template .gift__content-close {
color: var(--button-color);
border: 2px solid var(--button-color);
}
.us-template .gift__content-close:hover {
color: var(--dark-bg-color);
border: 2px solid var(--dark-bg-color);
}
.us-template .gift__item {
border: 2px solid var(--button-color);
background-color: var(--light-bg);
}
.us-template .gift__content::before {
border-top: 2px solid var(--button-color);
border-right: 2px solid var(--button-color);
background-color: var(--light-bg);
}
.us-template .gift__icon {
background-image: url(//hastingsfnc.com.au/wp-content/themes/akurai-1/assets/css/img/present-us.svg);
}
.us-template .gift__icon-num {
background-color: var(--button-color);
}
.gift__item-img {
width: 70px;
height: 70px;
background-size: contain;
background-position: center;
border-radius: 35px;
background-repeat: no-repeat;
}
.gift__item-text {
font-size: 14px;
margin-right: auto;
font-weight: 700;
color: #fff;
}
.gift__item-button {
width: 105px;
padding: 10px;
font-size: 16px;
background: #38a89d;
color: var(--button-text-color);
display: inline-block;
border-radius: 6px;
font-weight: 700;
text-align: center;
}
.gift__item-button:hover {
background: #4dc0b5;
color: #fff;
}
.bd-template .gift__item {
border: 2px solid var(--button-color);
background-color: var(--disadvantages-bg);
}
.bd-template .gift__content::before {
border-top: 2px solid var(--button-color);
border-right: 2px solid var(--button-color);
background-color: var(--advantages-bg);
}
@media (max-width: 1200px) {
.gift__item {
grid-template-columns: 70px 120px 80px;
}
}