/**
 * Plug and Pay Gateway Specific Styles
 */

/* Shared error styling for both Legacy and Block checkout */
.plugandpay-gateway-error {
    color: #ba0a24;
    background-color: #f7e6e8;
    border: 1px solid #ebaeb6;
    padding: 1em;
    margin: 1em 0;
    border-radius: 4px;
    font-size: 0.9em;
}

/* React specific adjustment if needed inside Notice */
.wc-block-components-notice.is-error .plugandpay-gateway-error {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
}

/* Progress Bar Styling */
.plugandpay-progress-bar-container {
    background: #e0e0e0;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.plugandpay-progress-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.plugandpay-progress-bar.is-below-min {
    background: #007cba;
}

.plugandpay-progress-bar.is-above-max {
    background: #ba0a24;
}

/* Helper styles for links and spacing */
.plugandpay-error-link-container {
    margin-top: 10px;
}

.plugandpay-error-link {
    text-decoration: underline;
    font-weight: 600;
}

.plugandpay-error-link.is-below-min {
    color: #007cba;
}

.plugandpay-error-link.is-above-max {
    color: #ba0a24;
}

/* Gateway label icons */
.plugandpay-block-gateway-label-container {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.plugandpay-block-gateway-icon {
    display: inline-flex;
    align-items: center;
}

img.plugandpay-gateway-logo {
    display: inline-block;
    float: none;
    height: 24px !important;
    margin: 0 0 0 5px !important;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    vertical-align: middle;
}