/* === Kitsuneya Guard Modal — Light (white) ============================== */
:root{
    --kp-brand:#F20C0E;
    --kp-accent:#FBB035;
    --kp-text:#1c1c1c;
    --kp-muted:#6b6b6b;
    --kp-bg:#ffffff;
    --kp-border:#ececec;
    --kp-shadow: 0 18px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
}

#kpreorder-guard-modal{position:fixed;inset:0;z-index:2147483000;display:none;font-family:inherit}
#kpreorder-guard-modal.is-open{display:block}

/* Overlay léger (blanc global → overlay soft + léger blur) */
#kpreorder-guard-modal .kpre-g-overlay{
    position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);
}

/* Dialog blanc */
#kpreorder-guard-modal .kpre-g-dialog{
    position:relative;max-width:560px;margin:10vh auto;background:var(--kp-bg);
    color:var(--kp-text);border-radius:18px;overflow:hidden;box-shadow:var(--kp-shadow);
    border:1px solid var(--kp-border); transform:translateY(10px) scale(.985); opacity:0;
    transition:transform .16s ease, opacity .16s ease;
}
#kpreorder-guard-modal.is-open .kpre-g-dialog{transform:translateY(0) scale(1);opacity:1}

/* Header : bande brand fine sur fond blanc */
.kpre-g-header{
    position:relative;display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-bottom:1px solid var(--kp-border); background:#fff;
}
.kpre-g-header::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
    background:linear-gradient(90deg, var(--kp-brand) 0%, var(--kp-accent) 100%);
}
.kpre-g-title{
    font-size:1.05rem;font-weight:900;letter-spacing:.2px;text-transform:uppercase;
    display:flex;align-items:center;gap:.55rem; color:#222;
}
.kpre-g-title::before{
    content:""; width:18px;height:18px;flex:0 0 18px; border-radius:4px; background:var(--kp-brand);
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm1 14h-2v-2h2v2Zm0-4h-2V6h2v6Z"/></svg>') center/contain no-repeat;
}

/* Close */
.kpre-g-close{
    appearance:none;background:transparent;border:0;cursor:pointer;line-height:1;
    font-size:1.6rem;color:#999;border-radius:8px;padding:4px 8px;
}
.kpre-g-close:hover{color:#666}
.kpre-g-close:focus-visible{outline:3px solid rgba(242,12,14,.25);outline-offset:2px}

/* Body (blanc) */
.kpre-g-body{
    padding:20px 18px;font-size:1.02rem;line-height:1.5;color:#222;
}

/* Mobile */
@media (max-width:520px){
    #kpreorder-guard-modal .kpre-g-dialog{margin:8vh 12px;border-radius:16px}
    .kpre-g-title{font-size:1rem}
    .kpre-g-body{font-size:1rem}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    #kpreorder-guard-modal .kpre-g-dialog{transition:none}
}

/* ============================================================
   KITSUNEYA – Modal Buttons (standalone theme-matching styles)
   ============================================================ */

/* --- Primary button: "View cart" --- */
.kpre-g-btn-primary {
    background-color: #fbb034;           /* orange thème */
    color: #fff;                         /* texte blanc */
    border-radius: 3px;
    padding: 10px 15px;
    outline: none;
    border: none;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-bottom: 0;
    position: relative;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.kpre-g-btn-primary span {
    position: relative;
    z-index: 1;
    color: #000; /* même logique que ton thème */
}
.kpre-g-btn-primary:hover {
    background-color: #000; /* hover noir comme ton thème */
    color: #fff;
}
.kpre-g-btn-primary:hover span {
    color: #fff;
}

/* --- Secondary button: "Cancel" --- */
.kpre-g-btn-secondary {
    background-color: #6c757d;          /* gris thème */
    color: #fff;
    border-radius: 3px;
    padding: 10px 15px;
    outline: none;
    border: none;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-bottom: 0;
    position: relative;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.kpre-g-btn-secondary span {
    color: #fff;
}
.kpre-g-btn-secondary:hover {
    background-color: #5a6268; /* hover plus sombre */
    color: #fff;
}
.kpre-g-btn-secondary:hover span {
    color: #fff;
}

/* --- Alignement dans la modale --- */
.kpre-g-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #ececec;
}

/* --- Optionnel : focus visible accessible --- */
.kpre-g-btn-primary:focus-visible,
.kpre-g-btn-secondary:focus-visible {
    outline: 2px solid rgba(251,176,53,0.5);
    outline-offset: 2px;
}