/* SIA Whatsapp Order — frontend styles
 * v2.2.0 — added .wob-call + .wob-quick-order container
 */

.wob-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background-color: var(--wob-bg, #25D366);
    color: var(--wob-color, #ffffff) !important;
    border: none;
    border-radius: var(--wob-radius, 4px);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    box-shadow: none !important;
    vertical-align: middle;
}

.wob-button:hover,
.wob-button:focus {
    background-color: var(--wob-bg-hover, #1ebe5d);
    color: var(--wob-color, #ffffff) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none;
}

.wob-button:active {
    transform: none !important;
    box-shadow: none !important;
}

.wob-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* WhatsApp icon is solid-filled. */
.wob-button:not(.wob-call) .wob-icon {
    fill: currentColor;
}

/* Call icon is outline-stroked (set in SVG attributes). */
.wob-button.wob-call .wob-icon {
    stroke: currentColor;
}

.wob-button.wob-block {
    display: flex;
}

.wob-button.wob-inline {
    display: inline-flex;
}

.wob-button.wob-full {
    width: 100%;
    justify-content: center;
}

/* ─────────── Call button — colors come from --wob-call-* tokens ─────────── */

.wob-button.wob-call {
    background-color: var(--wob-call-bg, #1d1d1d);
    color: var(--wob-call-color, #ffffff) !important;
}

.wob-button.wob-call:hover,
.wob-button.wob-call:focus {
    background-color: var(--wob-call-bg-hover, #000000);
    color: var(--wob-call-color, #ffffff) !important;
}

/* ─────────── Quick Order container (WhatsApp + Call grouped) ─────────── */

.wob-quick-order {
    margin: 12px 0;
}

.wob-quick-order__label {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    line-height: 1.3;
}

.wob-quick-order__buttons {
    display: flex;
    gap: 8px;
}

/* Inline: side-by-side, each takes equal share of the row. */
.wob-quick-order--inline .wob-quick-order__buttons {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}
.wob-quick-order--inline .wob-quick-order__buttons > .wob-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.wob-quick-order--inline .wob-quick-order__buttons .wob-button {
    width: 100%;
    justify-content: center;
}

/* Stacked: one over the other, full-width each. */
.wob-quick-order--stacked .wob-quick-order__buttons {
    flex-direction: column;
}
.wob-quick-order--stacked .wob-quick-order__buttons > .wob-wrap {
    width: 100%;
}
.wob-quick-order--stacked .wob-quick-order__buttons .wob-button {
    width: 100%;
    justify-content: center;
}

/* ─────────── Device-targeted visibility (Call button) ─────────── */
/* Breakpoints in sync with admin field descriptions:
   - Mobile:  ≤ 640px
   - Tablet:  641–1024px
   - Desktop: ≥ 1025px
   The "hide on X" class is added server-side by CallButtonRenderer when
   the user unchecks that device. Display:none is fine for SEO/caching
   because the link is always in the DOM. */
@media (min-width: 1025px) {
    .wob-hide-desktop { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .wob-hide-tablet { display: none !important; }
}
@media (max-width: 640px) {
    .wob-hide-mobile { display: none !important; }
}

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

@media (max-width: 640px) {
    /* Solo (non-grouped) inline buttons stack on mobile, as before. */
    .wob-button.wob-inline {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    /* Inline quick-order stacks on mobile too — two side-by-side
       buttons cramp narrow screens. */
    .wob-quick-order--inline .wob-quick-order__buttons {
        flex-direction: column;
    }
    .wob-quick-order--inline .wob-quick-order__buttons > .wob-wrap {
        width: 100%;
    }
}