.riverbox-form-modal,
.riverbox-form-extra-discount-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: #00000080 !important;
    backdrop-filter: blur(5px) !important;
    z-index: 9999;
}

.riverbox-form-content,
.riverbox-form-extra-discount-content {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 100px auto !important;
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 10px !important;
    color: #333333 !important;
    box-sizing: border-box;
}

.riverbox-form-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    cursor: pointer !important;
}

.riverbox-form-close::after {
    content: "\2715" !important;
    line-height: 1 !important;
}

.riverbox-form {
    margin: 0 !important;
}

.riverbox-form-quantity-header {
    font-size: 14px !important;
    font-weight: bold !important;
    font-style: italic !important;
    color: #FF0000 !important;
    text-align: center !important;
    margin: 20px 0 !important;
}

.riverbox-form-quantity-radio {
    display: none !important;
}

.riverbox-form-quantity-radio:checked ~ .riverbox-form-product {
    border-color: #FF0000 !important;
    border-width: 2px !important;
    background-color: #FF000010 !important;
}

.riverbox-form-quantity {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.riverbox-form-product {
    position: relative !important;
    height: 80px !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 10px !important;
    color: #333333 !important;
    cursor: pointer !important;
}

.riverbox-form-product-image {
    height: 100% !important;
}

.riverbox-form-product-image img {
    height: 100% !important;
    width: auto !important;
}

.riverbox-form-product-description {
    flex: 1 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 5px !important;
}

.riverbox-form-product-description p {
    margin: 0px !important;
}

.riverbox-form-product-price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    padding: 5px !important;
}

.riverbox-form-product-price-original {
    font-weight: bold !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.riverbox-form-product-price-original-discounted {
    text-decoration: line-through !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.riverbox-form-product-price-discounted {
    font-weight: bold !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.riverbox-form-fields-header {
    font-size: 14px !important;
    font-weight: bold !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

.riverbox-form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.riverbox-form-field {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (max-width: 720px) {
    .riverbox-form-field {
        flex-direction: column !important;
        gap: 5px !important;
        align-items: flex-start !important;
    }
}

.riverbox-form-label {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.riverbox-form-input-container {
    flex: 1 !important;
    width: 100% !important;
    max-width: 350px !important;
    display: flex !important;
    background-color: #EEEEEE !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 10px !important;
}

@media (max-width: 720px) {
    .riverbox-form-input-container {
        max-width: 100% !important;
    }
}

.riverbox-form-input-image {
    width: 15px !important;
    height: auto !important;
    margin: 10px !important;
}

.riverbox-form-input {
    border: none !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    flex: 1 !important;
    background-color: #FFFFFF !important;
    padding: 5px !important;
    color: #333333 !important;
}

.riverbox-form-delivery-field {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 5px !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.riverbox-form-delivery-radio {
    margin: 10px 20px !important;
}

.riverbox-form-delivery-description {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    color: #555;
    margin: 0 !important;
}

.riverbox-form-delivery-description span {
    font-weight: normal !important;
    line-height: 1.5 !important;
}

.riverbox-form-delivery-price {
    margin: 0 !important;
    padding: 5px !important;
    font-weight: normal !important;
}

.riverbox-form-cost {
    padding: 5px !important;
    border: 1px solid #DDDDDD !important;
    background-color: #F9F9F9 !important;
    border-radius: 10px !important;
}

.riverbox-form-cost-entry {
    width: 100% !important;
    display: flex;
    flex-direction: row !important;
    justify-content: space-between !important;
}

.riverbox-form-total-cost {
    color: #000000 !important;
}

.riverbox-form-cost-entry-discount {
    display: none;
}

.riverbox-form-cost-entry-discount .riverbox-form-cost-entry-value {
    color: #FF0000 !important;
}

.riverbox-form-cost-entry:last-child {
    font-weight: bold !important;
    border-top: 1px solid #CCCCCC !important;
}

.riverbox-form-cost-entry-title,
.riverbox-form-cost-entry-value {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 5px !important;
}

.riverbox-form-cost-entry:last-child .riverbox-form-cost-entry-title {
    font-size: 16px !important;
}

.riverbox-form-cost-entry:last-child .riverbox-form-cost-entry-value {
    font-size: 16px !important;
}

.riverbox-form-required::after {
    content:" *" !important;
    color: #FF0000 !important;
}

.riverbox-form-delivery-header {
    font-size: 14px !important;
    font-weight: bold !important;
    margin-top: 20px !important;
    color: #000000 !important;
}

.riverbox-form-submit {
    width: 100% !important;
    margin-top: 10px !important;
    background-color: #f03535 !important;
    padding: 10px !important;
    border: 2px solid #000000 !important;
    border-radius: 5px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.riverbox-form-submit-cost {
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin: 2px !important;
}

.riverbox-form-submit-delivery {
    margin: 2px !important;
}

.riverbox-form-extra-discount-content {
    width: 350px !important;
}

.riverbox-form-extra-discount-modal {
    display: none;
    z-index: 99999 !important;
}

.riverbox-form-extra-discount-modal-header {
    text-align: center !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
}

.riverbox-form-extra-discount-modal-body {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
}

.riverbox-form-extra-discount-modal-shape {
    width: 50% !important;
    aspect-ratio: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 30px auto !important;
    background: linear-gradient(to right, #f03535, #ec8b00e0) !important;
    color: #FFFFFF !important;
    clip-path: polygon(100% 50%,89.51% 56.26%,97.55% 65.45%,85.64% 68.16%,90.45% 79.39%,78.28% 78.28%,79.39% 90.45%,68.16% 85.64%,65.45% 97.55%,56.26% 89.51%,50% 100%,43.74% 89.51%,34.55% 97.55%,31.84% 85.64%,20.61% 90.45%,21.72% 78.28%,9.55% 79.39%,14.36% 68.16%,2.45% 65.45%,10.49% 56.26%,0% 50%,10.49% 43.74%,2.45% 34.55%,14.36% 31.84%,9.55% 20.61%,21.72% 21.72%,20.61% 9.55%,31.84% 14.36%,34.55% 2.45%,43.74% 10.49%,50% 0%,56.26% 10.49%,65.45% 2.45%,68.16% 14.36%,79.39% 9.55%,78.28% 21.72%,90.45% 20.61%,85.64% 31.84%,97.55% 34.55%,89.51% 43.74%);
}

.riverbox-form-extra-discount-modal-shape p {
    font-weight: bold !important;
    font-size: 42px !important;
    margin: 0 !important;
}

.riverbox-form-extra-discount-button {
    display: block !important;
    margin: 5px 0 !important;
    padding: 10px !important;
    width: 100% !important;
    font-size: 16px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    border: 2px solid #333333 !important;
    border-radius: 5px !important;
}

@keyframes shake {
    60% {
        transform: rotate(0deg) scale(1);
    }

    64%, 96% {
        transform: rotate(-1deg);
    }
    
    68%, 92% {
        transform: rotate(2deg) scale(1.05);
    }

    72%, 80%, 88% {
        transform: rotate(-4deg) scale(1.1);
    }

    76%, 84% {
        transform: rotate(4deg);
    }
}

.riverbox-form-extra-discount-apply-button {
    animation: shake 2.5s cubic-bezier(.36,.07,.19,.97) infinite;
    background: linear-gradient(to right, #f03535, #ec8b00e0) !important;
    color: #FFFFFF !important;
    border-width: 4px !important;
}

.riverbox-form-extra-discount-no-button {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}
