/* TOPRESTO — Licence Démo (scoped, theme-safe)
   Styles:
   - Apple (full white, clean SaaS)
   - Glass (very subtle, light-compatible)
*/

.topresto-demo-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding:10px 0;
  --tr-accent1:#2563eb;
  --tr-accent2:#1d4ed8;
  --tr-radius:22px;
  --tr-text:#0f172a;
  --tr-muted:#64748b;
}

.topresto-demo-card{
  width:100%;
  max-width:420px;
  border-radius:var(--tr-radius);
  overflow:hidden;
  box-sizing:border-box;
  position:relative;
}

/* -------- Theme A: Apple (default) -------- */
.topresto-demo-wrap[data-theme="apple"] .topresto-demo-card,
.topresto-demo-wrap[data-theme="light"] .topresto-demo-card,
.topresto-demo-wrap:not([data-theme]) .topresto-demo-card{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 20px 55px rgba(2,6,23,.12);
}

/* -------- Theme B: Glass (discreet, light-friendly) -------- */
.topresto-demo-wrap[data-theme="glass"] .topresto-demo-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 70px rgba(2,6,23,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topresto-demo-wrap[data-theme="glass"] .topresto-demo-card:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 25% 0%, rgba(37,99,235,.16), transparent 52%),
    radial-gradient(circle at 80% 25%, rgba(29,78,216,.12), transparent 55%),
    radial-gradient(circle at 50% 120%, rgba(2,6,23,.06), transparent 50%);
  pointer-events:none;
}

/* Head: soft band (TOPREST'O vibe, but light) */
.topresto-card-head{
  padding:24px 26px 16px;
  background:
    linear-gradient(180deg, rgba(37,99,235,.10) 0%, rgba(37,99,235,.05) 38%, rgba(255,255,255,0) 100%);
}

.topresto-demo-inner{ position:relative; z-index:1; }

.topresto-demo-title{
  text-align:center;
  font-size:24px;
  font-weight:900;
  margin:0 0 6px;
  letter-spacing:.2px;
  color:var(--tr-text);
}
.topresto-demo-sub{
  text-align:center;
  font-size:13px;
  margin:0;
  line-height:1.4;
  color:var(--tr-muted);
}

/* Body */
.topresto-form{ padding: 0 26px 26px; }

.topresto-demo-label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin: 10px 0 8px;
  color:#334155;
}
.topresto-required{ color:#ef4444; }

/* Email row (icon OUTSIDE the input) */
.topresto-email-row{
  display:flex !important;
  align-items:center !important;
  gap:12px;
}

/* Icon bubble */
.topresto-email-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:999px;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;        /* ✅ force centrage vertical */
  box-sizing:border-box;
  line-height:0 !important;            /* ✅ anti-baseline */
  vertical-align:middle !important;    /* ✅ anti theme inline-block */
  overflow:hidden;
  position:relative !important;        /* ✅ stabilité alignement + anti thème */
  top:0 !important;                    /* ✅ anti theme */
  transform:none !important;           /* ✅ anti theme */
  color: var(--tr-accent1);
}

/* ✅ SVG ULTRA SAFE (anti thème WP / KingComposer / Bootstrap) */
.topresto-email-icon svg,
.topresto-email-svg{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  flex-shrink:0 !important;
  line-height:0 !important;
  vertical-align:middle !important;
  transform:none !important;
}

/* ✅ anti-marges globales injectées par thèmes/builder */
.topresto-email-icon,
.topresto-email-icon *{
  margin:0 !important;
}

/* (conserve ton ancien bloc, mais le nouveau ci-dessus le rend inattaquable) */
.topresto-email-svg{
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

.topresto-demo-wrap[data-theme="glass"] .topresto-email-icon{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
.topresto-demo-wrap[data-theme="apple"] .topresto-email-icon,
.topresto-demo-wrap[data-theme="light"] .topresto-email-icon,
.topresto-demo-wrap:not([data-theme]) .topresto-email-icon{
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

.topresto-input{
  width:100%;
  flex:1;
  height:52px;
  padding: 0 18px;
  border-radius:999px;
  font-size:14px;
  line-height:normal;
  box-sizing:border-box;
  transition: .18s ease;
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#ffffff;
  color:#0f172a;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.topresto-demo-wrap[data-theme="glass"] .topresto-input{
  background: rgba(255,255,255,.92);
}
.topresto-input::placeholder{ color:#94a3b8; }

.topresto-input:focus{
  outline:none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.16), 0 14px 32px rgba(2,6,23,.10);
  transform: translateY(-1px);
}

/* Valid/invalid */
.topresto-valid{ border-color: rgba(34,197,94,.85) !important; }
.topresto-invalid{ border-color: rgba(239,68,68,.85) !important; }

/* Ultra modern TOPREST'O (light-friendly) */
.topresto-demo-wrap[data-theme="modern"] .topresto-demo-card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 26px 70px rgba(15,23,42,.14);
}
.topresto-demo-wrap[data-theme="modern"] .topresto-card-head{
  padding: 18px 22px 14px;
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,0));
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.topresto-demo-wrap[data-theme="modern"] .topresto-demo-inner{
  padding: 16px 22px 22px;
}
.topresto-demo-wrap[data-theme="modern"] .topresto-demo-title{
  color: var(--tr-text);
  font-size: 21px;
}
.topresto-demo-wrap[data-theme="modern"] .topresto-demo-sub{
  margin-bottom: 14px;
}
.topresto-demo-wrap[data-theme="modern"] .topresto-email-icon{
  background: #f1f5ff;
  border: 1px solid rgba(37,99,235,.16);
  box-shadow: 0 10px 20px rgba(37,99,235,.10);
}
.topresto-demo-wrap[data-theme="modern"] .topresto-input{
  background: #fbfcff;
  border-color: rgba(15,23,42,.10);
}
.topresto-demo-wrap[data-theme="modern"] .topresto-email-row:focus-within .topresto-email-icon{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 14px 26px rgba(37,99,235,.16);
}

/* Button */
.topresto-btn{
  margin-top:18px;
  width:100%;
  border:0;
  border-radius:18px;
  padding: 14px 16px;
  font-size:15px;
  font-weight:900;
  color:#fff;
  cursor:pointer;
  background: linear-gradient(135deg, var(--tr-accent1), var(--tr-accent2));
  transition:.18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transform: translateZ(0);
}
.topresto-btn:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 14px 26px rgba(37,99,235,.30);
}
.topresto-btn:active{ transform: translateY(0) scale(.99); }
.topresto-btn[disabled]{ opacity:.75; cursor:not-allowed; box-shadow:none; transform:none; }

.topresto-loader{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top:2px solid #fff;
  border-radius:50%;
  animation: topresto-spin .7s linear infinite;
  display:none;
}
@keyframes topresto-spin{ to{ transform: rotate(360deg); } }

/* Messages + success */
.topresto-msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  text-align:center;
  display:none;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  color:#0f172a;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}

.topresto-success-area{
  margin-top:14px;
  display:none;
  text-align:center;
}
.topresto-check{
  width:56px; height:56px;
  margin:0 auto 10px;
  border-radius:50%;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.28);
  display:flex; align-items:center; justify-content:center;
}
.topresto-check svg{
  width:30px; height:30px;
  stroke:#22c55e;
  stroke-width:3.2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.topresto-check path{
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation: topresto-draw .55s ease forwards;
}
@keyframes topresto-draw{ to{ stroke-dashoffset:0; } }

.topresto-small{
  font-size:12px;
  color: #94a3b8;
  margin-top:10px;
  text-align:center;
}

.topresto-hp{ position:absolute; left:-5000px; top:-5000px; opacity:0; }

@media (max-width:480px){
  .topresto-demo-card{ max-width:100%; }
}