/* Custom Quantity Input - Rounded Pill Design */
/* This file overrides all existing quantity styles */

/* Main container */
quantity-input.quantity,
quantity-input {
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #0a77b8 !important;
    background-color: #fff !important;
    width: fit-content !important;
    position: relative !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Button base styles - reset everything */
quantity-input.quantity .quantity__button,
quantity-input .quantity__button,
.qty-cart quantity-input.quantity .quantity__button,
.qty-cart quantity-input .quantity__button,
.price-per-item__container quantity-input.quantity .quantity__button,
.price-per-item__container quantity-input .quantity__button {
    /* Reset all positioning */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    
    /* Reset all borders first */
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    
    /* Button styling */
    background-color: #0a77b8 !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 38px !important;
    width: auto !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    line-height: normal !important;
    font-size: 16px !important;
    font-weight: bold !important;
    user-select: none !important;
    text-align: center !important;
}

/* Minus button (first button) */
quantity-input.quantity .quantity__button:first-child,
quantity-input .quantity__button:first-child,
.qty-cart quantity-input.quantity .quantity__button:first-child,
.qty-cart quantity-input .quantity__button:first-child,
.price-per-item__container quantity-input.quantity .quantity__button:first-child,
.price-per-item__container quantity-input .quantity__button:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Plus button (last button) */
quantity-input.quantity .quantity__button:last-child,
quantity-input .quantity__button:last-child,
.qty-cart quantity-input.quantity .quantity__button:last-child,
.qty-cart quantity-input .quantity__button:last-child,
.price-per-item__container quantity-input.quantity .quantity__button:last-child,
.price-per-item__container quantity-input .quantity__button:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Button hover state */
quantity-input.quantity .quantity__button:hover:not(.disabled),
quantity-input .quantity__button:hover:not(.disabled),
.qty-cart quantity-input.quantity .quantity__button:hover:not(.disabled),
.qty-cart quantity-input .quantity__button:hover:not(.disabled),
.price-per-item__container quantity-input.quantity .quantity__button:hover:not(.disabled),
.price-per-item__container quantity-input .quantity__button:hover:not(.disabled) {
    background-color: #086ba0 !important;
}

/* Disabled button */
quantity-input.quantity .quantity__button.disabled,
quantity-input .quantity__button.disabled,
.qty-cart quantity-input.quantity .quantity__button.disabled,
.qty-cart quantity-input .quantity__button.disabled,
.price-per-item__container quantity-input.quantity .quantity__button.disabled,
.price-per-item__container quantity-input .quantity__button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Visually hidden text */
quantity-input.quantity .quantity__button .visually-hidden,
quantity-input .quantity__button .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* SVG wrapper */
quantity-input.quantity .quantity__button .svg-wrapper,
quantity-input .quantity__button .svg-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* SVG icons */
quantity-input.quantity .quantity__button .svg-wrapper svg,
quantity-input .quantity__button .svg-wrapper svg {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important;
    stroke: none !important;
}

/* Input field */
quantity-input.quantity .quantity__input,
quantity-input .quantity__input,
.qty-cart quantity-input.quantity .quantity__input,
.qty-cart quantity-input .quantity__input,
.price-per-item__container quantity-input.quantity .quantity__input,
.price-per-item__container quantity-input .quantity__input {
    /* Reset positioning */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    
    /* Input styling */
    background-color: #ffffff !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #121212 !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    pointer-events: auto !important;
    line-height: 40px !important;
    vertical-align: middle !important;
}

/* Remove spinner arrows */
quantity-input.quantity .quantity__input::-webkit-outer-spin-button,
quantity-input.quantity .quantity__input::-webkit-inner-spin-button,
quantity-input .quantity__input::-webkit-outer-spin-button,
quantity-input .quantity__input::-webkit-inner-spin-button,
.qty-cart quantity-input.quantity .quantity__input::-webkit-outer-spin-button,
.qty-cart quantity-input.quantity .quantity__input::-webkit-inner-spin-button,
.qty-cart quantity-input .quantity__input::-webkit-outer-spin-button,
.qty-cart quantity-input .quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* Input focus state */
quantity-input.quantity .quantity__input:focus,
quantity-input .quantity__input:focus,
.qty-cart quantity-input.quantity .quantity__input:focus,
.qty-cart quantity-input .quantity__input:focus,
.price-per-item__container quantity-input.quantity .quantity__input:focus,
.price-per-item__container quantity-input .quantity__input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Override old .qty-cart .quantity styles */
.qty-cart .quantity {
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #0a77b8 !important;
    background-color: #fff !important;
    width: fit-content !important;
    position: relative !important;
    height: 40px !important;
    margin-top: 0 !important;
}

.qty-cart .quantity .minus,
.qty-cart .quantity .plus {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    height: 40px !important;
    width: auto !important;
    line-height: normal !important;
    font-size: 16px !important;
    z-index: 1 !important;
    padding: 0 !important;
    min-width: 38px !important;
    background-color: #0a77b8 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    user-select: none !important;
    cursor: pointer !important;
}

.qty-cart .quantity .minus {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.qty-cart .quantity .plus {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.qty-cart .quantity input {
    position: relative !important;
    text-align: center !important;
    font-size: 16px !important;
    height: 40px !important;
    width: 60px !important;
    pointer-events: auto !important;
    font-weight: 500 !important;
    background-color: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.qty-cart .quantity input::-webkit-outer-spin-button,
.qty-cart .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Price per item container */
.price-per-item__container {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}