.rmb-d-flex {
    display: flex;
}

.rmb-flex-column {
    flex-direction: column;
}

.rmb-gap-xxsmall {
    gap: 4px;
}

.rmb-max-qty-cart {
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    color: #66696D;
    text-align: right;
}

.rmb-content-buy-get-info {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #414346;
    padding: 12px 16px 0px 16px;
}

.rmb-multiple-purchase-wrapper {
    padding: 8px;
    border-radius: 8px;
    background-color: #FFECCC;
}

.rmb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.rmb-modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

body.rmb-modal-open {
    overflow: hidden;
}

.rmb-modal {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
    width: 900px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.rmb-modal.show {
    transform: scale(1);
    opacity: 1;
}

.rmb-modal.show {
    transform: scale(1);
    opacity: 1;
    animation: rmb-modal-animate 0.3s ease;
}

@keyframes rmb-modal-animate {
    0%   { transform: scale(0.8); opacity: 0; }
    50%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}

.rmb-modal-header {
    display: flex;
    justify-content: end;
    width: 100%;
}

#rmb-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #F6F7F8;
    border: none;
    transition: 0.05s;
    padding: 4px;
}

#rmb-modal-close:hover {
    background-color: #e7e7e7;
}

.rmb-modal-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rmb-content-heading {
    font-weight: 800;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 8px;
}

.rmb-content-information {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    text-align: left
}

.rmb-information {
    display: flex;
    flex-direction: column;
    gap: 4px
}



.rmb-content-purchase-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.rmb-purchase-button-wrapper {
    display: grid;
    grid-template-columns: 36px 36px 36px 1fr;
    gap: 4px;
    width: 100%;
    align-items: center;
}

.rmb-purchase-button {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #E1E3E6;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #414346;
    background-color: #FFFFFF;
    transition: 0.1s;
    cursor: pointer;
}

.rmb-purchase-button.active {
    background-color: #ED1D1D;
    color: #FFFFFF;
    border: none;
}

.rmb-purchase-button:hover {
    filter: brightness(0.9);
}

.rmb-purchase-custom {
    background-color: #FFFFFF;
    border: 1px solid #E1E3E6;
    color: #414346;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    max-height: 36px;
}

.rmb-custom-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.rmb-custom-form-wrapper input {
    background-color: #F6F7F8;
    border: 1px solid #E1E3E6;
    color: #1F2122;
    border-radius: 4px;
    width: 44px;
    padding: 0 8px;
}

.rmb-custom-form-wrapper button {
    background-color: #FFFFFF;
    border: 1px solid #ED1D1D;
    color: #ED1D1D;
    border-radius: 4px;
    padding: 0 8px
}

.rmb-content-buy-get {
    background: #FF4D00;
    background: linear-gradient(90deg,rgba(255, 77, 0, 1) 0%, rgba(255, 125, 31, 1) 100%);
    padding: 16px;
    border-radius: 12px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.rmb-buy-x,.rmb-get-x {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #FFECCC;
}

.rmb-buy-x-title, .rmb-get-x-title {
    width: 100%;
    padding: 12px;
    text-align: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 28px;
    line-height: 24px;
    text-transform: uppercase;
}

.rmb-buy-x-title {
    background-color: #FE8012;
}

.rmb-get-x-title {
    background-color: #000000;
}

.rmb-buy-x-product, .rmb-get-x-product {
    padding: 0px 16px 20px 16px;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.rmb-content-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background-color: #F2F5F7;
    padding: 8px;
    border-radius: 8px;
}

.rmb-footer-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px
}

.rmb-items-card {
    background-color: #FFFFFF;
    padding: 8px 18px 8px 8px;
    border-radius: 8px;
    width: 100%;
    text-align: start;
}

.rmb-card-thumbnail {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    gap: 14px;
    width: 100%;
}

.rmb-thumbnail-image {
    position: relative;
    border-radius: 4px;
    width: 68px;
    height: 68px;
}

.rmb-thumbnail-image img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.rmb-thumbnail-label {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background-color: #ED1D1D;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    position: absolute;
    right: -8px;
    top: -9px;
}

.rmb-items-icon {
    background: #000000;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.rmb-items-icon:before{
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.9974%2016.3307C9.76128%2016.3307%209.56351%2016.2507%209.40406%2016.0907C9.24406%2015.9313%209.16406%2015.7335%209.16406%2015.4974V11.3307H4.9974C4.76128%2011.3307%204.56323%2011.2507%204.40323%2011.0907C4.24378%2010.9313%204.16406%2010.7335%204.16406%2010.4974C4.16406%2010.2613%204.24378%2010.0632%204.40323%209.90323C4.56323%209.74378%204.76128%209.66406%204.9974%209.66406H9.16406V5.4974C9.16406%205.26128%209.24406%205.06323%209.40406%204.90323C9.56351%204.74378%209.76128%204.66406%209.9974%204.66406C10.2335%204.66406%2010.4316%204.74378%2010.5916%204.90323C10.751%205.06323%2010.8307%205.26128%2010.8307%205.4974V9.66406H14.9974C15.2335%209.66406%2015.4313%209.74378%2015.5907%209.90323C15.7507%2010.0632%2015.8307%2010.2613%2015.8307%2010.4974C15.8307%2010.7335%2015.7507%2010.9313%2015.5907%2011.0907C15.4313%2011.2507%2015.2335%2011.3307%2014.9974%2011.3307H10.8307V15.4974C10.8307%2015.7335%2010.751%2015.9313%2010.5916%2016.0907C10.4316%2016.2507%2010.2335%2016.3307%209.9974%2016.3307Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
}

.rmb-footer-button {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rmb-footer-button button {
    width: 100%;
    padding: 16px 40px;
    border-radius: 8px;
    background: #ED1D1D;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    border: none;
    transition: 0.1s;
}

.rmb-footer-button button:hover {
    background: #c21515;
}

.rmb-footer-button button:focus {
    background: #c21515;
}

.rmb-footer-button button.rmb-footer-btn-disable {
    width: 100%;
    padding: 16px 40px;
    border-radius: 8px;
    background: #0035711F;
    color: #66696D;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    border: none;
    transition: 0.1s;
}

.rmb-footer-button button.rmb-footer-btn-disable:hover {
    background: rgba(3, 44, 93, 0.12);
}

.rmb-footer-button button.rmb-footer-btn-disable:focus {
    background: rgba(3, 44, 93, 0.12);
}

.rmb-footer-text-disable {
    text-align: end;
    color: #66696D;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
}

.rmb-promotion-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: rmb-spin 1s linear infinite;
  }
  
  @keyframes rmb-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }