.mcf-confirm {
--mcf-accent: #de8b6a;
--mcf-accent-soft: #fbeee8;
--mcf-green: #6f8763;
--mcf-green-soft: #edf2ea;
--mcf-border: rgba(0, 0, 0, .09);
--mcf-muted: #6b6b6b;
max-width: 860px;
margin: 0 auto;
}
.mcf-confirm *,
.mcf-confirm *::before,
.mcf-confirm *::after { box-sizing: border-box; } .mcf-confirm__hero {
position: relative;
overflow: hidden;
border-radius: 14px;
padding: 30px 28px;
background: linear-gradient(135deg, var(--mcf-accent) 0%, #e9a88c 100%);
color: #fff;
box-shadow: 0 8px 24px rgba(222, 139, 106, .25);
}
.mcf-confirm__paw {
position: absolute;
right: -18px;
bottom: -26px;
width: 170px !important;
height: 170px !important;
opacity: .16;
transform: rotate(-18deg);
pointer-events: none;
}
.mcf-confirm__label {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .78em;
font-weight: 700;
opacity: .9;
}
.mcf-confirm .mcf-confirm__title {
margin: .15em 0 .2em;
color: #fff;
font-size: 2.2em;
font-weight: 800;
line-height: 1.15;
text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.mcf-confirm__text {
margin: 0;
max-width: 520px;
font-weight: 600;
opacity: .95;
}
.mcf-confirm__pill {
display: inline-flex;
align-items: center;
gap: .45em;
margin-top: 16px;
padding: 7px 14px;
border-radius: 99px;
background: rgba(255, 255, 255, .95);
color: #b0603f;
font-size: .86em;
font-weight: 600;
} .mcf-confirm .mcf-confirm__heading {
margin: 2em 0 .8em;
display: flex;
align-items: center;
gap: .5em;
}
.mcf-confirm__heading svg { color: var(--mcf-accent); } .mcf-confirm__rules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
}
.mcf-confirm__rule {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border: 1px solid var(--mcf-border);
border-radius: 10px;
background: #fff;
line-height: 1.45;
}
.mcf-confirm__icon {
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--mcf-accent-soft);
color: var(--mcf-accent);
}
.mcf-confirm__rule strong { display: block; margin-bottom: 2px; }
.mcf-confirm__rule span { color: var(--mcf-muted); } .mcf-confirm__tip {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 18px;
padding: 14px 16px;
border-radius: 10px;
background: var(--mcf-green-soft);
border: 1px solid rgba(111, 135, 99, .18);
color: #3f4d38;
line-height: 1.5;
}
.mcf-confirm__tip svg { color: var(--mcf-green); margin-top: 2px; }
.mcf-confirm__tip a { color: #3f4d38; font-weight: 700; } .mcf-confirm__actions { margin: 26px 0 0; text-align: center; }
.mcf-confirm .mcf-confirm__btn {
display: inline-block;
padding: 14px 28px;
border-radius: 10px;
background: var(--mcf-green);
color: #fff;
font-weight: 700;
text-decoration: none;
transition: filter .15s ease;
}
.mcf-confirm .mcf-confirm__btn:hover,
.mcf-confirm .mcf-confirm__btn:focus-visible { color: #fff; filter: brightness(.92); }
.mcf-confirm .mcf-confirm__btn:focus-visible { outline: 2px solid var(--mcf-green); outline-offset: 3px; }
@media (max-width: 600px) {
.mcf-confirm__hero { padding: 24px 20px; }
.mcf-confirm .mcf-confirm__title { font-size: 1.8em; }
.mcf-confirm__paw { width: 120px !important; height: 120px !important; }
.mcf-confirm__pill { border-radius: 10px; }
.mcf-confirm__rules { grid-template-columns: 1fr; }
}