@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
.mv-calc {
--mv-text: #041146;
--mv-accent: #3B75E1;
--mv-radius: 6px;
background: transparent;
color: var(--mv-text);
font-family: 'DM Sans', sans-serif;
max-width: 560px;
margin: 0 auto;
position: relative;
}
.mv-calc .mv-calc-sticky {
position: sticky;
top: 1rem;
z-index: 2;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(4,17,70,0.12);
border-radius: var(--mv-radius);
padding: 1rem 1.25rem;
margin-bottom: 1rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.mv-calc .mv-calc-hind-label {
font-weight: 600;
color: var(--mv-text);
margin-bottom: 0.25rem;
}
.mv-calc .mv-calc-hind-service {
font-size: 0.9em;
color: var(--mv-accent);
margin-bottom: 0.35rem;
min-height: 1.1em;
}
.mv-calc .mv-calc-hind-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--mv-text);
margin-bottom: 0.35rem;
}
.mv-calc .mv-calc-hind-price.mv-pulse {
animation: mv-pulse 0.4s ease-out;
}
@keyframes mv-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); opacity: 0.9; }
100% { transform: scale(1); opacity: 1; }
}
.mv-calc .mv-calc-hind-details {
font-size: 0.85em;
color: var(--mv-text);
opacity: 0.85;
margin-bottom: 0.75rem;
min-height: 1.2em;
}
.mv-calc .mv-calc-btn {
display: inline-block;
padding: 0.6rem 1.2rem;
background: var(--mv-accent);
color: #fff;
text-decoration: none;
border-radius: var(--mv-radius);
font-weight: 600;
border: none;
cursor: pointer;
font-size: 1rem;
transition: opacity 0.2s, transform 0.15s;
}
.mv-calc .mv-calc-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.mv-calc .mv-calc-btn.mv-calc-btn-hidden {
display: none;
}
.mv-calc .mv-calc-accordion {
border: 1px solid rgba(4,17,70,0.12);
border-radius: var(--mv-radius);
overflow: hidden;
}
.mv-calc .mv-calc-item {
border-bottom: 1px solid rgba(4,17,70,0.08);
}
.mv-calc .mv-calc-item:last-child {
border-bottom: none;
}
.mv-calc .mv-calc-header {
width: 100%;
text-align: left;
padding: 1rem 1.25rem;
background: transparent;
border: none;
color: var(--mv-text);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.2s, color 0.2s;
}
.mv-calc .mv-calc-header:hover {
background: rgba(59,117,225,0.08);
color: var(--mv-accent);
}
.mv-calc .mv-calc-header::after {
content: '';
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.25s ease;
}
.mv-calc .mv-calc-header[aria-expanded="true"]::after {
transform: rotate(-135deg);
}
.mv-calc .mv-calc-panel {
overflow: hidden;
max-height: 800px;
transition: max-height 0.35s ease-out;
padding: 0 1.25rem 1.25rem;
box-sizing: border-box;
}
.mv-calc .mv-calc-panel-closed {
max-height: 0;
padding: 0;
}
.mv-calc .mv-calc-field {
margin-bottom: 1rem;
}
.mv-calc .mv-calc-field:last-child {
margin-bottom: 0;
}
.mv-calc .mv-calc-label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
color: var(--mv-text);
}
.mv-calc .mv-calc-field label {
display: inline-flex;
align-items: center;
margin-right: 1rem;
margin-bottom: 0.35rem;
cursor: pointer;
}
.mv-calc .mv-calc-field input[type="radio"] {
margin-right: 0.4rem;
accent-color: var(--mv-accent);
}
.mv-calc .mv-calc-field input[type="number"] {
width: 6em;
padding: 0.4rem 0.5rem;
border: 1px solid rgba(4,17,70,0.2);
border-radius: var(--mv-radius);
color: var(--mv-text);
font-size: 1rem;
}
.mv-calc .mv-calc-field select {
min-width: 12rem;
padding: 0.4rem 0.5rem;
border: 1px solid rgba(4,17,70,0.2);
border-radius: var(--mv-radius);
color: var(--mv-text);
font-size: 1rem;
font-family: inherit;
background: #fff;
}
.mv-calc .mv-calc-field input[type="range"] {
width: 100%;
max-width: 240px;
margin-right: 0.5rem;
accent-color: var(--mv-accent);
}
.mv-calc .mv-calc-speed-value {
display: inline-block;
min-width: 6em;
font-size: 0.95em;
}