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

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

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

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

.wwnp-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: wwnpSlideUp .25s ease;
}
@keyframes wwnpSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.wwnp-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;
}
.wwnp-modal-close:hover { color: #222; }

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

/* ── Form Fields ──────────────────────────────────── */
.wwnp-field { margin-bottom: 16px; }
.wwnp-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #444; margin-bottom: 5px;
}
.wwnp-req { color: #e00; }
.wwnp-field input,
.wwnp-field select,
.wwnp-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;
}
.wwnp-field input:focus,
.wwnp-field select:focus,
.wwnp-field textarea:focus { border-color: #25D366; outline: none; }
.wwnp-field textarea { resize: vertical; min-height: 72px; }

/* ── Submit Button ────────────────────────────────── */
.wwnp-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;
}
.wwnp-submit-btn svg { width: 22px; height: 22px; fill: #fff; }
.wwnp-submit-btn:hover { background: #20b857; transform: translateY(-1px); }
.wwnp-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

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

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

/* ── Floating Bubble ──────────────────────────────── */
.wwnp-float { position: fixed; bottom: 24px; z-index: 9999; }
.wwnp-float--right { right: 24px; }
.wwnp-float--left  { left: 24px; }
.wwnp-float__btn {
    display: flex; align-items: center; gap: 10px;
    background: #25D366; color: #fff;
    padding: 14px 18px; border-radius: 50px;
    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;
}
.wwnp-float__btn:hover { transform: scale(1.05); color: #fff; text-decoration: none; }
.wwnp-float__btn svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
@keyframes wwnpPulse {
    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); }
}
.wwnp-float__btn { animation: wwnpPulse 2.5s ease-out 1.5s 2; }
@media (max-width: 480px) {
    .wwnp-float__btn { border-radius: 50%; padding: 14px; }
    .wwnp-float__label { display: none; }
    .wwnp-float--right { right: 16px; bottom: 16px; }
    .wwnp-float--left  { left: 16px; bottom: 16px; }
}