/* ==================================================
   ORA Quest : option.css
   ================================================== */


/* ==================================================
   OPTION Overlay
   ================================================== */

.ora-option-overlay {
  position: fixed;
  inset: 0;

  z-index: 1000000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 1.2rem;

  box-sizing: border-box;

  background: rgba(0, 0, 0, 0.78);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


.ora-option-overlay.is-open {
  display: flex;
}


body.ora-option-open {
  overflow: hidden;
}


/* Cocoonのページ上部ボタンをOPTION中は消す */
body.ora-option-open .go-to-top {
  display: none !important;
}


/* ==================================================
   OPTION Panel
   ================================================== */

.ora-option-panel {
  position: relative;

  width: min(92vw, 42rem);
  max-height: calc(100dvh - 2.4rem);

  overflow-y: auto;

  box-sizing: border-box;

  padding:
    clamp(1.3rem, 3vw, 2.4rem)
    clamp(1.2rem, 4vw, 3rem);

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(17, 20, 31, 0.97),
      rgba(5, 7, 13, 0.98)
    );

  border:
    1px solid
    rgba(210, 225, 255, 0.3);

  border-radius: 0.7rem;

  box-shadow:
    0 0 2rem rgba(0, 0, 0, 0.8),
    0 0 2.5rem rgba(110, 150, 220, 0.12);
}


/* WordPressテーマ側のbutton指定を弱める */
.ora-option-panel button,
.ora-language-panel button {
  font: inherit;
  text-transform: none;
  box-shadow: none;
}


/* ==================================================
   OPTION Title
   ================================================== */

.ora-option-title {
  margin: 0 0 2rem;

  text-align: center;

  font-size:
    clamp(
      1.5rem,
      2.5vw,
      2.2rem
    );

  font-weight: 500;

  letter-spacing: 0.12em;

  color: #ffffff;
}


/* ==================================================
   OPTION Row
   ================================================== */

.ora-option-row {
  display: grid;

  grid-template-columns:
    minmax(8rem, 10rem)
    minmax(0, 1fr);

  align-items: center;

  gap: 1rem;

  min-height: 3.2rem;
}


.ora-option-label {
  font-size:
    clamp(
      0.95rem,
      1.5vw,
      1.1rem
    );

  line-height: 1.4;

  color:
    rgba(
      255,
      255,
      255,
      0.88
    );
}


/* ==================================================
   Language Button
   ================================================== */

.ora-option-language-button {
  width: 100%;

  min-height: 2.6rem;

  padding:
    0.5rem
    0.9rem;

  box-sizing: border-box;

  cursor: pointer;

  text-align: center;

  font-size: 1rem;

  color: #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.22
    );

  border-radius: 0.3rem;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}


.ora-option-language-button:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.45
    );
}


/* ==================================================
   Arrow Control
   ================================================== */

.ora-option-choice-control {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 0.65rem;

  min-width: 0;
}


.ora-option-value {
  min-width: 7rem;

  text-align: center;

  font-size: 1rem;

  color: #ffffff;
}


.ora-option-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.4rem;

  flex: 0 0 auto;

  padding: 0;

  color: #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.2
    );

  border-radius: 0.3rem;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}


.ora-option-arrow:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.45
    );
}


.ora-option-arrow:active {
  transform: scale(0.94);
}


/* ==================================================
   Slider
   ================================================== */

.ora-option-slider {
  width: 100%;
  min-width: 0;

  height: 1.6rem;

  margin: 0;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;

  cursor: pointer;
}


.ora-option-slider::-webkit-slider-runnable-track {
  height: 0.22rem;

  background:
    rgba(
      255,
      255,
      255,
      0.35
    );

  border-radius: 1rem;
}


.ora-option-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  width: 1rem;
  height: 1rem;

  margin-top: -0.39rem;

  border-radius: 50%;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.85
    );

  background: #ffffff;

  box-shadow:
    0 0 0.6rem
    rgba(
      160,
      195,
      255,
      0.65
    );
}


.ora-option-slider::-moz-range-track {
  height: 0.22rem;

  background:
    rgba(
      255,
      255,
      255,
      0.35
    );

  border-radius: 1rem;
}


.ora-option-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;

  border-radius: 50%;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.85
    );

  background: #ffffff;
}


/* ==================================================
   Separator
   ================================================== */

.ora-option-separator {
  margin: 1.7rem 0;

  border: 0;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );
}


/* ==================================================
   Links
   ================================================== */

.ora-option-links {
  display: flex;
  flex-direction: column;

  gap: 0.45rem;
}


.ora-option-link,
.ora-option-credits-button {
  width: 100%;

  box-sizing: border-box;

  padding:
    0.65rem
    0.75rem;

  color:
    rgba(
      255,
      255,
      255,
      0.9
    );

  background: transparent;

  border: 0;

  border-radius: 0.3rem;

  text-decoration: none;

  transition:
    background 0.15s ease;
}


.ora-option-link {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}


.ora-option-link:hover,
.ora-option-credits-button:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.ora-option-link-label {
  flex: 0 0 auto;
}


.ora-option-link-url {
  min-width: 0;

  overflow-wrap: anywhere;

  text-align: right;

  opacity: 0.55;

  font-size: 0.78rem;
}


.ora-option-link-disabled {
  opacity: 0.38;

  pointer-events: none;
}


/* ==================================================
   Credits
   ================================================== */

.ora-option-credits-button {
  display: block;

  text-align: left;

  cursor: pointer;
}


.ora-option-credits-content {
  margin:
    0
    0.75rem
    0.5rem;

  padding:
    0.8rem
    1rem;

  font-size: 0.85rem;

  line-height: 1.7;

  white-space: pre-line;

  color:
    rgba(
      255,
      255,
      255,
      0.65
    );

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );
}


.ora-option-credits-content[hidden] {
  display: none;
}


/* ==================================================
   OPTION Close
   ================================================== */

.ora-option-close {
  display: block;

  min-width: 3rem;
  min-height: 3rem;

  margin: 1.7rem auto 0;

  padding: 0;

  font-size: 1.6rem;
  line-height: 1;

  color: #ffffff;

  background: transparent;

  border: 0;

  cursor: pointer;

  opacity: 0.7;

  transition:
    opacity 0.15s ease,
    transform 0.1s ease;
}


.ora-option-close:hover {
  opacity: 1;
}


.ora-option-close:active {
  transform: scale(0.9);
}


/* ==================================================
   LANGUAGE MODAL
   ================================================== */

.ora-language-overlay {
  position: fixed;
  inset: 0;

  z-index: 1000010;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 1rem;

  box-sizing: border-box;

  background:
    rgba(
      0,
      0,
      0,
      0.82
    );

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}


.ora-language-overlay.is-open {
  display: flex;
}


.ora-language-panel {
  display: flex;
  flex-direction: column;

  width: min(94vw, 64rem);

  max-height: 84dvh;

  box-sizing: border-box;

  padding:
    clamp(1.2rem, 3vw, 2rem);

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(18, 21, 32, 0.99),
      rgba(4, 6, 12, 0.99)
    );

  border:
    1px solid
    rgba(
      210,
      225,
      255,
      0.32
    );

  border-radius: 0.7rem;

  box-shadow:
    0 0 3rem
    rgba(
      0,
      0,
      0,
      0.9
    );
}


/* ==================================================
   Language Header
   ================================================== */

.ora-language-header {
  position: relative;

  flex: 0 0 auto;

  margin-bottom: 1.2rem;
}


.ora-language-title {
  margin: 0;

  padding: 0 3rem;

  text-align: center;

  font-size:
    clamp(
      1.3rem,
      2.2vw,
      1.9rem
    );

  font-weight: 500;

  color: #ffffff;
}


.ora-language-close {
  position: absolute;

  top: 50%;
  right: 0;

  transform:
    translateY(-50%);

  width: 2.7rem;
  height: 2.7rem;

  padding: 0;

  font-size: 1.4rem;

  line-height: 1;

  color: #ffffff;

  background: transparent;

  border: 0;

  cursor: pointer;

  opacity: 0.7;
}


.ora-language-close:hover {
  opacity: 1;
}


/* ==================================================
   Language List
   ================================================== */

.ora-language-list {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 0.55rem;

  min-height: 0;

  overflow-y: auto;

  padding:
    0.2rem
    0.35rem
    0.2rem
    0;
}


.ora-language-item {
  min-width: 0;

  min-height: 3rem;

  padding:
    0.65rem
    0.9rem;

  box-sizing: border-box;

  cursor: pointer;

  text-align: center;

  font-size:
    clamp(
      0.9rem,
      1.5vw,
      1.05rem
    );

  line-height: 1.3;

  color:
    rgba(
      255,
      255,
      255,
      0.88
    );

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 0.35rem;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}


.ora-language-item:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.35
    );
}


.ora-language-item:active {
  transform: scale(0.98);
}


.ora-language-item.is-current {
  background:
    rgba(
      120,
      175,
      255,
      0.18
    );

  border-color:
    rgba(
      165,
      205,
      255,
      0.7
    );

  color: #ffffff;
}


.ora-language-error {
  grid-column: 1 / -1;

  margin: 2rem 0;

  text-align: center;

  color:
    rgba(
      255,
      255,
      255,
      0.7
    );
}


/* ==================================================
   Focus
   ================================================== */

.ora-option-language-button:focus-visible,
.ora-option-arrow:focus-visible,
.ora-option-slider:focus-visible,
.ora-option-link:focus-visible,
.ora-option-credits-button:focus-visible,
.ora-option-close:focus-visible,
.ora-language-close:focus-visible,
.ora-language-item:focus-visible {
  outline:
    2px solid
    rgba(
      180,
      215,
      255,
      0.9
    );

  outline-offset: 0.2rem;
}


/* ==================================================
   Tablet
   ================================================== */

@media (max-width: 900px) {

  .ora-language-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* ==================================================
   Smartphone
   ================================================== */

@media (max-width: 600px) {

  .ora-option-overlay {
    padding: 0.65rem;
  }


  .ora-option-panel {
    width: 100%;

    max-height:
      calc(
        100dvh - 1.3rem
      );

    padding:
      1.3rem
      1rem;
  }


  .ora-option-title {
    margin-bottom: 1.3rem;
  }


  .ora-option-row {
    grid-template-columns:
      minmax(6.5rem, 8rem)
      minmax(0, 1fr);

    gap: 0.5rem;

    min-height: 3rem;
  }


  .ora-option-choice-control {
    gap: 0.35rem;
  }


  .ora-option-value {
    min-width: 4.5rem;

    font-size: 0.9rem;
  }


  .ora-option-arrow {
    width: 2.2rem;
    height: 2.2rem;
  }


  .ora-option-link {
    align-items: flex-start;

    flex-direction: column;

    gap: 0.2rem;
  }


  .ora-option-link-url {
    text-align: left;
  }


  .ora-language-overlay {
    padding: 0.65rem;
  }


  .ora-language-panel {
    width: 100%;

    max-height:
      calc(
        100dvh - 1.3rem
      );

    padding:
      1rem
      0.8rem;
  }


  .ora-language-title {
    font-size: 1.2rem;
  }


  .ora-language-list {
    grid-template-columns: 1fr;

    gap: 0.4rem;
  }


  .ora-language-item {
    min-height: 2.8rem;

    font-size: 1rem;
  }

}