/**
 * nhp-account-login.css —— 账户登录页【移动端专用】适配样式
 *
 * 用途：仅为登录页（catalog/view/template/account/login.twig）的两列
 *       (登录 / 注册) 做移动端堆叠与触摸友好优化。
 *
 * 隔离原则（务必遵守，避免影响 PC 端与其它页面）：
 *   1. 所有规则统一包裹在 @media (max-width:1024px) 内，
 *      PC 端 (≥1025px) 完全不受影响，沿用主题原有左右两列布局。
 *   2. 选择器一律以 #customer_login 作用域起始，
 *      避免波及结算页(checkout)等同样使用 .col2-set 的页面。
 *   3. 仅借助主题已有语义类名(.u-column1/.u-column2/.input-text 等)，
 *      不修改 twig 结构、不改表单 name/id/action，登录逻辑不变。
 *   4. 颜色沿用现有绿色主题(按钮 #747F62 / 主色 var(--nhp-green))，
 *      仅调整堆叠、宽度、间距与触摸目标尺寸，不滥用 !important。
 */

@media (max-width: 1024px) {
  /* ===== 1. 两列堆叠为单列 ===== */
  /* 主题默认 .col2-set{display:flex} 使两列并排；
     这里用 #customer_login 提升特异性覆盖为纵向堆叠，无需 !important。 */
  #customer_login.col2-set {
    display: block;
  }

  /* 两列均占满宽度并去除主题的 50% 弹性与左右内边距 */
  #customer_login .u-column1,
  #customer_login .u-column2 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* 登录列与注册列之间留出舒适竖向间距，并用细线分隔，风格统一 */
  #customer_login .u-column1 {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(44, 76, 59, 0.12);
  }

  /* 外层包裹增加左右内边距，避免内容贴边 */
  .customer_login_form_wrap {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* ===== 2. 输入框：宽度自适应 + 触摸友好 ===== */
  /* 字号 16px 防止 iOS 聚焦时自动缩放；高度≥44px 满足触摸目标 */
  #customer_login .woocommerce-form-row .input-text {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  /* 聚焦时使用绿色主题描边，保留可访问的焦点提示 */
  #customer_login .woocommerce-form-row .input-text:focus {
    border-color: var(--nhp-green, #2c4c3b);
    outline: none;
  }

  /* 密码输入框外层容器铺满整行，保证“显示密码”图标定位正确 */
  #customer_login .password-input {
    display: block;
    position: relative;
    width: 100%;
  }

  /* ===== 3. Remember me 行与提交按钮：小屏不拥挤 ===== */
  /* 该行(.form-row 非 wide)主题设为 flex，这里允许换行并加间距 */
  #customer_login .woocommerce-form-login > .form-row:not(.woocommerce-form-row--wide) {
    flex-wrap: wrap;
    gap: 12px 14px;
    padding-top: 8px;
  }

  /* ===== 4. 按钮：触摸友好 ===== */
  /* 登录提交按钮与注册按钮统一最小高度与字号，居中显示 */
  #customer_login .woocommerce-button,
  #customer_login .woocommerce-form-login__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    font-size: 16px;
    box-sizing: border-box;
  }

  /* “忘记密码”链接增大可点击区域 */
  #customer_login .lost_password {
    margin-top: 14px;
  }

  #customer_login .lost_password a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* ===== 手机端(≤575px)：进一步让按钮整宽，操作更顺手 ===== */
@media (max-width: 575px) {
  /* 提交按钮整宽并置于该行顶部，Remember me 自动换到下一行 */
  #customer_login .woocommerce-form-login__submit.button {
    width: 100%;
    order: 1;
    padding-left: 0;
    padding-right: 0;
  }

  /* 注册按钮整宽，便于点击 */
  #customer_login .woocommerce-form-register__submit {
    width: 100%;
  }

  /* 适度减小标题与外层内边距，提升小屏空间利用率 */
  .customer_login_form_wrap {
    padding-left: 8px;
    padding-right: 8px;
  }
}