/**
 * Payyco WooCommerce - Customer-facing Styles
 */

/* Payment details section */
.woocommerce-payment-details {
    margin-bottom: 2em;
    padding: 1em;
    background-color: #f8f8f8;
    border-radius: 4px;
}

.woocommerce-payment-details__title {
    margin-top: 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #e5e5e5;
    font-size: 1.2em;
}

.woocommerce-table--payment-details {
    margin-bottom: 0;
}

.woocommerce-table--payment-details th {
    width: 40%;
    font-weight: 600;
}

/* Payment status badges */
.payment-status {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
}

.payment-status--completed,
.payment-status--captured {
    background-color: #c6e1c6;
    color: #5b841b;
}

.payment-status--pending,
.payment-status--processing {
    background-color: #f8dda7;
    color: #94660c;
}

.payment-status--refunded {
    background-color: #e5e5e5;
    color: #777;
}

.payment-status--failed,
.payment-status--cancelled {
    background-color: #f1adad;
    color: #a00;
}

.payment-status--other,
.payment-status--unknown,
.payment-status--default {
    background-color: #e5e5e5;
    color: #777;
}

/* Custom order status in My Orders */
.woocommerce-orders-table__row--status-refund-requested .woocommerce-orders-table__cell-order-status,
.order-status.status-refund-requested {
    background-color: #f8dda7;
    color: #94660c;
}

/* Refund request section */
.payyco-refund-request {
    margin-top: 2em;
    padding: 1em;
    background-color: #f8f8f8;
    border-radius: 4px;
}

.payyco-refund-form {
    margin-top: 1em;
}

.payyco-form-field {
    margin-bottom: 1em;
}

.payyco-refund-form textarea {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 0.5em;
}

.payyco-refund-form textarea.error {
    border-color: #b22222;
    background-color: #fff8f8;
}

.payyco-field-error {
    color: #b22222;
    font-size: 0.85em;
    margin-top: 4px;
    font-style: italic;
}

.payyco-refund-form button {
    margin-right: 0.5em !important;
}

.payyco-refund-info {
    margin-top: 2em;
    padding: 1em;
    background-color: #f8f8f8;
    border-radius: 4px;
}

/* Success message styling */
.payyco-refund-request .woocommerce-message {
    background-color: #f0f8ff;
    color: #3c763d;
    padding: 1em;
    margin-bottom: 0;
    border-left: 4px solid #5cb85c;
}

/* My Account > Orders: Payment status column */
@media screen and (max-width: 768px) {
    .woocommerce-orders-table__cell-payment-status-title {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5em;
    }
}