rivo_skio_rewards_block.css

:root {
    /* Text color for buttons, links, and code containers; contrasts well with light backgrounds */
    --primary-dark: #000000;

    /* Background color for copy button and text color for dark backgrounds; ensures legibility */
    --primary-light: #ffffff;

    /* Border color for the main container and buttons; provides a subtle, defining edge */
    --border-color: #eaeaea;

    /* Background color for skeleton placeholders and reward items; highlights distinct sections */
    --background-accent: #f0f0f0;

    /* Text color for reward items; softer contrast than primary text color */
    --secondary-text: #6d7278;
}

/* Skeleton placeholder */
.skeleton-placeholder {
    display: flex;
    flex-direction: column;
    background-color: var(--primary-light);
    border-radius: 25px;
    border: 1px solid var(--border-color);
    padding: 20px;
    margin: 5px;
    margin-bottom: 30px;
}

.skeleton-header,
.skeleton-subheader,
.skeleton-box {
    background-color: var(--background-accent);
    border-radius: 10px;
    margin: 10px 0;
}

.skeleton-header {
    width: 60%;
    height: 24px;
}

.skeleton-subheader {
    width: 40%;
    height: 18px;
}

.skeleton-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.skeleton-box {
    width: 48%;
    height: 60px;
}

/* Main Container and Points Container */
.rivo-container {
    border: 1px solid var(--border-color);
    padding: 20px;
    margin: 5px;
    margin-bottom: 30px;
    border-radius: 25px;
    background-color: var(--primary-light);
}

button.rivo-redeem-points {
    background: var(--primary-dark);
    color: var(--primary-light);
    padding: 10px 15px 10px 15px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    border-radius: 50px;
}

.points-balance {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0px;
}

.rivo-points-balance {
    font-weight: bold;
}

.rivo-h3 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
}

.rivo-points-container {
    margin: 10px 20px 20px 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.rivo-loyalty-container {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 15px;
}

/* Availale Rewards */

.rivo-rewards-container {
    max-width: 100%;
    flex: auto;
}

#subscription-instruction-msg,
.store-rewards-subtitle {
    font-size: small;
    color: var(--primary-dark);
    height: 40px;
}


.rivo-points-container a {
    text-decoration: underline !important;
    text-decoration-color: var(--primary-dark);
}

#rewards-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.reward-item {
    height: 70px;
    margin-bottom: 10px;
    padding: 10px 20px;
    background: var(--background-accent);
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}

.reward-item span {
    font-weight: 500;
    letter-spacing: 0px;
    color: var(--secondary-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.code-container {
    display: inline-block;
    font-weight: bold;
    color: var(--primary-dark);
    font-family: monospace;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.copy-reward-button {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    align-self: center;
    min-width: 70px;
    flex-shrink: 0;
}

.copy-reward-button:hover {
    opacity: 80%;
}


/* Store Rewards */

.rivo-store-rewards-container {
    max-width: 100%;
    flex: auto;
}

#store-rewards-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.store-reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 8px 16px;
    border: 1px solid var(--background-accent);
    border-radius: 15px;
    justify-content: center;
    background-color: var(--primary-light);
}

.reward-name,
.redeem-button,
.reward-points {
    font-weight: 500;
    letter-spacing: 0px;
    color: var(--secondary-text);
    cursor: pointer;

}

.reward-name {
    color: var(--primary-dark);
    font-weight: bold;
}

.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.confirm-buttons button {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.confirm-buttons button.confirm {
    background-color: black;
    color: white;
}

.confirm-buttons button:hover {
    opacity: 0.8;
}

.not-enough-points,
.redeeming-message {
    font-weight: 500;
    letter-spacing: 0px;
    color: var(--secondary-text);
}


.reward-name,
.redeem-button,
.confirm-buttons button {
    cursor: pointer;
}

.reward-name-container {
    display: flex;
    align-items: center;
    max-width: 100%;
    cursor: pointer;
    width: 100%;
    flex-direction: column;
}

.reward-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.reward-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: normal;
    font-size: 14px;
}

.reward-name,
.reward-points,
.redeem-button,
.confirm-buttons {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.reward-name,
.redeem-button {
    max-width: 100%;
}


.SubscriptionDivider-sc-14q967r-0 iJvDbM {
    margin: 15px 0px;
}


/* Media query for screens larger than 734px */
@media (min-width: 733px) {

    .redeem-button,
    .text-container span,
    code-container {
        max-width: 230px;
    }

    .rivo-rewards-container,
    .rivo-store-rewards-container {
        width: 30%;
    }
}


/* Media query for screens less than 734px */
@media (max-width: 733px) {
    .rivo-loyalty-container {
        flex-direction: column;
    }
}