/* CLV Calculator - WordPress/Elementor Friendly Styles */ /* High specificity to prevent CSS override */ .clvc-wrapper.clvc-wrapper.clvc-wrapper { --clvc-primary: #4150F6; --clvc-primary-light: #4150F610; --clvc-primary-hover: #3442d4; --clvc-success: #10B981; --clvc-success-light: #10B98110; --clvc-bg: #FFFFFF; --clvc-surface: #F8FAFC; --clvc-border: #E2E8F0; --clvc-text: #1E293B; --clvc-text-muted: #64748B; --clvc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --clvc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --clvc-radius: 12px; --clvc-radius-sm: 8px; --clvc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: var(--clvc-font) !important; max-width: 900px !important; margin: 0 auto !important; box-sizing: border-box !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper * { box-sizing: border-box !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-title { font-size: 28px !important; font-weight: 700 !important; color: var(--clvc-text) !important; text-align: center !important; margin: 0 0 24px 0 !important; padding: 0 !important; line-height: 1.3 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; background: var(--clvc-bg) !important; border-radius: var(--clvc-radius) !important; box-shadow: var(--clvc-shadow-lg) !important; padding: 24px !important; border: 1px solid var(--clvc-border) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-form-section { display: flex !important; flex-direction: column !important; gap: 16px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-section-title { font-size: 18px !important; font-weight: 600 !important; color: var(--clvc-text) !important; margin: 0 0 4px 0 !important; padding: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-group { display: flex !important; flex-direction: column !important; gap: 6px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-label { font-size: 15px !important; font-weight: 500 !important; color: var(--clvc-text) !important; margin: 0 !important; padding: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-label-optional { color: var(--clvc-text-muted) !important; font-weight: 400 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-row { display: flex !important; gap: 8px !important; align-items: stretch !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-container { position: relative !important; flex: 1 !important; display: flex !important; align-items: center !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-prefix, .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-suffix { position: absolute !important; font-size: 15px !important; color: var(--clvc-text-muted) !important; pointer-events: none !important; font-weight: 500 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-prefix { left: 14px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-suffix { right: 14px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input { width: 100% !important; height: 44px !important; padding: 10px 14px !important; font-size: 15px !important; font-family: var(--clvc-font) !important; color: var(--clvc-text) !important; background: var(--clvc-surface) !important; border: 1px solid var(--clvc-border) !important; border-radius: var(--clvc-radius-sm) !important; outline: none !important; transition: all 0.2s ease !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input:focus { border-color: var(--clvc-primary) !important; box-shadow: 0 0 0 3px var(--clvc-primary-light) !important; background: var(--clvc-bg) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input::placeholder { color: var(--clvc-text-muted) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input.clvc-has-prefix { padding-left: 32px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input.clvc-has-suffix { padding-right: 50px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-select { height: 44px !important; padding: 10px 14px !important; font-size: 15px !important; font-family: var(--clvc-font) !important; color: var(--clvc-text) !important; background: var(--clvc-surface) !important; border: 1px solid var(--clvc-border) !important; border-radius: var(--clvc-radius-sm) !important; outline: none !important; cursor: pointer !important; min-width: 120px !important; transition: all 0.2s ease !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; padding-right: 36px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-select:focus { border-color: var(--clvc-primary) !important; box-shadow: 0 0 0 3px var(--clvc-primary-light) !important; background-color: var(--clvc-bg) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-btn-reset { width: 100% !important; height: 44px !important; margin-top: 8px !important; font-size: 15px !important; font-weight: 500 !important; font-family: var(--clvc-font) !important; color: var(--clvc-text-muted) !important; background: var(--clvc-surface) !important; border: 1px solid var(--clvc-border) !important; border-radius: var(--clvc-radius-sm) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-btn-reset:hover { background: var(--clvc-bg) !important; border-color: var(--clvc-text-muted) !important; color: var(--clvc-text) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-results-section { display: flex !important; flex-direction: column !important; gap: 16px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-card { padding: 20px !important; border-radius: var(--clvc-radius-sm) !important; text-align: center !important; border: 1px solid var(--clvc-border) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-card:hover { transform: translateY(-2px) !important; box-shadow: var(--clvc-shadow) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-card.clvc-primary-card { background: linear-gradient(135deg, var(--clvc-primary-light) 0%, #4150F605 100%) !important; border-color: #4150F630 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-card.clvc-success-card { background: linear-gradient(135deg, var(--clvc-success-light) 0%, #10B98105 100%) !important; border-color: #10B98130 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-label { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-primary-card .clvc-result-label { color: var(--clvc-primary) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-success-card .clvc-result-label { color: var(--clvc-success) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-value { font-size: 36px !important; font-weight: 700 !important; color: var(--clvc-text) !important; margin: 0 0 4px 0 !important; padding: 0 !important; line-height: 1.2 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-description { font-size: 13px !important; color: var(--clvc-text-muted) !important; margin: 0 !important; padding: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-analysis-card { background: var(--clvc-surface) !important; padding: 20px !important; border-radius: var(--clvc-radius-sm) !important; border: 1px solid var(--clvc-border) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-analysis-title { font-size: 16px !important; font-weight: 600 !important; color: var(--clvc-text) !important; text-align: center !important; margin: 0 0 16px 0 !important; padding: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-analysis-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 0 !important; border-bottom: 1px solid var(--clvc-border) !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-analysis-row:last-child { border-bottom: none !important; padding-bottom: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-analysis-label { font-size: 15px !important; color: var(--clvc-text) !important; font-weight: 500 !important; margin: 0 !important; padding: 0 !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-analysis-value { font-size: 15px !important; color: var(--clvc-text) !important; font-weight: 600 !important; margin: 0 !important; padding: 0 !important; } /* Responsive Design */ @media screen and (max-width: 768px) { .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-container { grid-template-columns: 1fr !important; gap: 20px !important; padding: 20px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-title { font-size: 24px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-result-value { font-size: 30px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper { padding: 16px !important; } } @media screen and (max-width: 480px) { .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-input-row { flex-direction: column !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-select { width: 100% !important; min-width: unset !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-title { font-size: 22px !important; } .clvc-wrapper.clvc-wrapper.clvc-wrapper .clvc-container { padding: 16px !important; } } input#clvc-frequency { width: 230px !important; } Customer Lifetime Value Calculator Customer Metrics Average Order Value (AOV) $ Purchase Frequency # Per Month Per Year Customer Lifespan (Years) Years Profit Margin (Optional) % Acquisition Cost / CAC (Optional) $ Reset Lifetime Revenue (Gross CLV) $0.00 Total revenue over customer life Net Lifetime Profit $0.00 Profit after Margin & CAC costs Analysis Annual Revenue: $0.00 LTV:CAC Ratio: - Return on Investment: -