/* Public-facing purchase / complete / my-orders styles */

.necosuke-payment-purchase,
.necosuke-payment-subscribe,
.necosuke-payment-complete {
    max-width: 560px;
    margin: 1.5em 0;
    padding: 1.8em 2em;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.np-item-name { margin: 0 0 .3em; font-size: 1.3em; font-weight: 700; line-height: 1.4; }
.necosuke-payment-subscribe > h3 { margin: 0 0 1em; font-size: 1.3em; font-weight: 700; line-height: 1.4; }
.np-item-price { margin: 0 0 1em; font-size: 1.15em; font-weight: 700; color: #b3001b; }
.np-item-desc { margin: 0 0 1.2em; color: #50575e; }

/* form fields */
.np-purchase-form > p,
.np-subscribe-form > p { margin: 0 0 1.2em; }
.np-purchase-form > p > label,
.np-subscribe-form > p > label {
    display: block;
    font-size: .9em;
    font-weight: 600;
    color: #3c434a;
}
.np-purchase-form .np-name-input,
.np-subscribe-form .np-name-input,
.np-subscribe-form .np-installment-select {
    display: block;
    width: 100%;
    margin-top: .35em;
    padding: .55em .7em;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    font-size: 1em;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.np-purchase-form .np-name-input:focus,
.np-subscribe-form .np-name-input:focus,
.np-subscribe-form .np-installment-select:focus {
    border-color: #b3001b;
    box-shadow: 0 0 0 2px rgba(179, 0, 27, .15);
    outline: none;
}
.np-field-note {
    display: block;
    margin-top: .4em;
    font-size: .82em;
    font-weight: 400;
    color: #757575;
}

/* fieldsets: payment method / plan select */
.np-method-fieldset,
.np-plan-fieldset {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: .4em 1em 1em;
    margin: 0 0 1.4em;
}
.np-method-fieldset legend,
.np-plan-fieldset legend {
    padding: 0 .5em;
    font-size: .9em;
    font-weight: 600;
    color: #3c434a;
}
.np-method-option,
.np-plan-option {
    display: flex;
    align-items: flex-start;
    gap: .5em;
    padding: .7em .8em;
    margin: .5em 0 0;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.np-method-option:hover,
.np-plan-option:hover { border-color: #b3001b; background: #fdf6f7; }
.np-method-option input[type="radio"],
.np-plan-option input[type="radio"] { margin: .2em 0 0; flex: 0 0 auto; }
.np-plan-option .np-plan-body { flex: 1; min-width: 0; }
.np-plan-option .np-plan-title { display: block; line-height: 1.5; }
.np-plan-option .np-plan-desc {
    display: block;
    margin-top: .25em;
    font-size: .85em;
    font-weight: 400;
    color: #757575;
}

/* submit */
.np-submit-button {
    display: inline-block;
    width: 100%;
    background: #b3001b;
    color: #fff;
    padding: .9em 1.2em;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.05em;
    font-weight: 700;
    transition: background .15s;
}
.np-submit-button:hover { background: #8a0015; }
.np-submit-button:focus { outline: 2px solid rgba(179, 0, 27, .4); outline-offset: 2px; }
.np-login-link { text-decoration: underline; }
.np-error { color: #d63638; }

.np-complete-meta, .np-complete-items, .np-complete-bank {
    border-collapse: collapse; width: 100%; margin: .6em 0;
}
.np-complete-meta th, .np-complete-bank th { text-align: left; width: 8em; padding: .3em .6em .3em 0; color: #50575e; }
.np-complete-items th, .np-complete-items td { border-bottom: 1px solid #eee; padding: .35em .5em; text-align: left; }
.np-complete-items th { background: #f8f8f8; }