/* DJOBI – Product Report System */

/* ───────── Lien "Signaler un problème avec ce produit" ───────── */
.djobi-pr-wrapper {
  margin-top: 4px;
}

.djobi-pr-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #1a5fb4;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.djobi-pr-trigger::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%23777" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>') no-repeat center;
  background-size: contain;
  opacity: 0.85;
}

.djobi-pr-trigger:hover {
  color: #154a8d;
  text-decoration: underline;
}

.djobi-pr-trigger:hover::before {
  opacity: 1;
}

.dpr-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ───────── Modal / overlay ───────── */

.dpr-overlay{
    position:fixed;
    inset:0;
    z-index:2147483600;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:rgba(0,0,0,.24);
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Ubuntu,
        Cantarell,
        "Noto Sans",
        sans-serif;
    isolation:isolate;
    animation:dpr-overlay-in .16s ease both;
}

.dpr-overlay.fade-out{
    pointer-events:none;
    animation:dpr-overlay-out .20s ease both;
}

.dpr-modal{
    display:flex;
    width:min(100%,460px);
    max-height:calc(100dvh - 28px);
    flex-direction:column;
    margin:0;
    overflow:hidden;
    border:0;
    border-radius:6px;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,.25);
    color:#111;
    animation:dpr-modal-in .16s ease both;
}

.dpr-overlay.fade-out .dpr-modal{
    animation:dpr-modal-out .20s ease both;
}

.dpr-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 12px 8px;
    border:0;
    background:#fff;
}

.dpr-title{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#111!important;
    box-shadow:none!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1.3!important;
}

/* Croix seule, sans cadre. */
.dpr-close{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#777!important;
    box-shadow:none!important;
    outline:0!important;
    font:inherit!important;
    font-size:22px!important;
    font-weight:400!important;
    line-height:1!important;
    cursor:pointer!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    transition:
        color .16s ease,
        transform .16s ease!important;
}

.dpr-close:hover{
    border:0!important;
    background:transparent!important;
    color:#111!important;
    transform:scale(1.08);
}

.dpr-close:focus-visible{
    outline:1px dotted #555!important;
    outline-offset:2px!important;
}

/* ───────── Formulaire ───────── */

.dpr-form{
    padding:0 12px 12px;
    overflow-x:hidden;
    overflow-y:auto;
    background:#fff;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.dpr-label{
    display:block;
    margin:10px 0 6px!important;
    color:#111!important;
    font-size:12px!important;
    font-weight:600!important;
    line-height:1.3!important;
}

.dpr-label:first-child{
    margin-top:0!important;
}

.dpr-select,
.dpr-textarea{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border:1px solid rgba(0,0,0,.16)!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#111!important;
    box-shadow:none!important;
    outline:0!important;
    font:inherit!important;
    font-size:12px!important;
    font-weight:400!important;
    appearance:none;
    -webkit-appearance:none;
}

.dpr-select{
    min-height:36px!important;
    height:36px!important;
    padding:7px 34px 7px 10px!important;
    background-image:
        linear-gradient(45deg,transparent 50%,#555 50%),
        linear-gradient(135deg,#555 50%,transparent 50%)!important;
    background-position:
        calc(100% - 15px) 15px,
        calc(100% - 10px) 15px!important;
    background-repeat:no-repeat!important;
    background-size:5px 5px,5px 5px!important;
}

.dpr-textarea{
    min-height:92px!important;
    padding:9px 10px!important;
    line-height:1.45!important;
    resize:vertical;
}

.dpr-select:hover,
.dpr-textarea:hover{
    border-color:rgba(0,0,0,.28)!important;
}

.dpr-select:focus-visible,
.dpr-textarea:focus-visible{
    border-color:rgba(0,0,0,.28)!important;
    outline:3px solid rgba(11,87,208,.35)!important;
    outline-offset:2px!important;
    box-shadow:none!important;
}

.dpr-select:focus:not(:focus-visible),
.dpr-textarea:focus:not(:focus-visible){
    outline:0!important;
    box-shadow:none!important;
}

.dpr-select option[disabled]{
    color:#999;
}

.dpr-hint{
    margin:8px 0 12px!important;
    color:rgba(0,0,0,.68)!important;
    font-size:11px!important;
    font-weight:400!important;
    line-height:1.45!important;
}

.dpr-support-link{
    color:#0b57d0!important;
    font:inherit!important;
    font-weight:500!important;
    text-decoration:underline!important;
    text-underline-offset:2px;
}

.dpr-support-link:hover{
    color:#094fbf!important;
    text-decoration:underline!important;
}

.dpr-support-link:focus-visible{
    border-radius:2px;
    outline:2px solid rgba(11,87,208,.35)!important;
    outline-offset:2px!important;
}

/* ───────── Bouton + loader ───────── */

.dpr-btn-container{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:10px;
}

.dpr-submit{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:82px!important;
    min-height:36px!important;
    height:auto!important;
    margin:0!important;
    padding:7px 12px!important;
    border:1px solid #0b57d0!important;
    border-radius:8px!important;
    background:#0b57d0!important;
    color:#fff!important;
    box-shadow:none!important;
    outline:0!important;
    font:inherit!important;
    font-size:12px!important;
    font-weight:600!important;
    line-height:1.1!important;
    cursor:pointer!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    transition:
        background-color .16s ease,
        border-color .16s ease!important;
}

.dpr-submit:hover{
    border-color:#094fbf!important;
    background:#094fbf!important;
    color:#fff!important;
    opacity:1!important;
    transform:none!important;
}

.dpr-submit:focus-visible{
    outline:3px solid rgba(11,87,208,.35)!important;
    outline-offset:2px!important;
}

.dpr-submit:disabled{
    opacity:.55!important;
    pointer-events:none!important;
    cursor:wait!important;
}

@keyframes dpr-overlay-in{
    from{opacity:0}
    to{opacity:1}
}

@keyframes dpr-overlay-out{
    from{opacity:1}
    to{opacity:0}
}

@keyframes dpr-modal-in{
    from{
        opacity:0;
        transform:scale(.985) translateY(4px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

@keyframes dpr-modal-out{
    from{
        opacity:1;
        transform:scale(1) translateY(0);
    }
    to{
        opacity:0;
        transform:scale(.985) translateY(4px);
    }
}

@media(max-width:380px){
    .dpr-overlay{
        padding:10px;
    }

    .dpr-header{
        padding:10px 10px 7px;
    }

    .dpr-form{
        padding:0 10px 10px;
    }

    .dpr-btn-container{
        gap:6px;
    }

    .dpr-submit{
        min-width:0!important;
        padding-right:10px!important;
        padding-left:10px!important;
        font-size:11px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .dpr-overlay,
    .dpr-modal,
    .dpr-overlay.fade-out,
    .dpr-overlay.fade-out .dpr-modal{
        animation:none!important;
        transition:none!important;
    }
}

/* ───────── Message de confirmation ───────── */

.dpr-success{
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    margin:0;
    padding:12px 13px;
    border:1px solid #cfe5d6;
    border-radius:6px;
    background:#f4faf6;
    color:#25633b;
    box-shadow:none;
    opacity:0;
    transform:translateY(4px);
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.dpr-success.is-visible{
    opacity:1;
    transform:translateY(0);
}

.dpr-success.is-leaving{
    opacity:0;
    transform:translateY(-2px);
}

.dpr-success-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
    width:20px;
    height:20px;
    margin-top:1px;
    color:#2f8a4c;
}

.dpr-success-icon svg{
    display:block;
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dpr-success-message{
    margin:0!important;
    padding:0!important;
    color:#25633b!important;
    font:inherit!important;
    font-size:12px!important;
    font-weight:400!important;
    line-height:1.5!important;
    text-align:left!important;
}

.dpr-success-message strong,
.dpr-success strong{
    font-weight:400!important;
}

.dpr-locked {
  overflow: hidden;
}

/* ───────── Loader style ───────── */
.dpr-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.dpr-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: #333;
  border-radius: 50%;
  animation: dpr-spin 0.9s linear infinite;
}

@keyframes dpr-spin {
  to { transform: rotate(360deg); }
}