.frm-payment-method-selector { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; max-width: 500px; } .frm-payment-method-option { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; border-bottom: 1px solid #e0e0e0; background: #fff; transition: background-color 0.15s ease; position: relative; margin: 0; } .frm-payment-method-option:last-child { border-bottom: none; } .frm-payment-method-option:hover { background-color: #f9f9fb; } .frm-payment-method-active { background-color: #f0f4ff; } .frm-payment-method-active:hover { background-color: #f0f4ff; } .frm-payment-method-option input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; border: 2px solid #c0c0c0 !important; border-radius: 50% !important; flex-shrink: 0; margin: 0 !important; padding: 0 !important; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; background: #fff !important; box-shadow: none !important; outline: none !important; } .frm-payment-method-option input[type="radio"]:checked { border-color: #0070ba !important; background: radial-gradient(circle, #0070ba 40%, #fff 40%, #fff 100%) !important; } .frm-payment-method-option input[type="radio"]:focus { outline: 2px solid rgba(0, 112, 186, 0.3) !important; outline-offset: 2px !important; } .frm-payment-method-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .frm-payment-method-label-text { font-size: 15px; font-weight: 500; color: #1a1a2e; line-height: 1.3; } .frm-payment-method-desc { font-size: 13px; color: #6b7280; line-height: 1.3; } .frm-payment-method-mark { flex-shrink: 0; display: flex; align-items: center; gap: 4px; } .frm-payment-method-mark img, .frm-payment-method-mark svg { height: 24px; width: auto; } .frm-payment-method-google-pay-icon { height: 24px; } .frm-payment-method-google-pay-icon svg { height: 24px; width: auto; } .frm-payment-method-apple-pay-icon { height: 24px; } .frm-payment-method-apple-pay-icon svg { height: 24px; width: auto; } .frm-payment-method-paylater-wrap { border-bottom: 1px solid #e0e0e0; background: #fff; transition: background-color 0.15s ease; } .frm-payment-method-paylater-wrap:hover { background-color: #f9f9fb; } .frm-payment-method-paylater-wrap.frm-payment-method-active-wrap { background-color: #f0f4ff; } .frm-payment-method-paylater-wrap.frm-payment-method-active-wrap:hover { background-color: #f0f4ff; } .frm-payment-method-paylater-wrap.frm-payment-method-active-wrap .frm-payment-method-paylater-msg { background-color: #f0f4ff; } .frm-payment-method-paylater-wrap:last-child { border-bottom: none; } .frm-payment-method-paylater-wrap .frm-payment-method-option { border-bottom: none; background: transparent; } .frm-payment-method-paylater-wrap .frm-payment-method-option:hover { background: transparent; } .frm-payment-method-paylater-msg { padding: 0 16px 12px 48px; font-size: 13px; color: #6b7280; background: transparent; } .frm-payment-method-area { margin-top: 16px; } .frm-payment-method-container { display: none; max-width: 500px; }