/* ----------------------------------------------------------
   Gift Card Purchase Amount (Variable Price)
   Scoped to the configured Gift Card product page via
   body.sv-gc-purchase-amount-enabled
---------------------------------------------------------- */

/* Input + label styles */
.sv-gc-purchase-amount-enabled #sv_giftcard_amount_field input,
.sv-giftcard-purchase-amount #sv_giftcard_amount_field input {
    border: 1px solid var(--neutral-light);
    border-radius: var(--radius);
    padding: 10px 15px;
    font-size: 16px;
}

.sv-gc-purchase-amount-enabled #sv_giftcard_amount_field input::placeholder,
.sv-giftcard-purchase-amount #sv_giftcard_amount_field input::placeholder {
    font-size: 16px;
}

.sv-gc-purchase-amount-enabled #sv_giftcard_amount_field label,
.sv-giftcard-purchase-amount #sv_giftcard_amount_field label {
    color: var(--heading-color);
    font-family: var(--heading-font-family);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--h6);
}

/* Disable the qty selector for gift card purchases */
.sv-gc-purchase-amount-enabled form.cart .quantity,
.sv-giftcard-purchase-amount form.cart .quantity {
    display: none;
}


/* Hide WooCommerce variation output block (price/availability) when it would render a duplicate line */
.sv-gc-purchase-amount-enabled form.cart .woocommerce-variation:not(:empty),
.sv-giftcard-purchase-amount form.cart .woocommerce-variation:not(:empty) {
    display: none;
}

/* Button disable helper */
.sv-gc-vp-btn-disabled {
    opacity: 0.55 !important;
    filter: saturate(0) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.sv-gc-vp-btn-disabled:hover {
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Invalid state */
.sv-gc-vp-invalid {
    border-color: #cc0000 !important;
}

/* Error + helper text */
.sv-gc-purchase-amount-error {
    margin-top: 6px;
    margin-bottom: var(--space-s);
    color: #cc0000;
    font-size: 0.9em;
}

.sv-gc-purchase-amount-helper {
    margin: var(--space-s) 0;
    font-size: 0.8em;
    color: #666;
}