/**
 * Way2Rentals Voucher Input Component
 * Reuses panel, alert, and form patterns
 * @package Way2Rentals
 */

/* Voucher Form Layout */
.w2r-voucher-form {
    display: flex;
    gap: 10px;
}

/* Remove bottom margin from w2r-form-group inside voucher form */
.w2r-voucher-form .w2r-form-group {
    margin-bottom: 0;
    flex: 1;
}

/* Ensure button is compact and doesn't take too much space */
.w2r-voucher-form .w2r-button-select {
    flex-shrink: 0;
    flex-grow: 0;
    width: auto;
    min-width: fit-content;
    padding-left: 1rem;
    padding-right: 1rem;
}


/* Voucher Status Messages Container */
.w2r-voucher-status {
    margin-top: 10px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success Message - Enhanced alert pattern */
.w2r-voucher-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--color-success-bg, rgba(40, 167, 69, 0.1));
    border: 1px solid var(--color-success, #28a745);
    border-radius: 4px;
    color: var(--color-success, #28a745);
}

.w2r-voucher-success i.fa-check-circle {
    font-size: 1.2em;
    flex-shrink: 0;
}

.w2r-voucher-success span {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

/* Apply type description */
.w2r-voucher-apply-type {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    opacity: 0.85;
}

/* Remove Button */
.w2r-voucher-remove {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--color-success, #28a745);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.w2r-voucher-remove:hover {
    opacity: 1;
}

/* Error Message - Enhanced alert pattern */
.w2r-voucher-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--color-error-light-bg, rgba(220, 53, 69, 0.1));
    border: 1px solid var(--color-error, #dc3545);
    border-radius: 4px;
    color: var(--color-error, #dc3545);
}

.w2r-voucher-error i.fa-exclamation-circle {
    font-size: 1.2em;
    flex-shrink: 0;
}

.w2r-voucher-error span {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}