/* ==========================================================================
   Flatsome Direct Order Button — fdo-style.css  v1.1.2
   Author: Ibna Hassan | pixelbondhu.com
   ========================================================================== */

/* ── Button base ────────────────────────────────────────────────────────────── */
.fdo-btn {
    display         : inline-block;
    background      : #005A00 !important;
    color           : #ffffff !important;
    border          : none !important;
    border-radius   : 3px;
    font-size       : 15px;
    font-weight     : 700;
    line-height     : 1;
    padding         : 0 22px;
    height          : 50px;
    line-height     : 50px;
    cursor          : pointer;
    text-decoration : none !important;
    white-space     : nowrap;
    vertical-align  : middle;
    transition      : background .15s ease, opacity .15s ease;
    -webkit-font-smoothing: antialiased;
    box-sizing      : border-box;
    /* no animation, no spinner, no gimmicks */
}

.fdo-btn:hover,
.fdo-btn:focus {
    background      : #003d00 !important;
    color           : #ffffff !important;
    text-decoration : none !important;
    outline         : none;
}

.fdo-btn:active {
    opacity : .85;
}

/* Loading state — just dim it, no spinner element */
.fdo-btn.fdo--loading {
    opacity        : .6;
    pointer-events : none;
    cursor         : wait;
}

/* Shake — for missing variation */
@keyframes fdo-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-5px); }
    40%     { transform: translateX(4px); }
    60%     { transform: translateX(-3px); }
    80%     { transform: translateX(2px); }
}
.fdo-btn.fdo--shake {
    animation : fdo-shake .4s ease;
}

/* ── Single product — match Flatsome's own button row ───────────────────────── */
/* Flatsome renders: qty | Add to Cart button  — all in one flex row.
   Our button joins that same row after "Add to Cart". */
.woocommerce div.product form.cart .fdo-btn--single,
.fdo-btn--single {
    margin  : 0 0 0 6px;
    height  : 50px;
    padding : 0 22px;
}

/* ── Sticky bar button ──────────────────────────────────────────────────────── */
.fdo-btn--sticky {
    height    : 44px;
    padding   : 0 18px;
    font-size : 14px;
    margin    : 0 0 0 6px;
    line-height: 44px;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Mobile view — keep buttons side by side with proper responsive sizing */
@media (max-width: 600px) {
    .woocommerce div.product form.cart .fdo-btn--single,
    .fdo-btn--single {
        display       : inline-block;
        width         : auto;
        margin        : 0 0 0 6px;
        font-size     : 13px;
        padding       : 0 16px;
        height        : 44px;
        line-height   : 44px;
        text-align    : center;
        flex-shrink   : 1;
        min-width     : 0;
    }
    
    /* Ensure the cart form uses flexbox layout for proper side-by-side alignment */
    .woocommerce div.product form.cart {
        display     : flex;
        flex-wrap   : wrap;
        align-items : center;
        gap         : 6px;
    }
    
    /* Make quantity and buttons share space properly */
    .woocommerce div.product form.cart .quantity {
        flex-shrink : 0;
        margin      : 0;
    }
    
    /* Add to cart button responsive sizing */
    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex-shrink : 1;
        min-width   : 0;
        font-size   : 13px;
        padding     : 0 16px;
        height      : 44px;
        line-height : 44px;
    }
}

/* Sticky bar stays inline even on mobile — just smaller */
@media (max-width: 480px) {
    .fdo-btn--sticky {
        font-size   : 12px;
        padding     : 0 12px;
        height      : 40px;
        line-height : 40px;
        margin-left : 4px;
    }
    
    /* Further reduce button sizes on very small screens */
    .woocommerce div.product form.cart .fdo-btn--single,
    .fdo-btn--single {
        font-size   : 12px;
        padding     : 0 12px;
        height      : 40px;
        line-height : 40px;
    }
    
    .woocommerce div.product form.cart .single_add_to_cart_button {
        font-size   : 12px;
        padding     : 0 12px;
        height      : 40px;
        line-height : 40px;
    }
}

@media (max-width: 360px) {
    .fdo-btn--sticky {
        font-size : 11px;
        padding   : 0 9px;
    }
    
    /* Extra small screens — further optimize button sizes */
    .woocommerce div.product form.cart .fdo-btn--single,
    .fdo-btn--single {
        font-size   : 11px;
        padding     : 0 10px;
        height      : 38px;
        line-height : 38px;
    }
    
    .woocommerce div.product form.cart .single_add_to_cart_button {
        font-size   : 11px;
        padding     : 0 10px;
        height      : 38px;
        line-height : 38px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fdo-btn            { transition: none !important; }
    .fdo-btn.fdo--shake { animation: none !important; }
}