/* Google Ads ROI Calculator Styles * Edit: 2 - Added centered actions class */ .garoi-calculator-wrapper { max-width: 1200px; margin: 2rem auto; padding: 2rem; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .garoi-calculator-title { text-align: center; color: #1a1a1a; font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: 600; } /* Tabs Styling */ .garoi-tabs { width: 100%; margin-top: 2rem; } .garoi-tab-nav { display: flex; border-bottom: 1px solid #e2e8f0; margin-bottom: 1.5rem; } .garoi-tab-button { padding: 0.875rem 1.5rem; background: none; border: none; border-bottom: 2px solid transparent; color: #4a5568; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .garoi-tab-button:hover { color: #2d3748; } .garoi-tab-button.active { color: #4f46e5; border-bottom-color: #4f46e5; } .garoi-tab-pane { display: none; } .garoi-tab-pane.active { display: block; } /* Form Styling */ .garoi-form { margin-bottom: 2rem; } .garoi-form-section { margin-bottom: 2rem; padding: 1.5rem; background: #f8fafc; border-radius: 8px; } .garoi-form-section h3 { color: #2d3748; font-size: 1.25rem; margin-top: 0; margin-bottom: 1.25rem; font-weight: 600; } .garoi-form-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem; } .garoi-form-group { flex: 1; min-width: 250px; position: relative; } .garoi-form-group label { display: block; margin-bottom: 0.5rem; color: #4a5568; font-weight: 500; } .garoi-form-group input, .garoi-form-group select { width: 100%; padding: 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; font-size: 0.875rem; background: #ffffff; } .garoi-form-group input:focus, .garoi-form-group select:focus { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); } .garoi-benchmark-indicator { position: absolute; right: 10px; top: 35px; width: 10px; height: 10px; border-radius: 50%; } /* Button Styling */ .garoi-form-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } /* Centered actions class */ .garoi-centered-actions { justify-content: center; text-align: center; } .garoi-button { padding: 0.75rem 1.5rem; border-radius: 0.375rem; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: all 0.2s; } .garoi-button-primary { background: #4f46e5; color: white; border: none; } .garoi-button-primary:hover { background: #4338ca; } .garoi-button-secondary { background: white; color: #4f46e5; border: 1px solid #4f46e5; } .garoi-button-secondary:hover { background: #f8fafc; } .garoi-button-text { background: transparent; color: #4a5568; border: none; } .garoi-button-text:hover { color: #2d3748; background: #f8fafc; } /* Results Styling */ .garoi-results { margin-top: 2rem; padding: 2rem; background: #f8fafc; border-radius: 8px; } .garoi-results h3 { color: #2d3748; font-size: 1.25rem; margin-top: 0; margin-bottom: 1.5rem; font-weight: 600; } .garoi-results-actions { margin-top: 2rem; } .garoi-charts-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .garoi-chart-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .garoi-chart-card h4 { color: #2d3748; margin-top: 0; margin-bottom: 1rem; font-size: 1rem; font-weight: 600; } .garoi-chart-wrapper { position: relative; height: 300px; } .garoi-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .garoi-metric-card { padding: 1.25rem; background: white; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 0.5rem; } .garoi-metric-label { color: #4a5568; font-size: 0.875rem; font-weight: 500; } .garoi-metric-value { color: #2d3748; font-size: 1.5rem; font-weight: 600; } .garoi-benchmark-comparison { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 0.25rem; display: inline-block; } /* Scenarios Styling */ .garoi-scenarios-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .garoi-scenario-card { padding: 1.5rem; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: relative; } .garoi-scenario-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .garoi-scenario-name { font-weight: 600; color: #2d3748; font-size: 1.125rem; margin: 0; } .garoi-scenario-industry { color: #4a5568; font-size: 0.875rem; margin-top: 0.25rem; } .garoi-scenario-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .garoi-scenario-metric { display: flex; flex-direction: column; } .garoi-scenario-metric-label { font-size: 0.75rem; color: #4a5568; } .garoi-scenario-metric-value { font-size: 1rem; font-weight: 600; color: #2d3748; } .garoi-scenario-actions { margin-top: 1rem; display: flex; justify-content: space-between; gap: 0.5rem; } .garoi-comparison-table-wrapper { overflow-x: auto; margin: 1.5rem 0; } .garoi-comparison-table { width: 100%; border-collapse: collapse; border-spacing: 0; } .garoi-comparison-table th, .garoi-comparison-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; } .garoi-comparison-table th { background: #f8fafc; font-weight: 600; color: #2d3748; } .garoi-comparison-table td { color: #4a5568; } .garoi-comparison-changes { font-size: 0.75rem; margin-left: 0.5rem; } .garoi-change-positive { color: #22c55e; } .garoi-change-negative { color: #ef4444; } /* Benchmarks Styling */ .garoi-benchmarks-header { margin-bottom: 1.5rem; } .garoi-help-text { color: #4a5568; margin-top: 0.5rem; } .garoi-benchmarks-controls { margin-bottom: 1.5rem; } .garoi-benchmarks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .garoi-benchmark-card { padding: 1.5rem; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .garoi-benchmark-title { font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; } .garoi-benchmark-value { font-size: 1.5rem; font-weight: 700; color: #4f46e5; margin-bottom: 0.75rem; } .garoi-benchmark-description { font-size: 0.875rem; color: #4a5568; } .garoi-empty-state { grid-column: 1 / -1; text-align: center; padding: 3rem; background: white; border-radius: 8px; color: #4a5568; } /* Responsive Styles */ @media (max-width: 768px) { .garoi-calculator-wrapper { padding: 1.5rem; margin: 1rem auto; } .garoi-tab-nav { flex-wrap: wrap; } .garoi-tab-button { flex: 1; text-align: center; padding: 0.75rem 0.5rem; } .garoi-form-actions { flex-direction: column; } .garoi-button { width: 100%; } .garoi-charts-container, .garoi-metrics-grid, .garoi-scenarios-list, .garoi-benchmarks-grid { grid-template-columns: 1fr; } .garoi-comparison-charts, .garoi-benchmark-charts { display: flex; flex-direction: column; gap: 1.5rem; } }