/* Base styles - only apply to single story view */
body.single-story-view {
   min-height: 100vh;
   overflow-y: auto;
   position: relative;
   background: transparent !important;
   overflow-x: hidden;
 }
 
  /* Reset Archive Page Styles - more specific to archive pages */
  body.archive.post-type-archive-story .gtet-story,
  body.archive.post-type-archive-story .et_pb_section {
    width: auto !important;
    max-width: none !important;
    margin: inherit !important;
    padding: inherit !important;
  }
  
  /* Story Container */
  body.single-story-view .gtet-story.gtet-default-template-1 {
   min-height: 100vh;
   position: relative;
   z-index: 1;
   padding: 100px 2% 50px;
   margin: 0 auto;
   width: 100%;
   max-width: 1024px;
   box-sizing: border-box;
 }
 
 /* Background Layers */
 body.single-story-view .gtet-story-background,
 body.single-story-view .gtet-mode-background {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   width: 100vw !important;
   height: 100vh !important;
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
   z-index: -1 !important;
   opacity: 1 !important;
 }
 
 body.single-story-view .gtet-story-background {
   filter: blur(20px);
 }

/* Motion video blocks */
body.single-story-view .gtet-cover-video,
body.single-story-view .gtet-page-video {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto 20px;
}

body.single-story-view .gtet-motion-video {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: block;
}
 
/* Top Console */
body.single-story-view .gtet-top-console,
html body.single-story-view .gtet-top-console,
.gtet-top-console {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   width: 96% !important;
   max-width: 1024px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   transform: none !important;
   z-index: 99999 !important;
   
   /* Restore original styling properties */
   background-color: rgba(24, 23, 35, 0.75) !important;
   padding: 6px 20px !important;
   display: flex !important;
   flex-wrap: wrap !important;
   justify-content: space-between !important;
   align-items: center !important;
   min-height: 52px !important;
   box-sizing: border-box !important;
   border-radius: 0 0 14px 14px !important;
   margin-bottom: 0 !important;
}

/* Ensure this works across all browsers */
@supports (position: fixed) {
   body.single-story-view .gtet-top-console {
      position: fixed !important;
      transform: none !important;
      left: 0 !important;
      right: 0 !important;
   }
}

/* Mobile version still needs the transform for collapsing */
@media (max-width: 768px) {
   body.single-story-view .gtet-top-console:not(.expanded):not(.mobile-expanded) {
      transform: translateX(0) translateY(-100%) !important;
      right: auto !important;
   }
   
   body.single-story-view .gtet-top-console.expanded,
   body.single-story-view .gtet-top-console.mobile-expanded {
      transform: translateX(0) translateY(0) !important;
      right: auto !important;
   }
}

 /* Audio Player */
 body.single-story-view .gtet-audio-player {
   display: flex !important;
   flex-direction: row !important;
   align-items: flex-start !important;
   gap: 12px !important;
 }
 
 /* Button Styles */
 body.single-story-view .gtet-buttons {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 body.single-story-view .gtet-button,
 body.single-story-view .gtet-purple-button,
 body.single-story-view .gtet-pink-button,
 body.single-story-view .gtet-mode-button {
   font-size: 11px;
   font-weight: bold;
   color: white;
   text-decoration: none;
   border-radius: 4px;
   padding: 4px 18px;
   transition: background-color 0.3s ease;
   line-height: 1.2;
   height: auto;
   display: inline-block;
 }
 
 
 body.single-story-view .gtet-purple-button {
   background-color: #9c00ff;
 }
 
 
 body.single-story-view .gtet-purple-button:hover {
   background-color: #e800dc;
 }
 
 
 body.single-story-view .gtet-pink-button {
   background-color: #e800dc;
 }
 
 
 body.single-story-view .gtet-pink-button:hover {
   background-color: #9c00ff;
 }
 
 
 /* Mode Button Styles */
 body.single-story-view .gtet-mode-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
 }
 
 body.single-story-view .gtet-mode-button {
   font-size: 11px;
   font-weight: bold;
   color: white;
   text-decoration: none;
   border-radius: 4px;
   padding: 6px 18px;
   transition: background-color 0.3s ease;
   background-color: #e800dc;
 }
 
 
 body.single-story-view .gtet-mode-button:hover {
   background-color: #9c00ff;
 }
 
 
 body.single-story-view .gtet-mode-button.active {
   background-color: #7600c9;
   pointer-events: none;
 }
 
 
 /* Title Section */
 body.single-story-view .gtet-title-section {
   margin-top: 20px !important;
   width: 1024px !important;
   max-width: 1024px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   box-sizing: border-box;
   text-align: center !important;
 }
 
 
 body.single-story-view .gtet-story-title {
   color: white;
   font-size: 32px;
   line-height: 1.2;
   margin-bottom: 20px;
   text-align: center !important; /* Force center alignment */
 }
 
 
 body.single-story-view .gtet-story-moral {
   color: #ffffff;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   width: 85% !important;
   max-width: 976px !important;
   margin: 0 auto !important;
   padding: 10px 30px !important;
   text-align: center !important; /* Force center alignment */
 }
 
 
 /* Specific style for printable mode */
 body.single-story-view.story-mode-printable .gtet-story-moral {
   width: 90% !important;
   max-width: 800px !important;
   margin: 0 auto !important;
   padding: 0 40px !important;
 }
 
 
 /* Cover Image */
 body.single-story-view .gtet-cover-image {
   margin-top: 20px !important;
   margin-bottom: 160px !important;
   width: 96% !important;
   max-width: 924px !important;
   margin-left: auto !important;
   margin-right: auto !important;
 }
 
 
 body.single-story-view .gtet-cover-image img {
   width: 100% !important;
   height: auto !important;
   border-radius: 20px !important;
   display: block !important;
   opacity: 1 !important;
   box-shadow: 0px 0px 10px 7px rgba(12, 0, 41, 0.20) !important;
 }
 
 
 /* Story Pages */
 body.single-story-view .gtet-story-page {
   margin-top: 40px !important; /* Add space between pages */
   margin-bottom: 40px !important;
   width: 96% !important;
   max-width: 924px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   position: relative;
   left: 0;
   transform: none;
   transition: opacity 0.5s ease-in-out;
 }
 
 body.single-story-view .gtet-story-page .gtet-page-content {
   padding-left: 20px !important;
   padding-right: 20px !important;
   box-sizing: border-box !important;
}
 
 body.single-story-view .gtet-story-page.faded {
   opacity: 0;
   transform: translateY(20px);
 }
 
 
 body.single-story-view .gtet-story-page.visible {
   opacity: 1;
   transform: translateY(0);
 }
 
 
 /* Page Images */
 body.single-story-view .gtet-page-image {
   margin-bottom: 20px !important; /* Space between image and content */
   transition: opacity 0.5s ease-in-out;
   max-width: 1024px !important;
   margin-left: auto !important;
   margin-right: auto !important;
 }
 
 
 body.single-story-view .gtet-page-image.faded {
   opacity: 0;
 }
 
 
 body.single-story-view .gtet-page-image img {
   width: 100% !important;
   height: auto !important;
   border-radius: 20px !important;
   display: block !important;
   opacity: 1 !important;
   box-shadow: 0px 0px 10px 7px rgba(12, 0, 41, 0.20) !important;
 }
 
 
 /* Page Content */
body.single-story-view .gtet-page-content {
   /* Base styles */
   width: 100% !important;
   max-width: 1024px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   margin-top: 20px !important;
   margin-bottom: 40px !important;
   
   /* Padding and spacing */
   padding: 20px !important;
   box-sizing: border-box !important;
   
   /* Visual styles */
   background-color: rgba(255, 255, 255, 0.9) !important;
   border-radius: 14px !important;
   
   /* Typography */
   font-size: 16px !important;
   line-height: 1.6 !important;
   text-align: left !important;
   
   /* Transitions */
   transition: opacity 0.5s ease-in-out !important;
}

/* Ensure page media/content hit full opacity when the page is visible */
body.single-story-view:not(.story-mode-editable) .gtet-story-page .gtet-page-media,
body.single-story-view:not(.story-mode-editable) .gtet-story-page .gtet-page-content,
body.single-story-view:not(.story-mode-editable) .gtet-story-page .gtet-page-content-night-mode {
  transition: opacity 0.35s ease-in-out;
}

body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible .gtet-page-media,
body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible .gtet-page-content,
body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible .gtet-page-content-night-mode {
  opacity: 1 !important;
}

@media (max-width: 980px) {
  body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible,
  body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible .gtet-page-media,
  body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible .gtet-page-content,
  body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible .gtet-page-content-night-mode,
  body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible img,
  body.single-story-view:not(.story-mode-editable) .gtet-story-page.visible video {
    opacity: 1 !important;
  }
}

 
 body.single-story-view .gtet-page-content.faded {
   opacity: 0;
 }
 
 
 /* Night Mode Styles */
 body.single-story-view.story-mode-night {
   background-color: #323142;
 }
 
 
 body.single-story-view.story-mode-night .gtet-page-content-night-mode,
 body.single-story-view.story-mode-night .gtet-page-content {
   background-color: rgba(0, 0, 0, 0.6) !important;
   color: #bebcd6 !important;
   padding: 20px !important;
   border-radius: 14px !important;
   font-size: 16px !important;
   line-height: 1.6 !important;
   box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.4) !important;
 }
 
 
 /* Update night mode content to match title section style */
 body.single-story-view.story-mode-night .gtet-page-content {
   background-color: rgba(0, 0, 0, 0.6) !important;
   color: #bebcd6 !important;
   padding: 20px !important;
   border-radius: 14px !important;
   font-size: 16px !important;
   line-height: 1.6 !important;
   box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.4) !important;
 }
 
 
 /* Print Mode Styles */
 body.single-story-view.story-mode-printable .gtet-story-page-printable {
   width: 100% !important;
   max-width: 1024px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   position: relative !important;
   margin-bottom: 40px !important;
   opacity: 1 !important;
   transform: none !important;
   transition: none !important;
   text-align: center !important;  /* Center align the container */
 }
 
 
 body.single-story-view.story-mode-printable .gtet-page-image {
   width: 100% !important;
   max-width: 1024px !important;
   margin: 0 auto !important;
   padding: 20px !important;  /* Restore padding */
   text-align: center !important;
   display: block !important;
 }
 
 
 body.single-story-view.story-mode-printable .gtet-page-content {
   width: 100% !important;
   max-width: 800px !important;  /* Slightly narrower than container */
   margin: 0 auto !important;  /* Center the content block */
   padding: 20px 40px !important;
   text-align: left !important;
   display: block !important;
 }
 
 
 body.single-story-view.story-mode-printable .gtet-page-image img {
   display: block !important;
   width: 100% !important;
   max-width: 1024px !important;
   height: auto !important;
   margin: 0 auto !important;
   border-radius: 14px !important;
 }
 
 
 /* Error Message */
 body.single-story-view .gtet-error-message {
   background-color: rgba(255, 255, 255, 0.9);
   padding: 20px;
   border-radius: 14px;
   font-size: 16px;
   line-height: 1.6;
   text-align: center;
   margin: 40px auto;
   max-width: 800px;
 }
 
 
 /* Responsive Styles */
 @media (max-width: 768px) {
   body.single-story-view .gtet-top-console {
       flex-direction: column;
       align-items: stretch;
       height: auto;
       padding: 10px;
   }
  
   body.single-story-view .gtet-audio-player {
       flex-direction: column !important;
       width: 100%;
       margin-right: 0;
       margin-bottom: 10px;
       text-align: center;
   }
  
   body.single-story-view .gtet-mode-buttons {
       width: 100%;
       justify-content: center;
   }
  
   body.single-story-view .gtet-button {
       padding: 6px 10px;
       font-size: 10px;
       white-space: nowrap;
   }
  
   body.single-story-view .gtet-buttons {
       flex-wrap: wrap;
       justify-content: center;
   }
  
   body.single-story-view .gtet-title-section {
       margin-top: 0px;
   }
 }
 
 
 /* Print-specific styles */
 @media print {
    /* Reset all print margins */
    @page {
        margin: 0.5in;
    }
 
 
    /* Hide non-printable elements */
    body.single-story-view .gtet-top-console,
    body.single-story-view .gtet-mode-buttons,
    body.single-story-view .gtet-mode-background {
        display: none !important;
    }
 
 
    /* First page content (Title, Moral, and Cover) */
    body.single-story-view .gtet-title-section,
    body.single-story-view .gtet-cover-image {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important; /* Changed from 'always' to 'avoid' */
        margin: 0 auto 20px !important;
        padding: 20px 0 !important;
    }
 
 
    /* Force story pages to start on new pages */
    body.single-story-view .gtet-story-page-printable {
        display: block !important;
        page-break-before: always !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
        margin: 0 !important;
        padding: 20px 0 !important;
    }
 
 
    /* Keep image and content together in printable mode */
    body.single-story-view .gtet-story-page-printable .gtet-page-image,
    body.single-story-view .gtet-story-page-printable .gtet-page-content {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin: 20px 0 !important;
    }
 
 
    /* Ensure proper image sizing */
    body.single-story-view img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
 

    /* Remove backgrounds and decorative elements */
    body.single-story-view * {
        background: none !important;
        box-shadow: none !important;
        color: black !important;
    }
 }
 
 
 /* ===== Layout Fixes for Archive and Story Pages ===== */
 /* Reset Divi's scroll behavior on archive page */
 body:not(.single-story-view) #main-header {
   position: relative !important;
   width: 100% !important;
   left: 0 !important;
   transform: none !important;
 }
 
 
 /* Prevent content shift on archive page scroll */
 body:not(.single-story-view) .et-l--header {
   position: relative;
   width: 100%;
   z-index: 99999;
   left: 0;
   transform: none !important;
 }
 
 
 /* Reset archive page layout - Add more specific selectors */
 body:not(.single-story-view):not(.page-template-default) .et_pb_section {
   padding: 0 !important;
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   left: 0 !important;
   right: 0 !important;
   position: relative !important;
   transform: none !important;
 }
 
 
 /* Ensure archive page container stays full width - Add more specific selectors */
 body:not(.single-story-view):not(.page-template-default) #page-container,
 body:not(.single-story-view):not(.page-template-default) #main-content {
   width: 100% !important;
   max-width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   overflow-x: hidden !important;
 }
 
 
 /* Center story page content */
 body.single-story-view .gtet-story.gtet-default-template-1 {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 1024px;
   margin: 0;
   padding: 100px 2% 50px;
   box-sizing: border-box;
 }
 
 
 /* Ensure story sections stay centered */
 body.single-story-view .gtet-title-section,
 body.single-story-view .gtet-cover-image,
 body.single-story-view .gtet-story-page {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 1024px !important;
   max-width: 1024px !important;
   margin-left: 0;
   margin-right: 0;
   box-sizing: border-box;
 }
 
 
 /* Fix top console positioning */
 body.single-story-view .gtet-top-console {
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 96%;
   max-width: 1024px;
   z-index: 999999;
 }
 
 
 /* Update these selectors to be more specific */
 body.single-story-view .et_pb_section {
    transform: none !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 1024px !important;
    margin: 0 auto !important;
    padding: 0 2% !important;
 }
 
 
 /* Prevent horizontal scrolling - make specific to story view */
 body.single-story-view html,
 body.single-story-view body {
    overflow-x: hidden !important;
    max-width: 100vw;
 }
 
 
 /* Update header positioning for non-story pages */
 body.single-story-view #main-header {
    position: fixed !important;
    width: 100% !important;
 }
 
 
 /* Update container styles to be story-specific */
 body.single-story-view #page-container,
 body.single-story-view #main-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    overflow-x: hidden !important;
 }
 
 
 /* Make Divi overrides specific to story view */
 body.single-story-view #et-boc .et-l,
 body.single-story-view .et_builder_inner_content,
 body.single-story-view .et_pb_section,
 body.single-story-view .et_pb_row,
 body.single-story-view .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
 }
 
 
 /* Responsive fixes */
 @media (max-width: 980px) {
   /* Adjust mobile header */
   body:not(.single-story-view) #main-header {
       position: fixed !important;
       width: 100% !important;
   }
  
   /* Maintain content width on mobile */
   body.single-story-view .gtet-story.gtet-default-template-1,
   body.single-story-view .gtet-title-section,
   body.single-story-view .gtet-cover-image,
   body.single-story-view .gtet-story-page {
       width: 92%;
       padding-left: 4%;
       padding-right: 4%;
   }
 }
 
 
 @media (max-width: 1024px) {
   body.single-story-view .gtet-story,
   body.single-story-view .gtet-title-section,
   body.single-story-view .gtet-cover-image,
   body.single-story-view .gtet-story-page,
   body.single-story-view .gtet-page-content {
       width: 96% !important;
       max-width: 96% !important;
   }
 }
 
 
 /* Force correct stacking context */
 body.single-story-view {
   position: relative;
   z-index: 0;
 }
 
 
 body.single-story-view .gtet-story-background {
   z-index: -1;
 }
 
 
 /* Ensure proper margin for archive page content */
 body:not(.single-story-view) #main-content {
   padding-top: 0 !important; /* Changed from 80px */
 }
 
 
 /* Reset width and position for main containers */
 body.single-story-view .gtet-story.gtet-default-template-1,
 body.single-story-view .gtet-title-section,
 body.single-story-view .gtet-cover-image {
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0;
    transform: none;
    box-sizing: border-box;
 }
 
 
 /* Ensure proper width for title section */
 body.single-story-view .gtet-title-section {
    width: 96%;
    margin: 0px auto 10px;
 }
 
 
 /* Fix story page positioning and animation */
 body.single-story-view .gtet-story-page {
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 0;
    transform: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
 }
 
 
 body.single-story-view .gtet-story-page.visible {
    opacity: 1;
    transform: none;
 }
 
 
 body.single-story-view .gtet-story-page.faded {
    opacity: 0;
    transform: none;
 }
 
 
 /* Reset any transforms from Divi */
 body.single-story-view .et_pb_section,
 body.single-story-view .et_pb_row,
 body.single-story-view .et_pb_column {
    transform: none !important;
 }
 
 
 body.single-story-view .et_pb_text_0_tb_body {
   margin-right: 0 !important;
 }
 
 
 /* Override Divi's right alignment for the audio player */
 body.single-story-view .et_pb_module.et_pb_text_align_right {
   text-align: left !important;
 }
 
 
 body.single-story-view .et_pb_column.et_pb_column_4_4.et_pb_column_0_tb_body.et_pb_css_mix_blend_mode_passthrough {
   line-height: 0.8em !important;
 }
 
 
 /* Reduce size of Background Music text */
 body.single-story-view .gtet-audio-player {
   font-size: 12px !important;  /* Adjust this value as needed */
 }
 
 
 /* Center the column that contains our content */
 body.single-story-view .et_pb_column {
   width: 100% !important;
   max-width: none !important;
   margin: 0 auto !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
 }
 
 
 /* Ensure proper centering of story container */
 body.single-story-view .gtet-story {
   width: 1024px !important;
   max-width: 1024px !important;
   margin: 0 auto !important;
   padding: 100px 0 50px !important;
   position: relative;
   left: 0 !important;
   transform: none !important;
 }
 
 
 /* First, ensure Divi containers don't restrict width */
 body.single-story-view #et-boc .et-l,
 body.single-story-view .et_builder_inner_content,
 body.single-story-view .et_pb_section,
 body.single-story-view .et_pb_row,
 body.single-story-view .et_pb_column {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
 }
 
 
 /* Then set proper width for our story containers */
 body.single-story-view .gtet-story,
 body.single-story-view .gtet-title-section,
 body.single-story-view .gtet-cover-image,
 body.single-story-view .gtet-story-page,
 body.single-story-view .gtet-page-content {
    width: 1024px !important;
    max-width: 1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
 }
 
 
 body.single-story-view .gtet-title-section {
   padding: 20px !important;
   background-color: rgba(11, 10, 17, 0.75) !important;
   border-radius: 14px !important;
 }
 
 
 /* Ensure main containers don't restrict width */
 body.single-story-view #page-container,
 body.single-story-view #main-content {
   width: 100% !important;
   max-width: none !important;
   padding: 0 !important;
   overflow-x: hidden !important;
 }
 
 
 /* Base container styles */
 .gtet-story-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 20px;
 }
 
 
 /* Story Content Container */
 body.single-story-view .gtet-story {
    width: 96%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
    position: relative;
 }
 
 
 /* Responsive Breakpoints */
 @media screen and (max-width: 1024px) {
    body.single-story-view .gtet-top-console,
    body.single-story-view .gtet-story,
    body.single-story-view .gtet-title-section,
    body.single-story-view .gtet-cover-image,
    body.single-story-view .gtet-story-page,
    body.single-story-view .gtet-page-content {
        width: 92% !important;
        max-width: 92% !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    body.single-story-view .gtet-top-console {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 96% !important;
    }
 }
 
 
 @media screen and (max-width: 768px) {
    body.single-story-view .gtet-story-page,
    body.single-story-view .gtet-cover-image,
    body.single-story-view .gtet-page-content,
    body.single-story-view .gtet-title-section {
        width: 92% !important;
        max-width: 100% !important;
    }
 }
 
 
 @media screen and (max-width: 480px) {
    body.single-story-view .gtet-story-page,
    body.single-story-view .gtet-cover-image,
    body.single-story-view .gtet-page-content,
    body.single-story-view .gtet-title-section {
        width: 96% !important;
        max-width: 100% !important;
    }
 }
 
 
 /* Story Container Base */
 body.single-story-view .gtet-story.gtet-default-template-1 {
   width: 96% !important;
   max-width: 1024px !important;
   margin: 0 auto !important;
   padding: 0 !important;
   position: relative !important;
   box-sizing: border-box !important;
}


/* Ensure images don't overflow */
body.single-story-view img {
   max-width: 100% !important;
   height: auto !important;
}


/* Audio Player Styles - MediaElement.js */
body.single-story-view .mejs-container,
body.single-story-view .mejs-container .mejs-controls {
   width: 66% !important;
   min-width: 100px !important;
   height: 24px !important;
}


body.single-story-view .mejs-button,
body.single-story-view .mejs-button > button {
   width: 24px !important;
   height: 24px !important;
   transform: scale(0.66) !important;
   transform-origin: center center !important;
}


body.single-story-view .mejs-time {
   font-size: 11px !important;
   padding-top: 7px !important;
}


body.single-story-view .mejs-time-rail {
   height: 24px !important;
   padding-top: 7px !important;
}


/* Custom Audio Player Styles */
body.single-story-view .gtet-audio-player {
   display: flex !important;
   flex-direction: row !important;
   align-items: flex-start !important;
   gap: 12px !important;
}


body.single-story-view .audio-label {
   font-size: 12px !important;
   color: white !important;
   margin-bottom: 0px !important;
   padding-left: 2px !important; /* Align with player */
}


body.single-story-view .audio-player {
   display: flex !important;
   align-items: center !important;
   margin-left: -6px !important; /* Adjust this value to align with the "B" */
}


body.single-story-view .audio-player .play-pause {
   width: 30px !important;
   height: 20px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}


body.single-story-view .audio-player .volume-slider {
   display: flex !important;
   align-items: center !important;
}


/* Audio Player Icon Size */
body.single-story-view .mejs-button > button,
body.single-story-view .audio-player .play-pause button {
   background-size: 66% !important; /* Adjust this percentage to change icon size */
   background-position: center !important;
   background-repeat: no-repeat !important;
}

/* If the above doesn't work, try this alternative approach */
body.single-story-view .mejs-play > button,
body.single-story-view .mejs-pause > button {
   background-size: 66% auto !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
}


/* Direct button targeting */
body.single-story-view .audio-player button.play-pause {
   transform: scale(0.66) !important;
   transform-origin: center !important;
}


/* If using an icon or SVG inside the button */
body.single-story-view .audio-player button.play-pause svg,
body.single-story-view .audio-player button.play-pause i,
body.single-story-view .audio-player button.play-pause img {
   width: 66% !important;
   height: 66% !important;
}


/* Add these styles for AI Edit Mode */
body.single-story-view.story-mode-editable {
   background-color: #ffffff;
}


/* Remove background from title section in AI Edit Mode */
body.single-story-view.story-mode-editable .gtet-title-section {
   background-color: transparent !important;
   background: none !important;  /* Add this to override any background shorthand */
   box-shadow: none !important;  /* Add this to remove any shadow effects */
}


/* Ensure text is visible against white background */
body.single-story-view.story-mode-editable .gtet-title-section .gtet-story-title {
   color: #000000 !important;
   text-shadow: none !important;  /* Remove any text shadows */
}


body.single-story-view.story-mode-editable .gtet-title-section .gtet-story-moral {
   color: #333333 !important;
   text-shadow: none !important;  /* Remove any text shadows */
}


/* Remove animations for story pages in AI Edit Mode */
body.single-story-view.story-mode-editable .gtet-story-page {
   opacity: 1 !important;
   transform: none !important;
   transition: none !important;
}


body.single-story-view.story-mode-editable .gtet-story-page.faded,
body.single-story-view.story-mode-editable .gtet-story-page.visible {
   opacity: 1 !important;
   transform: none !important;
}


/* Remove any fade effects on page content and images in AI Edit Mode */
body.single-story-view.story-mode-editable .gtet-page-image,
body.single-story-view.story-mode-editable .gtet-page-content {
   opacity: 1 !important;
   transform: none !important;
   transition: none !important;
}


/* Editor Styles */
body.single-story-view.story-mode-editable .gtet-page-textarea {
   width: 100%;
   min-height: 200px;
   padding: 15px;
   margin-bottom: 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 16px;
   line-height: 1.6;
   resize: vertical;
}


body.single-story-view.story-mode-editable .gtet-editor-controls {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-top: 10px;
}


body.single-story-view.story-mode-editable .gtet-char-count {
   color: #666;
   font-size: 14px;
}


body.single-story-view.story-mode-editable .gtet-save-button {
   padding: 8px 20px;
   background-color: #9c00ff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}


body.single-story-view.story-mode-editable .gtet-save-button:hover:not(:disabled) {
   background-color: #e800dc;
}


body.single-story-view.story-mode-editable .gtet-save-button:disabled {
   background-color: #ccc;
   cursor: not-allowed;
}


body.single-story-view.story-mode-editable .gtet-save-status {
   font-size: 14px;
}


body.single-story-view.story-mode-editable .gtet-save-status .saving {
   color: #666;
}


body.single-story-view.story-mode-editable .gtet-save-status .success {
   color: #28a745;
}


body.single-story-view.story-mode-editable .gtet-save-status .error {
   color: #dc3545;
}


/* Add these styles for title and moral editors */
body.single-story-view.story-mode-editable .gtet-title-textarea {
   width: 100%;
   min-height: 50px;
   padding: 10px;
   margin: 10px 0;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 24px;
   line-height: 1.4;
   resize: vertical;
}


body.single-story-view.story-mode-editable .gtet-moral-textarea {
   width: 100%;
   min-height: 100px;
   padding: 10px;
   margin: 10px 0;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 16px;
   line-height: 1.6;
   resize: vertical;
}


body.single-story-view.story-mode-editable .gtet-title-editor,
body.single-story-view.story-mode-editable .gtet-moral-editor {
   margin: 0px 0;
}


/* Update title input styles */
body.single-story-view.story-mode-editable .gtet-title-input {
   width: 100%;
   height: 40px;
   padding: 8px 10px;
   margin: 10px 0;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 24px;
   line-height: 1.4;
}


/* Welcome Message */
.gtet-welcome-message {
   background-color: #acf0ff;
   border-radius: 8px;
   padding: 20px;
   margin-bottom: 0px;
   margin-top: 20px !important;
   width: 100%;
   max-width: 1024px;
   margin-left: auto;
   margin-right: auto;
}


.gtet-welcome-message p {
   font-size: 16px;
   line-height: 1.6;
   color: #333;
   margin: 0;
}


/* Audio Selection Section */
.gtet-audio-selection {
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
   margin-bottom: 30px;
   width: 100%;
   max-width: 1024px;
   margin-left: auto;
   margin-right: auto;
}


.gtet-audio-selection h3 {
   margin-top: 0;
   margin-bottom: 20px;
   color: #333;
}


.gtet-audio-controls {
   display: flex;
   gap: 20px;
   align-items: flex-end;
}


.gtet-audio-type,
.gtet-audio-vibe {
   flex: 1;
}


.gtet-audio-type label,
.gtet-audio-vibe label {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
}


.gtet-audio-type select,
.gtet-audio-vibe select {
   width: 100%;
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 14px;
}


.gtet-audio-type select:disabled,
.gtet-audio-vibe select:disabled {
   background-color: #f5f5f5;
   cursor: not-allowed;
}


/* Ensure proper spacing in mobile view */
@media screen and (max-width: 768px) {
   .gtet-welcome-message {
       margin-top: 200px; /* Increase top margin for mobile */
   }
}


@media screen and (max-width: 480px) {
   .gtet-welcome-message {
       margin-top: 220px; /* Further increase for smaller screens */
   }
}


/* Responsive adjustments */
@media screen and (max-width: 1024px) {
   .gtet-welcome-message,
   .gtet-audio-selection {
       width: 92%;
   }
}


@media screen and (max-width: 768px) {
   .gtet-welcome-message {
       margin-top: 160px;
   }
}


@media screen and (max-width: 480px) {
   .gtet-welcome-message {
       margin-top: 200px;
   }
}


/* Button States */
.gtet-save-button {
   padding: 8px 16px;
   border-radius: 4px;
   border: none;
   background-color: #b3b3b3; /* Gray when disabled */
   color: #ffffff;
   cursor: not-allowed;
   transition: all 0.3s ease;
}


.gtet-save-button:not(:disabled) {
   background-color: #8300e9; /* Purple when enabled */
   cursor: pointer;
}


.gtet-save-button:not(:disabled):hover {
   background-color: #6a00bb;
}


/* Adjust margin only for AI Edit Mode */
body.single-story-view.story-mode-editable .gtet-title-section {
   margin-top: 0px;
}


/* Keep original margin for other modes */
body.single-story-view:not(.story-mode-editable) .gtet-title-section {
   margin-top: 60px;
}


/* Image Controls Container */
body.single-story-view .gtet-image-controls {
   margin: 20px auto !important;
   padding: 20px !important;
   background: #ffffff !important;
   border: 1px solid #ddd !important;
   border-radius: 8px !important;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
   max-width: 90% !important;
}


/* Version Button Container */
body.single-story-view .gtet-image-versions {
   display: flex !important;
   gap: 15px !important;
   margin-bottom: 20px !important;
   justify-content: center !important;
   padding-bottom: 15px !important;
   border-bottom: 1px solid #eee !important;
}


/* Version Buttons - Clean Implementation */
/* Base button styles */
body.single-story-view .version-btn {
    min-width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    
    /* Default state for all buttons is disabled */
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    color: #999 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Version 1 button is always active */
body.single-story-view .version-btn[data-version="1"] {
    opacity: 1 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    color: #333 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Active versions (those without disabled attribute) */
body.single-story-view .version-btn:not([disabled]) {
    opacity: 1 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    color: #333 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Selected version gets special styling */
body.single-story-view .version-btn.selected {
    background: #8300e9 !important;
    color: white !important;
    border-color: #8300e9 !important;
    box-shadow: 0 2px 4px rgba(131,0,233,0.2) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Hover state for active buttons only */
body.single-story-view .version-btn:not([disabled]):not(.selected):hover {
    border-color: #8300e9 !important;
    color: #8300e9 !important;
    background: #f9f0ff !important;
}

/* If an earlier version is disabled, disable all following versions */
body.single-story-view .version-btn[disabled] ~ .version-btn {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    color: #999 !important;
    border-color: #ddd !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Add styles for regeneration status indicator */
body.single-story-view .gtet-image-controls .regenerating-indicator {
   display: flex;
   align-items: center;
   margin-top: 10px;
   padding: 8px 12px;
   background: #fff3cd !important;
   border: 1px solid #ffeeba !important;
   border-radius: 4px !important;
   color: #856404 !important;
   font-size: 0.9em !important;
}

body.single-story-view .gtet-image-controls .regenerating-indicator .spinner {
   display: inline-block;
   width: 16px;
   height: 16px;
   margin-right: 8px;
   border: 2px solid rgba(131,0,233,0.2);
   border-radius: 50%;
   border-top-color: #8300e9;
   animation: gtet-spin 1s linear infinite;
}

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

/* Add this to existing image loader for better visibility across refreshes */
.gtet-image-loader-overlay.persistent {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 999;
}

/* Force title section margin with extra specificity */
html body.single-story-view .gtet-title-section,
html body.single-story-view.story-mode-view .gtet-title-section {
  margin-top: 20px !important;
}

/* Target specifically buttons without generations - this is the only part we want to keep */
body.single-story-view .version-btn.no-gen,
body.single-story-view .version-btn[data-has-gen="false"] {
   opacity: 0.5 !important;
   cursor: not-allowed !important;
   background: #f0f0f0 !important;
   border-color: #ddd !important;
   color: #999 !important;
   box-shadow: none !important;
   pointer-events: none !important;
}

/* Add styles specifically for buttons with the disabled attribute or disabled class */
body.single-story-view .version-btn[disabled],
body.single-story-view .version-btn.disabled {
   opacity: 0.5 !important;
   cursor: not-allowed !important;
   background: #f0f0f0 !important;
   border-color: #ddd !important;
   color: #999 !important;
   box-shadow: none !important;
   pointer-events: none !important;
}

/* Reset any disabled styles for all non-selected buttons first */
body.single-story-view button.version-btn:not(.selected) {
    /* Clear out disabling properties */
    opacity: 1 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border-color: #ddd !important;
    color: #333 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Restore hover effects for non-selected buttons */
body.single-story-view button.version-btn:not(.selected):hover {
   border-color: #8300e9 !important;
   color: #8300e9 !important;
   background: #f9f0ff !important;
}

/* Specifically target version buttons after button 2 when button 2 is selected */
body.single-story-view .version-btn.selected[data-version="2"] ~ .version-btn {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #999 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Specifically target version buttons after button 1 when button 1 is selected */
body.single-story-view .version-btn.selected[data-version="1"] ~ .version-btn:not([data-version="2"]) {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #999 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Simplify: Make all versions 2-4 disabled by default */ 
body.single-story-view .version-btn[data-version="2"],
body.single-story-view .version-btn[data-version="3"], 
body.single-story-view .version-btn[data-version="4"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #999 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Then explicitly enable only the buttons that have the disabled attribute removed */
body.single-story-view .version-btn:not([disabled])[data-version="2"],
body.single-story-view .version-btn:not([disabled])[data-version="3"],
body.single-story-view .version-btn:not([disabled])[data-version="4"] {
    opacity: 1 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    border-color: #ddd !important;
    color: #333 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* And restore hover effects for these buttons */
body.single-story-view .version-btn:not([disabled])[data-version="2"]:hover,
body.single-story-view .version-btn:not([disabled])[data-version="3"]:hover,
body.single-story-view .version-btn:not([disabled])[data-version="4"]:hover {
   border-color: #8300e9 !important;
   color: #8300e9 !important;
   background: #f9f0ff !important;
}

/* CLEAN SOLUTION - START FRESH */
/* First, clean up conflicting styles by removing the reset */
body.single-story-view button.version-btn {
    min-width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
    
    /* Default state for all buttons is disabled */
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    color: #999 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Version 1 button is always active */
body.single-story-view button.version-btn[data-version="1"] {
    opacity: 1 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    color: #333 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Active versions (those without disabled attribute) */
body.single-story-view button.version-btn:not([disabled]) {
    opacity: 1 !important;
    cursor: pointer !important;
    background: #ffffff !important;
    color: #333 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

/* Selected version gets special styling */
body.single-story-view button.version-btn.selected {
    background: #8300e9 !important;
    color: white !important;
    border-color: #8300e9 !important;
    box-shadow: 0 2px 4px rgba(131,0,233,0.2) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Hover state for active buttons only */
body.single-story-view button.version-btn:not([disabled]):not(.selected):hover {
    border-color: #8300e9 !important;
    color: #8300e9 !important;
    background: #f9f0ff !important;
}

/* If an earlier version is disabled, disable all following versions */
body.single-story-view button.version-btn[disabled] ~ .version-btn {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f0f0f0 !important;
    color: #999 !important;
    border-color: #ddd !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Regenerate Button */
body.single-story-view .regenerate-btn {
   width: 100% !important;
   padding: 12px 20px !important;
   background: #8300e9 !important;
   color: white !important;
   border: none !important;
   border-radius: 6px !important;
   cursor: pointer !important;
   font-weight: 500 !important;
   font-size: 14px !important;
   transition: all 0.2s ease !important;
   margin-top: 15px !important;
   margin-bottom: 5px !important;
}


body.single-story-view .regenerate-btn:hover:not([disabled]) {
   background: #6a00bc !important;
   box-shadow: 0 2px 4px rgba(131,0,233,0.2) !important;
}


/* Generations Left Counter */
body.single-story-view .generations-left {
   font-size: 0.9em !important;
   opacity: 0.8 !important;
   margin-left: 8px !important;
}


/* Generation Status Message */
body.single-story-view .generation-status {
   margin-top: 10px !important;
   padding: 8px !important;
   background: #fff3cd !important;
   border: 1px solid #ffeeba !important;
   border-radius: 4px !important;
   color: #856404 !important;
   text-align: center !important;
   font-size: 0.9em !important;
}

/* Version Navigation Buttons */
body.single-story-view .version-navigation {
   display: flex !important;
   justify-content: space-between !important;
   margin-top: 15px !important;
   margin-bottom: 5px !important;
   gap: 10px !important;
}

body.single-story-view .version-nav-btn {
   flex: 1 !important;
   padding: 8px 12px !important;
   background: #f5f5f5 !important;
   color: #333 !important;
   border: 1px solid #ddd !important;
   border-radius: 4px !important;
   cursor: pointer !important;
   font-weight: 500 !important;
   font-size: 13px !important;
   transition: all 0.2s ease !important;
   text-align: center !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 5px !important;
}

body.single-story-view .version-nav-btn:hover:not([disabled]) {
   background: #e9e9e9 !important;
   border-color: #ccc !important;
}

body.single-story-view .version-nav-btn[disabled] {
   opacity: 0.5 !important;
   cursor: not-allowed !important;
   background: #f0f0f0 !important;
   color: #999 !important;
   border-color: #ddd !important;
   box-shadow: none !important;
   pointer-events: none !important;
}

body.single-story-view .version-nav-btn.next-version {
   background: #f0f0ff !important;
   border-color: #d0d0ff !important;
   color: #5000b9 !important;
}

body.single-story-view .version-nav-btn.next-version:hover:not([disabled]) {
   background: #e5e5ff !important;
   border-color: #c0c0ff !important;
}

body.single-story-view .version-nav-btn.regenerate-next {
   background: #f4e6ff !important;
   border-color: #e5ccff !important;
   color: #8300e9 !important;
}

body.single-story-view .version-nav-btn.regenerate-next:hover:not([disabled]) {
   background: #ead6ff !important;
   border-color: #d5b8ff !important;
}

/* Prevent the prev/next version buttons from showing in the cover/regenerate prompt overlay */
body.single-story-view .gtet-regen-prompt-overlay .version-navigation {
   display: none !important;
}

/* Read to Me player icon sizing */
body.single-story-view .gtet-read-to-me-player .rtm-btn img {
    width: 20px;
    height: 20px;
}

.bgm-console, .gtet-read-to-me-player {
    flex: 1 1 180px;
}

/* Regenerate Button */
.regenerate-btn {
    background-color: #673ab7;  /* Purple color */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.regenerate-btn:hover {
    background-color: #5e35b1;  /* Slightly darker on hover */
}

.regenerate-btn.disabled,
.regenerate-btn:disabled {
    background-color: #9e9e9e;  /* Gray color when disabled */
    color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Regeneration indicator styles */
.regenerating-indicator {
    display: flex;
    align-items: center;
    margin-top: 8px;
    color: #673ab7;
}

/* Fix Audio Player Background and Volume Controls */
.bgm-console, .gtet-read-to-me-player {
  background: transparent !important;
  width: auto !important;
  max-width: 200px !important;
  margin-right: 10px !important;
}

.audio-volume-control {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 5px !important;
  gap: 8px !important;
  position: relative !important;
}

.audio-volume-control:before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 24px !important; /* Allow space for icon */
  right: 0 !important;
  height: 6px !important;
  background: white !important; /* Solid white background */
  border-radius: 3px !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9) !important; /* Strong glow */
  pointer-events: none !important; /* Allow clicks to pass through */
}

.volume-slider {
  flex: 1 !important;
  height: 24px !important;
  background: transparent !important;
  max-width: 150px !important;
  position: relative !important;
  z-index: 1 !important;
}

.volume-slider input[type="range"] {
  width: 100% !important;
  -webkit-appearance: none !important;
  background: white !important; /* Solid white background */
  border-radius: 3px !important;
  height: 6px !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important; /* Add glow effect */
}

/* More visible track styles */
.volume-slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  background: white !important; /* Solid white background */
  border-radius: 3px !important;
  border: none !important;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important; /* Add glow effect */
}

.volume-slider input[type="range"]::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  background: white !important; /* Solid white background */
  border-radius: 3px !important;
  border: none !important;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important; /* Add glow effect */
}

.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  background: white !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  margin-top: -4.5px !important; /* Centers the thumb on the track */
  border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Subtle border */
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5) !important; /* Subtle glow */
}

/* Mobile-specific audio player styles */
@media (max-width: 768px) {
  body.single-story-view .gtet-audio-player {
    background: transparent !important;
    width: auto !important;
    margin-right: 0 !important;
  }
  
  .bgm-console, .gtet-read-to-me-player {
    background: transparent !important;
    width: auto !important;
    max-width: 200px !important;
  }
  
  body.single-story-view .audio-volume-control {
    margin: 5px auto !important;
    width: auto !important;
    max-width: 180px !important;
  }
}

/* Direct targeting for the actual slider input with highest specificity */
html body.single-story-view input.volume-slider[type="range"],
body.single-story-view input.volume-slider[type="range"],
input.volume-slider[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: white !important;
  border-radius: 3px !important;
  height: 6px !important;
  width: 100% !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 0 5px rgba(255, 255, 255, 1) !important;
  opacity: 1 !important;
  z-index: 10 !important;
  position: relative !important;
}

@media screen and (max-width: 768px) {
   body.single-story-view .gtet-story-page,
   body.single-story-view .gtet-cover-image,
   body.single-story-view .gtet-page-content,
   body.single-story-view .gtet-title-section {
       width: 92% !important;
       max-width: 100% !important;
   }
   
   body.single-story-view .gtet-story-page {
       margin-top: 30px !important; /* Slightly reduced spacing on tablet */
       margin-bottom: 30px !important;
   }
  
   body.single-story-view .gtet-page-image {
       margin-bottom: 15px !important;
   }
 }

@media screen and (max-width: 768px) {
   .gtet-story-container {
       padding-top: 10px;
   }

   body.single-story-view .gtet-title-section {
       margin-top: 0px !important; /* Reduced from 160px */
   }
  
   body.single-story-view .gtet-cover-image {
       margin-top: 20px !important; /* Maintain consistent spacing */
   }
  
   body.single-story-view .gtet-top-console {
       padding: 10px 15px;
   }
  
   body.single-story-view .gtet-audio-player {
       width: 100%;
       margin-right: 0;
       margin-bottom: 10px;
       text-align: center;
   }
  
   body.single-story-view .gtet-buttons {
       width: 100%;
       justify-content: center;
       gap: 10px;
   }
 }

@media screen and (max-width: 480px) {
   .gtet-story-container {
       padding-top: 5px;
   }

   body.single-story-view .gtet-title-section {
       margin-top: 60px !important; /* Reduced from 200px */
   }
  
   body.single-story-view .gtet-cover-image {
       margin-top: 20px !important; /* Keep consistent spacing */
   }
  
   body.single-story-view .gtet-top-console {
       padding: 8px 12px;
   }
 }

/* Story Content Sections - Restore responsiveness */
body.single-story-view .gtet-story-page,
body.single-story-view .gtet-cover-image,
body.single-story-view .gtet-page-content,
body.single-story-view .gtet-title-section {
   width: 100% !important;
   max-width: 1024px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   box-sizing: border-box !important;
   left: auto !important;
   right: auto !important;
   transform: none !important;
}

/* Fix for right-shifted content while maintaining responsiveness */
body.single-story-view .et_pb_section,
body.single-story-view .et_pb_row,
body.single-story-view .et_pb_column,
body.single-story-view .et_pb_module,
body.single-story-view .et-l--body,
body.single-story-view .et-l--header,
body.single-story-view .et-l--footer,
body.single-story-view #et-boc,
body.single-story-view .et_builder_inner_content,
body.single-story-view .container,
body.single-story-view .et_pb_row_inner,
body.single-story-view .et_pb_with_background,
body.single-story-view .gtet-story-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: 100% !important;
}

body.single-story-view {
    overflow-x: hidden;
}

/* Fix for page-container */
body.single-story-view #page-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* Cover Image Responsiveness */
body.single-story-view .gtet-cover-image img,
body.single-story-view .gtet-page-image img {
   width: 100% !important;
   height: auto !important;
   border-radius: 14px !important;
   display: block !important;
}

/* Page Content Responsiveness */
body.single-story-view .gtet-page-content,
body.single-story-view .gtet-page-content-night-mode {
   padding: 20px !important;
   border-radius: 14px !important;
   margin-top: 20px !important;
   width: 100% !important;
}

/* Preserve mobile spacing */
@media screen and (max-width: 480px) {
   body.single-story-view .gtet-story-page {
       margin-top: 25px !important; /* Further reduced spacing on mobile */
       margin-bottom: 25px !important;
   }
  
   body.single-story-view .gtet-page-image {
       margin-bottom: 15px !important;
   }
}

/* Increase margin-top for Main View title section */
html body.single-story-view .gtet-title-section,
html body.single-story-view.story-mode-view .gtet-title-section {
  margin-top: 20px !important;
}

/* Increase margin-top for AI Edit Mode welcome message */
html body.single-story-view.story-mode-editable .gtet-welcome-message,
html body.single-story-view.story-mode-editable div.gtet-welcome-message,
html body.story-mode-editable div.gtet-welcome-message,
body.single-story-view.story-mode-editable .gtet-welcome-message,
.gtet-story-container .gtet-welcome-message,
div.gtet-welcome-message,
.gtet-welcome-message {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Increase margin-top for Print Mode and Night Mode title section */
.gtet-title-section,
html body .gtet-title-section,
html body.single-story-view .gtet-title-section {
  margin-top: 20px !important;
}

/* AI Edit Mode - Welcome Message Margin Fix */
html body.single-story-view.story-mode-editable .gtet-welcome-message,
html body.single-story-view.story-mode-editable div.gtet-welcome-message,
html body.story-mode-editable div.gtet-welcome-message,
body.single-story-view.story-mode-editable .gtet-welcome-message,
.gtet-story-container .gtet-welcome-message,
.gtet-welcome-message {
  margin-top: 0px !important;
}

/* Print Mode - Title Section Margin Fix */
html body.single-story-view.story-mode-printable .gtet-title-section,
body.single-story-view.story-mode-printable .gtet-title-section,
body.story-mode-printable .gtet-title-section {
    margin-top: 20px !important;
}

/* Night Mode - Title Section Margin Fix */
html body.single-story-view.story-mode-night .gtet-title-section,
body.single-story-view.story-mode-night .gtet-title-section,
body.story-mode-night .gtet-title-section {
    margin-top: 20px !important;
}

/* FINAL OVERRIDES - These rules take absolute precedence */
html body.single-story-view.story-mode-editable #page-container .gtet-welcome-message,
html body.single-story-view.story-mode-editable .et-l .et_builder_inner_content .gtet-welcome-message,
html body.single-story-view.story-mode-editable .gtet-story-container .gtet-welcome-message,
html body.single-story-view.story-mode-editable .gtet-welcome-message {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    border-top: none !important;
    padding-top: 20px !important;
}

/* Responsive Image Styles */
.responsive-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Ensure image containers are responsive */
.gtet-cover-image,
.gtet-page-image {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .gtet-cover-image,
    .gtet-page-image {
        max-width: 100%;
    }
    
    /* Optimize padding for mobile */
    .gtet-story-page,
    .gtet-story-page-container,
    .gtet-cover-container {
        padding: 10px !important;
    }
}

/* Story Footer */
body.single-story-view .gtet-story-footer {
    width: 100%;
    max-width: 1024px;
    margin: 50px auto 30px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

/* Default gray text for most modes */
body.single-story-view .gtet-story-footer-text {
    font-size: 14px;
    color: #888888;
    margin-bottom: 10px;
    font-style: italic;
}

/* White text specifically for main view mode */
body.single-story-view.story-mode-view .gtet-story-footer-text,
body.single-story-view:not(.story-mode-night):not(.story-mode-printable):not(.story-mode-editable) .gtet-story-footer-text {
    color: #ffffff;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

body.single-story-view .gtet-story-footer-logo {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Print-specific footer styles */
@media print {
    body.single-story-view .gtet-story-footer {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-top: 30px !important;
    }
}

/* Responsive adjustments for footer */
@media screen and (max-width: 768px) {
    body.single-story-view .gtet-story-footer {
        margin-top: 40px;
    }
    
    body.single-story-view .gtet-story-footer-logo {
        max-width: 150px;
    }
}