/**
 * s-010 ご予約セクション
 * RESERVE セクションのスタイル
 */

.s-010 {
  position: relative;
  padding-top: var(--wp--preset--spacing--2-xl);
  padding-bottom: var(--wp--preset--spacing--2-xl);
  background-color: var(--wp--preset--color--background);
}

/* .alignfullで親要素を超えて横幅いっぱいに */
.s-010 .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* セクション内のヘッディング（左寄せバリエーション） */
.s-010 .c-heading-001__08 {
  margin-bottom: var(--wp--preset--spacing--xl);
}

.s-010 .c-heading-001__08-title {
  text-align: left;
}

.s-010 .c-heading-001__08-title::after {
  content: "";
  display: block;
  width: 6rem;
  height: 0.1rem;
  background: var(--wp--preset--color--primary);
  margin: var(--wp--preset--spacing--base) 0 0 0;
  border-radius: var(--wp--custom--border--radius--sm);
  position: absolute;
  bottom: 0;
  left: 0;
}

.s-010 .c-heading-001__08-subtitle {
  text-align: left;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--primary);
  margin: 0;
  margin-top: var(--wp--preset--spacing--lg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--xs);
}

.s-010 .c-heading-001__08-subtitle::before {
  content: "pets";
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  display: inline-block;
}

/* フォームコンテナ */
.s-010 .c-form-001 {
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border--radius--md);
  border: 1px solid var(--wp--preset--color--primary-lighter);
  box-shadow: var(--wp--custom--shadow--sm);
  padding: var(--wp--preset--spacing--xl);
  margin-top: var(--wp--preset--spacing--xl);
}

/* Snow Monkey Forms スタイリング */
.s-010 .snow-monkey-form .smf-form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
}

.s-010 .snow-monkey-form .smf-form .smf-item {
  margin-bottom: 0 !important;
  padding: var(--wp--preset--spacing--lg) !important;
  background-color: var(--wp--preset--color--primary-lightest) !important;
  border-radius: var(--wp--custom--border--radius--md) !important;
  border: 1px solid var(--wp--preset--color--primary-lighter) !important;
  transition: background-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease-out),
    border-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease-out);
}

.s-010 .snow-monkey-form .smf-form .smf-item:hover {
  background-color: var(--wp--preset--color--primary-lighter) !important;
  border-color: var(--wp--preset--color--primary-light) !important;
}

.s-010 .snow-monkey-form .smf-item__col--label {
  margin-bottom: var(--wp--preset--spacing--base) !important;
}

.s-010 .snow-monkey-form .smf-item__label {
  display: inline-block !important;
  font-size: var(--wp--preset--font-size--lg) !important;
  font-weight: var(--wp--custom--font-weight--bold) !important;
  color: var(--wp--preset--color--text) !important;
  margin-bottom: var(--wp--preset--spacing--xs) !important;
  position: relative !important;
  padding-left: var(--wp--preset--spacing--base) !important;
}

.s-010 .snow-monkey-form .smf-item__label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 1.2em !important;
  background-color: var(--wp--preset--color--primary) !important;
  border-radius: var(--wp--custom--border--radius--sm) !important;
}

/* 必須項目の表示 */
.s-010 .snow-monkey-form .smf-item__label__text::after {
  content: "" !important;
  /* 必須マークはバリデーションで判断 */
}

.s-010 .snow-monkey-form .smf-item__description {
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--text-secondary) !important;
  margin-top: var(--wp--preset--spacing--xs) !important;
  padding-left: var(--wp--preset--spacing--base) !important;
  line-height: 1.6 !important;
}

.s-010 .snow-monkey-form .smf-item__controls {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--wp--preset--spacing--base) !important;
}

.s-010 .snow-monkey-form .smf-item__controls > p {
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--text-secondary) !important;
  margin: 0 !important;
}

.s-010 .snow-monkey-form .smf-text-control .smf-text-control__control,
.s-010 .snow-monkey-form .smf-textarea-control .smf-textarea-control__control {
  width: 100% !important;
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg) !important;
  font-size: var(--wp--preset--font-size--base) !important;
  border: 2px solid var(--wp--preset--color--primary-lighter) !important;
  border-radius: var(--wp--custom--border--radius--md) !important;
  background-color: var(--wp--preset--color--white) !important;
  transition: border-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease-out),
    transform var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease-out);
  line-height: 1.6 !important;
}

.s-010 .snow-monkey-form .smf-text-control .smf-text-control__control:focus,
.s-010
  .snow-monkey-form
  .smf-textarea-control
  .smf-textarea-control__control:focus {
  outline: none !important;
  border-color: var(--wp--preset--color--primary) !important;
  outline: 2px solid var(--wp--preset--color--primary) !important;
  outline-offset: 2px !important;
  transform: translateY(-1px) !important;
}

.s-010 .snow-monkey-form .smf-textarea-control .smf-textarea-control__control {
  min-height: 120px !important;
  resize: vertical !important;
  font-family: inherit !important;
}

/* プレースホルダー */
.s-010
  .snow-monkey-form
  .smf-text-control
  .smf-text-control__control::placeholder,
.s-010
  .snow-monkey-form
  .smf-textarea-control
  .smf-textarea-control__control::placeholder {
  color: var(--wp--preset--color--gray) !important;
  opacity: 1 !important;
}

/* 送信ボタン */
.s-010 .snow-monkey-form .smf-action {
  text-align: center !important;
  margin-top: var(--wp--preset--spacing--xl) !important;
  padding-top: var(--wp--preset--spacing--lg) !important;
  border-top: 1px solid var(--wp--preset--color--primary-lighter) !important;
}

.s-010 .snow-monkey-form .smf-button-control .smf-button-control__control {
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--secondary-darker) 0%,
    var(--wp--preset--color--primary-dark) 100%
  ) !important;
  color: var(--wp--preset--color--white) !important;
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--6-xl) !important;
  font-size: var(--wp--preset--font-size--xl) !important;
  font-weight: var(--wp--custom--font-weight--bold) !important;
  border: none !important;
  border-radius: var(--wp--custom--border--radius--full) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 280px !important;
  box-shadow: var(--wp--custom--shadow--md) !important;
  position: relative !important;
  overflow: hidden !important;
}

.s-010
  .snow-monkey-form
  .smf-button-control
  .smf-button-control__control::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    var(--wp--custom--overlay--light--3),
    transparent
  ) !important;
  transition: left 0.5s ease !important;
}

.s-010
  .snow-monkey-form
  .smf-button-control
  .smf-button-control__control:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--wp--custom--shadow--lg) !important;
}

.s-010
  .snow-monkey-form
  .smf-button-control
  .smf-button-control__control:hover::before {
  left: 100% !important;
}

.s-010
  .snow-monkey-form
  .smf-button-control
  .smf-button-control__control:active {
  transform: translateY(-1px) !important;
  box-shadow: var(--wp--custom--shadow--sm) !important;
}

/* エラーメッセージ */
.s-010 .snow-monkey-form .smf-system-error-content-ready {
  color: var(--wp--preset--color--error-dark) !important;
  background-color: var(--wp--preset--color--error-lightest) !important;
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg) !important;
  border-radius: var(--wp--custom--border--radius--md) !important;
  border-left: var(--wp--custom--border--width--4) solid
    var(--wp--preset--color--error-dark) !important;
  margin-top: var(--wp--preset--spacing--lg) !important;
  display: none !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  line-height: 1.6 !important;
}

/* 送信中の表示 */
.s-010 .snow-monkey-form .smf-sending {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: var(--wp--preset--spacing--xs) !important;
  border: 2px solid var(--wp--custom--overlay--light--3) !important;
  border-top-color: var(--wp--preset--color--white) !important;
  border-radius: 50% !important;
  animation: smf-spin 0.8s linear infinite !important;
}

@keyframes smf-spin {
  to {
    transform: rotate(360deg);
  }
}

/* レスポンシブ対応 */
@media (max-width: 782px) {
  .s-010 {
    padding-top: var(--wp--preset--spacing--xl);
    padding-bottom: var(--wp--preset--spacing--xl);
    background-color: transparent;
  }

  .s-010 .c-heading-001__08-subtitle {
    font-size: var(--wp--preset--font-size--xl);
  }

  .s-010 .c-form-001 {
    padding: var(--wp--preset--spacing--lg);
  }

  .s-010 .snow-monkey-form .smf-form .smf-item {
    padding: var(--wp--preset--spacing--base) !important;
  }

  .s-010 .snow-monkey-form .smf-item__label {
    font-size: var(--wp--preset--font-size--base) !important;
  }

  .s-010 .snow-monkey-form .smf-item__col--label,
  .s-010 .snow-monkey-form .smf-item__col--controls {
    display: block !important;
    width: 100% !important;
  }

  .s-010 .snow-monkey-form .smf-button-control .smf-button-control__control {
    min-width: 240px !important;
    font-size: var(--wp--preset--font-size--lg) !important;
  }
}

@media (max-width: 480px) {
  .s-010 {
    padding-top: var(--wp--preset--spacing--lg);
    padding-bottom: var(--wp--preset--spacing--lg);
  }

  .s-010 .c-heading-001__08-title {
    font-size: var(--wp--preset--font-size--3-xl);
    text-align: center;
  }

  .s-010 .c-heading-001__08-subtitle {
    font-size: var(--wp--preset--font-size--lg);
    text-align: center;
  }

  .s-010 .c-form-001 {
    padding: var(--wp--preset--spacing--base);
  }

  .s-010 .snow-monkey-form .smf-form .smf-item {
    padding: var(--wp--preset--spacing--sm) !important;
  }

  .s-010 .snow-monkey-form .smf-button-control .smf-button-control__control {
    width: 100% !important;
    min-width: auto !important;
    padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg) !important;
    font-size: var(--wp--preset--font-size--base) !important;
  }
}