/* =====================================================
   WhatsApp Order Pro – Frontend CSS (waol-front.css)
   ===================================================== */

/* ── Buttons ──────────────────────────────────────── */
.lumiera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    font-family: var(--font-family-text);
    cursor: pointer;
       font-size: 16px;
    line-height: normal;
    font-weight: 600;
    text-decoration: none;
    transition: filter .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 2px 10px rgba(37,211,102,.3); 
    
} 
.single_add_to_cart_button{
    margin-right: 5px!important;
}
.lumiera-btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.lumiera-btn:active { transform: translateY(0); }
.lumiera-icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* Mobile-only */
.lumiera-mobile-only { display: none; }
@media (max-width: 768px) { .lumiera-mobile-only { display: block; } }

/* ── Popup Overlay ────────────────────────────────── */
.lumiera-overlay {
    position: fixed; inset: 0; z-index: 99999999999;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: lumieraFadeIn .2s ease;
}
@keyframes lumieraFadeIn { from { opacity: 0; } to { opacity: 1; } }

.lumiera-modal {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 28px 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: lumieraSlideUp .25s ease;
}
@keyframes lumieraSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.lumiera-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; font-size: 26px;
    cursor: pointer; color: #666; line-height: 1;
    transition: color .15s;
}
.lumiera-modal-close:hover { color: #222; }

.lumiera-modal-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
}
.lumiera-modal-header svg { width: 36px; height: 36px; fill: #25D366; flex-shrink: 0; }
.lumiera-modal-header h2 { margin: 0; font-size: 20px; font-weight: 700; color: #1a1a1a; }

/* ── Form Fields ──────────────────────────────────── */
.lumiera-field { margin-bottom: 16px; }
.lumiera-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #444; margin-bottom: 5px;
}
.lumiera-req { color: #e00; }
.lumiera-field input,
.lumiera-field select,
.lumiera-field textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 13px; border: 1.5px solid #ddd;
    border-radius: 8px; font-size: 14px;
    transition: border-color .2s;
    font-family: inherit;
}
.lumiera-field input:focus,
.lumiera-field select:focus,
.lumiera-field textarea:focus { border-color: #25D366; outline: none; }
.lumiera-field textarea { resize: vertical; min-height: 72px; }

/* ── Submit Button ────────────────────────────────── */
.lumiera-submit-btn {
    width: 100%; padding: 14px;
    background: #25D366; color: #fff;
    border: none; border-radius: 10px;
    font-size: 16px; font-weight: 700;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center; gap: 10px;
    transition: background .2s, transform .15s;
    margin-top: 8px;
}
.lumiera-submit-btn svg { width: 22px; height: 22px; fill: #fff; }
.lumiera-submit-btn:hover { background: #20b857; transform: translateY(-1px); }
.lumiera-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Error ────────────────────────────────────────── */
.lumiera-error {
    background: #fff0f0; border: 1px solid #fcc;
    color: #c00; padding: 10px 14px;
    border-radius: 8px; font-size: 13px; margin-bottom: 12px;
}

/* ── Checkout Option ──────────────────────────────── */
.lumiera-checkout-option {
    background: #f0fff4; border: 1.5px solid #25D366;
    border-radius: 8px; padding: 12px 16px;
    margin-bottom: 14px;
}
.lumiera-checkout-option label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }

/* ── Floating Bubble ──────────────────────────────── */
.lumiera-float { position: fixed; bottom: 0px; z-index: 9999; }
.lumiera-float--right { right: 80px; }
.lumiera-float--left  { left: 80px; }
.lumiera-float__btn {
    display: flex; align-items: center; gap: 10px;
    background: #25D366; color: #fff;
    padding: 12px 15px 10px 15px; border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37,211,102,.45);
    transition: transform .2s, box-shadow .2s;
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
.lumiera-float__btn:hover { transform: scale(1.05); color: #fff; text-decoration: none; }
.lumiera-float__btn svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
@keyframes lumieraPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.lumiera-float__btn { animation: lumieraPulse 2.5s ease-out 1.5s 2; }
@media (max-width: 480px) {
 
    .lumiera-float__label { display: none; }
    .lumiera-float--right {         right: 0;
        bottom: 100px;
        .lumiera-float__btn {
            border-radius: 40px 0px 0px 40px!important;
            padding: 8px!important;
            svg{
                width: 16px;
                height: 16px;
            }
        }
 }
    .lumiera-float--left  {      
        left: 0;
        bottom: 100px;
         .lumiera-float__btn {
            border-radius: 0px 40px 40px 0px!important;
            padding: 8px!important;
            svg{
                width: 16px;
                height: 16px;
            }
        }
    }
}


.whats_order_buttons{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payment_method_waol_whatsapp   label{
        display: flex;
        align-items: center;
        gap: 5px;
        img{
            width: 30px;
        }
    }

.woocommerce-cart {
 .lumiera-share-wrap{
    margin-bottom: 0;
                margin-top: 1rem; 
       
    }
}