.cfpro-fp [hidden] {
display: none !important;
}
.cfpro-fp {
margin-top: 8px;
padding: 8px 10px;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 10px;
background: rgba(15, 23, 42, 0.04);
font-family: inherit;
}
.cfpro-fp-loading {
padding: 8px 0;
font-size: 0.8rem;
color: #64748b;
text-align: center;
animation: cfpro-fp-pulse 1.4s ease-in-out infinite;
}
@keyframes cfpro-fp-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.cfpro-fp-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 5px;
text-align: center;
}
.cfpro-fp-buttons {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
@media (min-width: 480px) {
.cfpro-fp-buttons {
grid-template-columns: 1fr 1fr;
}
}
.cfpro-fp-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 6px 10px;
border: 2px solid rgba(215, 25, 32, 0.45);
border-radius: 8px;
background: #fff;
color: #0f172a;
font-size: 0.84rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
word-break: break-word;
overflow-wrap: anywhere;
}
.cfpro-fp-btn:hover:not(:disabled),
.cfpro-fp-btn:focus-visible {
border-color: #d71920;
background: rgba(215, 25, 32, 0.08);
outline: none;
}
.cfpro-fp-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.35);
}
.cfpro-fp-btn:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.cfpro-fp-busy .cfpro-fp-btn {
opacity: 0.55;
}
.cfpro-fp-results {
display: flex;
flex-direction: column;
gap: 5px;
}
.cfpro-fp-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas:
"name badge pct"
"track track track";
column-gap: 8px;
align-items: center;
}
.cfpro-fp-name {
grid-area: name;
font-weight: 600;
font-size: 0.84rem;
color: #0f172a;
overflow-wrap: anywhere;
}
.cfpro-fp-pct {
grid-area: pct;
font-weight: 700;
font-size: 0.84rem;
color: #0f172a;
}
.cfpro-fp-badge {
grid-area: badge;
display: inline-block;
margin-top: 1px;
padding: 1px 7px;
border-radius: 999px;
background: #d71920;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
width: fit-content;
}
.cfpro-fp-track {
grid-area: track;
display: block;
height: 5px;
margin-top: 3px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.3);
overflow: hidden;
}
.cfpro-fp-fill {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: #d71920;
transition: width 0.4s ease;
}
.cfpro-fp-selected .cfpro-fp-fill {
background: #d71920;
}
.cfpro-fp-row:not(.cfpro-fp-selected) .cfpro-fp-fill {
background: #94a3b8;
}
.cfpro-fp-count {
font-size: 0.72rem;
color: #64748b;
text-align: center;
}
.cfpro-fp-error {
margin-top: 6px;
font-size: 0.78rem;
font-weight: 600;
color: #b91c1c;
text-align: center;
}
.cfpro-fp-error:empty {
margin-top: 0;
}
@media (max-width: 480px) {
.cfpro-fp {
padding: 7px 9px;
}
.cfpro-fp-title {
margin-bottom: 4px;
}
.cfpro-fp-results {
gap: 4px;
}
.cfpro-fp-row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"name pct"
"badge badge"
"track track";
column-gap: 8px;
row-gap: 3px;
}
.cfpro-fp-name {
min-width: 0;
line-height: 1.2;
align-self: center;
}
.cfpro-fp-pct {
justify-self: end;
align-self: center;
white-space: nowrap;
text-align: right;
}
.cfpro-fp-badge {
justify-self: start;
align-self: center;
margin: 0;
margin-top: 1px;
}
.cfpro-fp-track {
width: 100%;
margin-top: 2px;
}
.cfpro-fp-count {
margin-top: 3px;
line-height: 1.2;
}
}