/* ARO Scientific calculator styling - compatible with Magento 2 / Smartwave Porto */
[class*="aro-"][class*="calculator"], .aro-calculator {
    max-width: 980px;
    margin: 20px auto 50px;
    padding: 28px;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[class*="aro-"][class*="calculator"] h1, .aro-calculator h1 {
    margin: 0 0 12px;
    color: #002e6d;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 600;
}
[class*="aro-"][class*="calculator"] > p:first-of-type, .aro-calculator > p:first-of-type {
    margin-bottom: 24px;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}
[class*="aro-"][class*="calculator"] fieldset, .aro-calculator fieldset {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}
[class*="aro-"][class*="calculator"] legend, .aro-calculator legend {
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #00b2e3;
    color: #002e6d;
    font-size: 18px;
    font-weight: 600;
}
[class*="aro-"][class*="calculator"] .field, .aro-calculator .field {
    margin-bottom: 16px;
}
[class*="aro-"][class*="calculator"] label, .aro-calculator label {
    display: block;
    margin-bottom: 7px;
    color: #263746;
    font-weight: 600;
}
[class*="aro-"][class*="calculator"] input[type="number"],
[class*="aro-"][class*="calculator"] input[type="text"],
[class*="aro-"][class*="calculator"] select,
.aro-calculator input[type="number"], .aro-calculator input[type="text"], .aro-calculator select {
    width: 100%;
    max-width: 460px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #c8d2dc;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
}
[class*="aro-"][class*="calculator"] input:focus,
[class*="aro-"][class*="calculator"] select:focus,
.aro-calculator input:focus, .aro-calculator select:focus {
    border-color: #00b2e3;
    box-shadow: 0 0 0 2px rgba(0,178,227,.12);
    outline: none;
}
[class*="aro-"][class*="calculator"] .action.primary,
[class*="aro-"][class*="calculator"] button[type="submit"],
.aro-calculator .action.primary, .aro-calculator button[type="submit"] {
    min-height: 44px;
    padding: 10px 24px;
    border: 1px solid #002e6d;
    border-radius: 3px;
    background: #002e6d;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
[class*="aro-"][class*="calculator"] .action.primary:hover,
[class*="aro-"][class*="calculator"] button[type="submit"]:hover,
.aro-calculator .action.primary:hover, .aro-calculator button[type="submit"]:hover {
    border-color: #00b2e3;
    background: #00b2e3;
}
[class*="aro-"][class*="calculator"] .message.info, .aro-calculator .message.info,
[id^="aro-"][id$="-result"] {
    margin-top: 22px !important;
    padding: 16px 18px;
    border-left: 4px solid #00b2e3;
    background: #f4fbfd;
    color: #263746;
}
[class*="aro-"][class*="calculator"] .note, .aro-calculator .note {
    margin-top: 22px;
    padding: 13px 16px;
    border-left: 3px solid #d5dde5;
    background: #f8f9fa;
    color: #666;
}
.aro-astm-calculator {
    max-width: 980px !important;
    margin: 20px auto 50px !important;
    padding: 28px !important;
    border: 1px solid #dfe5ea !important;
    border-radius: 4px !important;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.aro-astm-calculator h1 { color:#002e6d; }
.aro-astm-calculator form { gap:18px !important; }
.aro-astm-calculator input { min-height:44px; border:1px solid #c8d2dc; border-radius:3px; }
.aro-astm-calculator button { background:#002e6d !important; min-height:44px; border-radius:3px !important; }
.aro-astm-calculator button:hover { background:#00b2e3 !important; }
@media (max-width: 767px) {
    [class*="aro-"][class*="calculator"], .aro-calculator, .aro-astm-calculator {
        margin: 10px 0 30px !important;
        padding: 18px !important;
    }
    [class*="aro-"][class*="calculator"] h1, .aro-calculator h1, .aro-astm-calculator h1 { font-size: 24px; }
    [class*="aro-"][class*="calculator"] input[type="number"],
    [class*="aro-"][class*="calculator"] input[type="text"],
    [class*="aro-"][class*="calculator"] select,
    .aro-calculator input, .aro-calculator select { max-width: none; }
    .aro-astm-calculator form { grid-template-columns: 1fr !important; }
    .aro-astm-calculator form > div { grid-column: auto !important; }
}

