/* ==========================================================
Project : Counter Doodle
Module  : Page
File    : qris.css
Kelola QRIS per bank (/qris).
========================================================== */

.channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--channel-card-min), 1fr));
    gap: var(--card-gap);
}

.channel-card {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.channel-card.is-off .channel-image {
    opacity: var(--opacity-disabled);
}

.channel-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: var(--space-16);
    background: var(--color-surface-alt);
    border-bottom: var(--border-width) solid var(--color-border);
}

.channel-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.channel-noimage {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.channel-body {
    padding: var(--space-16);
}

.channel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.channel-warning {
    margin-top: var(--space-8);
    font-size: var(--font-size-sm);
    color: var(--color-warning);
}

.channel-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10) var(--space-14);
    padding: var(--space-14);
    margin-bottom: var(--space-16);
    background: var(--color-surface-alt);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.channel-form .form-group { margin-bottom: 0; }

.channel-form-inline {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-border);
    border-radius: 0;
}

.channel-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}

@media (max-width: 768px) {
    .channel-form { grid-template-columns: minmax(0, 1fr); }
}

/* ringkasan QRIS aktif di halaman Event */
.qris-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
    list-style: none;
}

.qris-list li {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-weight: var(--font-semibold);
}

.qris-list img {
    width: var(--control-height);
    height: var(--control-height);
    object-fit: contain;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
}