/* ==========================================================================
  Single Event Page Styles  (uc-events-single.css)

/* ==========================================================================
   AI / DEVELOPER GUIDELINES: RESPONSIVE MEDIA QUERIES
   --------------------------------------------------------------------------
   - ALL media queries are consolidated at the bottom of this stylesheet.
   - When adding responsive styling, check if the target @media query already exists in the bottom section. also make sure if you are adding any styling block then should not already exist and if you think that any kind of styling block then use that class insted of adding new block of css and if need any additional or want to alter any styling then use the estra class in the parent.
   - IF IT EXISTS: Append the new styles inside that same @media block.
   - IF IT DOES NOT EXIST: Append the new @media query at the bottom while
     maintaining proper screen resolution hierarchy.
========================================================================== */

/* ==========================================================================
   1. PAGE WRAPPER
========================================================================== */
.pd-single-event-wrapper.activity-wrapper {
  background-color: #fff;
}

/* ==========================================================================
   2. HERO SECTION  (.ra-banner-section)
========================================================================== */
.ra-banner-section.activity-section {
  padding: 4px 0 56px;
}

/* Two-column grid: image left, details right */
.ra-grid-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: flex-start;
}

/* ==========================================================================
   3. LEFT COLUMN – Image / Slider
========================================================================== */
.slider-wrapper-top {
  position: sticky;
  top: 131px; /* 111px sticky header + 20px offset */
  min-width: 0;
  max-width: 100%;
}

/* Logged-in WordPress user (adds 32px admin bar height) */
body.admin-bar .slider-wrapper-top {
  top: 163px; /* 131px + 32px admin bar */
}

.ra-image-container {
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

/* Prevent Swiper dynamic sizing from expanding grid item */
.slider-wrapper-top .swiper,
.slider-wrapper-top .swiper-container,
.slider-wrapper-top .swiper-wrapper,
.slider-wrapper-top .swiper-slide {
  min-width: 0;
  max-width: 100%;
}

/* Fallback single image (no slider) */
.ra-single-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* ==========================================================================
   4. RIGHT COLUMN – Title + Cards
========================================================================== */
.ra-details.innerpage-flex-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Event title */
.pd-single-event-wrapper .ra-headwrap {
  margin-bottom: 0px;
  padding: 0;
  border: none;
}
.ra-iframe-wrapper .pdop-action-buttons-wrapper .pdop_community_cta {
  display: flex;
  justify-content: center;
}

.ra-row-wrapper{
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.ra-notes-list .pdop_program_detail_data_section p{
  margin: 0;
}

.ra-headsection .ra-main-title {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   5. INFO CARDS  (shared between Date & Time and Event Location)
========================================================================== */
.ra-info-card {
  border: 1px solid #E2F8FF;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  padding: 30px;
  border: 1px solid #E2E2E2;
}

/* Card header row (icon + title) */
.ra-info-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  /* padding: 14px 20px; */
  /* border-bottom: 1px solid #E2F8FF; */
  margin-bottom: 20px;
}

.ra-info-card__icon {
  display: flex;
  align-items: center;
  color: #009AD0;
  flex-shrink: 0;
}

.ra-info-card__title {
  color: #2B3C73;
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
}

/* ==========================================================================
   6. DATE & TIME CARD  (.ra-datetime-card)
========================================================================== */

.rowwrapper{
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}
/* .ra-datetime-row {
  border-bottom: 1px solid #EEF8FC;
} */

.ra-datetime-row:last-child {
  border-bottom: none;
}

/* Sub-event label strip — exact colors from SVG: rect fill #E2F8FF, text fill #0079A4 */
.ra-datetime-row__label {
  padding: 5px 10px;
  background-color: #E2F8FF;
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  text-transform: uppercase;
  color: #0079A4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* Two columns inside each datetime row */
.ra-datetime-row__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* padding: 14px 20px; */
}

/* Single column modifier when only 1 item exists */
.ra-datetime-row__cols.ra-datetime-row__cols--single-col {
  grid-template-columns: 1fr;
}

/* Single column entry */
.ra-datetime-row__col {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Left column icon (calendar) — plain teal icon */
.ra-datetime-row__col:first-child .ra-datetime-row__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009AD0;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Right column icon (clock / location pin) — plain teal icon */
.ra-datetime-row__col:last-child .ra-datetime-row__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009AD0;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Fallback icon styling */
.ra-datetime-row__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009AD0;
  margin-top: 1px;
  flex-shrink: 0;
}

.ra-datetime-row__col-icon svg {
  width: 14px;
  height: 14px;
  display: block;
  overflow: visible;
}

.ra-datetime-row__col-label {
  font-weight: 400;
  font-size: 14px;
  color: #6b7c93;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.ra-datetime-row__col-value, .ra-datetime-row__content {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}
.ra-datetime-row__content ul{
  margin-left: 10px;
}

/* Bullet list (locations / entry times) — matches design dot style */
.ra-datetime-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ra-datetime-row__list li {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.7;
  padding: 0;
  padding-left: 14px;
  position: relative;
}

.ra-datetime-row__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #009AD0;
  font-size: 16px;
  line-height: 1.5;
}

/* ==========================================================================
   7. EVENT LOCATION CARD  (.ra-location-card)
========================================================================== */
.ra-location-row {
  border-bottom: 1px solid #EEF8FC;
}

.ra-location-row:last-child {
  border-bottom: none;
}

.ra-location-row__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.ra-location-row__col {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Location pin icon — filled teal circle badge (matches right-col icon style) */
.ra-location-row__col .ra-datetime-row__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #009AD0;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}

.ra-location-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.ra-location-address {
  font-size: 13px;
  color: #4a5568;
  line-height: 1.5;
}

/* Map thumbnail + Get Directions */
.ra-location-row__map {
  flex-shrink: 0;
  width: 210px;
}

/* Orange/gold border — matching the design screenshot exactly */
.ra-location-map-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 2.5px solid #F5A623;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.ra-location-map-link:hover {
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
}

.ra-location-map-link img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

/* "Get Directions" bar — teal background + yellow arrow circle on right */
.ra-location-map-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  background: #009AD0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  gap: 8px;
}

/* Hide the template's inline SVG arrow — the ::after circle replaces it */
.ra-location-map-cta svg {
  display: none;
}

/* ==========================================================================
   7b. IFRAME BOX STYLING (.iframebox) — Matches design map card
========================================================================== */
.ra-datetime-row__content.iframebox {
  width: 100%;
}

.ra-iframe-wrapper {
  position: relative;
  border: 2.5px solid #F5A623;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
  width: 100%;
}

.ra-iframe-wrapper iframe,
.ra-datetime-row__content.iframebox iframe {
  width: 100%;
  height: 190px;
  min-height: 160px;
  border: 0;
  border-radius: 14px;
  display: block;
}

.other_content__item .ra-iframe-wrapper {
  width: 100%;
}

.other_content__item .ra-iframe-wrapper iframe {
  width: 100%;
  height: 800px;
  min-height: 700px;
}

.ra-datetime-row__content.iframebox p {
  margin: 0;
  padding: 0;
}

.ra-datetime-row__col-body{
  width: 100%;
}
/* Position button-and-pdf container over bottom center of iframe */
.ra-iframe-wrapper .pdop-action-buttons-wrapper {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 0;
  min-width: 180px;
}

.ra-iframe-wrapper .pdop_community_cta {
  margin: 0;
  padding: 0;
}

/* Style the button inside .ra-iframe-wrapper as the floating blue pill */
/* .ra-iframe-wrapper .pdop_btn,
.ra-iframe-wrapper a.pdop_btn,
.ra-iframe-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #009AD0 !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 5px 5px 5px 16px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 154, 208, 0.35) !important;
  white-space: nowrap !important;
  border: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
} */

/* .ra-iframe-wrapper .pdop_btn:hover,
.ra-iframe-wrapper a.pdop_btn:hover,
.ra-iframe-cta-btn:hover {
  background: #0079A4 !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
} */

/* Yellow circle with dark arrow on the right of the button */
/* .ra-iframe-wrapper .pdop_btn::after,
.ra-iframe-wrapper a.pdop_btn::after,
.ra-iframe-cta-btn::after {
  content: '→';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F5C518;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
} */

/* Yellow circle arrow button on the right of Get Directions */
/* .ra-location-map-cta::after {
  content: '→';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5C518;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
} */


/* ==========================================================================
   7. OTHER CONTENT SECTION (.other_content.content-with-bg-section)
========================================================================== */
.other_content {
  --container-padding: clamp(20px, 18vw, 24vw);
}
.other_content .pdop_container {
  padding-inline: var(--container-padding);
}
.other_content.content-with-bg-section {
  padding: 60px 0 70px;
  background-color: #F4F0FF;
}

/* Main Section Heading */
.other_content__main-heading {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0 0 40px 0;
  text-transform: none;
}

.other_content__main-heading.text-align-center {
  text-align: center;
}

.other_content__main-heading.text-align-left {
  text-align: left;
}

.other_content__main-heading.text-align-right {
  text-align: right;
}

/* List & Repeater Items */
.other_content__list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.other_content__item {
  width: 100%;
}

/* Sub Heading */
.other_content__sub-heading {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 14px 0;
}

/* WYSIWYG Content Body */
.other_content__body {
  font-size: 16px;
  line-height: 1.65;
  color: #1a1a1a;
  margin-bottom: 24px;
}

.other_content__body p {
  margin-bottom: 14px;
}

.other_content__body p:last-child {
  margin-bottom: 0;
}

/* Important Notes Card Wrapper */
.other_content__notes-wrapper {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Note Card Callout Box */
.other_content__note-card {
  background-color: #FFF5E5;
  border: 1px solid #FCD385;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(252, 211, 133, 0.12);
}

/* Note Header (Icon + Title) */
.other_content__note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.other_content__note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A5A00;
  flex-shrink: 0;
}

.other_content__note-icon svg,
.other_content__note-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.other_content__note-title {
  font-size: 18px;
  font-weight: 700;
  color: #7A4B00;
  margin: 0;
  line-height: 1.3;
}

/* Note Body WYSIWYG Content */
.other_content__note-body {
  font-size: 15px;
  line-height: 1.65;
  color: #5C4000;
}

.other_content__note-body p {
  margin-bottom: 10px;
}

.other_content__note-body p:last-child {
  margin-bottom: 0;
}

.other_content__note-body ul,
.other_content__note-body ol {
  margin: 8px 0 8px 24px;
  padding: 0;
}

.other_content__note-body li {
  margin-bottom: 6px;
  color: #5C4000;
}

.other_content__note-body li:last-child {
  margin-bottom: 0;
}

/* Template-specific override for .program_note_section */
.pd-single-event-wrapper .program_note_section {
  margin-bottom: 0;
}

/* Image Carousel Logo Box Styling (Scoped to Single Event Page) */
.other_content .pdop_carousel_img_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.other_content .pdop_carousel_img_box a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  min-height: 210px;
  max-height: 200px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.other_content .pdop_carousel_img_box img {
  max-width: 250px;
  width: auto;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* Featured Card Grid Component Override (Scoped to Single Event Page) */
.other_content .pdop_feature_card_image_wrapper,
.other_content .pdop_feature_card_item .pdop_feature_card_image_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

.other_content .pdop_feature_card_image_wrapper img,
.other_content .pdop_feature_card_item .pdop_feature_card_image_wrapper img {
  height: auto !important;
  max-height: 180px;
  max-width: 100%;
  width: auto;
  object-fit: contain !important;
  margin: 0 auto;
  display: block;
  border-radius: 0;
}

/* ==========================================================================
   8. RESPONSIVE MEDIA QUERIES
========================================================================== */

/* Tablet — 991px */
@media (max-width: 991px) {
  .ra-grid-two-col {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .slider-wrapper-top {
    position: static;
    top: auto;
  }

  .ra-banner-section.activity-section {
    padding: 2px 0 40px;
  }

  .ra-datetime-row__cols {
    grid-template-columns: 1fr 1fr;
  }

  .ra-location-row__map {
    width: 160px;
  }

  .other_content {
    --container-padding: clamp(20px, 6vw, 40px);
  }

  .other_content.content-with-bg-section {
    padding: 44px 0 54px;
  }

  .other_content__main-heading {
    margin-bottom: 28px;
  }

  .other_content__note-card {
    padding: 20px 22px;
  }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  .ra-headsection .ra-main-title {
    font-size: 26px;
  }

  .ra-datetime-row__cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ra-location-row__cols {
    flex-direction: column;
  }

  .ra-location-row__map {
    width: 100%;
  }

  .ra-location-map-link img {
    height: 140px;
  }

  .other_content {
    --container-padding: 20px;
  }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .ra-banner-section.activity-section {
    padding: 2px 0 32px;
  }

  .ra-info-card__header {
    padding: 12px 16px;
  }

  .ra-datetime-row__cols,
  .ra-location-row__cols {
    padding: 14px 16px;
  }

  .ra-datetime-row__label {
    padding: 7px 16px;
  }

  .ra-location-name {
    font-size: 14px;
  }

  .other_content.content-with-bg-section {
    padding: 32px 0 40px;
  }

  .other_content {
    --container-padding: 15px;
  }

  .other_content__note-card {
    padding: 16px 18px;
    border-radius: 12px;
  }

  .other_content__note-title {
    font-size: 16px;
  }

  .other_content .pdop_carousel_img_box a {
    padding: 12px 14px;
    min-height: 110px;
  }

  .other_content .pdop_carousel_img_box img {
    max-width: 200px;
  }
}

/* ==========================================================================
   8. SPECIAL EVENTS CUSTOM PILL BUTTON (.ra-special-event-btn)
   ========================================================================== */
.ra-special-event-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 6px 5px 18px;
  background: #ffffff;
  border: 1.5px solid #2B3C73;
  border-radius: 50px;
  color: #2B3C73;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ra-special-event-btn:hover {
  background: #f0f7fa;
  color: #1a2a50;
  border-color: #1a2a50;
  text-decoration: none;
}

.ra-special-event-btn__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #C8E327;
  flex-shrink: 0;
}

.ra-datetime-row__wysiwyg {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
}

.ra-datetime-row__wysiwyg p {
  margin: 0 0 6px 0;
}

.ra-datetime-row__wysiwyg p:last-child {
  margin-bottom: 0;
}

.ra-datetime-row__wysiwyg ul {
  margin: 0;
  padding-left: 16px;
  list-style-type: disc;
}

.ra-datetime-row__wysiwyg ul li {
  color: var(--color-black);
  font-size: var(--body-base);
  /* margin-bottom: 1.2em; */
}

.ra-datetime-row__wysiwyg ul li:last-child {
  margin-bottom: 0;
}

/* Special Events Location Row Layout & Map Box */
.ra-location-row__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ra-location-info-col {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ra-location-map-box {
  flex-shrink: 0;
  /* width: 220px; */
}

.ra-location-map-inner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2.5px solid #F5A623;
  height: 190px;
  min-height: 160px;
  background: #e5e3df;
}

.ra-location-map-inner .rp-google-map-leaflet,
.ra-iframe-wrapper iframe,
.ra-datetime-row__content.iframebox iframe {
  width: 100% !important;
  height: 190px !important;
  min-height: 160px !important;
  border: 0;
  border-radius: 14px;
  display: block !important;
}

.ra-location-map-inner .rp-google-map-leaflet{z-index: 9;}

.ra-location-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.ra-location-address {
  display: block;
  font-size: 14px;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 8px;
}

.ra-location-button-wrap {
  margin-top: 14px;
}

/* Hide Leaflet attribution bar to prevent overlap with Get Direction button */
.ra-location-map-inner .leaflet-control-attribution {
  display: none !important;
}


/* "Get Direction" overlay position on map */
.ra-map-directions-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: max-content;
}

@media (max-width: 640px) {


  .ra-datetime-row__cols,
  .ra-location-row__cols {
    flex-direction: column;
  }
  .ra-location-map-box {
    width: 100%;
  }
}