/*
 * Payment Info widget.
 *
 * The copy button stays hidden until the script has shown it, so without
 * the script there is no button that does nothing: the number is just text
 * to select.
 */
.ekl-pay {
    @apply w-full;
}

.ekl-pay__instruction {
    @apply mb-[16px] mt-0 text-[16px] leading-[1.6] text-ekl-text;
}

.ekl-pay__list {
    @apply m-0 grid list-none gap-[16px] p-0;

    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ekl-pay__card {
    @apply m-0 flex flex-col gap-[10px] rounded-[12px] border border-solid border-ekl-neutral-200 bg-white p-[18px] text-ekl-text;
}

.ekl-pay__head {
    @apply flex flex-wrap items-center gap-[8px];
}

/* Each service in its own colour; the text colour is chosen to be readable on it. */
.ekl-pay__badge {
    @apply inline-block rounded-[999px] px-[12px] py-[4px] text-[14px] font-bold leading-[1.4];

    background-color: #1d2327;
    color: #fff;
}

.ekl-pay__card--bkash .ekl-pay__badge {
    background-color: #e2136e;
    color: #fff;
}

.ekl-pay__card--nagad .ekl-pay__badge {
    background-color: #f6921e;
    color: #1d2327;
}

.ekl-pay__card--rocket .ekl-pay__badge {
    background-color: #8c3494;
    color: #fff;
}

.ekl-pay__card--upay .ekl-pay__badge {
    background-color: #ffd200;
    color: #1d2327;
}

.ekl-pay__type {
    @apply text-[14px] text-ekl-text;

    opacity: 0.8;
}

.ekl-pay__line {
    @apply flex flex-wrap items-center justify-between gap-[10px];
}

.ekl-pay__number {
    @apply text-[22px] font-bold leading-[1.3] text-ekl-text;

    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ekl-pay__holder,
.ekl-pay__note {
    @apply m-0 text-[14px] leading-[1.5] text-ekl-text;
}

.ekl-pay__qr {
    @apply m-0;

    img {
        @apply block h-auto max-w-full;

        width: 160px;
    }
}

.ekl-pay__status {
    @apply absolute m-[-1px] h-[1px] w-[1px] overflow-hidden whitespace-nowrap border-0 p-0;

    clip: rect(0, 0, 0, 0);
}

.ekl-pay {
    position: relative;
}

/*
 * A theme styles every button (Hello Elementor: crimson with white text on hover
 * and focus, nowrap, centred, a 1px border). The rules below say every state
 * outright, one class deeper than the theme's [type=button]:hover, so the
 * button looks the way this widget says whatever the theme does. A style
 * control in the panel is still more specific than these.
 * Checked against the real theme in tests/test-theme-buttons.php.
 */

.ekl-pay .ekl-pay__copy,
.ekl-pay .ekl-pay__copy:hover,
.ekl-pay .ekl-pay__copy:focus,
.ekl-pay .ekl-pay__copy:active {
    padding: 8px 16px;
    border: 1px solid var(--color-ekl-hover);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
}

.ekl-pay .ekl-pay__copy {
    background-color: #fff;
    color: var(--color-ekl-hover);
    cursor: pointer;
}

.ekl-pay .ekl-pay__copy:hover,
.ekl-pay .ekl-pay__copy:focus,
.ekl-pay .ekl-pay__copy:active {
    background-color: var(--color-ekl-hover);
    color: #fff;
}

.ekl-pay .ekl-pay__copy:focus-visible {
    outline: 3px solid var(--color-ekl-hover);
    outline-offset: 2px;
}

.ekl-pay .ekl-pay__copy[hidden] {
    display: none;
}