/* ═══════════════════════════════════════════
   SHARED SIGNUP MODAL — used by all 3 sites
   Class prefix: su- (signup)
   ═══════════════════════════════════════════ */

/* Overlay */
.su-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.su-overlay.active{opacity:1;pointer-events:all}
.su-modal{background:#fff;border-radius:24px;width:100%;max-width:580px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.18);transform:translateY(20px) scale(.97);transition:transform .5s cubic-bezier(.34,1.56,.64,1);position:relative}
.su-overlay.active .su-modal{transform:translateY(0) scale(1)}

/* Close */
.su-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#f5f5f3;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#999;border:none;cursor:pointer;z-index:2;transition:all .2s}
.su-close:hover{background:#eee;color:#333}

/* Header / progress */
.su-header{padding:32px 32px 0}
.su-progress{display:flex;gap:6px;margin-bottom:24px}
.su-bar{flex:1;height:4px;background:#eee;border-radius:2px;transition:background .3s}
.su-bar.active{background:var(--su-accent,#FF6154)}
.su-bar.done{background:#34C759}

/* Step */
.su-step{display:none}
.su-step.active{display:block}
.su-step-label{font-size:.75rem;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.su-title{font-size:1.35rem;font-weight:800;color:#1a1f36;margin-bottom:8px;font-family:var(--su-font-display,inherit)}
.su-desc{font-size:.9rem;color:#6e6e68;margin-bottom:16px}

/* Body / Footer */
.su-body{padding:24px 32px}
.su-footer{padding:16px 32px 32px;display:flex;justify-content:space-between;align-items:center}
.su-footer-center{justify-content:center}
.su-skip{font-size:.85rem;color:#999;font-weight:500;background:none;border:none;cursor:pointer;transition:color .2s}
.su-skip:hover{color:#333}
.su-next{font-weight:700;font-size:.9rem;color:#fff;background:var(--su-accent,#FF6154);padding:12px 32px;border-radius:9999px;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.su-next:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.15)}

/* Chips */
.su-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.su-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#f8f8f6;border:2px solid #eee;border-radius:9999px;font-size:.85rem;font-weight:500;color:#4a4a45;cursor:pointer;transition:all .25s;user-select:none}
.su-chip:hover{border-color:#ccc;background:#fff}
.su-chip.selected{background:rgba(var(--su-accent-rgb,255,97,84),.06);border-color:var(--su-accent,#FF6154);color:var(--su-accent-dark,#E5453A)}
.su-chip-icon{font-size:1.1rem}

/* Search */
.su-search-wrap{position:relative;margin-bottom:16px}
.su-search{width:100%;padding:12px 16px 12px 42px;background:#f8f8f6;border:2px solid #eee;border-radius:14px;font-size:.9rem;color:#1a1f36;outline:none;transition:all .2s;font-family:inherit}
.su-search:focus{border-color:var(--su-accent,#FF6154);background:#fff;box-shadow:0 0 0 4px rgba(var(--su-accent-rgb,255,97,84),.08)}
.su-search::placeholder{color:#ccc}
.su-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#999;font-size:1rem;pointer-events:none}

/* Categories */
.su-cats{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.su-cats::-webkit-scrollbar{display:none}
.su-cat{font-size:.75rem;font-weight:600;padding:6px 14px;border-radius:9999px;white-space:nowrap;background:#f8f8f6;border:1px solid #eee;color:#6e6e68;cursor:pointer;transition:all .2s}
.su-cat:hover{border-color:#ccc}
.su-cat.active{background:#1a1f36;border-color:#1a1f36;color:#fff}

/* Brand list */
.su-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:260px;overflow-y:auto;padding-right:4px}
.su-brands::-webkit-scrollbar{width:4px}
.su-brands::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.su-brand-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:.8rem;font-weight:500;color:#4a4a45;cursor:pointer;transition:all .2s;border:1.5px solid transparent}
.su-brand-item:hover{background:#f8f8f6}
.su-brand-item.selected{background:rgba(var(--su-accent-rgb,255,97,84),.05);border-color:var(--su-accent,#FF6154);color:var(--su-accent-dark,#E5453A)}
.su-brand-check{width:18px;height:18px;border:2px solid #ddd;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:transparent;flex-shrink:0;transition:all .2s}
.su-brand-item.selected .su-brand-check{background:var(--su-accent,#FF6154);border-color:var(--su-accent,#FF6154);color:#fff}
.su-brand-count{font-size:.8rem;color:#999;margin-top:12px}
.su-brand-count span{color:var(--su-accent,#FF6154);font-weight:700}

/* Custom brand */
.su-custom-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;margin-top:12px;background:#f8f8f6;border:2px dashed #ddd;border-radius:14px;font-size:.85rem;color:#999;cursor:pointer;transition:all .2s;font-family:inherit}
.su-custom-trigger:hover{border-color:var(--su-accent,#FF6154);color:var(--su-accent,#FF6154)}
.su-custom-input{width:100%;padding:10px 14px;margin-top:8px;background:#fff;border:2px solid var(--su-accent,#FF6154);border-radius:14px;font-size:.85rem;color:#1a1f36;outline:none;font-family:inherit}
.su-custom-input::placeholder{color:#ccc}
.su-custom-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.su-custom-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(var(--su-accent-rgb,255,97,84),.06);border:1.5px solid var(--su-accent,#FF6154);border-radius:9999px;font-size:.78rem;font-weight:600;color:var(--su-accent-dark,#E5453A)}
.su-custom-tag button{font-size:.85rem;color:var(--su-accent,#FF6154);line-height:1;padding:0;background:none;border:none;cursor:pointer}

/* City */
.su-city-wrap{position:relative}
.su-city{width:100%;padding:14px 18px;background:#f8f8f6;border:2px solid #eee;border-radius:14px;font-size:1rem;color:#1a1f36;outline:none;transition:all .2s;font-family:inherit}
.su-city:focus{border-color:var(--su-accent,#FF6154);background:#fff;box-shadow:0 0 0 4px rgba(var(--su-accent-rgb,255,97,84),.08)}
.su-city::placeholder{color:#ccc}
.su-city-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 12px 40px rgba(0,0,0,.12);border:1px solid #eee;max-height:180px;overflow-y:auto;display:none;z-index:10}
.su-city-suggestions.active{display:block}
.su-city-item{padding:10px 18px;font-size:.9rem;color:#4a4a45;cursor:pointer;transition:background .15s}
.su-city-item:hover{background:#f8f8f6}

/* Success */
.su-success{text-align:center;padding:24px 0}
.su-success-icon{width:72px;height:72px;margin:0 auto 20px;background:#E8F9ED;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;animation:suPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes suPop{from{transform:scale(0)}to{transform:scale(1)}}
.su-success h3{font-size:1.3rem;font-weight:800;color:#1a1f36;margin-bottom:10px;font-family:var(--su-font-display,inherit)}
.su-success p{font-size:.9rem;color:#6e6e68;max-width:360px;margin:0 auto}

/* Confetti */
.su-confetti{position:fixed;inset:0;z-index:1001;pointer-events:none}

/* Responsive */
@media(max-width:768px){
  .su-header,.su-body,.su-footer{padding-left:20px;padding-right:20px}
  .su-brands{grid-template-columns:repeat(2,1fr)}
  .su-modal{border-radius:18px}
}
@media(max-width:480px){
  .su-brands{grid-template-columns:1fr}
}