:root { --mwcs-calc-primary:#4361ee;--mwcs-calc-primary-dark:#3a56d4;--mwcs-calc-primary-light:#e6f0ff;--mwcs-calc-success:#2ecc71;--mwcs-calc-danger:#e74c3c;--mwcs-calc-body-text:#2b2d42;--mwcs-calc-heading-text:#1e293b;--mwcs-calc-bg:#f8f9fa;--mwcs-calc-white:#ffffff;--mwcs-calc-border-clr:#e0e3e7;--mwcs-calc-border-radius:5px;--mwcs-calc-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;--mwcs-calc-width:900px;} * { box-sizing:border-box;margin:0;padding:0;} .mwcs-calculator-main-interface { box-sizing:border-box;position:relative;width:100%;padding:25px;border:1px solid var(--mwcs-calc-border-clr);border-radius:var(--mwcs-calc-border-radius);box-shadow:var(--mwcs-calc-shadow);} .mwcs-calculator-container { max-width:var(--mwcs-calc-width);margin:0 auto;padding:35px;background-color:var(--mwcs-calc-bg);} .mwcs-calculator-title { text-align:center;margin-bottom:2rem;color:var(--mwcs-calc-primary-dark);font-size:2rem;} .mwcs-calculator-section { padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--mwcs-calc-border-clr);border-radius:var(--mwcs-calc-border-radius);} .mwcs-calculator-section h3 { color:var(--mwcs-calc-primary-dark);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--mwcs-calc-primary-light);} .mwcs-input-group { margin-bottom:1rem;} .mwcs-input-group label { display:block;margin-bottom:0.5rem;font-weight:500;color:var(--mwcs-calc-body-text);} .mwcs-input-group input[type="number"], .mwcs-input-group input[type="date"], .mwcs-input-group input[type="text"], .mwcs-input-group textarea { width:100%;border:1px solid var(--mwcs-calc-border-clr);border-radius:var(--mwcs-calc-border-radius);font-size:1rem;box-sizing:border-box;color:var(--mwcs-calc-body-text);transition:border 0.3s ease;} .mwcs-input-group select { appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;min-height:50px;padding:0 15px;font-size:1rem;color:var(--mwcs-calc-body-text);box-sizing:border-box;background-color:var(--mwcs-calc-white);border:1px solid var(--mwcs-calc-border-clr);border-radius:var(--mwcs-calc-border-radius);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:15px;cursor:pointer;transition:all 0.3s ease;} .mwcs-input-group input[type="number"], .mwcs-input-group input[type="text"], .mwcs-input-group textarea { padding:23px 15px;} .mwcs-input-group input[type="date"] { padding:0 15px;min-height:50px;box-sizing:border-box;} .mwcs-input-group input[type="number"]:focus, .mwcs-input-group input[type="date"]:focus, .mwcs-input-group input[type="text"]:focus, .mwcs-input-group select:focus, .mwcs-input-group textarea:focus { border-color:var(--mwcs-calc-primary-dark);outline:none;} .mwcs-input-group textarea { min-height:100px;resize:vertical;box-sizing:border-box;color:var(--mwcs-calc-body-text);} .mwcs-calculator-radio-group, .checkbox-group { display:flex;gap:1rem;flex-wrap:wrap;} .mwcs-calculator-radio-group label, .checkbox-group label { display:flex;align-items:center;gap:0.5rem;font-weight:normal;cursor:pointer;} .mwcs-fieldset-field { border:1px solid var(--mwcs-calc-border-clr);border-radius:var(--mwcs-calc-border-radius);padding:1rem;margin-bottom:1rem;} .mwcs-fieldset-legend { padding:0 0.5rem;font-weight:500;color:var(--mwcs-calc-body-text);} #mwcs-calculator-custom-percent { margin-top:1rem;padding:1rem;background-color:var(--mwcs-calc-bg);border-radius:var(--mwcs-calc-border-radius);} .mwcs-input-group input[type="range"] { width:100%;margin:0.5rem 0;} .mwcs-calculator-actions { display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;} .mwcs-calculator-actions button { padding:12px 25px;border:none;border-radius:var(--mwcs-calc-border-radius);color:var(--mwcs-calc-white);cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-wrap:nowrap;transition:background-color 0.3s ease;} .mwcs-calculator-actions button:disabled { background-color:var(--mwcs-calc-primary-light);cursor:not-allowed;} .mwcs-calculator-actions button i { font-size:1rem;} .mwcs-calculator-reset { background-color:var(--mwcs-calc-danger) !important;} .mwcs-calculator-export-pdf { background-color:var(--mwcs-calc-success) !important;} .mwcs-loading-container { text-align:center;padding:2rem;margin:1rem 0;} .mwcs-loading-spinner { border:4px solid rgba(0, 0, 0, 0.1);border-radius:50%;border-top:4px solid var(--mwcs-calc-primary);width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 1rem;} @keyframes spin { 0% { transform:rotate(0deg);} 100% { transform:rotate(360deg);} } .mwcs-calculator-output { background-color:var(--mwcs-calc-bg);padding:2rem;border:1px solid var(--mwcs-calc-border-clr);border-radius:var(--mwcs-calc-border-radius);margin-top:2rem;} .mwcs-calculator-output h2 { color:var(--mwcs-calc-primary-dark);margin-bottom:1.5rem;text-align:center;} .mwcs-summary-cards { display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1.5rem;margin-bottom:2rem;} .mwcs-summary-card { background-color:var(--mwcs-calc-bg);padding:1.5rem;border-radius:var(--mwcs-calc-border-radius);text-align:center;box-shadow:var(--mwcs-calc-shadow);} .mwcs-summary-card h3 { color:var(--mwcs-calc-primary-dark);margin-bottom:0.5rem;font-size:1rem;} .mwcs-summary-card p { font-size:1rem;font-weight:500;color:var(--mwcs-calc-primary);} .mwcs-chart-container { margin:2rem 0;padding:1rem;background-color:var(--mwcs-calc-bg);border-radius:var(--mwcs-calc-border-radius);box-shadow:var(--mwcs-calc-shadow);} .mwcs-chart-container h3 { color:var(--mwcs-calc-primary-dark);margin-bottom:1rem;text-align:center;} .mwcs-cost-details { margin:2rem 0;} .mwcs-cost-details h3 { color:var(--mwcs-calc-primary-dark);margin-bottom:1rem;text-align:center;} #mwcs-cost-breakdown-table { width:100%;border-collapse:collapse;margin-top:1rem;background-color:var(--mwcs-calc-bg);} #mwcs-cost-breakdown-table th, #mwcs-cost-breakdown-table td { padding:0.75rem;text-align:left;border-bottom:1px solid var(--mwcs-calc-border-clr);} #mwcs-cost-breakdown-table th { background-color:var(--mwcs-calc-primary);color:var(--mwcs-calc-white);} #mwcs-cost-breakdown-table tr:nth-child(even) { background-color:#f2f2f2;} #mwcs-cost-breakdown-table tr:hover { background-color:#e9e9e9;} .mwcs-export-actions { display:flex;justify-content:start;gap:1rem;flex-wrap:wrap;margin-top:2rem;} .mwcs-export-actions button { padding:12px 25px;border:none;border-radius:var(--mwcs-calc-border-radius);color:var(--mwcs-calc-white);cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:0.5rem;transition:background-color 0.3s ease;} .mwcs-excel-btn { background-color:var(--mwcs-calc-primary) !important;} .mwcs-print-btn { background-color:var(--mwcs-calc-success) !important;} .mwcs-export-actions button i { font-size:1rem;} .mwcs-calculator-form input:invalid, .mwcs-calculator-form select:invalid { border-color:var(--mwcs-calc-danger) !important;} .mwcs-error-message { color:var(--mwcs-calc-danger) !important;font-size:0.8em;margin-top:5px;display:none;} .mwcs-error-message.show { display:block;} #mwcs-calculator-custom-percent { transition:all 0.3s ease;overflow:hidden;} #mwcs-calculator-groom-percent, #mwcs-calculator-bride-percent { appearance:none;-moz-appearance:none;-webkit-appearance:none;width:100%;height:10px;margin:15px 0;background:var(--mwcs-calc-primary-light) !important;border-radius:4px;outline:none;cursor:pointer;} #mwcs-calculator-groom-percent::-webkit-slider-thumb, #mwcs-calculator-bride-percent::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--mwcs-calc-primary) !important;border:3px solid white;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;transition:all 0.2s ease;} #mwcs-calculator-groom-percent::-moz-range-thumb, #mwcs-calculator-bride-percent::-moz-range-thumb { width:24px;height:24px;border-radius:50%;background:var(--mwcs-calc-primary) !important;border:3px solid white;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;} #mwcs-calculator-groom-percent::-ms-thumb, #mwcs-calculator-bride-percent::-ms-thumb { width:24px;height:24px;border-radius:50%;background:var(--mwcs-calc-primary) !important;border:3px solid white;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);cursor:pointer;} #mwcs-calculator-groom-percent::-moz-range-track, #mwcs-calculator-bride-percent::-moz-range-track { height:10px;background:var(--mwcs-calc-primary-light);border-radius:4px;} #mwcs-calculator-groom-percent::-ms-track, #mwcs-calculator-bride-percent::-ms-track { height:10px;background:var(--mwcs-calc-primary-light);border-radius:4px;color:transparent;} #mwcs-calculator-groom-percent:hover::-webkit-slider-thumb, #mwcs-calculator-bride-percent:hover::-webkit-slider-thumb { transform:scale(1.1);box-shadow:0 3px 6px rgba(0, 0, 0, 0.15);} #mwcs-calculator-groom-percent:focus, #mwcs-calculator-bride-percent:focus { outline:none;} #mwcs-calculator-groom-percent:focus::-webkit-slider-thumb, #mwcs-calculator-bride-percent:focus::-webkit-slider-thumb { box-shadow:0 0 0 3px rgba(67, 97, 238, 0.3);} @media (max-width:768px) { .mwcs-calculator-main-interface { padding:15px;} .mwcs-calculator-container { padding:15px;} } @media screen and (max-width:600px) { #mwcs-cost-breakdown-table { width:100%;border-collapse:collapse;} #mwcs-cost-breakdown-table thead { display:none;} #mwcs-cost-breakdown-table tr { display:block;margin-bottom:15px;border-bottom:2px solid #ddd;} #mwcs-cost-breakdown-table td { display:flex;justify-content:space-between;padding:8px;text-align:right;border-bottom:1px dotted #ddd;} #mwcs-cost-breakdown-table td::before { content:attr(data-label);font-weight:bold;text-align:left;margin-right:10px;} #mwcs-cost-breakdown-table .total-row td { justify-content:flex-end;border-bottom:none;} #mwcs-cost-breakdown-table .total-row td::before { content:"";display:none;} } @media (max-width:480px) { .mwcs-calculator-main-interface { padding:10px;} .mwcs-calculator-container { padding:10px;} .mwcs-calculator-actions { flex-direction:column;} .export-actions { flex-direction:column;} .mwcs-calculator-actions button, .export-actions button { width:100%;justify-content:center;} }