/** Shopify CDN: Minification failed

Line 1060:11 Expected identifier but found whitespace
Line 1060:16 Unexpected "0.2s"

**/
/* Rational Futurism Design System - Awwwards Edition */
:root {
    /* Base Palette - High Contract / Swiss Style */
    --rf-bg: #ffffff;
    --rf-surface: #f8f9fa;
    /* Slight off-white for cards */
    --rf-text: #111111;
    --rf-text-secondary: #555555;
    --rf-border: #e2e2e2;
    --rf-border-hover: #000000;

    /* Accents */
    --rf-accent: #000000;
    --rf-accent-bg: #f0f0f0;
    --rf-accent-light: #e0e0e0;

    /* Status */
    --rf-error: #ff3b30;
    --rf-success: #34c759;

    /* Glass & Depth */
    --rf-glass: rgba(255, 255, 255, 0.9);
    --rf-glass-border: rgba(0, 0, 0, 0.05);
    --rf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --rf-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.06);
    --rf-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.08);

    /* Dimensions */
    --rf-radius-sm: 4px;
    --rf-radius-md: 12px;
    /* Increased for modern feel */
    --rf-radius-pill: 100px;

    /* Animation - Calmer & Slower */
    --rf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Softer easing */
    --rf-transition: all 0.6s var(--rf-ease);
}

@media (prefers-color-scheme: dark) {
    :root {
        --rf-bg: #0a0a0a;
        --rf-surface: #121212;
        --rf-text: #ffffff;
        --rf-text-secondary: #888888;
        --rf-border: #333333;
        --rf-border-hover: #ffffff;

        --rf-accent: #ffffff;
        --rf-accent-bg: #222222;
        --rf-accent-light: #333333;

        --rf-glass: rgba(20, 20, 20, 0.9);
        --rf-glass-border: rgba(255, 255, 255, 0.1);
        --rf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
        --rf-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.3);
        --rf-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.4);
    }
}

/* --- Global Reset & Typography --- */
.rf-container {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--rf-text);
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Sections --- */
.rf-section {
    position: relative;
    margin-bottom: 3.5rem;
    /* More breathing room */
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--rf-border);
    transition: var(--rf-transition);
}

.rf-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Focus Mode */
.rf-section {
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.rf-section.rf-dimmed {
    opacity: 0.7;
    filter: blur(1.5px) grayscale(0.2);
    pointer-events: none;
}



/* --- Header --- */
.rf-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.rf-header-with-action {
    justify-content: space-between;
}

.rf-header-left {
    display: flex;
    align-items: baseline;
}

.rf-step-indicator {
    font-family: 'Inter', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rf-text-secondary);
    margin-right: 1rem;
    padding: 2px 6px;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-sm);
    opacity: 0.8;
}

.rf-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

/* --- Size Switcher (Pill) --- */
.rf-size-switcher {
    position: relative;
    display: inline-flex;
    background: var(--rf-surface);
    border-radius: var(--rf-radius-pill);
    padding: 3px;
    border: 1px solid var(--rf-border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rf-switcher-input,
.rf-size-switcher input[type="radio"] {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}



.rf-switch-label {
    position: relative;
    z-index: 2;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--rf-text-secondary);
    transition: color 0.3s ease;
}

.rf-switch-bg {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    width: calc(50% - 3px);
    background: var(--rf-bg);
    border-radius: var(--rf-radius-pill);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s var(--rf-ease);
    z-index: 1;
}

.rf-size-switcher input:checked+label {
    color: var(--rf-text);
}

#rf-mode-custom:checked~.rf-switch-bg {
    transform: translateX(100%);
}

#rf-mode-standard:checked~.rf-switch-bg {
    transform: translateX(0);
}


/* --- Inputs --- */
.rf-input-group {
    margin-bottom: 1.5rem;
}

.rf-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--rf-text-secondary);
    letter-spacing: 0.02em;
}

.rf-select-wrapper {
    position: relative;
}

.rf-select,
.rf-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    font-size: 1rem;
    color: var(--rf-text);
    transition: var(--rf-transition);
    appearance: none;
}

.rf-select:hover,
.rf-input:hover {
    border-color: var(--rf-border-hover);
}

.rf-select:focus,
.rf-input:focus {
    outline: none;
    border-color: var(--rf-accent);
    background: var(--rf-bg);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.rf-select-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--rf-text);
    pointer-events: none;
    opacity: 0.6;
}

/* Scrubbing Input */
.rf-number-scrub {
    position: relative;
    cursor: ew-resize;
}

.rf-input-number {
    cursor: text;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}


/* --- Cards (Layout) --- */
.rf-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.25rem;
}

.rf-radio-card {
    position: relative;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    padding: 1.5rem;
    cursor: pointer;
    background: var(--rf-bg);
    transition: var(--rf-transition);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.rf-radio-input {
    position: absolute;
    opacity: 0;
}

.rf-radio-card:hover {
    border-color: var(--rf-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--rf-shadow-md);
}

.rf-radio-card:has(.rf-radio-input:checked) {
    border-color: var(--rf-accent);
    background: var(--rf-surface);
    box-shadow: inset 0 0 0 1px var(--rf-accent);
    /* Double border effect */
}

.rf-radio-title {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.rf-radio-desc {
    font-size: 0.8rem;
    color: var(--rf-text-secondary);
    line-height: 1.4;
}

/* --- Margins --- */
.rf-radio-group-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.rf-radio-pill {
    cursor: pointer;
}

.rf-radio-pill span {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--rf-radius-pill);
    border: 1px solid var(--rf-border);
    font-size: 0.9rem;
    color: var(--rf-text-secondary);
    transition: var(--rf-transition);
    background: var(--rf-bg);
}

.rf-radio-pill input {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.rf-radio-pill input:checked+span {
    background: var(--rf-accent);
    color: var(--rf-bg);
    border-color: var(--rf-accent);
    transform: scale(1.05);
    box-shadow: var(--rf-shadow-sm);
}

/* --- Dropzone --- */
.rf-dropzone {
    position: relative;
    border: 2px dashed var(--rf-border);
    border-radius: var(--rf-radius-md);
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(180deg, var(--rf-surface) 0%, var(--rf-bg) 100%);
    transition: var(--rf-transition);
}

.rf-dropzone:hover,
.rf-dropzone.rf-dragover {
    border-color: var(--rf-accent);
    transform: scale(1.01);
    background: var(--rf-accent-bg);
    box-shadow: var(--rf-shadow-hover);
}

.rf-upload-icon-wrapper {
    margin-bottom: 1.5rem;
    font-size: 3rem;
    transition: transform 0.4s var(--rf-ease);
}

.rf-dropzone:hover .rf-upload-icon-wrapper {
    transform: translateY(-8px) scale(1.1);
}

.rf-dropzone-text {
    font-weight: 500;
    color: var(--rf-text-secondary);
}

/* Holographic Scan */
.rf-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.03) 50%, transparent 100%);
    transform: translateY(-100%);
    transition: opacity 0.3s;
    pointer-events: none;
    opacity: 0;
}

.rf-dropzone:hover .rf-scan-line {
    opacity: 1;
    animation: rf-scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rf-scan {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* --- File Items (Awwwards Style) --- */
.rf-file-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rf-file-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    transition: all 0.5s var(--rf-ease);
    overflow: hidden;
}

/* Background Fill Animation */
.rf-file-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, rgba(52, 199, 89, 0.05), rgba(52, 199, 89, 0.15));
    transition: width 0.2s linear;
    /* Smooth linear fill */
    z-index: 0;
    pointer-events: none;
}

.rf-file-item:hover {
    border-color: var(--rf-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: scale(1.01);
}

.rf-file-info {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.rf-file-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rf-file-details {
    display: flex;
    flex-direction: column;
}

.rf-file-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rf-text);
}

.rf-file-size {
    font-size: 0.75rem;
    color: var(--rf-text-secondary);
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}

/* Meta Area (Progress & Remove) */
.rf-file-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.rf-file-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rf-text-secondary);
    transition: color 0.3s, transform 0.3s;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-file-remove:hover {
    color: var(--rf-error);
    transform: rotate(90deg);
}

/* Circular Progress */
.rf-progress-ring-container {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-progress-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: opacity 0.4s;
}

.rf-progress-ring-circle {
    transition: stroke-dashoffset 0.1s linear;
}

/* Status Icon (Checkmark) */
.rf-status-icon {
    position: absolute;
    font-size: 1rem;
    color: var(--rf-success);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Complete State */
.rf-upload-complete .rf-progress-ring {
    opacity: 0;
}

.rf-upload-complete .rf-status-icon {
    opacity: 1;
    transform: scale(1);
}

.rf-upload-complete {
    border-color: var(--rf-success);
    background: rgba(52, 199, 89, 0.02);
}


/* --- Total Area --- */
.rf-total-area {
    position: sticky;
    bottom: 2rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
    /* Add separation from buy buttons */
    padding: 1.5rem;

    /* Gradient Glass Background */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid var(--rf-glass-border);
    border-radius: var(--rf-radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    /* Deeper shadow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    animation: slideUp 0.6s var(--rf-ease) backwards;
    transition: transform 0.3s ease;
}

/* Hover lift for the total area - fun interaction */
.rf-total-area:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.rf-total-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.rf-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rf-text-secondary);
    margin-bottom: 0.2rem;
}

.rf-total-amount {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

/* --- Qty Selector --- */
.rf-qty-selector {
    display: flex;
    align-items: center;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    padding: 2px;
}

.rf-qty-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--rf-text);
    border-radius: var(--rf-radius-sm);
    transition: background 0.2s;
}

.rf-qty-btn:hover {
    background: var(--rf-accent-bg);
}

.rf-qty-input {
    width: 50px;
    height: 44px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
}

/* --- Utils --- */
.rf-content-hidden {
    display: none !important;
}

.rf-flex-row {
    display: flex;
    gap: 1rem;
}

.rf-flex-1 {
    flex: 1;
}

.rf-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Validation Shake */
@keyframes rf-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }
}


.rf-input-error {
    border-color: var(--rf-error) !important;
    animation: rf-shake 0.5s var(--rf-ease);
}

.rf-error-msg {
    color: var(--rf-error);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* --- Checkboxes --- */
.rf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--rf-text);
}

.rf-checkbox-label input {
    display: none;
}

.rf-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--rf-border-hover);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: var(--rf-bg);
}

.rf-checkbox-label input:checked+.rf-checkbox-custom {
    background: var(--rf-accent);
    border-color: var(--rf-accent);
}

.rf-checkbox-label input:checked+.rf-checkbox-custom::after {
    content: '';
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(2px, -2px);
}

.rf-context-preview {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--rf-surface);
    border-radius: var(--rf-radius-md);
    border: 1px solid var(--rf-border);
}

/* --- Checkboxes --- */
.rf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--rf-text);
}

.rf-checkbox-label input {
    display: none;
}




/* --- Delivery Timeline (Awwwards Edition V4: Swiss/Tech) --- */
.rf-delivery-wrapper {
    margin-top: 3rem;
    padding: 3rem 2rem;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    /* Sharper corners */
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}


.rf-delivery-header {
    margin-bottom: 2rem;
    /* Reduced from 4rem */
    text-align: center;
    position: relative;
    z-index: 2;
}

.rf-delivery-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: #000;
    color: #fff;
    padding: 12px 24px;
    border-radius: 2px;
    /* Brutalist/Swiss */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rf-timer-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
}

/* Timeline Track Container */
.rf-timeline-track {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Exact thirds */
    align-items: flex-start;
    margin: 0;
    padding-bottom: 0.5rem;
    /* Reduced from 1rem */
}

/* The Line Backbone */
.rf-track-line {
    position: absolute;
    top: 24px;
    /* Center of 48px icon */
    left: 16.666%;
    /* Center of first col */
    right: 16.666%;
    /* Center of last col */
    height: 1px;
    /* Thinner, precise line */
    background: #e0e0e0;
    z-index: 0;
}

/* The "Beam" Animation (replaces Dot) */
.rf-timeline-dot {
    position: absolute;
    top: 24px;
    left: 16.666%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #000, transparent);
    width: 20%;
    z-index: 1;
    opacity: 0;
    /* Beam travels from start to end */
    animation: rf-beam-travel 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rf-beam-travel {
    0% {
        left: 16.666%;
        opacity: 0;
        width: 0;
    }

    20% {
        opacity: 1;
        width: 10%;
    }

    80% {
        opacity: 1;
        width: 10%;
    }

    100% {
        left: calc(83.333% - 10%);
        opacity: 0;
        width: 0;
    }
}

/* Progress Line (Optional: Fills up behind) */
/* This was removed as the beam animation replaces the dot and progress line concept */


/* Steps */
.rf-timeline-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Ensure text centers */
}

.rf-timeline-icon-box {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    /* Keep circular icons for contrast against square UI */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    /* Reduced from 1.5rem */
    transition: all 0.4s ease;
    box-shadow: 0 0 0 8px #fff;
    /* Mask the line behind */
    color: #999;
}

.rf-timeline-icon-box svg {
    width: 20px;
    height: 20px;
}

.rf-timeline-step.active .rf-timeline-icon-box {
    border-color: #000;
    color: #000;
    transform: scale(1.1);
}

/* Typography */
.rf-timeline-date {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    /* Clean Sans */
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #000;
    margin-bottom: 0.25rem;
    /* Reduced from 0.5rem */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s ease 0.1s;
    width: 100%;
    /* Ensure centering works */
}

.rf-timeline-step.active .rf-timeline-date {
    opacity: 1;
    transform: translateY(0);
}

.rf-timeline-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #666;
    font-weight: 600;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.6s ease 0.2s;
    width: 100%;
}

.rf-timeline-step.active .rf-timeline-label {
    opacity: 1;
    transform: translateY(0);
}

/* Notes Grid (Swiss Grid) */
.rf-delivery-notes {
    margin-top: 2rem;
    /* Reduced from 4rem */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    border-top: 1px solid #f0f0f0;
    padding-top: 1.5rem;
    /* Reduced from 2rem */
}

.rf-note-card {
    display: flex;
    gap: 1rem;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.8rem;
    color: #555;
    align-items: flex-start;
    line-height: 1.6;
}

.rf-note-icon-box {
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #000;
    flex-shrink: 0;
    padding-top: 2px;
}

.rf-note-icon-box svg {
    width: 16px;
    height: 16px;
}

.rf-text-bold {
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

/* Stagger Animation */
.rf-animate-in {
    opacity: 0;
    transform: translateY(15px);
    animation: rf-fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes rf-fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

transition: all 0.2s ease;
flex-shrink: 0;
background: var(--rf-bg);
}

.rf-checkbox-label input:checked+.rf-checkbox-custom {
    background: var(--rf-accent);
    border-color: var(--rf-accent);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.rf-checkbox-label input:checked+.rf-checkbox-custom::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: 2px;
    left: 7px;
}

.rf-context-preview {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--rf-surface);
    border-radius: var(--rf-radius-md);
    border: 1px solid var(--rf-border);
}

.rf-note {
    font-size: 0.85rem;
    color: var(--rf-text-secondary);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* --- Price Info Popover --- */
.rf-info-wrapper {
    position: relative;
    margin-right: auto;
    /* Push total to right, keep this left */
    margin-left: 1.5rem;
}

.rf-info-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--rf-radius-pill);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid transparent;
    transition: var(--rf-transition);
}

.rf-info-trigger:hover {
    background: var(--rf-bg);
    border-color: var(--rf-border);
    box-shadow: var(--rf-shadow-sm);
}

.rf-info-icon {
    font-size: 1rem;
}

.rf-info-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rf-text-secondary);
}

.rf-info-popover {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 1rem;
    width: 320px;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    box-shadow: var(--rf-shadow-hover);
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
    pointer-events: none;
}

/* Show on hover */
.rf-info-wrapper:hover .rf-info-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.rf-popover-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--rf-text);
}

.rf-popover-desc {
    font-size: 0.75rem;
    color: var(--rf-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.rf-discount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rf-discount-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--rf-surface);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.rf-discount-qty {
    color: var(--rf-text-secondary);
}

.rf-discount-val {
    font-weight: 700;
    color: var(--rf-accent);
}

.rf-note-micro {
    font-size: 0.7rem;
    color: #999;
    line-height: 1.3;
    margin: 0;
}

.rf-divider {
    height: 1px;
    background: var(--rf-border);
    margin: 1.25rem 0;
}

.rf-shipping-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rf-shipping-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--rf-border);
}

.rf-shipping-item:last-child {
    border-bottom: none;
}

/* Mobile Responsiveness for Total Area */
@media (max-width: 768px) {
    .rf-total-area {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

    .rf-info-wrapper {
        margin-left: 0;
        margin-bottom: 0.5rem;
    }

    .rf-qty-selector {
        width: 100%;
        justify-content: space-between;
    }

    .rf-qty-input {
        flex: 1;
    }

    .rf-total-right {
        align-items: flex-end;
        /* Keep total on right or center? align-items: stretch usually better for stacked */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- Visual Discount Styles --- */
.rf-price-wrapper {
    display: flex;
    flex-direction: row;
    /* Horizontal on Desktop */
    align-items: center;
    /* Center align */
    gap: 0.8rem;
    justify-content: flex-end;
}

.rf-discount-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-original-price {
    font-size: 0.85rem;
    color: var(--rf-text-secondary);
    text-decoration: line-through;
    opacity: 0.7;
    margin-bottom: 0px;
}

.rf-discount-tag {
    display: inline-block;
    background: var(--rf-accent);
    color: var(--rf-bg);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    margin-bottom: 0px;
}

.rf-final-price {
    line-height: 1;
}

@media (max-width: 768px) {
    .rf-price-wrapper {
        flex-direction: column;
        /* Stack on Mobile */
        align-items: flex-end;
        gap: 2px;
    }

    .rf-discount-group {
        gap: 0.4rem;
        margin-bottom: 0;
    }

    .rf-original-price {
        font-size: 0.75rem;
    }
}

@keyframes rf-pulse-soft {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* --- Aco App Compatibility --- */
/* Hide Aco App UI when Custom Form is active */
/* The Aco app is needed for backend validation but its UI is redundant here. */
.wcpa_wrap,
#wcpa_container,
.aco-product-options {
    display: none !important;
}

.rf-required {
    color: var(--rf-error);
    margin-left: 4px;
    font-weight: bold;
}

/* --- iPhone SE & Small Mobile Optimization (< 400px) --- */
@media (max-width: 400px) {

    /* Force Single Column for Grids to prevent text squashing */
    .rf-grid-3,
    .rf-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0.8rem;
    }

    /* Keep 2x2 grid for Split Margins (Top/Bottom/Left/Right) if possible, or make it 2x2 still? 
       Actually 2x2 is fine for numbers, but maybe tight. Let's keep 2x2 for margins as they are small numbers. 
       So exclude .rf-grid-2x2 from single column force unless needed.
       But if user said "various text breaking", likely radio cards.
    */

    .rf-grid-2x2 {
        /* Keep 2 columns for numbers, maybe smaller gap */
        gap: 0.5rem;
    }

    /* Adjust font sizes for tight spaces */
    .rf-radio-label-main {
        font-size: 0.95rem;
    }

    .rf-radio-label-sub {
        font-size: 0.8rem;
    }

    /* Reduce horizontal padding */
    .rf-section {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    /* Adjust Radio Card Padding */
    .rf-radio-card-content {
        padding: 0.8rem;
    }

    /* Price Wrapper Alignment */
    .rf-price-wrapper {
        align-items: flex-end;
    }

    /* Ensure Inputs don't overflow */
    .rf-input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent iOS Zoom */
    }
}

/* --- Mobile Toggle Sizing --- */
@media (max-width: 768px) {
    .rf-switch-label {
        padding: 6px 12px;
        /* Reduced from 8px 18px */
        font-size: 0.8rem;
        /* Reduced from 0.85rem */
    }

    /* If even smaller on very small screens */
    @media (max-width: 400px) {
        .rf-switch-label {
            padding: 5px 10px;
            font-size: 0.75rem;
        }
    }
}

/* --- Mobile Modal & Compact Toggle Updates --- */
.rf-modal-close-btn {
    display: none;
}

@media (max-width: 768px) {

    /* Discount Info: Hide Text, Modalize Popover */
    .rf-info-text {
        display: none;
    }

    .rf-info-icon {
        transform: scale(1.1);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--rf-surface);
        border-radius: 50%;
    }

    /* Modal Container Override */
    .rf-info-popover {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        /* Backdrop */
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        transition: opacity 0.3s ease;
    }

    .rf-info-popover.rf-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .rf-popover-content {
        background: var(--rf-bg);
        width: 100%;
        max-width: 340px;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        max-height: 85vh;
        overflow-y: auto;
        position: relative;
        text-align: left;
    }

    .rf-modal-close-btn {
        display: block;
        position: absolute;
        top: 10px;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 28px;
        line-height: 1;
        color: var(--rf-text-secondary);
        cursor: pointer;
        padding: 5px;
    }

    /* Toggle Size - Further Reduction */
    .rf-switch-label {
        font-size: 11px !important;
        /* Force smaller size */
        padding: 5px 12px !important;
        line-height: 1.3;
    }
}

/* --- Desktop Layout Fixes --- */
@media (min-width: 769px) {

    /* Ensure Popover isn't a static box */
    .rf-info-popover {
        display: none;
        position: absolute;
        /* Re-affirm absolute */
    }

    .rf-info-wrapper:hover .rf-info-popover {
        display: block;
        /* Match original opacity/visibilty transition if possible, 
           but display:block breaks transition without hacks.
           Prioritizing functional layout over fade-in for now. */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Force hide the mobile close button */
    .rf-modal-close-btn {
        display: none !important;
    }

    /* Reset any active class effects on desktop */
    .rf-info-popover.rf-active {
        display: none;
        /* Ignore mobile toggle state on desktop */
    }

    .rf-info-wrapper:hover .rf-info-popover.rf-active {
        display: block;
        /* Unless hovered */
    }
}

/* --- Mobile Fix: Disable Sticky Hover --- */
@media (max-width: 768px) {

    /* Reset global hover effect so it doesn't stick on touch */
    .rf-info-wrapper:hover .rf-info-popover {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Force Active State visibility with higher specificity and importance */
    .rf-info-popover.rf-active,
    .rf-info-wrapper:hover .rf-info-popover.rf-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* --- iPhone SE (375px) Specific Adjustments --- */
@media screen and (max-width: 375px) {

    /* Reduce container padding */
    .rf-container {
        padding: 10px;
    }

    /* Reduce font sizes globally for compactness */
    .rf-label {
        font-size: 0.9rem;
    }

    .rf-sub-label {
        font-size: 0.75rem !important;
    }

    /* Tighten Input Groups */
    .rf-input-group {
        margin-bottom: 12px;
    }

    /* Radio/Checkbox Labels - Allow wrapping or shrink text */
    .rf-radio-label,
    .rf-checkbox-label {
        font-size: 0.85rem;
        padding-left: 24px;
        /* Slightly tighter icon space */
    }

    /* Split Inputs for Margin: tighter padding */
    .rf-input-mini .rf-input {
        padding: 8px 4px;
        /* Less horizontal padding */
        font-size: 13px;
        text-align: center;
    }

    /* Price Display: Compact Layout */
    .rf-price-wrapper {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    .rf-discount-group {
        justify-content: flex-end;
    }

    .rf-final-price {
        font-size: 1.4rem;
        /* Slightly smaller than 1.5/1.8 */
    }

    /* Layout Choices Cards */
    .rf-radio-card {
        padding: 10px;
    }

    .rf-card-label {
        font-size: 0.9rem;
    }

    .rf-card-desc {
        font-size: 0.75rem;
    }
}

/* Hide Spin Buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Layout Description Styling */
.rf-layout-desc-container {
    margin-top: 20px;
    padding: 15px;
    background: var(--rf-surface);
    border-radius: 8px;
    border: 1px solid var(--rf-border);
}

.rf-layout-link {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.rf-layout-link a {
    color: var(--rf-accent);
    text-decoration: underline;
}

.rf-layout-desc-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: var(--rf-text-secondary);
}

.rf-layout-desc-item strong {
    color: var(--rf-text);
}

/* Hide Spin Buttons for Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ensure rf-content-hidden priority */
.rf-content-hidden {
    display: none !important;
}

/* Force display priority for toggled elements */
.rf-label,
.rf-input-group {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Details: Hide Number Spinners --- */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* --- Layout Description Box --- */
.rf-description-box {
    background: var(--rf-surface);
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 0.9rem;
    line-height: 1.6;
    border: 1px solid var(--rf-border);
    color: var(--rf-text-secondary);
}

.rf-description-box .rf-desc-title {
    font-weight: 600;
    color: var(--rf-text-primary);
    margin-bottom: 5px;
    display: block;
}

.rf-description-box .rf-desc-note {
    font-size: 0.8em;
    color: #e02424;
    /* Alert color */
    margin-top: 8px;
    display: block;
}

.rf-description-link {
    color: var(--rf-accent);
    text-decoration: underline;
    font-size: 0.85em;
    margin-bottom: 8px;
    display: inline-block;
}

/* --- Custom System Modal (Replacement for Alert/Confirm) --- */
.rf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.rf-modal-overlay.rf-active {
    opacity: 1;
    visibility: visible;
}

.rf-modal-box {
    background: var(--rf-surface, #fff);
    width: 90%;
    max-width: 400px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.2s ease;
}

.rf-modal-overlay.rf-active .rf-modal-box {
    transform: translateY(0);
}

.rf-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--rf-text-primary, #333);
}

.rf-modal-msg {
    font-size: 0.95rem;
    color: var(--rf-text-secondary, #666);
    margin-bottom: 24px;
    line-height: 1.5;
}

.rf-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rf-modal-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.rf-modal-btn.rf-btn-cancel {
    background: #f0f0f0;
    color: #333;
}

/* --- Info Popover Inline Trigger --- */
.rf-info-trigger {
    display: inline-flex;
    align-items: center;
    color: var(--rf-text-secondary);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.2s;
}

.rf-info-trigger:hover {
    color: var(--rf-accent);
}

/* Ensure Total Right handles absolute children if needed */
.rf-total-right {
    position: relative;
}

/* Popover Styling (Refined for new location) */
.rf-info-popover {
    position: absolute;
    bottom: 100%;
    /* Show above label */
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    margin-bottom: 15px;
    transform-origin: bottom right;
    animation: rfFadeUp 0.2s ease-out;

    /* Ensure visibility overrides potential hidden state from legacy CSS */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: none;
    /* JS toggles this */
}

/* Mobile Popover Override (Bottom Sheet Style) */
@media (max-width: 768px) {
    .rf-info-popover {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        margin-bottom: 0;
        border: 1px solid var(--rf-border);
        border-bottom: none;
        animation: rfSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 20000;
        /* High z-index on top of everything */
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
        max-height: 80vh;
        overflow-y: auto;

        display: none;
        /* Default hidden */
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@keyframes rfFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rfSlideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.rf-popover-close-btn {
    font-size: 1.2rem;
    color: var(--rf-text-secondary);
    padding: 8px;
    line-height: 1;
    z-index: 10;
}

/* --- Price Row (Icon + Amount) --- */
.rf-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align right */
    margin-top: 4px;
    gap: 8px;
    position: relative;
}

/* Ensure Button Reset for Trigger */
button.rf-info-trigger {
    background: transparent;
    border: none;
    padding: 8px;
    /* Larger touch target */
    margin: -8px 0 -8px 0;
    /* Negate padding impact on layout flow vertically */
    cursor: pointer;
    line-height: 0;
    color: var(--rf-text-secondary);
    display: flex;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

button.rf-info-trigger:active {
    background: rgba(0, 0, 0, 0.1);
}

button.rf-info-trigger:hover,
button.rf-info-trigger:focus {
    color: var(--rf-accent);
}

/* --- Desktop Hover Popover (Local) --- */
.rf-info-popover-pc {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 320px;
    background: var(--rf-bg);
    border: 1px solid var(--rf-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    margin-bottom: 20px;
    text-align: left;
    cursor: default;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    transform: translateY(10px);
}

/* Invisible bridge to prevent hover loss */
.rf-info-popover-pc::after {
    content: '';
    position: absolute;
    top: 100%;
    /* Below the popover */
    left: 0;
    width: 100%;
    height: 30px;
    /* Covers the 20px margin + buffer */
    background: transparent;
}

/* Hover Logic for PC (Works on div trigger) */
@media (min-width: 769px) {
    .rf-info-trigger:hover .rf-info-popover-pc {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .rf-info-popover-pc {
        display: none !important;
    }
}

/* --- Mobile Global Modal (Backdrop + Centered) --- */
#rf-info-modal-global.rf-info-popover {
    display: none;
}

@media (max-width: 768px) {
    #rf-info-modal-global.rf-info-popover {
        position: fixed;
        /* Standard Full Cover */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Fallback for mobile browsers */
        min-height: -webkit-fill-available;

        background: rgba(0, 0, 0, 0.6);
        z-index: 2147483647;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;

        /* Reset others */
        right: auto;
        bottom: auto;
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin: 0;

        opacity: 0;
        visibility: hidden;
        /* Ensure visibility waits for opacity */
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #rf-info-modal-global.rf-info-popover.rf-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #rf-info-modal-global .rf-popover-content {
        background: var(--rf-bg);
        width: 100%;
        max-width: 340px;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
        transform: none;
        /* Ensure no own transition interferes */
        transition: none;
    }

    #rf-info-modal-global.rf-info-popover.rf-active .rf-popover-content {
        transform: none;
    }

    #rf-info-modal-global .rf-popover-close-btn {
        display: block;
        font-size: 1.5rem;
        padding: 10px;
        top: 10px;
        right: 15px;
    }

    /* --- Mobile Header Layout --- */
    .rf-section-header {
        flex-wrap: wrap;
    }

    .rf-header-link {
        width: 100%;
        display: block;
        margin-top: 6px;
        text-align: left;
    }

    /* --- Mobile Price Alignment (Shrink to Right) --- */
    .rf-total-area {
        width: fit-content !important;
        margin-left: auto !important;
        right: 1rem;
        left: auto;
        align-items: flex-end !important;
        position: sticky;
        bottom: 1rem;
        max-width: 95%;
        box-sizing: border-box;
        min-width: 0 !important;
    }

    .rf-qty-selector {
        width: auto !important;
        gap: 8px;
    }

    .rf-total-label {
        align-items: flex-end;
        text-align: right;
    }
}

@media (max-width: 768px) {
    .rf-total-label {
        margin-bottom: 0;
    }
}

/* --- Custom Modal System --- */
.rf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    display: flex;
    /* Flex to center */
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    opacity: 0;
    animation: rfFadeIn 0.2s forwards;
}

.rf-modal-box {
    background: var(--rf-bg);
    padding: 25px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    text-align: center;
    transform: scale(0.95);
    animation: rfScaleIn 0.2s forwards;
}

.rf-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--rf-text-primary);
}

.rf-modal-text {
    font-size: 1rem;
    color: var(--rf-text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.rf-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rf-modal-actions button {
    min-width: 100px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.rf-btn-primary {
    background: var(--rf-accent);
    color: #fff;
}

.rf-btn-primary:hover {
    background: var(--rf-accent-hover);
}

.rf-btn-secondary {
    background: var(--rf-border);
    color: var(--rf-text-primary);
}

.rf-btn-secondary:hover {
    background: #d0d0d0;
}

@keyframes rfFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes rfScaleIn {
    to {
        transform: scale(1);
    }
}

/* --- Custom Confirmation Modal --- */
.rf-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.rf-confirm-overlay.rf-active {
    opacity: 1;
    visibility: visible;
}

.rf-confirm-box {
    background: var(--rf-surface);
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.rf-confirm-overlay.rf-active .rf-confirm-box {
    transform: scale(1);
}

.rf-confirm-msg {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rf-text-primary);
}

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

.rf-btn-confirm {
    background: var(--rf-accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.rf-btn-cancel {
    background: transparent;
    color: var(--rf-text-secondary);
    border: 1px solid var(--rf-border);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

/* --- Custom Confirmation Modal --- */
.rf-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.rf-modal-backdrop.rf-show {
    opacity: 1;
    visibility: visible;
}

.rf-modal-dialog {
    background: var(--rf-bg);
    padding: 24px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.rf-modal-message {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rf-text-primary);
}

.rf-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.rf-btn-secondary {
    background: var(--rf-surface);
    color: var(--rf-text-primary);
    border: 1px solid var(--rf-border);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.rf-btn-primary {
    background: var(--rf-accent);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- Disable Number Input Spinners (Scroll Accident Prevention) --- */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* --- Remove Number Spinners --- */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* --- Custom Modal Styling --- */
.rf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    opacity: 0;
    animation: rfFadeIn 0.3s forwards;
}

@keyframes rfFadeIn {
    to {
        opacity: 1;
    }
}

.rf-modal-card {
    background: var(--rf-surface);
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    text-align: center;
    transform: scale(0.95);
    animation: rfScaleIn 0.3s forwards;
}

@keyframes rfScaleIn {
    to {
        transform: scale(1);
    }
}

.rf-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--rf-text);
}

.rf-modal-message {
    font-size: 1rem;
    color: var(--rf-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.rf-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rf-btn-primary,
.rf-btn-secondary {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.rf-btn-primary {
    background: var(--rf-accent);
    color: #000;
    font-weight: 600;
}

.rf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3);
}

.rf-btn-secondary {
    background: var(--rf-border);
    color: var(--rf-text);
}

.rf-btn-secondary:hover {
    background: #444;
}

/* --- Layout Description Styling --- */
.rf-layout-text-container {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--rf-border);
}

.rf-layout-text-item {
    padding-left: 15px;
    border-left: 3px solid var(--rf-accent);
}

/* --- Custom Modal System (Awwwards Style) --- */
.rf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-modal-overlay.rf-active {
    opacity: 1;
    visibility: visible;
}

.rf-modal-content {
    background: var(--rf-surface);
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--rf-border);
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
}

.rf-modal-overlay.rf-active .rf-modal-content {
    transform: translateY(0);
}

.rf-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--rf-text);
}

.rf-modal-message {
    font-size: 0.95rem;
    color: var(--rf-text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.rf-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rf-btn-modal {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.rf-btn-secondary {
    background: transparent;
    border: 1px solid var(--rf-border);
    color: var(--rf-text-secondary);
}

.rf-btn-secondary:hover {
    background: var(--rf-border);
    color: var(--rf-text);
}

.rf-btn-primary {
    background: var(--rf-accent);
    color: white;
}

.rf-btn-primary:hover {
    background: var(--rf-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}

/* --- Smooth Height Transition (Grid Accordion) --- */
.rf-expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.rf-expandable.rf-open {
    grid-template-rows: 1fr;
}

.rf-expandable-inner {
    min-height: 0;
    /* overflow: visible; Not strictly visible for expandable but content should be safe */
}

/* Ensure padding doesn't break collapse */
.rf-expandable-inner>div {
    padding-top: 15px;
    /* Add padding here instead of container */
}

/* Refined Layout Descriptions */
.rf-layout-desc-in-card {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--rf-text-secondary);
    border-top: 1px solid var(--rf-border);
    margin-top: 12px;
    /* padding-top: 12px; Handled by inner div */
    text-align: left;
}

/* --- Header Link & Layout Description Styling --- */
.rf-header-link {
    font-size: 0.8rem;
    color: var(--rf-text-secondary);
    text-decoration: underline;
    margin-left: auto;
    /* Push to right if header is flex */
    transition: color 0.2s;
    line-height: 1.5;
}

.rf-header-link:hover {
    color: var(--rf-accent);
}

.rf-section-header {
    display: flex;
    align-items: center;
    /* Ensure existing flex props don't break */
}

.rf-layout-desc-item {
    margin-top: 25px;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--rf-border);
    border-radius: 0;

    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--rf-text);
}

.rf-layout-desc-item strong {
    font-family: 'Inter', monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rf-text-secondary);
    margin-bottom: 12px;
    display: block;
    font-weight: 500;
}

.rf-note-micro {
    display: block;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--rf-text-secondary);
    opacity: 0.8;
    line-height: 1.5;
}

/* True Toggle Behavior */
.rf-size-switcher {
    cursor: pointer;
    /* Indicates the whole area is clickable */
}

.rf-size-switcher * {
    pointer-events: none;
    /* Let clicks pass through to container (optional but cleaner) */
}

/* Re-enable pointer events for INPUTS if they needed it, but here we handle via container. 
   Actually, allowing clicks on label is fine if we preventDefault in JS. 
   But simplest is just cursor: pointer on container. 
*/
.rf-size-switcher .rf-switch-label {
    pointer-events: none;
    /* Prevent label from triggering input change independently */
}

/* --- Price Display Mobile Optimization --- */
.rf-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

/* User Request: Break line for Shipping Note on Mobile & Fix Icon Layout */
@media (max-width: 768px) {
    .rf-total-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .rf-total-label {
        display: flex;
        flex-direction: column;
        /* Stack vertically */
        align-items: flex-end;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    .rf-shipping-note-inline {
        font-size: 0.7rem;
        margin-left: 0;
        margin-top: 2px;
        display: inline-flex;
        align-items: center;
        /* Ensure specific icons don't overflow */
    }

    /* If the "i-icon" is part of a tooltip trigger inside here, ensure it wraps nicely */
    .rf-shipping-note-inline svg,
    .rf-shipping-note-inline .rf-icon {
        margin-right: 4px;
        flex-shrink: 0;
    }
}

.rf-discount-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rf-discount-tag {
    background: var(--rf-accent);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.rf-original-price {
    text-decoration: line-through;
    color: var(--rf-text-secondary);
    font-size: 0.9rem;
}

.rf-final-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--rf-text);
    line-height: 1;
}

/* Mobile Specific Adjustments */
@media screen and (max-width: 768px) {
    .rf-price-wrapper {
        flex-direction: row;
        /* Keep it inline on mobile if space allows, or wrap cleanly */
        align-items: baseline;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .rf-discount-group {
        gap: 0.3rem;
    }

    .rf-discount-tag {
        font-size: 0.7rem;
        padding: 1px 4px;
    }

    .rf-original-price {
        font-size: 0.8rem;
    }

    .rf-final-price {
        font-size: 1.25rem;
        /* Reduce overly large font */
    }
}