/* Base styles */
#mobile-menu, #mobile-menu-overlay {
    transition: opacity 0.3s ease-in-out;
}
#mobile-menu.hidden, #mobile-menu-overlay.hidden {
    display: none;
}
.performer-container { position: relative; margin: 20px 0; width: 100%; box-sizing: border-box; display: block; background-color: #fff; }
.performer-label { position: absolute; left: 0; top: -30px; background: #4B0082; color: #fff; padding: 6px 15px; font-size: 14px; border-radius: 4px; z-index: 10; display: block; margin: 0; line-height: 1.5; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.performer-marquee { position: relative; overflow: hidden; white-space: nowrap; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 12px 0; border-radius: 4px; display: block; width: 100%; text-align: center; }
.performer-text { display: inline-block; padding-left: 100%; animation: performerScroll 200s linear infinite; font-size: 15px; color: #34495e; letter-spacing: 1px; margin: 0; line-height: 1.5; }
.performer-text strong { font-size: 1.2em; color: #000; margin-left: 1.5rem; margin-right: 1.5rem; }
@keyframes performerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.swiper .caption { text-align: center; background-color: rgba(0, 0, 0, 0.6); }
.mySwiper .caption { padding-bottom: 4rem; }
.hashin-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; }
.hashin-card img { height: 250px; object-fit: cover; width: 100%; }
.hashin-card .content { flex-grow: 1; padding: 1rem; }
.highlight-date { font-size: 1.5rem; font-weight: bold; color: #c0392b; display: inline-block; margin: 0 0.25rem; }
.studentSwiper .swiper-slide { width: 300px; }
.country-section { background-color: transparent; border: none; padding: 2rem 0; }
.country-section h4 { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; font-weight: 900; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 1rem; margin-bottom: 2rem; }
.country-section .prose { font-family: 'Noto Serif JP', serif; }
.photo { background: #fff; border: 1px solid #ddd; padding: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: box-shadow 0.3s ease-in-out; }
.photo:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.country-gallery .main-photo { margin-bottom: 1.5rem; max-width: 100%; margin-left: auto; margin-right: auto; }
.country-gallery .thumbnail-grid { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: 1rem; }
.country-gallery .thumbnail-grid .photo { flex: 0 0 200px; }
.photo-caption { font-size: 1rem; color: #555; margin-top: 0.5rem; text-align: center; font-family: 'Noto Serif JP', serif; }
.performer-container * { box-sizing: border-box; }
.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  margin: 0 auto;
  width: 100%;
}
.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* Chat Widget Styles */
.chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.chat-button { background-color: #4B0082; color: white; padding: 10px 20px; border-radius: 20px; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.chat-container { display: none; flex-direction: column; width: 350px; height: 500px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); overflow: hidden; position: absolute; bottom: 70px; right: 0; }
.chat-container.open { display: flex; }
.chat-header { background-color: #4B0082; color: white; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.chat-header h3 { margin: 0; font-size: 16px; }
.chat-header .close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }
.chat-messages { flex-grow: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.message { padding: 8px 12px; border-radius: 18px; max-width: 80%; }
.message.bot { background-color: #f1f1f1; align-self: flex-start; }
.message.user { background-color: #4B0082; color: white; align-self: flex-end; }
.chat-input { display: flex; padding: 10px; border-top: 1px solid #ddd; }
.chat-input input { flex-grow: 1; border: 1px solid #ddd; border-radius: 20px; padding: 10px; }
.chat-input .send-btn { background-color: #4B0082; border: none; border-radius: 50%; padding: 10px; margin-left: 10px; cursor: pointer; }

/* Desktop styles (min-width: 768px) */
@media (min-width: 768px) {
    .mySwiper .caption { padding-bottom: 3rem; }
    .performer-text strong { margin-left: 1rem; margin-right: 1rem; }
    .country-section h4 { font-size: 2rem; }
    .country-gallery .main-photo { max-width: 60%; }
    .photo-caption { font-size: 0.875rem; }
}