:root{
  --bg: #060607;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.08);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --muted2: rgba(255,255,255,0.45);

  /* ✅ Tindi orange */
  --stroke: rgba(255, 177, 22, 0.95);
  --strokeSoft: rgba(255, 177, 22, 0.35);

  --shadow: rgba(0,0,0,0.6);

  --radius: 18px;
  --radius2: 26px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ✅ FIX: stop browser default dark/black button text/border */
button,
.btn,
.tab,
.store-btn,
.event-pill,
.row-remove{
  color: var(--text);
  border-color: rgba(255,255,255,0.12);
}

/* ✅ FIX: orange-outline buttons (ghost) should ALWAYS be visible */
.btn.btn-ghost,
button.btn-ghost{
  background: rgba(0,0,0,0.25);
  border: 1.5px solid var(--stroke) !important;
  color: var(--stroke) !important;
}

.btn.btn-ghost:hover,
button.btn-ghost:hover{
  background: rgba(255, 177, 22, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 177, 22, 0.12);
}

.btn.btn-ghost:active,
button.btn-ghost:active{
  transform: scale(0.99);
}

/* ✅ FIX: primary buttons stay orange fill with dark text */
.btn-primary{
  border: 0 !important;
  background: var(--stroke) !important;
  color: #141414 !important;
}

/* ✅ Make “RSVP pills / badges / small buttons” readable on glass */
.rsvp-actions .btn,
.qty-box .btn,
.promo-box .btn,
.share-box .btn,
.buy-box .btn{
  color: var(--text);
}

/* If any ghost buttons appear inside those boxes, enforce orange */
.rsvp-actions .btn-ghost,
.qty-box .btn-ghost,
.promo-box .btn-ghost,
.share-box .btn-ghost{
  border-color: var(--stroke) !important;
  color: var(--stroke) !important;
}

/* ✅ Focus ring in orange (keyboard nav) */
.btn:focus,
button:focus,
.input:focus,
select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 177, 22, 0.20);
  border-color: rgba(255, 177, 22, 0.55);
}

.page{
  padding: 18px 18px 120px;
  max-width: 980px;
  margin: 0 auto;
}

/* ---------- HERO ---------- */
.top-hero{
  position: relative;
  min-height: 420px;
  padding: 24px 18px 18px;
  overflow: hidden;
}

.hero-inner{
  position: relative;
  z-index: 3;
  max-width: 980px;
  margin: 0 auto;
}

.hero-glow{
  position: absolute;
  inset: -40px -40px auto -40px;
  height: 520px;
  background:
    radial-gradient( circle at 18% 25%, rgba(35, 255, 170, 0.20), transparent 45% ),
    radial-gradient( circle at 70% 35%, rgba(0, 180, 255, 0.10), transparent 55% ),
    radial-gradient( circle at 40% 80%, rgba(255, 177, 22, 0.09), transparent 52% );
  filter: blur(10px);
  transform: translate3d(0,0,0);
  z-index: 1;
}

.hero-noise{
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.06;
  z-index: 2;
}

.discover-wrap{
  padding-top: 10px;
}

.discover-title{
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 0.95;
  text-transform: uppercase;
  font-size: clamp(42px, 7vw, 74px);
  text-shadow:
    0 10px 30px rgba(0,0,0,0.65);
}

#discoverWord{
  display: block;
  color: rgba(255,255,255,0.82);
}

#discoverTarget{
  display: block;
  color: rgba(255,255,255,0.82);
}

.discover-dots{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dot{
  width: 40px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}
.dot.active{
  background: var(--stroke);
  box-shadow: 0 0 0 3px rgba(255, 177, 22, 0.14);
}

.search-row{
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.search-pill{
  flex: 1;
  height: 54px;
  border-radius: 999px;
  border: 3px solid var(--stroke);
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.search-placeholder{
  color: rgba(255,255,255,0.72);
  font-weight: 600;
}

.search-icon{
  color: rgba(255,255,255,0.90);
  font-size: 18px;
}

.profile-btn{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 3px solid var(--stroke);
  background: rgba(0,0,0,0.55);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.profile-icon{
  font-size: 18px;
}

/* Tribe moments */
.section-title-row{
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title{
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.circle-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.92);
  color: #111;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.moments-strip{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.moment-card{
  width: 112px;
  height: 92px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
    radial-gradient(circle at 20% 30%, rgba(35,255,170,0.12), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,177,22,0.10), transparent 55%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
  flex: 0 0 auto;
}

/* ---------- STORY ---------- */
.story{
  margin-top: 10px;
  padding: 18px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.story-title{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 850;
}

.story-text{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.cta-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn{
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 750;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}

.btn-ghost{
  background: rgba(0,0,0,0.25);
}

.download-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.store-btn{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.82);
  font-weight: 650;
}

/* ---------- FEATURES ---------- */
.feature-grid{
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, 1fr);
}

.feature-card{
  grid-column: span 12;
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.feature-card h4{
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: 850;
}

.feature-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.feature-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 177, 22, 0.14);
  border: 1px solid rgba(255, 177, 22, 0.22);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 750;
  font-size: 12px;
}

@media (min-width: 760px){
  .feature-card:nth-child(1){ grid-column: span 4; }
  .feature-card:nth-child(2){ grid-column: span 4; }
  .feature-card:nth-child(3){ grid-column: span 4; }
}

/* ---------- BOTTOM NAV ---------- */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  z-index: 50;
  padding: 0 14px;
}

.bottom-nav::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 24px));
  height: 76px;
  border-radius: 999px;
  background: rgba(15,15,17,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  z-index: -1;
}

.bottom-nav a, .bottom-nav button{
  width: 108px;
  height: 76px;
  display: grid;
  place-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.80);
  cursor: pointer;
}

.nav-item{
  text-align: center;
}

.nav-item.active{
  color: var(--stroke);
}

.nav-ico{
  font-size: 18px;
}

.nav-label{
  font-size: 13px;
  font-weight: 650;
  text-transform: lowercase;
  opacity: 0.9;
}

.nav-plus{
  width: 66px;
  height: 66px;
  margin-top: -12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 50px rgba(0,0,0,0.6);
}

.nav-plus span{
  font-size: 28px;
  color: var(--stroke);
  font-weight: 900;
}

/* subtle scrollbar */
.moments-strip::-webkit-scrollbar{ height: 6px; }
.moments-strip::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}

/* ---------- EVENTMAIN HEADER + CARDS + FORMS ---------- */
.page-header{
  position: relative;
  padding: 18px 18px 10px;
  overflow: hidden;
}

.header-glow{
  inset: -60px -60px auto -60px;
  height: 360px;
  opacity: 0.95;
}

.header-inner{
  position: relative;
  z-index: 3;
  max-width: 980px;
  margin: 0 auto;
}

.brand-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.brand-mark{
  font-weight: 950;
  letter-spacing: 1px;
  font-size: 18px;
  color: rgba(255,255,255,0.92);
}

.brand-sub{
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  margin-top: 2px;
}

.btn-sm{
  padding: 10px 12px;
  font-size: 13px;
}

.header-search-row{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-pill-compact{
  height: 48px;
  border-width: 2px;
}

.profile-btn-compact{
  width: 48px;
  height: 48px;
  border-width: 2px;
}

.header-tabs{
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.tab{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.82);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.tab.active{
  background: rgba(255, 177, 22, 0.16);
  border-color: rgba(255, 177, 22, 0.28);
  color: rgba(255,255,255,0.92);
}

/* Panels */
.panel{
  padding: 16px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-top: 10px;
}

.panel-title{
  margin: 0;
  font-size: 18px;
  font-weight: 850;
}

.panel-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 13px;
}

.form{
  margin-top: 14px;
}

.form-row{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 12px;
}

@media (min-width: 760px){
  .form-row{ grid-template-columns: 1fr 1fr; }
}

.label{
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,0.82);
  font-weight: 700;
  font-size: 13px;
}

.input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  padding: 0 12px;
  outline: none;
}

.input.file{
  padding: 10px 12px;
  height: auto;
}

.form-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.form-hint{
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  margin-top: 6px;
}

/* List head + cards */
.list-head{
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.list-title{
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 900;
}

.list-meta{
  color: var(--muted2);
  font-size: 13px;
}

.cards-grid{
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px){
  .cards-grid{ grid-template-columns: 1fr 1fr; }
}

.event-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms ease;
}

.event-card:hover{
  transform: translateY(-2px);
}

.event-poster{
  height: 210px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.event-poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-body{
  padding: 14px;
}

.event-title{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 18px;
}

.event-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.event-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  font-weight: 750;
  font-size: 12px;
}

.auth-mini{
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-email{
  color: rgba(255,255,255,0.78);
  font-weight: 750;
  font-size: 13px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================
   PROFESSIONALS PAGE
=========================== */

.pro-hero{
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius2);
  background:
    radial-gradient(circle at 18% 30%, rgba(35, 255, 170, 0.12), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(0, 180, 255, 0.10), transparent 60%),
    radial-gradient(circle at 40% 90%, rgba(255, 177, 22, 0.10), transparent 55%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.pro-hero-badge{
  display: inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.82);
  font-weight: 750;
  font-size: 12px;
}

.pro-hero-title{
  margin: 10px 0 6px;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: 0.2px;
  font-weight: 950;
}

.pro-hero-sub{
  margin: 0;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  max-width: 68ch;
}

.pro-hero-subtle{
  display: inline-block;
  margin-left: 6px;
  color: rgba(255,255,255,0.86);
  font-weight: 800;
}

.pro-hero-cta{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Grid */
.pro-grid{
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px){
  .pro-grid{ grid-template-columns: 1fr 1fr; }
}

/* Pro card */
.pro-card{
  padding: 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.pro-card-top{
  display: flex;
  gap: 12px;
  align-items: center;
}

.pro-avatar{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 20px;
}

.pro-name-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pro-name{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.pro-tag{
  font-size: 12px;
  font-weight: 850;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 177, 22, 0.14);
  border: 1px solid rgba(255, 177, 22, 0.22);
  color: rgba(255,255,255,0.90);
}

.pro-meta{
  margin-top: 2px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 650;
}

.pro-rate{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pro-rate-label{
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.pro-rate-value{
  font-weight: 950;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
}

.pro-desc{
  margin: 10px 0 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.5;
}

.pro-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Dealink section */
.dealink-grid{
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px){
  .dealink-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.dealink-card{
  padding: 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.dealink-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 180, 255, 0.10);
  border: 1px solid rgba(0, 180, 255, 0.18);
  color: rgba(255,255,255,0.86);
  font-weight: 800;
  font-size: 12px;
}

.dealink-title{
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 900;
}

.dealink-text{
  margin: 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.5;
}

.dealink-banner{
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius2);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dealink-banner-title{
  font-weight: 950;
  font-size: 16px;
}

.dealink-banner-sub{
  margin-top: 4px;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  line-height: 1.4;
}