/* ===== Metode pembayaran (form pemesanan) ===== */
.pay-title { font-weight: 600; font-size: .9rem; color: var(--brown); margin-bottom: .5rem; }

.pay-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 768px) {
    .pay-options { grid-template-columns: repeat(4, 1fr); }
}

.pay-option { position: relative; }

/* radio disembunyikan secara visual, tetap bisa difokus & dibaca screen reader */
.pay-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.pay-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: .1rem; min-height: 96px; padding: .7rem .5rem; height: 100%;
    background: #fffdf6; border: 1.5px solid #d3cbb0; border-radius: 12px; cursor: pointer;
}
.pay-icon { font-size: 1.5rem; line-height: 1; margin-bottom: .2rem; }
.pay-name { font-weight: 600; color: var(--brown); line-height: 1.2; }
.pay-desc { font-size: .78rem; color: #8a7660; line-height: 1.2; }

@media (hover: hover) {
    .pay-label { transition: border-color .15s ease, background-color .15s ease; }
    .pay-input:not(:checked) + .pay-label:hover { border-color: var(--gold); background: #f8f2de; }
}
.pay-input:checked + .pay-label {
    border-color: var(--gold-dark); background: #efe6cc; box-shadow: 0 0 0 2px rgba(184, 151, 90, .35);
}
.pay-input:focus-visible + .pay-label { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

.pay-hint {
    margin: .7rem 0 0; padding: .6rem .85rem; font-size: .88rem; color: var(--ink-soft);
    background: #f8f2de; border-left: 3px solid var(--gold-dark); border-radius: 8px;
}

/* ===== Rincian per metode: gambar QRIS & pilihan e-wallet / bank ===== */
.pay-detail { margin-top: .9rem; }
.pay-detail[hidden] { display: none; }

.pay-qris {
    text-align: center; padding: 1rem; background: #fffdf6;
    border: 1px solid #d3cbb0; border-radius: 12px;
}
.pay-qris-img {
    display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto .75rem;
    background: #fff; border-radius: 10px; border: 1px solid #e3d9bc;
}
.pay-qris-note { font-size: .88rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.pay-qris-save { font-size: .88rem; font-weight: 600; color: var(--brown); }
.pay-qris-save:hover { color: var(--gold-dark); }

.pay-sub-title { font-weight: 600; font-size: .9rem; color: var(--brown); margin-bottom: .5rem; }
.pay-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 576px) {
    .pay-choices { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.pay-choice { position: relative; }
.pay-choice-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pay-choice-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: .3rem; min-height: 64px; height: 100%; padding: .5rem .4rem;
    background: #fffdf6; border: 1.5px solid #d3cbb0; border-radius: 10px; cursor: pointer;
}
.pay-choice-logo { max-width: 72px; max-height: 28px; width: auto; height: auto; object-fit: contain; }
.pay-choice-name { font-weight: 600; font-size: .9rem; color: var(--brown); line-height: 1.2; }

@media (hover: hover) {
    .pay-choice-label { transition: border-color .15s ease, background-color .15s ease; }
    .pay-choice-input:not(:checked) + .pay-choice-label:hover { border-color: var(--gold); background: #f8f2de; }
}
.pay-choice-input:checked + .pay-choice-label {
    border-color: var(--gold-dark); background: #efe6cc; box-shadow: 0 0 0 2px rgba(184, 151, 90, .35);
}
.pay-choice-input:focus-visible + .pay-choice-label { outline: 2px solid var(--gold-dark); outline-offset: 2px; }