/* Coupon input + button layout */
.ep-coupon-section {
    display: flex;
    gap: 8px;
}

/* Redeem button default */
#ep-coupon-add {
    background: linear-gradient(135deg, #c026d3, #6b21a8);
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
}

/* Hover effect */
#ep-coupon-add:hover {
    background: linear-gradient(135deg, #a21caf, #581c87);
}

/* Disabled state */
#ep-coupon-add:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Remove (×) button */
.ep-remove-coupon {
    color: #c026d3;
    font-size: 22px;
    margin-left: 8px;
    cursor: pointer;
}

.ep-remove-coupon:hover {
    color: #7e22ce;
}

/* Discount row */
.ep-discount-row {
    border-top: 1px solid #ddd;
}

/* Layout: input + button side by side */
.ep-coupon-section {
    display: flex;
    flex-wrap: wrap;   /* allows message to go below */
    gap: 10px;
    align-items: center;
}

/* Input takes remaining space */
#ep-coupon-field {
    flex: 1;
    min-width: 200px;
}

/* Button stays beside input */
#ep-coupon-add {
    white-space: nowrap;
}

/* ✅ Message goes BELOW */
.ep-coupon-response {
    width: 100%;           /* forces next line */
    margin-top: 4px;
    font-size: 13px;
    display: block !important;
}

/* Error message */
.ep-coupon-response.ep-invalid-feedback {
    color: #dc2626;
}

/* Success message */
.ep-coupon-response.ep-success-feedback {
    color: #16a34a;
}

@media (max-width: 480px) {
    #ep-coupon-field {
        flex: 1;
        min-width: 0; /* ❗ prevents overflow */
    }

    #ep-coupon-add {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 13px;
    }
}