/* Shortcode: [qr_space]
   Fichier: assets/css/shortcodes/qr-space.css
   Style "app" moderne, cohérent avec account.css
-------------------------------------------------- */

:root{
  --qs-bg: #f6f8fb;
  --qs-card: #ffffff;
  --qs-text: #0f172a;
  --qs-muted: #64748b;
  --qs-border: #e5e7eb;
  --qs-primary: #2563eb;
  --qs-primary-ghost: rgba(37,99,235,.10);
  --qs-success: #16a34a;
  --qs-success-bg: #e8f8ee;
  --qs-warning: #f59e0b;
  --qs-danger: #dc2626;
  --qs-danger-bg: #fee2e2;
  --qs-radius: 16px;
  --qs-radius-sm: 12px;
  --qs-shadow: 0 12px 28px rgba(2,6,23,.08);
  --qs-shadow-soft: 0 6px 18px rgba(2,6,23,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --qs-bg: #0b1220;
    --qs-card: #0f172a;
    --qs-text: #e5e7eb;
    --qs-muted: #94a3b8;
    --qs-border: #1f2a44;
    --qs-primary: #3b82f6;
    --qs-primary-ghost: rgba(59,130,246,.16);
    --qs-success-bg: rgba(22,163,74,.12);
    --qs-danger-bg: rgba(220,38,38,.12);
    --qs-shadow: 0 12px 28px rgba(2,6,23,.45);
    --qs-shadow-soft: 0 8px 20px rgba(2,6,23,.35);
  }
}

/* Page container */
.qrspace{
  max-width: 1100px;
  margin: 32px auto 56px;
  padding: 0 16px;
  color: var(--qs-text);
}

/* Invité (non connecté) */
.qrspace-guest{
  max-width: 720px;
  margin: 48px auto;
  padding: 22px;
  background: var(--qs-card);
  border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius);
  box-shadow: var(--qs-shadow);
  text-align: center;
}
.qrspace-guest p{
  margin: 0 0 12px;
  color: var(--qs-muted);
}

/* Header */
.qrspace-head{
  margin: 8px 0 18px;
  display: grid;
  gap: 8px;
}
.qrspace-title{
  margin: 0;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.qrspace-sub{
  margin: 0;
  color: var(--qs-muted);
}
.qrspace-actions{
  margin-top: 8px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Liens */
.av-link{
  color: var(--qs-primary);
  font-weight: 600;
  text-decoration: none;
}
.av-link:hover{ text-decoration: underline; }
.av-link.danger{ color: var(--qs-danger); }
.av-link.danger:hover{ text-decoration: underline; }

/* Grille des QR */
.qrspace-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px){
  .qrspace-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1080px){
  .qrspace-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Carte QR */
.qr-card{
  background: var(--qs-card);
  border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius);
  box-shadow: var(--qs-shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .18s ease;
}
.qr-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--qs-shadow);
}

/* Header carte */
.qr-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--qs-border);
  gap: 12px;
}
.qr-card-title{
  font-weight: 700;
  letter-spacing: -.01em;
}
.qr-card-status{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
}
.qr-card-status.ok{
  background: var(--qs-success-bg);
  color: var(--qs-success);
  border: 1px solid rgba(22,163,74,.25);
}
.qr-card-status.off{
  background: #fff7ed;
  color: var(--qs-warning);
  border: 1px solid rgba(245,158,11,.25);
}

/* Corps carte */
.qr-card-body{
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.qr-card-line{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: baseline;
}
.qr-card-line .k{
  font-size: 12px;
  color: var(--qs-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.qr-card-line .v{
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Actions carte : les 2 boutons sur UNE ligne */
.qr-card-actions{
  margin-top: auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--qs-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.qr-card-actions .av-link{
  font-size: 14px;
}

/* États utiles */
.qr-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  background: var(--qs-primary-ghost);
  color: var(--qs-primary);
}
.qr-badge.danger{
  background: var(--qs-danger-bg);
  color: var(--qs-danger);
}

/* Emptystate (si aucun QR) */
.qr-empty{
  margin: 22px 0 10px;
  padding: 24px;
  background: var(--qs-card);
  border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius);
  box-shadow: var(--qs-shadow-soft);
  text-align: center;
  color: var(--qs-muted);
}

/* Petites animations d’entrée */
.qrspace-head,
.qrspace-grid .qr-card,
.qrspace-guest,
.qr-empty{
  animation: qs-pop .18s ease-out;
}
@keyframes qs-pop{
  from { transform: translateY(3px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* Accessibilité focus */
.qr-card:focus-within,
.avqr-btn:focus-visible,
.av-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--qs-primary-ghost);
  border-radius: 12px;
}

/* Cache le faux champ d'entrée utilisé par av-qr.js dans le stack "dynamic" */
.avqr-hidden-input{
  display: none;
}

/* Petits écrans : compacter un peu */
@media (max-width: 380px){
  .qr-card-line{ grid-template-columns: 1fr; }
}

/* Impression : cartes sobres */
@media print{
  .qrspace-actions,
  .qr-card-actions,
  .avqr-btn,
  .av-link{
    display:none !important;
  }
  .qr-card{ box-shadow: none; }
}

/* ===== Panel d'édition dans une carte ===== */
.qr-card-edit .avqr-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
}
.qr-card-edit .avqr-label,
.qr-card-edit .avqr-btn--ghost{
  margin: 0 auto;
  color: white;
}
.qr-card-edit .avqr-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.qr-card-edit .avqr-input{
  width: 100%;
  max-width: 260px;
}
.qr-card-edit .avqr-btn{
  align-self: center;
  width: auto;
}
.qr-card-edit-actions{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* Bouton “refresh” dans le panneau display */
.avqr-btn--success{
  background:#16a34a;
  box-shadow:0 6px 16px rgba(22,163,74,.25);
}
.avqr-btn--success:hover{
  background:#15803d;
  box-shadow:0 8px 22px rgba(22,163,74,.32);
}
.qrspace-display-head svg{
  display:inline-block;
}

/* Bouton “Acheter ce QR code” (panneau création) */
#qrspace-buy-btn{
  color: #222;
  background-color: #f1c40f;
  box-shadow:0 6px 16px rgba(22,163,74,.25);
}
#qrspace-buy-btn:hover{
  background:#eabc04;
  box-shadow:0 8px 22px rgba(22,163,74,.32);
}

/* ========= Abonnement (ligne sous les actions) ========= */

/* Date d'expiration en rouge si dépassée */
.qr-expired-date{
  color: #dc2626;
  font-weight: 600;
}

/* Ligne abonnement sous les actions */
.qr-card-subscription{
  margin: 4px 16px 10px;
  font-size: 0.85rem;
}

/* Texte "Abonnement inactif" en orange */
.qr-sub-status--expired{
  color: var(--qs-warning);
  font-weight: 600;
}

/* Lien/bouton “Arrêter l’abonnement” */
.qr-sub-cancel{
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
}
.qr-sub-cancel:hover{
  color: #111827;
}

/* Bouton Renouveler en orange */
.avqr-btn--warning{
  background: var(--qs-warning);
  border-color: var(--qs-warning);
  color: #fff;
}
.avqr-btn--warning:hover{
  filter: brightness(1.05);
}


/* CTA création (titre + bouton centrés) */
.qrspace-create-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: 18px 0 6px;
  text-align:center;
}
.qrspace-create-title{
  margin:0;
}

.qrspace-display-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: 18px 0 6px;
  text-align:center;
}

.qrspace-title2 {
  margin:0;
}

/* Masquer l'input du stack dyn (auto-rempli) */
[data-stack-id="dyn"] [data-avqr="input"]{
  display:none !important;
}

[data-stack-id="dyn"]  {
  padding-top: 0px;
  padding-bottom: 5px;
}

#qrspace-gen-btn {
  margin-top: 20px;
}


/* Boutons acheter/annuler centrés */
.qrspace-create-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:16px;
}
.qrspace-create-actions .avqr-btn{
  width:auto;           /* évite full width */
  min-width: 240px;     /* optionnel, look “propre” */
}

/* Dans l'espace QR : pas de personnalisation graphique UNIQUEMENT dans la création */
#qrspace-create .avqr-tabs,
#qrspace-create .avqr-panel{
  display: none !important;
}

/* Dans la création : on ne télécharge pas depuis ici */
#qrspace-create .avqr-export-panel{
  display: none !important;
}

/* Dans "Afficher QR" : on masque juste l'input (URL connue) */
#qrspace-display [data-avqr="input"]{
  display: none !important;
}

.qrspace-help{
  margin-top: 10px;
  text-align: center;
  opacity: .75;
  font-size: 14px;
}

#qrspace-create .qrspace-help, .qrspace-slugline {
  opacity: 1;
  color: #4b5563; /* ou une couleur déjà utilisée chez toi */
}

/* ====== Create panel: tighten vertical spacing ====== */

/* CTA plus compact */
.qrspace-create-cta{
  gap: 10px;
  margin: 10px 0 6px;
}

.qrspace-help{
  margin-top: 4px;
  opacity: 1;
  color: var(--qs-muted);
}

/* ligne slug : compacte + un peu “badge” */
.qrspace-slugline{
  margin-top: 2px;
  font-size: 14px;
}
.qrspace-slugline strong{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border: 1px solid var(--qs-border);
  border-radius: 999px;
  background: var(--qs-card);
  color: var(--qs-text);
  font-weight: 800;
  letter-spacing: .06em;
}

/* Réduit l’espace autour du QR rendu par le stack */
#qrspace-create [data-stack-id="dyn"]{
  margin-top: 6px;
}

/* Le gros “vide” vient souvent du preview-row et du bloc preview */
#qrspace-create [data-stack-id="dyn"] .avqr-preview-row{
  margin: 6px auto 8px;
}

#qrspace-create [data-stack-id="dyn"] [data-avqr="preview"]{
  padding: 4px; /* ton “cadre” compact */
}

/* Boutons bas : un peu plus proches du QR */
#qrspace-create .qrspace-create-actions{
  margin-top: 10px;
}


.avqr-modal[hidden]{ display:none !important; }

.avqr-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.avqr-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.avqr-modal-dialog{
  position: relative;
  width: min(560px, calc(100% - 32px));
  margin: 8vh auto;
  background: var(--qs-card, #fff);
  border: 1px solid var(--qs-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: var(--qs-shadow, 0 12px 28px rgba(2,6,23,.18));
  padding: 16px;
}

.avqr-modal-head h3{
  margin: 0 0 12px;
  text-align: center;
}

.avqr-modal-tabs{
  display:flex;
  gap: 10px;
  justify-content:center;
  margin-bottom: 14px;
}

.avqr-modal-tabs .avqr-tab{
  border: 1px solid var(--qs-border, #e5e7eb);
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.avqr-modal-tabs .avqr-tab.is-active{
  background: var(--qs-primary-ghost, rgba(37,99,235,.10));
  border-color: rgba(37,99,235,.25);
}

.avqr-modal-body{
  display:grid;
  gap: 12px;
}

.avqr-modal-body input,
.avqr-modal-body select{
  width: 100%;
}

.avqr-modal-actions{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  justify-content:center;
}



/* ===== WiFi tab inside modal ===== */
.avqr-tabpanel.avqr-wifi{
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

/* Field wrapper */
.avqr-tabpanel.avqr-wifi .avqr-field{
  display: grid;
  gap: 6px;
}

/* Labels */
.avqr-tabpanel.avqr-wifi .avqr-field-label{
  font-size: 13px;
  color: rgba(255,255,255,.75);
}

/* Inputs + Select unified look */
.avqr-tabpanel.avqr-wifi input[type="text"],
.avqr-tabpanel.avqr-wifi input[type="password"],
.avqr-tabpanel.avqr-wifi select{
  width: 100%;
  max-width: 420px;                 /* ✅ pas full width visuellement */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}

.avqr-tabpanel.avqr-wifi input::placeholder{
  color: rgba(255,255,255,.45);
}

/* Select: make it look like a select (arrow + separator) */
.avqr-tabpanel.avqr-wifi select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.16), rgba(255,255,255,.16));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 38px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 18px;
  background-repeat: no-repeat;
}

/* Focus */
.avqr-tabpanel.avqr-wifi input:focus,
.avqr-tabpanel.avqr-wifi select:focus{
  border-color: rgba(59,130,246,.6);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}

/* Checkbox row aligned */
.avqr-tabpanel.avqr-wifi .avqr-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: rgba(255,255,255,.85);
}

.avqr-tabpanel.avqr-wifi .avqr-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #3b82f6;
}