/* Events page layout */

.events-block{
  margin-top: 28px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  transition: transform 0.1s ease-in;
}

.events-head{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.events-left{
  flex:1 1 420px;
  min-width:260px;
}

.events-evtitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
}

.events-evdesc{
  opacity:.9;
  line-height:1.35;
}

.events-images{
  flex:0 1 420px;
  min-width:260px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}

.events-images img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:14px;
  opacity:.95;
}

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

.events-btn{
  border:0;
  cursor:pointer;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  background: rgba(255,255,255,0.12);
  color: inherit;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}

.events-btn:hover{
  filter: saturate(2) brightness(1.08);
  opacity: .95;
}

.events-items{
  margin-top:14px;
  display:none;
}

.events-items.open{
  display:block;
}

.events-divider{
  margin-top:18px;
  height:1px;
  background: rgba(255,255,255,0.12);
}

/* button arrow */
.events-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.events-btn .btn-arrow{
  display: inline-block;
  transition: transform 160ms ease;
  transform: rotate(0deg); /* ▶ */
}

.events-btn.open .btn-arrow{
  transform: rotate(90deg); /* ▼ */
}

.event-table-section{
  margin-top: 14px;
}

.event-table-title{
  margin: 6px 0 8px;
  font-size: 18px;
  font-weight: 800;
  opacity: .9;
  letter-spacing: .2px;
}

.event-table-icon{
  opacity: .85;
  transform: translateX(7px) translateY(-2px);
}

/* BETA */

.events-event-Beta {
    background: rgba(255, 217, 64, 0.449);
    box-shadow: 3px 10px 12px rgba(217, 160, 62, 0.437);
}

.table-frame-Beta { 
    background: linear-gradient(180deg, rgba(255, 235, 10, 0.35), rgba(255, 192, 55, 0.55)) !important;
}

.event-btn-Beta { 
    background: linear-gradient(135deg, rgba(255, 235, 10, 0.25), rgba(255, 192, 55, 0.40)) !important;
}


/* CHRISTMAS */

.events-event-Christmas {
    background: rgba(87, 137, 255, 0.449);
    box-shadow: 3px 10px 12px rgba(58, 98, 219, 0.437);
}

.table-frame-Christmas { 
    background: linear-gradient(180deg, rgba(10, 145, 255, 0.35), rgba(55, 138, 255, 0.55)) !important;
}

.event-btn-Christmas { 
    background: linear-gradient(135deg,  rgba(10, 145, 255, 0.25), rgba(55, 138, 255, 0.40)) !important;
}

.Christmas-scroll{
  max-height: 420px;
  overflow: auto;
}

.Christmas-scroll::-webkit-scrollbar{
  width: 14px;
}

.Christmas-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  margin: 6px;
}

.Christmas-scroll::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      rgba(74, 145, 186, 0.95),
      rgba(50, 106, 167, 0.95)
    );
  border-radius: 999px;

  border: 3px solid rgba(0,0,0,.45);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.35);
}

.Christmas-scroll::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(108, 169, 204, 0.95),
      rgba(78, 123, 172, 0.95)
    );
}

/* VALENTINE */

.events-event-Valentines-Day {
    background: rgba(255, 61, 61, 0.449);
    box-shadow: 3px 10px 12px rgba(220, 65, 122, 0.437);
}

.table-frame-Valentines-Day { 
    background: linear-gradient(170deg, rgba(255, 35, 35, 0.35), rgba(255, 77, 163, 0.55)) !important;
}

.event-btn-Valentines-Day { 
    background: linear-gradient(135deg,  rgba(255, 35, 35, 0.25), rgba(255, 77, 136, 0.4)) !important;
}

.Valentines-Day-scroll{
  max-height: 420px;
  overflow: auto;
}

.Valentines-Day-scroll::-webkit-scrollbar{
  width: 14px;
}

.Valentines-Day-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  margin: 6px;
}

.Valentines-Day-scroll::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      rgba(186, 74, 130, 0.95),
      rgba(167, 50, 50, 0.95)
    );
  border-radius: 999px;

  border: 3px solid rgba(0,0,0,.45);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.35);
}

.Valentines-scroll::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(180, 108, 204, 0.95),
      rgba(167, 78, 172, 0.95)
    );
}   
/* 
.events-event-Valentines-Day {
    background: rgba(255, 93, 204, 0.449);
    box-shadow: 3px 10px 12px rgba(220, 65, 122, 0.437);
}

.table-frame-Valentines-Day { 
    background: linear-gradient(180deg, rgba(171, 35, 255, 0.35), rgba(255, 77, 210, 0.55)) !important;
}

.event-btn-Valentines-Day { 
    background: linear-gradient(135deg,  rgba(171, 35, 255, 0.25), rgba(255, 77, 210, 0.40)) !important;
}

.Valentines-Day-scroll{
  max-height: 420px;
  overflow: auto;
}

.Valentines-Day-scroll::-webkit-scrollbar{
  width: 14px;
}

.Valentines-Day-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  margin: 6px;
}

.Valentines-Day-scroll::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      rgba(156, 74, 186, 0.95),
      rgba(167, 50, 157, 0.95)
    );
  border-radius: 999px;

  border: 3px solid rgba(0,0,0,.45);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.35);
}

.Valentines-scroll::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(180, 108, 204, 0.95),
      rgba(167, 78, 172, 0.95)
    );
}    */

/*            ddddddddddddddddddddddddddddd           */

.events-event-April-Fools {
    background: rgba(0, 0, 0, 0.321);
    box-shadow: 0px 0px 12px rgba(99, 103, 106, 0.264);
}

.events-event-Bee-Shower {
    background: rgba(0, 0, 0, 0.321);
    box-shadow: 0px 0px 12px rgba(99, 103, 106, 0.264);
}

.events-event-Easter {
    background: rgba(79, 188, 70, 0.449);
    box-shadow: 3px 10px 12px rgba(49, 157, 51, 0.437);
}

.table-frame-Easter { 
    background: linear-gradient(180deg, rgba(10, 255, 112, 0.35), rgba(39, 203, 61, 0.55)) !important;
}

.event-btn-Easter { 
    background: linear-gradient(135deg,  rgba(10, 255, 112, 0.25), rgba(39, 203, 61, 0.40)) !important;
}

.Easter-scroll{
  max-height: 420px;
  overflow: auto;
}

.Easter-scroll::-webkit-scrollbar{
  width: 14px;
}

.Easter-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  margin: 6px;
}

.Easter-scroll::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      rgba(95, 186, 74, 0.95),
      rgba(50, 167, 52, 0.95)
    );
  border-radius: 999px;

  border: 3px solid rgba(0,0,0,.45);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.35);
}

.Easter-scroll::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(119, 203, 100, 0.95),
      rgba(78, 181, 79, 0.95)
    );
}

.events-event-Pirates {
    background: rgba(23, 167, 189, 0.449);
    box-shadow: 3px 10px 12px rgba(11, 97, 101, 0.437);
}

.table-frame-Pirates { 
    background: linear-gradient(180deg, rgba(10, 255, 239, 0.35), rgba(32, 161, 173, 0.55)) !important;
}

.event-btn-Pirates { 
    background: linear-gradient(135deg,  rgba(10, 255, 239, 0.25), rgba(32, 161, 173, 0.40)) !important;
}

.events-event-Happy-Birthday {
    background: rgba(185, 68, 175, 0.449);
    box-shadow: 3px 10px 12px rgba(87, 11, 101, 0.437);
}

.table-frame-Happy-Birthday { 
    background: linear-gradient(180deg, rgba(239, 10, 255, 0.35), rgba(131, 32, 173, 0.55)) !important;
}

.event-btn-Happy-Birthday { 
    background: linear-gradient(135deg,  rgba(239, 10, 255, 0.25), rgba(131, 32, 173, 0.40)) !important;
}

.events-event-Halloween {
    background: rgba(224, 136, 64, 0.449);
    box-shadow: 3px 10px 12px rgba(101, 36, 11, 0.437);
}

.table-frame-Halloween { 
    background: linear-gradient(180deg, rgba(255, 124, 10, 0.35), rgba(149, 79, 26, 0.55)) !important;
}

.event-btn-Halloween { 
    background: linear-gradient(135deg,  rgba(255, 124, 10, 0.25), rgba(149, 79, 26, 0.40)) !important;
}

.Halloween-scroll{
  max-height: 420px;
  overflow: auto;
}

.Halloween-scroll::-webkit-scrollbar{
  width: 14px;
}

.Halloween-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  margin: 6px;
}

.Halloween-scroll::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      rgba(208, 118, 50, 0.95),
      rgba(178, 84, 21, 0.95)
    );
  border-radius: 999px;

  border: 3px solid rgba(0,0,0,.45);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.35);
}

.Halloween-scroll::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(229, 145, 80, 0.95),
      rgba(184, 104, 51, 0.95)
    );
}

/* .events-event-Beta {
    background: rgba(255, 204, 0, 0.449);
    box-shadow: 3px 10px 12px rgba(219, 142, 9, 0.437);
}

.events-event-Christmas {
    background: rgba(0, 153, 255, 0.449);
    box-shadow: 3px 10px 12px rgba(9, 139, 219, 0.437);
}

.events-event-April-Fools {
    background: rgba(0, 0, 0, 0.321);
    box-shadow: 0px 0px 12px rgba(99, 103, 106, 0.264);
}

.events-event-Bee-Shower {
    background: rgba(0, 0, 0, 0.321);
    box-shadow: 0px 0px 12px rgba(99, 103, 106, 0.264);
}

.events-event-Easter {
    background: rgba(37, 189, 23, 0.449);
    box-shadow: 3px 10px 12px rgba(12, 163, 14, 0.437);
}

.events-event-Pirates {
    background: rgba(34, 226, 255, 0.449);
    box-shadow: 3px 10px 12px rgba(11, 97, 101, 0.437);
}

.events-event-Happy-Birthday {
    background: rgba(189, 23, 175, 0.449);
    box-shadow: 3px 10px 12px rgba(87, 11, 101, 0.437);
}

.events-event-Halloween {
    background: rgba(219, 105, 12, 0.449);
    box-shadow: 3px 10px 12px rgba(101, 36, 11, 0.437);
} */

.events-block:hover {
    transform: scale(1.005) translateX(10px);
} 

#page-content .table-scroll{
  max-height: 420px;
  overflow: auto;
}

/* Hotfix: robust event table expansion */
.events-head{cursor:pointer}
.events-block.open .events-items{display:block!important}
.events-items.open{display:block!important}
.events-items[hidden]{display:none!important}
details.event-accordion[open] > .event-content{display:block!important}
details.event-accordion:not([open]) > .event-content{display:none!important}