.iv-card-price {
--iv-card-price-text: #222222;
--iv-card-price-muted: #667085;
--iv-card-price-muted-strong: #475467;
--iv-card-price-border: #E7E7E7;
--iv-card-price-chip-bg: #F7F7F7;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 3px 0 4px;
padding: 0;
color: var(--iv-card-price-text);
font-family:
Inter,
Arial,
sans-serif;
text-align: left;
}
.iv-card-price *,
.iv-card-price *::before,
.iv-card-price *::after {
box-sizing: border-box;
}
.iv-card-price__base {
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
}
.iv-card-price__base .ivpp4-price,
.iv-card-price__base .ivpp4-price-shortcode {
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
}
.iv-card-price__base .ivpp4-price__main {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap: 3px 5px;
width: 100%;
min-width: 0;
max-width: 100%;
color: var(--iv-card-price-text);
line-height: 1.12;
}
.iv-card-price__base .ivpp4-price__amount {
color: var(--iv-card-price-text);
font-size: 17px;
font-weight: 750;
line-height: 1.05;
letter-spacing: -0.025em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.iv-card-price__base :is(
.ivpp4-price__prefix,
.ivpp4-price__separator,
.ivpp4-price__currency,
.ivpp4-price__period
) {
color: var(--iv-card-price-muted);
font-size: 12px;
font-weight: 520;
line-height: 1.2;
white-space: nowrap;
}
.iv-card-price__base .ivpp4-price__currency {
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0.01em;
}
.iv-card-price__base .ivpp4-price__details {
display: none !important;
}
.iv-card-price__note {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
width: fit-content;
min-width: 0;
max-width: 100%;
min-height: 27px;
margin: 0;
padding:
5px
9px;
color: #505050;
background:
linear-gradient(
180deg,
#FFFFFF 0%,
var(--iv-card-price-chip-bg) 100%
);
border:
1px solid
var(--iv-card-price-border);
border-radius: 999px;
box-shadow:
0 1px 2px
rgba(16, 24, 40, 0.04);
font-size: 11.5px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.004em;
}
.iv-card-price__note-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex:
0
0
13px;
width: 13px;
height: 13px;
color: #6F6F6F;
}
.iv-card-price__note-icon svg {
display: block;
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.iv-card-price__note-text {
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.iv-card-price__maintenance {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap:
3px
6px;
width: 100%;
min-width: 0;
max-width: 100%;
color:
var(--iv-card-price-muted);
font-size: 12.5px;
line-height: 1.3;
}
.iv-card-price__maintenance-label {
min-width: 0;
color:
var(--iv-card-price-muted);
font-weight: 500;
white-space: normal;
}
.iv-card-price__maintenance-value {
color:
var(--iv-card-price-muted-strong);
font-weight: 700;
white-space: nowrap;
font-variant-numeric:
tabular-nums;
}
.iv-card-price__metrics {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap:
5px
14px;
width: 100%;
min-width: 0;
max-width: 100%;
color:
var(--iv-card-price-muted);
font-size: 12.5px;
line-height: 1.25;
}
.iv-card-price__metric {
display: inline-flex;
align-items: baseline;
gap: 3px;
max-width: 100%;
min-width: 0;
white-space: nowrap;
}
.iv-card-price__metric-value {
color:
var(--iv-card-price-muted-strong);
font-weight: 700;
font-variant-numeric:
tabular-nums;
}
.iv-card-price__metric-unit {
color:
var(--iv-card-price-muted);
font-weight: 500;
}
@supports (container-type: inline-size) {
.iv-card-price {
container-type: inline-size;
}
@container (max-width: 285px) {
.iv-card-price__base
.ivpp4-price__amount {
font-size: 16px;
}
.iv-card-price__base :is(
.ivpp4-price__prefix,
.ivpp4-price__separator,
.ivpp4-price__currency,
.ivpp4-price__period
),
.iv-card-price__maintenance,
.iv-card-price__metrics {
font-size: 11.75px;
}
.iv-card-price__note {
font-size: 11px;
}
}
}