/* ── KOAJ Pasillo Infinito ────────────────────────────────────────────────── */

/* Botón en el panel del carrito (junto a "Continuar compra") */
.koaj-qr-share-btn {
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    margin-top:      8px !important;
    padding:         10px 16px !important;
    background:      #fff !important;
    border:          2px solid #1a1a1a !important;
    border-radius:   4px !important;
    color:           #1a1a1a !important;
    font-weight:     700 !important;
    font-size:       13px !important;
    transition:      background .18s, color .18s;
    cursor:          pointer;
    text-decoration: none !important;
}
.koaj-qr-share-btn:hover,
.koaj-qr-share-btn:focus {
    background: #1a1a1a !important;
    color:      #fff !important;
}
.koaj-qr-svg-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.koaj-qr-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    z-index:         999999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.koaj-qr-modal {
    position:      relative;
    background:    #fff;
    border-radius: 14px;
    padding:       28px 24px 22px;
    max-width:     320px;
    width:         100%;
    text-align:    center;
    box-shadow:    0 12px 48px rgba(0,0,0,.22);
}
.koaj-qr-close {
    position:    absolute;
    top: 10px; right: 14px;
    background:  none; border: none;
    font-size:   24px; line-height: 1;
    color:       #999; cursor: pointer; padding: 0;
    transition:  color .15s;
}
.koaj-qr-close:hover { color: #333; }
.koaj-qr-modal-header h3 {
    margin: 0 0 4px; font-size: 15px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: #1a1a1a;
}
.koaj-qr-modal-header p { margin: 0 0 18px; font-size: 12px; color: #777; }

/* ── Área del QR ──────────────────────────────────────────────────────────── */
.koaj-qr-body { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; min-height: 60px; }
#koaj-qr-canvas-wrap img,
#koaj-qr-canvas-wrap canvas { display: block; border-radius: 10px; border: 1px solid #e8e8e8; }

.koaj-qr-loading { padding: 28px 0; font-size: 13px; color: #888; }
.koaj-qr-error   { padding: 16px 0; font-size: 13px; color: #c0392b; }

/* Countdown */
.koaj-qr-timer {
    margin: 10px 0 4px;
    font-size: 13px; font-weight: 600; color: #555;
}
.koaj-qr-timer--urgent { color: #e74c3c !important; }

/* Hint de estado */
.koaj-qr-hint { margin: 4px 0 0; font-size: 12px; color: #888; }

/* ── Footer de acciones ───────────────────────────────────────────────────── */
.koaj-qr-footer { display: flex; flex-direction: column; gap: 8px; }

.koaj-qr-wa-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 7px;
    background: #25d366 !important; color: #fff !important;
    border-radius: 8px; padding: 10px 16px;
    font-weight: 700; font-size: 13px; text-decoration: none !important;
    transition: background .18s;
}
.koaj-qr-wa-btn:hover { background: #1db954 !important; }
.koaj-wa-icon { width: 20px; height: 20px; flex-shrink: 0; }

.koaj-qr-copy-btn {
    background: #f5f5f5; border: 1px solid #ddd; border-radius: 8px;
    padding: 9px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; color: #333; width: 100%; transition: background .15s;
}
.koaj-qr-copy-btn:hover { background: #ebebeb; }

.koaj-qr-cancel-btn {
    background: none; border: none;
    font-size: 12px; color: #aaa; cursor: pointer; padding: 4px 0;
    text-decoration: underline; transition: color .15s;
}
.koaj-qr-cancel-btn:hover { color: #e74c3c; }

.koaj-qr-retry-btn {
    background: #1a1a1a; color: #fff; border: none;
    border-radius: 8px; padding: 10px 20px;
    font-weight: 700; font-size: 13px; cursor: pointer; width: 100%;
    transition: background .18s;
}
.koaj-qr-retry-btn:hover { background: #333; }

.koaj-qr-exp { margin: 0; font-size: 11px; color: #b0b0b0; }

/* ── Panel aprobado ───────────────────────────────────────────────────────── */
.koaj-qr-approved { padding: 8px 0; }
.koaj-check-icon { width: 52px; height: 52px; color: #27ae60; display: block; margin: 0 auto 12px; stroke-width: 2.5; }
.koaj-qr-approved-msg { font-size: 15px; font-weight: 800; color: #27ae60; margin: 0 0 6px; }
.koaj-qr-order-ref    { font-size: 13px; color: #555; margin: 0; }

/* ── Panel timeout ────────────────────────────────────────────────────────── */
.koaj-qr-timeout-msg { font-size: 14px; color: #888; padding: 20px 0 8px; }