/* Global Fluid Layout - Matches index.html */
html,
body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

#main,
#header,
#top,
.copy,
.top_main,
#content {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  float: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* Header Layout Correction - Sync with index.html */
#header {
  height: auto !important;
  border-top: 3px solid #102a71 !important;
}

#top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 10px 0 !important;
}

#logo {
  float: none !important;
  margin: 0 !important;
  max-width: 200px;
}

#top_right {
  flex: 1 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding: 0 !important;
}

.tb {
  display: flex !important;
  list-style: none !important;
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
}

.tb li {
  margin-left: 12px !important;
}

.tb img {
  width: 25px !important;
  height: auto !important;
}

.top_more {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-bottom: 5px !important;
  gap: 15px !important;
}

/* Language Dropdown Styling */
.top_more h2 {
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid #ccc !important;
  background: #f9f9f9 !important;
  height: 32px !important;
  width: 120px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
  box-sizing: border-box !important;
}

.top_more h2::after {
  content: "Language";
  font-size: 13px;
  color: #666;
}

.top_more h2::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #cc0000;
}

/* Search Bar Styling */
.search_box_wrapper {
  display: flex !important;
  height: 32px !important;
  margin-left: 15px !important;
  align-items: center !important;
}

.search_box_wrapper form {
  display: flex !important;
  flex-direction: row !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  height: 32px !important;
  width: 240px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}

#top_search {
  flex: 1 !important;
  border: none !important;
  padding: 0 45px 0 12px !important;
  height: 100% !important;
  width: 100% !important;
  background: transparent !important;
  font-size: 13px !important;
  color: #333 !important;
  outline: none !important;
  margin: 0 !important;
}

#top_submit {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 40px !important;
  height: 32px !important;
  background: #CC0000 url("./besdrill/data/upload/image/search_btn.png") no-repeat center !important;
  background-size: 18px !important;
  border: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}


@media screen and (min-width: 1001px) {
  .menu {
    float: none !important;
    width: 100% !important;
    margin: 5px 0 0 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .menu ul {
    display: flex !important;
    justify-content: flex-end !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    gap: 25px !important;
    width: auto !important;
  }

  .menu ul li {
    margin: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
  }

  .menu ul li p {
    background: transparent !important;
    padding: 0 !important;
  }

  .menu ul li p a {
    background: transparent !important;
    color: #102a71 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 10px 15px !important;
    position: relative;
    display: block;
  }

  .menu ul li p a:hover,
  .menu ul li.active p a {
    color: #009dd1 !important;
  }

  .menu ul li.active p a::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 15px;
    right: 15px;
    height: 2px;
    background-color: #009dd1;
  }

  /* Dropdown Base */
  .menu .ej {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #102a71 !important;
    z-index: 9999 !important;
    min-width: 280px !important;
    width: max-content !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important;
    padding: 10px 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 5px !important;
  }

  /* Hover Display */
  .menu ul li:hover .ej {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Dropdown Links */
  .menu .ej a {
    color: #fff !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    text-transform: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
    flex: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .menu .ej a:hover {
    background: #009dd1 !important;
    color: #fff !important;
  }
}

@media screen and (max-width: 1000px) {
  #top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
  }

  #logo {
    float: none !important;
    margin: 0 !important;
    max-width: 200px;
  }

  #top_right {
    float: none !important;
    width: 100% !important;
    text-align: center;
  }

  #top_right .tb {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    margin: 10px 0 !important;
  }

  .top_more {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .top_more h2,
  .top_more .nav {
    float: none !important;
    margin: 5px auto !important;
    position: static !important;
  }

  .nav {
    display: block !important;
  }

  .menu {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .menu ul {
    display: none;
    /* jQuery slideToggle will manage this */
    width: 100% !important;
    background: #fff;
    border: 1px solid #ddd;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .menu ul li {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    border-bottom: 1px solid #eee;
    margin-left: 0 !important;
  }

  .menu ul li a {
    padding: 12px 20px !important;
    display: block !important;
    font-size: 15px !important;
    color: #102a71 !important;
    text-decoration: none !important;
  }

  .menu .ej {
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
    height: auto !important;
    display: none;
  }
}

/* Remove the 'black bar' breadcrumb background for consistency */
#top_main {
  background: transparent !important;
  margin-top: 0 !important;
  height: auto !important;
}

.current_location {
  color: #666 !important;
  padding: 10px 0 !important;
}

.current_location a {
  color: #009dd1 !important;
}

/* Anniversary Banner Styling */
.skyon-anniversary {
  background: #102a71;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

.skyon-anniversary img {
  height: 40px !important;
  width: auto !important;
}

/* Remove the 'black bar' breadcrumb background for consistency */
#top_main {
  background: transparent !important;
  margin-top: 0 !important;
  height: auto !important;
}

.current_location {
  color: #666 !important;
  padding: 10px 0 !important;
}

.current_location a {
  color: #009dd1 !important;
}

/* Move middle gap of left and right columns to the sides */
/* Works for pages where #left and #right are inside #content */
#content {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 95px !important;
  align-items: flex-start !important;
}

/* Left sidebar: fixed width, does not shrink */
#content > #left {
  width: 250px !important;
  flex-shrink: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Right content: takes all remaining space */
#content > #right {
  flex: 1 !important;
  min-width: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Wrapper for pages (like Products) where #content(#left) and #right are siblings */
.content-right-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 95px !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 16px auto !important;
  box-sizing: border-box !important;
}

/* Inside wrapper, #content only holds #left — reset its flex */
.content-right-wrapper > #content {
  display: block !important;
  width: 250px !important;
  flex-shrink: 0 !important;
}

/* #right takes remaining space */
.content-right-wrapper > #right {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Float clear fix */
#left, #right {
  float: none !important;
}

#content > .float_clear {
  display: none !important;
}

/* ==============================================
   RESPONSIVE LAYOUT — Standard Website Behavior
   Desktop: Left sidebar | Right content (side by side)
   Mobile : Left sidebar on TOP, Right content BELOW
   ============================================== */
@media screen and (max-width: 900px) {

  /* --- Pages where #left & #right are inside #content --- */
  #content {
    display: block !important;   /* override flex — no columns on mobile */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    margin: 10px auto !important;
  }

  #left {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
  }

  #right {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
  }

  /* Fix the sidebar navigation (ul) items on mobile so they stack cleanly */
  .channel_list_recursion {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .channel_list_recursion li {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .channel_list_recursion li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    padding: 10px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: #f9f9f9 !important;
    font-size: 15px !important;
  }

  .channel_list_recursion li a.active,
  .channel_list_recursion li a:hover {
    background: #009dd1 !important;
    color: #fff !important;
    border-color: #009dd1 !important;
  }

  /* --- Products page (.content-right-wrapper wraps #content + #right) --- */
  .content-right-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    margin: 10px auto !important;
  }

  .content-right-wrapper > #content,
  .content-right-wrapper > #right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .content-right-wrapper > #right {
    margin-top: 20px !important;
  }
}