/* SnowMonkey Forms Custom Styles */

/* Form Wrapper */
.snow-monkey-form {
}

/* General Form Structure */
.smf-form {
  --_font-size: 18px;
  font-size: var(--_font-size);
  line-height: 1.6;
}

.wp-block-group.has-global-padding.is-layout-constrained {
}

.wp-block-heading {
}

.form-contents {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--60);
}
.form-contents__group {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);

  > * {
    width: 100%;
  }
}
.snow-monkey-form[data-screen="confirm"] .form-contents__group {
  gap: var(--wp--preset--spacing--60);
}
/* Form Item (Label + Control Wrapper) */
.smf-form .smf-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smf-form .smf-item__col {
}

.smf-form .smf-item__col--label {
}

.smf-form .smf-item__col--controls {
}

/* Label */
.smf-form .smf-item__label {
}

.smf-form .smf-item__label__text {
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--small);
}

/* Controls Area */
.smf-form .smf-item__controls {
}

/* Placeholder for various input types (often wraps the actual control) */
.smf-form .smf-placeholder {
}

/* Select Control */
.smf-form .smf-select-control {
  width: 100%;
  z-index: 0;
}

.smf-form .smf-select-control__control {
  width: 100%;
  width: 100%;
  background-color: var(--wp--preset--color--custom-bg-gray);
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
}

.smf-form .smf-select-control__toggle {
  width: 52px;
  background-color: #606060;
  z-index: 1;
  left: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  &::before {
    width: 12px;
    height: 12px;
    border-color: var(--wp--preset--color--custom-white);
    position: static;
    translate: 0 -2px;
  }
  &:focus::before {
    border-color: var(--wp--preset--color--custom-white);
  }
}
.smf-form
  .smf-select-control__control:focus
  + .smf-select-control__toggle:before {
  border-color: var(--wp--preset--color--custom-white);
}

/* Textarea Control */
.smf-form .smf-textarea-control {
}

.smf-form .smf-textarea-control__control {
  width: 100%;
  background-color: var(--wp--preset--color--custom-bg-gray);
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
}

/* File Control */
.smf-form .smf-file-control {
}

.smf-form .smf-file-control label {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--wp--preset--color--custom-gray-02);
  background: var(--wp--preset--color--custom-bg-gray);
  cursor: pointer;
  padding-inline: var(--wp--preset--spacing--20);
}

.smf-form .smf-file-control__control {
  width: 100%;
  background-color: var(--wp--preset--color--custom-bg-gray);
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
}

.smf-form .smf-file-control__label {
  background: var(--wp--preset--color--custom-bg-gray);
  border: none;
  --_border-radius: 0;
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--xx-small);
}

.smf-form .smf-file-control__label,
.smf-form .smf-file-control__filename--has-file {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 12px 0;
}

.smf-form .smf-file-control__filename--has-file {
  color: var(--wp--preset--color--custom-tk-blue, #1a4b7a);
  font-weight: 500;
}

.smf-form .smf-file-control__filename--no-file {
  display: none;
}

.smf-form .smf-file-control__filename {
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--xx-small);
}

.smf-form .smf-file-control__clear {
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--xx-small);
}

.smf-form .smf-file-control.is-dragover {
  border: 1px dashed var(--wp--preset--color--custom-tk-blue);
  background: #f0f8ff;
}

/* Text Input Control */
.smf-form .smf-text-control {
}

.smf-form .smf-text-control__control {
  width: 100%;
  background-color: var(--wp--preset--color--custom-bg-gray);
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
}

/* Checkbox Control */
.smf-form .smf-checkboxes-control {
}

.smf-form .smf-checkboxes-control__control {
}

.smf-form .smf-checkboxes-control .smf-label {
}

.smf-form .smf-checkboxes-control .smf-label label {
  display: block;
}

.smf-form .smf-checkbox-control {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  background-color: var(--wp--preset--color--custom-bg-gray);
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
  gap: var(--wp--preset--spacing--30);
}

.smf-form .smf-checkbox-control__control {
  width: 24px;
  height: 24px;
  margin: 0;
  background-color: unset;
  --_border-color: var(--wp--preset--color--custom-gray-02);
  border-radius: 0;
}
.smf-form .smf-checkbox-control__control:checked {
  background-color: var(--wp--preset--color--custom-black);
}
.smf-form .smf-checkbox-control__label {
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}
@media screen and (max-width: 1039px) {
  .smf-form .smf-checkbox-control__label {
    font-size: var(--wp--preset--font-size--x-small);
  }
}

.smf-form .smf-checkbox-control__control:before {
  width: 9px;
  height: 16px;
  top: calc(50% - 11px);
  left: calc(50% - 4px);
}

.smf-form .smf-radio-button-control__control {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--custom-gray-02);
  background-color: var(--wp--preset--color--custom-bg-gray);
  margin-top: 0;
}
.smf-form .smf-radio-button-control__control:checked {
  position: relative;
  background-color: var(--wp--preset--color--custom-bg-gray);
  border-color: var(--wp--preset--color--custom-gray-02);
}
.smf-form .smf-radio-button-control__control:checked::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  background-color: var(--wp--preset--color--custom-black);
}
.smf-radio-button-control__label {
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}
.smf-form .smf-radio-buttons-control--horizontal .smf-radio-buttons-control__control>.smf-label {
  margin-right: var(--wp--preset--spacing--40);
  margin-bottom: 12px;
}
/* Individual Button (You'll need to inspect the actual button classes generated by SMF) */
/* .smf-form .smf-button, .smf-form .wp-block-button__link etc. */

/* Action Bar (Confirm, Back, Submit buttons wrapper) */
.smf-action {
  margin-block-start: var(--wp--preset--spacing--80);
  display: flex;
  justify-content: center;
}
[data-screen="confirm"] .smf-action {
  justify-content: space-between;
}
/* Buttons Area (Submit, Confirm, etc.) */
.smf-action .smf-button-control {
  display: flex;
  justify-content: center;
}
.smf-action .smf-button-control__control {
  background: var(--wp--preset--color--custom-bg-gray);
  --_border-color: var(--wp--preset--color--custom-gray-02);
  --_border-radius: 0;
  color: var(--wp--preset--color--custom-black);
  font-size: var(--wp--preset--font-size--small);
  padding-block: var(--wp--preset--spacing--20);
  padding-inline: var(--wp--preset--spacing--30);
}
@media screen and (max-width: 1039px) {
  .smf-action {
  }
  [data-screen="confirm"] .smf-action {
    margin-block-start: var(--wp--preset--spacing--60);
    flex-direction: column;
    gap: var(--wp--preset--spacing--80);
  }
  /* Buttons Area (Submit, Confirm, etc.) */
  .smf-action
    .smf-button-control:has(.smf-button-control__control[data-action="back"]) {
    align-self: flex-start;
    > .smf-button-control__control[data-action="back"] {
      padding-block: 0;
    }
  }
  .smf-action .smf-button-control__control {
    background: var(--wp--preset--color--custom-bg-gray);
    --_border-color: var(--wp--preset--color--custom-gray-02);
    --_border-radius: 0;
    color: var(--wp--preset--color--custom-black);
    font-size: var(--wp--preset--font-size--small);
    padding-block: var(--wp--preset--spacing--20);
    padding-inline: var(--wp--preset--spacing--30);
  }
}
/* System Messages */
.smf-form .smf-system-error-content-ready {
}

/* Focus Point (Accessibility) */
.smf-form .smf-focus-point {
}

.smf-form .smf-control-description {
  margin-top: 8px;
  color: var(--wp--preset--color--custom-gray-02);
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 1.6;
}

/* ys-icon--arrow のスタイルを smf-button-control__control にも適用 */
.smf-button-control__control {
  position: relative;
}
.smf-button-control__control::after {
  display: inline-block;
  vertical-align: -3px;
  content: "";
  width: 17px;
  height: 17px;
  margin-inline-start: 4px;
  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_47_6701)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1533 8.49974L10.5101 13.144L9.75492 12.3899L13.1117 9.03307L1.06585 9.03307L1.06585 7.9664L13.1117 7.9664L9.75492 4.61067L10.5101 3.85547L15.1533 8.49974Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_47_6701'%3E%3Crect width='16' height='16' fill='white' transform='translate(16 0.5) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_47_6701)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1533 8.49974L10.5101 13.144L9.75492 12.3899L13.1117 9.03307L1.06585 9.03307L1.06585 7.9664L13.1117 7.9664L9.75492 4.61067L10.5101 3.85547L15.1533 8.49974Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_47_6701'%3E%3Crect width='16' height='16' fill='white' transform='translate(16 0.5) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background-color: currentColor;
}

/* 必須ラベル */
.smf-item:has(.smf-item__col--controls [data-validations~="required"])
  .smf-item__col--label
  .smf-item__label__text::after,
.smf-placeholder[data-name$="-agree"] .smf-checkboxes-control__control[data-validations~="required"] .smf-checkbox-control__label::after {
  content: "必須";
  display: inline-block;
  margin-left: var(--wp--preset--spacing--20);
  padding: 0 6px;
  border: 1px solid #ff0000;
  color: #ff0000;
  font-size: var(--wp--preset--font-size--xx-small);
  vertical-align: baseline;
}

/* バリデーションエラーメッセージのアイコン装飾 */
.smf-form [data-invalid="1"] {
  border-color: inherit;
}
.smf-error-messages {
  position: relative;
  padding: 8px;
  color: #ff0000;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--xx-small);
  line-height: 1.6;
  background-color: rgba(255, 0, 0, 0.05);
  margin-top: var(--wp--preset--spacing--10);
}
.smf-error-messages::before {
  content: "";
  display: inline-block;
  vertical-align: -1px;
  width: var(--wp--preset--spacing--10);
  height: var(--wp--preset--spacing--10);
  background-color: #ff0000;
  mask-image: url('data:image/svg+xml;utf8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.83173 10.8157C1.25867 10.2622 0.801575 9.60018 0.487121 8.86816C0.172667 8.13613 0.00714944 7.34881 0.000226541 6.55214C-0.00669636 5.75546 0.145114 4.96538 0.446799 4.22801C0.748484 3.49063 1.194 2.82072 1.75736 2.25736C2.32072 1.694 2.99063 1.24848 3.72801 0.946799C4.46538 0.645114 5.25546 0.493304 6.05214 0.500227C6.84881 0.507149 7.63613 0.672667 8.36816 0.987121C9.10018 1.30157 9.76225 1.75867 10.3157 2.33173C11.4087 3.46334 12.0134 4.97896 11.9998 6.55214C11.9861 8.12532 11.3551 9.63019 10.2426 10.7426C9.13019 11.8551 7.62532 12.4861 6.05214 12.4998C4.47896 12.5134 2.96334 11.9087 1.83173 10.8157ZM9.46973 9.96973C10.3704 9.06905 10.8764 7.84748 10.8764 6.57373C10.8764 5.29998 10.3704 4.0784 9.46973 3.17773C8.56905 2.27705 7.34748 1.77106 6.07373 1.77106C4.79998 1.77106 3.5784 2.27705 2.67773 3.17773C1.77705 4.0784 1.27106 5.29998 1.27106 6.57373C1.27106 7.84748 1.77705 9.06905 2.67773 9.96973C3.5784 10.8704 4.79998 11.3764 6.07373 11.3764C7.34748 11.3764 8.56905 10.8704 9.46973 9.96973ZM5.47373 3.57373H6.67373V7.17373H5.47373V3.57373ZM5.47373 8.37373H6.67373V9.57373H5.47373V8.37373Z" fill="%23FF0000"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.83173 10.8157C1.25867 10.2622 0.801575 9.60018 0.487121 8.86816C0.172667 8.13613 0.00714944 7.34881 0.000226541 6.55214C-0.00669636 5.75546 0.145114 4.96538 0.446799 4.22801C0.748484 3.49063 1.194 2.82072 1.75736 2.25736C2.32072 1.694 2.99063 1.24848 3.72801 0.946799C4.46538 0.645114 5.25546 0.493304 6.05214 0.500227C6.84881 0.507149 7.63613 0.672667 8.36816 0.987121C9.10018 1.30157 9.76225 1.75867 10.3157 2.33173C11.4087 3.46334 12.0134 4.97896 11.9998 6.55214C11.9861 8.12532 11.3551 9.63019 10.2426 10.7426C9.13019 11.8551 7.62532 12.4861 6.05214 12.4998C4.47896 12.5134 2.96334 11.9087 1.83173 10.8157ZM9.46973 9.96973C10.3704 9.06905 10.8764 7.84748 10.8764 6.57373C10.8764 5.29998 10.3704 4.0784 9.46973 3.17773C8.56905 2.27705 7.34748 1.77106 6.07373 1.77106C4.79998 1.77106 3.5784 2.27705 2.67773 3.17773C1.77705 4.0784 1.27106 5.29998 1.27106 6.57373C1.27106 7.84748 1.77705 9.06905 2.67773 9.96973C3.5784 10.8704 4.79998 11.3764 6.07373 11.3764C7.34748 11.3764 8.56905 10.8704 9.46973 9.96973ZM5.47373 3.57373H6.67373V7.17373H5.47373V3.57373ZM5.47373 8.37373H6.67373V9.57373H5.47373V8.37373Z" fill="%23FF0000"/></svg>');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* confirm */
.snow-monkey-form[data-screen="input"] .is-confirm-content,
.snow-monkey-form[data-screen="back"] .is-confirm-content {
  display: none;
}
.snow-monkey-form[data-screen="confirm"] .is-input-contents {
  display: none;
}
.snow-monkey-form[data-screen="confirm"]
  :not(.is-confirm-content):is(h1, h2, h3, h4, h5, h6) {
  display: none !important;
}
.snow-monkey-form[data-screen="confirm"]
  .wp-container-core-group-is-layout-15ea44a4
  > *
  + * {
  margin-top: 80px !important;
}
.snow-monkey-form[data-screen="confirm"]
  .wp-container-core-group-is-layout-346627ba
  > *
  + * {
  margin-block-start: 80px;
}
.snow-monkey-form[data-screen="confirm"]
  .smf-action
  .smf-button-control__control[data-action="back"] {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 0;
  padding-block: 9px;

  &::after {
    content: none;
  }
  &::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #191919;
    background-image: url(../images/icon-arrow2.svg);
    background-size: 9px 16px;
    background-repeat: no-repeat;
    background-position: center;
  }
  transition: opacity 0.1s ease-out;
  &:hover {
    opacity: 0.6;
  }
}

/* 確認画面では必須ラベルを非表示 */
.snow-monkey-form[data-screen="confirm"] .smf-item__label__text::after,
.snow-monkey-form[data-screen="confirm"] .smf-checkbox-control__label::after {
  display: none !important;
}

/* thanks */
.thanks-contents {
  padding-block-start: 56px;
  padding-block-end: var(--wp--preset--spacing--80);
}

@media screen and (max-width: 1039px) {
  .ys-header__cta-button {
    display: none !important;
  }
}