/**
 * Auth Modal - 登录/注册弹窗样式
 * 双栏布局：左侧品牌展示，右侧表单
 */

@layer component {
  /* ========================================
   弹窗容器样式
   ======================================== */

  /* 让 modal 容器不占据布局空间 */
  theme-modal.auth-modal {
    display: contents;
  }

  /* 隐藏整个 details 容器，因为触发器在 top-bar 中 */
  theme-modal.auth-modal > details {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* 当 modal 打开时恢复显示 */
  theme-modal.auth-modal > details[open] {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    pointer-events: auto;
  }

  /* 原始 details 容器在内容被移动后隐藏 */
  theme-modal.auth-modal > details[data-modal-mounted="true"] {
    display: none;
  }

  /* 弹窗触发器 */
  .auth-modal__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    list-style: none;
  }

  .auth-modal__trigger::-webkit-details-marker {
    display: none;
  }

  /* 弹窗内容容器 - 使用双 class 选择器提高优先级，覆盖 modal 组件的 width: auto */
  .auth-modal__content.modal__content {
    display: flex;
    max-width: 1200px;
    width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    border-radius: 8px;
  }

  /* 关闭按钮 */
  .auth-modal__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: rgb(var(--color-text));
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    transition: background-color 0.2s ease;
  }

  .auth-modal__close:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .auth-modal__close svg {
    width: 16px;
    height: 16px;
  }

  /* 弹窗包装器 */
  .auth-modal__wrapper {
    display: flex;
    width: 100%;
  }

  /* ========================================
   左侧品牌展示区域
   ======================================== */

  .auth-modal__brand {
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    /* 背景图通过 HTML inline style 设置，使用 asset_url() 引用 */
  }

  .auth-modal__brand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* 品牌名称 - 使用草书/手写风格 */
  .auth-modal__brand-title {
    margin: 0 0 28px;
    font-family:
      "Dancing Script", "Brush Script MT", cursive, var(--sort-title-font);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #c68635;
    text-align: center;
  }

  /* 品牌标语 */
  .auth-modal__brand-tagline {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    margin-block-end: 120px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #c68635;
    text-transform: uppercase;
    background-color: rgba(198, 134, 53, 0.15);
    border-radius: 30px;
  }

  .auth-modal__brand-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #c68635;
    border-radius: 50%;
  }

  /* 特色卖点列表 */
  .auth-modal__features {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .auth-modal__feature {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .auth-modal__feature-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 32px;
    min-height: 32px;
  }

  .auth-modal__feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .auth-modal__feature-icon svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .auth-modal__feature-text {
    font-size: 16px;
    font-weight: 600;
    color: #c68635;
  }

  /* ========================================
   右侧表单区域
   ======================================== */

  .auth-modal__form-container {
    flex: 0 0 50%;
    padding: 40px;
    overflow-y: auto;
    background-color: rgb(var(--color-background));
  }

  /* 表单标题 */
  .auth-modal__form-title {
    margin: 0 0 24px;
    font-family:
      "Dancing Script", "Brush Script MT", cursive, var(--sort-title-font);
    font-size: 36px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    color: #c68635;
    text-align: center;
  }

  /* 标签切换 */
  .auth-modal__tabs {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-block-end: 28px;
  }

  .auth-modal__tab {
    padding: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgb(var(--color-light-text));
    text-transform: uppercase;
    cursor: pointer;
    background: transparent;
    border: none;
    border-block-end: 2px solid transparent;
    transition: all 0.2s ease;
  }

  .auth-modal__tab:hover {
    color: #c68635;
  }

  .auth-modal__tab.active {
    color: #c68635;
    border-block-end-color: #c68635;
  }

  /* 表单容器 */
  .auth-modal__form {
    width: 100%;
  }

  .auth-modal__form.hidden {
    display: none;
  }

  /* 表单字段样式覆盖 */
  .auth-modal__form-container .field {
    margin-block-end: 16px;
    background-color: transparent;
    border: 1px solid rgb(var(--color-entry-line));
    border-radius: 4px;
  }

  .auth-modal__form-container .field:focus-within {
    border-color: #c68635;
  }

  .auth-modal__form-container .field__input {
    padding: 16px 14px 6px;
    font-size: 14px;
    background-color: transparent;
  }

  .auth-modal__form-container .field__input::placeholder {
    font-size: 12px;
    color: rgb(var(--color-light-text));
  }

  .auth-modal__form-container .field__label {
    font-size: 12px;
    color: rgb(var(--color-light-text));
  }

  /* PC端字段label样式 */
  .auth-modal__field-label {
    margin: 0 0 8px;
    font-size: 12px;
    color: rgb(var(--color-light-text));
    font-size: 16px;
    color: #C68635;
  }
  #event-day::-webkit-calendar-picker-indicator {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('https://example.com/calendar-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
    cursor: pointer;
}
  /* 日期和下拉选择器的后缀图标 */
  .auth-modal__form-container .field__suffix {
    padding-inline-end: 14px;
    color: rgb(var(--color-light-text));
  }

  .auth-modal__form-container .field__suffix svg {
    width: 18px;
    height: 18px;
  }

  /* 日期输入框特殊样式 - 图标集成到输入框内 */
  .auth-modal__date-field .field__input {
    padding-inline-end: 45px;
    cursor: pointer;
  }

  .auth-modal__date-field .field__inner {
    position: relative;
    overflow: visible;
  }

  .auth-modal__date-field theme-input-date-en {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
  }

  /* 确保日历不被遮挡 */
  .auth-modal__date-field {
    overflow: visible;
    z-index: 1;
  }

  .auth-modal__date-field .field__inner::after {
    position: absolute;
    inset-inline-end: 14px;
    inset-block-start: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    content: "";
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_431_3048)'%3E%3Cpath d='M20.5412 3.52139H18.4529V2.675C18.4529 2.12656 18.01 1.68359 17.4615 1.68359C16.9131 1.68359 16.4701 2.12656 16.4701 2.675V3.52139H8.53887V2.675C8.53887 2.12656 8.0959 1.68359 7.54746 1.68359C6.99902 1.68359 6.55605 2.12656 6.55605 2.675V3.52139H4.4625C2.82246 3.52139 1.48828 4.85557 1.48828 6.49561V22.3291C1.48828 23.9691 2.82246 25.3033 4.4625 25.3033H20.5438C22.1839 25.3033 23.5181 23.9691 23.5181 22.3291V6.49561C23.5154 4.85557 22.1813 3.52139 20.5412 3.52139ZM4.4625 5.5042H6.55605V6.76455C6.55605 7.31299 6.99902 7.75596 7.54746 7.75596C8.0959 7.75596 8.53887 7.31299 8.53887 6.76455V5.5042H16.4701V6.76455C16.4701 7.31299 16.9131 7.75596 17.4615 7.75596C18.01 7.75596 18.4529 7.31299 18.4529 6.76455V5.5042H20.5412C21.087 5.5042 21.5326 5.9498 21.5326 6.49561V8.81855H3.47109V6.49561C3.47109 5.9498 3.91406 5.5042 4.4625 5.5042ZM20.5412 23.3205H4.4625C3.9167 23.3205 3.47109 22.8749 3.47109 22.3291V10.804H21.5353V22.3317C21.5326 22.8749 21.0896 23.3205 20.5412 23.3205Z' fill='%23999999'/%3E%3Cpath d='M18.1761 13.1406H6.27656C5.72812 13.1406 5.28516 13.5836 5.28516 14.132C5.28516 14.6805 5.72812 15.1234 6.27656 15.1234H18.1761C18.7245 15.1234 19.1675 14.6805 19.1675 14.132C19.1675 13.5836 18.7219 13.1406 18.1761 13.1406ZM18.1761 17.9421H6.27656C5.72812 17.9421 5.28516 18.3851 5.28516 18.9335C5.28516 19.4819 5.72812 19.9249 6.27656 19.9249H18.1761C18.7245 19.9249 19.1675 19.4819 19.1675 18.9335C19.1675 18.3851 18.7219 17.9421 18.1761 17.9421Z' fill='%23999999'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_431_3048'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* 下拉选择器特殊样式 */
  .auth-modal__select-field .field__input--select {
    padding-inline-end: 40px;
    cursor: pointer;
    appearance: none;
  }

  /* 复选框 */
  .auth-modal__checkbox {
    margin-block-end: 20px;
  }

  .auth-modal__checkbox-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
  }

  .auth-modal__checkbox-label .field-checkbox {
    flex-shrink: 0;
    margin-block-start: 2px;
  }

  .auth-modal__checkbox-text {
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
  }

  /* 提交按钮 */
  .auth-modal__submit {
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #fff;
    text-transform: uppercase;
    background-color: #c68635;
    border: none;
    border-radius: 10px;
    transition: background-color 0.2s ease;
  }

  .auth-modal__submit:hover {
    background-color: #b5762e;
  }

  .auth-modal__submit:active {
    background-color: #a46927;
  }

  /* PC端提交按钮样式 */
  @media (min-width: 960px) {
    .modal__close-control {
      background-color: #fff !important;
      border: none !important;
    }
    .auth-modal__submit {
      background-color: #c68635 !important;
      color: #fff !important;
    }

    .auth-modal__submit:hover {
      background-color: #b5762e !important;
      color: #fff !important;
    }

    .auth-modal__submit:active {
      background-color: #a46927 !important;
      color: #fff !important;
    }
  }

  /* 条款说明 */
  .auth-modal__terms {
    margin-block-start: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: rgb(var(--color-light-text));
    color: #666666 !important;
    text-align: left;
  }

  .auth-modal__terms a {
    color: rgb(var(--color-text));
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .auth-modal__terms a:hover {
    color: #c68635;
  }

  /* 忘记密码链接 */
  .auth-modal__forgot-password {
    margin-block-end: 20px;
    text-align: right;
  }

  .auth-modal__forgot-password a {
    font-size: 13px;
    color: rgb(var(--color-light-text));
    text-decoration: none;
  }

  .auth-modal__forgot-password a:hover {
    color: #c68635;
    text-decoration: underline;
  }

  /* ========================================
   第三方登录
   ======================================== */

  .auth-modal__social {
    margin-block-start: 28px;
  }

  /* 分隔线 */
  .auth-modal__social-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 24px;
  }

  .auth-modal__social-divider::before,
  .auth-modal__social-divider::after {
    flex: 1;
    height: 1px;
    content: "";
    background-color: rgb(var(--color-entry-line));
  }

  .auth-modal__social-divider span {
    padding-inline: 16px;
    font-size: 13px;
    color: rgb(var(--color-light-text));
    white-space: nowrap;
  }

  /* 社交登录按钮 */
  .auth-modal__social-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
  }

  .auth-modal__social-btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #333;
    text-decoration: none;
    background-color: #f4f4f4;
    border: 1px solid rgb(var(--color-entry-line));
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  .auth-modal__social-btn:hover {
    background-color: #f5f5f5;
    border-color: #999;
  }

  .auth-modal__social-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Google 按钮 */
  .auth-modal__social-btn--google {
    /* Google 品牌色 */
  }

  /* Facebook 按钮 */
  .auth-modal__social-btn--facebook svg {
    color: #1877f2;
  }

  /* ========================================
   响应式设计
   ======================================== */

  @media (max-width: 959px) {
    /* 移动端：弹窗全屏，垂直布局 */
    .auth-modal__content {
      flex-direction: column;
      max-width: 100%;
      max-height: 100vh;
      border-radius: 0;
    }

    .auth-modal__wrapper {
      flex-direction: column;
      height: 100%;
    }

    /* 左侧品牌区域 - 移动端简化 */
    .auth-modal__brand {
      flex: 0 0 auto;
      padding: 30px 20px;
    }

    .auth-modal__brand-title {
      font-size: 32px;
      margin-block-end: 16px;
    }

    .auth-modal__brand-tagline {
      padding: 8px 16px;
      margin-block-end: 20px;
      font-size: 10px;
    }

    .auth-modal__features {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
    }

    .auth-modal__feature {
      flex: 0 0 auto;
      gap: 8px;
    }

    .auth-modal__feature-icon {
      width: 20px;
      height: 20px;
    }

    .auth-modal__feature-text {
      font-size: 12px;
    }

    /* 右侧表单区域 */
    .auth-modal__form-container {
      flex: 1;
      padding: 24px 20px;
      overflow-y: auto;
    }

    .auth-modal__form-title {
      font-size: 28px;
      margin-block-end: 16px;
    }

    .auth-modal__tabs {
      gap: 30px;
      margin-block-end: 20px;
    }

    .auth-modal__tab {
      font-size: 12px;
    }

    /* 社交登录按钮 */
    .auth-modal__social-buttons {
      flex-direction: column;
      gap: 12px;
    }

    .auth-modal__social-btn {
      width: 100%;
      min-width: auto;
    }
  }

  /* 平板端优化 */
  @media (min-width: 600px) and (max-width: 959px) {
    .auth-modal__social-buttons {
      flex-direction: row;
    }

    .auth-modal__social-btn {
      width: auto;
      min-width: 140px;
    }
  }

  /* ========================================
   动画效果
   ======================================== */

  /* 注意：弹窗动画由 modal 组件统一控制，不要在这里定义 animation */

  /* 标签切换动画 */
  .auth-modal__form {
    transition: opacity 0.2s ease;
  }

  /* 输入框聚焦动画 */
  .auth-modal__form-container .field {
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .auth-modal__form-container .field:focus-within {
    box-shadow: 0 0 0 2px rgba(198, 134, 53, 0.1);
  }

  /* ========================================
   密码输入框眼睛图标样式
   ======================================== */

  .auth-modal__form-container .input-password {
    display: flex;
    align-items: center;
  }

  .auth-modal__form-container .input-password__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgb(var(--color-light-text));
    cursor: pointer;
    background: transparent;
    border: none;
    text-decoration: none;
  }

  .auth-modal__form-container .input-password__button:hover {
    color: rgb(var(--color-text));
  }

  .auth-modal__form-container .input-password__icon-show,
  .auth-modal__form-container .input-password__icon-hide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .auth-modal__form-container .input-password__icon-show svg,
  .auth-modal__form-container .input-password__icon-hide svg {
    width: 18px;
    height: 18px;
  }
} /* end @layer component */