/* ============================================================
   FESTNEST — SHARED COMPONENTS  |  assets/css/components.css
   ============================================================ */

/* ── Layout ── */
.section{padding:80px var(--page-padding)}
.section--white{background:#fff}
.section--bg{background:var(--bg)}
.section-header{text-align:center;margin-bottom:56px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:10px 22px;border-radius:var(--radius);
  font-size:13px;font-weight:700;cursor:pointer;
  transition:var(--transition);white-space:nowrap;
  border:2px solid transparent;line-height:1;text-decoration:none
}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:var(--radius-lg)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:var(--radius-sm)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(90,75,255,.35)}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-accent{background:var(--grad-warm);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(255,138,0,.35)}
.btn-accent:hover{opacity:.9;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-danger{background:transparent;color:#e53e3e;border-color:#e53e3e}
.btn-danger:hover{background:#e53e3e;color:#fff}
.btn-cta-white{background:#fff;color:var(--color-primary);border-color:transparent;padding:14px 32px;font-size:15px;border-radius:var(--radius-lg)}
.btn-cta-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.btn-cta-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);padding:14px 32px;font-size:15px;border-radius:var(--radius-lg)}
.btn-cta-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ── Event Card ── */
.ev-card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--border);
  transition:var(--transition-md);cursor:pointer;
  position:relative;display:flex;flex-direction:column
}
.ev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(90,75,255,.2)}
.ev-card-banner{height:180px;display:flex;align-items:center;justify-content:center;font-size:56px;position:relative;flex-shrink:0;overflow:hidden}
.ev-card-banner img{width:100%;height:100%;object-fit:cover}
.ev-card-tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.ev-tag{padding:4px 10px;border-radius:20px;font-size:10px;font-weight:800;color:#fff}
.ev-tag--mega{background:linear-gradient(135deg,#FF8A00,#FF5722)}
.ev-tag--trending{background:linear-gradient(135deg,#7B2FF7,#2F80ED)}
.ev-tag--new{background:linear-gradient(135deg,#00BFA5,#1DE9B6)}
.ev-tag--online{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#1a1a1a!important}
.ev-card-save{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;background:rgba(255,255,255,.92);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:16px;cursor:pointer;
  border:none;transition:var(--transition);
  box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:2
}
.ev-card-save:hover{transform:scale(1.1)}
.ev-card-save--saved{background:var(--pastel-purple)}
.ev-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.ev-card-name{font-size:16px;font-weight:800;color:var(--text-1);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-card-college{font-size:12px;color:var(--color-primary);font-weight:700;margin-bottom:12px}
.ev-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;flex:1}
.ev-meta-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-2);font-weight:600}
.ev-card-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--bg);padding-top:12px;margin-top:auto}
.ev-prize-badge{background:var(--pastel-yellow);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:800;color:#B8680A}
.ev-register-btn{background:var(--grad);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-size:11px;font-weight:800;cursor:pointer;transition:var(--transition);font-family:inherit}
.ev-register-btn:hover{opacity:.9;transform:scale(1.03)}

/* ── Events Grid ── */
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.events-empty{grid-column:1/-1;text-align:center;padding:60px 40px;color:var(--text-2)}
.events-empty-icon{font-size:56px;margin-bottom:14px}
.events-empty-title{font-size:18px;font-weight:700;color:var(--text-1);margin-bottom:8px}

/* ── Forms ── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:12px;font-weight:800;color:var(--text-1)}
.form-input,.form-select,.form-textarea{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;
  font-size:14px;color:var(--text-1);outline:none;
  transition:var(--transition);font-family:'Plus Jakarta Sans',sans-serif;width:100%
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--color-primary);background:#fff;
  box-shadow:0 0 0 3px rgba(90,75,255,.08)
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-3)}
.form-textarea{min-height:110px;resize:vertical;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group--full{grid-column:1/-1}
.form-hint{font-size:11px;color:var(--text-3);margin-top:2px}
.form-error-msg{font-size:11px;color:#e53e3e;margin-top:2px}

/* ── Upload Zone ── */
.upload-zone{
  border:2px dashed rgba(90,75,255,.3);border-radius:var(--radius-lg);
  padding:28px 20px;text-align:center;background:var(--pastel-purple);
  cursor:pointer;transition:var(--transition)
}
.upload-zone:hover{border-color:var(--color-primary);background:#ece6ff}
.upload-zone--uploaded{border-color:#00BFA5;background:var(--pastel-green)}
.upload-zone-icon{font-size:32px;margin-bottom:10px}
.upload-zone-title{font-size:14px;font-weight:700;color:var(--color-primary);margin-bottom:4px}
.upload-zone-sub{font-size:11px;color:var(--text-2)}

/* ── Filter Chips ── */
.filter-chip{
  padding:7px 14px;border-radius:24px;font-size:12px;font-weight:700;
  border:1.5px solid var(--border);background:var(--bg-card);
  color:var(--text-2);cursor:pointer;transition:var(--transition);
  white-space:nowrap;font-family:inherit
}
.filter-chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filter-chip--active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(90,75,255,.3)}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:2000;display:none;align-items:center;
  justify-content:center;padding:20px;backdrop-filter:blur(4px)
}
.modal-overlay.modal--open{display:flex}
.modal-box{
  background:#fff;border-radius:var(--radius-xl);
  padding:40px;width:100%;max-width:480px;
  position:relative;animation:modalIn .3s ease
}
.modal-box--sm{max-width:380px}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg);border:none;font-size:16px;
  color:var(--text-2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:var(--transition)
}
.modal-close:hover{background:#fee2e2;color:#e53e3e}
.modal-icon{font-size:60px;margin-bottom:18px;text-align:center}
.modal-title{font-size:24px;font-weight:700;color:var(--text-1);margin-bottom:10px;text-align:center}
.modal-desc{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:28px;text-align:center}
.modal-actions{display:flex;gap:12px;justify-content:center}

/* ── Auth Modal ── */
.modal-box--auth{max-width:420px;padding:32px 36px}
.auth-logo{
  font-family:'Clash Display',sans-serif;font-size:22px;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  text-align:center;margin-bottom:20px
}
.auth-tabs{display:flex;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin-bottom:24px}
.auth-tab{flex:1;padding:12px;font-size:14px;font-weight:700;cursor:pointer;border:none;background:#fff;color:var(--text-2);transition:var(--transition);font-family:inherit}
.auth-tab--active{background:var(--grad);color:#fff}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-divider{text-align:center;font-size:13px;color:var(--text-2);position:relative;margin:4px 0}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:calc(50% - 24px);height:1px;background:var(--border)}
.auth-divider::before{left:0}
.auth-divider::after{right:0}
.auth-divider span{background:#fff;padding:0 8px;position:relative}
.auth-terms{font-size:11px;color:var(--text-3);text-align:center}
.auth-terms a{color:var(--color-primary)}
.auth-footer-text{font-size:12px;color:var(--text-2);text-align:center}
.auth-switch-btn{background:none;border:none;color:var(--color-primary);font-weight:700;cursor:pointer;font-size:12px;font-family:inherit}
.auth-error{background:#fee2e2;color:#b91c1c;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600}

/* ── Toast ── */
.toast-container{
  position:fixed;bottom:32px;right:32px;z-index:3000;
  display:flex;flex-direction:column;gap:10px;pointer-events:none
}
.toast{
  background:var(--text-1);color:#fff;padding:14px 22px;
  border-radius:var(--radius-lg);font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transform:translateX(120%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:auto;max-width:320px
}
.toast--show{transform:translateX(0)}
.toast--success{background:linear-gradient(135deg,#00BFA5,#1DE9B6)}
.toast--error{background:linear-gradient(135deg,#f5576c,#f093fb)}
.toast--info{background:var(--grad)}

/* ── Stat Card ── */
.stat-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;text-align:center;border:1px solid var(--border)}
.stat-card-num{font-family:'Clash Display',sans-serif;font-size:28px;font-weight:700;color:var(--color-primary)}
.stat-card-label{font-size:12px;color:var(--text-2);font-weight:600;margin-top:4px}

/* ── Badge ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700}
.badge--purple{background:var(--pastel-purple);color:var(--color-primary)}
.badge--green{background:var(--pastel-green);color:#2E7D32}
.badge--blue{background:var(--pastel-blue);color:#1565C0}
.badge--yellow{background:var(--pastel-yellow);color:#B8680A}
.badge--orange{background:var(--pastel-orange);color:#E65100}
.badge--pink{background:var(--pastel-pink);color:#C2185B}

/* ── Pagination ── */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px;padding-bottom:40px;flex-wrap:wrap}
.page-btn{width:36px;height:36px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-2);font-size:13px;font-weight:700;cursor:pointer;transition:var(--transition);font-family:inherit}
.page-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.page-btn--active{background:var(--grad);color:#fff;border-color:transparent}

/* ── CTA Banner ── */
.cta-banner{background:var(--grad);padding:80px var(--page-padding);text-align:center;position:relative;overflow:hidden}
.cta-banner-bg{position:absolute;top:-80px;right:-80px;width:400px;height:400px;background:rgba(255,255,255,.06);border-radius:50%;pointer-events:none}
.cta-banner-title{font-family:'Clash Display',sans-serif;font-size:clamp(28px,3.5vw,44px);font-weight:700;color:#fff;margin-bottom:16px;position:relative}
.cta-banner-desc{font-size:17px;color:rgba(255,255,255,.85);margin-bottom:36px;max-width:560px;margin-left:auto;margin-right:auto;position:relative}
.cta-banner-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ── Role Selection Cards (Signup v2) ── */
.su-role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 12px 14px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition-md);
  font-family: inherit;
  width: 100%;
  outline: none;
}
.su-role-card:hover,
.su-role-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--pastel-purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.su-role-card--active {
  border-color: var(--color-primary);
  background: var(--pastel-purple);
  box-shadow: 0 0 0 3px rgba(90,75,255,.15), var(--shadow-sm);
}
.su-role-icon  { font-size: 28px; line-height: 1; }
.su-role-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}
.su-role-card--active .su-role-title { color: var(--color-primary); }
.su-role-desc  { font-size: 11px; color: var(--text-2); line-height: 1.4; }

/* Animated checkmark in top-right corner */
.su-role-check {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity .2s ease, transform .2s ease;
}
.su-role-card--active .su-role-check {
  opacity: 1;
  transform: scale(1);
}

/* ── "← Change role" back button ── */
.su-back-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
  margin-bottom: -4px;
}
.su-back-link:hover { opacity: 0.75; }

/* ── Spinner inside submit button ── */
.btn .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── w-full utility ── */
.w-full { width: 100%; }

/* ── Responsive ── */
@media(max-width:768px){
  .section{padding:48px var(--page-padding)}
  .form-row{grid-template-columns:1fr}
  .cta-banner{padding:60px var(--page-padding)}
  .cta-banner-actions{flex-direction:column;align-items:center}
  .events-grid{grid-template-columns:1fr}
  .modal-box{padding:28px 22px}
  .modal-box--auth{padding:24px 20px}
  .toast-container{bottom:20px;right:16px;left:16px}
  .toast{max-width:100%}
}