/*======================================
  *** 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;
}


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

/* Align Label and Input Next to Each Other */
.vou_pay_your_price_field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* Stack Label and Input on Mobile */
@media (max-width: 690px) {
    .vou_pay_your_price_field {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3em;
    }
}

/* Style Label */
.vou_pay_your_price_field .vou_set_pay_your_price_label {
    margin-bottom: 0;
    font: var(--h5);
    text-transform: uppercase;
}

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

/* Make input full width on mobile */
@media (max-width: 690px) {
    .vou_pay_your_price_input_wrapper.quantity[data-type=type-2] {
        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;
}


/*--- 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%;
    }
}