/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Main container */
.solar-calculator-container {
    max-width: 1000px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Selected appliances list */
.selected-appliances-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    border: 1px solid #ddd;
}

.selected-appliances-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
}

.selected-appliances-list {
    margin: 0;
    padding: 0;
}

.selected-appliance {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.selected-appliance:last-child {
    border-bottom: none;
}

.selected-appliance.total {
    font-weight: bold;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid #ddd;
}

/* Form elements */
.solar-calculator-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-section {
    margin-bottom: 30px;
}

.form-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.appliance-rows {
    margin-bottom: 20px;
}

.appliance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.appliance-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-field {
    flex: 1;
    margin-right: 15px;
}

.form-field:last-child {
    margin-right: 0;
}

.form-field.small {
    flex: 0 0 120px;
}

.form-field input,
.form-field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-field input:focus,
.form-field select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-field input[readonly] {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

.delete-appliance-row {
    background: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.delete-appliance-row:hover {
    background: #d32f2f;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    display: inline-block;
}

.button:hover {
    background-color: #45a049;
}

.button.secondary {
    background-color: #2196F3;
}

.button.secondary:hover {
    background-color: #0b7dda;
}

.form-actions {
    margin-top: 20px;
    text-align: center;
}

/* Results container */
.calculation-results {
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    display: none;
}

.results-header {
    text-align: center;
    margin-bottom: 30px;
}

.results-header h3 {
    margin-top: 0;
    font-size: 24px;
    color: #333;
}

.system-requirements {
    margin-bottom: 30px;
}

.system-requirements h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.requirements-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.requirement-item {
    flex: 1 0 200px;
    max-width: 250px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #ddd;
}

.req-icon {
    margin-bottom: 15px;
}

.req-icon i {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.req-inverter {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60" stroke="%234CAF50" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" /><line x1="8" y1="11" x2="16" y2="11" /><line x1="8" y1="8" x2="10" y2="8" /><rect x="8" y="14" width="8" height="3" /></svg>');
}

.req-solar {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60" stroke="%232196F3" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18" /><path d="M5 8h14" /><path d="M5 16h14" /><path d="M3 12h18" /></svg>');
}

.req-battery {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60" stroke="%23FF9800" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="7" width="12" height="14" rx="2" /><line x1="10" y1="4" x2="14" y2="4" /><line x1="12" y1="14" x2="12" y2="17" /><line x1="10.5" y1="15.5" x2="13.5" y2="15.5" /></svg>');
}

.req-controller {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60" stroke="%239C27B0" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 8v4l2 2" /></svg>');
}

.req-details h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.req-details p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* Recommended Products */
.recommended-products {
    margin-bottom: 30px;
}

.recommended-products h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.product-item {
    flex: 1 0 250px;
    max-width: 300px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.product-item h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.product-item p {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}

.product-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #2196F3;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
}

.product-link:hover {
    background-color: #0b7dda;
}

/* Results Footer */
.results-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .solar-calculator-container {
        padding: 0 15px;
    }
    
    .appliance-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-field {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .form-field.small {
        flex: 1 0 auto;
    }
    
    .delete-appliance-row {
        align-self: flex-start;
    }
    
    .requirements-grid,
    .products-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .requirement-item,
    .product-item {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
}