/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/*
 * Brand design tokens — taken from the live Elementor global kit
 * (post-1513.css) so every reward/loyalty surface matches the site.
 * Keep this block identical to the one in points-and-rewards-gamifications
 * so both plugins render one consistent visual language.
 */
:root {
	--wps-color-primary: #394139;
	--wps-color-primary-hover: #7D8C79;
	--wps-color-secondary: #252724;
	--wps-color-accent: #A6845E;
	--wps-color-text: #68675F;
	--wps-color-bg: #F7F4EE;
	--wps-color-bg-alt: #EAE4DA;
	--wps-color-white: #FFFEFB;
	--wps-color-border: #DDD7CD;
	--wps-font-heading: "Bodoni Moda", Georgia, serif;
	--wps-font-body: "Inter", -apple-system, sans-serif;
	--wps-radius: 10px;
	--wps-radius-sm: 6px;
	--wps-btn-padding: 12px 22px;
}

.wps-contest-summary {
    background: var(--wps-color-white);
    padding: 25px;
    margin-top: 25px;
    border-radius: var(--wps-radius);
    border: 1px solid var(--wps-color-border);
    box-shadow: 0 4px 18px rgba(57, 65, 57, 0.06);
    font-family: var(--wps-font-body);
}

/* HEADER */
.wps-contest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.wps-contest-title {
    font-family: var(--wps-font-heading);
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    color: var(--wps-color-secondary);
    line-height: 1.25;
}

/* STATUS TAGS */
.wps-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wps-color-white);
}

.wps-status.active {
    background: var(--wps-color-primary-hover);
}

.wps-status.ended {
    background: var(--wps-color-text);
}

.wps-status.upcoming {
    background: var(--wps-color-accent);
}

/* CONTENT AREA */
.wps-contest-content {
    background: var(--wps-color-bg);
    padding: 10px 18px;
    border-radius: var(--wps-radius);
}

.wps-contest-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--wps-color-border);
}

.wps-contest-item:last-child {
    border-bottom: none;
}

/* TEXT STYLING */
.wps-contest-summary .wps-label {
    font-weight: 600;
    font-size: 16px;
    color: var(--wps-color-secondary);
}

.wps-contest-summary .wps-value {
    font-weight: 400;
    font-size: 14px;
    color: var(--wps-color-text);
}

.wps-value.highlight {
    background: var(--wps-color-bg-alt);
    padding: 4px 10px;
    border-radius: var(--wps-radius-sm);
    color: var(--wps-color-primary);
}

.bonus-box .wps-value {
    color: var(--wps-color-primary);
    font-weight: 700;
    background: var(--wps-color-bg-alt);
    padding: 4px 10px;
    border-radius: var(--wps-radius-sm);
}

.wps-bonus-message {
    margin-top: 10px;
    background: var(--wps-color-bg-alt);
    padding: 10px 15px;
    border-radius: 0;
    border-left: 4px solid var(--wps-color-accent);
    font-size: 15px;
    font-weight: 600;
    color: var(--wps-color-secondary);
}

.wps-status.completed {
    background: var(--wps-color-secondary);
}

.wps-contests-wrapper {
    max-width: 850px;
    margin: 25px auto;
    padding: 15px;
    border: 1px solid var(--wps-color-border);
    border-radius: var(--wps-radius);
    background: var(--wps-color-white);
    font-family: var(--wps-font-body);
}

.wps-contests-wrapper .wps-title {
    text-align: left;
    margin-bottom: 15px;
    font-family: var(--wps-font-heading);
    font-size: 24px;
    font-weight: 500;
    color: var(--wps-color-secondary);
}

.wps-contest-card {
    background: var(--wps-color-white);
    border-radius: var(--wps-radius);
    padding: 0;
    margin-bottom: 15px;
    border: 1px solid var(--wps-color-border);
    box-shadow: 0 4px 14px rgba(57, 65, 57, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.wps-contest-card:hover {
    transform: translateY(-3px);
}

.wps-contests-wrapper .wps-contest-header {
    padding: 10px;
    background: transparent;
    border-bottom: 1px solid var(--wps-color-border);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

.wps-contest-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--wps-color-primary);
}

.wps-contests-wrapper .wps-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.wps-contest-body {
    display: none;
    padding: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.wps-contest-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.wps-contest-table th {
    background: var(--wps-color-bg-alt);
    padding: 8px;
    font-weight: 600;
    border-bottom: 2px solid var(--wps-color-border);
    color: var(--wps-color-secondary);
}

.wps-contest-table td {
    padding: 8px;
    border-bottom: 1px solid var(--wps-color-border);
}

.wps-contest-table tr:hover td {
    background: var(--wps-color-bg);
}

.wps-contest-header.is-open .arrow-icon {
    transform: rotate(180deg);
}

.hello-world-after-price {
    margin-top: 10px;
    font-weight: 600;
}

.redeem-available {
    color: var(--wps-color-primary-hover);
}

.redeem-unavailable {
    color: var(--wps-color-text);
}

/*   +++++++++++        Milestone tier css  +++++++++++++++++++  */

/* Overlay */
.wps_wpr_tier_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 39, 36, 0.6);
    display: none;
    z-index: 9999;
}

/* Animation */
@keyframes slow-show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Modal Box */
.wps_wpr_tier_modal_content {
    background: var(--wps-color-white);
    width: calc(100% - 30px);
    max-width: 800px;
    padding: 25px;
    border-radius: var(--wps-radius);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slow-show 0.3s linear;
    font-family: var(--wps-font-body);
}

.wps_wpr_tier_modal_content_items {
    max-height: 600px;
    padding: 15px 0 0;
    overflow: auto;
}

.wps_wpr_tier_modal_content_item {
    padding: 15px;
    background: var(--wps-color-bg);
    border-radius: var(--wps-radius);
    margin: 0 1px 25px 0;
    border: 1px solid var(--wps-color-border);
}

.wps_wpr_tier_modal_content_item:last-of-type {
    margin-bottom: 0;
}

.wps_wpr_tier_modal_content_i-head {
    border-bottom: 1px solid var(--wps-color-border);
    padding: 0 0 15px;
    margin: 0 0 20px;
}

.wps_wpr_tier_modal_content_i-head h3 {
    font-family: var(--wps-font-heading);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 5px;
    color: var(--wps-color-secondary);
}

.wps_wpr_tier_modal_content_i-head p {
    line-height: 1.5;
    margin: 0;
    color: var(--wps-color-text);
}

.wps_wpr_tier_modal_content_i-cont {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

.wps_wpr_tier_modal_content_item .custom-product-card {
    margin: 0;
    flex: 1 0 calc(33% - 5px);
    max-width: calc(33% - 5px);
    padding: 15px;
    border: 1px solid var(--wps-color-border);
    border-radius: var(--wps-radius-sm);
    transition: 0.2s all linear;
    background: var(--wps-color-white);
}

.wps_wpr_tier_modal_content_item .custom-product-card:hover {
    border-color: var(--wps-color-accent);
    box-shadow: 0 0 8px rgba(166, 132, 94, 0.15);
}

/* Close Button */
.wps_wpr_tier_modal_close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 14px;
    width: 44px;
    height: 44px;
    border-radius: var(--wps-radius-sm);
    color: var(--wps-color-secondary);
}

.wps_wpr_tier_modal_close:hover {
    background: transparent;
    color: var(--wps-color-text);
}

.wps_wpr_tier_modal_content>h2 {
    font-family: var(--wps-font-heading);
    font-size: 24px;
    font-weight: 500;
    padding: 0 0 10px;
    color: var(--wps-color-secondary);
    margin: 0;
}

.wps_wpr_tier_milestone_notice {
    background: var(--wps-color-bg);
    padding: 12px 16px;
    margin: 0 0 15px;
    border-left: 4px solid var(--wps-color-accent);
    border-radius: var(--wps-radius-sm);
    font-size: 14px;
    font-family: var(--wps-font-body);
    color: var(--wps-color-secondary);
}

.wpr_wpr_tier_unlock_gift_link {
    font-weight: 600;
    margin-left: 5px;
    text-decoration: underline;
    color: var(--wps-color-primary);
}

.wps_wpr_tier_modal_content_item .custom-product-card img {
    margin: 0 0 15px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--wps-radius-sm);
    max-height: 325px;
    overflow: hidden;
    object-view-box: inset(0%);
    transition: all 0.2s linear;
}

.wps_wpr_tier_modal_content_item .custom-product-card img:hover {
    object-view-box: inset(10%);
}

.wps_wpr_tier_modal_content_item .custom-product-card button.button {
    width: 100%;
    border-radius: var(--wps-radius-sm);
    padding: 10px 14px;
    background: var(--wps-color-primary);
    color: var(--wps-color-white);
    font-weight: 400;
    line-height: 1.5;
}

.wps_wpr_tier_modal_content_item .custom-product-card button.button:hover {
    background: var(--wps-color-primary-hover);
}

.wps_wpr_tier_modal_content_item .custom-product-card h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 5px;
    color: var(--wps-color-secondary);
}

.wps_wpr_tier_modal_content_item .custom-product-card>span {
    display: block;
    margin: 0 0 15px;
}

.wps_wpr_tier_modal_content_item .custom-product-card .amount {
    font-size: 24px;
}

/* My Account start */
.wps-p_masd-i-gifts-card {
    padding: 15px;
    background: var(--wps-color-white);
    border-radius: var(--wps-radius-sm);
    border: 1px solid var(--wps-color-border);
    box-shadow: 0 0 15px rgba(57, 65, 57, 0.06);
    margin: 0 0 15px;
    transition: all 0.2s linear;
    font-family: var(--wps-font-body);
}

.wps-p_masd-i-gifts-card:hover {
    border-color: var(--wps-color-accent);
    background: var(--wps-color-bg);
}

.wps-p_masd-i-gifts-card h3 {
    font-family: var(--wps-font-heading);
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    color: var(--wps-color-secondary);
}

.wps-p_masd-i-gifts-card .gift-balance,
.wps-p_masd-i-gifts-card .gift-rewards {
    color: var(--wps-color-text);
}

.wps-p_masd-i-gifts-card .gift-balance strong,
.wps-p_masd-i-gifts-card .gift-rewards strong {
    font-size: 18px;
    color: var(--wps-color-accent);
}

.wps-p_masd-i-gifts-card .gift-history {
    text-align: right;
    margin: -25px 0 0;
}

.wps-p_masd-i-gifts-card .gift-rate {
    padding: 5px 10px;
    background: var(--wps-color-bg);
    color: var(--wps-color-accent);
    margin: 15px 0 0;
    border-radius: var(--wps-radius-sm);
    line-height: 1.5;
}

.wps-p_masd-i-gifts-card .gift-history a {
    color: var(--wps-color-accent);
}

.wps-p_masd-i-gifts-card progress {
    width: 100%;
    display: block;
    margin: 5px 0;
    border-radius: 2px;
    border: none;
    height: 6px;
    background: var(--wps-color-bg-alt);
}

.wps-p_masd-i-gifts-card progress::-webkit-progress-bar {
    background-color: var(--wps-color-bg-alt);
    border-radius: 10px;
    overflow: hidden;
}

.wps-p_masd-i-gifts-card progress::-webkit-progress-value {
    background-color: var(--wps-color-accent);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Firefox */
.wps-p_masd-i-gifts-card progress::-moz-progress-bar {
    background-color: var(--wps-color-accent);
}

.wps-p_masd-i-gifts-card .wps_wpr_slide_toggle .wps_wpr_view_log_notice {
    color: var(--wps-color-accent);
    background: var(--wps-color-white);
    border-color: var(--wps-color-accent);
}

.wps-p_masd-i-gifts-card .wps_wpr_slide_toggle {
    margin: 10px 0;
}

.wps-p_masd-i-gifts-card .wps_wpr_slide_toggle table {
    margin: 0;
}

.wps-p_masd-i-gifts-card .wps_wpr_slide_toggle .wps_wpr_common_slider a.wps_wpr_open_toggle::before,
.wps-p_masd-i-gifts-card .wps_wpr_slide_toggle .wps_wpr_common_slider a.wps_wpr_open_toggle::after {
    background: var(--wps-color-accent);
}

.wps-p_masd-i-gifts-card .wps_wpr_slide_toggle * {
    color: var(--wps-color-secondary);
}

@media screen and (max-width: 768px) {
    .wps_wpr_tier_modal_content_item .custom-product-card {
        flex: 1 0 95%;
        max-width: 100%;
    }

    .wps_wpr_tier_modal_content_items {
        max-height: 500px;
    }
}

/* New CSS for checkout WPS Start */

.wps_wpr_tier_milestone_notice a {
    background: var(--wps-color-primary);
    color: var(--wps-color-white);
    border-radius: var(--wps-radius-sm);
    margin: 0;
    padding: 8px 16px;
}

.wps_wpr_tier_milestone_notice a:hover {
    background: var(--wps-color-primary-hover);
}

.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class {
    max-width: 720px;
    margin: 0;
}

.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class p {
    margin: 15px 0 0;
}

.custom_point_checkout.woocommerce-info.wps_wpr_checkout_points_class::before {
    top: 30px;
}

.wps_wpr_tier_milestone_notice {
    max-width: 720px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.wps_wpr_tier_modal_content .wps_wpr_tier_modal_close {
    position: absolute;
    background: transparent;
    padding: 5px;
    font-size: 28px;
    font-weight: 400;
}
/* New CSS for checkout WPS End */

/* PAR update CSS start */

.wps_wpr_tier_modal_content {
    width: calc(100% - 20px);
    max-width: 1440px;
    padding: 15px;
}

.wps_wpr_tier_modal_content_i-cont {
    width: 100%;
}

.wps_wpr_tier_modal_content_item .custom-product-card {
    flex: 1 0 calc(16.6% - 8px);
    max-width: calc(16.6% - 8px);
	    display: flex;
    flex-direction: column;
	position: relative;
}

.wps_wpr_tier_modal_content_item .custom-product-card:hover {
    border-color: var(--wps-color-accent);
}

.wps_wpr_tier_modal_content_item .custom-product-card h3 {
    font-size: 16px;
	display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wps_wpr_tier_modal_content_item .custom-product-card .button+a.added_to_cart.wc-forward {
    position: absolute;
    top: 15px;
    padding: 5px 10px;
    background: var(--wps-color-white);
    border: 1px solid var(--wps-color-border);
    border-radius: var(--wps-radius-sm);
    right: 15px;
    color: var(--wps-color-primary);
}

/* For Price hide/show */
.wps_wpr_tier_modal_content_item .custom-product-card h3+span {
    flex: 1;
    margin: 0;
    height: 0; /* Remove this */
    visibility: hidden; /* Remove this */
    line-height: 0; /* Remove this */
}

.wps_wpr_tier_modal_content_item .custom-product-card button.button {
    margin: 10px 0 0;
    background: transparent;
    color: var(--wps-color-primary);
    font-weight: 600;
    border: 1px solid var(--wps-color-primary);
}

.wps_wpr_tier_modal_content_item .custom-product-card button.button:hover {
    background: var(--wps-color-primary);
    color: var(--wps-color-white);
}

.wps-birth-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 0;
    gap: 10px;
    flex-wrap: wrap;
}

.wps-birth-pagination-controls>.button {
    background: var(--wps-color-secondary);
    color: var(--wps-color-white);
    padding: 8px 15px;
    line-height: 1;
    min-height: 30px;
    border-radius: var(--wps-radius-sm);
    display: none; /* Hidden */
}

.wps-birth-pagination-controls .wps-birth-page-numbers button {
    line-height: 1;
    width: 30px;
    height: 30px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50px;
    color: var(--wps-color-secondary);
    background: transparent;
}

.wps-birth-pagination-controls .wps-birth-page-numbers button.active {
    color: var(--wps-color-white);
    background: var(--wps-color-primary);
}

@media screen and (max-width: 1140px) {
		.wps_wpr_tier_modal_content_item .custom-product-card {
			flex: 1 0 calc(33.3% - 8px);
			max-width: calc(33.3% - 8px);
	}
}
@media screen and (max-width: 480px){
.wps_wpr_tier_modal_content_item .custom-product-card {
    flex: 1 0 calc(16% - 5px);
    max-width: calc(16% - 5px);
    padding: 0;
    background: transparent;
    border-radius: 2px;
}
.wps_wpr_tier_modal_content_item .custom-product-card h3 {
    font-size: 12px;
    padding: 0px;
    display: unset;
    -webkit-line-clamp: none;
    -webkit-box-orient: horizontal;
}
.wps_wpr_tier_modal_content_item .custom-product-card  select {
    padding-right: 22px;
    height: 36px;
    width: 100%;
}
.wps_wpr_tier_modal_content_i-cont {
    gap: 8px;
}
.wps_wpr_tier_modal_content_item .custom-product-card .button+a.added_to_cart.wc-forward {
    display: none;
}
}

/* Referral Milestone progress bar, injected into the existing Referral tab. */
.wps-par-referral-milestone-wrap {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--wps-color-border);
    font-family: var(--wps-font-body);
}
.wps-par-referral-milestone-title {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--wps-color-secondary);
}
.wps-par-referral-milestone-count {
    margin: 0 0 20px;
    color: var(--wps-color-text);
}
.wps-par-referral-milestone-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--wps-color-border);
    margin: 30px 10px 62px;
}
.wps-par-referral-milestone-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--wps-color-primary-hover);
    transition: width 0.3s ease;
}
.wps-par-referral-milestone-marker {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wps-color-white);
    border: 2px solid var(--wps-color-border);
    transform: translate(-50%, -50%);
}
.wps-par-referral-milestone-marker.achieved {
    background: var(--wps-color-primary-hover);
    border-color: var(--wps-color-primary-hover);
}
.wps-par-referral-milestone-marker-label {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.35;
}

.wps-par-referral-milestone-marker-count {
    font-size: 11px;
    color: var(--wps-color-text);
}

.wps-par-referral-milestone-marker-benefit {
    font-size: 11px;
    font-weight: 600;
    color: var(--wps-color-accent);
}

.wps-par-referral-milestone-marker.achieved .wps-par-referral-milestone-marker-benefit {
    color: var(--wps-color-primary-hover);
}

/* Keep the first/last labels from overflowing past the track's edges. */
.wps-par-referral-milestone-marker-label-start {
    left: 0;
    transform: none;
    align-items: flex-start;
    text-align: left;
}

.wps-par-referral-milestone-marker-label-end {
    left: auto;
    right: 0;
    transform: none;
    align-items: flex-end;
    text-align: right;
}

/*
 * Shared UI overrides — the "Points & Rewards" My Account tab shell
 * (tab pills, active state, upgrade button) is owned by the
 * points-and-rewards-for-woocommerce plugin and driven entirely by the
 * --wps-wpr-primary custom property, which that plugin sets at runtime
 * via JS (jQuery(':root').css(...)) from an admin colour picker. We
 * cannot edit that plugin, so we pin the variable to the site's brand
 * colour here with !important — this wins over the JS-applied inline
 * style without touching the other plugin's files, keeping the tab
 * chrome visually consistent with the cards we render inside it.
 */
:root {
    --wps-wpr-primary: #394139 !important;
}

/* Multi-tier explainer note, My Rewards & Gifts tab */
.wps-tier-multi-note {
    background: var(--wps-color-bg);
    border-color: var(--wps-color-accent);
}

.wps-tier-multi-note p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wps-color-text);
}

/* Tier status badge + unlock condition text, My Rewards & Gifts tab */
.wps-tier-status-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    background: var(--wps-color-border);
    color: var(--wps-color-text);
}

.wps-tier-achieved .wps-tier-status-badge {
    background: var(--wps-color-primary-hover);
    color: var(--wps-color-white);
}

.wps-tier-locked {
    opacity: 0.85;
}

.wps-tier-condition {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--wps-color-text);
}

/* Login / review progress, shown consistently across all three tier cards */
.wps-tier-progress-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 10px 0;
}

.wps-tier-progress-item {
    flex: 1 0 45%;
}

.wps-tier-progress-label {
    display: block;
    font-size: 12px;
    color: var(--wps-color-text);
    margin-bottom: 4px;
}

.wps-tier-progress-item progress {
    width: 100%;
    display: block;
    height: 6px;
    border-radius: 2px;
    border: none;
    background: var(--wps-color-bg-alt);
    margin-bottom: 3px;
}

.wps-tier-progress-item progress::-webkit-progress-bar {
    background-color: var(--wps-color-bg-alt);
    border-radius: 10px;
}

.wps-tier-progress-item progress::-webkit-progress-value {
    background-color: var(--wps-color-accent);
    border-radius: 10px;
}

.wps-tier-progress-item progress::-moz-progress-bar {
    background-color: var(--wps-color-accent);
}

.wps-tier-progress-num {
    font-size: 12px;
    color: var(--wps-color-text);
}

/* Checkout gift-tier modal: tiers/products the customer hasn't unlocked yet */
.wps_wpr_tier_modal_content_item.wps-tier-locked .wps_wpr_tier_modal_content_i-head h3 {
    color: var(--wps-color-text);
}

.wps-tier-locked-note {
    font-size: 13px;
    font-style: italic;
    color: var(--wps-color-text);
    margin: 4px 0 0;
}

.custom-product-card.wps-locked {
    opacity: 0.5;
    filter: grayscale(65%);
    position: relative;
}

.custom-product-card.wps-locked button.wps_wpr_tier_one_ajax_to_add_product {
    background: var(--wps-color-border);
    color: var(--wps-color-text);
    cursor: not-allowed;
}

.custom-product-card.wps-locked button.wps_wpr_tier_one_ajax_to_add_product:hover {
    background: var(--wps-color-border);
}

/* Bonus Sticky Tier shopping-progress notice, cart + checkout */
.wps-bonus-sticky-tier-notice {
    max-width: 720px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--wps-color-bg);
    border-left: 4px solid var(--wps-color-accent);
    border-radius: var(--wps-radius-sm);
    font-family: var(--wps-font-body);
}

.wps-bonus-sticky-tier-notice p {
    margin: 0;
    font-size: 14px;
    color: var(--wps-color-secondary);
}

.wps-bonus-sticky-tier-notice p + p {
    margin-top: 6px;
}

.wps-bonus-sticky-tier-current {
    font-weight: 600;
    color: var(--wps-color-primary-hover);
}

.wps-bonus-sticky-tier-description {
    font-size: 13px;
    font-style: italic;
    color: var(--wps-color-text);
}

/* Bonus Sticky Tier — "Choose Your Free Gift" trigger, cart + checkout */
.wps-bonus-pool-trigger {
    max-width: 720px;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--wps-color-bg);
    border-left: 4px solid var(--wps-color-primary-hover);
    border-radius: var(--wps-radius-sm);
    font-family: var(--wps-font-body);
}

.wps-bonus-pool-trigger p {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--wps-color-secondary);
}

.wps-bonus-pool-trigger-progress {
    font-size: 12px;
    color: var(--wps-color-text);
}

.wps-bonus-pool-trigger #wps_wpr_open_bonus_pool_modal {
    display: inline-block;
    background: var(--wps-color-primary);
    color: var(--wps-color-white);
    border-radius: var(--wps-radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    text-decoration: none;
}

.wps-bonus-pool-trigger #wps_wpr_open_bonus_pool_modal:hover {
    background: var(--wps-color-primary-hover);
}

/* Bonus Sticky Tier — pool/product picker modal */

/* Outer safety cap — the inner scroll regions below handle "many gift
   products" gracefully on their own, this just guarantees the modal
   (header, close button included) never exceeds the viewport on short
   screens where header + inner max-height together still wouldn't fit. */
.wps-bonus-pool-modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

.wps-bonus-pool-modal-content p.wps-bonus-pool-modal-tier-name {
    font-family: var(--wps-font-heading);
    font-size: 18px;
    color: var(--wps-color-secondary);
    margin: 0 0 20px;
}

.wps-bonus-pool-step-pools {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Product grid within a chosen pool — scoped to this feature specifically
   so a tier with many gift products scrolls internally instead of pushing
   the modal (and its close button) taller than the viewport, while "Back
   to pools" and the remaining-count text above it stay in view. A fixed
   height (matching the existing Milestone Tier modal's own convention,
   just below it in this file) rather than a vh-based one, so it reliably
   caps at roughly one row of cards regardless of how many cards fit per
   row at the current viewport width (6 per row above 1140px, 3 per row
   below it — see the responsive rules further down this file) — with 9+
   gift products this always leaves a second row to scroll to, instead of
   only kicking in on short screens. */
.wps-bonus-pool-step-products .wps_wpr_tier_modal_content_i-cont {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}

.wps-bonus-pool-step-pools,
.wps-bonus-pool-step-products .wps_wpr_tier_modal_content_i-cont {
    scrollbar-width: thin;
    scrollbar-color: var(--wps-color-accent) var(--wps-color-bg);
}

.wps-bonus-pool-step-pools::-webkit-scrollbar,
.wps-bonus-pool-step-products .wps_wpr_tier_modal_content_i-cont::-webkit-scrollbar {
    width: 6px;
}

.wps-bonus-pool-step-pools::-webkit-scrollbar-track,
.wps-bonus-pool-step-products .wps_wpr_tier_modal_content_i-cont::-webkit-scrollbar-track {
    background: var(--wps-color-bg);
    border-radius: var(--wps-radius-sm);
}

.wps-bonus-pool-step-pools::-webkit-scrollbar-thumb,
.wps-bonus-pool-step-products .wps_wpr_tier_modal_content_i-cont::-webkit-scrollbar-thumb {
    background: var(--wps-color-accent);
    border-radius: var(--wps-radius-sm);
}

.wps-bonus-pool-card {
    flex: 1 0 calc(33.3% - 10px);
    min-width: 220px;
    padding: 15px;
    border: 1px solid var(--wps-color-border);
    border-radius: var(--wps-radius-sm);
    background: var(--wps-color-white);
}

.wps-bonus-pool-card h3 {
    font-family: var(--wps-font-heading);
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 5px;
    color: var(--wps-color-secondary);
}

.wps-bonus-pool-card-qty {
    display: block;
    font-size: 13px;
    color: var(--wps-color-accent);
    margin: 0 0 12px;
}

.wps-bonus-pool-card .wps-bonus-pool-select-btn {
    width: 100%;
    background: var(--wps-color-primary);
    color: var(--wps-color-white);
    border-radius: var(--wps-radius-sm);
    padding: 8px 14px;
    font-size: 13px;
}

.wps-bonus-pool-card .wps-bonus-pool-select-btn:hover {
    background: var(--wps-color-primary-hover);
}

.wps-bonus-pool-card.wps-locked {
    opacity: 0.6;
    background: var(--wps-color-bg);
}

.wps-bonus-pool-locked-note {
    font-size: 12px;
    font-style: italic;
    color: var(--wps-color-text);
    margin: 0;
}

.wps-bonus-pool-back {
    background: transparent;
    border: none;
    color: var(--wps-color-primary);
    font-size: 13px;
    padding: 0;
    margin: 0 0 12px;
    cursor: pointer;
    text-decoration: underline;
}

.wps-bonus-pool-remaining {
    font-size: 13px;
    font-weight: 600;
    color: var(--wps-color-secondary);
    margin: 0 0 15px;
}

.wps-bonus-pool-added-notice {
    font-size: 13px;
    color: var(--wps-color-primary-hover);
    font-weight: 600;
    margin: -8px 0 15px;
}

.wps-bonus-pool-step-products .custom-product-card button.wps-bonus-pool-add-gift {
    width: 100%;
    border-radius: var(--wps-radius-sm);
    padding: 10px 14px;
    background: var(--wps-color-primary);
    color: var(--wps-color-white);
    font-weight: 400;
    line-height: 1.5;
}

.wps-bonus-pool-step-products .custom-product-card button.wps-bonus-pool-add-gift:hover {
    background: var(--wps-color-primary-hover);
}

.wps-bonus-pool-step-products .custom-product-card.wps-locked button.wps-bonus-pool-add-gift {
    background: var(--wps-color-border);
    color: var(--wps-color-text);
    cursor: not-allowed;
}