/* mc-frontend.css */
:root {
  --mc-gold:    #C8972A;
  --mc-dark:    #0D0C0A;
  --mc-ink:     #1A1915;
  --mc-gray:    #48453E;
  --mc-muted:   #8C8880;
  --mc-cream:   #FAFAF5;
  --mc-gold-pale:#FDF3DC;
  --mc-radius:  12px;
}

/* ── Event page ── */
.mc-event-page { background: var(--mc-cream); min-height: 60vh; padding: 0 0 60px; }
.mc-event-container { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.mc-event-hero { background: var(--mc-dark); color: white; padding: 48px 40px 40px; border-radius: 0 0 20px 20px; margin-bottom: 32px; }
.mc-event-city { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--mc-gold); margin-bottom: 12px; }
.mc-event-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 20px; }
.mc-event-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.mc-meta-item { font-size: 14px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); padding: 6px 12px; border-radius: 20px; }

/* ── Attend block ── */
.mc-attend-block { background: white; border-radius: var(--mc-radius); padding: 32px; margin-bottom: 20px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.mc-counter-wrap { margin-bottom: 20px; }
.mc-counter-num { font-size: 64px; font-weight: 700; color: var(--mc-gold); line-height: 1; display: block; }
.mc-counter-label { font-size: 16px; color: var(--mc-muted); }
.mc-avatars { display: flex; justify-content: center; gap: -6px; margin: 16px 0; }
.mc-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid white; background: var(--mc-gold-pale); color: var(--mc-gold); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-left: -6px; overflow: hidden; }
.mc-avatar:first-child { margin-left: 0; }
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-avatar-more { background: var(--mc-dark); color: white; font-size: 12px; }

.mc-btn-attend { background: var(--mc-gold); color: white; border: none; border-radius: 10px; padding: 16px 36px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; width: 100%; max-width: 360px; }
.mc-btn-attend:hover { background: #b8861e; }
.mc-btn-attend:active { transform: scale(0.98); }
.mc-btn-attend.mc-attending { background: #1E6B45; }
.mc-login-hint { color: var(--mc-muted); font-size: 14px; margin-top: 12px; }

/* ── Share block ── */
.mc-share-block { background: white; border-radius: var(--mc-radius); padding: 24px 32px; margin-bottom: 20px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.mc-share-title { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.mc-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-share-btn { padding: 10px 18px; border-radius: 8px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: opacity 0.15s; }
.mc-share-btn:hover { opacity: 0.88; }
.mc-share-vk    { background: #0077FF; color: white; }
.mc-share-yandex{ background: #FC3F1D; color: white; }
.mc-share-mail  { background: #005FF9; color: white; }
.mc-share-ok    { background: #F2720C; color: white; }
.mc-share-copy  { background: var(--mc-dark); color: white; }
.mc-share-email-toggle { background: #1E6B45; color: white; }

.mc-hidden { display: none !important; }
.mc-email-form { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mc-input { border: 1px solid #ddd; border-radius: 8px; padding: 10px 14px; font-size: 14px; flex: 1; min-width: 200px; }
.mc-input:focus { outline: none; border-color: var(--mc-gold); }
.mc-btn-primary { background: var(--mc-gold); color: white; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mc-msg { font-size: 13px; color: var(--mc-muted); }

/* ── Comments block ── */
.mc-comments-block { background: white; border-radius: var(--mc-radius); padding: 24px 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.mc-comments-locked { background: var(--mc-gold-pale); border: 1px solid var(--mc-gold); border-radius: 8px; padding: 16px 20px; color: var(--mc-gray); font-size: 15px; }

/* ── Form ── */
.mc-event-form-wrap { max-width: 560px; margin: 0 auto; background: white; border-radius: var(--mc-radius); padding: 32px; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.mc-event-form-wrap h2 { margin-top: 0; margin-bottom: 24px; }
.mc-form-row { margin-bottom: 20px; }
.mc-form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--mc-gray); }
.mc-form-row select, .mc-form-row input { width: 100%; }
.mc-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mc-duplicate-notice { background: var(--mc-gold-pale); border: 1px solid var(--mc-gold); border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
.mc-error-msg { color: #C0392B; font-size: 14px; margin-bottom: 12px; }
.mc-success-msg { color: #1E6B45; font-size: 14px; margin-bottom: 12px; }

/* ── OTP form ── */
.mc-otp-form { max-width: 400px; margin: 20px auto; padding: 28px; background: white; border-radius: var(--mc-radius); }
.mc-otp-form h3 { margin-top: 0; }

@media (max-width: 600px) {
  .mc-event-hero { padding: 32px 20px 28px; border-radius: 0; }
  .mc-event-title { font-size: 20px; }
  .mc-counter-num { font-size: 48px; }
  .mc-attend-block, .mc-share-block, .mc-comments-block { padding: 20px; border-radius: 0; }
  .mc-form-row-2col { grid-template-columns: 1fr; }
}