#main.quest.tryout{
  padding: 10px;
  height: 85vh;
  /* overflow: hidden; */
}

#main.quest.tryout .quest-tab {
  gap: 15px;
  margin: 0 !important;
}

#main.quest.tryout #content-top.sticky{
  width: 100%;
  height: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  background-color: white;
  gap: 10px;
  margin-bottom: 20px;
}

#main.quest.tryout p.timer-capt{
  margin: 0 !important;
}

#main.quest.tryout .padding-for-answer-sheet{
  padding-bottom: 0px;
}

#bunpo-tab {
  background-color: #EFEFEF;
  color: #474544;
  border-color: #EFEFEF;
  display: block;
  padding: 0px 0px;
  height: 42px;
  line-height: 38px;
  max-width: 240px;
  border-radius: 21px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0px 2px 3px #00000029;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.03, 1.01);
}

#bunpo-tab:hover{
  color: white;
}

#dokkai-tab {
  background-color: #EFEFEF;
  color: #474544;
  border-color: #EFEFEF;
  display: block;
  padding: 0px 0px;
  height: 42px;
  line-height: 38px;
  max-width: 240px;
  border-radius: 21px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0px 2px 3px #00000029;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.03, 1.01);
}

#dokkai-tab:hover {
  color: white;
}

/* --- CORRECTED STYLES FOR SIDEBAR INTERACTION --- */

/* This section fixes the positioning of the fixed "Lembar Jawaban" button 
  and the pop-up answer sheet to work correctly with the collapsible sidebar. 
*/

  #main.quest.tryout .questions-column .tab-content {
    border-radius: 15px;
    box-shadow: 0px 3px 6px #00000029;
  } 
/* == Lembar Jawaban Button Styling == */
#main.quest.tryout .answer-btn {
  display: block;
  padding: 0px 0px;
  height: 42px;
  line-height: 38px;
  max-width: 240px;
  border-radius: 21px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0px 2px 3px #00000029;
  position: fixed;
  bottom: 100px;
  z-index: 0;
  margin-top: 0;
  /* Add transition to match sidebar animation */
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default state (sidebar expanded) - Center the button in the content area */
#main.quest.tryout .answer-btn {
    left: calc(var(--sidebar-width) + (100% - var(--sidebar-width)) / 2);
    transform: translateX(-50%);
}

/* Collapsed sidebar state - Recenter the button in the new content area */
html.sidebar-collapsed #main.quest.tryout .answer-btn {
    left: calc(var(--sidebar-collapsed-width) + (100% - var(--sidebar-collapsed-width)) / 2);
}

#submit.link-btn {
  display: block;
  padding: 0px 0px;
  width: 100%;
  border-radius: 21px;
  font-weight: bold;
  text-decoration: none;
}

#main.quest.tryout {
    padding-bottom: 50px;
  }

#main.quest.tryout .answer-sheets .container {
  z-index: 999 !important;
  max-width: 700px;
}

#main.quest.tryout .quest-collapse .collapse-section h2.accordion-header button.accordion-button{
  border-radius: 15px 15px 0px 0px !important;
}

#main.quest.tryout .quest-collapse .collapse-section h2.accordion-header button.accordion-button .collapse-icon i {
  color: #F8D8DE;
  font-size: 12px;
  
}

#main.quest.tryout .main-content-area h1, .main-content-area h2, .main-content-area h3 {
  margin-bottom: 0;
}

#main.register {
  margin-top: 0;
  min-height: fit-content;
  padding-top: 0;
}

#main.register .container {
  max-width: 720px;
}

#ready {
  display: none;
}

#main.register .main-card__btn a {
  padding: 0;
  justify-content: center;
  border-radius: 100px;
}

#main.register .main-card__btn a#ready {
  background: #7f1d07;
  color: #EFEFEF;
  border: 1px solid #7f1d07;
}

#main.register .main-card__btn a#ready:hover {
  background: #6b1906;
  color: #FFFFFF;
}

#main.register .main-card__btn a#prepare {
  background: #FFFFFF;
  color: #7f1d07;
  border: 1px solid #7f1d07;
}

#main.register .main-card__btn a#prepare:hover {
  background: #7f1d07;
  color: #EFEFEF;
}

/* --- Custom SweetAlert2 Styles --- */
.custom-swal-popup {
    border-radius: 15px !important;
    border: 2px solid #7f1d07;
    background-color: #fdf8f7 !important;
}
.custom-swal-title {
    color: #7f1d07 !important;
    font-weight: 600 !important;
}
.custom-swal-text {
    color: #444 !important;
}
.btn-custom-confirm {
    background-color: #7f1d07 !important;
    color: white !important;
    border-radius: 100px !important;
    border: 1px solid #7f1d07 !important;
    padding: 8px 24px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
.btn-custom-confirm:hover {
    background-color: #6b1906 !important;
    border-color: #6b1906 !important;
}
.btn-custom-cancel {
    background-color: transparent !important;
    color: #7f1d07 !important;
    border: 1px solid #7f1d07 !important;
    border-radius: 100px !important;
    padding: 8px 24px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}
.btn-custom-cancel:hover {
    background-color: #f8e8e5 !important;
}

.accordion-button:focus {
  z-index: 0;
}

.accordion-button:hover {
  z-index: 0;
}

#main.register .card-wrapper.tryoutSection {
  max-width: none;
}

#main.register .container {
  padding-left: 26px;
  padding-right: 26px;
}

/* MOBILE OVERLAY FIX (<= 768px)
  On true mobile screens where the sidebar is an overlay (it doesn't push content),
  we reset the fixed elements to be centered on the whole screen.
  The sidebar on mobile is an overlay that doesn't affect content positioning.
*/
@media (max-width: 768px) {
  /* On mobile, always center the button relative to the viewport regardless of sidebar state */
  #main.quest.tryout .answer-btn {
      left: 50% !important;
      transform: translateX(-50%) !important;
  }

  #main.quest {
    /* padding-bottom: 125px; */
  }

  /* On mobile, always make the sheet full-width relative to the viewport regardless of sidebar state */
  #main.quest.tryout .answer-sheets {
      left: 0 !important;
      width: 100% !important;
  }
  
  /* Override any sidebar-collapsed specific rules for mobile */
  html.sidebar-collapsed #main.quest .answer-btn {
      left: 50% !important;
      transform: translateX(-50%) !important;
  }

  html.sidebar-collapsed #main.quest .answer-sheets {
      left: 0 !important;
      width: 100% !important;
  }
}


/* Further mobile adjustments for button position */
@media (max-width: 680px) {
  #main.quest.tryout .answer-btn {
    bottom: 50px !important;
  }
}

@media (max-width: 480px) {
  #main.quest.tryout .answer-btn {
    bottom: 40px !important;
  } 
}

/* == Answer Sheet Styling == */
#main.quest.tryout .answer-sheets {
  position: fixed;
  bottom: -422px;
  z-index: 97;
  /* Add transitions for smooth animation */
  transition: bottom 0.7s cubic-bezier(0.93, -0.37, 0.1, 1.42), left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default state (sidebar expanded) - Position sheet within content area */
#main.quest.tryout .answer-sheets {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

/* Collapsed sidebar state - Reposition sheet */
html.sidebar-collapsed #main.quest.tryout .answer-sheets {
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

#main.quest.tryout .answer-sheets._show {
  bottom: -80px;
}

/* Desktop Grid Layout for All Tryout Sessions */
/* This CSS creates a 2-column layout for desktop screens */
/* Questions on the left, Answer sheet permanently visible on the right */

/* Desktop Layout - Only applies to screens 992px and above */
@media (min-width: 992px) {

  /* Main container modifications for desktop grid */
  #main.quest.tryout {
    display: flex;
    flex-direction: column;
    /* height: 100vh; */
    overflow: visible;
  }
  
  /* Header area (timer, tabs) stays at top */
  #main.quest.tryout .content-top {
    flex-shrink: 0;
    padding-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  
  /* Create the main grid container */
  #main.quest.tryout .desktop-grid-container {
    display: flex;
    flex: 1;
    height: calc(100vh - 200px);
    gap: 20px;
    padding: 0 15px;
  }
  
  /* Left column - Questions */
  #main.quest.tryout .questions-column {
    flex: 1;
    overflow-y: visible;
    padding-right: 15px;
    max-height: 100%;
  }
  
  /* Right column - Answer Sheet */
  #main.quest.tryout .answer-column {
    top: 100px; 
    height: 100%;
    flex: 0 0 350px;
    background: white;
    border-radius: 15px;
    box-shadow: 0px 3px 6px #00000029;
    overflow-y: scroll;
    position: sticky;
  }
  
  /* Hide the mobile answer button on desktop */
  #main.quest.tryout .answer-btn {
    display: none;
  }
  
  /* Reset answer sheets positioning for desktop */
  #main.quest.tryout .answer-sheets {
    position: static;
    bottom: auto;
    left: auto;
    width: 100%;
    z-index: auto;
    transition: none;
    height: 100%;
  }
  
  /* Answer sheets container adjustments */
  #main.quest.tryout .answer-sheets .container {
    padding: 0;
    max-width: none;
    height: 100%;
  }
  
  /* Answer sheets content adjustments */
  #main.quest.tryout .answer-sheets ._content {
    border-radius: 15px;
    height: 100%;
    padding: 20px;
    padding-bottom: 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }
  
  /* Hide close button on desktop */
  #main.quest.tryout .answer-sheets ._content .close-anshet {
    display: none;
  }
  
  /* Scrollable area adjustments */
  #main.quest.tryout .answer-sheets ._content ._scrollable {
    flex: 1;
    height: auto;
    overflow-y: visible;
    padding-bottom: 20px;
    border-radius: 0;
  }
  
  /* Submit button positioning */
  #main.quest.tryout.answer-sheets ._content ._scrollable input[type="submit"] {
    margin-top: 20px;
    /* position: sticky; */
    bottom: 0;
    border-top: 1px solid #eee;
  }
  
  /* Ensure answer sheets are always visible (override _show class) */
  #main.quest.tryout .answer-sheets,
  #main.quest.tryout .answer-sheets._show {
    bottom: auto;
    transform: none;
  }
  
  /* Adjust content-top expand behavior for desktop */
  #main.quest.tryout .content-top.expand-pb {
    padding-bottom: 20px;
  }
  
  /* Timer positioning adjustments for desktop */
  #main.quest.tryout #timer._stay {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
  }
  
  /* Ensure proper scrolling for questions */
  #main.quest.tryout .questions-column .tab-content {
    height: 100%;
    overflow-y: scroll;
  }
  
  #main.quest.tryout .questions-column .tab-pane {
    height: 100%;
    overflow-y: visible;
  }

  #main.quest.tryout .container .content-top .tab-content {
    flex-basis: 100%;
  }
  
  /* Add a subtle border between columns */
  #main.quest.tryout .questions-column {
    border-right: 1px solid #eee;
  }
  
  /* Responsive adjustments for smaller desktop screens */
  @media (max-width: 1200px) {
    #main.quest.tryout .answer-column {
      flex: 0 0 350px;
    }
  }
  
  @media (max-width: 1024px) {
    #main.quest.tryout .answer-column {
      flex: 0 0 320px;
    }
    
    #main.quest.tryout .desktop-grid-container {
      gap: 15px;
    }
  }

  html.sidebar-collapsed #main.quest.tryout .answer-sheets {
    left: var(--sidebar-collapsed-width);
    width: 100%
  }
}

/* Tablet and Small Desktop Layout (769px - 991px)
   On these screens, the sidebar pushes content and fixed elements should move accordingly */
@media (min-width: 769px) and (max-width: 991px) {
  /* The desktop grid classes will have no effect on tablet */
  #main.quest.tryout .desktop-grid-container {
    display: block;
  }

  
  #main.quest.tryout .questions-column,
  #main.quest.tryout .answer-column {
    flex: none;
    width: auto;
    height: auto;
    overflow: visible;
  }
  
  /* On tablet, fixed elements should move with sidebar using CSS variables */
  /* These rules allow the default desktop positioning to work */
  #main.quest.tryout .answer-btn {
    display: block !important;
    position: fixed !important;
    bottom: 55px !important;
    z-index: 0;
    margin-top: 0;
  }
  
  #main.quest.tryout .answer-sheets {
    position: fixed;
    bottom: -422px;
    z-index: 97;
    transition: bottom 0.7s cubic-bezier(0.93, -0.37, 0.1, 1.42), left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  #main.quest.tryout .answer-sheets._show {
    bottom: -80px;
  }
}

/* Mobile Layout (max-width: 768px)
   Ensure mobile layout remains unchanged with overlay sidebar */
@media (max-width: 768px) {
  /* The desktop grid classes will have no effect on mobile */
  #main.quest.tryout .desktop-grid-container {
    display: block;
  }
  
  #main.quest.tryout .questions-column,
  #main.quest.tryout .answer-column {
    flex: none;
    width: auto;
    height: auto;
    overflow: visible;
  }
  
  /* Ensure answer button is visible and fixed on mobile */
  #main.quest.tryout .answer-btn {
    display: block !important;
    position: fixed !important;
    bottom: 55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 0;
    margin-top: 0;
    width: 50%;
    height: auto;
    font-size: small;
  }
  
  /* Ensure answer sheets work normally on mobile */
  #main.quest.tryout .answer-sheets {
    position: fixed !important;
    bottom: -422px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 97;
    transition: all 0.7s cubic-bezier(0.93, -0.37, 0.1, 1.42);
  }
  
  #main.quest.tryout .answer-sheets._show {
    bottom: -80px !important;
  }
}


@media (max-width: 991.98px) {
  #main.quest.tryout .padding-for-answer-sheet{
    padding-bottom: 350px !important;
  }

  #main.quest.tryout{
    height: auto !important;
    /* overflow: scroll !important; */
  }

  body:has(#content-top.sticky).content-header {
    z-index: 10; 
    background-color: white;
  }

  #main.quest.tryout #content-top.sticky{
    min-height: 80px !important;
    position: sticky !important;
    top: 0% !important;
    z-index: 999 !important;
    display: flex;
    margin-bottom:10px;
  }
}