/*
 * Payment Sellers module: «فروشندگان این کالا» on single product pages
 * (container width comes from the child theme, alongside
 * .webara-related-products) and the checkout seller-change dialog.
 * Comfortable customer density.
 *
 * Product page: seller cards in tinted groups. From 782px each group is a
 * Swiper slider (the script adds Swiper's classes), and from 1024px the
 * two groups share a row while both are short (`is-paired`); phones (once
 * the script adds `is-enhanced`) show the featured card plus an
 * «N فروشنده دیگر» button that opens the groups in a bottom-sheet <dialog>.
 */

/* The seller cards choose the guarantee while the section is shown. */
.webara-has-payment-sellers table.variations tr:has(.webara-seller-chosen-attribute) {
    display: none;
}

.webara-payment-sellers {
    font-family: var(--besanj-font-sans);
    color: var(--besanj-color-text);
    padding-block: var(--besanj-space-8);
}

.webara-payment-sellers [hidden] {
    display: none !important; /* Strict visibility invariant over theme list/paragraph rules. */
}

.webara-payment-sellers__title {
    margin: 0 0 var(--besanj-space-6);
    font-size: var(--besanj-font-size-500);
    font-weight: var(--besanj-font-weight-bold);
    line-height: var(--besanj-line-height-tight);
}

.webara-payment-sellers__notices:not(:empty) {
    margin-block-end: var(--besanj-space-4);
}

.webara-payment-sellers__prompt,
.webara-payment-sellers__empty {
    margin: 0;
    padding: var(--besanj-space-4);
    font-size: var(--besanj-font-size-200);
    color: var(--besanj-color-text-secondary);
    background: var(--besanj-color-bg-surface);
    border: 1px solid var(--besanj-color-border);
    border-radius: var(--besanj-radius-lg);
}

.webara-payment-sellers__prompt {
    margin-block-end: var(--besanj-space-6);
}

/* ---- Groups and cards ---------------------------------------------- */

.webara-payment-sellers__groups {
    display: grid;
    gap: var(--besanj-space-6);
}

.webara-payment-sellers__group {
    /* Lets a slider inside a grid track shrink to the track instead of widening it. */
    min-width: 0;
    padding: var(--besanj-space-3);
    background: var(--besanj-color-bg-canvas);
    border-radius: var(--besanj-radius-lg);
}

.webara-payment-sellers__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--besanj-space-3);
    margin: var(--besanj-space-1) var(--besanj-space-1) var(--besanj-space-3);
}

.webara-payment-sellers__group-title {
    margin: 0;
    font-size: var(--besanj-font-size-400);
    font-weight: var(--besanj-font-weight-semibold);
    line-height: var(--besanj-line-height-tight);
}

.webara-payment-sellers__list {
    display: grid;
    gap: var(--besanj-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.webara-payment-sellers__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    background: var(--besanj-color-bg-surface);
    border: 1px solid var(--besanj-color-border);
    border-radius: var(--besanj-radius-lg);
}

.webara-payment-sellers__features {
    margin: 0;
    padding: 0 var(--besanj-space-4);
    list-style: none;
}

.webara-payment-sellers__feature {
    display: flex;
    align-items: center;
    gap: var(--besanj-space-3);
    margin: 0;
    padding-block: var(--besanj-space-3);
}

.webara-payment-sellers__feature + .webara-payment-sellers__feature {
    border-block-start: 1px solid var(--besanj-color-border);
}

.webara-payment-sellers__feature-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--besanj-control-height-compact);
    height: var(--besanj-control-height-compact);
    color: var(--besanj-color-text-secondary);
    background: var(--besanj-color-bg-subtle);
    border-radius: var(--besanj-radius-pill);
}

.webara-payment-sellers__feature--seller .webara-payment-sellers__feature-icon {
    color: var(--besanj-color-interactive-text);
    background: var(--besanj-color-bg-selected);
}

.webara-payment-sellers__feature-text {
    min-width: 0;
    font-size: var(--besanj-font-size-100);
    font-weight: var(--besanj-font-weight-semibold);
    color: var(--besanj-color-neutral-800);
    overflow-wrap: anywhere;
}

.webara-payment-sellers__feature--seller .webara-payment-sellers__feature-text {
    font-size: var(--besanj-font-size-200);
    font-weight: var(--besanj-font-weight-semibold);
    color: var(--besanj-color-text);
}

/* Payment-type pill after the seller name; the label carries the meaning, the tint only separates the groups. */
.webara-payment-sellers__badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: var(--besanj-space-1) var(--besanj-space-2);
    font-size: var(--besanj-font-size-100);
    font-weight: var(--besanj-font-weight-semibold);
    line-height: var(--besanj-line-height-tight);
    color: var(--besanj-color-text-secondary);
    background: var(--besanj-color-bg-subtle);
    border-radius: var(--besanj-radius-pill);
}

.webara-payment-sellers__badge--bnpl {
    color: var(--besanj-color-interactive-text);
    background: var(--besanj-color-bg-selected);
}

/* Price then a full-width button: cards are narrow at every width (phone, sheet, desktop grid column). */
.webara-payment-sellers__footer {
    display: grid;
    gap: var(--besanj-space-3);
    margin-block-start: auto;
    padding: var(--besanj-space-4);
    border-block-start: 1px solid var(--besanj-color-border);
}

.webara-payment-sellers__price {
    display: grid;
    justify-items: end;
    gap: var(--besanj-space-1);
    font-family: var(--besanj-font-fanum);
    font-variant-numeric: tabular-nums;
}

.webara-payment-sellers__regular {
    display: inline-flex;
    align-items: center;
    gap: var(--besanj-space-2);
    font-size: var(--besanj-font-size-200);
    color: var(--besanj-color-text-muted);
}

.webara-payment-sellers__discount {
    padding-inline: var(--besanj-space-2);
    font-size: var(--besanj-font-size-100);
    font-weight: var(--besanj-font-weight-semibold);
    color: var(--besanj-color-danger-text);
    background: var(--besanj-color-danger-bg);
    border-radius: var(--besanj-radius-pill);
}

.webara-payment-sellers__amount {
    font-size: var(--besanj-font-size-400);
    font-weight: var(--besanj-font-weight-bold);
}

.webara-payment-sellers__form {
    margin: 0;
}

.webara-payment-sellers__button {
    width: 100%;
    min-height: var(--besanj-control-height-comfortable);
    padding-inline: var(--besanj-space-6);
    font-family: inherit;
    font-size: var(--besanj-font-size-300);
    font-weight: var(--besanj-font-weight-semibold);
    color: var(--besanj-color-neutral-0);
    background: var(--besanj-color-interactive);
    border: 0;
    border-radius: var(--besanj-radius-md);
    cursor: pointer;
    transition: background-color var(--besanj-motion-fast) var(--besanj-ease-standard);
}

.webara-payment-sellers__button:hover {
    background: var(--besanj-color-interactive-hover);
}

.webara-payment-sellers__button:focus-visible,
.webara-payment-sellers__more:focus-visible,
.webara-payment-sellers__close:focus-visible {
    outline: 2px solid var(--besanj-color-focus);
    outline-offset: 2px;
}

.webara-payment-sellers__button:disabled,
.webara-payment-sellers__button.is-loading {
    cursor: progress;
    opacity: 0.7;
}

/* ---- Phone summary: featured seller + "more sellers" ---------------- */

.webara-payment-sellers__summary {
    display: none;
}

.webara-payment-sellers__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--besanj-control-height-comfortable);
    padding-inline: var(--besanj-space-4);
    font-family: inherit;
    font-size: var(--besanj-font-size-300);
    font-weight: var(--besanj-font-weight-semibold);
    color: var(--besanj-color-interactive-text);
    background: var(--besanj-color-bg-surface);
    border: 1px solid var(--besanj-color-border);
    border-radius: var(--besanj-radius-lg);
    cursor: pointer;
    transition: background-color var(--besanj-motion-fast) var(--besanj-ease-standard);
}

.webara-payment-sellers__more:hover {
    background: var(--besanj-color-bg-subtle);
}

.webara-payment-sellers__more-icon {
    flex: none;
}

@media (max-width: 781px) {
    .webara-payment-sellers.is-enhanced .webara-payment-sellers__summary {
        display: grid;
        gap: var(--besanj-space-3);
    }

    .webara-payment-sellers.is-enhanced .webara-payment-sellers__inline {
        display: none;
    }
}

/* ---- Phone bottom sheet --------------------------------------------- */

html.webara-sellers-sheet-open {
    overflow: hidden;
}

.webara-payment-sellers__sheet {
    width: 100%;
    max-width: none;
    /* `auto` would stretch a fixed-position dialog between its top and bottom insets. */
    height: fit-content;
    max-height: calc(100% - var(--besanj-space-8));
    margin: auto 0 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--besanj-font-sans);
    color: var(--besanj-color-text);
    background: var(--besanj-color-bg-canvas);
    border: 0;
    border-start-start-radius: var(--besanj-radius-xl);
    border-start-end-radius: var(--besanj-radius-xl);
    box-shadow: var(--besanj-shadow-lg);
}

.webara-payment-sellers__sheet[open] {
    display: flex;
    flex-direction: column;
    animation: webara-sellers-sheet-in var(--besanj-motion-slow) var(--besanj-ease-standard);
}

.webara-payment-sellers__sheet::backdrop {
    background: rgba(31, 36, 48, 0.5);
}

.webara-payment-sellers__sheet-header {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--besanj-space-3);
    padding: var(--besanj-space-6) var(--besanj-space-4) var(--besanj-space-3);
    background: var(--besanj-color-bg-surface);
    border-block-end: 1px solid var(--besanj-color-border);
}

/* Grab handle: a visual cue that this is a sheet. */
.webara-payment-sellers__sheet-header::before {
    content: "";
    position: absolute;
    inset-block-start: var(--besanj-space-2);
    inset-inline: 0;
    width: var(--besanj-space-10);
    height: var(--besanj-space-1);
    margin-inline: auto;
    background: var(--besanj-color-neutral-300);
    border-radius: var(--besanj-radius-pill);
}

.webara-payment-sellers__sheet-title {
    margin: 0;
    font-size: var(--besanj-font-size-400);
    font-weight: var(--besanj-font-weight-bold);
    line-height: var(--besanj-line-height-tight);
}

.webara-payment-sellers__sheet-count {
    margin: var(--besanj-space-1) 0 0;
    font-family: var(--besanj-font-fanum);
    font-size: var(--besanj-font-size-100);
    color: var(--besanj-color-text-muted);
}

.webara-payment-sellers__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--besanj-control-height-comfortable);
    height: var(--besanj-control-height-comfortable);
    padding: 0;
    color: var(--besanj-color-text);
    background: transparent;
    border: 0;
    border-radius: var(--besanj-radius-md);
    cursor: pointer;
}

.webara-payment-sellers__close:hover {
    background: var(--besanj-color-bg-subtle);
}

.webara-payment-sellers__sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--besanj-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@keyframes webara-sellers-sheet-in {
    from {
        transform: translateY(100%);
    }
}

/* ---- Tablet and desktop: a slider per group ------------------------- */

.webara-payment-sellers__nav {
    display: flex;
    flex: none;
    gap: var(--besanj-space-2);
}

.webara-payment-sellers__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--besanj-control-height-comfortable);
    height: var(--besanj-control-height-comfortable);
    padding: 0;
    color: var(--besanj-color-text);
    background: var(--besanj-color-bg-surface);
    border: 1px solid var(--besanj-color-border);
    border-radius: var(--besanj-radius-pill);
    cursor: pointer;
    transition: background-color var(--besanj-motion-fast) var(--besanj-ease-standard);
}

.webara-payment-sellers__nav-button:hover {
    background: var(--besanj-color-bg-subtle);
}

.webara-payment-sellers__nav-button:focus-visible {
    outline: 2px solid var(--besanj-color-focus);
    outline-offset: 2px;
}

.webara-payment-sellers__nav-button:disabled {
    color: var(--besanj-color-text-disabled);
    background: var(--besanj-color-bg-surface);
    cursor: default;
}

/* Every card already fits: no slider controls. */
.webara-payment-sellers__nav-button.swiper-button-lock {
    display: none;
}

/* The chevron points to the inline end; "previous" points to the start. */
.webara-payment-sellers__nav-icon--prev {
    transform: scaleX(-1);
}

/* Swiper lays the slides out with its own margins in a flex row. */
.webara-payment-sellers__list.swiper-wrapper {
    display: flex;
    gap: 0;
}

/* Equal-height cards: Swiper's 100% height would not stretch. */
.webara-payment-sellers__card.swiper-slide {
    height: auto;
}

@media (min-width: 782px) {
    /* Without the script: every card in a grid. */
    .webara-payment-sellers__list {
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    }
}

@media (min-width: 1024px) {
    .webara-payment-sellers__groups.is-paired {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Checkout: confirm a payment gateway of another seller. */
.webara-seller-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: var(--besanj-space-6);
    box-sizing: border-box;
    font-family: var(--besanj-font-sans);
    color: var(--besanj-color-text);
    background: var(--besanj-color-bg-surface);
    border: 0;
}

.webara-seller-dialog[open] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--besanj-space-6);
}

.webara-seller-dialog::backdrop {
    background: rgba(31, 36, 48, 0.5);
}

.webara-seller-dialog__title {
    margin: 0 0 var(--besanj-space-3);
    font-size: var(--besanj-font-size-500);
    font-weight: var(--besanj-font-weight-bold);
    line-height: var(--besanj-line-height-tight);
}

.webara-seller-dialog__message {
    margin: 0;
    font-family: var(--besanj-font-fanum);
    font-size: var(--besanj-font-size-300);
    line-height: var(--besanj-line-height-body);
    color: var(--besanj-color-text-secondary);
}

.webara-seller-dialog__actions {
    display: flex;
    flex-direction: column;
    gap: var(--besanj-space-3);
}

.webara-seller-dialog__button {
    min-height: var(--besanj-control-height-comfortable);
    padding-inline: var(--besanj-space-6);
    font-family: inherit;
    font-size: var(--besanj-font-size-300);
    font-weight: var(--besanj-font-weight-semibold);
    border-radius: var(--besanj-radius-md);
    cursor: pointer;
    transition: background-color var(--besanj-motion-fast) var(--besanj-ease-standard), border-color var(--besanj-motion-fast) var(--besanj-ease-standard);
}

.webara-seller-dialog__button:focus-visible {
    outline: 2px solid var(--besanj-color-focus);
    outline-offset: 2px;
}

.webara-seller-dialog__button--primary {
    color: var(--besanj-color-neutral-0);
    background: var(--besanj-color-interactive);
    border: 0;
}

.webara-seller-dialog__button--primary:hover {
    background: var(--besanj-color-interactive-hover);
}

.webara-seller-dialog__button--secondary {
    color: var(--besanj-color-text);
    background: var(--besanj-color-bg-surface);
    border: 1px solid var(--besanj-color-border-strong);
}

.webara-seller-dialog__button--secondary:hover {
    background: var(--besanj-color-bg-subtle);
}

@media (min-width: 782px) {
    .webara-seller-dialog {
        width: min(30rem, calc(100% - var(--besanj-space-8)));
        /* `auto` would stretch a fixed-position dialog between its top and bottom insets. */
        height: fit-content;
        max-height: calc(100% - var(--besanj-space-8));
        margin: auto;
        border-radius: var(--besanj-radius-xl);
        box-shadow: var(--besanj-shadow-lg);
    }

    .webara-seller-dialog__actions {
        flex-direction: row;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webara-payment-sellers__button,
    .webara-payment-sellers__more,
    .webara-payment-sellers__nav-button,
    .webara-payment-sellers__sheet[open],
    .webara-seller-dialog__button {
        transition: none;
        animation: none;
    }
}