/* Pay4All Age Verification — checkout panel
 * -----------------------------------------------------
 * Reuses the visual pattern of Pay4All Shop's KYC panel : dashed
 * upload button that goes solid on hover / focus, animated spinner in
 * the "sending" state, and green success card that replaces the whole
 * panel once every required document is present.
 */

/* Standalone panel rendered ABOVE the checkout form (billing/shipping),
 * on its own so the customer immediately sees it before touching any
 * WooCommerce field. Left border in accent blue makes it read as its
 * own section, not part of the billing form. */
.p4all-age-panel{
    margin:0 0 24px;
    padding:22px 24px;
    background:#fff;
    border:1px solid #dcdcde;
    border-left:6px solid #2271b1;
    border-radius:8px;
    box-shadow:0 4px 16px -8px rgba(15,23,42,.12);
}
.p4all-age-panel.is-success{display:none!important}
.p4all-age-panel h3{margin:0 0 6px;font-size:18px;font-weight:700;color:#1d2327}
.p4all-age-panel .p4all-age-desc{margin:0 0 18px;color:#3c434a;font-size:14px}

/* OR-choice widget — sits INSIDE the main panel, between the
 * description and the QR block. Rendered as an inset card with a
 * subtle bluish tint so it stands out from the surrounding panel
 * without competing with its border. */
.p4all-age-panel .p4all-age-choice-panel{
    margin:0 0 18px;
    padding:14px 16px;
    background:#f5f8fb;
    border:1px solid #dbe4f0;
    border-radius:6px;
}
.p4all-age-choice-panel .p4all-age-choice-prompt{margin:0 0 10px;font-weight:700;font-size:14px;color:#1d2327}
.p4all-age-choice-panel .p4all-age-choice-option{display:flex;align-items:center;gap:8px;margin:4px 0;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:14px;transition:background .15s}
.p4all-age-choice-panel .p4all-age-choice-option:hover{background:rgba(34,113,177,.06)}
.p4all-age-choice-panel input[type=radio]{margin:0}

/* Slots that don't match the currently-chosen group are hidden via
 * this class (more reliable than inline style.display in themes that
 * override `.wc-block-checkout` rendering). */
.p4all-age-slot[data-p4all-age-hidden="1"]{display:none!important}

/* Desktop hint + QR + fallback URL. QR is rendered client-side by
 * P4allAgeQR (inline SVG, no CDN). */
.p4all-age-desktop{background:#f9fbff;border:1px solid #dbe4f0;border-radius:6px;padding:16px;margin:12px 0 18px;text-align:center}
.p4all-age-desktop .p4all-age-qrhint{margin:0 0 12px;font-size:14px;color:#1d2327}
.p4all-age-qr{margin:12px auto;min-height:220px;max-width:240px;display:flex;align-items:center;justify-content:center}
.p4all-age-qr svg{max-width:220px;height:auto;display:block}
.p4all-age-fallback{margin:14px 0 4px;font-size:12px;color:#666}
.p4all-age-url{display:inline-block;max-width:100%;padding:6px 10px;background:#fff;border:1px solid #e6e7eb;border-radius:4px;font-size:12px;word-break:break-all;color:#1d2327}

/* Slots — dashed pick button + status badge, same pattern as pay4all-form. */
.p4all-age-mobile{margin-top:12px}
.p4all-age-slot{margin:10px 0;padding:12px 14px;background:#fff;border:1px solid #dcdcde;border-radius:6px;transition:border-color .15s,background .15s}
.p4all-age-slot.is-done{border-color:#00a32a;background:#f0f9f0}
.p4all-age-slot.is-err{border-color:#d63638;background:#fdf5f5}
.p4all-age-slot.is-sending{border-color:#1d5a91;background:#eef4fb}
.p4all-age-slot-title{display:block;font-weight:600;margin-bottom:10px;color:#1d2327;font-size:14px}
.p4all-age-upload-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Hide native input; label acts as the visible button. */
.p4all-age-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}
.p4all-age-pickbtn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;background:linear-gradient(180deg,#ffffff,#f4f6f8);border:1.5px dashed #c3c4c7;border-radius:8px;cursor:pointer;color:#1d2327;font-weight:600;line-height:1;font-size:14px;transition:all .18s ease}
.p4all-age-pickbtn:hover,.p4all-age-input:focus+.p4all-age-pickbtn{background:#f0f6fc;border-color:#2271b1;border-style:solid;color:#2271b1;transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(34,113,177,.35)}
.p4all-age-pickbtn svg{width:18px;height:18px;transition:transform .18s ease}
.p4all-age-pickbtn:hover svg{transform:translateY(-2px)}
.p4all-age-slot.is-done .p4all-age-pickbtn{border-style:solid;border-color:#00a32a;background:#f0f9f0;color:#00631d}

.p4all-age-slot-status{margin-top:10px;font-size:13px;color:#666;padding:6px 12px;border-radius:6px;display:inline-block;font-weight:500;transition:all .18s ease}
.p4all-age-slot.is-sending .p4all-age-slot-status{background:#eef4fb;color:#1d5a91;font-weight:600;padding-left:34px;position:relative}
.p4all-age-slot.is-sending .p4all-age-slot-status::before{content:"";position:absolute;left:10px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid #1d5a91;border-top-color:transparent;border-radius:50%;animation:p4all-age-spin .8s linear infinite}
@keyframes p4all-age-spin{to{transform:rotate(360deg)}}
.p4all-age-slot.is-done .p4all-age-slot-status{background:#dff5e0;color:#00631d;font-weight:700}
.p4all-age-slot.is-err .p4all-age-slot-status{background:#fdecec;color:#a91a1c;font-weight:600}

.p4all-age-status{margin:14px 0 0;font-size:13px;color:#666;text-align:center}

/* Filename readout hidden — the badge already conveys upload state. */
.p4all-age-filename{display:none}

/* Persistent green banner shown once every required slot is present.
 * Mirrors pay4all-form's `.p4all-kyc-final-check`. */
.p4all-age-final-check{display:none;align-items:center;gap:14px;margin:0 0 24px;padding:16px 20px;background:#f0f9f0;border:1px solid #00a32a;border-left:6px solid #00a32a;border-radius:8px;color:#00631d}
.p4all-age-final-check.is-visible{display:flex}
.p4all-age-final-check strong{display:block;font-size:15px;font-weight:700;color:#00631d;margin-bottom:2px}
.p4all-age-final-check span{display:block;color:#22593a;font-size:13px;line-height:1.4}

/* Greyed-out state for the WooCommerce "Place order" button until every
 * required document is uploaded. `.p4all-age-block-submit` is toggled
 * by checkout.js on the surrounding form/button so this works with any
 * theme. */
.p4all-age-block-submit #place_order,
.p4all-age-block-submit .wc-block-components-checkout-place-order-button{
    opacity:.45!important;
    cursor:not-allowed!important;
    pointer-events:none!important;
}
.p4all-age-block-submit #place_order::after{content:""}

/* On mobile devices the desktop QR block is useless — the customer is
 * already on their phone. Same rule as pay4all-form. */
@media (pointer: coarse) and (max-width: 900px){
    .p4all-age-panel .p4all-age-desktop{display:none!important}
}

/* pay4all-form shortcode : greyed-out state for the customer-step
 * « Suivant » button while the KYC panel isn't satisfied. The class is
 * toggled by pay4allform.js; combined with the native `disabled`
 * attribute so the browser also blocks clicks / keyboard activation. */
.p4all-form .p4all-next.is-locked-by-p4all-age,
.p4all-form .p4all-next[disabled]{
    opacity:.55;
    cursor:not-allowed;
    filter:grayscale(35%);
    box-shadow:none;
}