/* Scoped styles for the Home Aesthetic Calculator Plugin */
.ha-calculator-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ha-calculator-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
}

.ha-calculator-wrapper .container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
}

/* Header */
.ha-calculator-wrapper .header {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ha-calculator-wrapper .header h1 { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 10px; }
.ha-calculator-wrapper .tagline { font-size: 1.2rem; color: #666; font-weight: 300; }

/* Main content & Form */
.ha-calculator-wrapper .main-content { background: rgba(255, 255, 255, 0.95); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); margin-bottom: 30px; }
.ha-calculator-wrapper .calculator-form { max-width: 800px; margin: 0 auto; }
.ha-calculator-wrapper .form-section { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #f0f0f0; }
.ha-calculator-wrapper .form-section:last-child { border-bottom: none; }
.ha-calculator-wrapper .form-section h2 { color: #2c3e50; font-size: 1.8rem; margin-bottom: 25px; font-weight: 600; }
.ha-calculator-wrapper .form-group { margin-bottom: 20px; }
.ha-calculator-wrapper .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #555; }
.ha-calculator-wrapper .form-group input, .ha-calculator-wrapper .form-group select { width: 100%; padding: 12px 16px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 16px; transition: all 0.3s ease; }
.ha-calculator-wrapper .form-group input:focus, .ha-calculator-wrapper .form-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }

/* Eyesore categories */
.ha-calculator-wrapper .eyesore-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 20px; }
.ha-calculator-wrapper .category-group { background: #f8f9fa; padding: 25px; border-radius: 15px; border: 1px solid #e9ecef; }
.ha-calculator-wrapper .category-group h3 { color: #495057; margin-bottom: 15px; font-size: 1.1rem; font-weight: 600; }
.ha-calculator-wrapper .checkbox-group { display: flex; flex-direction: column; gap: 12px; }
.ha-calculator-wrapper .checkbox-group label { display: flex; align-items: center; cursor: pointer; font-size: 0.95rem; color: #555; }
.ha-calculator-wrapper .checkbox-group input[type="checkbox"] { width: auto; margin-right: 12px; transform: scale(1.2); accent-color: #667eea; }

/* Buttons */
.ha-calculator-wrapper .calculate-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 40px; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3); }
.ha-calculator-wrapper .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); }
.ha-calculator-wrapper .form-actions { text-align: center; margin-top: 40px; }

/* Results page */
.ha-calculator-wrapper .results-summary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 20px; margin-bottom: 40px; text-align: center; }
.ha-calculator-wrapper .cost-overview h2 { font-size: 1.5rem; margin-bottom: 20px; opacity: 0.9; }
.ha-calculator-wrapper .cost-range { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
.ha-calculator-wrapper .cost-separator { margin: 0 15px; opacity: 0.7; }
.ha-calculator-wrapper .cost-note { opacity: 0.8; font-size: 0.9rem; }
.ha-calculator-wrapper .project-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
.ha-calculator-wrapper .detail-item { background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; }
.ha-calculator-wrapper .detail-label { display: block; font-size: 0.9rem; opacity: 0.8; margin-bottom: 5px; }
.ha-calculator-wrapper .detail-value { font-size: 1.1rem; font-weight: 600; }

.ha-calculator-wrapper .solutions-breakdown, .ha-calculator-wrapper .cost-breakdown, .ha-calculator-wrapper .recommendations, .ha-calculator-wrapper .next-steps { margin-bottom: 40px; }
.ha-calculator-wrapper .solutions-breakdown h2, .ha-calculator-wrapper .cost-breakdown h2, .ha-calculator-wrapper .recommendations h2, .ha-calculator-wrapper .next-steps h2 { color: #2c3e50; margin-bottom: 25px; font-size: 1.8rem; }
.ha-calculator-wrapper .solution-item, .ha-calculator-wrapper .breakdown-item { background: #f8f9fa; padding: 20px; border-radius: 15px; margin-bottom: 15px; border-left: 4px solid #667eea; }
.ha-calculator-wrapper .solution-item h3, .ha-calculator-wrapper .breakdown-item h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.2rem; }
.ha-calculator-wrapper .breakdown-item p { color: #666; margin-bottom: 10px; }
.ha-calculator-wrapper .solution-cost, .ha-calculator-wrapper .breakdown-cost { font-weight: 600; color: #667eea; font-size: 1.1rem; }
.ha-calculator-wrapper .tips-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.ha-calculator-wrapper .tip-item { background: #e8f4f8; padding: 25px; border-radius: 15px; border-top: 4px solid #17a2b8; }
.ha-calculator-wrapper .tip-item h3 { color: #2c3e50; margin-bottom: 12px; }
.ha-calculator-wrapper .tip-item p { color: #666; font-size: 0.95rem; }
.ha-calculator-wrapper .step-timeline { display: flex; flex-direction: column; gap: 20px; }
.ha-calculator-wrapper .step-item { display: flex; align-items: flex-start; gap: 20px; background: #f8f9fa; padding: 20px; border-radius: 15px; }
.ha-calculator-wrapper .step-number { background: #667eea; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.ha-calculator-wrapper .step-content h3 { color: #2c3e50; margin-bottom: 8px; }
.ha-calculator-wrapper .step-content p { color: #666; font-size: 0.95rem; }
.ha-calculator-wrapper .actions { text-align: center; margin-top: 40px; }
.ha-calculator-wrapper .btn-primary, .ha-calculator-wrapper .btn-secondary { padding: 12px 30px; border: none; border-radius: 50px; font-size: 1rem; font-weight: 600; cursor: pointer; margin: 0 10px; transition: all 0.3s ease; }
.ha-calculator-wrapper .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3); }
.ha-calculator-wrapper .btn-secondary { background: #f8f9fa; color: #555; border: 2px solid #e9ecef; }
.ha-calculator-wrapper .footer { text-align: center; color: #666; padding: 20px; font-size: 0.9rem; }

/* Responsive */
@media (max-width: 768px) {
    .ha-calculator-wrapper .header h1 { font-size: 2rem; }
    .ha-calculator-wrapper .main-content { padding: 20px; }
    .ha-calculator-wrapper .eyesore-categories, .ha-calculator-wrapper .project-details, .ha-calculator-wrapper .tips-container { grid-template-columns: 1fr; }
    .ha-calculator-wrapper .cost-range { font-size: 2.5rem; }
    .ha-calculator-wrapper .btn-primary, .ha-calculator-wrapper .btn-secondary { width: 100%; margin: 5px 0; }
}