/* ================================================== */
/* CONTRIBUTION MODAL STYLES */
/* ================================================== */
/* Shared new-UI tokens for guest + demo contribution modals (:root palette from style.css) */
#contributionModal,
#demoContributionModal {
    --contrib-coral-hover: #c94a4d;
    /* Softer than pure white: reads as a field on cream without glare */
    --contrib-field-surface: color-mix(in srgb, var(--cream) 32%, white);
    /* Host / couple note panels — coral-tinted cream */
    --contrib-note-card-bg: color-mix(in srgb, var(--coral) 24%, var(--cream));
    /* Skewed layer behind guest note textarea — slightly stronger coral wash */
    --contrib-note-decoration-bg: color-mix(in srgb, var(--coral) 36%, var(--cream));
}

#contributionModal .contribution-currency-chevron path,
#demoContributionModal .contribution-currency-chevron path {
    stroke: rgba(30, 30, 30, 0.42);
}

#contributionModal .contribution-mobile-product-header,
#contributionModal .contribution-mobile-note-label {
    display: none;
}

#contributionModal .contribution-mobile-hero,
#contributionModal .contribution-mobile-note-helper {
    display: none;
}

#contributionModal .contribution-mobile-stage-viewport,
#contributionModal .contribution-mobile-stage {
    display: contents;
}

/* Contribution Modal Styles - Two Column Layout */
#contributionModal.figma-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10000 !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#contributionModal.figma-modal-overlay.active,
#contributionModal.figma-modal-overlay[style*="display: block"] {
    display: flex;
}

#contributionModal .figma-modal-container.contribution-modal-two-column {
    background: var(--cream);
    border-top: 1px solid rgba(86, 16, 35, 0.14);
    border-radius: 0px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    padding: 35px;
    box-shadow: 8px 8px 0 0 #561023;
    transition: box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

#contributionModal .contribution-modal-two-column.is-reserved {
    box-shadow: 8px 8px 0 0 #e45558;
}

#contributionModal .figma-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--maroon);
    font-size: 28px;
    z-index: 10;
}

#contributionModal .contribution-modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Left Column */
#contributionModal .contribution-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#contributionModal .contribution-product-image-wrapper {
    position: relative;
    width: 100%;
    max-height: 400px;
    /* min-height: 200px; */
    flex-shrink: 0;
    overflow: hidden;
    background: var(--offwhite);
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contributionModal .contribution-product-image-wrapper.is-reserved .contribution-product-image {
    filter: saturate(0.4) brightness(0.85);
    transition: filter 200ms ease;
}

#contributionModal .contribution-product-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    object-position: center;
    display: block;
}

#contributionModal .contribution-textarea-wrapper {
    position: relative;
}

#contributionModal .contribution-textarea-decoration {
    position: absolute;
    background: var(--contrib-note-decoration-bg);
    border-radius: 0px;
    width: calc(100% + 10px);
    height: 100%;
    left: -5px;
    top: -5px;
    transform: rotate(357.974deg) skewX(1.479deg);
    z-index: 0;
}

#contributionModal .contribution-textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px 16px 30px;
    background: var(--contrib-field-surface);
    border: none;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 15px;
    color: var(--black);
    letter-spacing: -0.44px;
    resize: none;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

#contributionModal .contribution-textarea::-webkit-scrollbar {
    display: none;
}


#contributionModal .contribution-textarea-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-family: var(--rsv-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(86, 16, 35, 0.48);
    letter-spacing: 0.02em;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    z-index: 2;
    pointer-events: none;
    transition: color 0.2s;
}

#contributionModal .contribution-textarea::placeholder {
    color: rgba(30, 30, 30, 0.58);
}

#contributionModal .contribution-textarea:focus {
    outline: none;
}

/* Validation error styles */
#contributionModal .contribution-textarea.error,
#contributionModal #contributionAmount.error {
    border-color: #e74c3c;
    animation: shake 0.5s ease-in-out;
}

#contributionModal .contribution-note-error {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: #e74c3c;
    font-size: 13px;
    font-style: italic;
}

#contributionModal .contribution-amount-error {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: #e74c3c;
    font-size: 13px;
    font-style: italic;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

#contributionModal .contribution-mobile-step-dots span {
    transition: background 0.3s ease, width 0.3s ease, flex 0.3s ease;
}

/* Right Column */
#contributionModal .contribution-right-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

#contributionModal .contribution-product-info {
    margin-bottom: 10px;
    text-align: left;
    padding: 0;
}

#contributionModal .contribution-product-name {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    color: var(--black);
    letter-spacing: -0.48px;
    margin: 0 0 8px 0;
    padding: 0;
    text-align: left;
}

#contributionModal .contribution-product-price {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    font-size: 22px;
    color: rgba(30, 30, 30, 0.58);
    letter-spacing: -0.44px;
    padding: 0;
    text-align: left;
}

#contributionModal .contribution-explanation-text {
    display: block;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.58);
    text-align: left;
}

#contributionModal .contribution-bar-section {
    margin: 6px 0;
    display: flex;
    flex-direction: column;
}

#contributionModal .contribution-bar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

#contributionModal .contribution-bar-pct {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #e45558;
    letter-spacing: 0.02em;
}

#contributionModal .contribution-bar-user-tag {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.62rem;
    color: rgba(86, 16, 35, 0.5);
    margin-left: 10px;
}

#contributionModal .contribution-bar-remaining {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.65rem;
    color: rgba(30, 30, 30, 0.42);
}

#contributionModal .contribution-bar-track {
    position: relative;
    height: 16px;
    background: rgba(86, 16, 35, 0.14);
    margin-bottom: 22px;
    cursor: col-resize;
}

#contributionModal .contribution-bar-funded {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #e45558;
    opacity: 0.38;
    pointer-events: none;
}

#contributionModal .contribution-bar-user {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #e45558;
    pointer-events: none;
}

#contributionModal .contribution-bar-sep {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ede6dc;
    z-index: 2;
    pointer-events: none;
}

#contributionModal input[type="range"].contribution-bar-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 200%;
    background: transparent;
    outline: none;
    border: none;
    cursor: col-resize;
    margin: 0;
    padding: 0;
    z-index: 3;
}

#contributionModal input[type="range"].contribution-bar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 32px;
    background: #561023;
    border: 2px solid #ede6dc;
    cursor: col-resize;
}

#contributionModal input[type="range"].contribution-bar-slider:hover::-webkit-slider-thumb {
    background: #e45558;
}

#contributionModal input[type="range"].contribution-bar-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: 100%;
}

#contributionModal input[type="range"].contribution-bar-slider::-moz-range-thumb {
    width: 8px;
    height: 32px;
    background: #561023;
    border-radius: 0px;
    border: 2px solid #ede6dc;
    cursor: col-resize;
}

#contributionModal input[type="range"].contribution-bar-slider::-moz-range-track {
    background: transparent;
    border: none;
    height: 100%;
}

#contributionModal .contribution-quick-amounts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#contributionModal .contribution-quick-btn {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 5px 10px;
    border: 1.5px solid rgba(86, 16, 35, 0.18);
    background: transparent;
    color: #561023;
    cursor: pointer;
    border-radius: 0px;
    transition: background 110ms ease, color 110ms ease;
    white-space: nowrap;
}

#contributionModal .contribution-quick-btn:hover,
#contributionModal .contribution-quick-btn.is-active {
    background: #561023;
    color: #ede6dc;
    border-color: #561023;
}

#contributionModal .contribution-price-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--contrib-field-surface);
    border-radius: 0px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 12px;
}

#contributionModal .contribution-currency-selector {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    cursor: pointer;
    min-width: 50px;
}

#contributionModal .contribution-currency-select {
    background: transparent;
    border: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 17px;
    color: var(--black);
    letter-spacing: -0.31px;
    cursor: pointer;
    padding: 0;
    padding-right: 26px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
}

#contributionModal .contribution-currency-select option {
    background: var(--contrib-field-surface);
    color: var(--black);
}

#contributionModal .contribution-currency-display {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 17px;
    color: var(--black);
    letter-spacing: -0.44px;
    pointer-events: none;
    z-index: 1;
}

#contributionModal .contribution-currency-chevron {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    pointer-events: none;
    position: relative;
    z-index: 1;
    margin-left: 4px;
}

#contributionModal .contribution-price-divider {
    width: 1px;
    height: 20px;
    background: rgba(86, 16, 35, 0.18);
    flex-shrink: 0;
}

#contributionModal .contribution-price-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 17px;
    color: var(--black);
    letter-spacing: -0.44px;
}

#contributionModal .contribution-price-input-wrapper input::placeholder {
    color: rgba(30, 30, 30, 0.58);
    font-size: 17px;
}

#contributionModal .contribution-price-input-wrapper input:focus {
    outline: none;
}

#contributionModal .contribution-shopping-bag-btn {
    width: 46.4px;
    height: 46.4px;
    background: var(--coral);
    border: none;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

#contributionModal .contribution-shopping-bag-btn:hover {
    background: var(--contrib-coral-hover);
}

#contributionModal .contribution-shopping-bag-btn svg {
    width: 26px;
    height: 26px;
    fill: white;
}

/* ================================================== */
/* CONTRIBUTION MODAL BUTTON STYLES */
/* ================================================== */

/* Base Button Styles - Standardized shape, size, and fonts */
/* All buttons share these common properties */
#contributionModal .contribution-submit-btn,
#contributionModal .contribution-action-contribute-btn,
#contributionModal .contribution-action-reserve-btn,
#contributionModal .contribution-cancel-btn,
.contribution-action-contribute-btn,
.contribution-action-reserve-btn {
    padding: 14px 16px;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Proceed to Pay Button */
#contributionModal .contribution-submit-actions {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#contributionModal .contribution-submit-btn {
    width: 100%;
    background: var(--coral);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#contributionModal .contribution-submit-actions .contribution-submit-btn {
    margin-top: 0;
    width: auto;
    flex: 1;
}

#contributionModal .contribution-submit-actions .contribution-submit-btn:disabled,
#contributionModal .contribution-submit-actions .contribution-submit-btn.button-disabled {
    flex: 1;
    width: auto;
    min-width: 0;
    display: flex;
}

#contributionModal .contribution-back-btn {
    min-width: 108px;
    padding: 14px 16px;
    border-radius: 0px;
    border: 1px solid var(--maroon);
    background: #fff;
    color: var(--maroon);
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#contributionModal .contribution-back-btn:hover {
    background: var(--maroon);
    color: var(--cream);
}

#contributionModal .contribution-submit-btn:hover:not(:disabled) {
    background: var(--contrib-coral-hover);
}

#contributionModal .contribution-submit-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

#contributionModal .contribution-submit-btn.button-disabled[data-tooltip] {
    position: relative;
}

#contributionModal .contribution-submit-btn.button-disabled[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    background: var(--maroon);
    color: var(--cream);
    padding: 8px 10px;
    border-radius: 0px;
    font-size: 12px;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 500;
    line-height: 1.3;
    max-width: 280px;
    width: max-content;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 20;
}

/* Contribution Modal - Action Buttons Container */
.contribution-action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
}

/* Contribute Button */
.contribution-action-contribute-btn,
.contribution-action-reserve-btn {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.contribution-action-contribute-btn:focus,
.contribution-action-contribute-btn:focus-visible,
.contribution-action-contribute-btn:active,
.contribution-action-reserve-btn:focus,
.contribution-action-reserve-btn:focus-visible,
.contribution-action-reserve-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.contribution-action-contribute-btn {
    flex: 1;
    background: var(--coral);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contribution-action-contribute-btn:hover:not(:disabled) {
    background: var(--contrib-coral-hover);
}

.contribution-action-contribute-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Icon styling for action buttons */
.contribution-action-contribute-btn i,
.contribution-action-reserve-btn i {
    font-size: 16px;
}

/* Reserve & Buy Button */
.contribution-action-reserve-btn {
    flex: 1;
    background: var(--coral);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contribution-action-reserve-btn:hover:not(:disabled) {
    background: var(--contrib-coral-hover);
}

.contribution-action-reserve-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

.contribution-action-separator {
    text-align: center;
    color: rgba(30, 30, 30, 0.58);
    font-size: 15px;
    font-weight: 500;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: center; /* Center vertically within the flex container */
    justify-content: center;
    font-family: 'Nanum Myeongjo', serif;
}

/* Cancel Button - Hidden on desktop, visible on mobile */
.contribution-cancel-btn {
    display: none;
    width: 100%;
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--maroon);
    color: var(--maroon);
    font-weight: 500;
}

.contribution-cancel-btn:hover {
    background: var(--maroon);
    color: var(--cream);
    border-color: var(--maroon);
}

/* Reserved bar at bottom of product image */
#contributionModal .contribution-reserved-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 34px;
    background: #561023;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    z-index: 10;
}

#contributionModal .contribution-reserved-bar::before,
#contributionModal .contribution-reserved-bar::after {
    content: "";
    width: 18px;
    height: 1px;
    background: rgba(237, 230, 220, 0.32);
}

#contributionModal .contribution-reserved-bar-text {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #ede6dc;
}

/* Reserve Actions Container */
#contributionModal .contribution-reserve-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

/* Buy Online Button */
#contributionModal .contribution-buy-online-btn {
    flex: 1;
    padding: 14px 16px;
    background: var(--coral);
    border: none;
    border-radius: 0px;
    color: white;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#contributionModal .contribution-buy-online-btn i,
#contributionModal .contribution-unreserve-btn i,
#contributionModal .contribution-submit-btn i {
    font-size: 16px;
}

#contributionModal .contribution-buy-online-btn:hover:not(:disabled) {
    background: var(--contrib-coral-hover);
}

#contributionModal .contribution-buy-online-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Unreserve Button */
#contributionModal .contribution-unreserve-btn {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: 2px solid var(--maroon);
    border-radius: 0px;
    color: var(--maroon);
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#contributionModal .contribution-unreserve-btn:hover:not(:disabled) {
    background: var(--maroon);
    color: var(--cream);
}

#contributionModal .contribution-unreserve-btn:disabled {
    border-color: #cccccc;
    color: #cccccc;
    cursor: not-allowed;
}

/* Disabled/Readonly Textarea State */
#contributionModal .contribution-textarea:disabled,
#contributionModal .contribution-textarea[readonly] {
    background: var(--contrib-field-surface);
    color: #999999;
    cursor: not-allowed;
}

/* Host warning in modal */
.host-contribution-warning {
    color: #d32f2f;
    background-color: #ffebee;
    padding: 10px;
    border-radius: 0px;
    margin-top: 15px;
    font-size: 13px;
    text-align: center;
    display: none; /* Hidden by default */
    border: 1px solid #ffcdd2;
}

/* Couple Note Card - Desktop & Mobile Base Styles */
.couple-note-card,
.couple-note-card-mobile {
    background: var(--contrib-note-card-bg);
    border: 1px solid rgba(86, 16, 35, 0.12);
    border-radius: 0px;
    padding: 16px;
    margin: 16px 0 0 0;
    font-family: 'Nanum Myeongjo', serif;
    text-align: left;
}

/* Desktop: Flex layout for scrollable note body */
.couple-note-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 300px;
    overflow: hidden;
    margin: 0;
}

.couple-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.couple-note-emoji {
    font-size: 18px;
    line-height: 1;
}

.couple-note-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    margin: 0;
    letter-spacing: -0.32px;
}

.couple-note-body {
    margin-bottom: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 8px;
}

.couple-note-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--black);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

.couple-note-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.couple-note-expand-btn {
    background: none;
    border: none;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0;
    margin-top: 8px;
    cursor: pointer;
    font-family: 'Nanum Myeongjo', serif;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.couple-note-expand-btn:hover {
    opacity: 0.7;
}

.couple-note-signature {
    display: none; /* Hide signature entirely */
}

/* Desktop: Show in left column, hide mobile version */
@media screen and (min-width: 1025px) {
    #contributionModal .figma-modal-container.contribution-modal-two-column {
        overflow: visible;
    }
    
    .couple-note-card {
        max-height: 300px;
    }
    
    .couple-note-card-mobile {
        display: none !important;
    }
    
    /* Remove truncation on desktop - use scroll instead */
    .couple-note-text.truncated {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
    }
    
    /* Hide expand button on desktop */
    .couple-note-expand-btn {
        display: none !important;
    }
}

/* Mobile: Hide desktop, show mobile version with adjustments */
@media screen and (max-width: 1024px) {
    .couple-note-card {
        display: none !important;
    }
    
    .couple-note-card-mobile {
        padding: 14px;
        margin: 12px 0 0 0;
    }
    
    .couple-note-heading {
        font-size: 14px;
    }
    
    .couple-note-emoji {
        font-size: 16px;
    }
    
    .couple-note-text {
        font-size: 14px;
        line-height: 1.55;
    }
    
    .couple-note-expand-btn {
        font-size: 13px;
    }
    
    .couple-note-signature {
        display: none; /* Hide signature entirely */
    }
}

/* Mobile Responsive */
@media screen and (max-width: 1024px) {
    body.modal-open {
        overflow: hidden;
        width: 100%;
    }
    
    #contributionModal.figma-modal-overlay {
        padding: 0;
        align-items: flex-end;
        background: rgba(0, 0, 0, 0.25) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    #contributionModal .figma-modal-container.contribution-modal-two-column {
        width: 100vw;
        height: auto;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 0px;
        padding: 38px 20px max(22px, env(safe-area-inset-bottom, 22px));
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.22);
        transform: translateY(0);
    }

    #contributionModal.figma-modal-overlay.contribution-in-shared-shell {
        position: relative;
        inset: auto;
        /* The standalone overlay pins itself at z-index 10000 !important; inside the sheet that
           would paint the modal over the shell's own handle and close button. */
        z-index: auto !important;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        background: transparent;
        animation: none;
    }

    #contributionModal.contribution-in-shared-shell .figma-modal-container.contribution-modal-two-column {
        width: 100%;
        height: 100%;
        max-height: none;
        padding: 38px 20px max(22px, env(safe-area-inset-bottom, 22px));
        background: transparent;
        border: 0;
        box-shadow: none;
        animation: none;
    }

    #contributionModal.contribution-in-shared-shell .contribution-mobile-handle,
    #contributionModal.contribution-in-shared-shell .figma-modal-close {
        display: none;
    }

    #contributionModal.contribution-mobile-flow .figma-modal-container.contribution-modal-two-column,
    #contributionModal.contribution-mobile-flow .contribution-modal-content,
    #contributionModal.contribution-mobile-flow .contribution-right-column,
    #contributionModal.contribution-mobile-flow .contribution-right-column > *,
    #contributionModal.contribution-mobile-flow .contribution-bar-section,
    #contributionModal.contribution-mobile-flow .contribution-bar-header,
    #contributionModal.contribution-mobile-flow .contribution-bar-track,
    #contributionModal.contribution-mobile-flow .contribution-quick-amounts,
    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper,
    #contributionModal.contribution-mobile-flow .contribution-mobile-review,
    #contributionModal.contribution-mobile-flow .contribution-mobile-next-actions {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .figma-modal-container.contribution-modal-two-column {
        height: min(620px, 92vh);
        overflow: hidden;
    }

    #contributionModal.contribution-mobile-flow .contribution-modal-content {
        height: 100%;
        min-height: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-right-column {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        padding-bottom: 72px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-right-column {
        overflow-y: hidden;
    }

    #contributionModal .contribution-mobile-handle {
        display: block;
        position: absolute;
        top: 9px;
        left: 50%;
        width: 42px;
        height: 4px;
        padding: 0;
        transform: translateX(-50%);
        border: 0;
        border-radius: 0px;
        background: rgba(86, 16, 35, 0.18);
        z-index: 12;
    }
    
    #contributionModal .contribution-modal-content {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    
    #contributionModal .contribution-left-column {
        display: none;
    }
    
    #contributionModal .contribution-right-column {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }
    
    #contributionModal .contribution-textarea-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #contributionModal .contribution-textarea {
        min-height: 200px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #contributionModal .contribution-price-input-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #contributionModal .contribution-right-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .couple-note-card {
        max-height: 160px;
        overflow-y: auto;
    }
    
    #contributionModal .contribution-product-name {
        font-size: 22px;
    }
    
    /* Mobile: Button Styles - Maintain standardized sizing */
    #contributionModal .contribution-submit-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile: Action buttons side by side */
    #contributionModal .contribution-action-buttons {
        gap: 8px;
        align-items: stretch; /* Ensure equal heights for both buttons */
    }
    
    /* Mobile: Ensure consistent button heights to accommodate text */
    #contributionModal .contribution-action-contribute-btn,
    #contributionModal .contribution-action-reserve-btn,
    .contribution-action-contribute-btn,
    .contribution-action-reserve-btn {
        min-height: 52px; /* Lock height to accommodate 18px font size and prevent size changes */
    }
    
    /* Mobile: Increase separator font size and ensure proper alignment */
    #contributionModal .contribution-action-separator {
        font-size: 15px; /* Match desktop size for better visibility */
    }
    
    /* Mobile: Show cancel button */
    #contributionModal .contribution-cancel-btn {
        display: block;
    }
    
    #contributionModal .figma-modal-close {
        display: none !important;
    }
    
    /* Mobile: Reserve Actions */
    #contributionModal .contribution-reserve-actions {
        margin-top: 16px;
        gap: 10px;
    }
    
    /* Mobile: Reserve action buttons maintain base styles */
    #contributionModal .contribution-buy-online-btn,
    #contributionModal .contribution-unreserve-btn {
        flex: 1; /* Ensure equal width on mobile */
        /* Base styles (padding: 14px 16px, font-size: 18px) apply on mobile too */
    }
    
    /* Mobile: Icon sizing for all buttons */
    #contributionModal .contribution-buy-online-btn i,
    #contributionModal .contribution-unreserve-btn i,
    #contributionModal .contribution-submit-btn i,
    .contribution-action-contribute-btn i,
    .contribution-action-reserve-btn i {
        font-size: 16px; /* Maintain icon size relative to button */
    }

    #contributionModal .contribution-mobile-step-header {
        display: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-header {
        display: block;
        margin-bottom: 14px;
    }

    #contributionModal .contribution-mobile-step-count,
    #contributionModal .contribution-mobile-review-eyebrow {
        display: block;
        font-family: 'Nanum Myeongjo', serif;
        color: rgba(86, 16, 35, 0.58);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    #contributionModal .contribution-mobile-step-title {
        margin: 5px 0 10px;
        color: var(--maroon);
        font-family: 'Nanum Myeongjo', Georgia, serif;
        font-size: 27px;
        font-weight: 400;
        line-height: 1.12;
    }

    #contributionModal .contribution-mobile-step-dots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    #contributionModal .contribution-mobile-step-dots span {
        height: 3px;
        background: rgba(86, 16, 35, 0.14);
        transition: background 180ms ease;
    }

    #contributionModal .contribution-mobile-step-dots span.is-active {
        background: var(--coral);
    }

    #contributionModal.contribution-mobile-flow .contribution-product-info {
        display: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-product-header {
        display: flex;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(86, 16, 35, 0.14);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-product-header .rsv-header__meta {
        min-width: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-product-header .rsv-header__name {
        max-width: 100%;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-product-header .rsv-header__price {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #contributionModal.contribution-mobile-flow .couple-note-card-mobile,
    #contributionModal.contribution-mobile-flow .contribution-explanation-text,
    #contributionModal.contribution-mobile-flow .contribution-cancel-btn {
        display: none !important;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-section {
        margin: 0 0 8px;
        width: 100%;
        overflow: hidden;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        align-items: start;
        gap: 8px;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-header > div {
        min-width: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-user-tag {
        display: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-remaining {
        max-width: min(48vw, 190px);
        text-align: right;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper {
        min-height: 46px;
        margin-bottom: 0;
        padding: 8px 12px;
        gap: 8px;
        border: 1px solid rgba(86, 16, 35, 0.18);
        background: rgba(255, 255, 255, 0.46);
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper input {
        font-size: 18px;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper input::placeholder {
        font-size: 16px;
    }

    #contributionModal.contribution-mobile-flow .contribution-currency-selector {
        min-width: 42px;
    }

    #contributionModal.contribution-mobile-flow .contribution-currency-display {
        font-size: 15px;
    }

    #contributionModal.contribution-mobile-flow .contribution-quick-amounts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
        margin-bottom: 6px;
    }

    #contributionModal.contribution-mobile-flow .contribution-quick-btn {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 6px 2px;
        font-size: 10px;
        line-height: 1.1;
        letter-spacing: -0.03em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-note-label {
        display: block;
    }

    #contributionModal.contribution-mobile-flow .contribution-textarea-decoration {
        display: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-textarea-counter {
        display: block;
        position: absolute;
        bottom: 8px;
        right: 12px;
        font-family: var(--rsv-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
        font-size: 11.5px;
        font-weight: 500;
        color: rgba(86, 16, 35, 0.48);
        letter-spacing: 0.02em;
        background: transparent;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        z-index: 2;
        pointer-events: none;
        transition: color 0.2s;
    }

    #contributionModal.contribution-mobile-flow .rsv-textarea.contribution-textarea {
        width: 100%;
        height: 118px;
        min-height: 118px;
        padding: 12px 14px 28px;
        border: 1.5px solid rgba(86, 16, 35, 0.2);
        border-radius: 0px;
        background: #fff;
        color: var(--rsv-maroon);
        font-family: var(--rsv-font-accent);
        font-size: 17px;
        font-style: italic;
        line-height: 1.5;
        box-shadow: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-note-error {
        position: static;
        display: block;
        margin-top: 6px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="1"] .contribution-textarea-wrapper,
    #contributionModal.contribution-mobile-flow[data-contribution-step="2"] .contribution-bar-section,
    #contributionModal.contribution-mobile-flow[data-contribution-step="2"] .contribution-price-input-wrapper,
    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-bar-section,
    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-price-input-wrapper,
    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-textarea-wrapper {
        display: none !important;
    }

    #contributionModal .contribution-mobile-review,
    #contributionModal .contribution-mobile-next-actions {
        display: none;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-review {
        display: block;
        padding: 18px;
        border: 1px solid rgba(86, 16, 35, 0.16);
        background: rgba(255, 255, 255, 0.38);
    }

    #contributionModal .contribution-mobile-review-row {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(86, 16, 35, 0.12);
        color: rgba(86, 16, 35, 0.62);
        font-family: 'Nanum Myeongjo', serif;
        font-size: 12px;
    }

    #contributionModal .contribution-mobile-review-row strong {
        max-width: 70%;
        color: var(--maroon);
        font-family: 'Nanum Myeongjo', serif;
        font-size: 14px;
        font-weight: 600;
        text-align: right;
    }

    #contributionModal .contribution-mobile-review-row--note strong {
        display: block;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.35;
        max-height: 8.1em;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    #contributionModal .contribution-mobile-payment-copy {
        margin: 15px 0 0;
        color: rgba(86, 16, 35, 0.64);
        font-family: 'Nanum Myeongjo', serif;
        font-size: 13px;
        line-height: 1.5;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="1"] .contribution-mobile-next-actions,
    #contributionModal.contribution-mobile-flow[data-contribution-step="2"] .contribution-mobile-next-actions,
    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-next-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        right: 20px;
        bottom: max(22px, env(safe-area-inset-bottom, 22px));
        left: 20px;
        z-index: 8;
        margin: 0;
        padding-top: 10px;
        background: var(--rsv-cream);
    }

    #contributionModal .contribution-mobile-next-btn {
        min-height: 52px;
        flex: 1;
        min-width: 0;
        border: 0;
        background: var(--maroon);
        color: var(--cream);
        font-family: 'Nanum Myeongjo', serif;
        font-size: 16px;
        font-weight: 600;
    }

    #contributionModal .contribution-mobile-pay-icon {
        display: none;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #contributionModal .contribution-mobile-pay-icon svg {
        display: block;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-next-btn {
        background: var(--rsv-green);
        color: var(--rsv-cream);
    }

    #contributionModal .contribution-mobile-next-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    #contributionModal .contribution-mobile-back-link {
        min-height: 52px;
        flex: 0 0 88px;
        width: 88px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--maroon);
        font-family: 'Nanum Myeongjo', serif;
        font-size: 15px;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    #contributionModal.contribution-mobile-flow .contribution-submit-actions {
        display: none !important;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-submit-actions {
        display: none !important;
    }

    #contributionModal.contribution-in-shared-shell .figma-modal-container.contribution-modal-two-column,
    #contributionModal.contribution-in-shared-shell .contribution-modal-content,
    #contributionModal.contribution-in-shared-shell .contribution-right-column {
        height: 100%;
        max-height: none;
    }

    #contributionModal.contribution-in-shared-shell .contribution-modal-content {
        position: relative;
        overflow: hidden;
    }

}

/* ================================================== */
/* MOBILE CONTRIBUTION FLOW REDESIGN */
/* Keep the shared reserve sheet stationary; only the stage below slides. */
/* ================================================== */
@media screen and (max-width: 1024px) {
    #contributionModal.contribution-mobile-flow .figma-modal-container.contribution-modal-two-column {
        padding: 0;
        border: 0;
        overflow: hidden;
        background: var(--rsv-cream);
    }

    #contributionModal.contribution-mobile-flow .contribution-modal-content {
        display: block;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #contributionModal.contribution-mobile-flow .contribution-right-column {
        display: grid;
        /* The base rule sets justify-content: space-between, which stops an implicit auto column
           from stretching. Without an explicit 1fr track the column collapses to max-content and
           leaves a cream strip down the right edge on the narrower steps (review, payment). */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        background: var(--rsv-cream);
    }

    #contributionModal.contribution-mobile-flow .contribution-product-info,
    #contributionModal.contribution-mobile-flow .couple-note-card-mobile,
    #contributionModal.contribution-mobile-flow .contribution-explanation-text,
    #contributionModal.contribution-mobile-flow .contribution-reserve-actions,
    #contributionModal.contribution-mobile-flow .contribution-action-buttons,
    #contributionModal.contribution-mobile-flow .contribution-submit-actions,
    #contributionModal.contribution-mobile-flow .contribution-cancel-btn {
        display: none !important;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        padding: 18px 22px 20px;
        border: 0;
        overflow: hidden;
        background: var(--rsv-green);
        box-shadow: none;
        box-sizing: border-box;
        isolation: isolate;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero__motif {
        position: absolute;
        top: 10px;
        right: 22px;
        z-index: 0;
        width: 112px;
        height: 119px;
        color: rgba(255, 255, 255, 0.06);
        pointer-events: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero__row {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero__thumb {
        flex: 0 0 84px;
        width: 84px;
        height: 84px;
        border: 1px solid rgba(86, 16, 35, 0.18);
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero__meta {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding-right: 42px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 100%;
        padding: 4px 8px;
        border: 1px solid rgba(213, 200, 0, 0.7);
        color: var(--rsv-chartreuse);
        font: 500 10px/1 var(--rsv-font-mono);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-tag__motif {
        width: 11px;
        height: 12px;
        color: currentColor;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero__name {
        display: -webkit-box;
        align-self: stretch;
        max-width: 100%;
        overflow: hidden;
        color: var(--rsv-cream);
        font: 400 24px/1.08 var(--rsv-font-display);
        text-align: left;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero__price {
        display: none !important;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-stage-viewport {
        position: relative;
        display: block;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: var(--rsv-cream);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-stage {
        display: flex;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        flex-direction: column;
        gap: 0;
        padding: 18px 22px 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        background: var(--rsv-cream);
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-header {
        display: block;
        flex: 0 0 auto;
        margin: 0 0 20px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-count,
    #contributionModal.contribution-mobile-flow .contribution-mobile-review-eyebrow {
        color: rgba(86, 16, 35, 0.65);
        font: 500 11px/1.2 var(--rsv-font-mono);
        letter-spacing: 0.34em;
        text-transform: uppercase;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-title {
        margin: 5px 0 13px;
        color: var(--rsv-maroon);
        font: 400 30px/1.08 var(--rsv-font-display);
        letter-spacing: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-dots {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-dots span {
        height: 4px;
        background: rgba(86, 16, 35, 0.16);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-step-dots span.is-active {
        background: var(--rsv-coral);
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-section {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        margin: 0;
        overflow: visible;
        flex-direction: column;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        align-items: baseline;
        gap: 10px;
        margin: 0 0 14px;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-pct {
        color: var(--rsv-coral);
        font: 700 15px/1.2 var(--rsv-font-body);
        letter-spacing: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-remaining {
        max-width: min(48vw, 210px);
        color: rgba(30, 30, 30, 0.6);
        font: 400 13px/1.3 var(--rsv-font-mono);
        text-align: right;
        overflow-wrap: anywhere;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-track {
        height: 14px;
        margin: 0 0 20px;
        background: rgba(86, 16, 35, 0.16);
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-funded {
        background: var(--rsv-coral);
        opacity: 1;
    }

    #contributionModal.contribution-mobile-flow .contribution-bar-user {
        background: var(--rsv-coral);
    }

    #contributionModal.contribution-mobile-flow input[type="range"].contribution-bar-slider::-webkit-slider-thumb {
        width: 10px;
        height: 30px;
        border: 0;
        background: var(--rsv-maroon);
    }

    #contributionModal.contribution-mobile-flow input[type="range"].contribution-bar-slider::-moz-range-thumb {
        width: 10px;
        height: 30px;
        border: 0;
        background: var(--rsv-maroon);
    }

    #contributionModal.contribution-mobile-flow .contribution-quick-amounts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin: 0 0 20px;
    }

    #contributionModal.contribution-mobile-flow .contribution-quick-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 9px 3px;
        overflow: hidden;
        border: 1px solid rgba(86, 16, 35, 0.3);
        border-radius: 0px;
        background: transparent;
        color: var(--rsv-maroon);
        font: 500 clamp(9px, 3.05vw, 13px)/1.1 var(--rsv-font-mono);
        letter-spacing: -0.035em;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-shadow: inset 0 0 0 1px rgba(86, 16, 35, 0.08);
    }

    #contributionModal.contribution-mobile-flow .contribution-quick-btn:hover,
    #contributionModal.contribution-mobile-flow .contribution-quick-btn.is-active {
        border-color: var(--rsv-maroon);
        background: var(--rsv-maroon);
        color: var(--rsv-cream);
        box-shadow: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        min-height: 66px;
        margin: 0;
        padding: 13px 18px;
        gap: 14px;
        flex-wrap: wrap;
        border: 1px solid rgba(86, 16, 35, 0.2);
        border-radius: 0px;
        background: #fff;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .contribution-currency-selector {
        min-width: 38px;
    }

    #contributionModal.contribution-mobile-flow .contribution-currency-display {
        color: rgba(86, 16, 35, 0.58);
        font: 400 26px/1 var(--rsv-font-display);
    }

    #contributionModal.contribution-mobile-flow .contribution-currency-chevron {
        width: 11px;
        height: 11px;
        margin-left: 2px;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-divider {
        height: 32px;
        background: rgba(86, 16, 35, 0.2);
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper input {
        min-width: 0;
        color: var(--rsv-maroon);
        font: 400 30px/1 var(--rsv-font-display);
        letter-spacing: 0;
        -moz-appearance: textfield;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper input::-webkit-inner-spin-button,
    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper input::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper input::placeholder {
        color: rgba(86, 16, 35, 0.38);
        font: 400 21px/1 var(--rsv-font-display);
    }

    #contributionModal.contribution-mobile-flow .contribution-shopping-bag-btn {
        display: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-price-input-wrapper:has(#contributionAmount.error) {
        border-color: var(--rsv-coral);
        box-shadow: inset 0 0 0 1px var(--rsv-coral);
    }

    #contributionModal.contribution-mobile-flow .contribution-amount-error {
        position: static;
        flex: 1 0 100%;
        margin-top: 6px;
        color: var(--rsv-coral);
    }

    #contributionModal.contribution-mobile-flow .contribution-textarea-wrapper {
        position: relative;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-note-label {
        display: block;
        margin: 0 0 10px;
        color: var(--rsv-coral);
        font: 700 10.5px/1.35 var(--rsv-font-body);
        letter-spacing: 0.34em;
        text-transform: uppercase;
    }

    #contributionModal.contribution-mobile-flow .rsv-textarea.contribution-textarea {
        width: 100%;
        height: 118px;
        min-height: 118px;
        padding: 16px 18px;
        border: 0;
        border-left: 5px solid var(--rsv-coral);
        border-radius: 0px;
        background: #fff;
        color: var(--rsv-maroon);
        font: italic 400 18px/1.4 var(--rsv-font-accent);
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        scroll-margin-block: 16px;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .rsv-textarea.contribution-textarea::placeholder {
        color: rgba(86, 16, 35, 0.42);
    }

    #contributionModal.contribution-mobile-flow .rsv-textarea.contribution-textarea:focus {
        outline: 1px solid rgba(228, 85, 88, 0.55);
        outline-offset: 0;
    }

    #contributionModal.contribution-mobile-flow .rsv-textarea.contribution-textarea.error {
        outline: 2px solid var(--rsv-coral);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-note-helper,
    #contributionModal.contribution-mobile-flow .contribution-mobile-payment-copy {
        display: none;
        align-items: flex-start;
        gap: 8px;
        margin: 10px 0 0;
        color: rgba(30, 30, 30, 0.6);
        font: 400 12.5px/1.5 var(--rsv-font-body);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="2"] .contribution-mobile-note-helper {
        display: flex;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-helper-motif {
        display: block;
        flex: 0 0 13px;
        width: 13px;
        height: 13px;
        margin-top: 3px;
        background: var(--rsv-coral);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-helper-motif--flower {
        -webkit-mask-image: url('/static/assets/motifs/flower.svg');
        mask-image: url('/static/assets/motifs/flower.svg');
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-helper-motif--spark {
        -webkit-mask-image: url('/static/assets/motifs/spark.svg');
        mask-image: url('/static/assets/motifs/spark.svg');
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-stage {
        overflow-y: hidden;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-review {
        display: flex;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-eyebrow {
        flex: 0 0 auto;
        margin: 0 0 14px;
        color: var(--rsv-coral);
        font-family: var(--rsv-font-body);
        font-size: 10.5px;
        font-weight: 700;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-card {
        display: flex;
        min-width: 0;
        min-height: 0;
        flex: 0 1 auto;
        flex-direction: column;
        padding: 18px 20px;
        border-left: 5px solid var(--rsv-coral);
        background: #f5f0e8;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row {
        display: flex;
        min-width: 0;
        padding: 0;
        border: 0;
        color: rgba(30, 30, 30, 0.6);
        font: 400 13px/1.4 var(--rsv-font-body);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--amount {
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(86, 16, 35, 0.16);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--amount strong {
        max-width: 65%;
        overflow: hidden;
        color: var(--rsv-maroon);
        font: 400 30px/1 var(--rsv-font-display);
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--note {
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: 7px;
        padding-top: 16px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--note > span {
        font-size: 11px;
        text-transform: uppercase;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--note strong {
        display: block;
        width: 100%;
        max-width: 100%;
        max-height: 8.4em;
        overflow-x: hidden;
        overflow-y: auto;
        color: var(--rsv-maroon);
        font: italic 400 17px/1.4 var(--rsv-font-accent);
        text-align: left;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--note strong::before {
        content: "\201C";
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-review-row--note strong::after {
        content: "\201D";
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-payment-copy {
        display: flex;
        flex: 0 0 auto;
        margin-top: 14px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="1"] .contribution-mobile-next-actions,
    #contributionModal.contribution-mobile-flow[data-contribution-step="2"] .contribution-mobile-next-actions,
    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-next-actions {
        position: static;
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 10px 22px max(18px, env(safe-area-inset-bottom, 18px));
        border: 0;
        background: var(--rsv-cream);
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-back-link {
        display: inline-flex;
        flex: 0 0 88px;
        width: 88px;
        min-width: 0;
        min-height: 52px;
        padding: 0;
        border: 0;
        border-radius: 0px;
        background: transparent;
        color: var(--rsv-maroon);
        font: 500 14px/1 var(--rsv-font-mono);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-back-link:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-next-btn {
        display: inline-flex;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 52px;
        padding: 15px 12px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 0px;
        background: var(--rsv-maroon);
        color: var(--rsv-cream);
        font: 500 15px/1.2 var(--rsv-font-mono);
        letter-spacing: 0;
        box-sizing: border-box;
        transition: background 140ms ease, transform 100ms ease, opacity 140ms ease;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-next-btn:hover:not(:disabled) {
        background: var(--rsv-maroon-deep);
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-next-btn:active:not(:disabled) {
        transform: scale(0.98);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-next-btn {
        background: var(--rsv-coral);
        color: var(--rsv-cream);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-next-btn:hover:not(:disabled) {
        background: #f04955;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-next-btn:disabled {
        border-radius: 0px;
        opacity: 0.55;
        cursor: not-allowed;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-pay-icon {
        display: none;
        flex: 0 0 auto;
        width: 16px;
        height: 17px;
        align-items: center;
        justify-content: center;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-pay-icon__motif {
        width: 16px;
        height: 17px;
        color: currentColor;
    }

    #contributionModal.contribution-mobile-flow .contribution-textarea-decoration {
        display: none;
    }
}

@media screen and (max-width: 1024px) and (max-height: 520px) {
    #contributionModal.contribution-mobile-flow[data-contribution-step="3"] .contribution-mobile-stage {
        overflow-y: auto;
    }
}

@media screen and (max-width: 359px) {
    #contributionModal .figma-modal-container.contribution-modal-two-column {
        padding-right: 0;
        padding-left: 0;
    }

    #contributionModal .contribution-mobile-step-title {
        font-size: 24px;
    }

    #contributionModal.contribution-mobile-flow .contribution-quick-btn {
        font-size: 9px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-next-actions {
        padding-right: 16px;
        padding-left: 16px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    #contributionModal.contribution-mobile-flow .contribution-mobile-stage {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media screen and (min-width: 1025px) {
    #contributionModal .contribution-mobile-step-header,
    #contributionModal .contribution-mobile-review,
    #contributionModal .contribution-mobile-next-actions,
    #contributionModal .contribution-mobile-handle {
        display: none !important;
    }
}

/* ================================================== */
/* DEMO CONTRIBUTION MODAL STYLES */
/* ================================================== */
/* Contribution Modal Styles - Two Column Layout */
#demoContributionModal.figma-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10000 !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#demoContributionModal.figma-modal-overlay.active,
#demoContributionModal.figma-modal-overlay[style*="display: block"] {
    display: flex;
}

#demoContributionModal .figma-modal-container.contribution-modal-two-column {
    background: var(--cream);
    border-top: 1px solid rgba(86, 16, 35, 0.14);
    border-radius: 0px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

#demoContributionModal .figma-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--maroon);
    font-size: 28px;
    z-index: 10;
}

#demoContributionModal .contribution-modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Left Column */
#demoContributionModal .contribution-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#demoContributionModal .contribution-product-image-wrapper {
    position: relative;
    width: 100%;
    max-height: 400px;
    /* min-height: 200px; */
    flex-shrink: 0;
    border-radius: 0px;
    overflow: hidden;
    background: var(--offwhite);
    margin-top: 20px;
}

#demoContributionModal .contribution-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#demoContributionModal .contribution-textarea-wrapper {
    position: relative;
}

#demoContributionModal .contribution-textarea-decoration {
    position: absolute;
    background: var(--contrib-note-decoration-bg);
    border-radius: 0px;
    width: calc(100% + 10px);
    height: 100%;
    left: -5px;
    top: -5px;
    transform: rotate(357.974deg) skewX(1.479deg);
    z-index: 0;
}

#demoContributionModal .contribution-textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px 16px 30px;
    background: var(--contrib-field-surface);
    border: none;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 15px;
    color: var(--black);
    letter-spacing: -0.44px;
    resize: none;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

#demoContributionModal .contribution-textarea-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-family: var(--rsv-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(86, 16, 35, 0.48);
    letter-spacing: 0.02em;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    z-index: 2;
    pointer-events: none;
    transition: color 0.2s;
}

#demoContributionModal .contribution-textarea::placeholder {
    color: rgba(30, 30, 30, 0.58);
}

#demoContributionModal .contribution-textarea:focus {
    outline: none;
}

/* Validation error styles */
#demoContributionModal .contribution-textarea.error,
#demoContributionModal #contributionAmount.error {
    border-color: #e74c3c;
    animation: shake 0.5s ease-in-out;
}

#demoContributionModal .contribution-note-error {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: #e74c3c;
    font-size: 13px;
    font-style: italic;
}

#demoContributionModal .contribution-amount-error {
    position: absolute;
    bottom: -20px;
    left: 0;
    color: #e74c3c;
    font-size: 13px;
    font-style: italic;
}

/* Right Column */
#demoContributionModal .contribution-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#demoContributionModal .contribution-product-info {
    margin-bottom: 10px;
    text-align: left;
    padding: 0;
}

#demoContributionModal .contribution-product-name {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    color: var(--black);
    letter-spacing: -0.48px;
    margin: 0 0 8px 0;
    padding: 0;
    text-align: left;
}

#demoContributionModal .contribution-product-price {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    font-size: 22px;
    color: rgba(30, 30, 30, 0.58);
    letter-spacing: -0.44px;
    padding: 0;
    text-align: left;
}

#demoContributionModal .contribution-explanation-text {
    display: block;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.58);
    text-align: left;
}

#demoContributionModal .contribution-progress-container {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
}

#demoContributionModal .contribution-progress-info {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 14px;
    color: var(--black);
    font-weight: 500;
    letter-spacing: -0.48px;
}

#demoContributionModal .contribution-progress-left {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 24px;
    color: var(--black);
    font-weight: 500;
    letter-spacing: -0.48px;
}

#demoContributionModal .contribution-progress-right {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 20px;
    color: var(--black);
    font-weight: 500;
    letter-spacing: -0.48px;
}

#demoContributionModal .contribution-progress-info #amount-left,
#demoContributionModal .contribution-progress-info #goal-amount {
    font-weight: 600;
    margin: 0 3px;
}

#demoContributionModal .contribution-progress-bar-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

#demoContributionModal .contribution-progress-bar-outer {
    flex-grow: 1;
    height: 16px;
    background: var(--contrib-field-surface);
    border-radius: 0px;
    overflow: visible;
    position: relative;
}

#demoContributionModal .contribution-amount-slider {
    position: absolute;
    width: 100%;
    height: 21px;
    top: -6px;
    left: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    z-index: 10;
    -webkit-appearance: none;
    appearance: none;
}

#demoContributionModal .contribution-amount-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 9px;
    background: transparent;
    border: none;
}

#demoContributionModal .contribution-amount-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: var(--coral);
    border-radius: 0px;
    cursor: grab;
    border: 2px solid var(--contrib-field-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -5px;
    transition: background 0.2s ease;
}

#demoContributionModal .contribution-amount-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    background: var(--contrib-coral-hover);
}

#demoContributionModal .contribution-amount-slider::-moz-range-track {
    width: 100%;
    height: 16px;
    background: transparent;
    border: none;
}

#demoContributionModal .contribution-amount-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: var(--coral);
    border-radius: 0px;
    cursor: grab;
    border: 2px solid var(--contrib-field-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
}

#demoContributionModal .contribution-amount-slider::-moz-range-thumb:active {
    cursor: grabbing;
    background: var(--contrib-coral-hover);
}

#demoContributionModal .contribution-progress-bar-inner {
    height: 100%;
    background: var(--coral);
    /* transition: width 0.1s ease; Removed for smoother slider tracking */
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px;
}

#demoContributionModal .contribution-progress-bar-value-text {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 13px;
    color: rgba(30, 30, 30, 0.58);
    font-weight: 500;
    white-space: nowrap;
}

#demoContributionModal .contribution-price-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--contrib-field-surface);
    border-radius: 0px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 24px;
}

#demoContributionModal .contribution-currency-selector {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    cursor: pointer;
    min-width: 50px;
}

#demoContributionModal .contribution-currency-select {
    background: transparent;
    border: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 17px;
    color: var(--black);
    letter-spacing: -0.31px;
    cursor: pointer;
    padding: 0;
    padding-right: 26px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
}

#demoContributionModal .contribution-currency-select option {
    background: var(--contrib-field-surface);
    color: var(--black);
}

#demoContributionModal .contribution-currency-display {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 17px;
    color: var(--black);
    letter-spacing: -0.44px;
    pointer-events: none;
    z-index: 1;
}

#demoContributionModal .contribution-currency-chevron {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    pointer-events: none;
    position: relative;
    z-index: 1;
    margin-left: 4px;
}

#demoContributionModal .contribution-price-divider {
    width: 1px;
    height: 20px;
    background: rgba(86, 16, 35, 0.18);
    flex-shrink: 0;
}

#demoContributionModal .contribution-price-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 17px;
    color: var(--black);
    letter-spacing: -0.44px;
}

#demoContributionModal .contribution-price-input-wrapper input::placeholder {
    color: rgba(30, 30, 30, 0.58);
    font-size: 17px;
}

#demoContributionModal .contribution-price-input-wrapper input:focus {
    outline: none;
}

#demoContributionModal .contribution-shopping-bag-btn {
    width: 46.4px;
    height: 46.4px;
    background: var(--coral);
    border: none;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

#demoContributionModal .contribution-shopping-bag-btn:hover {
    background: var(--contrib-coral-hover);
}

#demoContributionModal .contribution-shopping-bag-btn svg {
    width: 26px;
    height: 26px;
    fill: white;
}

/* ================================================== */
/* DEMO CONTRIBUTION MODAL BUTTON STYLES */
/* ================================================== */

/* Base Button Styles - Standardized shape, size, and fonts */
/* All buttons share these common properties */
#demoContributionModal .contribution-submit-btn,
#demoContributionModal .contribution-action-contribute-btn,
#demoContributionModal .contribution-action-reserve-btn,
#demoContributionModal .contribution-cancel-btn {
    padding: 14px 16px;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Proceed to Pay Button */
#demoContributionModal .contribution-submit-btn {
    width: 100%;
    background: var(--coral);
    border: none;
    color: white;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#demoContributionModal .contribution-submit-btn:hover:not(:disabled) {
    background: var(--contrib-coral-hover);
}

#demoContributionModal .contribution-submit-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Demo Contribution Modal - Action Buttons Container */
/* Action buttons inherit base styles from main contribution modal styles above */

/* Reserved Banner Overlay */
#demoContributionModal .contribution-reserved-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    z-index: 10;
}

#demoContributionModal .contribution-reserved-text {
    background: var(--maroon);
    color: var(--cream);
    padding: 12px 24px;
    border-radius: 0px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.34px;
}

/* Demo modal reserved ribbon: maroon/cream (matches main modal) */
#demoContributionModal .contribution-reserved-banner .contribution-reserved-ribbon {
    background: var(--maroon);
    color: var(--cream);
}

/* Reserve Actions Container */
#demoContributionModal .contribution-reserve-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

/* Buy Online Button */
#demoContributionModal .contribution-buy-online-btn {
    flex: 1;
    padding: 14px 16px;
    background: var(--coral);
    border: none;
    border-radius: 0px;
    color: white;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#demoContributionModal .contribution-buy-online-btn i,
#demoContributionModal .contribution-unreserve-btn i,
#demoContributionModal .contribution-submit-btn i {
    font-size: 16px;
}

#demoContributionModal .contribution-buy-online-btn:hover:not(:disabled) {
    background: var(--contrib-coral-hover);
}

#demoContributionModal .contribution-buy-online-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Unreserve Button */
#demoContributionModal .contribution-unreserve-btn {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: 2px solid var(--maroon);
    border-radius: 0px;
    color: var(--maroon);
    font-family: 'Nanum Myeongjo', serif;
    font-size: 18px;
    letter-spacing: -0.34px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#demoContributionModal .contribution-unreserve-btn:hover:not(:disabled) {
    background: var(--maroon);
    color: var(--cream);
}

#demoContributionModal .contribution-unreserve-btn:disabled {
    border-color: #cccccc;
    color: #cccccc;
    cursor: not-allowed;
}

/* Disabled/Readonly Textarea State */
#demoContributionModal .contribution-textarea:disabled,
#demoContributionModal .contribution-textarea[readonly] {
    background: var(--contrib-field-surface);
    color: #999999;
    cursor: not-allowed;
}

/* Host warning in modal */
.host-contribution-warning {
    color: #d32f2f;
    background-color: #ffebee;
    padding: 10px;
    border-radius: 0px;
    margin-top: 15px;
    font-size: 13px;
    text-align: center;
    display: none; /* Hidden by default */
    border: 1px solid #ffcdd2;
}

/* Couple Note Card - Desktop & Mobile Base Styles */
.couple-note-card,
.couple-note-card-mobile {
    background: var(--contrib-note-card-bg);
    border: 1px solid rgba(86, 16, 35, 0.12);
    border-radius: 0px;
    padding: 16px;
    margin: 16px 0 0 0;
    font-family: 'Nanum Myeongjo', serif;
    text-align: left;
}

/* Desktop: Flex layout for scrollable note body */
.couple-note-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 300px;
    overflow: hidden;
    margin: 0;
}

.couple-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.couple-note-emoji {
    font-size: 18px;
    line-height: 1;
}

.couple-note-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    margin: 0;
    letter-spacing: -0.32px;
}

.couple-note-body {
    margin-bottom: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 8px;
}

.couple-note-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--black);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

.couple-note-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.couple-note-expand-btn {
    background: none;
    border: none;
    color: var(--maroon);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0;
    margin-top: 8px;
    cursor: pointer;
    font-family: 'Nanum Myeongjo', serif;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.couple-note-expand-btn:hover {
    opacity: 0.7;
}

.couple-note-signature {
    display: none; /* Hide signature entirely */
}

/* Desktop: Show in left column, hide mobile version */
@media screen and (min-width: 1025px) {
    #demoContributionModal .figma-modal-container.contribution-modal-two-column {
        overflow: auto;
    }
    
    .couple-note-card {
        max-height: 300px;
    }
    
    .couple-note-card-mobile {
        display: none !important;
    }
    
    /* Remove truncation on desktop - use scroll instead */
    .couple-note-text.truncated {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
    }
    
    /* Hide expand button on desktop */
    .couple-note-expand-btn {
        display: none !important;
    }
}

/* Mobile: Hide desktop, show mobile version with adjustments */
@media screen and (max-width: 1024px) {
    .couple-note-card {
        display: none !important;
    }
    
    .couple-note-card-mobile {
        padding: 14px;
        margin: 12px 0 0 0;
    }
    
    .couple-note-heading {
        font-size: 14px;
    }
    
    .couple-note-emoji {
        font-size: 16px;
    }
    
    .couple-note-text {
        font-size: 14px;
        line-height: 1.55;
    }
    
    .couple-note-expand-btn {
        font-size: 13px;
    }
    
    .couple-note-signature {
        display: none; /* Hide signature entirely */
    }
}

/* Mobile Responsive */
@media screen and (max-width: 1024px) {
    body.modal-open {
        overflow: hidden;
        width: 100%;
    }
    
    #demoContributionModal.figma-modal-overlay {
        padding: 0;
        align-items: flex-start;
    }
    
    #demoContributionModal .figma-modal-container.contribution-modal-two-column {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0px;
        padding: 16px;
        padding-bottom: max(120px, env(safe-area-inset-bottom, 120px));
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    #demoContributionModal .contribution-modal-content {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    
    #demoContributionModal .contribution-left-column {
        height: auto;
        overflow: visible;
    }
    
    #demoContributionModal .contribution-right-column {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }
    
    #demoContributionModal .contribution-product-image-wrapper {
        max-height: 28vh;
        width: 100%;
        box-sizing: border-box;
        aspect-ratio: unset;
        min-height: 140px;
    }
    
    #demoContributionModal .contribution-product-image {
        width: 100%;
        height: auto;
        max-height: 28vh;
        object-fit: contain;
        object-position: center;
    }
    
    #demoContributionModal .contribution-textarea-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #demoContributionModal .contribution-textarea {
        min-height: 200px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #demoContributionModal .contribution-price-input-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #demoContributionModal .contribution-right-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #demoContributionModal .contribution-left-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-top: 32px; /* Add gap below close button on mobile */
    }
    
    #demoContributionModal .contribution-product-name {
        font-size: 22px;
    }
    
    #demoContributionModal .contribution-submit-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile: Action buttons side by side */
    #demoContributionModal .contribution-action-buttons {
        gap: 8px;
        align-items: stretch; /* Ensure equal heights for both buttons */
    }
    
    /* Ensure separator is vertically centered */
    #demoContributionModal .contribution-action-separator {
        align-self: center; /* Override stretch to center vertically */
    }
    
    /* Mobile: Ensure consistent button heights to accommodate text */
    #demoContributionModal .contribution-action-contribute-btn,
    #demoContributionModal .contribution-action-reserve-btn {
        min-height: 52px; /* Lock height to accommodate 18px font size and prevent size changes */
    }
    
    /* Mobile: Increase separator font size and ensure proper alignment */
    #demoContributionModal .contribution-action-separator {
        font-size: 15px; /* Match desktop size for better visibility */
    }
    
    /* Mobile: Show cancel button */
    #demoContributionModal .contribution-cancel-btn {
        display: block;
    }
    
    #demoContributionModal .figma-modal-close {
        display: none !important;
    }
    
    /* Mobile: Reserved Banner */
    #demoContributionModal .contribution-reserved-banner {
        border-radius: 0px;
    }
    
    #demoContributionModal .contribution-reserved-banner .ribbon-wrapper {
        width: 120px;
        height: 120px;
    }
    
    #demoContributionModal .contribution-reserved-banner .contribution-reserved-ribbon {
        background: var(--maroon);
        color: var(--cream);
        width: 180px;
        font-size: 12px;
        padding: 8px 0;
        left: -40px;
        top: 35px;
    }
    
    /* Mobile: Reserve Actions */
    #demoContributionModal .contribution-reserve-actions {
        margin-top: 16px;
        gap: 10px;
        flex-direction: row; /* Keep side-by-side on mobile */
    }
    
    /* Mobile: Demo modal reserve action buttons maintain base styles */
    #demoContributionModal .contribution-buy-online-btn,
    #demoContributionModal .contribution-unreserve-btn {
        flex: 1; /* Ensure equal width on mobile */
        /* Base styles (padding: 14px 16px, font-size: 18px) apply on mobile too */
    }
    
    /* Mobile: Icon sizing for all demo modal buttons */
    #demoContributionModal .contribution-buy-online-btn i,
    #demoContributionModal .contribution-unreserve-btn i,
    #demoContributionModal .contribution-submit-btn i,
    #demoContributionModal .contribution-action-contribute-btn i,
    #demoContributionModal .contribution-action-reserve-btn i {
        font-size: 16px; /* Maintain icon size relative to button */
    }
}

/* Direct UPI — The Handoff (deep green wizard) — fidelity to design_handoff_upi_handoff */
#contributionModal .contribution-upi-panel {
    margin-top: 0;
    --upi-green: #194234;
    --upi-cream: #ede6dc;
    --upi-cream-warm: #e7d3c4;
    --upi-coral: #e45558;
    --upi-coral-bright: #f04955;
    --upi-chartreuse: #d5c800;
    --upi-maroon-deep: #3f0c1a;
    --upi-ease: cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#contributionModal .contribution-upi-card {
    margin-top: 0;
    padding: 0;
    border-radius: 0px;
    background: var(--upi-green);
    color: var(--upi-cream);
    box-shadow: 6px 6px 0 var(--upi-maroon-deep);
    text-align: left;
    overflow: hidden;
}

#contributionModal .contribution-upi-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 18px 26px 2px;
    margin: 0;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.68rem;
    letter-spacing: 0;
    color: rgba(237, 230, 220, 0.45);
}

#contributionModal .contribution-upi-rail-step {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    white-space: nowrap;
}

#contributionModal .contribution-upi-rail-step.is-active {
    color: var(--upi-coral-bright);
}

#contributionModal .contribution-upi-rail-step.is-active .contribution-upi-rail-mark {
    color: inherit;
}

#contributionModal .contribution-upi-rail-step.is-done {
    color: rgba(237, 230, 220, 0.55);
}

#contributionModal .contribution-upi-rail-step[data-upi-rail="done"].is-active {
    color: var(--upi-chartreuse);
}

#contributionModal .contribution-upi-rail-step[data-upi-rail="done"].is-active .contribution-upi-rail-mark {
    color: inherit;
}

#contributionModal .contribution-upi-rail-line {
    flex: 1;
    height: 1px;
    max-width: none;
    background: rgba(237, 230, 220, 0.28);
}

#contributionModal .contribution-upi-state {
    padding: 10px 28px 26px;
}

#contributionModal .contribution-upi-state[hidden] {
    display: none !important;
}

#contributionModal .contribution-upi-state:not([hidden]) {
    animation: contribution-upi-fade 0.3s var(--upi-ease) both;
}

#contributionModal[data-contribution-total-steps="4"] .contribution-mobile-step-dots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#contributionModal .contribution-upi-hero {
    text-align: center;
    margin-bottom: 16px;
}

#contributionModal .contribution-upi-send-to {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.74rem;
    color: var(--upi-cream-warm);
    margin-bottom: 0;
}

#contributionModal .contribution-upi-amount {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--upi-cream);
    font-weight: 700;
}

#contributionModal .contribution-upi-gift {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.72rem;
    color: rgba(237, 230, 220, 0.6);
    margin-top: 0;
}

#contributionModal .contribution-upi-desktop-vpa-label,
#contributionModal .contribution-upi-mobile-send-label,
#contributionModal .contribution-upi-or {
    display: none;
}

@media (max-width: 1024px) {
    #contributionModal.contribution-mobile-flow .contribution-upi-panel {
        max-width: none;
    }

    #contributionModal.contribution-mobile-flow .contribution-upi-amount {
        font-size: 2.3rem;
    }

    #contributionModal.contribution-mobile-flow .contribution-upi-rail {
        font-size: 0.64rem;
        padding: 0 0 16px;
    }

    #contributionModal.contribution-mobile-flow .contribution-upi-state {
        padding: 0 0 8px;
    }
}

#contributionModal .contribution-upi-pay-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

#contributionModal .contribution-upi-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

#contributionModal .contribution-upi-pay-block .contribution-upi-qr {
    margin: 0;
}

#contributionModal .contribution-upi-qr {
    display: flex;
    justify-content: center;
    width: fit-content;
    padding: 12px;
    background: var(--upi-cream);
    border: 2px solid var(--upi-coral);
    border-radius: 0px;
    line-height: 0;
}

#contributionModal .contribution-upi-qr img {
    display: block;
    width: 148px;
    height: 148px;
    border-radius: 0px;
    background: #fff;
}

#contributionModal .contribution-upi-caption {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.74rem;
    color: rgba(237, 230, 220, 0.75);
    text-align: center;
    margin: 0;
}

#contributionModal .contribution-upi-caption--center {
    font-size: 0.66rem;
    color: rgba(237, 230, 220, 0.7);
    margin: 0 0 12px;
}

#contributionModal .contribution-upi-vpa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(237, 230, 220, 0.1);
    border: 1px solid rgba(237, 230, 220, 0.22);
    border-radius: 0px;
    margin: 0 0 12px;
}

#contributionModal .contribution-upi-confirm-copy {
    margin: 0 0 12px;
    color: rgba(237, 230, 220, 0.75);
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.74rem;
    line-height: 1.4;
    text-align: center;
}

/* Direct UPI never touches Hazlnut, so the guest is told before they send money. */
#contributionModal .contribution-upi-caution {
    margin: 0 0 12px;
    color: rgba(237, 230, 220, 0.6);
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
}

#contributionModal .contribution-upi-vpa {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.82rem;
    color: var(--upi-cream);
    word-break: break-all;
}

#contributionModal .contribution-upi-copy {
    flex: none;
    border: none;
    background: var(--upi-cream);
    color: var(--upi-green);
    border-radius: 0px;
    padding: 5px 12px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.72rem;
    cursor: pointer;
}

#contributionModal .contribution-upi-copy:hover {
    background: #fff;
}

#contributionModal .contribution-upi-ref-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 18px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(237, 230, 220, 0.85);
}

#contributionModal .contribution-upi-ref-line--mobile {
    margin: 14px 0 0;
    justify-content: center;
    text-align: left;
}

#contributionModal .contribution-upi-ref-code {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 700;
}

#contributionModal .contribution-upi-motif {
    display: inline-block;
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--upi-chartreuse);
    vertical-align: middle;
}

#contributionModal .contribution-upi-motif path {
    fill: currentColor;
}

#contributionModal .contribution-upi-motif--ref {
    margin-top: 2px;
}

#contributionModal .contribution-upi-motif--hero {
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 0;
}

#contributionModal .contribution-upi-motif--coral {
    color: var(--upi-coral-bright);
}

#contributionModal .contribution-upi-motif--spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    transform: translate(-50%, -50%);
    color: var(--upi-coral-bright);
}

#contributionModal .contribution-upi-motif--done {
    width: 4rem;
    height: 4rem;
    color: var(--upi-chartreuse);
}

#contributionModal .contribution-upi-primary,
#contributionModal .contribution-upi-secondary {
    display: block;
    width: 100%;
    border-radius: 0px;
    padding: 14px;
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.12s var(--upi-ease), transform 0.12s var(--upi-ease);
}

#contributionModal .contribution-upi-primary {
    border: none;
    background: var(--upi-coral);
    color: var(--upi-cream);
}

#contributionModal .contribution-upi-primary:hover:not(:disabled) {
    background: var(--upi-coral-bright);
}

#contributionModal .contribution-upi-primary:disabled {
    opacity: 0.65;
    cursor: wait;
}

#contributionModal .contribution-upi-secondary {
    margin-top: 10px;
    background: transparent;
    border: 1.5px solid rgba(237, 230, 220, 0.4);
    color: var(--upi-cream);
    font-weight: 600;
}

#contributionModal .contribution-upi-secondary:hover {
    border-color: rgba(237, 230, 220, 0.7);
}

#contributionModal .contribution-upi-centered {
    text-align: center;
    padding: 0;
}

#contributionModal .contribution-upi-centered > .contribution-upi-motif--hero {
    margin-bottom: 18px;
}

#contributionModal .contribution-upi-eyebrow {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 700;
    font-size: 0.64rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--upi-chartreuse);
    margin-bottom: 8px;
}

#contributionModal .contribution-upi-eyebrow--chartreuse {
    color: var(--upi-chartreuse);
}

#contributionModal .contribution-upi-heading {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--upi-cream);
    margin: 0 0 12px;
    font-weight: 700;
}

#contributionModal .contribution-upi-heading--await {
    font-size: 1.6rem;
}

#contributionModal .contribution-upi-heading--done {
    font-size: 1.9rem;
    margin-bottom: 14px;
}

#contributionModal .contribution-upi-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(237, 230, 220, 0.82);
    margin: 0 0 22px;
}

#contributionModal .contribution-upi-status-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

#contributionModal .contribution-upi-pill {
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.7rem;
    padding: 6px 12px;
    border-radius: 0px;
    background: rgba(237, 230, 220, 0.12);
    color: var(--upi-cream);
}

#contributionModal .contribution-upi-pill--active {
    background: var(--upi-chartreuse);
    color: var(--upi-green);
}

#contributionModal .contribution-upi-claim-msg {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: rgba(237, 230, 220, 0.7);
}

#contributionModal .contribution-upi-spinner-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    margin: 12px auto 18px;
}

#contributionModal .contribution-upi-spinner-ring {
    display: block;
    width: 74px;
    height: 74px;
    border-radius: 0px;
    border: 3px solid rgba(237, 230, 220, 0.2);
    border-top-color: var(--upi-coral-bright);
    box-sizing: border-box;
    animation: contribution-upi-spin 1s linear infinite;
}

#contributionModal .contribution-upi-confirmed-seal {
    position: relative;
    display: inline-grid;
    place-items: center;
    margin: 16px 0 20px;
    animation: contribution-upi-pop 0.45s var(--upi-ease) both;
}

#contributionModal .contribution-upi-confirmed-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Nanum Myeongjo', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--upi-green);
    line-height: 1;
}

@keyframes contribution-upi-spin {
    to { transform: rotate(360deg); }
}

/* Claim-in-flight state for the single "I've paid" button at the bottom of step 4. */
#contributionModal .contribution-mobile-next-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(237, 230, 220, 0.28);
    border-top-color: currentColor;
    box-sizing: border-box;
    animation: contribution-upi-spin 0.8s linear infinite;
}

#contributionModal .contribution-mobile-next-btn.is-claiming {
    cursor: progress;
    opacity: 0.85;
}

#contributionModal .contribution-mobile-next-btn.is-claiming .contribution-mobile-next-spinner {
    display: inline-block;
}

#contributionModal .contribution-mobile-next-btn.is-claiming #contribution-mobile-next-arrow,
#contributionModal .contribution-mobile-next-btn.is-claiming .contribution-mobile-pay-icon {
    display: none !important;
}

@keyframes contribution-upi-pop {
    0% { opacity: 0; transform: scale(0.5); }
    70% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes contribution-upi-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #contributionModal .contribution-upi-spinner-ring,
    #contributionModal .contribution-mobile-next-spinner {
        animation: none;
    }
    #contributionModal .contribution-upi-confirmed-seal,
    #contributionModal .contribution-upi-state:not([hidden]) {
        animation: none;
    }
}

#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-bar-section,
#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-price-input-wrapper,
#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-textarea-wrapper,
#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-note-helper,
#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-review,
#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-explanation-text {
    display: none !important;
}

#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-panel {
    display: block !important;
}

#contributionModal.contribution-upi-active .contribution-submit-actions {
    display: none !important;
}

#contributionModal.contribution-upi-active .contribution-upi-panel {
    display: block !important;
}

#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-product-info {
    display: none !important;
}

#contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-cancel-btn {
    display: none !important;
}

#contributionModal.contribution-upi-active .contribution-product-info,
#contributionModal.contribution-upi-active .contribution-bar-section,
#contributionModal.contribution-upi-active .contribution-price-input-wrapper,
#contributionModal.contribution-upi-active .contribution-textarea-wrapper,
#contributionModal.contribution-upi-active .couple-note-card-mobile,
#contributionModal.contribution-upi-active .contribution-explanation-text,
#contributionModal.contribution-upi-active #contribution-explanation-text {
    display: none !important;
}

/* Desktop UPI: top-align with gift column; clear the close button */
#contributionModal.contribution-upi-active .figma-modal-container.contribution-modal-two-column {
    overflow: auto;
}

#contributionModal.contribution-upi-active .contribution-modal-content {
    align-items: start;
}

#contributionModal.contribution-upi-active .contribution-right-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    background: transparent;
    border-radius: 0px;
    padding: 8px 40px 8px 8px; /* right pad clears the × */
    min-width: 0;
}

#contributionModal.contribution-upi-active .contribution-upi-panel {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

#contributionModal.contribution-upi-active .figma-modal-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 0px;
    background: var(--cream, #ede6dc);
    box-shadow: 0 0 0 1px rgba(86, 16, 35, 0.12);
    z-index: 20;
}

#contributionModal.contribution-upi-active .contribution-left-column {
    padding-top: 0;
}

#contributionModal.contribution-upi-active .contribution-product-image-wrapper {
    margin-top: 0;
}

/* Mobile UPI is the fourth step of the gifting sheet, not a nested payment
   modal. Keep the established cream surface, type system, product banner and
   step progress while presenting the phone hand-off actions compactly. */
@media screen and (max-width: 1024px) {
    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-stage {
        padding-top: 16px;
        padding-bottom: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-step-header {
        display: block !important;
        margin-bottom: 10px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-panel {
        display: block !important;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-card {
        overflow: visible;
        background: transparent;
        color: var(--rsv-maroon);
        box-shadow: none;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-rail,
    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-gift,
    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] #upi-claim-paid-btn {
        display: none !important;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-state {
        padding: 0;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-pay-block {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-qr-block {
        display: flex;
        margin: 0 0 12px;
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-qr {
        padding: 8px;
        border: 2px solid var(--rsv-coral);
        background: #fff;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-qr img {
        width: 132px;
        height: 132px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-caption {
        margin: 0;
        color: rgba(30, 30, 30, 0.58);
        font: 400 12px/1.4 var(--rsv-font-body);
        text-align: center;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-or {
        display: flex;
        margin: 0 0 12px;
        align-items: center;
        gap: 10px;
        color: rgba(86, 16, 35, 0.48);
        font: italic 400 13px/1 var(--rsv-font-accent);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-or::before,
    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-or::after {
        height: 1px;
        flex: 1 1 auto;
        content: "";
        background: rgba(86, 16, 35, 0.18);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-hero {
        margin: 0 0 10px;
        text-align: center;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-send-to {
        margin: 0 0 3px;
        color: rgba(30, 30, 30, 0.62);
        font: 500 13px/1.35 var(--rsv-font-body);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-mobile-send-label {
        display: inline;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-payee-label {
        display: none;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-amount {
        color: var(--rsv-maroon);
        font: 400 42px/1.05 var(--rsv-font-display);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-vpa-row {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 9px 10px;
        border: 1px solid rgba(86, 16, 35, 0.18);
        background: #fff;
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-vpa {
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--rsv-maroon);
        font: 500 11px/1.3 var(--rsv-font-mono);
        word-break: break-word;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-copy {
        min-height: 34px;
        padding: 8px 12px;
        background: var(--rsv-maroon);
        color: var(--rsv-cream);
        font: 500 11px/1 var(--rsv-font-mono);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-confirm-copy {
        margin: 10px 0 0;
        padding-top: 10px;
        border-top: 1px solid rgba(86, 16, 35, 0.16);
        color: rgba(30, 30, 30, 0.62);
        font: 400 13px/1.45 var(--rsv-font-body);
        text-align: center;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-upi-caution {
        margin: 8px 0 0;
        color: rgba(86, 16, 35, 0.58);
        font: 400 12px/1.45 var(--rsv-font-body);
        text-align: center;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-next-actions {
        position: static;
        display: flex !important;
        width: 100%;
        margin: 0;
        padding: 8px 22px max(14px, env(safe-area-inset-bottom, 14px));
        background: var(--rsv-cream);
        box-sizing: border-box;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-back-link {
        display: inline-flex !important;
        min-height: 42px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-next-btn {
        display: inline-flex !important;
        min-height: 48px;
        background: var(--rsv-green);
        color: var(--rsv-chartreuse);
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-next-btn:hover:not(:disabled) {
        background: var(--rsv-green);
        color: var(--rsv-chartreuse);
    }
}

@media screen and (max-width: 1024px) and (max-height: 700px) {
    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-hero {
        padding: 12px 18px 14px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-hero__thumb {
        width: 70px;
        height: 70px;
        flex-basis: 70px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-hero__name {
        font-size: 21px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-hero__price {
        font-size: 16px;
    }

    #contributionModal.contribution-mobile-flow[data-contribution-step="4"] .contribution-mobile-stage {
        padding-top: 10px;
        padding-bottom: 8px;
    }
}