/* =============================================
   مدينة المؤسسين — Laravel App Stylesheet
   ============================================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --terra:#C8522B;--terra2:#A03D1F;--terra3:#FAECE7;
  --navy:#1A2F4A;--navy2:#0F1F33;--navy3:#2E4A6E;
  --gold:#D4A017;--gold2:#B8860B;--gold3:#F0C030;
  --teal:#1A7A6E;--teal2:#0F5A50;--teal3:#E1F5EE;
  --green:#2D7A3E;--green2:#1F5A2C;--green3:#EAF3DE;
  --purple:#5B3A8C;--purple3:#EEEDFE;
  --sand:#FFF8EC;--sand2:#F5EDD6;--sand3:#EDE0C0;
  --sky:#185FA5;--sky2:#E6F1FB;--red:#E24B4A;
}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--sand2);color:var(--navy);direction:rtl;overflow-x:hidden}

/* ── NAV ── */
.main-nav{background:var(--navy);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--gold3)}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--gold3);font-family:'Tajawal',sans-serif;font-size:1.35rem;font-weight:800;text-decoration:none}
.nav-logo-icon{width:38px;height:38px;background:var(--terra);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.nav-links{display:flex;gap:1.3rem;list-style:none;align-items:center}
.nav-links a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:0.88rem;font-weight:600;transition:color 0.2s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--gold3)}
.nav-cta{background:var(--terra)!important;color:white!important;padding:8px 18px;border-radius:8px;font-weight:700!important}
.nav-cta:hover{background:var(--terra2)!important}
.nav-user-chip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background 0.15s}
.nav-user-chip:hover{background:rgba(255,255,255,0.08)}
.nav-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Tajawal',sans-serif;font-size:0.82rem;font-weight:900;color:white;flex-shrink:0}
.nav-uname{font-size:0.82rem;font-weight:700;color:white}
.nav-logout-btn{background:none;border:none;cursor:pointer;font-family:'Cairo',sans-serif;font-size:0.82rem;color:rgba(255,255,255,0.55);padding:0;transition:color 0.2s}
.nav-logout-btn:hover{color:var(--red)}
.notif-badge{position:absolute;top:-5px;left:-5px;background:var(--red);color:white;font-size:0.55rem;font-weight:700;padding:1px 4px;border-radius:8px;min-width:14px;text-align:center}
.nav-notifications{position:relative}
.nav-bell-wrap{position:relative}
.nav-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:12px;background:transparent;color:rgba(255,255,255,0.8);cursor:pointer;transition:all 0.2s}
.nav-icon-btn:hover,.nav-icon-btn.active{background:rgba(255,255,255,0.10);color:var(--gold3)}
.nav-icon-btn-symbol{font-size:1.15rem;line-height:1}
#notif-dropdown{display:none;position:absolute;top:calc(100% + 12px);left:0;width:320px;background:white;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.08);border:1px solid #ece4d8;overflow:hidden;z-index:200;transition:all 0.2s ease}
#notif-dropdown.open{display:block}
.notifications-dropdown-header{padding:0.95rem 1rem;border-bottom:1px solid #f1e9df;font-family:'Tajawal',sans-serif;font-size:0.94rem;font-weight:900;color:var(--navy);background:#fcfaf6}
.notifications-dropdown-list{max-height:360px;overflow-y:auto}
.notifications-dropdown-item{display:block;padding:0.9rem 1rem;text-decoration:none;color:inherit;border-bottom:1px solid #f5eee4;transition:background 0.18s}
.notifications-dropdown-item:hover{background:#faf6ef}
.notifications-dropdown-item.is-unread{background:#f9f6f2}
.notifications-dropdown-item.is-unread:hover{background:#f4efe8}
.notifications-dropdown-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.notifications-dropdown-name{font-size:0.8rem;font-weight:800;color:var(--navy)}
.notifications-dropdown-dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex-shrink:0}
.notifications-dropdown-message{font-size:0.78rem;line-height:1.65;color:#55606f}
.notifications-dropdown-time{font-size:0.66rem;color:#97a0ad;margin-top:6px}
.notifications-dropdown-empty{padding:1.3rem 1rem;text-align:center;font-size:0.8rem;color:#7b8390}
.notifications-dropdown-footer{display:block;padding:0.9rem 1rem;text-align:center;text-decoration:none;font-size:0.8rem;font-weight:800;color:var(--terra);background:#fcfaf6}
.notifications-dropdown-footer:hover{background:#f7efe4}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:22px;height:2px;background:white;border-radius:2px;display:block}
.mobile-menu{display:none;position:fixed;top:64px;right:0;left:0;background:var(--navy2);padding:1rem 1.5rem;z-index:99;border-bottom:2px solid var(--navy3)}
.mobile-menu a{display:block;color:rgba(255,255,255,0.85);text-decoration:none;font-size:1rem;font-weight:600;padding:0.7rem 0;border-bottom:0.5px solid rgba(255,255,255,0.08)}
.mobile-menu.open{display:block}

/* ── FLASH MESSAGES ── */
.flash{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:999;padding:10px 24px;border-radius:10px;font-size:0.88rem;font-weight:600;white-space:nowrap;animation:slideDown 0.3s ease}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.flash-success{background:var(--green);color:white}
.flash-error{background:var(--red);color:white}
.flash-info{background:var(--sky);color:white}

/* ── LAYOUT ── */
.container{max-width:960px;margin:0 auto;padding:0 1.2rem}
.container-wide{max-width:1100px;margin:0 auto;padding:0 1.2rem}
.section{padding:2.5rem 0}
.section-header{text-align:center;margin-bottom:1.8rem}
.section-header h2{font-family:'Tajawal',sans-serif;font-size:1.8rem;font-weight:900;color:var(--navy);margin-bottom:0.4rem}
.section-header p{font-size:0.95rem;color:var(--navy3);opacity:0.82}
.feed-layout{display:grid;grid-template-columns:200px 1fr 190px;gap:1rem;max-width:980px;margin:0 auto;padding:1rem 1rem 2rem}
.feed-sidebar-l,.feed-sidebar-r{display:flex;flex-direction:column;gap:0.8rem}

/* ── CARDS ── */
.card{background:white;border-radius:16px;border:0.5px solid var(--sand3);padding:1.2rem 1.4rem}
.card-sm{background:white;border-radius:14px;border:0.5px solid var(--sand3);padding:1rem}

/* ── BUTTONS ── */
.btn{display:inline-block;padding:10px 22px;border-radius:11px;font-family:'Cairo',sans-serif;font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none;text-align:center}
.btn-primary{background:var(--terra);color:white}
.btn-primary:hover{background:var(--terra2);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--navy);border:2px solid var(--sand3)}
.btn-secondary:hover{border-color:var(--terra);color:var(--terra)}
.btn-teal{background:var(--teal);color:white}
.btn-teal:hover{background:var(--teal2)}
.btn-white{background:white;color:var(--terra)}
.btn-white:hover{background:var(--sand2)}
.btn-sm{padding:7px 16px;font-size:0.8rem;border-radius:9px}
.btn-xs{padding:4px 11px;font-size:0.72rem;border-radius:7px}
.btn-danger{background:var(--red);color:white}
.btn-outline{background:transparent;border:1.5px solid var(--sand3);color:var(--navy)}
.btn-outline:hover{border-color:var(--terra);color:var(--terra)}

/* ── PILLS ── */
.pill{display:inline-block;padding:2px 10px;border-radius:8px;font-size:0.68rem;font-weight:700}
.pill-green{background:var(--green3);color:var(--green2)}
.pill-terra{background:var(--terra3);color:var(--terra2)}
.pill-gold{background:rgba(212,160,23,0.15);color:var(--gold2)}
.pill-gray{background:var(--sand2);color:#666}
.pill-red{background:rgba(226,75,74,0.12);color:var(--red)}
.pill-purple{background:var(--purple3);color:#3D2560}
.pill-blue{background:var(--sky2);color:var(--sky)}

/* ── FORMS ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:0.82rem;font-weight:700;color:#555;margin-bottom:6px}
.form-req{color:var(--terra);font-size:0.7rem}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;border:0.5px solid var(--sand3);border-radius:10px;font-family:'Cairo',sans-serif;font-size:0.9rem;color:var(--navy);background:white;outline:none;transition:border-color 0.2s;direction:rtl}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(200,82,43,0.08)}
.form-textarea{resize:vertical;min-height:85px;line-height:1.7}
.form-select{appearance:none;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-error{font-size:0.75rem;color:var(--red);margin-top:4px;display:flex;align-items:center;gap:4px}
.form-card{background:white;border-radius:20px;border:0.5px solid var(--sand3);overflow:hidden;margin-bottom:1rem}
.form-card-header{padding:1rem 1.3rem;border-bottom:0.5px solid var(--sand3);display:flex;align-items:center;gap:12px;background:var(--sand)}
.form-card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.form-card-title{font-family:'Tajawal',sans-serif;font-size:0.98rem;font-weight:800;color:var(--navy)}
.form-card-sub{font-size:0.72rem;color:#888}
.form-card-body{padding:1.1rem 1.3rem}
.skills-wrap{display:flex;flex-wrap:wrap;gap:7px}
.skill-pill{padding:7px 14px;border-radius:20px;border:1.5px solid var(--sand3);font-family:'Cairo',sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.2s;background:white;color:#666;user-select:none}
.skill-pill.selected,.skill-pill:checked+label{background:var(--terra3);border-color:var(--terra);color:var(--terra2)}

/* ── POSTS ── */
.post{background:white;border-radius:16px;border:0.5px solid var(--sand3);margin-bottom:0.8rem;overflow:hidden;transition:border-color 0.2s}
.post:hover{border-color:var(--sand3)}
.post-head{padding:0.85rem 1rem 0.5rem;display:flex;align-items:flex-start;gap:10px}
.post-meta{flex:1}
.post-author{font-family:'Tajawal',sans-serif;font-size:0.86rem;font-weight:800;color:var(--navy)}
.post-info{font-size:0.68rem;color:#888;margin-top:1px;display:flex;align-items:center;gap:5px}
.post-tag{display:inline-block;font-size:0.62rem;font-weight:700;padding:2px 7px;border-radius:6px}
.post-body{padding:0 1rem 0.8rem}
.post-text{font-size:0.86rem;color:var(--navy);line-height:1.8}
.post-actions{padding:0.5rem 1rem 0.85rem;display:flex;align-items:center;border-top:0.5px solid var(--sand)}
.action-btn{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:7px;cursor:pointer;font-size:0.73rem;font-weight:600;color:#888;border:none;background:none;font-family:'Cairo',sans-serif;transition:all 0.2s}
.action-btn:hover{background:var(--sand);color:var(--terra)}
.action-btn.liked{color:var(--terra)}

/* ── AVATARS ── */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Tajawal',sans-serif;font-weight:900;color:white;flex-shrink:0}
.av-xs{width:26px;height:26px;font-size:0.6rem}
.av-sm{width:34px;height:34px;font-size:0.78rem}
.av-md{width:46px;height:46px;font-size:1rem}
.av-lg{width:64px;height:64px;font-size:1.4rem}
.av-xl{width:80px;height:80px;font-size:1.6rem}

/* ── SIDEBAR WIDGETS ── */
.sidebar-profile{background:white;border-radius:16px;border:0.5px solid var(--sand3);padding:1rem;text-align:center}
.sp-name{font-family:'Tajawal',sans-serif;font-size:0.9rem;font-weight:800;color:var(--navy)}
.sp-city{font-size:0.7rem;color:#888;margin-bottom:7px}
.sp-stage{display:inline-block;background:var(--terra3);color:var(--terra2);font-size:0.65rem;font-weight:700;padding:2px 9px;border-radius:9px}
.sp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:10px;border-top:0.5px solid var(--sand3);padding-top:10px}
.sps-n{font-family:'Tajawal',sans-serif;font-size:1rem;font-weight:800;color:var(--navy);text-align:center}
.sps-l{font-size:0.6rem;color:#888;text-align:center}
.dist-links{background:white;border-radius:14px;border:0.5px solid var(--sand3);padding:0.8rem}
.dl-title{font-size:0.7rem;font-weight:700;color:#888;margin-bottom:7px;letter-spacing:0.5px;text-transform:uppercase}
.dl-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;cursor:pointer;transition:background 0.15s;font-size:0.8rem;font-weight:600;color:var(--navy);margin-bottom:2px;text-decoration:none}
.dl-item:hover{background:var(--sand3)}
.dl-item.active{background:var(--terra3);color:var(--terra2)}
.widget{background:white;border-radius:14px;border:0.5px solid var(--sand3);padding:1rem}
.w-title{font-family:'Tajawal',sans-serif;font-size:0.82rem;font-weight:800;color:var(--navy);margin-bottom:0.7rem;display:flex;align-items:center;gap:5px}

/* ── TABLES (Admin) ── */
.admin-table{width:100%;border-collapse:collapse;table-layout:fixed}
.admin-table th{padding:8px 12px;font-size:0.7rem;font-weight:700;color:#888;text-align:right;border-bottom:0.5px solid var(--sand3);background:var(--sand);white-space:nowrap;overflow:hidden}
.admin-table td{padding:9px 12px;font-size:0.78rem;color:#555;border-bottom:0.5px solid var(--sand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--sand)}
.td-name{color:var(--navy);font-weight:700}

/* ── FOOTER ── */
.main-footer{background:var(--navy2);padding:2.5rem 2rem 1.5rem;border-top:2px solid var(--navy3);direction:rtl}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-brand .logo{display:flex;align-items:center;gap:10px;color:var(--gold3);font-family:'Tajawal',sans-serif;font-size:1.2rem;font-weight:800;margin-bottom:0.8rem;text-decoration:none}
.footer-brand p{font-size:0.8rem;color:rgba(255,255,255,0.5);line-height:1.8}
.footer-col h4{font-family:'Tajawal',sans-serif;font-size:0.88rem;font-weight:800;color:var(--gold3);margin-bottom:0.8rem}
.footer-col a{display:block;font-size:0.78rem;color:rgba(255,255,255,0.55);text-decoration:none;margin-bottom:5px;transition:color 0.2s}
.footer-col a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem}
.footer-bottom p{font-size:0.72rem;color:rgba(255,255,255,0.35)}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--navy);color:white;padding:10px 20px;border-radius:10px;font-size:0.82rem;font-weight:600;white-space:nowrap;animation:toastIn 0.3s ease;pointer-events:none}
.toast.success{background:var(--green2)}
.toast.error{background:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── PAGINATION ── */
.pagination{display:flex;justify-content:center;gap:5px;padding:1.5rem 0;flex-wrap:wrap}
.pagination .page-item .page-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:white;border:0.5px solid var(--sand3);font-family:'Cairo',sans-serif;font-size:0.82rem;font-weight:600;color:var(--navy);text-decoration:none;transition:all 0.15s}
.pagination .page-item.active .page-link{background:var(--terra);border-color:var(--terra);color:white}
.pagination .page-item .page-link:hover{border-color:var(--terra);color:var(--terra)}

/* ── RESPONSIVE ── */
@media(max-width:820px){
  .feed-layout{grid-template-columns:1fr}
  .feed-sidebar-l,.feed-sidebar-r{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  #notif-dropdown{left:0;width:min(320px,calc(100vw - 2rem))}
  .hamburger{display:flex}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .main-nav{padding:0 1rem}
  .footer-grid{grid-template-columns:1fr}
}
/* =============================================
   MOBILE BOTTOM NAVIGATION
   ============================================= */

.bottom-nav {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;

  background: white;
  border-top: 1px solid var(--sand3);
  padding: 6px 0;

  z-index: 150; /* higher than mobile menu (99), lower than toast (9999) */
}

/* Each item */
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-size: 0.7rem;
  font-weight: 700;
  color: #666;
  text-decoration: none;

  position: relative;
  flex: 1;
}

/* Icon */
.bottom-nav a span:first-child {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

/* Active state */
.bottom-nav a.active {
  color: var(--terra);
}

/* Badge (notifications) */
.bottom-badge {
  position: absolute;
  top: -3px;
  left: 30%;
  background: var(--red);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
}

/* Hide on desktop */
@media (min-width: 821px) {
  .bottom-nav {
    display: none;
  }
}

/* Prevent content being hidden behind bottom nav */
@media (max-width: 820px) {
  body {
    padding-bottom: 65px;
  }
}

/* =============================================
   MESSAGES LAYOUT (DESKTOP + MOBILE)
   ============================================= */

.messages-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: start;
}

/* Mobile redesign */
@media (max-width: 820px) {

  .messages-layout {
    display: block; /* 🔥 THIS is the key fix */
  }

  /* Hide sidebar completely */
  .messages-new {
    display: none !important;
  }

  /* Make conversations full width */
  .messages-list {
    width: 100%;
  }

}
/* =============================================
   CHAT PAGE (DESKTOP + MOBILE)
   ============================================= */

.chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: start;
}

/* MOBILE TRANSFORMATION */
@media (max-width: 820px) {

  .chat-layout {
    display: block; /* 🔥 CRITICAL */
  }

  /* Hide sidebar completely */
  .chat-sidebar {
    display: none !important;
  }

  /* Full screen chat */
  .chat-main {
    width: 100%;
    height: calc(100vh - 120px);
    border-radius: 0 !important;
  }

}

/* =============================================
   POST TOOLS (CLEAN UX)
   ============================================= */

.post-tools {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--sand3);
}

.tool-btn {
  background: #f6f2ec;
  border: 1px solid #e7ddcf;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: #fff;
  border-color: var(--terra);
  color: var(--terra);
}

.tool-btn.active {
  background: rgba(200,82,43,0.1);
  border-color: var(--terra);
  color: var(--terra);
}

/* ===== MOBILE GLOBAL FIXES ===== */

.main-content {
    width: 100%;
    overflow-x: hidden;
}

.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    padding-left: 16px;
    padding-right: 16px;
}

/* Better spacing on larger screens */
@media (min-width: 768px) {
    .page-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Prevent horizontal scroll issues */
body {
    overflow-x: hidden;
}

/* Fix images breaking layout */
img {
    max-width: 100%;
    height: auto;
}

/* Fix long text overflow */
* {
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hamburger {
        display: block;
    }
}

body {
    padding-bottom: 80px; /* space for bottom nav */
}

/* =============================================
   UNIVERSAL GRID FIX (EVENTS + ALL PAGES)
   ============================================= */

@media (max-width: 820px) {

  /* Force all grids to stack */
  .grid,
  .cards-grid,
  .events-grid,
  .market-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Fix cards overflowing */
  .card,
  .event-card {
    width: 100% !important;
    margin: 0 !important;
  }

}

@media (max-width: 820px) {

  * {
    max-width: 100%;
  }

}

/* =============================================
   EVENTS PAGE MOBILE FIX
   ============================================= */

@media (max-width: 820px) {

  /* Make event card vertical */
  .event-card-mobile {
    flex-direction: column !important;
  }

  /* Date section full width */
  .event-date-mobile {
    width: 100% !important;
    border-left: none !important;
    border-bottom: 1px solid #ece4d8;
    flex-direction: row !important;
    justify-content: space-between;
  }

  /* Content full width */
  .event-content-mobile {
    width: 100%;
    padding: 12px !important;
  }

  /* Remove forced min width */
  .event-text-mobile {
    min-width: unset !important;
    width: 100% !important;
  }

}

/* =============================================
   EVENT SHOW PAGE MOBILE FIX
   ============================================= */

@media (max-width: 820px) {

  /* STACK GRID */
  .event-show-grid {
    grid-template-columns: 1fr !important;
  }

  /* FIX HEADER */
  .event-header-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* FIX IMAGE */
  .event-image {
    height: 200px !important;
  }

  /* FULL WIDTH BUTTONS */
  .event-show-grid .btn {
    width: 100%;
    text-align: center;
  }

}

/* =============================================
   EVENT SHOW FINAL FIX (OVERFLOW + RTL SHIFT)
   ============================================= */

@media (max-width: 820px) {

  .event-show-grid {
    display: block !important;
  }

  /* Prevent ANY child from expanding layout */
  .event-show-grid > div {
    width: 100%;
  }

  /* Fix long text (VERY IMPORTANT) */
  .event-show-grid * {
    max-width: 100%;
    overflow-wrap: break-word;
  }

}

@media (max-width: 820px) {

  .event-actions-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .event-actions-mobile .btn {
    width: 100%;
  }

}

/* =============================================
   COFOUND CARD HOVER EFFECT
   ============================================= */

.cofound-card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.reel-actions {
    position: absolute;
    right: 15px;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 🔥 slightly bigger spacing */
    z-index: 3;
}

.reel-views {
    color: white;
    font-size: 13px;
    text-align: center;
}