.formpay-ff-wrap {
max-width: 560px;
margin-inline: auto;
direction: rtl;
text-align: right;
}
.formpay-ff-wrap,
.formpay-ff-wrap *,
.formpay-ff-wrap *::before,
.formpay-ff-wrap *::after { box-sizing: border-box; }
.formpay-ff-wrap button,
.formpay-ff-wrap input,
.formpay-ff-wrap select,
.formpay-ff-wrap textarea {
font-family: inherit;
}
.formpay-ff-form {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}
.formpay-ff-header { margin-bottom: 16px; }
.formpay-ff-description {
margin: 0;
color: #475569;
font-size: 15px;
line-height: 1.8;
}
.formpay-ff-amount-container,
.formpay-ff-fields-container,
.formpay-ff-gateways-container { margin-bottom: 20px; }
.formpay-ff-field-label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: #1e293b;
font-size: 14px;
}
.formpay-ff-required { color: #dc2626; }
.formpay-ff-helper-text {
margin: 4px 0 0;
color: #64748b;
font-size: 12.5px;
}
.formpay-ff-fixed-amount-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px 16px;
}
.formpay-ff-amount-label { font-weight: 600; color: #334155; }
.formpay-ff-amount-value {
font-weight: 800;
color: #0e7490;
font-size: 17px;
}
.formpay-ff-donation-presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.formpay-ff-preset-pill {
border: 1.5px solid #cbd5e1;
background: #fff;
color: #1e293b;
border-radius: 10px;
padding: 9px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.formpay-ff-preset-pill:hover { border-color: #0e7490; }
.formpay-ff-preset-pill.is-selected {
background: #0e7490;
border-color: #0e7490;
color: #fff;
}
.formpay-ff-form-group { margin-bottom: 14px; }
.formpay-ff-text-input,
.formpay-ff-select-input,
.formpay-ff-custom-amount-input {
width: 100%;
padding: 10px 12px;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #1e293b;
font-size: 14.5px;
line-height: 1.6;
transition: border-color .15s ease, box-shadow .15s ease;
}
.formpay-ff-text-input:focus,
.formpay-ff-select-input:focus,
.formpay-ff-custom-amount-input:focus {
border-color: #0e7490;
box-shadow: 0 0 0 2px rgba(14, 116, 144, .15);
outline: none;
}
.formpay-ff-custom-amount-wrapper { margin-top: 6px; }
.formpay-ff-input-group { position: relative; }
.formpay-ff-choice-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.formpay-ff-choice-option {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: #1e293b;
line-height: 1.7;
}
.formpay-ff-checkbox-single { margin: 0; }
.formpay-ff-fields-container {
display: flex;
flex-wrap: wrap;
gap: 0 14px;
}
.formpay-ff-col-100 {
flex: 1 1 100%;
min-width: 100%;
width: 100%;
}
.formpay-ff-col-50 {
flex: 1 1 calc(50% - 7px);
min-width: calc(50% - 7px);
width: calc(50% - 7px);
}
.formpay-ff-wrap .formpay-ff-text-input,
.formpay-ff-wrap .formpay-ff-select-input,
.formpay-ff-wrap .formpay-ff-custom-amount-input,
.formpay-ff-wrap .formpay-ff-discount-input {
width: 100% !important;
max-width: 100% !important;
}
.formpay-ff-section-heading {
margin: 0 0 6px;
font-size: 16px;
color: #0f172a;
}
.formpay-ff-divider {
border: 0;
border-top: 1px solid #e2e8f0;
margin: 12px 0;
}
.formpay-ff-gateway-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.formpay-ff-gateway-card {
display: flex;
align-items: center;
gap: 8px;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 10px 12px;
cursor: pointer;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.formpay-ff-gateway-card:hover { border-color: #94a3b8; }
.formpay-ff-gateway-card.is-selected {
border-color: #0e7490;
box-shadow: 0 0 0 1px #0e7490;
}
.formpay-ff-gateway-card input[type="radio"] { accent-color: #0e7490; }
.formpay-ff-wrap img.formpay-ff-gw-logo {
height: 22px;
width: auto;
max-width: 72px;
object-fit: contain;
flex-shrink: 0;
}
.formpay-ff-gw-title { font-weight: 600; font-size: 13.5px; color: #1e293b; }
.formpay-ff-discount-input-wrapper {
display: flex;
gap: 8px;
}
.formpay-ff-discount-input-wrapper .formpay-ff-discount-input { flex: 1; }
.formpay-ff-discount-apply-btn {
border: 1.5px solid #0e7490;
background: #fff;
color: #0e7490;
border-radius: 8px;
padding: 8px 16px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.formpay-ff-discount-apply-btn:hover { background: #ecfeff; }
.formpay-ff-discount-feedback { margin-top: 6px; font-size: 13px; }
.formpay-ff-discount-feedback.is-success { color: #047857; }
.formpay-ff-discount-feedback.is-error { color: #dc2626; }
.formpay-ff-notice {
padding: 10px 14px;
border-radius: 8px;
font-size: 13.5px;
margin-bottom: 12px;
}
.formpay-ff-notice-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
}
.formpay-ff-notice-warning {
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
}
.formpay-ff-notices .formpay-ff-notice-error,
.formpay-ff-notices .formpay-ff-notice-success {
margin-bottom: 0;
}
.formpay-ff-notice-success {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.formpay-ff-submit-wrapper { margin-top: 20px; }
.formpay-ff-submit-btn {
width: 100%;
border: 0;
background: #0e7490;
color: #fff;
border-radius: 10px;
padding: 13px 20px;
font-size: 15.5px;
font-weight: 800;
cursor: pointer;
transition: filter .15s ease, transform .1s ease;
}
.formpay-ff-submit-btn:hover:not(:disabled) { filter: brightness(1.08); }
.formpay-ff-submit-btn:active:not(:disabled) { transform: translateY(1px); }
.formpay-ff-submit-btn:disabled { opacity: .55; cursor: not-allowed; }
.formpay-ff-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, .45);
border-top-color: #fff;
border-radius: 50%;
vertical-align: -3px;
margin-inline-start: 8px;
animation: formpay-ff-spin .7s linear infinite;
}
@keyframes formpay-ff-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 480px) {
.formpay-ff-form { padding: 18px 14px; }
.formpay-ff-col-50 { width: 100%; }
.formpay-ff-gateway-grid { grid-template-columns: 1fr 1fr; }
}