/**
 * Z Addons for Elementor — ACF Responsive Table widget.
 *
 * Minimal structural defaults; colors, borders, radius, padding and
 * typography are controlled from the Elementor panel. Mobile cards
 * deliberately share the desktop table's style controls (header/cell
 * colors, striped rows, borders, radius, padding, typography) so both
 * modes always look the same — only the gap between cards and the label
 * column width are mobile-specific. Inside a card, the cell padding sits
 * on the label/value spans (like real <td>/<th>), so the space between
 * the two columns matches the desktop table, and every second row picks
 * up the striped color.
 *
 * RTL-aware: structural CSS uses direction-neutral / logical properties,
 * text aligns to `start`, and flex rows mirror automatically with the
 * document direction.
 *
 * Mode switching: both markups (table + cards) are rendered by the widget
 * and media queries decide which one is visible. The default breakpoint is
 * 1024px; the `.zae-table--bp-768` modifier keeps the table mode down to
 * 768px via a scoped override. No JavaScript is involved.
 */

.zae-table__scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
}

.zae-table__table {
        width: 100%;
        min-width: 640px; /* narrow containers scroll horizontally instead of squashing */
        margin: 0;
        border-collapse: collapse;
        border: 1px solid #d9dde3;
}

.zae-table__table th,
.zae-table__table td {
        border: 1px solid #d9dde3;
        padding: 10px 12px;
        text-align: start;
        vertical-align: top;
        overflow-wrap: break-word; /* keeps equal-width columns (table-layout: fixed) safe with long words */
}

.zae-table__table thead th {
        background-color: #f3f4f6;
        font-weight: 700;
}

.zae-table__table tbody th[scope="row"] {
        font-weight: 600;
        text-align: start;
}

/* ------------------------------------------------------------------ *
 * Mobile cards (hidden on desktop by the media queries below).
 * A card is the mobile twin of the table: its title row plays the
 * thead row and the label/value rows play the tbody cells, so the
 * desktop table style controls map 1:1 onto them.
 * ------------------------------------------------------------------ */

.zae-table__cards {
        display: none;
}

.zae-table__card {
        background-color: #fff;
        border: 1px solid #d9dde3;
        overflow: hidden; /* header/row backgrounds must respect the controlled radius */
}

.zae-table__card + .zae-table__card {
        margin-top: 10px; /* overridden by the "فاصله بین کارت‌ها" control */
}

/* Card title = the mobile twin of the thead row. As with real table
 * cells, padding lives on the cell spans — not on the row — so the
 * boundary between the label and value columns gets its own padding,
 * exactly like the desktop table. */
.zae-table__card-title {
        display: flex;
        align-items: baseline;
        margin: 0;
        background-color: #f3f4f6;
        font-weight: 700;
}

.zae-table__card-title-label {
        flex: 0 0 50%; /* follows the "عرض ستون برچسب" control */
        box-sizing: border-box;
        padding: 10px 12px; /* default cell padding; overridden by the control */
        text-align: start;
}

.zae-table__card-title-text {
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
        padding: 10px 12px;
        overflow-wrap: break-word;
        text-align: start;
}

.zae-table__card-row {
        display: flex;
        align-items: baseline;
        text-align: start;
}

/* Every second label/value row inside a card; colored by the
 * "پس‌زمینه ردیف‌های یک‌درمیان" control (first row plain, second striped). */
.zae-table__card-row--alt {
        background-color: transparent;
}

.zae-table__card-row + .zae-table__card-row,
.zae-table__card-title + .zae-table__card-row {
        border-top: 1px solid #d9dde3;
}

.zae-table__label {
        flex: 0 0 50%; /* follows the "عرض ستون برچسب" control */
        box-sizing: border-box;
        padding: 10px 12px; /* default cell padding; overridden by the control */
        text-align: start;
}

.zae-table__value {
        flex: 1 1 auto;
        min-width: 0;
        box-sizing: border-box;
        padding: 10px 12px;
        overflow-wrap: break-word;
        text-align: start;
}

/* ------------------------------------------------------------------ *
 * Editor-only notice (never rendered on the frontend)
 * ------------------------------------------------------------------ */

.zae-table__notice {
        border: 1px dashed #b32d2e;
        color: #b32d2e;
        background-color: #fff;
        padding: 10px 14px;
}

/* ------------------------------------------------------------------ *
 * Mode switching
 * Default breakpoint 1024: table >= 1024px, cards < 1024px.
 * The --bp-768 modifier keeps the table mode in the 768–1023px band.
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {
        .zae-table__cards {
                display: none;
        }

        .zae-table__scroll {
                display: block;
        }
}

@media (max-width: 1023px) {
        .zae-table__scroll {
                display: none;
        }

        .zae-table__cards {
                display: block;
        }
}

@media (min-width: 768px) and (max-width: 1023px) {
        .zae-table--bp-768 .zae-table__scroll {
                display: block;
        }

        .zae-table--bp-768 .zae-table__cards {
                display: none;
        }
}