@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=K2D:wght@300;400;500;600;700;800&display=swap');

:root {
  --navy: #0d1b4c;
  --royal-blue: #2d4bff;
  --sky-blue: #a9c8f5;
  --light-panel: #dcecff;
  --page-bg: #f5f5f5;
  --text-dark: #202020;
  --white: #ffffff;
  --black: #000000;
  --button-dark: #2a2a2a;
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--page-bg);
  color: var(--text-dark);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: 'K2D', sans-serif;
  font-weight: 700;
}

.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* =========================
   PUBLIC HEADER
========================= */



.public-header {
  background: #000000;
  padding: 0.5rem 0;
}

.public-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.9rem;
}

.public-topbar p {
  font-size: 0.95rem;
  color: #ffffff;
}

.top-login-btn {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 999px;
  padding: 0.22rem 1rem;
  font-family: 'K2D', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* =========================
   APP HEADER
========================= */

.app-header {
  background-image: url("../images/backgrounds/header-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0.35rem 0;
}

.app-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}

.app-logo img {
  height: 38px;
  width: auto;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'K2D', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
}

.app-nav img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* RIGHT ACCOUNT BUBBLE */

.account-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.45);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
}



.logout-link {
  font-family: 'K2D', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}

.settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.account-settings-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* =========================
   FOOTER
========================= */

.site-footer {
  background-image: url("../images/backgrounds/footer-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3.5rem 0 2rem;
}

.footer-inner {
  text-align: center;
}

.footer-logo {
  width: 155px;
  margin: 0 auto 1rem;
}

.footer-text {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
}

/* =========================
   SHARED BUTTON STYLE
========================= */

.black-pill-btn {
  display: inline-block;
  min-width: 150px;
  text-align: center;
  background: var(--button-dark);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 14px;
  padding: 0.7rem 1.25rem;
  font-family: 'K2D', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* =========================
   FEED PAGE
========================= */

.feed-page {
  background: #f4f4f4;
  padding-bottom: 3rem;
}

.feed-filters {
  padding: 1.5rem 0 1rem;
}

.filter-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-pill {
  display: inline-block;
  background: var(--sky-blue);
  color: var(--black);
  font-family: 'K2D', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.filter-pill.active {
  background: #88a9f8;
}

.feed-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  background: var(--sky-blue);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.feed-search input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.85rem 1.1rem;
  min-width: 220px;
}

.feed-search button {
  border: none;
  background: transparent;
  padding: 0 1rem;
  cursor: pointer;
}

.feed-search button img {
  width: 18px;
  height: 18px;
}

.upcoming-events-section {
  padding: 1rem 0 2rem;
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
  gap: 1rem;
}

.section-heading-row h1,
.recaps-section h2,
.suggested-groups-section h2,
.info-panel h2 {
  font-size: 2.2rem;
  text-transform: uppercase;
  color: var(--black);
}

.view-icons {
  display: flex;
  gap: 0.8rem;
}

.view-icons img {
  width: 25px;
  height: 25px;
}

.event-card-large {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--light-panel);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}

.event-card-image {
  position: relative;
}

.event-card-image img {
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
}

.event-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #8fb0ff;
  color: var(--black);
  font-family: 'K2D', sans-serif;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

.event-card-content {
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
}

.event-card-content h2 {
  font-size: 2rem;
  line-height: 1.1;
  margin-bottom: 0.7rem;
}

.host-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.host-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.host-row p {
  font-weight: 500;
}

.event-description {
  max-width: 620px;
  margin-bottom: 1.2rem;
  line-height: 1.45;
}

.event-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.3rem;
}

.event-meta-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.event-meta-item img {
  width: 18px;
  height: 18px;
}

.event-card-bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.event-actions-small {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.mini-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #a9c8f5;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  box-shadow: var(--shadow);
}

.mini-action-btn img {
  width: 14px;
  height: 14px;
}

.details-btn,
.small-dark-btn,
.host-create-btn {
  display: inline-block;
  background: var(--button-dark);
  color: var(--white);
  font-family: 'K2D', sans-serif;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-transform: capitalize;
}

.recaps-section {
  padding: 1rem 0 2rem;
}

.recaps-section h2 {
  margin-bottom: 1.5rem;
}

.recap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.recap-card {
  background: var(--light-panel);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.recap-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.recap-info {
  padding: 1rem 1.2rem 1.3rem;
}

.recap-info h3 {
  font-size: 1.7rem;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.recap-info p {
  margin-bottom: 0.9rem;
  font-weight: 500;
}

.suggested-groups-section {
  padding: 1rem 0 2rem;
}

.suggested-box {
  background: var(--light-panel);
  padding: 1.8rem 1.8rem 1.2rem;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.suggested-box h2 {
  margin-bottom: 1.2rem;
}

.group-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.group-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.group-left img {
  width: 70px;
  height: 70px;
  border-radius: 14px;
  object-fit: cover;
}

.group-left h3 {
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}

.group-left p {
  font-weight: 500;
}

.join-btn {
  display: inline-block;
  background: #8fb0ff;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font-family: 'K2D', sans-serif;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.feed-bottom-panels {
  padding: 1rem 0 0;
}

.bottom-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.info-panel {
  background: var(--light-panel);
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: var(--shadow);
}

.info-panel h2 {
  margin-bottom: 1rem;
}

.info-panel p {
  max-width: 320px;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.activity-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.host-create-btn {
  text-transform: uppercase;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {
  .event-card-large {
    grid-template-columns: 1fr;
  }

  .event-card-image img {
    min-height: 240px;
  }

  .recap-grid,
  .bottom-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .app-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-nav {
    gap: 1rem;
  }

  .account-bubble {
    align-self: flex-start;
  }
}


@media (max-width: 700px) {
  .container {
    width: min(100% - 24px, 1200px);
  }

  .public-topbar {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  .app-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .feed-search {
    margin-left: 0;
    width: 100%;
  }

  .feed-search input {
    min-width: 0;
    width: 100%;
  }

  .section-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-card-content {
    padding: 1.3rem;
  }

  .event-card-content h2 {
    font-size: 1.6rem;
  }

  .recap-info h3 {
    font-size: 1.35rem;
  }

  .group-list-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   EVENT PAGE
========================= */

.event-page {
  background: #f5f5f5;
  padding: 2rem 0 3rem;
}

/* HERO IMAGE */

.event-hero {
  position: relative;
  margin-bottom: 1.5rem;
}

.event-hero img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 20px;
}

.event-category {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #9eb9df;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* TITLE + RSVP */

.event-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.event-title-row h1 {
  font-size: 2rem;
}

.rsvp-btn {
  background: #2a2a2a;
  color: #ffffff;
  padding: 0.55rem 1.4rem;
  border-radius: 14px;
  font-family: 'K2D', sans-serif;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* HOST */

.event-host {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.event-host img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* META */

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.meta-item img {
  width: 18px;
  height: 18px;
}

/* TAGS */

.event-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.event-tags span {
  background: #9eb9df;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  box-shadow: var(--shadow);
}

/* ABOUT */

.event-about {
  margin-bottom: 2rem;
}

.event-about h2 {
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
}

.event-about p {
  margin-bottom: 0.8rem;
}

/* EVENT PICTURES */

.event-pictures {
  margin-bottom: 2rem;
}

.event-pictures h2 {
  margin-bottom: 1rem;
}

.event-picture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.event-picture-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 18px;
}

/* COMMENTS */

.event-comments h2 {
  margin-bottom: 1rem;
}

.comment-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #c9d7eb;
  padding: 0.5rem 0.8rem;
  border-radius: 18px;
  margin-bottom: 1rem;
}

.comment-input img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.comment-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
}

.comment-post {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #9eb9df;
  border: none;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.comment-post img {
  width: 16px;
  height: 16px;
}

/* COMMENT CARD */

.comment {
  display: flex;
  gap: 0.8rem;
  background: #c9d7eb;
  padding: 0.9rem;
  border-radius: 18px;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow);
}

.comment img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.comment-likes {
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

/* BOTTOM SECTION */

.event-bottom {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  margin-top: 2rem;
}

/* ACTIONS */

.event-actions {
  background: #c9d7eb;
  padding: 1.5rem;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.event-actions h3 {
  margin-bottom: 0.8rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: #9eb9df;
  border: none;
  padding: 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.action-btn img {
  width: 18px;
  height: 18px;
}

/* ATTENDING */

.event-attending {
  background: #c9d7eb;
  padding: 1.5rem;
  border-radius: 18px;
  text-align: center;
  box-shadow: var(--shadow);
}

.attending-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.attending-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.guestlist-btn {
  background: #9eb9df;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
}

/* RESPONSIVE */

@media (max-width: 900px) {

  .event-bottom {
    grid-template-columns: 1fr;
  }

  .event-picture-grid {
    grid-template-columns: 1fr;
  }

}

.event-title-link {
  color: inherit;
}

.event-card-image {
  display: block;
  text-decoration: none;
}

/* =========================
   JS INTERACTION STATES
========================= */

.filter-pill.active,
.mini-action-btn.is-active,
.action-btn.is-active,
.join-btn.joined,
.guestlist-btn.is-active,
.rsvp-btn.is-going {
  background: var(--royal-blue);
  color: var(--white);
}

.feed-search.is-focused {
  outline: 2px solid var(--royal-blue);
  outline-offset: 2px;
}

.details-btn.is-hovered {
  transform: translateY(-1px);
}

.mini-action-btn,
.action-btn,
.join-btn,
.details-btn,
.guestlist-btn,
.rsvp-btn,
.filter-pill {
  transition: 0.2s ease;
}

/* =========================
MY EVENTS PAGE
========================= */

.my-events-header{
display:flex;
justify-content:space-between;
align-items:center;
margin:2rem 0 1rem;
}

.my-events-title h1{
font-size:2.2rem;
margin-bottom:.4rem;
}

.my-events-title p{
color:#555;
}

.create-event-btn{
background:#2a2a2a;
color:white;
padding:.7rem 1.4rem;
border-radius:14px;
font-family:'K2D',sans-serif;
box-shadow:var(--shadow);
}

.my-events-tabs{
display:flex;
gap:.6rem;
background:#a9c8f5;
padding:.4rem;
border-radius:14px;
width:420px;
margin-bottom:2rem;
}

.my-events-tab{
flex:1;
background:transparent;
border:none;
padding:.6rem;
border-radius:10px;
font-weight:600;
cursor:pointer;
}

.my-events-tab.active{
background:#5c79ff;
color:white;
}

.my-events-list{
display:flex;
flex-direction:column;
gap:2rem;
}

/* EVENT CARD */

.my-event-card{
display:flex;
gap:1.5rem;
background:#c9d7eb;
border-radius:20px;
padding:1.2rem;
box-shadow:var(--shadow);
}

.my-event-image{
position:relative;
width:330px;
flex-shrink:0;
}

.my-event-image img{
width:100%;
height:240px;
object-fit:cover;
border-radius:16px;
}

.my-event-content{
flex:1;
}

.my-event-content h2{
margin-bottom:.4rem;
}

.event-description{
margin:.6rem 0 1rem;
}

.my-event-image {
  position: relative;
  width: 330px;
  flex-shrink: 0;
  overflow: hidden;
}

.my-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.my-event-card {
  display: flex;
  gap: 1.5rem;
  background: #c9d7eb;
  border-radius: 20px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
  align-items: stretch;
}

.my-events-list{
  display:flex;
  flex-direction:column;
  gap:2rem;
  margin-bottom:4rem;
}

/* =========================
   CREATE EVENT PAGE
========================= */

.create-event-page {
  background: #f4f4f4;
  padding: 2rem 0 3rem;
}

.create-event-header {
  margin-bottom: 1.5rem;
}

.create-event-header h1 {
  font-size: 2.4rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--black);
}

.create-event-header p {
  color: #444;
  font-size: 1.1rem;
}

.create-event-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-panel {
  background: var(--light-panel);
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: var(--shadow);
}

.form-panel h2 {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  color: var(--black);
}

.upload-box {
  min-height: 260px;
  border: 2px dashed #2a2a2a;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
}

.upload-box img {
  width: 28px;
  height: 28px;
}

.upload-box h3 {
  font-size: 1.8rem;
  margin: 0;
}

.upload-box p {
  font-size: 0.9rem;
  color: #333;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.4rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  font-family: 'K2D', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--black);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  border: none;
  outline: none;
  background: #a9c8f5;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  box-shadow: var(--shadow);
}

.form-group textarea {
  min-height: 110px;
  resize: vertical;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.icon-label-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-label-group label img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tags-subhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'K2D', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.tags-subhead img {
  width: 20px;
  height: 20px;
}

.tag-input-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.tag-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: #a9c8f5;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  box-shadow: var(--shadow);
}

.small-form-btn {
  border: none;
  background: var(--button-dark);
  color: var(--white);
  padding: 0.75rem 1.2rem;
  border-radius: 14px;
  font-family: 'K2D', sans-serif;
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.checkbox-group input {
  margin-top: 0.25rem;
}

.checkbox-group label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.checkbox-group label span {
  font-size: 1rem;
  color: var(--black);
}

.checkbox-group label small {
  color: #444;
  font-size: 0.85rem;
}

.create-event-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.bottom-action-btn {
  border: none;
  padding: 0.85rem 1.4rem;
  border-radius: 14px;
  font-family: 'K2D', sans-serif;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.secondary-btn {
  background: #8fb0ff;
  color: var(--black);
}

.primary-btn {
  background: var(--button-dark);
  color: var(--white);
}

/* CREATE EVENT RESPONSIVE */

@media (max-width: 800px) {
  .form-row.two-col {
    grid-template-columns: 1fr;
  }

  .tag-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .create-event-actions {
    justify-content: stretch;
    flex-direction: column;
  }

  .bottom-action-btn {
    width: 100%;
  }
}

/* =========================
   NOTIFICATIONS PAGE
========================= */

.notifications-page {
  background: #f4f4f4;
  padding: 2rem 0 3rem;
}

.notifications-header {
  margin-bottom: 1.8rem;
}

.notifications-header h1 {
  font-size: 2.4rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--black);
}

.notifications-header p {
  font-size: 1.1rem;
  color: #333;
}

.notifications-tabs {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.notifications-tab {
  border: none;
  background: var(--sky-blue);
  color: var(--black);
  font-family: 'K2D', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  border-radius: 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.notifications-tab.active {
  background: #6f8df7;
  color: var(--white);
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-bottom: 3rem;
}

.notification-card {
  background: var(--light-panel);
  border-radius: 22px;
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.notification-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.notification-left > img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-top: 0.2rem;
}

.notification-content h2 {
  font-size: 1.05rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.25rem;
  color: var(--black);
}

.notification-content p {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  color: #333;
}

.notification-link-btn {
  display: inline-block;
  background: #8fb0ff;
  color: var(--black);
  font-family: 'K2D', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.notification-check {
  font-size: 2rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
  flex-shrink: 0;
}

/* NOTIFICATIONS RESPONSIVE */

@media (max-width: 700px) {
  .notification-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .notification-check {
    align-self: flex-end;
  }
}

/* =========================
   SEARCH PAGE
========================= */

.search-page {
  background: #f4f4f4;
  padding: 2rem 0 3rem;
}

.search-page-header {
  margin-bottom: 1.5rem;
}

.search-page-header h1 {
  font-size: 2.4rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--black);
}

.search-page-header p {
  font-size: 1.05rem;
  color: #444;
}

.search-bar-section {
  margin-bottom: 1.5rem;
}

.search-page-form {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.search-page-input-wrap {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--light-panel);
  border-radius: 18px;
  padding: 0.95rem 1rem;
  box-shadow: var(--shadow);
}

.search-page-input-wrap img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.search-page-input-wrap input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.search-submit-btn {
  border: none;
  background: var(--button-dark);
  color: var(--white);
  font-family: 'K2D', sans-serif;
  font-weight: 700;
  padding: 0.95rem 1.4rem;
  border-radius: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.search-filters-section {
  margin-bottom: 1.6rem;
}

.search-filter-row {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.search-results-header {
  margin-bottom: 1.3rem;
}

.search-results-header h2 {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  color: var(--black);
}

.search-results-header p {
  color: #555;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* SEARCH RESPONSIVE */

@media (max-width: 700px) {
  .search-page-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-submit-btn {
    width: 100%;
  }
}


/* =========================
   SEARCH RESULTS GRID
========================= */

.search-results-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Small event cards */

.search-results-list .event-card-large {
  background: var(--light-panel);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

/* Image */

.search-results-list .event-card-image {
  width: 100%;
  height: 160px;
  position: relative;
}

.search-results-list .event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content */

.search-results-list .event-card-content {
  padding: 1rem;
}

.search-results-list .event-card-content h2 {
  font-size: 1rem;
  margin-bottom: .5rem;
}

/* Hide long description in search cards */

.search-results-list .event-description {
  display: none;
}

/* Meta */

.search-results-list .event-meta-list {
  font-size: .85rem;
  margin-top: .5rem;
}

.search-results-list .event-meta-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}

.search-results-list .event-meta-item img {
  width: 14px;
}

/* Bottom buttons */

.search-results-list .event-card-bottom {
  margin-top: .6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-results-list .details-btn {
  font-size: .8rem;
  padding: .4rem .7rem;
}

/* Responsive */

@media (max-width: 1200px) {
  .search-results-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .search-results-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .search-results-list {
    grid-template-columns: 1fr;
  }
}

/* =========================
   PROFILE PAGE
========================= */

.profile-page{
padding:40px 0 60px;
}

/* PROFILE HEADER */

.profile-header{

display:flex;
gap:30px;
align-items:center;

background:var(--light-panel);
padding:30px;

border-radius:18px;
box-shadow:var(--shadow);

margin-bottom:30px;

}

.profile-avatar img{

width:120px;
height:120px;

border-radius:50%;
object-fit:cover;

border:4px solid white;
box-shadow:var(--shadow);

}

/* PROFILE INFO */

.profile-info h1{

font-size:28px;
margin-bottom:10px;

}

.profile-bio{

max-width:600px;
margin-bottom:20px;

}

/* STATS */

.profile-stats{

display:flex;
gap:60px;
margin-bottom:20px;

}

.profile-stat{

text-align:center;

}

.stat-number{

display:block;
font-size:22px;
font-weight:700;

}

.stat-label{

font-size:14px;
color:#555;

}

/* BUTTONS */

.profile-actions{

display:flex;
gap:15px;

}

.edit-profile-btn{

background:#333;
color:white;

border:none;

padding:10px 18px;
border-radius:12px;

cursor:pointer;

}

.share-profile-btn{

background:#6d8df5;
color:white;

border:none;

padding:10px 18px;
border-radius:12px;

cursor:pointer;

}

/* TABS */

.profile-tabs{

margin-bottom:30px;

}

.tabs{

display:flex;
gap:10px;

background:var(--light-panel);
padding:8px;

border-radius:14px;

width:fit-content;

}

.tab{

border:none;
background:transparent;

padding:10px 22px;
border-radius:10px;

font-weight:600;

cursor:pointer;

}

.tab.active{

background:#6d8df5;
color:white;

}

/* GALLERY */

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);
gap:25px;

}

.gallery-grid img{

width:100%;
height:220px;

object-fit:cover;

border-radius:16px;

box-shadow:var(--shadow);

transition:transform .2s ease;

}

.gallery-grid img:hover{

transform:scale(1.03);

}

/* =========================
   CARD HOVER ANIMATION
========================= */

.event-card-large,
.my-event-card,
.notification-card,
.search-results-list .event-card-large,
.gallery-grid img {

transition: transform .25s ease, box-shadow .25s ease;

}

.event-card-large:hover,
.my-event-card:hover,
.notification-card:hover,
.search-results-list .event-card-large:hover {

transform: translateY(-6px);

box-shadow: 0 10px 25px rgba(0,0,0,.18);

cursor: pointer;

}

/* gallery hover */

.gallery-grid img:hover{

transform: scale(1.05);

}