/* ==========================================================
   Counter Doodle — POS
   ========================================================== */

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-width);
    gap: var(--space-16);
    align-items: start;
}

.pos-scan .form-control {
    height: var(--control-height-lg);
    font-size: var(--font-size-lg);
}

.pos-scan .search-box svg {
    width: var(--icon-md);
}

.pos-scan .search-box svg + input {
    padding-left: var(--space-36);
}

.pos-total {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: calc(var(--space-18) * -1) calc(var(--space-20) * -1) var(--space-16);
    padding: var(--space-16) var(--space-20);
    background: var(--color-primary-soft);
    border-bottom: var(--border-width) solid var(--color-primary-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.pos-total span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.pos-total strong {
    font-size: var(--font-size-4xl);
    line-height: var(--line-tight);
    font-weight: var(--font-bold);
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
}

.pos-total small {
    color: var(--color-text-secondary);
}

.pos-change {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: calc(var(--space-4) * -1) 0 var(--space-12);
    font-weight: var(--font-semibold);
}

.pos-change strong {
    font-size: var(--font-size-lg);
    color: var(--color-success);
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    height: var(--control-height-xs);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.qty-stepper button {
    width: var(--stepper-button-width);
    height: 100%;
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
}

.qty-stepper button:hover {
    background: var(--color-surface-alt);
    color: var(--color-primary);
}

.qty-stepper input {
    width: var(--stepper-input-width);
    height: 100%;
    text-align: center;
    font-weight: var(--font-bold);
    border-left: var(--border-width) solid var(--color-border);
    border-right: var(--border-width) solid var(--color-border);
    -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 1000px) {
    .pos-layout { grid-template-columns: minmax(0, 1fr); }
}

.pos-blocked {
    max-width: var(--narrow-width);
    margin: var(--space-40) auto;
    text-align: center;
}

.pos-blocked p { margin: var(--space-6) 0 var(--space-14); }

.pos-event {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}

.pos-confirm {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    margin: var(--space-4) 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    background: var(--color-warning-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    cursor: pointer;
}

.pos-confirm input {
    margin-top: var(--space-2);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex-shrink: 0;
}

/* ---- dialog pembayaran (tandai PAID) ---- */

.pay-dialog {
    text-align: left;
}

.pay-amount {
    margin-bottom: var(--space-12);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pay-label {
    display: block;
    margin: var(--space-12) 0 var(--space-6);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
}

.pay-dialog .pos-channels {
    margin-bottom: var(--space-8);
}

.pay-qris {
    margin: var(--space-8) 0;
    text-align: center;
}

.pay-qris img {
    width: var(--qris-image-width);
    max-width: 100%;
}

.pay-dialog .pos-confirm {
    margin-top: var(--space-12);
}

.pos-step-note {
    margin-top: var(--space-8);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* ---- rincian total & promo ---- */

.pos-breakdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4) var(--space-12);
    margin: calc(var(--space-4) * -1) 0 var(--space-12);
    font-size: var(--font-size-sm);
}

.pos-breakdown dt { color: var(--color-text-secondary); }
.pos-breakdown dd { text-align: right; font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }

.pos-hint,
.pos-promo-hint {
    color: var(--color-primary-strong);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
}

.pos-hint {
    margin-bottom: var(--space-12);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
}

.pos-promo {
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ---- pilihan bank QRIS ---- */

.pos-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.pos-channel input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pos-channel span {
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    padding: 0 var(--space-14);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pos-channel input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pos-channel input:focus-visible + span {
    box-shadow: var(--shadow-focus);
}

/* penanda QRIS milik penyelenggara event */
.pos-channel-tag {
    margin-left: var(--space-6);
    padding: 0 var(--space-6);
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
}

/* ---- data pembeli ---- */

.pos-customer {
    margin: var(--space-4) 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
}

.pos-customer summary {
    font-weight: var(--font-bold);
    cursor: pointer;
}

.pos-customer[open] summary { margin-bottom: var(--space-10); }

.pos-consent {
    margin-bottom: 0;
    background: var(--color-surface-alt);
}