.mfc-afinder{
--mfc-afinder-ink:#17324d;
--mfc-afinder-muted:#56708b;
--mfc-afinder-line:#d9e6f2;
--mfc-afinder-soft:#f4f8fc;
--mfc-afinder-accent:#18864d;
margin:24px 0;
padding:22px;
border:1px solid var(--mfc-afinder-line);
border-radius:24px;
background:#fff;
color:var(--mfc-afinder-ink);
box-shadow:0 20px 48px rgba(23,50,77,.08);
}
.mfc-afinder__intro{
margin-bottom:18px;
}
.mfc-afinder__title{
margin:0 0 8px;
font-size:clamp(28px,5vw,42px);
line-height:1.02;
letter-spacing:-.03em;
}
.mfc-afinder__text{
margin:0;
max-width:62ch;
color:var(--mfc-afinder-muted);
font-size:16px;
line-height:1.6;
}
.mfc-afinder__controls{
margin-bottom:18px;
padding:16px;
border:1px solid var(--mfc-afinder-line);
border-radius:18px;
background:var(--mfc-afinder-soft);
}
.mfc-afinder__grid{
display:grid;
grid-template-columns:1fr;
gap:12px;
}
.mfc-afinder__field{
display:flex;
flex-direction:column;
gap:6px;
font-size:13px;
font-weight:700;
}
.mfc-afinder__select{
min-height:44px;
padding:10px 12px;
border:1px solid #ccdae8;
border-radius:12px;
background:#fff;
color:var(--mfc-afinder-ink);
font-size:15px;
}
.mfc-afinder__actions{
display:flex;
flex-direction:column;
gap:10px;
margin-top:14px;
}
.mfc-afinder__reset{
align-self:flex-start;
min-height:42px;
padding:0 14px;
border:1px solid #ccdae8;
border-radius:12px;
background:#fff;
color:var(--mfc-afinder-ink);
font-size:14px;
font-weight:800;
cursor:pointer;
}
.mfc-afinder__reset:hover,
.mfc-afinder__reset:focus,
.mfc-afinder__reset:active,
.mfc-afinder__reset:focus-visible{
background:#17324d;
border-color:#17324d;
color:#fff;
}
.mfc-afinder__summary{
color:var(--mfc-afinder-muted);
font-size:14px;
font-weight:700;
}
.mfc-afinder__more{
display:flex;
justify-content:center;
margin-top:18px;
}
.mfc-afinder__load-more{
min-height:46px;
padding:0 18px;
border:1px solid #cddbea;
border-radius:14px;
background:#fff;
color:var(--mfc-afinder-ink);
font-size:14px;
font-weight:800;
cursor:pointer;
box-shadow:0 8px 18px rgba(23,50,77,.06);
}
.mfc-afinder__load-more:hover,
.mfc-afinder__load-more:focus,
.mfc-afinder__load-more:active,
.mfc-afinder__load-more:focus-visible{
background:#17324d;
border-color:#17324d;
color:#fff;
}
.mfc-afinder__feedback{
margin:0 0 16px;
padding:14px 16px;
border-radius:14px;
background:#fff8e7;
color:#7b5a14;
font-size:14px;
line-height:1.5;
}
.mfc-afinder__results{
display:grid;
grid-template-columns:1fr;
gap:16px;
}
.mfc-afinder__card{
position:relative;
padding:16px;
border:1px solid var(--mfc-afinder-line);
border-radius:18px;
background:#fff;
box-shadow:0 10px 24px rgba(23,50,77,.05);
}
.mfc-afinder__card-badge{
display:inline-flex;
align-items:center;
min-height:28px;
margin-bottom:12px;
padding:0 10px;
border-radius:999px;
background:#17324d;
color:#fff;
font-size:12px;
font-weight:800;
letter-spacing:.02em;
}
.mfc-afinder__card-top{
display:flex;
gap:12px;
align-items:flex-start;
margin-bottom:14px;
}
.mfc-afinder__logo{
display:block;
width:62px;
height:62px;
border-radius:14px;
object-fit:cover;
object-position:center;
background:#fff;
border:1px solid var(--mfc-afinder-line);
}
.mfc-afinder__logo--placeholder{
background:var(--mfc-afinder-soft);
}
.mfc-afinder__head{
min-width:0;
flex:1;
}
.mfc-afinder__title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.mfc-afinder__card-title{
margin:0;
font-size:22px;
line-height:1.08;
}
.mfc-afinder__rating{
color:var(--mfc-afinder-accent);
flex-shrink:0;
font-size:15px;
font-weight:800;
white-space:nowrap;
}
.mfc-afinder__decision{
margin:8px 0 0;
color:#18324a;
font-size:15px;
line-height:1.45;
font-weight:700;
}
.mfc-afinder__matched{
margin-top:10px;
}
.mfc-afinder__matched-label,
.mfc-afinder__section-label,
.mfc-afinder__bestfor-label{
display:block;
margin-bottom:6px;
color:var(--mfc-afinder-muted);
font-size:12px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.mfc-afinder__matched-list{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.mfc-afinder__matched-chip{
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:#edf5ff;
color:#19466f;
font-size:12px;
font-weight:800;
}
.mfc-afinder__bestfor{
margin-bottom:14px;
padding:12px 14px;
border-radius:14px;
background:#eef8f1;
}
.mfc-afinder__bestfor strong{
display:block;
color:#1a573d;
font-size:15px;
line-height:1.4;
}
.mfc-afinder__support{
margin-bottom:14px;
padding:14px;
border:1px solid var(--mfc-afinder-line);
border-radius:14px;
background:var(--mfc-afinder-soft);
}
.mfc-afinder__support-head{
margin-bottom:10px;
}
.mfc-afinder__support-head strong{
display:block;
color:#17324d;
font-size:15px;
line-height:1.4;
}
.mfc-afinder__device-row{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.mfc-afinder__support-pill{
display:inline-flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 12px;
border-radius:12px;
font-size:12px;
font-weight:800;
}
.mfc-afinder__support-key{
color:inherit;
opacity:.8;
}
.mfc-afinder__support-pill strong{
color:inherit;
font-size:12px;
}
.mfc-afinder__support-pill.is-yes{
background:#e9f7ef;
color:#176b44;
}
.mfc-afinder__support-pill.is-no{
background:#fff;
color:#5c728c;
border:1px solid #d7e2ec;
}
.mfc-afinder__meta-list{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-bottom:14px;
}
.mfc-afinder__meta-list div{
display:grid;
grid-template-columns:84px 1fr;
gap:12px;
align-items:start;
padding:10px 0;
border-bottom:1px solid #eef3f7;
}
.mfc-afinder__meta-list div:last-child{
border-bottom:none;
padding-bottom:0;
}
.mfc-afinder__meta-list span{
color:var(--mfc-afinder-muted);
font-size:13px;
font-weight:700;
}
.mfc-afinder__meta-list strong{
font-size:14px;
line-height:1.45;
}
.mfc-afinder__watchout{
margin-bottom:14px;
padding:12px 14px;
border-radius:14px;
background:#fff5eb;
}
.mfc-afinder__watchout strong{
display:block;
color:#7a4b12;
font-size:14px;
line-height:1.45;
}
.mfc-afinder__actions-row{
display:flex;
flex-direction:column;
gap:10px;
}
.mfc-afinder__btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 16px;
border:1px solid transparent;
border-radius:999px;
font-family:var(--rr-font,"PT Serif",Georgia,"Times New Roman",serif);
font-size:14px;
font-weight:800;
line-height:1.2;
text-decoration:none;
transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.mfc-afinder__btn:focus-visible{
outline:3px solid var(--rr-focus,#d8aa13);
outline-offset:3px;
}
.mfc-afinder__btn--primary{
background:var(--rr-action,#08754f);
border-color:var(--rr-action,#08754f);
color:#fff;
box-shadow:var(--rr-action-shadow,0 4px 10px rgba(8,117,79,.15));
}
.mfc-afinder__btn--primary:hover{
background:var(--rr-action-hover,#066744);
border-color:var(--rr-action-hover,#066744);
color:#fff;
}
.mfc-afinder__btn--secondary{
border-color:var(--rr-secondary-border,#bfd0df);
background:var(--rr-secondary-bg,#f1f6fa);
color:var(--rr-secondary-ink,#17324d);
}
.mfc-afinder__btn--secondary:hover{
border-color:#a9bfd2;
background:var(--rr-secondary-bg-hover,#e7eff6);
color:#0b2438;
}
.mfc-afinder-editor__title{
margin:0 0 6px;
}
.mfc-afinder-editor__intro{
margin:0 0 12px;
}
.mfc-afinder-editor__preview{
padding:14px 16px;
border:1px dashed var(--mfc-afinder-line);
border-radius:14px;
background:var(--mfc-afinder-soft);
}
@media (min-width: 680px){
.mfc-afinder__actions-row{
flex-direction:row;
align-items:stretch;
}
.mfc-afinder__actions-row .mfc-afinder__btn{
flex:1 1 0;
}
}
@media (min-width:782px){
.mfc-afinder__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.mfc-afinder__actions{
flex-direction:row;
align-items:center;
justify-content:space-between;
}
}
@media (min-width:1080px){
.mfc-afinder__grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.mfc-afinder__results{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}