.main-nav li a {font-size: 40px!important;
padding: 0,0,0,0!important;
}

.header .header-dropdown .header-ctas .header-cta .slot .slot-title {
    margin-bottom: .1em!important;
		font-size: 40px!important;
    z-index: 2;
}

.page-bg {display:none!important;}
.page-bg-bottom {display:none!important;}


/* RIGHT-SIDE 60% DRAWER OVERRIDES */
.header .header-dropdown{
  /* size + position */
  width: 60vw !important;
  max-width: 900px !important;     /* optional safety cap */
  height: 100vh !important;
	font-size: 55px!important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;

  /* kill the existing left-based system (even inline left:0) */
  left: auto !important;

  /* drawer behaviour */
  transform: translateX(100%) !important; /* hidden by default */
  transition: transform 0.35s ease !important;

  /* your glass look */
  background: rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  /* usability */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;

  /* optional: nice depth */
  box-shadow: -20px 0 40px rgba(0,0,0,0.35) !important;
}

/* When it’s open your element.style sets opacity: 1 — use that to slide it in */
.header .header-dropdown[style*="opacity: 1"]{
  transform: translateX(0) !important;
}

/* Mobile: make it full width if you want */
@media (max-width: 768px){
  .header .header-dropdown{
    width: 100vw !important;
    transform: translateX(100%) !important;
  }
  .header .header-dropdown[style*="opacity: 1"]{
    transform: translateX(0) !important;
  }
}

/* STACK MENU LINKS THEN CTAS (green blocks underneath) */
.header .header-dropdown .header-inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

/* Make the nav take full width */
.header .header-dropdown nav{
  width: 100% !important;
}

/* Ensure the list stays left and doesn’t try to share a row */
.header .header-dropdown .main-nav{
  width: 100% !important;
}

/* Put the green CTA section underneath and full width */
.header .header-dropdown .header-ctas{
  width: 85% !important;
  margin-top: 5px !important;
}

/* Make each green block full width (nice in a drawer) */
.header .header-dropdown .header-cta{
  width: 100% !important;
}

/* If your theme is using a grid/columns inside the CTA area, force a vertical stack */
.header .header-dropdown .header-ctas{
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

/* --- Make entire card clickable (existing faux link covers whole slot) --- */
.faux-block-link-container{
  position: relative;
}

.faux-block-link{
  position: absolute !important;
  inset: 0;
  z-index: 20;              /* above overlay so clicks always go through */
  display: block;
}

/* --- Ensure the overlay never steals the click --- */
.grid.col_3.image .slot-intro-overlay{
  pointer-events: none !important; /* critical: hover overlay won't block link */
}

/* --- Force square cards --- */
.grid.col_3.image .grid-item{
  aspect-ratio: 1 / 1 !important;  /* square */
  height: auto !important;         /* let aspect-ratio drive height */
}

/* Some themes need the slot itself forced square too */
.grid.col_3.image .grid-item .slot{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

/* --- Full-bleed image inside the square --- */
.grid.col_3.image .grid-item .slot-image,
.grid.col_3.image .grid-item .slot-image-inner,
.grid.col_3.image .grid-item .image-container{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.grid.col_3.image .grid-item .slot-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;

  transition: filter .35s ease, transform .35s ease;
  will-change: filter, transform;
}

/* --- Hover blur --- */
.grid.col_3.image .grid-item .slot:hover .slot-image img,
.grid.col_3.image .grid-item .slot:focus-within .slot-image img{
  filter: blur(18px) brightness(0.75);
  transform: scale(1.06);
}

/* --- Overlay FULL COVER (visual only) --- */
.grid.col_3.image .slot-intro-overlay{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 40px;

  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 0;
  transition: opacity .3s ease;

  /* text */
  font-family: var(--font-title, inherit);
  font-size: clamp(18px, 1.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: none !important;
}

.grid.col_3.image .grid-item .slot:hover .slot-intro-overlay,
.grid.col_3.image .grid-item .slot:focus-within .slot-intro-overlay{
  opacity: 1;
}

/* Optional: hide the original bottom text if you only want overlay text */
.grid.col_3.image .grid-item .slot-content .slot-text{
  display: none;
}
-----

    .block-feature-content .slots .slot {
				margin-bottom: 0px!important;}

-----
/* =========================================================
   FOOTER SOCIAL ICONS — force perfect alignment + sizing
   ========================================================= */

.footer .social-icons{
  width: 100%;
  margin-bottom: 20px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

@media (min-width: 900px){
  .footer .social-icons{
    justify-content: flex-end;
  }
}

.footer .social-icons a.social-icon{
  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  text-decoration: none;

  line-height: 1;
  font-size: 21px;
  vertical-align: middle;

  margin: 0 !important;
  padding: 0 !important;
}

.footer .social-icons a.social-icon::before{
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.footer .social-icons a.social-icon svg{
  width: 1em !important;
  height: 1em !important;
  display: block;
}

.footer .social-icons a.social-icon:hover{ opacity: 0.85; }

.footer .social-icons a.social-icon:focus-visible{
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (max-width: 480px){
  .footer .social-icons{ gap: 14px; }
  .footer .social-icons a.social-icon{
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* =========================================================
   Mask-based icons (for networks not in FA5)
   IMPORTANT: class selectors MUST include the dot
   ========================================================= */

/* Base mask setup (only applies to these specific networks) */
.footer .social-icons a.social-icon.x::before,
.footer .social-icons a.social-icon.blue-sky::before{
  content: "";
  background: currentColor;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* X */
.footer .social-icons a.social-icon.x::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.7 7.7L23 22h-6.8l-5.3-6.9L4.6 22H1.5l7.1-8.1L1 2h6.9l4.8 6.3L18.9 2zm-2.4 18h2.1L7.3 4H5.1l11.4 16z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.7 7.7L23 22h-6.8l-5.3-6.9L4.6 22H1.5l7.1-8.1L1 2h6.9l4.8 6.3L18.9 2zm-2.4 18h2.1L7.3 4H5.1l11.4 16z'/%3E%3C/svg%3E");
}

/* Bluesky (your class is "blue-sky") */
.footer .social-icons a.social-icon.blue-sky::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11c-1-2-4-6-7-7C2 3 1 5 2 7c1 2 4 4 7 5-3 1-6 3-7 5-1 2 0 4 3 3 3-1 6-5 7-7 1 2 4 6 7 7 3 1 4-1 3-3-1-2-4-4-7-5 3-1 6-3 7-5 1-2 0-4-3-3-3 1-6 5-7 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11c-1-2-4-6-7-7C2 3 1 5 2 7c1 2 4 4 7 5-3 1-6 3-7 5-1 2 0 4 3 3 3-1 6-5 7-7 1 2 4 6 7 7 3 1 4-1 3-3-1-2-4-4-7-5 3-1 6-3 7-5 1-2 0-4-3-3-3 1-6 5-7 7z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   TikTok icon fix (FontAwesome 5 doesn't include it)
--------------------------------------------------------- */

.footer .social-icons a.social-icon.tiktok::before{
  content: "" !important;
  display: block;

  width: 1em;
  height: 1em;

  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c.7 3.2 2.7 5.1 6 5.3v3.2c-2.1.1-4.1-.5-6-1.8v7.2c0 4-3.3 7.3-7.3 7.3S2 26.1 2 22.1s3.3-7.3 7.3-7.3c.5 0 1 .1 1.5.2v3.6c-.5-.2-1-.4-1.5-.4-2 0-3.7 1.7-3.7 3.7s1.7 3.7 3.7 3.7 3.7-1.7 3.7-3.7V3h3z'/%3E%3C/svg%3E") center / contain no-repeat;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3c.7 3.2 2.7 5.1 6 5.3v3.2c-2.1.1-4.1-.5-6-1.8v7.2c0 4-3.3 7.3-7.3 7.3S2 26.1 2 22.1s3.3-7.3 7.3-7.3c.5 0 1 .1 1.5.2v3.6c-.5-.2-1-.4-1.5-.4-2 0-3.7 1.7-3.7 3.7s1.7 3.7 3.7 3.7 3.7-1.7 3.7-3.7V3h3z'/%3E%3C/svg%3E") center / contain no-repeat;
		;}


/* =========================================
   FIX GREEN BACKGROUND LEAKING BELOW FOOTER
   ========================================= */

/* Keep decorative background clipped to page section */
body.page .page.page-default {
  position: relative;
  overflow: hidden;
}

/* Stop theme background svgs from visually hanging below footer */
body.page .page.page-default .page-bg,
body.page .page.page-default .page-bg-bottom {
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above decorative svgs */
body.page .page.page-default .template,
body.page .page.page-default .dynamic-content {
  position: relative;
  z-index: 1;
}

/* Make footer a clean hard stop */
body.page .footer {
  position: relative;
  z-index: 5;
  overflow: hidden;
  background: #2f3137;
}

/* =========================================================
   GAMES AID - MY CALENDAR OVERRIDES
   Full cleaned version - bigger popup with date support
   ========================================================= */

/* =========================================================
   1. Shared GamesAid variables
   ========================================================= */

:root {
  --ga-green: #6ace00;
  --ga-pink: #ca016c;
  --ga-dark: #2d2d32;
  --ga-text: #202124;
  --ga-muted: #6f7680;
  --ga-border: #e6e8ec;
  --ga-bg: #ffffff;
  --ga-soft: #f7f8fa;
  --ga-shadow: 0 14px 38px rgba(18, 24, 40, 0.08);
  --ga-pink-panel:
    radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(90deg, #b70074 0%, #cf007f 55%, #b70074 100%);
}

/* =========================================================
   2. Calendar scope and plugin variable overrides
   ========================================================= */

body.page .mc-main,
body.page .mc-main * {
  font-family: "Open Sans", Arial, sans-serif !important;
}

body.page .mc-main {
  --main-background: transparent;
  --main-color: var(--ga-text);
  --primary-dark: var(--ga-dark);
  --primary-light: #ffffff;
  --secondary-dark: var(--ga-pink);
  --secondary-light: #ffffff;
  --highlight-dark: rgba(45, 45, 50, 0.18);
  --highlight-light: rgba(45, 45, 50, 0.08);

  --navbar-background: transparent;
  --nav-button-bg: #ffffff;
  --nav-button-color: var(--ga-dark);
  --nav-button-border: #d9dde3;
  --nav-input-border: #d9dde3;
  --nav-input-background: #ffffff;
  --nav-input-color: var(--ga-dark);

  --grid-cell-border: #e7e9ee;
  --grid-header-border: transparent;
  --grid-header-color: #ffffff;
  --grid-weekend-color: #ffffff;
  --grid-header-bg: #2f3137;
  --grid-weekend-bg: #2f3137;
  --grid-cell-background: #ffffff;

  --current-day-border: var(--ga-green);
  --current-day-color: var(--ga-text);
  --current-day-bg: #f8fff0;

  --date-has-events-bg: transparent;
  --date-has-events-color: var(--ga-pink);

  --calendar-heading: 700 2rem/1.1 "Open Sans", Arial, sans-serif;
  --event-title: 600 0.9rem/1.35 "Open Sans", Arial, sans-serif;
  --grid-date: 1rem;
  --grid-date-heading: 700 1rem/1.2 "Open Sans", Arial, sans-serif;
  --modal-title: 1.6rem;
  --navigation-controls: 600 0.95rem/1.2 "Open Sans", Arial, sans-serif;
  --single-event-title: 600 1.25rem/1.3 "Open Sans", Arial, sans-serif;
  --card-heading: 1.1rem;
  --list-date: 1.15rem;
  --list-event-title: 1.05rem;

  max-width: 1260px !important;
  margin: 2rem auto 3rem !important;
  position: relative;
  z-index: 2;
}

/* =========================================================
   3. Calendar heading
   ========================================================= */

body.page .mc-main .heading.my-calendar-month {
  margin: 0 0 1.5rem !important;
  text-align: center;
  color: var(--ga-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* =========================================================
   4. Calendar navigation
   ========================================================= */

body.page .mc-main .my-calendar-navigation[aria-label="Calendar (top)"] > .my-calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  padding: 0 !important;
}

body.page .mc-main .my-calendar-navigation ul,
body.page .mc-main .my-calendar-navigation li {
  gap: 0.5rem;
}

body.page .mc-main .my-calendar-navigation li::before,
body.page .mc-main .my-calendar-navigation li::after,
body.page .mc-main .mc-format::before,
body.page .mc-main .mc-format::after,
body.page .mc-main .mc-time::before,
body.page .mc-main .mc-time::after {
  display: none !important;
  content: none !important;
}

body.page .mc-main .my-calendar-navigation button,
body.page .mc-main .my-calendar-navigation a,
body.page .mc-main .my-calendar-navigation input[type="submit"],
body.page .mc-main .my-calendar-navigation select {
  min-height: 46px;
  border: 1px solid #d7dbe2 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--ga-dark) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

body.page .mc-main .my-calendar-navigation .mc-active,
body.page .mc-main .my-calendar-navigation button[aria-pressed="true"],
body.page .mc-main .my-calendar-navigation button[aria-current="true"] {
  background: var(--ga-pink) !important;
  color: #ffffff !important;
  border-color: var(--ga-pink) !important;
  outline: none !important;
  filter: none !important;
}

body.page .mc-main .my-calendar-navigation button:hover,
body.page .mc-main .my-calendar-navigation button:focus,
body.page .mc-main .my-calendar-navigation a:hover,
body.page .mc-main .my-calendar-navigation a:focus,
body.page .mc-main .my-calendar-navigation input[type="submit"]:hover,
body.page .mc-main .my-calendar-navigation input[type="submit"]:focus,
body.page .mc-main .my-calendar-navigation select:hover,
body.page .mc-main .my-calendar-navigation select:focus {
  border-color: var(--ga-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(106, 206, 0, 0.12) !important;
}

body.page .mc-main .my-calendar-date-switcher form > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.page .mc-main .my-calendar-navigation select {
  padding-right: 2.5rem !important;
}

body.page .mc-main .my-calendar-navigation .button,
body.page .mc-main .my-calendar-navigation input.button,
body.page .mc-main .my-calendar-navigation input[type="submit"] {
  background: var(--ga-dark) !important;
  color: #fff !important;
  border-color: var(--ga-dark) !important;
}

/* =========================================================
   5. Calendar table and cells
   ========================================================= */

body.page .mc-main .mc-content {
  background: #ffffff;
  border-radius: 26px;
  padding: 0;
  box-shadow: var(--ga-shadow);
  overflow: hidden;
}

body.page .mc-main table.my-calendar-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  table-layout: fixed;
  background: transparent;
}

body.page .mc-main thead {
  border: 0 !important;
}

body.page .mc-main thead th {
  background: #2f3137 !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 1rem 0.75rem !important;
  border: 0 !important;
}

body.page .mc-main thead th:first-child {
  border-top-left-radius: 26px;
}

body.page .mc-main thead th:last-child {
  border-top-right-radius: 26px;
}

body.page .mc-main td {
  height: 150px !important;
  min-height: 150px !important;
  padding: 0 !important;
  border: 1px solid var(--ga-border) !important;
  background: #ffffff !important;
  vertical-align: top;
  position: relative;
}

body.page .mc-main tbody tr {
  height: 150px;
}

body.page .mc-main .mc-date-container {
  padding: 0.6rem 0.75rem 0 0.75rem;
}

body.page .mc-main .mc-date,
body.page .mc-main .has-events .mc-date,
body.page .mc-main .has-events a.mc-date {
  background: transparent !important;
  color: var(--ga-pink) !important;
  font-weight: 700 !important;
  text-align: right;
  padding: 0 !important;
}

body.page .mc-main .mc-day-number,
body.page .mc-main .mc-date > span[aria-hidden="true"] {
  font-size: 1rem;
  font-weight: 700;
}

body.page .mc-main td.nextmonth,
body.page .mc-main td.past-date.nextmonth {
  background: #fafafb !important;
}

body.page .mc-main td.nextmonth .mc-date,
body.page .mc-main td.nextmonth .mc-day-number {
  color: #c4c8cf !important;
}

body.page .mc-main td.has-events {
  background: linear-gradient(180deg, #fff8fc 0%, #ffffff 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(202, 1, 108, 0.18);
}

body.page .mc-main td.has-events::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(202, 1, 108, 0.14);
  border-radius: 18px;
  pointer-events: none;
}

body.page .mc-main td.has-events .event-icon {
  display: inline-block !important;
  color: var(--ga-green);
  margin-left: 0.35rem;
  font-size: 0.9rem;
}

body.page .mc-main td.current-day {
  background: linear-gradient(180deg, #f7fff0 0%, #ffffff 100%) !important;
  outline: 2px solid var(--ga-green) !important;
  outline-offset: -2px !important;
}

/* =========================================================
   6. Event cards inside calendar cells
   ========================================================= */

body.page .mc-main table.my-calendar-table td .calendar-event {
  margin: 0.5rem 0.55rem 0.55rem !important;
  position: relative;
  z-index: 1;
}

body.page .mc-main table.my-calendar-table td .event-title {
  margin: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
}

/* Event button shown inside calendar date cells */
body.page .mc-main table.my-calendar-table td.has-events .event-title button,
body.page .mc-main table.my-calendar-table td .event-title button.calendar.mc-modal {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0.7rem 0.8rem !important;

  border: 0 !important;
  border-radius: 16px !important;

  background: var(--ga-pink-panel) !important;
  color: #ffffff !important;

  box-shadow: 0 6px 16px rgba(202, 1, 108, 0.22) !important;
  cursor: pointer !important;
  text-align: left !important;

  font: 800 0.82rem/1.25 "Open Sans", Arial, sans-serif !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
}

body.page .mc-main table.my-calendar-table td.has-events .event-title button:hover,
body.page .mc-main table.my-calendar-table td.has-events .event-title button:focus,
body.page .mc-main table.my-calendar-table td .event-title button.calendar.mc-modal:hover,
body.page .mc-main table.my-calendar-table td .event-title button.calendar.mc-modal:focus {
  outline: none !important;
  border: 0 !important;
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(202, 1, 108, 0.28),
    0 0 0 3px rgba(106, 206, 0, 0.22) !important;
}

/* Remove the calendar/category icon from event buttons */
body.page .mc-main table.my-calendar-table td .event-title .category-icon,
body.page .mc-main table.my-calendar-table td .event-title svg.category-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page .mc-main table.my-calendar-table td.has-events .event-title button div,
body.page .mc-main table.my-calendar-table td .event-title button.calendar.mc-modal div {
  color: #ffffff !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.page .mc-main table.my-calendar-table td.has-events .event-title button *,
body.page .mc-main table.my-calendar-table td .event-title button.calendar.mc-modal * {
  color: #ffffff !important;
}

/* =========================================================
   7. Hide plugin extras
   ========================================================= */

body.page .mc-main nav[aria-label="Calendar (bottom)"],
body.page .mc-main .mc_bottomnav,
body.page .mc-main .category-key,
body.page .mc-main .mc-print,
body.page .mc-main .mc_edit_links,
.details.single-details .mc_edit_links,
.details.single-details .mc_edit_links * {
  display: none !important;
}

/* =========================================================
   8. Plugin wrapper reset
   ========================================================= */

.my-calendar-modal,
.my-calendar-modal__dialog,
.my-calendar-modal__content,
#mc-modal-content,
#mc-modal,
.mc-modal,
.mc-modal-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.my-calendar-modal__content {
  position: relative;
}

body.page .my-calendar-modal-overlay {
  background: rgba(28, 31, 38, 0.68) !important;
}

/* =========================================================
   9. Single Event Popup panel
   Matches the live HTML:
   .details.has-image.uses-modal.single-details
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details,
body.page .details.has-image.uses-modal.single-details,
.details.has-image.uses-modal.single-details {
  position: fixed !important;
  top: 4vh !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;

  width: min(94vw, 1320px) !important;
  height: min(84vh, 760px) !important;
  min-height: 640px !important;
  max-height: 90vh !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(0,0,0,0.16) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35) !important;

  background: var(--ga-pink-panel) !important;
  overflow: hidden !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
  color: #0b0b0b !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details *,
body.page .details.has-image.uses-modal.single-details *,
.details.has-image.uses-modal.single-details * {
  box-sizing: border-box !important;
}

/* Hide admin edit links inside the popup */
body.page .mc-main .details.has-image.uses-modal.single-details .mc_edit_links,
body.page .mc-main .details.has-image.uses-modal.single-details .mc_edit_links *,
body.page .details.has-image.uses-modal.single-details .mc_edit_links,
body.page .details.has-image.uses-modal.single-details .mc_edit_links *,
.details.has-image.uses-modal.single-details .mc_edit_links,
.details.has-image.uses-modal.single-details .mc_edit_links * {
  display: none !important;
}

/* =========================================================
   10. Popup image on the left
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details .mc-event-image,
body.page .details.has-image.uses-modal.single-details .mc-event-image,
.details.has-image.uses-modal.single-details .mc-event-image {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  width: 55% !important;
  height: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  border-radius: 26px 0 0 26px !important;
  background: transparent !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-event-image img,
body.page .details.has-image.uses-modal.single-details .mc-event-image img,
.details.has-image.uses-modal.single-details .mc-event-image img,
body.page .mc-main .details.has-image.uses-modal.single-details img.mc-image,
body.page .details.has-image.uses-modal.single-details img.mc-image,
.details.has-image.uses-modal.single-details img.mc-image {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 26px 0 0 26px !important;
}

/* =========================================================
   11. Popup title bar over the image
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details .mc-popup-title,
body.page .details.has-image.uses-modal.single-details .mc-popup-title,
.details.has-image.uses-modal.single-details .mc-popup-title {
  position: absolute !important;
  z-index: 10 !important;
  top: 0 !important;
  left: 0 !important;

  width: 55% !important;
  min-height: 45px !important;

  margin: 0 !important;
  padding: 8px 52px !important;

  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;

  background: linear-gradient(
    90deg,
    #e6008d 0%,
    #e6008d 55%,
    rgba(230, 0, 141, 0.85) 75%,
    rgba(230, 0, 141, 0) 100%
  ) !important;

  border-radius: 26px 0 0 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   12. Popup time on the right
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details .event-time,
body.page .details.has-image.uses-modal.single-details .event-time,
.details.has-image.uses-modal.single-details .event-time {
  position: absolute !important;
  z-index: 3 !important;
  top: 0 !important;
  left: 55% !important;
  right: 0 !important;

  display: block !important;
  width: 45% !important;

  margin: 0 !important;
  padding: 32px 90px 0 36px !important;

  color: #0b0b0b !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  background: transparent !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .event-time .event-date,
body.page .details.has-image.uses-modal.single-details .event-time .event-date,
.details.has-image.uses-modal.single-details .event-time .event-date {
  display: block !important;
  margin: 0 0 6px 0 !important;
  color: #0b0b0b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .event-time .event-time-text,
body.page .details.has-image.uses-modal.single-details .event-time .event-time-text,
.details.has-image.uses-modal.single-details .event-time .event-time-text {
  display: block !important;
}

/* =========================================================
   13. Popup text on the right
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details .sub-details,
body.page .details.has-image.uses-modal.single-details .sub-details,
.details.has-image.uses-modal.single-details .sub-details {
  position: absolute !important;
  z-index: 3 !important;
  top: 118px !important;
  left: 55% !important;
  right: 0 !important;
  bottom: 36px !important;

  display: flex !important;
  flex-direction: column !important;

  width: 45% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 36px !important;

  background: transparent !important;
  color: #0b0b0b !important;

  overflow-y: auto !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .sub-details,
body.page .mc-main .details.has-image.uses-modal.single-details .sub-details *,
body.page .details.has-image.uses-modal.single-details .sub-details,
body.page .details.has-image.uses-modal.single-details .sub-details *,
.details.has-image.uses-modal.single-details .sub-details,
.details.has-image.uses-modal.single-details .sub-details * {
  color: #0b0b0b !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-location,
body.page .details.has-image.uses-modal.single-details .mc-location,
.details.has-image.uses-modal.single-details .mc-location {
  margin: 0 0 18px 0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-excerpt,
body.page .details.has-image.uses-modal.single-details .mc-excerpt,
.details.has-image.uses-modal.single-details .mc-excerpt {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-excerpt p,
body.page .details.has-image.uses-modal.single-details .mc-excerpt p,
.details.has-image.uses-modal.single-details .mc-excerpt p {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* =========================================================
   14. Register button
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details .button-group,
body.page .details.has-image.uses-modal.single-details .button-group,
.details.has-image.uses-modal.single-details .button-group {
  margin-top: auto !important;
  padding-top: 18px !important;
  align-self: flex-end !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-register-link,
body.page .details.has-image.uses-modal.single-details .mc-register-link,
.details.has-image.uses-modal.single-details .mc-register-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  background: #000000 !important;
  color: #ffffff !important;

  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 12px !important;

  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-register-link *,
body.page .mc-main .details.has-image.uses-modal.single-details .mc-register-link .dashicons,
body.page .details.has-image.uses-modal.single-details .mc-register-link *,
body.page .details.has-image.uses-modal.single-details .mc-register-link .dashicons,
.details.has-image.uses-modal.single-details .mc-register-link *,
.details.has-image.uses-modal.single-details .mc-register-link .dashicons {
  color: #ffffff !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details .mc-register-link:hover,
body.page .mc-main .details.has-image.uses-modal.single-details .mc-register-link:focus,
body.page .details.has-image.uses-modal.single-details .mc-register-link:hover,
body.page .details.has-image.uses-modal.single-details .mc-register-link:focus,
.details.has-image.uses-modal.single-details .mc-register-link:hover,
.details.has-image.uses-modal.single-details .mc-register-link:focus {
  opacity: 0.92 !important;
  text-decoration: none !important;
}

/* =========================================================
   15. Close button
   ========================================================= */

body.page .mc-main .details.has-image.uses-modal.single-details > button.mc-toggle.close,
body.page .details.has-image.uses-modal.single-details > button.mc-toggle.close,
.details.has-image.uses-modal.single-details > button.mc-toggle.close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 12 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;

  background: var(--ga-green) !important;
  color: #0b0b0b !important;

  border: 0 !important;
  border-radius: 999px !important;

  box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
  cursor: pointer !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details > button.mc-toggle.close *,
body.page .details.has-image.uses-modal.single-details > button.mc-toggle.close *,
.details.has-image.uses-modal.single-details > button.mc-toggle.close * {
  color: #0b0b0b !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details > button.mc-toggle.close:hover,
body.page .details.has-image.uses-modal.single-details > button.mc-toggle.close:hover,
.details.has-image.uses-modal.single-details > button.mc-toggle.close:hover {
  filter: brightness(0.95) !important;
}

/* =========================================================
   16. Prevent popup from being clipped by calendar cells
   ========================================================= */

body.page .mc-main table.my-calendar-table td,
body.page .mc-main table.my-calendar-table article.calendar-event {
  overflow: visible !important;
}


/* =========================================================
   16A. Hide original My Calendar title bar behind custom popup
   ========================================================= */

.mc-modal-title-container,
.my-calendar-modal-title,
body.page .my-calendar-modal .mc-modal-title-container,
body.page .my-calendar-modal .my-calendar-modal-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.my-calendar-modal-close,
body.page .my-calendar-modal button.my-calendar-modal-close {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.page .mc-main .details.has-image.uses-modal.single-details > button.mc-toggle.close,
body.page .details.has-image.uses-modal.single-details > button.mc-toggle.close,
.details.has-image.uses-modal.single-details > button.mc-toggle.close {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   17. Responsive calendar
   ========================================================= */

@media (max-width: 782px) {
  body.page .mc-main .my-calendar-navigation[aria-label="Calendar (top)"] > .my-calendar-header {
    justify-content: flex-start;
  }

  body.page .mc-main td,
  body.page .mc-main tbody tr {
    height: 120px !important;
    min-height: 120px !important;
  }

  body.page .mc-main td .event-title button {
    padding: 0.5rem 0.6rem !important;
    border-radius: 12px;
  }
}

/* =========================================================
   18. Responsive popup
   ========================================================= */

@media (max-width: 860px) {
  body.page .mc-main .details.has-image.uses-modal.single-details,
  body.page .details.has-image.uses-modal.single-details,
  .details.has-image.uses-modal.single-details {
    top: 4vh !important;

    width: min(94vw, 720px) !important;
    height: 88vh !important;
    min-height: 0 !important;
    max-height: 88vh !important;

    overflow-y: auto !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details .mc-popup-title,
  body.page .details.has-image.uses-modal.single-details .mc-popup-title,
  .details.has-image.uses-modal.single-details .mc-popup-title {
    width: 100% !important;
    padding: 8px 22px !important;
    font-size: 24px !important;
    border-radius: 26px 26px 0 0 !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details .mc-event-image,
  body.page .details.has-image.uses-modal.single-details .mc-event-image,
  .details.has-image.uses-modal.single-details .mc-event-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;

    border-radius: 26px 26px 0 0 !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details .mc-event-image img,
  body.page .details.has-image.uses-modal.single-details .mc-event-image img,
  .details.has-image.uses-modal.single-details .mc-event-image img,
  body.page .mc-main .details.has-image.uses-modal.single-details img.mc-image,
  body.page .details.has-image.uses-modal.single-details img.mc-image,
  .details.has-image.uses-modal.single-details img.mc-image {
    border-radius: 26px 26px 0 0 !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details .event-time,
  body.page .details.has-image.uses-modal.single-details .event-time,
  .details.has-image.uses-modal.single-details .event-time {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    padding: 22px 72px 0 22px !important;
    font-size: 18px !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details .sub-details,
  body.page .details.has-image.uses-modal.single-details .sub-details,
  .details.has-image.uses-modal.single-details .sub-details {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    padding: 18px 22px 22px 22px !important;
    overflow: visible !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details .button-group,
  body.page .details.has-image.uses-modal.single-details .button-group,
  .details.has-image.uses-modal.single-details .button-group {
    align-self: flex-start !important;
  }

  body.page .mc-main .details.has-image.uses-modal.single-details > button.mc-toggle.close,
  body.page .details.has-image.uses-modal.single-details > button.mc-toggle.close,
  .details.has-image.uses-modal.single-details > button.mc-toggle.close {
    top: 12px !important;
    right: 12px !important;
  }
}

/* =========================================================
   FORCE MAIN CALENDAR EVENT BUTTONS - FINAL OVERRIDE
   ========================================================= */

/* Event wrapper in calendar cell */
body.page .mc-main table.my-calendar-table td.has-events article.calendar-event,
body.page .mc-main table.my-calendar-table td.mc-events article.calendar-event {
	margin: 0.45rem 0.5rem !important;
	padding: 0 !important;
	position: relative !important;
	z-index: 5 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Remove default heading spacing */
body.page .mc-main table.my-calendar-table td.has-events article.calendar-event header,
body.page .mc-main table.my-calendar-table td.mc-events article.calendar-event header,
body.page .mc-main table.my-calendar-table td.has-events article.calendar-event h3.event-title,
body.page .mc-main table.my-calendar-table td.mc-events article.calendar-event h3.event-title {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The actual event button */
body.page .mc-main table.my-calendar-table td.has-events article.calendar-event h3.event-title > button.calendar,
body.page .mc-main table.my-calendar-table td.mc-events article.calendar-event h3.event-title > button.calendar,
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar.mc-modal.button.button-link.url.summary.has-image {
	display: block !important;

	width: 100% !important;
	min-height: auto !important;

	margin: 0 !important;
	padding: 9px 10px !important;

	background:
		radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #b70074 0%, #cf007f 55%, #b70074 100%) !important;

	color: #ffffff !important;

	border: 0 !important;
	border-radius: 14px !important;

	box-shadow: 0 4px 12px rgba(183, 0, 116, 0.22) !important;

	text-align: left !important;
	text-decoration: none !important;

	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Hide the calendar/category icon */
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar svg.category-icon,
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar .category-icon {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Event text inside the button */
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar div,
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar span,
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar * {
	color: #ffffff !important;
	fill: #ffffff !important;
	font-weight: 900 !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
	text-decoration: none !important;
	text-transform: none !important;
}

/* Make sure the visible title block is readable */
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar div {
	display: block !important;
	width: 100% !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
}

/* Hover and focus */
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar:hover,
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar:focus,
body.page .mc-main table.my-calendar-table article.calendar-event h3.event-title > button.calendar:focus-visible {
	background:
		radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #cf007f 0%, #e6008d 60%, #cf007f 100%) !important;

	outline: 3px solid rgba(106, 206, 0, 0.45) !important;
	outline-offset: 2px !important;

	box-shadow: 0 6px 16px rgba(183, 0, 116, 0.3) !important;
	transform: translateY(-1px) !important;
}

/* Stop the cell decoration sitting over the button */
body.page .mc-main table.my-calendar-table td.has-events::after,
body.page .mc-main table.my-calendar-table td.mc-events::after {
	z-index: 0 !important;
}

/* =========================================================
   GAMES AID - FORCE MONTH GRID EVENT BUTTONS
   Uses exact HTML from calendar table
   ========================================================= */

/* The event article inside a day cell */
.my-calendar-table td.mc-events article.calendar-event,
.my-calendar-table td.has-events article.calendar-event {
	margin: 0.45rem 0.5rem !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	position: relative !important;
	z-index: 5 !important;
}

/* Remove heading spacing around event title */
.my-calendar-table td.mc-events article.calendar-event header,
.my-calendar-table td.has-events article.calendar-event header,
.my-calendar-table td.mc-events article.calendar-event .event-title,
.my-calendar-table td.has-events article.calendar-event .event-title,
.my-calendar-table td.mc-events article.calendar-event h3,
.my-calendar-table td.has-events article.calendar-event h3 {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The actual clickable event button */
.my-calendar-table td.mc-events article.calendar-event .event-title button.calendar,
.my-calendar-table td.has-events article.calendar-event .event-title button.calendar,
.my-calendar-table article.calendar-event button.calendar.mc-modal {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 10px 12px !important;

	background:
		radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #b70074 0%, #cf007f 55%, #b70074 100%) !important;

	color: #ffffff !important;

	border: 0 !important;
	border-radius: 14px !important;

	box-shadow: 0 4px 12px rgba(183, 0, 116, 0.25) !important;

	text-align: left !important;
	text-decoration: none !important;

	cursor: pointer !important;

	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Remove the black calendar/category SVG icon */
.my-calendar-table article.calendar-event button.calendar svg,
.my-calendar-table article.calendar-event button.calendar .category-icon {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
}

/* Event text inside the button */
.my-calendar-table article.calendar-event button.calendar div {
	display: block !important;
	width: 100% !important;

	color: #ffffff !important;

	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;

	text-align: left !important;
	text-decoration: none !important;

	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
}

/* Force all inner text/icons to white */
.my-calendar-table article.calendar-event button.calendar,
.my-calendar-table article.calendar-event button.calendar *,
.my-calendar-table article.calendar-event button.calendar div,
.my-calendar-table article.calendar-event button.calendar span {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Hover/focus */
.my-calendar-table article.calendar-event button.calendar:hover,
.my-calendar-table article.calendar-event button.calendar:focus,
.my-calendar-table article.calendar-event button.calendar:focus-visible {
	background:
		radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #cf007f 0%, #e6008d 60%, #cf007f 100%) !important;

	outline: 3px solid rgba(106, 206, 0, 0.45) !important;
	outline-offset: 2px !important;

	box-shadow: 0 6px 16px rgba(183, 0, 116, 0.32) !important;
}

/* Remove the extra event dot from date if the button is now obvious */
.my-calendar-table td.mc-events .mc-date .event-icon,
.my-calendar-table td.has-events .mc-date .event-icon {
	display: none !important;
}

/* =========================================================
   GAMES AID - IMPROVE CALENDAR EVENT BUTTON READABILITY
   ========================================================= */

.my-calendar-table article.calendar-event button.calendar.mc-modal {
	padding: 12px 14px !important;
	min-height: 58px !important;

	background:
		radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #8f005a 0%, #c00078 55%, #8f005a 100%) !important;

	border-radius: 15px !important;
	box-shadow: 0 5px 14px rgba(143, 0, 90, 0.28) !important;
}

/* Main event text */
.my-calendar-table article.calendar-event button.calendar.mc-modal div {
	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.01em !important;

	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;

	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
}

/* Make sure all inner text remains readable */
.my-calendar-table article.calendar-event button.calendar.mc-modal,
.my-calendar-table article.calendar-event button.calendar.mc-modal * {
	color: #ffffff !important;
}

/* Hover/focus version */
.my-calendar-table article.calendar-event button.calendar.mc-modal:hover,
.my-calendar-table article.calendar-event button.calendar.mc-modal:focus,
.my-calendar-table article.calendar-event button.calendar.mc-modal:focus-visible {
	background:
		radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #a00064 0%, #e6008d 60%, #a00064 100%) !important;

	box-shadow: 0 7px 18px rgba(143, 0, 90, 0.36) !important;
}

/* =========================================================
   HIDE BOTTOM CALENDAR CATEGORY / PRINT CONTROLS
   ========================================================= */

.mc-main nav.my-calendar-navigation[aria-label="Calendar (bottom)"],
.mc-main .mc_bottomnav,
.mc-main .my-calendar-footer,
.mc-main .category-key,
.mc-main .category-key.has-icons,
.mc-main .mc-print {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* =========================================================
   GAMES AID - MODERN TOP CALENDAR CONTROLS
   ========================================================= */

/* Main top nav wrapper */
.my-calendar-navigation[aria-label="Calendar (top)"] {
	margin: 0 0 22px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* Layout */
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-header {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Remove old 1990s separator marks */
.my-calendar-navigation[aria-label="Calendar (top)"] ul,
.my-calendar-navigation[aria-label="Calendar (top)"] li {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.my-calendar-navigation[aria-label="Calendar (top)"] li::before,
.my-calendar-navigation[aria-label="Calendar (top)"] li::after,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-format::before,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-format::after,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-time::before,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-time::after,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav::before,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav::after,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher::before,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher::after {
	display: none !important;
	content: none !important;
}

/* Group wrappers */
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-format,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-time,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Add subtle grouped card feel */
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-format,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-time,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav {
	background: rgba(255,255,255,0.84) !important;
	border: 1px solid rgba(202, 1, 108, 0.12) !important;
	border-radius: 999px !important;
	padding: 6px !important;
	box-shadow: 0 8px 24px rgba(45, 45, 50, 0.08) !important;
}

/* Buttons and nav links */
.my-calendar-navigation[aria-label="Calendar (top)"] button,
.my-calendar-navigation[aria-label="Calendar (top)"] a,
.my-calendar-navigation[aria-label="Calendar (top)"] input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;

	min-height: 42px !important;
	padding: 10px 16px !important;

	border: 0 !important;
	border-radius: 999px !important;

	background: transparent !important;
	color: #2d2d32 !important;

	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-decoration: none !important;

	box-shadow: none !important;
	cursor: pointer !important;

	transition:
		background 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease !important;
}

/* Icons inside buttons */
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-icon,
.my-calendar-navigation[aria-label="Calendar (top)"] svg,
.my-calendar-navigation[aria-label="Calendar (top)"] .dashicons {
	width: 18px !important;
	height: 18px !important;
	font-size: 18px !important;
	line-height: 1 !important;
	color: currentColor !important;
	fill: currentColor !important;
}

/* Remove / soften the "View as" helper text */
.my-calendar-navigation[aria-label="Calendar (top)"] .maybe-hide {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Active state: pink */
.my-calendar-navigation[aria-label="Calendar (top)"] button.active,
.my-calendar-navigation[aria-label="Calendar (top)"] button[aria-pressed="true"],
.my-calendar-navigation[aria-label="Calendar (top)"] button[aria-current="true"],
.my-calendar-navigation[aria-label="Calendar (top)"] a[aria-current="page"],
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-active {
	background:
		radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 5px 5px,
		linear-gradient(90deg, #b70074 0%, #cf007f 55%, #b70074 100%) !important;

	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(183, 0, 116, 0.28) !important;
}

/* Hover */
.my-calendar-navigation[aria-label="Calendar (top)"] button:hover,
.my-calendar-navigation[aria-label="Calendar (top)"] a:hover,
.my-calendar-navigation[aria-label="Calendar (top)"] input[type="submit"]:hover {
	background: rgba(202, 1, 108, 0.08) !important;
	color: #ca016c !important;
	transform: translateY(-1px) !important;
}

/* Active hover should stay pink */
.my-calendar-navigation[aria-label="Calendar (top)"] button.active:hover,
.my-calendar-navigation[aria-label="Calendar (top)"] button[aria-pressed="true"]:hover,
.my-calendar-navigation[aria-label="Calendar (top)"] button[aria-current="true"]:hover,
.my-calendar-navigation[aria-label="Calendar (top)"] .mc-active:hover {
	color: #ffffff !important;
}

/* Focus state: GamesAid green */
.my-calendar-navigation[aria-label="Calendar (top)"] button:focus,
.my-calendar-navigation[aria-label="Calendar (top)"] button:focus-visible,
.my-calendar-navigation[aria-label="Calendar (top)"] a:focus,
.my-calendar-navigation[aria-label="Calendar (top)"] a:focus-visible,
.my-calendar-navigation[aria-label="Calendar (top)"] input[type="submit"]:focus,
.my-calendar-navigation[aria-label="Calendar (top)"] input[type="submit"]:focus-visible,
.my-calendar-navigation[aria-label="Calendar (top)"] select:focus,
.my-calendar-navigation[aria-label="Calendar (top)"] select:focus-visible {
	outline: 3px solid rgba(106, 206, 0, 0.45) !important;
	outline-offset: 2px !important;
}

/* Date switcher form */
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher form,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher form > div {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Month/year selects */
.my-calendar-navigation[aria-label="Calendar (top)"] select {
	min-height: 42px !important;
	padding: 8px 36px 8px 14px !important;

	border: 0 !important;
	border-radius: 999px !important;

	background: #f7f8fa !important;
	color: #2d2d32 !important;

	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;

	box-shadow: inset 0 0 0 1px rgba(45, 45, 50, 0.08) !important;
	cursor: pointer !important;
}

/* Go button */
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher input[type="submit"],
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher button {
	background: #6ace00 !important;
	color: #0b0b0b !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	box-shadow: 0 6px 14px rgba(106, 206, 0, 0.25) !important;
}

/* Previous / Today / Next section */
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav a,
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav button {
	font-size: 18px !important;
	font-weight: 900 !important;
}

/* Make Today stand out slightly */
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav a[href*="dy"],
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav button[id*="today"],
.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav .today {
	background: rgba(106, 206, 0, 0.14) !important;
	color: #2d2d32 !important;
}

/* Remove old printed dash separators near nav */
.my-calendar-navigation[aria-label="Calendar (top)"] + .mc-content {
	margin-top: 10px !important;
}

/* Mobile wrap */
@media (max-width: 782px) {
	.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.my-calendar-navigation[aria-label="Calendar (top)"] .mc-format,
	.my-calendar-navigation[aria-label="Calendar (top)"] .mc-time,
	.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher,
	.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-nav {
		width: 100% !important;
		justify-content: center !important;
		border-radius: 22px !important;
	}

	.my-calendar-navigation[aria-label="Calendar (top)"] button,
	.my-calendar-navigation[aria-label="Calendar (top)"] a,
	.my-calendar-navigation[aria-label="Calendar (top)"] input[type="submit"] {
		font-size: 15px !important;
		padding: 10px 12px !important;
	}

	.my-calendar-navigation[aria-label="Calendar (top)"] .my-calendar-date-switcher form > div {
		flex-wrap: wrap !important;
		justify-content: center !important;
	}
}

/* =========================================================
   GAMES AID - COOL 2026 CALENDAR GRID FINAL OVERRIDE
   Put after all earlier calendar rules so this wins.
   ========================================================= */

/* Overall calendar card */
body.page .mc-main .mc-content,
.mc-main .mc-content {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,248,250,0.98) 100%) !important;
  border: 1px solid rgba(45,45,50,0.10) !important;
  box-shadow:
    0 24px 60px rgba(45,45,50,0.12),
    0 0 0 1px rgba(255,255,255,0.72) inset !important;
}

/* Thin GamesAid accent line at top of the calendar card */
body.page .mc-main .mc-content::before,
.mc-main .mc-content::before {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background:
    linear-gradient(90deg, #6ace00 0%, #6ace00 18%, #ca016c 18%, #e6008d 82%, #6ace00 82%, #6ace00 100%) !important;
  pointer-events: none !important;
}

/* Table reset inside the card */
body.page .mc-main table.my-calendar-table,
.mc-main table.my-calendar-table,
table.my-calendar-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  background: transparent !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Header row */
body.page .mc-main table.my-calendar-table thead,
.mc-main table.my-calendar-table thead,
table.my-calendar-table thead {
  border: 0 !important;
}

body.page .mc-main table.my-calendar-table thead th,
.mc-main table.my-calendar-table thead th,
table.my-calendar-table thead th {
  position: relative !important;
  padding: 18px 18px 16px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  background:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(180deg, #36383e 0%, #25272c 100%) !important;
  color: #ffffff !important;
  font-size: clamp(18px, 1.6vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

body.page .mc-main table.my-calendar-table thead th::after,
.mc-main table.my-calendar-table thead th::after,
table.my-calendar-table thead th::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 4px !important;
  background: #6ace00 !important;
}

body.page .mc-main table.my-calendar-table thead th:first-child,
.mc-main table.my-calendar-table thead th:first-child,
table.my-calendar-table thead th:first-child {
  border-top-left-radius: 28px !important;
}

body.page .mc-main table.my-calendar-table thead th:last-child,
.mc-main table.my-calendar-table thead th:last-child,
table.my-calendar-table thead th:last-child {
  border-right: 0 !important;
  border-top-right-radius: 28px !important;
}

/* Calendar cells */
body.page .mc-main table.my-calendar-table tbody tr,
.mc-main table.my-calendar-table tbody tr,
table.my-calendar-table tbody tr {
  height: auto !important;
}

body.page .mc-main table.my-calendar-table tbody td,
.mc-main table.my-calendar-table tbody td,
table.my-calendar-table tbody td {
  position: relative !important;
  height: 158px !important;
  min-height: 158px !important;
  padding: 0 !important;
  vertical-align: top !important;
  border: 0 !important;
  border-right: 1px solid rgba(45,45,50,0.055) !important;
  border-bottom: 1px solid rgba(45,45,50,0.055) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: none !important;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

body.page .mc-main table.my-calendar-table tbody td:last-child,
.mc-main table.my-calendar-table tbody td:last-child,
table.my-calendar-table tbody td:last-child {
  border-right: 0 !important;
}

/* Soft hover, without moving the table */
body.page .mc-main table.my-calendar-table tbody td:hover,
.mc-main table.my-calendar-table tbody td:hover,
table.my-calendar-table tbody td:hover {
  background:
    linear-gradient(180deg, #fff9fd 0%, #ffffff 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(202,1,108,0.08) !important;
}

/* No-event days stay clean */
body.page .mc-main table.my-calendar-table tbody td.no-events,
.mc-main table.my-calendar-table tbody td.no-events,
table.my-calendar-table tbody td.no-events {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
}

/* Days with events get a subtle pink wash */
body.page .mc-main table.my-calendar-table tbody td.mc-events,
body.page .mc-main table.my-calendar-table tbody td.has-events,
.mc-main table.my-calendar-table tbody td.mc-events,
.mc-main table.my-calendar-table tbody td.has-events,
table.my-calendar-table tbody td.mc-events,
table.my-calendar-table tbody td.has-events {
  background:
    radial-gradient(rgba(202,1,108,0.055) 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(180deg, #fff6fb 0%, #ffffff 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(202,1,108,0.10) !important;
}

/* Remove old cell outline decoration now the grid is styled */
body.page .mc-main table.my-calendar-table tbody td.has-events::after,
body.page .mc-main table.my-calendar-table tbody td.mc-events::after,
.mc-main table.my-calendar-table tbody td.has-events::after,
.mc-main table.my-calendar-table tbody td.mc-events::after,
table.my-calendar-table tbody td.has-events::after,
table.my-calendar-table tbody td.mc-events::after {
  display: none !important;
  content: none !important;
}

/* Other-month days */
body.page .mc-main table.my-calendar-table tbody td.nextmonth,
.mc-main table.my-calendar-table tbody td.nextmonth,
table.my-calendar-table tbody td.nextmonth {
  background:
    linear-gradient(180deg, #f4f5f7 0%, #eef0f3 100%) !important;
  opacity: 0.82 !important;
}

/* Current day */
body.page .mc-main table.my-calendar-table tbody td.current-day,
.mc-main table.my-calendar-table tbody td.current-day,
table.my-calendar-table tbody td.current-day,
body.page .mc-main table.my-calendar-table tbody td[aria-current="date"],
.mc-main table.my-calendar-table tbody td[aria-current="date"],
table.my-calendar-table tbody td[aria-current="date"] {
  background:
    radial-gradient(rgba(106,206,0,0.12) 1px, transparent 1px) 0 0 / 7px 7px,
    linear-gradient(180deg, #f8fff0 0%, #ffffff 100%) !important;
  box-shadow:
    inset 0 0 0 2px #6ace00,
    inset 0 0 0 6px rgba(106,206,0,0.10) !important;
  outline: 0 !important;
}

/* Date container */
body.page .mc-main table.my-calendar-table .mc-date-container,
.mc-main table.my-calendar-table .mc-date-container,
table.my-calendar-table .mc-date-container {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 10px 10px 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Date numbers */
body.page .mc-main table.my-calendar-table .mc-date,
body.page .mc-main table.my-calendar-table .mc-date span[aria-hidden="true"],
body.page .mc-main table.my-calendar-table .mc-day-number,
.mc-main table.my-calendar-table .mc-date,
.mc-main table.my-calendar-table .mc-date span[aria-hidden="true"],
.mc-main table.my-calendar-table .mc-day-number,
table.my-calendar-table .mc-date,
table.my-calendar-table .mc-date span[aria-hidden="true"],
table.my-calendar-table .mc-day-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ca016c !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Date pill for event days */
body.page .mc-main table.my-calendar-table td.has-events .mc-day-number,
body.page .mc-main table.my-calendar-table td.mc-events .mc-day-number,
.mc-main table.my-calendar-table td.has-events .mc-day-number,
.mc-main table.my-calendar-table td.mc-events .mc-day-number,
table.my-calendar-table td.has-events .mc-day-number,
table.my-calendar-table td.mc-events .mc-day-number {
  background: #ca016c !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(202,1,108,0.28) !important;
}

/* Current day date pill */
body.page .mc-main table.my-calendar-table td.current-day .mc-date span[aria-hidden="true"],
body.page .mc-main table.my-calendar-table td.current-day .mc-day-number,
body.page .mc-main table.my-calendar-table td[aria-current="date"] .mc-date span[aria-hidden="true"],
body.page .mc-main table.my-calendar-table td[aria-current="date"] .mc-day-number,
.mc-main table.my-calendar-table td.current-day .mc-date span[aria-hidden="true"],
.mc-main table.my-calendar-table td.current-day .mc-day-number,
.mc-main table.my-calendar-table td[aria-current="date"] .mc-date span[aria-hidden="true"],
.mc-main table.my-calendar-table td[aria-current="date"] .mc-day-number,
table.my-calendar-table td.current-day .mc-date span[aria-hidden="true"],
table.my-calendar-table td.current-day .mc-day-number,
table.my-calendar-table td[aria-current="date"] .mc-date span[aria-hidden="true"],
table.my-calendar-table td[aria-current="date"] .mc-day-number {
  background: #6ace00 !important;
  color: #0b0b0b !important;
  box-shadow: 0 5px 14px rgba(106,206,0,0.28) !important;
}

/* Next-month date numbers */
body.page .mc-main table.my-calendar-table td.nextmonth .mc-date,
body.page .mc-main table.my-calendar-table td.nextmonth .mc-date span[aria-hidden="true"],
body.page .mc-main table.my-calendar-table td.nextmonth .mc-day-number,
.mc-main table.my-calendar-table td.nextmonth .mc-date,
.mc-main table.my-calendar-table td.nextmonth .mc-date span[aria-hidden="true"],
.mc-main table.my-calendar-table td.nextmonth .mc-day-number,
table.my-calendar-table td.nextmonth .mc-date,
table.my-calendar-table td.nextmonth .mc-date span[aria-hidden="true"],
table.my-calendar-table td.nextmonth .mc-day-number {
  color: #a7adb7 !important;
}

/* Hide small event dot, the event card is enough */
body.page .mc-main table.my-calendar-table .event-icon,
.mc-main table.my-calendar-table .event-icon,
table.my-calendar-table .event-icon {
  display: none !important;
  visibility: hidden !important;
}

/* Event cards sit neatly below the date */
body.page .mc-main table.my-calendar-table td article.calendar-event,
.mc-main table.my-calendar-table td article.calendar-event,
table.my-calendar-table td article.calendar-event {
  margin: 8px 10px 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Keep the rounded event buttons from earlier but give them room */
body.page .mc-main table.my-calendar-table article.calendar-event button.calendar.mc-modal,
.mc-main table.my-calendar-table article.calendar-event button.calendar.mc-modal,
table.my-calendar-table article.calendar-event button.calendar.mc-modal {
  width: 100% !important;
  min-height: 62px !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(90deg, #8f005a 0%, #c00078 55%, #8f005a 100%) !important;
  box-shadow:
    0 12px 22px rgba(143,0,90,0.22),
    0 1px 0 rgba(255,255,255,0.24) inset !important;
}

body.page .mc-main table.my-calendar-table article.calendar-event button.calendar.mc-modal div,
.mc-main table.my-calendar-table article.calendar-event button.calendar.mc-modal div,
table.my-calendar-table article.calendar-event button.calendar.mc-modal div {
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.38) !important;
}

/* Bottom corners of the final row */
body.page .mc-main table.my-calendar-table tbody tr:last-child td:first-child,
.mc-main table.my-calendar-table tbody tr:last-child td:first-child,
table.my-calendar-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 28px !important;
}

body.page .mc-main table.my-calendar-table tbody tr:last-child td:last-child,
.mc-main table.my-calendar-table tbody tr:last-child td:last-child,
table.my-calendar-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 28px !important;
}

/* Mobile table handling */
@media (max-width: 782px) {
  body.page .mc-main .mc-content,
  .mc-main .mc-content {
    border-radius: 20px !important;
    overflow-x: auto !important;
  }

  body.page .mc-main table.my-calendar-table,
  .mc-main table.my-calendar-table,
  table.my-calendar-table {
    min-width: 760px !important;
  }

  body.page .mc-main table.my-calendar-table thead th,
  .mc-main table.my-calendar-table thead th,
  table.my-calendar-table thead th {
    padding: 14px 12px !important;
    font-size: 18px !important;
  }

  body.page .mc-main table.my-calendar-table tbody td,
  .mc-main table.my-calendar-table tbody td,
  table.my-calendar-table tbody td {
    height: 135px !important;
    min-height: 135px !important;
  }

  body.page .mc-main table.my-calendar-table article.calendar-event button.calendar.mc-modal div,
  .mc-main table.my-calendar-table article.calendar-event button.calendar.mc-modal div,
  table.my-calendar-table article.calendar-event button.calendar.mc-modal div {
    font-size: 12px !important;
  }
}

/* =========================================================
   GAMES AID - EVENT BUTTON TEXT FINAL TWEAK
   Bigger, less bold, easier to read
   ========================================================= */

.my-calendar-table article.calendar-event button.calendar.mc-modal {
	padding: 13px 14px !important;
	min-height: 64px !important;
}

/* Event button text */
.my-calendar-table article.calendar-event button.calendar.mc-modal div {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;

	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.28) !important;

	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
}

/* Stop older rules making it super bold again */
.my-calendar-table article.calendar-event button.calendar.mc-modal *,
.my-calendar-table article.calendar-event button.calendar div,
.my-calendar-table article.calendar-event button.calendar span {
	font-weight: 600 !important;
}

/* =========================================================
   GAMES AID - FIX WORKING MODAL CLOSE BUTTON
   Use the real My Calendar close button and style it green
   ========================================================= */

/* Hide the inner close button inside our custom popup */
.details.has-image.uses-modal.single-details > button.mc-toggle.close {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Bring back the real My Calendar modal close button */
.my-calendar-modal-close,
body.page .my-calendar-modal button.my-calendar-modal-close {
	display: inline-flex !important;
	visibility: visible !important;
	pointer-events: auto !important;

	position: fixed !important;
	z-index: 1000005 !important;

	top: calc(4vh + 16px) !important;
	right: calc(3vw + 18px) !important;

	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;

	min-width: 44px !important;
	min-height: 44px !important;
	padding: 10px 14px !important;

	background: #6ace00 !important;
	color: #0b0b0b !important;

	border: 0 !important;
	border-radius: 999px !important;

	box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
	cursor: pointer !important;

	font-size: 13px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
}

/* Make the icon/text black */
.my-calendar-modal-close *,
body.page .my-calendar-modal button.my-calendar-modal-close *,
.my-calendar-modal-close .dashicons,
body.page .my-calendar-modal button.my-calendar-modal-close .dashicons {
	color: #0b0b0b !important;
	fill: #0b0b0b !important;
}

/* Hover */
.my-calendar-modal-close:hover,
body.page .my-calendar-modal button.my-calendar-modal-close:hover {
	filter: brightness(0.95) !important;
}

/* Focus */
.my-calendar-modal-close:focus,
.my-calendar-modal-close:focus-visible,
body.page .my-calendar-modal button.my-calendar-modal-close:focus,
body.page .my-calendar-modal button.my-calendar-modal-close:focus-visible {
	outline: 3px solid rgba(106, 206, 0, 0.45) !important;
	outline-offset: 3px !important;
}

/* =========================================================
   MOBILE FIX - SHOW EVENT BUTTONS IN MONTH GRID
   ========================================================= */

@media (max-width: 782px) {

	/* Give event cells enough room */
	.my-calendar-table td,
	.my-calendar-table tbody tr {
		height: 210px !important;
		min-height: 210px !important;
		vertical-align: top !important;
		overflow: visible !important;
	}

	/* Keep the date badge at the top */
	.my-calendar-table td .mc-date-container {
		position: relative !important;
		z-index: 4 !important;
		padding: 10px 8px 0 8px !important;
	}

	/* Event wrapper */
	.my-calendar-table td.mc-events article.calendar-event,
	.my-calendar-table td.has-events article.calendar-event {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;

		position: relative !important;
		z-index: 6 !important;

		margin: 12px 6px 6px 6px !important;
		padding: 0 !important;

		width: auto !important;
		max-width: none !important;
		height: auto !important;

		overflow: visible !important;
	}

	/* Heading wrapper */
	.my-calendar-table td.mc-events article.calendar-event header,
	.my-calendar-table td.has-events article.calendar-event header,
	.my-calendar-table td.mc-events article.calendar-event h3.event-title,
	.my-calendar-table td.has-events article.calendar-event h3.event-title {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;

		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;

		overflow: visible !important;
	}

	/* Actual event button */
	.my-calendar-table article.calendar-event button.calendar.mc-modal,
	.my-calendar-table article.calendar-event .event-title button.calendar {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;

		height: auto !important;
		min-height: 54px !important;

		margin: 0 !important;
		padding: 10px 8px !important;

		background:
			radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 5px 5px,
			linear-gradient(90deg, #8f005a 0%, #c00078 55%, #8f005a 100%) !important;

		border: 0 !important;
		border-radius: 12px !important;

		box-shadow: 0 5px 14px rgba(143, 0, 90, 0.28) !important;

		overflow: visible !important;
		text-align: left !important;
	}

	/* Hide icon on mobile */
	.my-calendar-table article.calendar-event button.calendar.mc-modal svg,
	.my-calendar-table article.calendar-event button.calendar.mc-modal .category-icon {
		display: none !important;
	}

	/* Make text readable on narrow cells */
	.my-calendar-table article.calendar-event button.calendar.mc-modal div,
	.my-calendar-table article.calendar-event .event-title button.calendar div {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;

		width: 100% !important;

		color: #ffffff !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;

		text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;

		white-space: normal !important;
		overflow: visible !important;
		text-overflow: unset !important;
	}

	/* Force inner text white */
	.my-calendar-table article.calendar-event button.calendar.mc-modal,
	.my-calendar-table article.calendar-event button.calendar.mc-modal * {
		color: #ffffff !important;
	}
}

/* =========================================================
   MOBILE FIX - SHOW EVENT TITLES INSIDE EVENT DAYS
   ========================================================= */

@media (max-width: 782px) {

	/* Make event days big enough */
	.my-calendar-table td.mc-events,
	.my-calendar-table td.has-events {
		position: relative !important;
		height: 210px !important;
		min-height: 210px !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	/* Keep the date badge above the event */
	.my-calendar-table td.mc-events .mc-date-container,
	.my-calendar-table td.has-events .mc-date-container {
		position: relative !important;
		z-index: 5 !important;
		padding-top: 14px !important;
	}

	/* Force the event wrapper to appear */
	.my-calendar-table td.mc-events article.calendar-event,
	.my-calendar-table td.has-events article.calendar-event {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;

		position: absolute !important;
		z-index: 20 !important;

		left: 8px !important;
		right: 8px !important;
		top: 76px !important;

		width: auto !important;
		height: auto !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: visible !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.my-calendar-table td.mc-events article.calendar-event header,
	.my-calendar-table td.has-events article.calendar-event header,
	.my-calendar-table td.mc-events article.calendar-event h3.event-title,
	.my-calendar-table td.has-events article.calendar-event h3.event-title {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;

		margin: 0 !important;
		padding: 0 !important;

		width: 100% !important;
		height: auto !important;

		overflow: visible !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* Force the clickable button to show */
	.my-calendar-table td.mc-events article.calendar-event button.calendar,
	.my-calendar-table td.has-events article.calendar-event button.calendar,
	.my-calendar-table article.calendar-event button.calendar.mc-modal {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;

		align-items: center !important;
		justify-content: center !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;

		height: auto !important;
		min-height: 54px !important;

		margin: 0 !important;
		padding: 9px 8px !important;

		background:
			radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 5px 5px,
			linear-gradient(90deg, #8f005a 0%, #c00078 55%, #8f005a 100%) !important;

		border: 0 !important;
		border-radius: 12px !important;

		box-shadow: 0 5px 14px rgba(143, 0, 90, 0.28) !important;

		color: #ffffff !important;
		text-align: center !important;
		text-decoration: none !important;

		overflow: visible !important;
		pointer-events: auto !important;
		cursor: pointer !important;
	}

	/* Hide plugin icon and hidden inner text */
	.my-calendar-table article.calendar-event button.calendar svg,
	.my-calendar-table article.calendar-event button.calendar .category-icon,
	.my-calendar-table article.calendar-event button.calendar > div {
		display: none !important;
	}

	/* Rebuild readable mobile title from the button attribute */
	.my-calendar-table article.calendar-event button.calendar::after {
		content: attr(data-modal-title) !important;

		display: block !important;
		width: 100% !important;

		color: #ffffff !important;

		font-size: 11px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;

		text-align: center !important;
		text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;

		white-space: normal !important;
		overflow: visible !important;
		text-overflow: unset !important;
	}

	/* Remove the little event dot, as the button is now visible */
	.my-calendar-table td.mc-events .event-icon,
	.my-calendar-table td.has-events .event-icon {
		display: none !important;
	}
}

/* =========================================================
   MOBILE - MAKE EVENT DAYS OBVIOUS
   My Calendar mobile view uses .mc-date button, not event title buttons
   ========================================================= */

@media (max-width: 782px) {

	/* Event day cell */
	.my-calendar-table td.mc-events,
	.my-calendar-table td.has-events {
		position: relative !important;
		background:
			radial-gradient(rgba(202, 1, 108, 0.10) 1px, transparent 1px) 0 0 / 7px 7px,
			linear-gradient(180deg, #fff2fa 0%, #ffffff 100%) !important;
		border: 2px solid rgba(202, 1, 108, 0.18) !important;
	}

	/* Turn the mobile date button into an event CTA */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date,
	.my-calendar-table td.has-events .mc-date-container button.mc-date {
		position: absolute !important;
		left: 10px !important;
		right: 10px !important;
		top: 18px !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;

		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 74px !important;

		margin: 0 !important;
		padding: 10px 8px !important;

		background:
			radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 5px 5px,
			linear-gradient(90deg, #8f005a 0%, #c00078 55%, #8f005a 100%) !important;

		color: #ffffff !important;
		border: 0 !important;
		border-radius: 16px !important;

		box-shadow: 0 8px 18px rgba(143, 0, 90, 0.28) !important;
		text-align: center !important;
		cursor: pointer !important;
	}

	/* Date number inside the event CTA */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date .mc-day-number,
	.my-calendar-table td.has-events .mc-date-container button.mc-date .mc-day-number {
		display: block !important;

		width: auto !important;
		height: auto !important;
		min-width: 0 !important;

		background: transparent !important;
		box-shadow: none !important;

		color: #ffffff !important;
		font-size: 22px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
		text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
	}

	/* Hide the dot */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date .event-icon,
	.my-calendar-table td.has-events .mc-date-container button.mc-date .event-icon {
		display: none !important;
	}

	/* Add readable label */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date::after,
	.my-calendar-table td.has-events .mc-date-container button.mc-date::after {
		content: "View event" !important;

		display: block !important;
		color: #ffffff !important;

		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.03em !important;

		text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
	}

	/* Keep empty days as normal */
	.my-calendar-table td.no-events .mc-date-container .mc-date {
		position: static !important;
		background: transparent !important;
		box-shadow: none !important;
		color: #ca016c !important;
	}
}

/* =========================================================
   MOBILE FIX - MAKE VIEW EVENT BUTTON CLICKABLE
   ========================================================= */

@media (max-width: 782px) {

	/* Make sure decorative cell layers never block taps */
	.my-calendar-table td.mc-events::before,
	.my-calendar-table td.mc-events::after,
	.my-calendar-table td.has-events::before,
	.my-calendar-table td.has-events::after {
		pointer-events: none !important;
		z-index: 0 !important;
	}

	/* Keep event day cell as the containing box */
	.my-calendar-table td.mc-events,
	.my-calendar-table td.has-events {
		position: relative !important;
		overflow: visible !important;
	}

	/* Date container must not block or hide the button */
	.my-calendar-table td.mc-events .mc-date-container,
	.my-calendar-table td.has-events .mc-date-container {
		position: relative !important;
		z-index: 80 !important;
		pointer-events: auto !important;
		overflow: visible !important;
	}

	/* This is the actual clickable My Calendar mobile modal button */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date.mc-modal,
	.my-calendar-table td.has-events .mc-date-container button.mc-date.mc-modal,
	.my-calendar-table td.mc-events .mc-date-container button.mc-date.button-link,
	.my-calendar-table td.has-events .mc-date-container button.mc-date.button-link {
		position: absolute !important;
		left: 10px !important;
		right: 10px !important;
		top: 18px !important;

		z-index: 100 !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;

		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;

		height: auto !important;
		min-height: 74px !important;

		margin: 0 !important;
		padding: 10px 8px !important;

		background:
			radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 5px 5px,
			linear-gradient(90deg, #8f005a 0%, #c00078 55%, #8f005a 100%) !important;

		color: #ffffff !important;

		border: 0 !important;
		border-radius: 16px !important;

		box-shadow: 0 8px 18px rgba(143, 0, 90, 0.28) !important;

		text-align: center !important;
		text-decoration: none !important;

		cursor: pointer !important;
		pointer-events: auto !important;
		touch-action: manipulation !important;
	}

	/* Make everything inside the button clickable too */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date.mc-modal *,
	.my-calendar-table td.has-events .mc-date-container button.mc-date.mc-modal *,
	.my-calendar-table td.mc-events .mc-date-container button.mc-date.button-link *,
	.my-calendar-table td.has-events .mc-date-container button.mc-date.button-link * {
		pointer-events: none !important;
	}

	/* Date number */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date .mc-day-number,
	.my-calendar-table td.has-events .mc-date-container button.mc-date .mc-day-number {
		display: block !important;

		background: transparent !important;
		box-shadow: none !important;

		color: #ffffff !important;
		font-size: 22px !important;
		font-weight: 900 !important;
		line-height: 1 !important;

		text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
	}

	/* Hide dot */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date .event-icon,
	.my-calendar-table td.has-events .mc-date-container button.mc-date .event-icon {
		display: none !important;
	}

	/* Add label */
	.my-calendar-table td.mc-events .mc-date-container button.mc-date::after,
	.my-calendar-table td.has-events .mc-date-container button.mc-date::after {
		content: "View event" !important;

		display: block !important;

		color: #ffffff !important;

		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.03em !important;

		text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;

		pointer-events: none !important;
	}

	/* Keep the hidden modal content behind the button, never over it */
	.my-calendar-table td.mc-events > .calendar-events,
	.my-calendar-table td.has-events > .calendar-events,
	.my-calendar-table td.mc-events > .calendar-events.uses-modal,
	.my-calendar-table td.has-events > .calendar-events.uses-modal {
		position: static !important;
		z-index: 1 !important;
		pointer-events: none !important;
	}

	/* But allow actual buttons/links inside an opened modal to work */
	.my-calendar-table td.mc-events > .calendar-events.uses-modal[style*="display: block"],
	.my-calendar-table td.has-events > .calendar-events.uses-modal[style*="display: block"],
	.my-calendar-table td.mc-events > .calendar-events.uses-modal[aria-hidden="false"],
	.my-calendar-table td.has-events > .calendar-events.uses-modal[aria-hidden="false"] {
		pointer-events: auto !important;
	}
}
/* =========================================================
   MOBILE FIX - KEEP OPEN MODAL ABOVE VIEW EVENT BUTTONS
   ========================================================= */

@media (max-width: 782px) {

	/* Calendar view-event buttons should be clickable, but not above the modal */
	.my-calendar-table td.mc-events .mc-date-container,
	.my-calendar-table td.has-events .mc-date-container {
		z-index: 10 !important;
	}

	.my-calendar-table td.mc-events .mc-date-container button.mc-date.mc-modal,
	.my-calendar-table td.has-events .mc-date-container button.mc-date.mc-modal,
	.my-calendar-table td.mc-events .mc-date-container button.mc-date.button-link,
	.my-calendar-table td.has-events .mc-date-container button.mc-date.button-link {
		z-index: 12 !important;
	}

	/* The My Calendar modal overlay must sit above the calendar */
	#mc-modal-overlay,
	.my-calendar-modal-overlay,
	.my-calendar-modal__overlay {
		position: fixed !important;
		z-index: 999990 !important;
	}

	/* The actual modal/dialog must sit above the calendar buttons */
	#mc-modal,
	dialog#mc-modal,
	.my-calendar-modal,
	.my-calendar-modal__dialog {
		position: fixed !important;
		z-index: 1000000 !important;
	}

	/* Modal content must sit above everything inside the calendar grid */
	#mc-modal-content,
	.my-calendar-modal__content,
	.my-calendar-modal_content,
	.my-calendar-modal-wrapper,
	.my-calendar-modal__wrapper {
		position: relative !important;
		z-index: 1000001 !important;
	}

	/* Hide the mobile grid view-event buttons while the modal is open */
	body:has(#mc-modal[open]) .my-calendar-table td.mc-events .mc-date-container button.mc-date,
	body:has(.my-calendar-modal[open]) .my-calendar-table td.mc-events .mc-date-container button.mc-date,
	body:has(#mc-modal[open]) .my-calendar-table td.has-events .mc-date-container button.mc-date,
	body:has(.my-calendar-modal[open]) .my-calendar-table td.has-events .mc-date-container button.mc-date {
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

/* =========================================================
   MOBILE FIX - STYLE ACTUAL OPEN MODAL + HIDE GRID PILLS
   ========================================================= */

@media (max-width: 782px) {

	/* When the My Calendar modal is open, hide the calendar grid pills behind it */
	body:has(dialog#mc-modal[open]) .my-calendar-table td.mc-events .mc-date-container button.mc-date,
	body:has(dialog#mc-modal[open]) .my-calendar-table td.has-events .mc-date-container button.mc-date,
	body:has(.my-calendar-modal[open]) .my-calendar-table td.mc-events .mc-date-container button.mc-date,
	body:has(.my-calendar-modal[open]) .my-calendar-table td.has-events .mc-date-container button.mc-date {
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Make sure the modal is above the calendar */
	#mc-modal-overlay,
	.my-calendar-modal-overlay {
		position: fixed !important;
		z-index: 999990 !important;
		background: rgba(28, 31, 38, 0.72) !important;
	}

	dialog#mc-modal,
	#mc-modal,
	.my-calendar-modal {
		position: fixed !important;
		inset: 0 !important;
		z-index: 1000000 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh !important;
		max-height: 100vh !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		overflow: auto !important;
	}

	/* The actual mobile modal content wrapper */
	#mc-modal-content {
		position: relative !important;
		z-index: 1000002 !important;

		width: min(94vw, 560px) !important;
		max-width: 94vw !important;

		margin: 6vh auto 8vh auto !important;
		padding: 0 !important;

		background:
			radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 6px 6px,
			linear-gradient(90deg, #b70074 0%, #cf007f 55%, #b70074 100%) !important;

		border-radius: 24px !important;
		box-shadow: 0 24px 70px rgba(0,0,0,0.38) !important;
		overflow: hidden !important;
	}

	/* The mobile event wrapper inside modal */
	#mc-modal-content .calendar-events.uses-modal,
	#mc-modal-content article.mini-event,
	#mc-modal-content article.mc-event,
	#mc-modal-content article[class*="mini"] {
		position: relative !important;
		z-index: 1000003 !important;

		display: block !important;
		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	/* Hide the mini header line if it duplicates the title */
	#mc-modal-content article > header {
		display: none !important;
	}

	/* Mobile modal details panel */
	#mc-modal-content .details.has-image,
	#mc-modal-content .details {
		position: relative !important;
		z-index: 1000004 !important;

		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		background: transparent !important;
		color: #0b0b0b !important;

		overflow: visible !important;
	}

	/* Close button inside the mobile modal */
	#mc-modal-content .details > button.mc-toggle.close,
	#mc-modal-content button.mc-toggle.close {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		z-index: 1000010 !important;

		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;

		margin: 0 !important;
		padding: 0 !important;

		background: #6ace00 !important;
		color: #0b0b0b !important;

		border: 0 !important;
		border-radius: 999px !important;

		box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
		pointer-events: auto !important;
		cursor: pointer !important;
	}

	#mc-modal-content .details > button.mc-toggle.close *,
	#mc-modal-content button.mc-toggle.close * {
		color: #0b0b0b !important;
	}

	/* Time and date */
	#mc-modal-content .time-block,
	#mc-modal-content .event-time {
		order: 1 !important;

		display: block !important;
		width: 100% !important;

		margin: 0 !important;
		padding: 22px 72px 12px 22px !important;

		color: #0b0b0b !important;
		font-size: 18px !important;
		font-weight: 800 !important;
		line-height: 1.3 !important;

		background: transparent !important;
	}

	#mc-modal-content .event-date,
	#mc-modal-content .date-wrapper,
	#mc-modal-content .mc-date {
		display: block !important;
		margin-bottom: 4px !important;

		color: #0b0b0b !important;
		font-size: 14px !important;
		font-weight: 900 !important;
		text-transform: uppercase !important;
	}

	/* Image */
	#mc-modal-content .mc-event-image,
	#mc-modal-content .image,
	#mc-modal-content img.mc-image {
		order: 2 !important;
	}

	#mc-modal-content .mc-event-image,
	#mc-modal-content .image {
		display: block !important;
		width: 100% !important;
		height: auto !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden !important;
		background: transparent !important;
	}

	#mc-modal-content img.mc-image {
		display: block !important;

		width: 100% !important;
		height: auto !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;

		object-fit: cover !important;
		object-position: center !important;

		border-radius: 0 !important;
	}

	/* Description/text */
	#mc-modal-content .shortdesc,
	#mc-modal-content .description,
	#mc-modal-content .sub-details,
	#mc-modal-content .mc-excerpt {
		order: 3 !important;

		display: block !important;
		width: 100% !important;

		margin: 0 !important;
		padding: 22px !important;

		color: #0b0b0b !important;
		background: transparent !important;

		font-size: 16px !important;
		line-height: 1.5 !important;
	}

	#mc-modal-content .shortdesc *,
	#mc-modal-content .description *,
	#mc-modal-content .sub-details *,
	#mc-modal-content .mc-excerpt * {
		color: #0b0b0b !important;
	}

	#mc-modal-content p {
		margin: 0 0 16px 0 !important;
	}

	/* Registration / buy tickets */
	#mc-modal-content .mc-registration,
	#mc-modal-content .button-group {
		order: 4 !important;

		display: block !important;
		width: 100% !important;

		margin: 0 !important;
		padding: 0 22px 24px 22px !important;
	}

	#mc-modal-content .mc-registration a,
	#mc-modal-content .button-group a,
	#mc-modal-content .mc-register-link {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;

		background: #000000 !important;
		color: #ffffff !important;

		padding: 12px 18px !important;

		border: 0 !important;
		border-radius: 12px !important;

		font-size: 14px !important;
		font-weight: 900 !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
	}

	#mc-modal-content .mc-registration a *,
	#mc-modal-content .button-group a *,
	#mc-modal-content .mc-register-link * {
		color: #ffffff !important;
	}

	/* Hide edit links in mobile modal */
	#mc-modal-content .mc_edit_links,
	#mc-modal-content .mc_edit_links * {
		display: none !important;
	}
/* =========================================================
   MOBILE FIX - USE REAL MODAL CLOSE BUTTON
   ========================================================= */

@media (max-width: 782px) {

	/* Hide the fake/inner close button inside the event content */
	#mc-modal-content .calendar-events.uses-modal > button.mc-toggle.close,
	#mc-modal-content article.mini-event .details > button.mc-toggle.close,
	#mc-modal-content .details > button.mc-toggle.close {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/* Bring back the real My Calendar modal close button */
	#mc-modal .my-calendar-modal-close,
	#mc-modal button.my-calendar-modal-close,
	.my-calendar-modal .my-calendar-modal-close,
	.my-calendar-modal button.my-calendar-modal-close {
		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;

		position: fixed !important;
		top: calc(6vh + 12px) !important;
		right: calc(3vw + 12px) !important;
		z-index: 1000020 !important;

		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;

		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;

		margin: 0 !important;
		padding: 0 !important;

		background: #6ace00 !important;
		color: #0b0b0b !important;

		border: 0 !important;
		border-radius: 999px !important;

		box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;

		cursor: pointer !important;
		touch-action: manipulation !important;

		font-size: 0 !important;
		line-height: 1 !important;
	}

	/* Make the icon black */
	#mc-modal .my-calendar-modal-close *,
	#mc-modal button.my-calendar-modal-close *,
	.my-calendar-modal .my-calendar-modal-close *,
	.my-calendar-modal button.my-calendar-modal-close * {
		color: #0b0b0b !important;
		fill: #0b0b0b !important;
		pointer-events: none !important;
	}

	/* Add a visible X if the plugin icon/text is hidden */
	#mc-modal .my-calendar-modal-close::before,
	#mc-modal button.my-calendar-modal-close::before,
	.my-calendar-modal .my-calendar-modal-close::before,
	.my-calendar-modal button.my-calendar-modal-close::before {
		content: "×" !important;
		display: block !important;

		color: #0b0b0b !important;
		font-size: 30px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
	}

	#mc-modal .my-calendar-modal-close:hover,
	#mc-modal button.my-calendar-modal-close:hover,
	.my-calendar-modal .my-calendar-modal-close:hover,
	.my-calendar-modal button.my-calendar-modal-close:hover {
		filter: brightness(0.95) !important;
	}

	#mc-modal .my-calendar-modal-close:focus,
	#mc-modal .my-calendar-modal-close:focus-visible,
	#mc-modal button.my-calendar-modal-close:focus,
	#mc-modal button.my-calendar-modal-close:focus-visible,
	.my-calendar-modal .my-calendar-modal-close:focus,
	.my-calendar-modal .my-calendar-modal-close:focus-visible,
	.my-calendar-modal button.my-calendar-modal-close:focus,
	.my-calendar-modal button.my-calendar-modal-close:focus-visible {
		outline: 3px solid rgba(106, 206, 0, 0.45) !important;
		outline-offset: 3px !important;
	}
}
		/* =========================================================
   MOBILE FIX - RESTORE GREEN CLOSE BUTTON
   ========================================================= */

@media (max-width: 782px) {

	#mc-modal-content .calendar-events.uses-modal > button.mc-toggle.close,
	#mc-modal-content article.mini-event .details > button.mc-toggle.close,
	#mc-modal-content .details > button.mc-toggle.close {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		z-index: 1000020 !important;

		display: inline-flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;

		align-items: center !important;
		justify-content: center !important;

		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;

		margin: 0 !important;
		padding: 0 !important;

		background: #6ace00 !important;
		color: #0b0b0b !important;

		border: 0 !important;
		border-radius: 999px !important;

		box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
		cursor: pointer !important;
		touch-action: manipulation !important;
	}

	#mc-modal-content .calendar-events.uses-modal > button.mc-toggle.close *,
	#mc-modal-content article.mini-event .details > button.mc-toggle.close *,
	#mc-modal-content .details > button.mc-toggle.close * {
		color: #0b0b0b !important;
		fill: #0b0b0b !important;
		pointer-events: none !important;
	}

	#mc-modal-content .calendar-events.uses-modal > button.mc-toggle.close::before,
	#mc-modal-content article.mini-event .details > button.mc-toggle.close::before,
	#mc-modal-content .details > button.mc-toggle.close::before {
		content: "×" !important;
		display: block !important;

		color: #0b0b0b !important;
		font-size: 30px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
	}

	#mc-modal-content .calendar-events.uses-modal > button.mc-toggle.close .dashicons,
	#mc-modal-content article.mini-event .details > button.mc-toggle.close .dashicons,
	#mc-modal-content .details > button.mc-toggle.close .dashicons {
		display: none !important;
	}
}