/*------------------------------------
  Optimized CSS for Modern Design
------------------------------------*/

/* Theme Colors (CSS Variables) */
:root {
  --bg-light: #f4f6f6;
  --bg-dark: #241c34;
  --bg-black: #000000;
  --bg-orange: #FF9933;

  /* Text Colors */
  --text-dark: #000000;
  --text-gray: #333333;
  --white-bright: #ffffff;

  /* Accent Colors */
  --highlight: #F39C12;
  --gray-accent: #CCCCCC;
  --blue-accent: #0099FF;
  --gold-accent: #fda83c;
  --orange-accent: #FF9933; 
}

/* Global Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: system-ui, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
  background-color: var(--bg-light);
  width: 100%;
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

/* Flexbox Layout Styles */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 100vw;
}

.flex-item {
  flex: 1 1 calc(33.33% - 1rem);
  min-width: 200px;
  max-width: 300px;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
  .flex-item { flex: 1 1 45%; }
}

@media (max-width: 480px) {
  .flex-item { flex: 1 1 100%; }
}

/* Utility Classes */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.0rem; }
.mt-5 { margin-top: 2.5rem; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.text-center { text-align: center; }

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  body { background-color: var(--bg-dark); color: var(--white-bright); }
}

/*------------------------------------
  Legacy CSS Section (Preserved)
------------------------------------*/
/* All Legacy CSS Code */

/* Begin Legacy CSS */

/* Simple fluid media */
img, object, embed, video {
  max-width: 100%;
  height: auto;
}

/* Legacy Layouts */
.gridContainer {
  width: 100%;
  max-width: 100vw;
  padding: 0;
}

#LayoutDiv1, #LayoutDiv2, #LayoutDiv3, #LayoutDiv4, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 {
  float: left;
  width: 100%;
  clear: both;
}

.box, .box1, .box2, .box3, .box4, .box5, .box5a {
  float: left;
  width: auto;
  max-width: 100%;
  margin: 0.5rem;
}

/* Media Queries (Legacy) */
@media only screen and (min-width: 320px) {
  .gridContainer { width: 100%; max-width: 100vw; }
}

@media only screen and (min-width: 481px) {
  .gridContainer { width: 100%; max-width: 100vw; }
}

@media only screen and (min-width: 769px) {
  .gridContainer { width: 100%; max-width: 100vw; }
}

@media (max-width: 768px) {
  .ticket-box {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .ticket-box {
    font-size: 12px;
    text-align: center;
  }
}

/* Legacy Style Blocks */
.Style2 { color: #ffffff; font-size: small; font-weight: medium; font-style: arial, helvetica, sans-serif; }
.style3 { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: medium; font-size: 10px; }

/* Additional Legacy Styles and Classes Preserved Here... */

.section { padding: 20px; width: 100%; background: var(--bg-light); }
.section-black { background: var(--bg-black); }
.section-dark { background: var(--bg-dark); }
.section-highlight { background: var(--highlight); }
.section-gray { background: var(--gray); }
.section-orange { background: var(--bg-orange); }

.center-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* allow children to fill */
  justify-content: flex-start;
  width: 100%;
}
.center-content { display: flex; justify-content: center; align-items: center; }
.left-content { display: flex; justify-content: flex-start; align-items: flex-start; }
.justify-left { text-align: left; }
.justify-right { text-align: right; }
.justify-center { text-align: center; }

.border { border: 4px groove var(--gray); }
.shadow-md { box-shadow: 0 8px 5px #999; }
.shadow-container { filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.5)); display: flex; width: 100%; height: 100%; }

.full-width {
  width: 100%;
}

/*------------------------------------
  Column Utilities (1–10 Columns)
------------------------------------*/
.col-1-1  { flex: 0 0 100%; max-width: 100%; }
.col-1-2  { flex: 0 0 48.0%; max-width: 48.0%; }
.col-1-3  { flex: 0 0 33.33%; max-width: 33.33%; }
.col-1-4  { flex: 0 0 25.0%; max-width: 25.0%; }
.col-1-5  { flex: 0 0 18.45%; max-width: 18.45%; }
.col-1-6  { flex: 0 0 16.66%; max-width: 16.66%; }
.col-1-7  { flex: 0 0 14.0%; max-width: 14.0%; }
.col-1-8  { flex: 0 0 12.5%; max-width: 12.5%; }
.col-1-9  { flex: 0 0 11.11%; max-width: 11.11%; }
.col-1-10 { flex: 0 0 10%; max-width: 10%; }


.text-small-12 { font-size: 12px; color: var(--text-dark); }
.text-blue-12-bold { font-size: 12px; color: var(--blue-accent); }
.text-blue-medium-bold { font-size: 14px; color: var(--blue-accent); }
.text-white-extra-small { font-size: 9px; color: var(--white-bright); }
.text-white-small-bold { font-size: 12px; font-weight: bold; color: var(--white-bright); }
.text-white-bold, .text-blue-bold, .text-gold-bold, .text-medium-bold { font-size: 16px; font-weight: bold; }
.text-white-bold { color: var(--white-bright); }
.text-blue-bold { color: var(--blue-accent); }
.text-gold-bold { color: var(--gold-accent); }
.text-blue-small-bold { font-size: 9px; font-weight: 500; color: var(--blue-accent); }
.text-light { font-size: 12px; font-weight: 100; color: var(--text-gray); }
.text-large-bold { font-size: 24px; font-weight: bold; color: var(--text-gray); }
.text-light-gray { font-size: 12px; font-weight: bold; color: #999999; }
.text-center { text-align: center; }

/* Enhanced Ticket Box Styles with Wrapping Text */
.ticket-box {
display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  padding: 2rem 2rem; /* Padding for left and right */
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--orange-accent);
  border: 1px solid #ddd;
  box-shadow: 0 8px 5px #999999;
  box-sizing: border-box;
  overflow-x: auto; /* Allow horizontal scrolling if content exceeds */
  overflow-y: hidden; /* Prevent vertical scrolling */
  white-space: normal; /* Allow text to wrap naturally */
  word-wrap: break-word; /* Ensure long words break on smaller screens */
  word-break: break-word; /* Force word breaks if too long */
}

.ticket-box-1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  padding: 2rem 2rem; /* Padding for left and right */
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--blue-accent);
  border: 1px solid #ddd;
  box-shadow: 0 8px 5px #999999;
  box-sizing: border-box;
  overflow-x: auto; /* Allow horizontal scrolling if content exceeds */
  overflow-y: hidden; /* Prevent vertical scrolling */
  white-space: normal; /* Allow text to wrap naturally */
  word-wrap: break-word; /* Ensure long words break on smaller screens */
  word-break: break-word; /* Force word breaks if too long */
}

.ticket-box-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100vw;
  padding: 2rem 2rem; /* Padding for left and right */
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gray-accent);
  border: 1px solid #ddd;
  box-shadow: 0 8px 5px #999999;
  box-sizing: border-box;
  overflow-x: auto; /* Allow horizontal scrolling if content exceeds */
  overflow-y: hidden; /* Prevent vertical scrolling */
  white-space: normal; /* Allow text to wrap naturally */
  word-wrap: break-word; /* Ensure long words break on smaller screens */
  word-break: break-word; /* Force word breaks if too long */
}

/* Adjusted Ticket Box 1 (Blue Background) */
.ticket-box-1 {
  background: var(--blue-accent);
}

/* Adjusted Ticket Box 2 (Highlight Background) */
.ticket-box-2 {
  background: var(--gray-accent);
}

/* Responsive Padding for Smaller Screens */
@media (max-width: 768px) {
  .ticket-box,
  .ticket-box-1,
  .ticket-box-2 {
    padding: 1rem 1rem; /* Reduced padding for smaller screens */
  }
}

@media (max-width: 480px) {
  .ticket-box,
  .ticket-box-1,
  .ticket-box-2 {
    padding: 0.5rem 0.5rem; /* Minimal padding for mobile screens */
    text-align: center; /* Text aligns left for better readability */
  }
}

.theater-card {
  flex: 1 1 22%;
  max-width: 22%;
  padding: 1rem;
  background: #fff;
  border: 2px solid #FFCC66;
  box-sizing: border-box;
}

.shadow-img, .buy-button, .box-shadow-img, img.show-image, img.buy-button-img, img.shadow-img {
  box-shadow: 0 8px 4px #999999;
  border: 0;
  width: 100%;
  margin-top: 8px;
}

.button-image, .buy-button-img {
  width: auto; /* or a fixed width like 80px if needed */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* Optional: center the image */
  box-shadow: 0 6px 4px #999999;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: none;
  flex-direction: column;
  background: #f8f8f8;
  position: absolute;
  gap: 1rem;
  top: 60px;
  right: 10px;
  list-style: none;
  border: 1px solid #ccc;
  padding: 1rem;
  z-index: 1000;
}

.menu-icon { display: block; }
.nav-links.show { display: flex; }

#scrollToTopButton {
  position: fixed;
  bottom: 30px;
  right: 20px;
  display: none;
  font-size: 18px;
  background-color: #fda83c;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 50px;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  z-index: 9999;
}
#scrollToTopButton:hover {
  background-color: #ffcc66;
  color: black;
}

.full-bleed {
  width: 100%;
  margin: 0 auto;
}
.section-header {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.full-width-container {
  width: 100%;
  max-width: 100vw;
  overflow: hidden; /* Ensures no overflow */
}

.full-width-image {
  width: 100%;
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes any default inline gap */
}

<!--BEGIN CONTAINER CSS FOR WIDGETS-->

/* Responsive Widget Container */
.responsive-widget-container{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;overflow:hidden;padding:0.5rem;background-color:#ffffff;box-sizing:border-box}
.widget-embed-wrapper{position:relative;width:100%;max-width:100%;height:0;padding-bottom:56.25%;overflow:hidden}
.widget-responsive{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.widget-responsive iframe,.widget-responsive div{width:100%;height:100%;max-width:100%;max-height:100%;border:none}
@media (max-width:768px){.widget-embed-wrapper{padding-bottom:75%}}
@media (max-width:480px){.widget-embed-wrapper{padding-bottom:100%}}
<!--END CONTAINER CSS FOR WIDGETS-->