/* ═══════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════ */

/* Tags */
.tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:8px 12px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  text-transform:none;
}
.tag-purple { background:var(--purple-bg); color:var(--purple3); }
.tag-green  { background:var(--green-bg);  color:var(--green); }
.tag-red    { background:var(--red-bg);    color:var(--red); }
.tag-gold   { background:var(--gold-bg);   color:var(--gold); }
.tag-gray   { background:var(--surface-soft); color:var(--ink2); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 18px; border-radius:16px;
  font-size:14px; font-weight:700; line-height:1;
  transition:all .16s; white-space:nowrap;
  font-family:var(--font-ui);
}
.btn-primary { background:var(--royal-blue); color:var(--white); box-shadow:0 10px 20px rgba(154,52,56,.18); }
.btn-primary:hover { background:var(--purple2) !important; box-shadow:0 12px 22px rgba(143,46,42,.22); transform:translateY(-1px); }
.btn-purple {
  background: linear-gradient(135deg, var(--royal-blue) 0%, var(--purple) 100%);
  color:#fff;
  box-shadow: 0 10px 20px rgba(154,52,56,0.18);
}
.btn-purple:hover {
  background: linear-gradient(135deg, var(--purple2) 0%, var(--purple) 100%) !important;
  box-shadow: 0 12px 22px rgba(143,46,42,0.22) !important;
  transform: translateY(-1px);
}
.btn-outline { background:var(--white); color:var(--ink); border:1px solid var(--border); box-shadow:var(--sh-sm); }
.btn-outline:hover { border-color:var(--purple); color:var(--purple); }
.btn-ghost { background:transparent; color:var(--night-navy); }
.btn-ghost:hover { background:var(--purple-bg); color:var(--purple2); }
.btn-danger { background:var(--red-bg); color:var(--red); border:1px solid rgba(220,38,38,.2); }
.btn-white { background:#fff; color:var(--royal-blue); font-weight:700; }
.btn-white:hover { background:var(--bg); transform:translateY(-1px); }
.btn-w-out { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); }
.btn-w-out:hover { border-color:#fff; }
.btn-sm   { padding:10px 14px; font-size:12px; }
.btn-lg   { padding:16px 24px; font-size:16px; }
.hero .btn-lg {
  min-height:54px;
  border-radius:18px;
  padding:16px 22px;
}
.hero .btn-primary {
  box-shadow:0 12px 24px rgba(154,52,56,.22);
}
.hero .btn-outline {
  background:rgba(255,255,255,.9);
  border-color:rgba(42,31,26,.18);
}
.btn-full { width:100%; }
.btn-icon { width:42px; height:42px; padding:0; border-radius:14px; font-size:18px; flex-shrink:0; }

/* Card */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
}

/* Divider */
.divider { height:1px; background:var(--border); margin:16px 0; }

/* Form */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:6px; }
.form-input {
  width:100%; min-height:56px; padding:0 18px;
  border:1px solid var(--border); border-radius:20px;
  font-size:14px; color:var(--ink); background:var(--white);
  outline:none; transition:border-color .15s;
}
.form-input:focus {
  border-color:var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(154,52,56,0.10) !important;
}
.form-input::placeholder { color:var(--ink4); }
.form-input.input-error,
.form-select.input-error,
.form-textarea.input-error {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.10) !important;
}
.form-input-city {
  padding-right: 48px;
  background-image: linear-gradient(135deg, rgba(107,65,255,.10), rgba(26,115,232,.08));
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: right 14px center;
}
.form-input-city::-webkit-calendar-picker-indicator {
  opacity: 0;
  pointer-events: none;
}
.form-select {
  width:100%; min-height:56px; padding:0 18px;
  border:1px solid var(--border); border-radius:20px;
  font-size:14px; color:var(--ink); background:var(--white);
  outline:none; appearance:none;
}
.form-textarea {
  width:100%; padding:14px 18px;
  border:1px solid var(--border); border-radius:20px;
  font-size:14px; color:var(--ink); background:var(--white);
  outline:none; resize:vertical; min-height:112px;
  transition:border-color .15s;
}
.form-textarea:focus {
  border-color:var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(154,52,56,0.10) !important;
}
.form-hint  { font-size:12px; color:var(--ink4); margin-top:5px; }
.form-error { font-size:12px; color:var(--red); margin-top:5px; }
.input-error-wrap {
  border-color: rgba(220,38,38,.26) !important;
  box-shadow: 0 10px 24px rgba(220,38,38,.06);
}

/* Toggle */
.toggle {
  width:44px; height:26px; border-radius:13px;
  background:var(--bg3); border:none; cursor:pointer;
  position:relative; transition:background .2s; flex-shrink:0;
}
.toggle::after {
  content:''; position:absolute;
  width:20px; height:20px; border-radius:50%;
  background:#fff; top:3px; left:3px;
  transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on { background:var(--purple); }
.toggle.on::after { transform:translateX(18px); }

/* Avatar */
.av {
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; flex-shrink:0; line-height:1;
}
.av-24 { width:24px; height:24px; font-size:9px; }
.av-32 { width:32px; height:32px; font-size:12px; }
.av-40 { width:40px; height:40px; font-size:15px; }
.av-48 { width:48px; height:48px; font-size:18px; }
.av-64 { width:64px; height:64px; font-size:22px; }
.av-80 { width:80px; height:80px; font-size:28px; }
.av-purple { background:var(--purple-bg); color:var(--purple3); }
.av-gray   { background:var(--bg3); color:var(--ink3); }
.av-green  { background:var(--green-bg); color:var(--green); }

/* Pills */
.pills { display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.pills::-webkit-scrollbar { display:none; }
.pill {
  padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:700;
  border:1px solid var(--border); color:var(--ink3);
  background:var(--white); cursor:pointer;
  white-space:nowrap; flex-shrink:0; transition:all .15s;
  box-shadow:var(--sh-sm);
}
.pill:hover { border-color:var(--purple); color:var(--purple); }
.pill.active {
  background: linear-gradient(135deg, var(--night-navy) 0%, var(--royal-blue) 100%);
  border-color: transparent;
  color: #fff;
}

/* Stars */
.star { color:var(--bg3); font-size:14px; }
.star.on { color:#FBBF24; }

/* Section label */
.section-label {
  font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3);
  margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
}
.section-label a { font-size:12px; color:var(--purple); font-weight:600; text-transform:none; letter-spacing:0; cursor:pointer; }