/* =========================================================
   Contact Form (CF7) + Confirm Modal
   - Dark / underline fields / outline buttons
   Targets:
     1) #customInputForm        (input form)
     2) #contact-confirm-modal  (confirm modal)
   Breakpoint: 599px
   ========================================================= */

/* =========================================================
   0) Design Tokens
   ========================================================= */
:root{
  --cf-bg: #1e1e1e;
  --cf-text: rgba(255,255,255,.86);
  --cf-text-muted: rgba(255,255,255,.62);
  --cf-text-placeholder: rgba(255,255,255,.28);

  --cf-line: rgba(255,255,255,.22);
  --cf-line-focus: rgba(255,255,255,.52);

  --cf-danger: rgba(255, 77, 77, .92);
  --cf-danger-line: rgba(255, 77, 77, .85);

  --cf-border: rgba(255,255,255,.14);
  --cf-shadow: 0 12px 40px rgba(0,0,0,.55);

  --cf-maxw: 920px;
  --cf-gap-x: clamp(16px, 3.2vw, 32px);
  --cf-gap-y: clamp(18px, 2.4vw, 22px);
  --cf-pad: 1rem;

  --cf-label-size: 12px;
  --cf-label-track: .18em;

  --cf-field-size: 15px;
  --cf-field-lh: 1.6;

  --cf-btn-pad: 18px 14px;
  --cf-btn-size: 12px;
  --cf-btn-track: .22em;

  --cf-radius: 0; /* underline UI */

  /* Confirm Modal: action area height (scroll “escape”) */
  --cf-actions-h: 100px;
}

/* =========================================================
   1) Shared UI
   ========================================================= */
.cf-input,
.cf-select,
.cf-textarea{
  width: 100%;
  background: transparent;
  color: rgba(255,255,255,.88);

  border: none;
  border-bottom: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);

  padding: 10px 10px 12px;
  font-size: var(--cf-field-size);
  line-height: var(--cf-field-lh);

  outline: none;
  box-shadow: none;
}

.cf-input::placeholder,
.cf-textarea::placeholder{
  color: var(--cf-text-placeholder);
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus{
  border-bottom-color: var(--cf-line-focus);
}

.form-item{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-item label{
  font-size: var(--cf-label-size);
  letter-spacing: var(--cf-label-track);
  line-height: 1.3;
  color: var(--cf-text-muted);
}

.required{
  display: inline-block;
  margin-left: .35em;
  font-size: 11px;
  letter-spacing: .12em;
  color: #ff4d4d;
  vertical-align: baseline;
}

/* Buttons */
.contact-form-button,
.confirm-modal-button{
  width: 100%;
  padding: var(--cf-btn-pad);
  background: transparent;
  color: rgba(255,255,255,.88);

  border: 1px solid var(--cf-line);
  border-radius: 0;

  font-size: var(--cf-btn-size);
  letter-spacing: var(--cf-btn-track);
  text-transform: uppercase;

  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.contact-form-button:hover,
.confirm-modal-button:hover{
  border-color: rgba(255,255,255,.45);
  color: rgba(255,255,255,.98);
  transform: translateY(-1px);
}

.contact-form-button:active,
.confirm-modal-button:active{
  transform: translateY(0);
}

/* JS validation */
.error,
.error:focus{
  border-bottom-color: var(--cf-danger-line) !important;
}

.error-message{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cf-danger);
  letter-spacing: .04em;
}

/* =========================================================
   2) Input Form (#customInputForm)
   ========================================================= */
#customInputForm.contact-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--cf-gap-x);
  row-gap: var(--cf-gap-y);

  width: 100%;
  max-width: var(--cf-maxw);
  margin: 0 auto;
  padding: var(--cf-pad);

  background: var(--cf-bg);
  color: var(--cf-text);
}

/* textarea (input form) */
#customInputForm .cf-textarea{
  resize: vertical;
  min-height: 40px;
  max-height: 160px;
}

/* Select */
#customInputForm .form-item{
  position: relative;
}

#customInputForm .cf-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 34px;
  cursor: pointer;
}

#customInputForm .cf-select option{
  background: var(--cf-bg);
  color: rgba(255,255,255,.9);
}

/* select矢印（:has 対応ブラウザ向け） */
#customInputForm .form-item:has(> .cf-select)::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 16px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255,255,255,.45);
  pointer-events: none;
}

/* 全幅にしたい行（区分/住所/内容/ボタン） */
#customInputForm .form-item:has(#category),
#customInputForm .form-item:has(#address),
#customInputForm .form-item:has(#message),
#customInputForm .custom-button-area{
  grid-column: 1 / -1;
}

#customInputForm .custom-button-area{
  display: flex;
  justify-content: center;
}

#customInputForm .contact-form-button{
  max-width: 520px;
}

/* =========================================================
   3) Confirm Modal
   ========================================================= */

/* body scroll lock (JS) */
body.modal-open{
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Hide headers while modal open (PC/SP共通) */
body.modal-open .l-fixHeader,
body.modal-open .l-fixHeader__inner,
body.modal-open .l-header,
body.modal-open .l-header__inner,
body.modal-open .l-header__fix,
body.modal-open .l-header__fixInner,
body.modal-open #fix_header,
body.modal-open .custom-mobile-header{
  opacity: 0 !important;
  pointer-events: none !important;
}

.l-fixHeader,
.l-header,
.custom-mobile-header{
  transition: opacity .18s ease;
}

/* overlay */
#contact-confirm-modal.confirm-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;

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

  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  padding: clamp(12px, 3vw, 28px);
}

#contact-confirm-modal.confirm-modal.is-active{
  display: flex;
}

/* modal box */
#contact-confirm-modal .confirm-modal-inner{
  width: 100%;
  max-width: var(--cf-maxw);

  background: var(--cf-bg);
  color: var(--cf-text);

  border: 1px solid var(--cf-border);
  box-shadow: var(--cf-shadow);

  display: flex;
  flex-direction: column;

  height: min(92dvh, 92vh);
  overflow: hidden;
}

/* title */
#contact-confirm-modal .modal-title{
  margin: 0;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 4vw, 44px);

  font-size: 14px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--cf-border);

  flex: 0 0 auto;
}

/* wrap */
#contact-confirm-modal .confirm-wrap{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* ←重要 */
}

/* content (scroll area on desktop) */
#contact-confirm-modal .confirm-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(10px, 3.2vw, 24px);
  row-gap: clamp(10px, 2.4vw, 24px);

  padding: clamp(10px, 4vw, 21px) clamp(10px, 4vw, 22px);

  /* 下のボタンに被らない保険 */
  padding-bottom: var(--cf-actions-h);
}

@supports (padding: env(safe-area-inset-bottom)){
  #contact-confirm-modal .confirm-content{
    padding-bottom: calc(var(--cf-actions-h) + env(safe-area-inset-bottom));
  }
}

/* subtle scrollbar */
#contact-confirm-modal .confirm-content::-webkit-scrollbar{
  width: 10px;
}
#contact-confirm-modal .confirm-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 20px;
  border: 2px solid rgba(0,0,0,.85);
}
#contact-confirm-modal .confirm-content::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
}

/* readonly feel (confirm fields) */
#contact-confirm-modal .cf-input[readonly],
#contact-confirm-modal .cf-textarea[readonly]{
  color: rgba(255,255,255,.86);
  border-bottom-color: rgba(255,255,255,.18);
}

/* textarea in confirm */
#contact-confirm-modal .cf-textarea{
  resize: none;
  min-height: 80px;
}

/* full width rows in confirm */
#contact-confirm-modal .confirm-content .form-item:has(#confirm-category),
#contact-confirm-modal .confirm-content .form-item:has(#confirm-address),
#contact-confirm-modal .confirm-content .form-item:has(#confirm-message){
  grid-column: 1 / -1;
}

/* Turnstile (confirm) */
#contact-confirm-modal .confirm-content > .wpcf7-turnstile.cf-turnstile{
  grid-column: 1 / -1;
  justify-self: center;
  width: min(320px, 100%);
  margin: 10px 0;
}

/* action area (default) */
#contact-confirm-modal .modal-button-area{
  flex: 0 0 auto;
  display: flex;
  gap: 14px;

  padding: 14px clamp(10px, 4vw, 22px) 18px;
  border-top: 1px solid var(--cf-border);
  background: var(--cf-bg);

  position: relative;
  z-index: 2;
}

/* same width */
#contact-confirm-modal .modal-button-area > *{
  flex: 1 1 0%;
}

/* CF7 submit が input でも崩れない */
#contact-confirm-modal input.confirm-modal-button,
#contact-confirm-modal button.confirm-modal-button{
  display: block;
  width: 100%;
  margin: 0;
}

#contact-confirm-modal .wpcf7-submit.confirm-modal-button{
  -webkit-appearance: none;
  appearance: none;
}

/* Success message */
#contact-confirm-modal #confirm-success{
  display: none;
  padding: clamp(18px, 4vw, 42px) clamp(16px, 4vw, 44px);
}

#contact-confirm-modal #confirm-success.is-active{
  display: block;
}

#contact-confirm-modal #confirm-success p{
  margin: 0 0 10px;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
}

#contact-confirm-modal #confirm-success .custom-button-area{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* send complete: hide confirm UI */
#contact-confirm-modal.is-sent .confirm-wrap{
  display: none !important;
}
#contact-confirm-modal.is-sent #confirm-success{
  display: block;
}

/* =========================================================
   4) Responsive (<=599px)
   - SP: modal内は confirm-modal-inner がスクロール
   - ボタンは画面下に固定（押せる＆Turnstileまで行ける）
   ========================================================= */
@media (max-width: 599px){

  /* Input form becomes 1col */
  #customInputForm.contact-form{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;
    padding: 22px 16px 26px;
  }

  #customInputForm .form-item:has(#category),
  #customInputForm .form-item:has(#address),
  #customInputForm .form-item:has(#message),
  #customInputForm .custom-button-area{
    grid-column: auto;
  }

  #customInputForm .contact-form-button{
    max-width: none;
  }

  /* overlay spacing */
  #contact-confirm-modal.confirm-modal{
    padding: 10px;
    align-items: flex-start;
  }

  /* SP: fixed action height */
  :root{
    --cf-actions-h: 240px;
  }

  /* SP: modal box scroll container */
  #contact-confirm-modal .confirm-modal-inner{
    height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* fixedボタンの分だけ “逃げ” を確保 */
    padding-bottom: calc(var(--cf-actions-h) + env(safe-area-inset-bottom));
  }

  /* SP: content is not the scroll container */
  #contact-confirm-modal .confirm-content{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;

    overflow: visible;
    min-height: auto;

    padding: 22px 16px 26px;
    padding-bottom: 12px;
  }

  /* SP: button area fixed at viewport bottom */
  #contact-confirm-modal .modal-button-area{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);

    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(92vw, 920px);

    z-index: 99999;
    background: rgba(30,30,30,.96);
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.08);

    flex-direction: column;
    gap: 14px;
  }

  #contact-confirm-modal #confirm-success{
    padding: 22px 16px 26px;
  }
}