.rp-ku-calculator,
.rp-ku-calculator * {
box-sizing: border-box;
}
.rp-ku-calculator {
--rp-ku-accent: #26A1DA;
--rp-ku-accent-hover: #158CC4;
--rp-ku-caption: #3C3C3B;
--rp-ku-border: #555554;
--rp-ku-placeholder: #B8B8B8;
--rp-ku-success: #157347;
--rp-ku-error: #B42318;
width: 100%;
color: var(--rp-ku-caption);
font-family: "Montserrat", sans-serif;
}
.rp-ku-form,
.rp-ku-form button,
.rp-ku-form input,
.rp-ku-form textarea {
font-family: "Montserrat", sans-serif;
}
.rp-ku-form {
width: 100%;
}
.rp-ku-field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
.rp-ku-field label {
margin: 0;
color: var(--rp-ku-caption);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.rp-ku-field input,
.rp-ku-field textarea {
width: 100%;
min-height: 52px;
padding: 13px 15px;
color: var(--rp-ku-caption);
background: transparent;
border: 1.5px solid var(--rp-ku-border);
border-radius: 5px;
outline: none;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
appearance: none;
-webkit-appearance: none;
transition:
border-color 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease;
}
.rp-ku-field textarea {
min-height: 130px;
resize: vertical;
}
.rp-ku-field input::placeholder,
.rp-ku-field textarea::placeholder {
color: var(--rp-ku-placeholder);
opacity: 1;
}
.rp-ku-field input:focus,
.rp-ku-field textarea:focus {
border-color: var(--rp-ku-accent);
box-shadow: 0 0 0 3px rgba(38, 161, 218, 0.12);
}
.rp-ku-field input:hover,
.rp-ku-field textarea:hover {
border-color: #3C3C3B;
}
.rp-ku-field input:focus:hover,
.rp-ku-field textarea:focus:hover {
border-color: var(--rp-ku-accent);
}
.rp-ku-result {
display: grid;
grid-template-columns: 1fr auto;
gap: 5px 18px;
align-items: center;
margin: 4px 0 20px;
padding: 18px 0;
border-top: 1px solid rgba(60, 60, 59, 0.18);
border-bottom: 1px solid rgba(60, 60, 59, 0.18);
}
.rp-ku-result-label {
color: var(--rp-ku-caption);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.rp-ku-result-value {
grid-column: 2;
grid-row: 1 / span 2;
color: var(--rp-ku-accent);
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition: opacity 180ms ease, transform 180ms ease;
}
.rp-ku-result-unit {
color: var(--rp-ku-caption);
font-size: 13px;
font-weight: 400;
}
.rp-ku-toggle,
.rp-ku-submit {
width: 100%;
min-height: 54px;
padding: 14px 18px;
border-radius: 5px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition:
color 180ms ease,
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
} .rp-ku-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
color: var(--rp-ku-caption);
background: transparent;
border: 1.5px solid var(--rp-ku-border);
text-align: left;
}
.rp-ku-toggle:hover,
.rp-ku-toggle:focus-visible,
.rp-ku-toggle.is-open {
color: var(--rp-ku-accent);
border-color: var(--rp-ku-accent);
background: rgba(38, 161, 218, 0.05);
box-shadow: 0 7px 20px rgba(38, 161, 218, 0.10);
}
.rp-ku-toggle:active {
transform: translateY(1px);
}
.rp-ku-toggle-icon {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
}
.rp-ku-toggle-icon::before,
.rp-ku-toggle-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 15px;
height: 1.5px;
border-radius: 99px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.rp-ku-toggle-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.rp-ku-toggle.is-open .rp-ku-toggle-icon::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.rp-ku-contact-panel {
overflow: hidden;
}
.rp-ku-panel-inner {
padding-top: 28px;
}
.rp-ku-panel-inner h3 {
margin: 0 0 18px;
color: var(--rp-ku-caption);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
.rp-ku-row {
display: grid;
gap: 16px;
}
.rp-ku-row-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .rp-ku-submit {
color: #FFFFFF;
background: var(--rp-ku-accent);
border: 1.5px solid var(--rp-ku-accent);
box-shadow: 0 8px 20px rgba(38, 161, 218, 0.18);
}
.rp-ku-submit:hover,
.rp-ku-submit:focus-visible {
background: var(--rp-ku-accent-hover);
border-color: var(--rp-ku-accent-hover);
box-shadow: 0 12px 28px rgba(38, 161, 218, 0.30);
transform: translateY(-2px);
}
.rp-ku-submit:active {
box-shadow: 0 6px 14px rgba(38, 161, 218, 0.22);
transform: translateY(0);
}
.rp-ku-submit:disabled {
opacity: 0.65;
cursor: wait;
transform: none;
}
.rp-ku-message {
min-height: 22px;
margin-top: 14px;
font-size: 14px;
font-weight: 600;
}
.rp-ku-message.is-success {
color: var(--rp-ku-success);
}
.rp-ku-message.is-error {
color: var(--rp-ku-error);
}
.rp-ku-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
@media (max-width: 767px) {
.rp-ku-row-2 {
grid-template-columns: 1fr;
gap: 0;
}
.rp-ku-result {
grid-template-columns: 1fr;
}
.rp-ku-result-value {
grid-column: 1;
grid-row: auto;
margin-top: 7px;
}
}