/**
 * Discount Code Component
 *
 * @package Hafo\Checkout
 * @version 1.0.0
 */

.hafo-discount-code {
    margin-bottom: var(--hafo-checkout-spacing-xl);
}

.hafo-discount-code__label {
    display: block;
    margin-bottom: var(--hafo-checkout-spacing-sm);
    font-size: var(--hafo-checkout-font-size-base);
    font-weight: var(--hafo-checkout-font-weight-medium);
    color: var(--hafo-checkout-text);
}

.hafo-discount-code__input-wrapper {
    display: flex;
    gap: var(--hafo-checkout-spacing-sm);
}

.hafo-discount-code__input {
    flex: 1;
    padding: var(--hafo-checkout-spacing-sm) var(--hafo-checkout-spacing-md);
    font-size: var(--hafo-checkout-font-size-base);
    font-family: var(--hafo-checkout-font-family);
    border: 1px solid var(--hafo-checkout-border);
    border-radius: var(--hafo-checkout-radius-md);
    background-color: var(--hafo-checkout-secondary);
    color: var(--hafo-checkout-text);
    min-height: 44px;
    transition: var(--hafo-checkout-transition);
}

.hafo-discount-code__input:focus-visible {
    outline: 2px solid var(--hafo-checkout-primary);
    outline-offset: 2px;
    border-color: var(--hafo-checkout-primary);
}

.hafo-discount-code__button {
    padding: var(--hafo-checkout-spacing-sm) var(--hafo-checkout-spacing-lg);
    font-size: var(--hafo-checkout-font-size-base);
    font-weight: var(--hafo-checkout-font-weight-medium);
    font-family: var(--hafo-checkout-font-family);
    background-color: var(--hafo-checkout-primary);
    color: var(--hafo-checkout-secondary);
    border: 2px solid var(--hafo-checkout-primary);
    border-radius: var(--hafo-checkout-radius-md);
    cursor: pointer;
    transition: var(--hafo-checkout-transition);
    min-height: 44px;
    white-space: nowrap;
}

.hafo-discount-code__button:hover,
.hafo-discount-code__button:focus {
    background-color: var(--hafo-checkout-primary-hover);
    border-color: var(--hafo-checkout-primary-hover);
}

.hafo-discount-code__button:focus-visible {
    outline: 2px solid var(--hafo-checkout-primary);
    outline-offset: 2px;
}