/*======================================
  *** Buttons Styling ***
======================================*/

/*--- Disabled Buttons ---*/

/* Grey out buttons when min/max reached */
.vou_pay_your_price_input_wrapper.quantity[data-type=type-2] .vou_price_minus.disabled,
.vou_pay_your_price_input_wrapper.quantity[data-type=type-2] .vou_price_plus.disabled {
    color: var(--medium-grey);
    cursor: not-allowed;
    pointer-events: none;
}


/*======================================
  *** Number Input ***
======================================*/

/*--- Disable Other Ways to Change Input ---*/

/* Remove number input arrows in all browsers */
.vou_pay_your_price_input_wrapper .vou_set_pay_your_price_input::-webkit-inner-spin-button,
.vou_pay_your_price_input_wrapper .vou_set_pay_your_price_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vou_pay_your_price_input_wrapper.vou_set_pay_your_price_input {
    -moz-appearance: textfield;
    /* Firefox */
    cursor: default;
    caret-color: transparent;
    user-select: none;
}


/*--- Price ---*/

/* Hide default variation price on voucher products */
.product_cat-gutscheine .single_variation_wrap .woocommerce-variation-price,
.product_cat-vouchers .single_variation_wrap .woocommerce-variation-price {
    display: none;
}

/* Adjust margin below custom variation price */
.product_cat-gutscheine form.variations_form .woocommerce-variation.single_variation,
.product_cat-vouchers form.variations_form .woocommerce-variation.single_variation {
    margin-bottom: 10px;
}


/*--- Label & Input Wrapper ---*/

/* Align Label and Input Next to Each Other */
.vou_pay_your_price_field, div.product form.cart.variations_form .variations tbody tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

div.product form.cart.variations_form .variations tbody tr {
    flex-wrap: nowrap;
    flex-direction: row;
}

/* Stack Label and Input on Mobile */
@media (max-width: 690px) {
    .vou_pay_your_price_field,
    div.product form.cart.variations_form .variations tbody tr {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3em;
    }
}

/* Style Label */
.vou_pay_your_price_field .vou_set_pay_your_price_label,
label[for="gutscheinbetrag"] {
    margin-bottom: 0;
    font: var(--h5);
    text-transform: uppercase;
}

/* Style input text */
div.product form.cart.variations_form .variations tbody tr td.value select {
    font: var(--small-text-medium);
}

/* Style select icon */
div.product form.cart.variations_form .variations tbody tr td.value select {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%230b0c10' fill-rule='nonzero'/%3E%3C/svg%3E");
    background-size: 10px auto, 100%;
}


/* Change input field width */
.vou_pay_your_price_input_wrapper.quantity[data-type=type-2]{
    width: 140px;
}

div.product form.cart.variations_form .variations tbody tr td.value {
    width: 200px;
    max-width: none;
    flex-basis: auto;
}

/* Change input field height */
div.product form.cart.variations_form .variations tbody td select {
    height: 55px;
}

/* Make input full width on mobile */
@media (max-width: 690px) {
    .vou_pay_your_price_input_wrapper.quantity[data-type=type-2],
    div.product form.cart.variations_form .variations tbody tr td.value {
        width: 100%;
    }

    div.vou_pay_your_price_voucher_amount_wrap {
        width: 100%;
        align-items: center;
    }
}

/* Move input and hint to the right side */
.vou_pay_your_price_voucher_amount_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Set border color */
select#gutscheinbetrag {
    border-color: var(--dark-red);
}

/* Hide reset button */
div.product form.cart .variations .reset_variations {
    display: none !important;
}

/* Spacing */
div.product form.cart.variations_form table.variations {
    margin-bottom: 0;
}


/*--- Min/Max Text ---*/

/*Hide min amount text*/
.vou_pay_your_price_labels_wrap {
    display: none;
}

/* Style max amount hint */
p.vou_pay_your_price_range_hint {
    font: var(--small-text-medium);
    color: var(--dark-grey);
    margin-bottom: 0;
}

/*======================================
  *** Personal Comment ***
======================================*/

/* Make textarea take up max width */
textarea.woo-vou-recipient-details {
    width: 100% !important;
}

/* Stack label and textarea on mobile */
@media (max-width: 690px) {

    table.woo-vou-recipient-fields td.label,
    table.woo-vou-recipient-fields td.value {
        display: block;
        width: 100%;
    }
}