@keyframes smp-spin { to { transform: rotate(360deg); } }
.smp-pf-wrap {
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #1a1a2e;
} .smp-pf-alert {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
border-radius: 8px;
padding: 12px 16px;
font-size: 0.88rem;
margin-bottom: 20px;
line-height: 1.5;
}
.smp-pf-alert::before {
content: '⚠ ';
} .smp-pf-row-2col {
display: flex;
gap: 14px;
margin-bottom: 0;
}
.smp-pf-row-2col .smp-pf-field {
flex: 1;
} .smp-pf-field {
margin-bottom: 16px;
}
.smp-pf-label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 5px;
}
.smp-pf-label span { color: #ef4444; }
.smp-pf-input {
display: block;
width: 100%;
height: 46px;
padding: 0 14px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
color: #111827;
background: #f9fafb;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.smp-pf-input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
background: #fff;
}
.smp-pf-input--amount {
font-size: 1.05rem;
font-weight: 600;
} .smp-pf-input[type="number"]::-webkit-inner-spin-button,
.smp-pf-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.smp-pf-input[type="number"] { -moz-appearance: textfield; } .smp-pf-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 15px 20px;
margin-top: 8px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 9px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 8px rgba(37,99,235,0.3);
transition: background 0.15s, box-shadow 0.15s, transform 0.1s, opacity 0.15s;
letter-spacing: 0.01em;
}
.smp-pf-btn:hover:not(:disabled) {
background: #1d4ed8;
box-shadow: 0 4px 14px rgba(37,99,235,0.4);
transform: translateY(-1px);
}
.smp-pf-btn:active:not(:disabled) { transform: translateY(0); }
.smp-pf-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
} .smp-pf-note {
font-size: 0.76rem;
color: #9ca3af;
text-align: center;
margin: 14px 0 0;
line-height: 1.5;
} .smp-pf-cards {
text-align: center;
margin: 10px 0 0;
}
.smp-pf-cards-img {
max-height: 32px;
width: auto;
opacity: 0.75;
} @media (max-width: 480px) {
.smp-pf-row-2col {
flex-direction: column;
gap: 0;
}
}