@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300..900&family=Oswald:wght@300..700&display=swap');

@import "../../node_modules/tailwindcss/index.css";

/* Main compiled CSS - This file is generated by Tailwind CSS */
/* Run: npm run build */

/* Chulalongkorn Font Imports */
@font-face {
  font-family: 'Chulalongkorn';
  src: url('../fonts/chulalongkornbold-webfont.woff') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chulalongkorn';
  src: url('../fonts/chulalongkornbold-webfont.woff') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --font-primary: 'Jost', sans-serif;
  --font-heading: 'Chulalongkorn', sans-serif;
  --heading-color: #11ccbd;
  --background-heading-intro: oklch(0.953 0.051 180.800995);
  --border-heading-intro: oklch(0.91 0.096 180.425995);
  --color-heading-intro: oklch(0.437 0.078 188.216003);
  --font-default: 16px;
  --radius-rounded: 1.5rem;
  --background-tea: oklch(0.984 0.014 180.720001);
  --background-tea-hover: oklch(90.297% 0.04791 178.382);
  --background-golden: oklch(97.827% 0.03214 93.527);

}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --animate-float: float 6s ease-in-out infinite;

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
}


@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    p {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }

    label {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    button {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }
  }
}

html {
  font-size: var(--font-size);
}

/* Custom Base Styles */
@layer base {
  body {
    @apply antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }
}

/* WordPress Core Blocks Styling */
@layer components {
  .wp-block-button__link {
    @apply inline-flex items-center px-6 py-3 bg-teal-600 text-white font-semibold rounded-lg hover:bg-teal-700 transition-colors;
  }
  
  .wp-block-quote {
    @apply border-l-4 border-teal-500 pl-4 italic text-gray-700;
  }
  
  .wp-block-pullquote {
    @apply border-t-4 border-b-4 border-teal-500 py-4 text-center;
  }
  
  /* Pagination */
  .pagination {
    @apply flex justify-center gap-2 mt-8;
  }
  
  .page-numbers {
    @apply px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-teal-50 hover:border-teal-500 transition-colors;
  }
  
  .page-numbers.current {
    @apply bg-teal-600 text-white border-teal-600;
  }
  
  /* Screen reader only */
  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
  }
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    @apply static w-auto h-auto m-0 overflow-visible whitespace-normal;
  }
  
  /* Navigation Submenus - Desktop */
  @media (min-width: 769px) {
    /* Hide all dropdowns by default */
    nav:not(#mobile-menu) .menu-item.group > .sub-menu {
      display: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    
    /* Show first level dropdown on hover */
    nav:not(#mobile-menu) .menu-item.group:hover > .sub-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    
    /* Nested submenu arrows */
    nav:not(#mobile-menu) .menu-item.has-submenu > a {
      @apply flex items-center gap-2;
    }
    
    /* Level 2+ submenus - hidden by default */
    nav:not(#mobile-menu) .sub-menu .sub-menu {
      display: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    
    /* Show level 2+ submenus on hover of parent item */
    nav:not(#mobile-menu) .sub-menu .has-submenu:hover > .sub-menu {
      display: block;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
  
  /* Mobile menu submenus */
  @media (max-width: 768px) {
    /* Hide all submenus by default in mobile */
    #mobile-menu .sub-menu {
      @apply hidden pl-4 mt-2 space-y-1 border-l-2 border-teal-200 ml-2;
    }
    
    /* Show expanded submenus */
    #mobile-menu .sub-menu.expanded {
      @apply block;
    }
    
    #mobile-menu .sub-menu a {
      @apply block px-4 py-2 text-gray-600 hover:bg-gray-100 rounded;
    }
    
    /* Nested submenus in mobile */
    #mobile-menu .sub-menu .sub-menu {
      @apply hidden pl-4 border-l-2 border-teal-100;
    }
    
    #mobile-menu .sub-menu .sub-menu.expanded {
      @apply block;
    }
    
    /* Mobile menu toggle button styles */
    #mobile-menu .menu-item-has-children > a {
      @apply flex items-center justify-between;
    }
    
    #mobile-menu .submenu-toggle {
      @apply p-2 ml-2 rounded hover:bg-gray-100 transition-colors;
    }
    
    #mobile-menu .submenu-toggle svg {
      @apply transition-transform duration-200;
    }
    
    #mobile-menu .submenu-toggle.expanded svg {
      @apply rotate-180;
    }
  }
  
  /* Front Page Full-Width & Container Utilities */
  .frontpage-content > * {
    @apply container mx-auto px-4;
  }
  
  /* Full-width sections - add 'alignfull' class to any block */
  .frontpage-content > .alignfull,
  .frontpage-content > .wp-block-group.alignfull,
  .frontpage-content > .wp-block-cover.alignfull,
  .frontpage-content > .wp-block-columns.alignfull {
    @apply w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] max-w-none px-0;
  }
  
  /* Container inside full-width sections */
  .frontpage-content > .alignfull > .wp-block-group__inner-container,
  .frontpage-content > .alignfull .container-inner {
    @apply container mx-auto px-4;
  }
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Custom utilities */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .animation-delay-1000 {
    animation-delay: 1s;
  }
}


/* reset */
:where(.wp-block-group.has-background){
  padding: 0;
}

body {
  font-family: var(--font-primary), sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-default);
}

.title-row{
  font-family: var(--font-heading), sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-align: center;
}

.title-section{
  font-size: 3rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.025em;
}
.title-section-first{
  display: inline-block;
  color: var(--color-primary);
  padding-right: 0.5rem;
}
.title-section-last{
  display: inline-block;
  color: var(--heading-color);
  padding-left: 0.5rem;
}

.title-section-newline{
  display: block;
  margin-top: -2rem;
  margin-bottom: 0;
}

.title-section-intro{
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  border-radius: 2.5rem;
  padding: 0.5rem 1.5rem;
  background-color: var(--background-heading-intro);
  border: 1px solid var(--border-heading-intro);
  color: var(--color-heading-intro);
  display: inline-block;
}

.title-section-sub{
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--muted-foreground);
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
  padding-left: 32px;
  padding-right: 32px;
}

.font-heading{
  font-family: var(--font-heading), sans-serif;
}

.organizers-block{
  background: none;
  background-color: transparent;
}

.schedule-accordion {
}


/* Accommodation Icons Custom Styles */

.icon-building,
.icon-location,
.icon-phone,
.icon-email,
.icon-map,
.icon-fax {
    display: inline-block;
    flex-shrink: 0;
}

.icon-building {
    color: #0d9488; /* teal-600 */
}

.icon-location {
    color: #14b8a6; /* teal-500 */
}

.icon-phone {
    color: #2dd4bf; /* teal-400 */
}

.icon-email {
    color: #5eead4; /* teal-300 */
}

.icon-map {
    color: #0d9488; /* teal-600 */
}

.icon-fax {
    color: #2dd4bf; /* teal-400 */
}

/* Ensure flex alignment for icon containers */
.flex.items-start svg {
    margin-top: 0.125rem;
}

.flex.items-center svg {
    vertical-align: middle;
}

/* Hover effects for interactive sections */
a:has(svg) {
    transition: all 0.3s ease;
}

a:hover svg {
    transform: scale(1.1);
}

#site-header {
  position: fixed;
  width: 100%;
}
body.admin-bar #site-header {
  top: 32px;
}

.section-organizer{
  
}

.iframe-rounded iframe{
  border-radius: var(--radius-rounded);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.button-primary .wp-block-button__link{
  background-color:#0d9488;
  background-image: -o-linear-gradient(top, #0d9488, #0f766e);
  background-image: linear-gradient(to bottom, #0d9488, #0f766e);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 2.5rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
  margin-left: auto;
  margin-right: auto;
}

.column-mb-0{
  margin-bottom: 0 !important;
}


.hero-subtitle,
.hero-title, 
.hero-edition{
  font-family: var(--font-heading), sans-serif;
  font-weight: 400;
}


/* vanue */


  /* Header Section */
  .venue-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 60px 20px;
      text-align: center;
      border-radius: 10px;
      margin-bottom: 40px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .venue-header h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
  }

  .venue-header p {
      font-size: 1.2em;
      opacity: 0.9;
  }

  /* WordPress Gutenberg Block Structure */
  .wp-block-section {
      background: white;
      padding: 40px;
      margin-bottom: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .section-title {
      font-size: 2em;
      color: #667eea;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 3px solid #667eea;
  }

  /* Hotel Information Grid */
  .hotel-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 30px;
  }

  .info-card {
      background: #f9f9f9;
      padding: 25px;
      border-radius: 8px;
      border-left: 4px solid #667eea;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .info-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  }

  .info-card h3 {
      color: #667eea;
      margin-bottom: 15px;
      font-size: 1.3em;
  }

  .info-card p {
      color: #555;
      line-height: 1.8;
  }

  .info-card a {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;
  }

  .info-card a:hover {
      text-decoration: underline;
  }

  /* Transportation Section */
  .transport-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
      margin-top: 30px;
  }

  .transport-card {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      padding: 30px;
      border-radius: 10px;
      text-align: center;
      transition: transform 0.3s ease;
  }

  .transport-card:hover {
      transform: scale(1.05);
  }

  .transport-icon {
      font-size: 3em;
      margin-bottom: 15px;
  }

  .transport-card h3 {
      color: #333;
      margin-bottom: 15px;
      font-size: 1.4em;
  }

  .transport-card ul {
      list-style: none;
      text-align: left;
      margin-top: 15px;
  }

  .transport-card li {
      padding: 8px 0;
      color: #555;
      border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  .transport-card li:last-child {
      border-bottom: none;
  }

  /* Distance Badge */
  .distance-badge {
      background: #667eea;
      color: white;
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 0.9em;
      font-weight: 600;
      display: inline-block;
      margin-top: 10px;
  }

  /* Map Section */
  .map-container {
      margin-top: 30px;
  }

  .map-wrapper {
      position: relative;
      width: 100%;
      height: 500px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      margin-bottom: 20px;
  }

  .map-wrapper iframe {
      width: 100%;
      height: 100%;
      border: none;
  }

  .map-image {
      width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }

  /* Contact Section */
  .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 30px;
  }

  .contact-item {
      display: flex;
      align-items: center;
      padding: 20px;
      background: #f9f9f9;
      border-radius: 8px;
  }

  .contact-icon {
      font-size: 2em;
      margin-right: 15px;
      color: #667eea;
  }

  .contact-details h4 {
      color: #333;
      margin-bottom: 5px;
  }

  .contact-details p {
      color: #666;
  }

  /* Buttons */
  .btn-primary {
      display: inline-block;
      background: #667eea;
      color: white;
      padding: 12px 30px;
      border-radius: 5px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.3s ease;
      margin-top: 15px;
  }

  .btn-primary:hover {
      background: #764ba2;
  }

  /* Amenities List */
  .amenities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 25px;
  }

  .amenity-item {
      padding: 15px;
      background: #f0f4f8;
      border-radius: 6px;
      text-align: center;
  }

  .amenity-item::before {
      content: "✓ ";
      color: #667eea;
      font-weight: bold;
      font-size: 1.2em;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
      .venue-header h1 {
          font-size: 1.8em;
      }

      .section-title {
          font-size: 1.5em;
      }

      .wp-block-section {
          padding: 25px;
      }

      .map-wrapper {
          height: 300px;
      }
  }


/* mobile menu fix */
#mobile-menu .sub-menu{
  display: none;
}

#mobile-menu a{
  font-size: 2rem;
}
#mobile-menu  .sub-menu a{
  font-size: 1.5rem;
  padding: 1rem 0.5rem;
  
}

#menu-main-manu a{
  font-size: 1.5rem;
}
#mobile-menu .menu-item-active .sub-menu{
  display: block;
}
#site-header.active-menu{
  background-color: white;
}

#site-header.active-menu #site-branding,
#site-header.active-menu #site-branding .leading-tight{
  color: #030213;
}

#site-header.active-menu #mobile-menu-toggle {
  color: #030213;
}

.schedule-contentx .wp-block-list li{
  list-style: disc;
  margin-left: 1.5rem;
}

/* Accommodation Card Styles */
.accommodation-card{
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease;
  border: 1px solid #e5e7eb;
  margin-bottom: 2rem;
}

.accommodation-card:hover{
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.accommodation-card .wp-block-columns{
  margin: 0!important;
  gap: 0!important;
  padding: 0!important;
  padding-inline: 0!important;
  display: flex;
  flex-wrap: nowrap;
}
.accommodation-card .wp-block-columns .wp-block-column{
  padding: 0!important;
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.accommodation-card .wp-block-columns .wp-block-column:first-child{
  flex: 1.2;
}
.accommodation-card .wp-block-columns .wp-block-column,
.accommodation-card .wp-block-columns .wp-block-column:last-child{
  flex: 0.8;
  justify-content: space-between;
}

.accommodation-card h2{
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-top: 0;
  background-color: #0d9488;
  color: white;
  padding: 1.75rem 1.5rem;
}
.accommodation-card p{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.accommodation-card .wp-block-button{
  margin: 0;
  width: 100%;
  display: flex;
  flex: 1;
}

.accommodation-card .wp-block-button__link {
  background-color: white;
  border-radius: 0%;
  color: #030213;
  border-top: 1px solid #e5e7eb;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1.5rem !important;
  justify-content: space-between;
  font-weight: 500;
  color: #0f766e;
  background-color: var(--background-tea);
  transition: all 0.3s ease;
}
.accommodation-card .wp-block-button__link:hover{
  background-color: var(--background-golden);
  color: #b4642e;
}

.accommodation-card .wp-block-button__link::after{
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23030213'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

.accommodation-card .wp-block-image{
  margin: 0;
}


.booking-information{
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;

}
.booking-information ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.booking-information .booking-information-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.75rem;
  background-color: #5eead4;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1.5rem;
}
.booking-information-content{
  padding: 1.5rem;
}
.booking-information .foot-note{
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 1.5rem;
}

/* Page Loading Screen */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0fdfa 0%, #f5f3ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  pointer-events: auto;
}

#page-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Loading Spinner */
.loader-spinner {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 2rem;
}

.loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: #0f766e;
  border-right-color: #14b8a6;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

.loader-ring:nth-child(1) {
  animation-delay: 0s;
}

.loader-ring:nth-child(2) {
  width: 85%;
  height: 85%;
  top: 7.5%;
  left: 7.5%;
  border-top-color: #059669;
  border-right-color: #0d9488;
  animation: spin 2s linear infinite reverse;
  animation-delay: 0.2s;
}

.loader-ring:nth-child(3) {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-top-color: #10b981;
  border-right-color: #059669;
  animation: spin 1.5s linear infinite;
  animation-delay: 0.4s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loader text and dots removed duplicates */

/* Loading Text */
.loader-text {
  text-align: center;
  margin-top: 1.5rem;
}

.loader-text h3 {
  font-family: var(--font-heading), sans-serif;
  font-size: 1.5rem;
  color: #0f766e;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.05em;
}

.loader-text p {
  font-family: var(--font-primary), sans-serif;
  color: #059669;
  font-size: 0.95rem;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* Loading Dots Animation */
.loader-dots {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 8px;
  margin-left: 0.5rem;
}

.loader-dots::after {
  content: ".";
  position: absolute;
  left: 0;
  color: #059669;
  font-size: 1.5rem;
  font-weight: bold;
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60% {
    content: "...";
  }
  80% {
    content: "....";
  }
  100% {
    content: ".";
  }
}

/* Smooth fade transition */
@media (prefers-reduced-motion: no-preference) {
  #page-loader {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Speaker Modal Loader */
#modal-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

#modal-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#modal-loader.fade-in {
  opacity: 1;
  pointer-events: auto;
}

.loader-spinner-modal {
  position: relative;
  width: 80px;
  height: 80px;
}

.loader-ring-modal {
  position: absolute;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

.loader-ring-modal:nth-child(1) {
  width: 100%;
  height: 100%;
  border-top-color: #0f766e;
  border-right-color: #14b8a6;
  animation-delay: 0s;
}

.loader-ring-modal:nth-child(2) {
  width: 75%;
  height: 75%;
  top: 12.5%;
  left: 12.5%;
  border-top-color: #059669;
  border-right-color: #0d9488;
  animation: spin 1.8s linear infinite reverse;
  animation-delay: 0.15s;
}

.loader-ring-modal:nth-child(3) {
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  border-top-color: #10b981;
  border-right-color: #059669;
  animation: spin 1.4s linear infinite;
  animation-delay: 0.3s;
}


.shortcode-speaker-card-title{
  font-family: var(--font-heading), sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-align: left;
  text-indent: 0;
}

.schedule-accordion details .room strong{
  font-family: var(--font-heading), sans-serif;
}

.logo-header img{
  max-height: 50px;
}

.key-date-description{
  font-weight: 300;
}
.key-date-description strong{
  color: firebrick;
}