/*
 * Remodal - Force dark theme (mobile含む全環境で上書き)
 * 使い方: 既存の remodal.css / remodal-default-theme.css の「後」に読み込む
 */

/* =============================
   ベース（特異性を高めて上書き）
   ============================= */

:root body .remodal-bg.remodal-is-opening,
:root body .remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px) !important;
  filter: blur(3px) !important;
}

:root body .remodal-overlay {
  background: rgba(43, 46, 56, 0.9) !important;
}

:root body .remodal-overlay.remodal-is-opening,
:root body .remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s !important;
  animation-duration: 0.3s !important;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

:root body .remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes !important;
  animation-name: remodal-overlay-opening-keyframes !important;
}

:root body .remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes !important;
  animation-name: remodal-overlay-closing-keyframes !important;
}

:root body .remodal-wrapper {
  padding: 10px 10px 0 !important;
}

/* モーダル本体（ここが最重要） */
:root body .remodal {
  box-sizing: border-box !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  padding: 35px !important;

  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;

  color: #fff !important;
  background: #2b2b2b !important; /* ← 黒系に固定 */
}

:root body .remodal.remodal-is-opening,
:root body .remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s !important;
  animation-duration: 0.3s !important;
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode: forwards !important;
}

:root body .remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes !important;
  animation-name: remodal-opening-keyframes !important;
}

:root body .remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes !important;
  animation-name: remodal-closing-keyframes !important;
}

/* 垂直中央揃え */
:root body .remodal,
:root body .remodal-wrapper:after {
  vertical-align: middle !important;
}

/* Close ボタン */
:root body .remodal-close {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  display: block !important;
  overflow: visible !important;

  width: 35px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;

  cursor: pointer !important;
  -webkit-transition: color 0.2s !important;
  transition: color 0.2s !important;
  text-decoration: none !important;

  color: #95979c !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

:root body .remodal-close:hover,
:root body .remodal-close:focus {
  color: #dec59e !important; /* ダーク上で視認性を上げる */
}

:root body .remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 25px !important;
  line-height: 35px !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  display: block !important;
  width: 35px !important;

  content: "\00d7" !important;
  text-align: center !important;
}

/* Dialog ボタン */
:root body .remodal-confirm,
:root body .remodal-cancel {
  font: inherit !important;

  display: inline-block !important;
  overflow: visible !important;

  min-width: 110px !important;
  margin: 0 !important;
  padding: 12px 0 !important;

  cursor: pointer !important;
  -webkit-transition: background 0.2s !important;
  transition: background 0.2s !important;
  text-align: center !important;
  vertical-align: middle !important;
  text-decoration: none !important;

  border: 0 !important;
  outline: 0 !important;
}

:root body .remodal-confirm {
  color: #fff !important;
  background: #8c7654 !important;
}
:root body .remodal-confirm:hover,
:root body .remodal-confirm:focus {
  background: #dec59e !important;
}

:root body .remodal-cancel {
  color: #fff !important;
  background: #555555 !important;
}
:root body .remodal-cancel:hover,
:root body .remodal-cancel:focus {
  background: #666666 !important;
}

/* Firefox 旧仕様対策 */
:root body .remodal-confirm::-moz-focus-inner,
:root body .remodal-cancel::-moz-focus-inner,
:root body .remodal-close::-moz-focus-inner {
  padding: 0 !important;
  border: 0 !important;
}

/* =============================
   Keyframes（そのまま流用）
   ============================= */
@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-overlay-opening-keyframes {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes remodal-overlay-opening-keyframes {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-webkit-keyframes remodal-overlay-closing-keyframes {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes remodal-overlay-closing-keyframes {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =============================
   メディアクエリ
   ============================= */
@media only screen and (min-width: 641px) {
  :root body .remodal {
    max-width: 700px !important;
  }
}

/* =============================
   IE8フォールバック（任意）
   ============================= */
.lt-ie9 .remodal-overlay { background: #2b2e38; }
.lt-ie9 .remodal { width: 700px; }