/*
 * WhatsApp Order widget.
 *
 * WhatsApp's own green (#25d366) carries white text at only 2:1, so the button
 * is a deeper green of the same family (#0a7a56, 5.5:1).
 */
.ekl-wo {
    @apply flex w-full flex-col items-start gap-[10px];
}

.ekl-wo__qty {
    @apply flex items-center gap-[10px] text-[15px] text-ekl-text;

    &[hidden] {
        @apply hidden;
    }
}

.ekl-wo__qty-input {
    @apply w-[80px] rounded-[8px] border border-solid border-ekl-neutral-200 bg-white px-[10px] py-[8px] text-[16px] text-ekl-text;
}

.ekl-wo__status {
    @apply m-0 text-[14px] leading-[1.5] text-ekl-text;

    &:empty {
        @apply hidden;
    }
}

.ekl-wo__notice {
    @apply m-0 rounded-[8px] border border-dashed border-ekl-neutral-200 p-[12px] text-[14px] text-ekl-text;
}

.ekl-wo__button i,
.ekl-wo__button svg {
    @apply block;

    font-size: 1.25em;
}

.ekl-wo__button svg {
    @apply h-[1.25em] w-[1.25em] fill-current;
}

/*
 * A theme styles every link (Hello Elementor: crimson on hover, an underline).
 * Every state is said outright, one class deeper than the theme, so the button
 * is the same whatever it does. A style control in the panel is still more
 * specific than these. Checked in tests/test-theme-buttons.php.
 */

.ekl-wo .ekl-wo__button,
.ekl-wo .ekl-wo__button:hover,
.ekl-wo .ekl-wo__button:focus,
.ekl-wo .ekl-wo__button:active,
.ekl-wo .ekl-wo__button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s;
}

.ekl-wo .ekl-wo__button,
.ekl-wo .ekl-wo__button:visited {
    background-color: #0a7a56;
    color: #fff;
}

.ekl-wo .ekl-wo__button:hover,
.ekl-wo .ekl-wo__button:focus,
.ekl-wo .ekl-wo__button:active {
    background-color: #075c41;
    color: #fff;
}

.ekl-wo .ekl-wo__button:focus-visible {
    outline: 3px solid #075c41;
    outline-offset: 3px;
}

/* Not ready (options not chosen) or not in stock: it looks it, and says why when pressed. */
.ekl-wo .ekl-wo__button[aria-disabled="true"],
.ekl-wo .ekl-wo__button[aria-disabled="true"]:hover,
.ekl-wo .ekl-wo__button[aria-disabled="true"]:focus {
    background-color: #5d6a65;
    color: #fff;
    cursor: not-allowed;
}