.offer{
    background: white;
}

.offer_table .offer{
    border-top: 1px solid rgba(173, 70, 255, 0.40);
    border-bottom: 1px solid rgba(173, 70, 255, 0.40);
    border-left: 1px solid rgba(173, 70, 255, 0.40);
}

.offer_table .offer_container:first-child .offer{
    border-radius:16px 0 0 16px;
    overflow:hidden;
}

.offer_table .offer_container:last-child .offer{
    border-radius:0 16px 16px 0;
    border-right: 1px solid rgba(173, 70, 255, 0.40);
    overflow:hidden;
}

.offer_table .offer_container:only-child .offer {
    border-radius: 16px;
    border-right: 1px solid rgba(173, 70, 255, 0.40);
    overflow: hidden;
}

.offer {
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      background: #051937;
    }
}

.offer.preview{
    border-radius: 16px;
    overflow:hidden;
    position: relative;
    border: 1px solid #566696;
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      border: 1px solid rgba(173, 70, 255, 0.40);
    }
}

.offer_container{
    position: relative;
    width: 320px;
}

.offer_header{
    display: flex;
    width: 320px;
    height: 60px;
    padding: 0 12.5px 0 12px;
    justify-content: center;
    align-items: center;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    background: #051937;

    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      background: #566696;
    }
}

.recommanded .offer_header{
    background: linear-gradient(90deg, #341A68 0%, #412841 100%);
}

.offer_header_text{
    color: #fff;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px; /* 107.143% */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.offer_head{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 320px;
}

.offer_head_content{
    height: 250px;
    width: 320px;
    padding: 32px 32px 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27px;
    align-self: start;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

.recommanded .offer_head{
    background: linear-gradient(140deg, #33176E 3.04%, #4C2E2A 96.96%);
}

.offer_name{
    color: #051937;
    text-align: center;
    font-family: Poppins;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 102.857% */
    letter-spacing: 0.75px;
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      color: #fff;
    }
}
.recommanded .offer_name{
    color: #fff;
}

.offer_market_text{
    color: #051937;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    text-align: center;
    width:100%;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      color: #fff;
    }
}
.recommanded .offer_market_text{
    color: #fff;
}

.offer_price_container{
    display: flex;
    height: 32px;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
}

.offer_price{
    color: #051937;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
    flex: 1 0 0;
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      color: #fff;
    }
}
.recommanded .offer_price{
    color: #fff;
}

.offer_price_sub_line{
    color: #051937;
    text-align: center;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 177.778% */
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      color: #fff;
    }
}
.recommanded .offer_price_sub_line{
    color: #fff;
}

.offer_messages_container{
    display: flex;
    width: 320px;
    height: 75px;
    padding: 25px 0 26px 0;
    justify-content: center;
    align-items: center;
    align-self: start;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    background: linear-gradient(90deg, #3E2963 0%, #523B32 50%, #3E2963 100%);
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      background: linear-gradient(90deg, rgba(152, 16, 250, 0.20) 0%, rgba(255, 105, 0, 0.20) 50%, rgba(152, 16, 250, 0.20) 100%);
    }
}

.recommanded .offer_messages_container{
    background: linear-gradient(92deg, #4D1D79 0.51%, #683729 99.49%);
}

.offer_messages{
    width: 100%;
    height: 24px;
    flex-shrink: 0;
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 155.556% */
}

.offer_description{
    display: flex;
    width: 320px;
    height: 336px;
    padding: 24px 24px 24px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: start;
}

.recommanded .offer_description{
    background: linear-gradient(135deg, #13184A 0%, #151E3C 50%, #1D2133 100%);
}

.offer_description_line{
    display: flex;
    height: 20px;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.offer_description_line_check{
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 33554400px;
    border: 1px solid rgba(5, 223, 114, 0.50);
    background: rgba(0, 201, 80, 0.10);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M10 3L4.5 8.5L2 6" stroke="%2305DF72" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-size: 12px 12px;
    background-repeat:no-repeat;
}

.offer_description_line_more{
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 33554400px;
    border: 1px solid rgba(194, 122, 255, 0.50);
    background: rgba(173, 70, 255, 0.10);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6H9.5" stroke="%23C27AFF" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 2.5V9.5" stroke="%23C27AFF" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-size: 12px 12px;
    background-repeat:no-repeat;
}

.offer_description_line_text{
    display: flex;
    height: 20px;
    align-items: flex-start;
    color: #051937;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      color: #fff;
    }
}

.recommanded .offer_description_line_text{
    color: #fff;
}

.offer_button_container{
    display: flex;
    width: 320px;
    height: 77px;
    padding: 16px 32px 15px 33px;
    justify-content: center;
    align-items: center;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

.offer_button{
    display: flex;
    width: 255px;
    height: 46px;
    padding: 13px 41px 13px 42px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    background: #051937;
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      background: #566696;
    }
    cursor: pointer;
}

.offer_button:hover{
    background: rgba(5, 25, 55, 0.80);
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      background: rgba(86, 102, 150, 0.50);
    }
}

.recommanded .offer_button{
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 255, 0.30);
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.20) 0%, rgba(249, 115, 22, 0.20) 100%);
}

.recommanded .offer_button:hover{
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 255, 0.30);
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.30) 0%, rgba(249, 115, 22, 0.30) 100%);
}

.offer_button span{
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    font-variant: all-small-caps;
}

.offer_popular{
    display: flex;
    height: 26px;
    width: 120px;
    padding: 4px 10px 6px 10px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 33554400px;
    border: 1px solid #051937;
    position:absolute;
    left: calc(50% - 60px);
    top:-13px;
    z-index:900;
    background: #fff;
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.30);
    }
}

.offer_popular_text{
    color: #051937;
    text-align: center;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.6px;
    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
      color: #FFF;
    }
}

.offer_popular_icon{
    width:12px;
    height:12px;
    background-position: center;
    background-size: 12px 12px;
    background-repeat:no-repeat;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><g clip-path="url(%23clip0_55_33)"><rect width="12" height="12" fill="white"/><path d="M5.50848 1.40698C5.5299 1.29228 5.59076 1.18868 5.68053 1.11414C5.77029 1.03959 5.88329 0.998779 5.99998 0.998779C6.11666 0.998779 6.22967 1.03959 6.31943 1.11414C6.40919 1.18868 6.47005 1.29228 6.49148 1.40698L7.01698 4.18598C7.0543 4.38355 7.15031 4.56529 7.29249 4.70746C7.43467 4.84964 7.6164 4.94565 7.81398 4.98298L10.593 5.50848C10.7077 5.5299 10.8113 5.59076 10.8858 5.68053C10.9604 5.77029 11.0012 5.88329 11.0012 5.99998C11.0012 6.11666 10.9604 6.22967 10.8858 6.31943C10.8113 6.40919 10.7077 6.47005 10.593 6.49148L7.81398 7.01698C7.6164 7.0543 7.43467 7.15031 7.29249 7.29249C7.15031 7.43467 7.0543 7.6164 7.01698 7.81398L6.49148 10.593C6.47005 10.7077 6.40919 10.8113 6.31943 10.8858C6.22967 10.9604 6.11666 11.0012 5.99998 11.0012C5.88329 11.0012 5.77029 10.9604 5.68053 10.8858C5.59076 10.8113 5.5299 10.7077 5.50848 10.593L4.98298 7.81398C4.94565 7.6164 4.84964 7.43467 4.70746 7.29249C4.56529 7.15031 4.38355 7.0543 4.18598 7.01698L1.40698 6.49148C1.29228 6.47005 1.18868 6.40919 1.11414 6.31943C1.03959 6.22967 0.998779 6.11666 0.998779 5.99998C0.998779 5.88329 1.03959 5.77029 1.11414 5.68053C1.18868 5.59076 1.29228 5.5299 1.40698 5.50848L4.18598 4.98298C4.38355 4.94565 4.56529 4.84964 4.70746 4.70746C4.84964 4.56529 4.94565 4.38355 4.98298 4.18598L5.50848 1.40698Z" stroke="%23051937" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 1V3" stroke="%23051937" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 2H9" stroke="%23051937" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 11C2.55228 11 3 10.5523 3 10C3 9.44772 2.55228 9 2 9C1.44772 9 1 9.44772 1 10C1 10.5523 1.44772 11 2 11Z" stroke="%23051937" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_55_33"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');

    &:where([data-theme=voconix_dark], [data-theme=voconix_dark] *) {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><g clip-path="url(%23clip0_5_436)"><path d="M5.50848 1.40701C5.5299 1.29231 5.59076 1.18871 5.68053 1.11417C5.77029 1.03962 5.88329 0.99881 5.99998 0.99881C6.11666 0.99881 6.22967 1.03962 6.31943 1.11417C6.40919 1.18871 6.47005 1.29231 6.49148 1.40701L7.01698 4.18601C7.0543 4.38358 7.15031 4.56532 7.29249 4.70749C7.43467 4.84967 7.6164 4.94568 7.81398 4.98301L10.593 5.50851C10.7077 5.52993 10.8113 5.59079 10.8858 5.68056C10.9604 5.77032 11.0012 5.88333 11.0012 6.00001C11.0012 6.11669 10.9604 6.2297 10.8858 6.31946C10.8113 6.40922 10.7077 6.47008 10.593 6.49151L7.81398 7.01701C7.6164 7.05433 7.43467 7.15035 7.29249 7.29252C7.15031 7.4347 7.0543 7.61643 7.01698 7.81401L6.49148 10.593C6.47005 10.7077 6.40919 10.8113 6.31943 10.8858C6.22967 10.9604 6.11666 11.0012 5.99998 11.0012C5.88329 11.0012 5.77029 10.9604 5.68053 10.8858C5.59076 10.8113 5.5299 10.7077 5.50848 10.593L4.98298 7.81401C4.94565 7.61643 4.84964 7.4347 4.70746 7.29252C4.56529 7.15035 4.38355 7.05433 4.18598 7.01701L1.40698 6.49151C1.29228 6.47008 1.18868 6.40922 1.11414 6.31946C1.03959 6.2297 0.998779 6.11669 0.998779 6.00001C0.998779 5.88333 1.03959 5.77032 1.11414 5.68056C1.18868 5.59079 1.29228 5.52993 1.40698 5.50851L4.18598 4.98301C4.38355 4.94568 4.56529 4.84967 4.70746 4.70749C4.84964 4.56532 4.94565 4.38358 4.98298 4.18601L5.50848 1.40701Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 1V3" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 2H9" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 11C2.55228 11 3 10.5523 3 10C3 9.44772 2.55228 9 2 9C1.44772 9 1 9.44772 1 10C1 10.5523 1.44772 11 2 11Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_5_436"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>');
    }
}

@media (width <= 40rem)
{
    .offer_table .offer{
        border: 1px solid rgba(173, 70, 255, 0.40);
        border-radius: 16px !important;
        overflow:hidden !important;
    }

    .offer_table .offer .offer_description{
        height : auto !important;
    }
}