/* ================================================================
   VybeFans Midnight — Light theme override v2
   Inherits default light style, adds VybeFans typography, brand
   gradients, and component treatments for light mode.
   ================================================================ */

/* 1. VybeFans fonts */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Space+Mono:ital,wght@0,400;0,700&display=swap');

/* 2. Full default light theme */
@import url('../../default/scss/style.min.css');

/* ================================================================
   LIGHT MODE TOKENS
   ================================================================ */
:root {
  --vf-violet:   #8B5CF6;
  --vf-violet-d: #7C3AED;
  --vf-violet-l: #A78BFF;
  --vf-cyan:     #22D3EE;
  --vf-cyan-d:   #06B6D4;
  --vf-hot-pink: #FF2E7E;
  --vf-hot-orange: #FF5A4D;
  --vf-hot-amber:  #FFB020;
  --vf-success: #059669;
  --vf-grad-vybe: linear-gradient(135deg, #8B5CF6 0%, #6D5DFB 45%, #22D3EE 100%);
  --vf-grad-hot:  linear-gradient(135deg, #FF2E7E 0%, #FF5A4D 48%, #FFB020 100%);
  --vf-glow-violet: 0 8px 28px rgba(139,92,246,.30);
  --vf-glow-hot:    0 8px 30px rgba(255,46,126,.30);
  --vf-r-sm:   12px;
  --vf-r-md:   16px;
  --vf-r-lg:   22px;
  --vf-r-full: 999px;
  --vf-fast:   140ms;
  --vf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================================================================
   FONTS
   ================================================================ */
html, body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.pageTitle,
.i_box_messages_header,
.i_modal_title,
.blog-hero-card__title,
.campaign_card_title {
  font-family: 'Sora', system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
}
.i_likes_count,
.isum,
.live_viewers_count,
.campaign_raised_value,
.figure_value {
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
}

/* ================================================================
   HEADER — Vybe gradient top bar
   ================================================================ */
.header:before {
  background: var(--vf-grad-vybe) !important;
  height: 3px !important;
}

/* ================================================================
   PRIMARY BUTTONS
   ================================================================ */
.publish_btn,
.alertBtnRight,
.send_tip_btn {
  background: var(--vf-grad-vybe) !important;
  border: none !important;
  box-shadow: var(--vf-glow-violet) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--vf-r-md) !important;
  color: #fff !important;
  transition: filter var(--vf-fast), transform var(--vf-fast) var(--vf-ease-spring) !important;
}
.publish_btn:hover,
.alertBtnRight:hover,
.send_tip_btn:hover { filter: brightness(1.07) !important; }
.publish_btn:active,
.alertBtnRight:active,
.send_tip_btn:active { transform: scale(.97) !important; }

/* ================================================================
   HOT / LIVE BUTTONS
   ================================================================ */
.c_live_streaming,
.new_s_first,
.new_s_second {
  background: var(--vf-grad-hot) !important;
  border: none !important;
  box-shadow: var(--vf-glow-hot) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #fff !important;
  border-radius: var(--vf-r-md) !important;
}

/* ================================================================
   FOLLOW / SUBSCRIBE
   ================================================================ */
.i_follow,
[class^="i_fw"],
.follow_btn,
.subscribe_btn,
.i_follow_btn,
.campaign_primary_btn {
  background: var(--vf-grad-vybe) !important;
  border: none !important;
  box-shadow: var(--vf-glow-violet) !important;
  border-radius: var(--vf-r-full) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* ================================================================
   SEND BUTTON
   ================================================================ */
.sendmes { background: var(--vf-grad-vybe) !important; border: none !important; border-radius: var(--vf-r-full) !important; color: #fff !important; }

/* ================================================================
   CAMPAIGN PROGRESS
   ================================================================ */
.campaign_progress_bar_fill {
  background: var(--vf-grad-vybe) !important;
  border-radius: var(--vf-r-full) !important;
}
.campaign_raised_value { color: var(--vf-violet) !important; }

/* ================================================================
   ACTIVE STATES
   ================================================================ */
.i_tab_list_item.is-active,
.i_tab_list_item.active { color: var(--vf-violet) !important; border-bottom-color: var(--vf-violet) !important; }
.live_badge, .live-badge, .live_label, .scheduled_live_badge {
  background: var(--vf-grad-hot) !important; border-radius: var(--vf-r-full) !important; color: #fff !important; font-weight: 800 !important;
}

/* ================================================================
   STORY RINGS
   ================================================================ */
.story-ring { background: var(--vf-grad-vybe) !important; padding: 3px !important; border-radius: 50% !important; }
.story-ring.live { background: var(--vf-grad-hot) !important; }

/* ================================================================
   VERIFICATION
   ================================================================ */
.verify_icon svg, .verify_badge svg, .i_plus_s svg { fill: var(--vf-cyan-d) !important; }

/* ================================================================
   UNREAD BADGE
   ================================================================ */
.i_message_unread { background: var(--vf-grad-hot) !important; border-radius: var(--vf-r-full) !important; color: #fff !important; font-weight: 700 !important; }
.i_notifications_count { background: var(--vf-grad-hot) !important; border-radius: var(--vf-r-full) !important; }

/* ================================================================
   LINKS
   ================================================================ */
.pageMiddle .i_uname a,
.pageMiddle .i_p_n a,
.pageMiddle .nurl,
.pageMiddle .hash_tag,
.pageMiddle .mention { color: var(--vf-violet) !important; }
.pageMiddle .i_uname a:hover,
.pageMiddle .i_p_n a:hover,
.pageMiddle .nurl:hover,
.pageMiddle .hash_tag:hover,
.pageMiddle .mention:hover { color: var(--vf-cyan-d) !important; }

/* ================================================================
   INPUT FOCUS
   ================================================================ */
input:focus, textarea:focus, select:focus {
  border-color: var(--vf-violet) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important;
}

/* ================================================================
   NUMERIC
   ================================================================ */
.i_likes_count, .isum, .live_viewers_count, .stat_count, .follower_count, .figure_value {
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
}

/* ================================================================
   PWA INSTALL POPUP
   ================================================================ */
.pwa_install_popup_title { font-family: 'Sora', system-ui, sans-serif !important; font-weight: 800 !important; }
.pwa_install_popup_btn_primary {
  background: var(--vf-grad-vybe) !important;
  border: none !important;
  box-shadow: var(--vf-glow-violet) !important;
  border-radius: var(--vf-r-md) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ================================================================
   LIVESTREAM — VybeFans light mode
   ================================================================ */

/* ── Layout ── */
.live_wrapper_tik { background: #f5f6fa !important; background-image: none !important; }
.live_left { background: #fff !important; border-right: 1px solid #e6e8f0 !important; }
.live_right { background: #f5f6fa !important; }
.live_video_header { background: #fff !important; border-bottom: 1px solid #e6e8f0 !important; }

/* Glass pill (lighter in light mode) */
.live_creator_glass_pill { background: rgba(0,0,0,.04) !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 999px !important; padding: 4px 12px 4px 4px !important; gap: 8px !important; }

.live_creator_live_username a { color: #1a1a2e !important; font-family: 'Sora', system-ui, sans-serif !important; font-weight: 700 !important; }
.live_creator_live_name { color: #525c7a !important; }
.live_timer { color: #1a1a2e !important; font-family: 'Space Mono', monospace !important; font-weight: 700 !important; font-size: 11px !important; margin-right: 6px !important; }

/* Viewer pill */
.live_viewer_pill { gap: 5px !important; padding: 5px 10px !important; background: rgba(0,0,0,.35) !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 999px !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.live_viewer_pill svg { fill: #fff !important; }
.sumonline_overlay { font-family: 'Space Mono', monospace !important; font-weight: 700 !important; font-size: 12px !important; color: #fff !important; }

/* Chat message avatar + body */
.live_chat_avatar_link { flex-shrink: 0 !important; line-height: 0 !important; }
.live_chat_avatar { width: 26px !important; height: 26px !important; border-radius: 50% !important; object-fit: cover !important; border: 1.5px solid #e0e3eb !important; }
.live_chat_msg_body { flex: 1 !important; min-width: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
.live_chat_username { color: var(--vf-cyan-d) !important; font-weight: 700 !important; margin-right: 5px !important; text-decoration: none !important; }
.live_chat_text { color: #1a1a2e !important; word-break: break-word !important; }

/* ── LIVE badge ── */
.live_pulse {
  background: var(--vf-grad-hot) !important;
  box-shadow: var(--vf-glow-hot) !important;
  border-radius: var(--vf-r-full) !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

/* ── Action buttons ── */
.live_action_menu_btn { display: flex !important; background: rgba(0,0,0,.35) !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; }
.live_interactions_toggle_btn { display: flex !important; background: rgba(0,0,0,.30) !important; border: 1px solid rgba(255,255,255,.25) !important; color: #fff !important; border-radius: var(--vf-r-sm) !important; }
.live_interactions_toggle_btn.is-active { background: var(--vf-grad-hot) !important; border-color: transparent !important; box-shadow: var(--vf-glow-hot) !important; }
.live_pin_product_btn { background: rgba(0,0,0,.28) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; border-radius: var(--vf-r-sm) !important; }
.live_pin_product_btn svg { fill: var(--vf-hot-pink) !important; }

/* ── Chat panel ── */
.live_right_in_right { background: #fff !important; border-left: 1px solid #e6e8f0 !important; }
.gElp9 { color: #1a1a2e !important; }
.gElp9 a { color: var(--vf-cyan-d) !important; font-weight: 700 !important; }
.gift_attan { color: #d97706 !important; font-weight: 700 !important; }

/* ── Chat composer ── */
.live_send_message_box_wrapper { background: #fff !important; border-top: 1px solid #e6e8f0 !important; }
.message_text_textarea { background: #f5f6fa !important; border: 1px solid #e0e3eb !important; border-radius: var(--vf-r-full) !important; }
.lmSize { color: #1a1a2e !important; }
.lmSize::placeholder { color: #999 !important; }
.livesendmes .message_pls { background: var(--vf-grad-vybe) !important; border-radius: var(--vf-r-full) !important; box-shadow: var(--vf-glow-violet) !important; }
.livesendmes .message_pls svg { fill: #fff !important; }

/* ── Gifts & balance ── */
.live_coin_send { background: var(--vf-grad-hot) !important; border-radius: var(--vf-r-full) !important; box-shadow: var(--vf-glow-hot) !important; border: none !important; color: #fff !important; font-weight: 700 !important; }
.current_balance_box a { color: var(--vf-violet) !important; border-color: rgba(139,92,246,.40) !important; border-radius: var(--vf-r-sm) !important; }
.current_balance_box a:hover { background: var(--vf-grad-vybe) !important; color: #fff !important; border-color: transparent !important; }

/* ── Pinned product ── */
.live_pinned_product_card { background: #fff !important; border: 1px solid #e0e3eb !important; border-radius: var(--vf-r-lg) !important; }
.live_pinned_product_name { color: #1a1a2e !important; font-family: 'Sora', system-ui, sans-serif !important; font-weight: 700 !important; }
.live_pinned_product_price { color: var(--vf-cyan-d) !important; font-family: 'Space Mono', monospace !important; font-weight: 700 !important; }
.live_pinned_product_cta { background: var(--vf-grad-vybe) !important; box-shadow: var(--vf-glow-violet) !important; color: #fff !important; border-radius: var(--vf-r-full) !important; font-weight: 700 !important; text-decoration: none !important; padding: 7px 14px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; }
.live_unpin_product_btn { background: transparent !important; border: 1px solid #e0e3eb !important; color: #888 !important; border-radius: var(--vf-r-full) !important; font-size: 12px !important; padding: 6px 12px !important; }

/* ── Poll / Q&A modules ── */
.live_module { background: #fff !important; border: 1px solid #e6e8f0 !important; border-radius: var(--vf-r-lg) !important; }
.live_module_header { background: #f5f6fa !important; border-bottom: 1px solid #e6e8f0 !important; }
.live_module_title { color: #1a1a2e !important; font-family: 'Sora', system-ui, sans-serif !important; font-weight: 700 !important; }
.live_poll_question { color: #1a1a2e !important; font-weight: 700 !important; }
.live_poll_option { background: #f5f6fa !important; border: 1px solid #e0e3eb !important; border-radius: var(--vf-r-sm) !important; color: #1a1a2e !important; }
.live_poll_option.is-selected { background: rgba(139,92,246,.10) !important; border-color: rgba(139,92,246,.35) !important; }
.live_poll_option_percent { color: var(--vf-violet) !important; font-family: 'Space Mono', monospace !important; font-weight: 700 !important; }
.live_qa_textarea { background: #f5f6fa !important; border: 1px solid #e0e3eb !important; border-radius: var(--vf-r-sm) !important; color: #1a1a2e !important; }
.live_qa_send { background: var(--vf-grad-vybe) !important; box-shadow: var(--vf-glow-violet) !important; border: none !important; color: #fff !important; border-radius: var(--vf-r-sm) !important; font-weight: 700 !important; padding: 8px 16px !important; }
.live_qa_item { background: #f5f6fa !important; border: 1px solid #e6e8f0 !important; border-radius: var(--vf-r-sm) !important; }
.live_qa_author { color: var(--vf-cyan-d) !important; font-weight: 700 !important; }

/* ── Mobile video header ── */
.live_video_header_mobile { background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.30) 72%, rgba(0,0,0,0) 100%) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border-bottom: none !important; }
.live_video_header_mobile .live_creator_live_username a, .live_video_header_mobile .live_creator_live_name, .live_video_header_mobile .live_creator_live_name span { color: #fff !important; }

/* Mobile chat overlay */
.live_right_in_right_mobile { background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,0) 100%) !important; }
.live_right_in_right_mobile .live_right_in_right_in .gElp9 { color: #fff !important; }
.live_right_in_right_mobile .live_right_in_right_in .gElp9 a { color: #67e8f9 !important; font-weight: 700 !important; }
.live_right_in_right_mobile .message_text_textarea { background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.30) !important; border-radius: var(--vf-r-full) !important; }
.live_right_in_right_mobile .lmSize { color: #fff !important; }
.live_right_in_right_mobile .lmSize::placeholder { color: rgba(255,255,255,.55) !important; }
.live_right_in_right_mobile .livesendmes .message_pls { background: var(--vf-grad-hot) !important; box-shadow: var(--vf-glow-hot) !important; border-radius: var(--vf-r-full) !important; }
.live_right_in_right_mobile .livesendmes .message_pls svg { fill: #fff !important; }