/*
 * Additional styles for QR support.
 * Load after public_channels.css.
 */

[hidden] {
    display: none !important;
}

.directory .cards-grid {
    align-items: start;
}

.directory .channel-actions {
    flex-wrap: wrap;
}

.directory .hero .pch-qr-intro {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.9;
    opacity: 0.9;
}

.directory .pch-qr-toggle,
.directory .pch-qr-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 44px;
    padding: 9px 12px;

    border: 1px solid #e7d5ad;
    border-radius: 11px;

    background: #fff9ec;
    color: #76561e;

    font: inherit;
    font-size: 12px;
    line-height: 1.7;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.directory .pch-qr-toggle svg {
    flex: 0 0 auto;
}

.directory .pch-qr-toggle:hover {
    background: #fff0ce;
    border-color: #d4b573;
}

.directory .pch-qr-toggle[aria-expanded="true"] {
    background: #f6e7c3;
    border-color: #d2b06a;
    color: #644511;
}

.directory .pch-qr-toggle:focus-visible,
.directory .pch-qr-download:focus-visible {
    outline: 3px solid #c7a45c;
    outline-offset: 3px;
}

.directory .pch-qr-panel {
    width: 100%;
    min-width: 0;

    /*
     * Works if the original channel-item is a flex/grid container.
     */
    flex: 0 0 100%;
    grid-column: 1 / -1;

    margin-top: 14px;
    padding: 17px 12px 13px;

    background: #f8fafc;
    border: 1px solid #e0e8ee;
    border-radius: 15px;

    text-align: center;
    overflow-wrap: anywhere;
}

.directory .pch-qr-title {
    margin: 0;
    color: #123f56;
    font-size: 13px;
    line-height: 1.9;
}

.directory .pch-qr-subtitle {
    margin: 5px 0 0;
    color: #607384;
    font-size: 11px;
    line-height: 1.9;
}

.directory .pch-qr-image {
    width: 240px;
    max-width: 100%;

    margin: 14px auto 8px;

    background: #fff;
    border: 1px solid #e4e9ee;
    border-radius: 10px;

    direction: ltr;
}

/*
 * The required white quiet zone is included inside the canvas,
 * rather than relying on CSS padding.
 */
.directory .pch-qr-image canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.directory .pch-qr-hint {
    margin: 8px 0 12px;
    color: #607384;
    font-size: 11px;
    line-height: 1.9;
}

.directory .pch-qr-download {
    max-width: 100%;

    color: #123f56;
    background: #fff;
    border-color: #d6e1e9;
}

.directory .pch-qr-download:hover:not(:disabled) {
    background: #edf5f8;
    border-color: #aac4d1;
}

.directory .pch-qr-download:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.directory .pch-qr-note {
    margin: 9px 0 0;
    color: #748392;
    font-size: 10px;
    line-height: 1.9;
}

.directory .pch-qr-error {
    margin: 10px 0;
    padding: 9px;

    color: #9c3030;
    background: #fff0f0;
    border: 1px solid #efd0d0;
    border-radius: 9px;

    font-size: 11px;
    line-height: 1.9;
}

@media (max-width: 380px) {
    .directory .pch-qr-toggle,
    .directory .pch-qr-download {
        padding-inline: 10px;
        font-size: 11px;
    }

    .directory .pch-qr-panel {
        padding-inline: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .directory .pch-qr-toggle,
    .directory .pch-qr-download {
        transition: none;
    }
}
/* سه دکمه در یک ردیف */
.directory .channel-actions {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    align-items: stretch;
    gap: 6px;
    width: 100%;
}

/* تنظیم مشترک دکمه‌ها */
.directory .channel-actions > .join-button,
.directory .channel-actions > .copy-button,
.directory .channel-actions > .pch-qr-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 44px;

    margin: 0;
    padding: 8px 5px;
    gap: 4px;

    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

/* آیکون QR کمی کوچک‌تر شود */
.directory .channel-actions .pch-qr-toggle svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* حفظ خوانایی در نمایشگرهای بسیار کوچک */
@media (max-width: 380px) {
    .directory .channel-actions {
        gap: 4px;
    }

    .directory .channel-actions > .join-button,
    .directory .channel-actions > .copy-button,
    .directory .channel-actions > .pch-qr-toggle {
        padding-inline: 3px;
        font-size: 10px;
        gap: 3px;
    }

    /* حذف فقط آیکون‌های تزئینی برای آزاد شدن فضا */
    .directory .channel-actions .pch-qr-toggle svg,
    .directory .channel-actions .join-button > span[aria-hidden="true"] {
        display: none;
    }
}

/* هنگام نبود جاوااسکریپت، لینک ورود تمام عرض باشد */
.directory .channel-actions > .join-button:only-child {
    grid-column: 1 / -1;
}

@supports selector(:has(*)) {
    .directory .channel-actions:not(:has(> button:not([hidden])))
    > .join-button {
        grid-column: 1 / -1;
    }
}