/**
 * sinopak/inquiry-modal block styles
 *
 * Premium light panel (v2): frosted deep-navy overlay + white hairline
 * panel with layered soft shadows. The old full-bleed brand gradient is
 * gone — brand colour now appears only as whispers (orange kicker rule,
 * close-button hover, navy focus rings, the CTA). Navy-on-white reads
 * quieter and higher-end; a faint cyan glow in the top corner keeps the
 * panel from feeling flat.
 * State: .spk-x-open (toggled by view.js); .spk-x-inquiry-modal--static is
 * the editor/inserter preview mode (renders in flow instead of fixed).
 * Entrance animation is pure CSS — animations restart when display flips
 * from none, so no JS change is needed.
 */
@layer spk-block {
  .spk-x-inquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(6, 36, 74, 0.52);
    backdrop-filter: blur(7px) saturate(1.15);
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
  }
  .spk-x-inquiry-modal.spk-x-open {
    display: grid;
    animation: spk-modal-overlay-in 0.25s ease-out both;
  }

  .spk-x-inquiry-modal__panel {
    position: relative;
    width: min(760px, 94vw);
    max-height: 88vh;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(6, 36, 74, 0.08);
    border-radius: 16px;
    /* 右上角一抹淡青品牌微光(极弱径向),面板底色仍是白 */
    background:
      radial-gradient(460px 280px at 86% -60px, rgba(8, 168, 210, 0.09), transparent 70%),
      #ffffff;
    color: var(--spk-x-ink, #122231);
    box-shadow:
      0 1px 2px rgba(6, 36, 74, 0.06),
      0 14px 30px rgba(6, 36, 74, 0.1),
      0 42px 90px rgba(6, 36, 74, 0.24);
  }
  .spk-x-inquiry-modal.spk-x-open .spk-x-inquiry-modal__panel {
    animation: spk-modal-panel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* ── 关闭按钮:细描边圆钮,悬停旋转 90° ── */
  .spk-x-inquiry-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(6, 36, 74, 0.14);
    border-radius: 50%;
    background: rgba(244, 247, 249, 0.65);
    color: var(--spk-x-muted, #637381);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    padding-bottom: 2px;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease,
      border-color 0.18s ease, transform 0.22s ease;
  }
  .spk-x-inquiry-modal__close:hover,
  .spk-x-inquiry-modal__close:focus-visible {
    border-color: rgba(6, 36, 74, 0.35);
    background: #ffffff;
    color: var(--spk-x-ink, #122231);
    transform: rotate(90deg);
  }

  .spk-x-inquiry-modal__body {
    padding: clamp(30px, 4.6vw, 46px) clamp(22px, 4.6vw, 46px);
  }

  /* 橙色短条 + 大字距小写标签:安静的编辑感入口 */
  .spk-x-inquiry-modal__label {
    margin: 0 0 16px;
    color: var(--spk-x-accent, #f28a2e);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .spk-x-inquiry-modal__label::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    margin-right: 10px;
    vertical-align: 3px;
    background: var(--spk-x-accent, #f28a2e);
  }

  .spk-x-inquiry-modal__heading {
    margin: 0 0 12px;
    color: var(--spk-x-brand-dark, #071f49);
    font-size: clamp(26px, 2.6vw, 33px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }

  .spk-x-inquiry-modal .spk-x-inquiry-modal__text {
    color: var(--spk-x-muted, #637381);
    font-size: 15px;
    line-height: 1.65;
  }

  /* ── 内嵌表单:白色面板上切回浅色皮肤 ── */
  .spk-x-inquiry-modal .spk-x-lead-form {
    margin-top: 28px;
    padding: 28px 0 0;
    border: 0;
    border-top: 1px solid var(--spk-x-line, #dbe5ec);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .spk-x-inquiry-modal .spk-x-lead-form__field {
    color: var(--spk-x-ink, #122231);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }
  .spk-x-inquiry-modal .spk-x-lead-form input,
  .spk-x-inquiry-modal .spk-x-lead-form select,
  .spk-x-inquiry-modal .spk-x-lead-form textarea {
    border: 1px solid var(--spk-x-line, #dbe5ec);
    border-radius: 10px;
    padding: 13px 14px;
    background: #f8fafc;
    color: var(--spk-x-ink, #122231);
    font-size: 14px;
    transition: border-color 0.18s ease, background 0.18s ease,
      box-shadow 0.18s ease;
  }
  .spk-x-inquiry-modal .spk-x-lead-form input::placeholder,
  .spk-x-inquiry-modal .spk-x-lead-form textarea::placeholder {
    color: #8b98a6;
  }
  .spk-x-inquiry-modal .spk-x-lead-form input:focus,
  .spk-x-inquiry-modal .spk-x-lead-form select:focus,
  .spk-x-inquiry-modal .spk-x-lead-form textarea:focus {
    border-color: var(--spk-x-brand, #0b3569);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(11, 53, 105, 0.12);
    outline: 0;
  }
  .spk-x-inquiry-modal .spk-x-lead-form textarea {
    min-height: 96px;
  }
  .spk-x-inquiry-modal .spk-x-lead-form__assurance {
    color: var(--spk-x-muted, #637381);
  }
  .spk-x-inquiry-modal .spk-x-lead-form__status {
    color: var(--spk-x-brand, #0b3569);
  }
  .spk-x-inquiry-modal .spk-x-lead-form__cta {
    min-height: 48px;
    border-radius: 10px;
    background: var(--spk-x-accent, #f28a2e);
  }
  .spk-x-inquiry-modal .spk-x-lead-form__cta:hover {
    transform: translateY(-1px);
    background: #ff902d;
    box-shadow: 0 12px 26px rgba(242, 138, 46, 0.32);
  }

  /* Editor canvas / inserter preview: render in flow so the panel is visible. */
  .spk-x-inquiry-modal--static {
    position: static;
    display: grid;
    inset: auto;
    z-index: auto;
  }

  /* 入场动画:display none → grid 时动画自动重新播放,无需 JS 配合 */
  @keyframes spk-modal-overlay-in {
    from {
      opacity: 0;
    }
  }
  @keyframes spk-modal-panel-in {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
  }
}

@layer spk-responsive {
  @media (max-width: 760px) {
    .spk-x-inquiry-modal {
      padding: 14px;
    }
    .spk-x-inquiry-modal__body {
      padding: 28px 20px 24px;
    }
    .spk-x-inquiry-modal__close {
      top: 12px;
      right: 12px;
    }
  }
}