/* Arrow for the custom select */
.custom-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 10px;
  padding-right: 55px;
}

/* Menu dropdown */
.custom-options {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  z-index: 10;
  border-top: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
  top: 75px;
  left: 0px;
}

/* Each option */
.custom-options li {
  cursor: pointer;
  margin: 18px 0;  
  height: 45px; /* increase height as needed */
  display: flex;
  flex-direction: column;
  justify-content: center; /* center vertically */
  padding: 10px; /* add inner spacing if needed */
  cursor: pointer;
  margin: 0;
}

/* Hover */
.custom-options li:hover {
  background-color: #1E73E4;
  color: white;
}
.custom-options li:hover .main,
.custom-options li:hover .sub {
  color: white;
}
/* Large line */
.custom-options .main, .selected .main {
  font-size: 20px;
  color: var(--color-org-1);
  display: block;
}

#customResidence .custom-options .main,
#customResidence .selected .main {
  font-size: 25px;
}

/* iPad Air */
@media screen and (min-width: 820px) and (max-width: 1180px) and (orientation: portrait) {
  .custom-options .main, .selected .main {

  }  
}
.selected .main {
  margin-bottom: 2px;
}

@media screen and (max-width: 767px) {
  .selected .main {
    margin-bottom: 0px;
  }  

  .custom-select .selected {
    font-size: 24px !important;
  }
}

/* Small line */
.custom-options .sub, .selected .sub {
  font-size: 13.5px;
  color: var(--color-org-1);
}

/* Ensure the `selected` text displays the same as an option */
.custom-select .selected {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Arrow drawn from a span */
.custom-select-arrow {
  position: absolute;
  right: 23px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 3px solid var(--color-org-1);
  border-bottom: 3px solid var(--color-org-1);
  pointer-events: auto; /* arrow does not block clicks */
  z-index: 1; /* Keep the element above others */
}
.custom-select-box .un_areaNav_select::after{
  display: none !important;
}

.disabled{
  color: #4d4d4d !important;
}
.option-1{
  color: #FF792F;
}

/* Style for a disabled option.
   Must cover the `:hover` and `.selected-option` states too because:
   - `.custom-options li:hover` has the same specificity as `.disabled-option`
     → the later declaration wins → `:hover` must accompany disabled.
   - JS may accidentally add `.selected-option` (the handler does not filter disabled)
     → `.selected-option:hover` (specificity 0,2,1) overrides disabled (0,1,1)
     → these combinations must be covered too.
   - Must override `.sub` (the "断熱開き戸…" text) as well, not just `.main`. */
.custom-options li.disabled-option,
.custom-options li.disabled-option:hover,
.custom-options li.disabled-option.selected-option,
.custom-options li.disabled-option.selected-option:hover {
  background-color: #ccc; /* Grey background */
  color: #fff; /* White text */
  cursor: default;
  height: 38px;
}

.custom-options li.disabled-option .main,
.custom-options li.disabled-option .sub,
.custom-options li.disabled-option:hover .main,
.custom-options li.disabled-option:hover .sub,
.custom-options li.disabled-option.selected-option .main,
.custom-options li.disabled-option.selected-option .sub {
  color: #fff; /* White text — both main and sub */
}

@media screen and (min-width: 768px) and (max-width: 820px) and (orientation: portrait) {
  .custom-options .main, .selected .main {
    font-size: 17px;
  }  
}

/* (Removed the static `.custom-options-up` + @media mechanism: it hard-forced the
   open direction from an HTML class, conflicting with and OVERRIDING the JS decision —
   e.g. residence (at the top of the page) was forced to open upward and cut off its
   first option. The open direction is now decided 100% by JS via the .open-up class
   below, applied to every dropdown at every screen size.) */

/* Open direction is decided DYNAMICALLY by JS (positionCustomOptions() in selectbox.js)
   to fully handle every screen size (including small 1366×768 laptops): when there is
   not enough room below the trigger in the viewport → JS adds the .open-up class to open
   UPWARD, and also sets max-height + overflow-y inline when needed so options never
   overflow the screen. Specificity (.custom-options.open-up) > base, so it overrides
   top:75px. (Replaces the old media width/height gating — which did not cover all sizes.) */
.custom-options.open-up {
  top: auto;
  bottom: 100%;
  margin-bottom: 5px;
}

@media screen and (max-height: 900px) {
  .custom-options li {
    height: 55px;
    padding: 6px 10px;
  }
}

/* Highlight the selected option in custom-options */
.custom-options li.selected-option,
.custom-options li.selected-option:hover {
  background-color: #1E73E4;
  color: #fff;
}
.custom-options li.selected-option .main,
.custom-options li.selected-option .sub {
  color: #fff;
}

/* When hovering another option, temporarily hide the selected-option highlight */
.custom-options li.selected-option.no-selected-highlight {
  background: #fff !important;
  color: var(--color-org-1) !important;
}
.custom-options li.selected-option.no-selected-highlight .main,
.custom-options li.selected-option.no-selected-highlight .sub {
  color: var(--color-org-1) !important;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .un_areaNav_item {
    font-size: 20px;
  }

  .custom-select {
    padding-right: 30px;
    padding-left: 5px;
  }

  .custom-select .selected.disabled {
    font-size: 17px;
  }

  #customConstruction .selected .main {
    font-size: 17px !important;
  }

  #customConstruction .custom-options .sub,
  #customConstruction .selected .sub {
    font-size: 11.5px;
  }

  #customResidence .custom-options .main,
  #customResidence .selected .main {
    font-size: 20px !important;
  }
}