/* site-input-neumorphism-20260830
 * 参考 Uiverse 柔和浮雕输入框，并换成中国书画石的米白、暖棕与棕金视觉。
 * 仅处理文字类输入控件；复选框、开关、单选、上传、滑块、按钮和隐藏字段保持原样。
 */
:root{
  --site-input-surface:#f3ede4;
  --site-input-surface-focus:#efe6da;
  --site-input-ink:#4f4338;
  --site-input-placeholder:#9b8c7e;
  --site-input-line:rgba(111,82,55,.16);
  --site-input-line-focus:rgba(156,103,51,.55);
  --site-input-shadow-dark:rgba(97,70,45,.16);
  --site-input-shadow-light:rgba(255,255,255,.82);
  --site-input-focus-ring:rgba(167,113,57,.13)
}

html body :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  textarea
):not([hidden]){
  box-sizing:border-box;
  border:1px solid var(--site-input-line);
  border-radius:12px;
  background-color:var(--site-input-surface);
  color:var(--site-input-ink);
  box-shadow:5px 5px 13px var(--site-input-shadow-dark),-5px -5px 13px var(--site-input-shadow-light),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .2s ease
}

html body :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"]
):not([hidden]){min-height:44px}

html body :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  textarea
):not([hidden]):focus{
  outline:0;
  border-color:var(--site-input-line-focus);
  background-color:var(--site-input-surface-focus);
  box-shadow:inset 5px 5px 13px rgba(97,70,45,.18),inset -5px -5px 13px rgba(255,255,255,.8),0 0 0 3px var(--site-input-focus-ring)
}

html body :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea
)::placeholder{color:var(--site-input-placeholder);opacity:1}

html body :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  textarea
):disabled{
  cursor:not-allowed;
  opacity:.58;
  box-shadow:inset 2px 2px 6px rgba(97,70,45,.11),inset -2px -2px 6px rgba(255,255,255,.65)
}

/* 带图标或清除按钮的复合搜索框：浮雕由完整外框承载，内部 input 保持透明。 */
html body :is(.catalog-search,.order-search,.search-box,.video-title-search){
  border:1px solid var(--site-input-line);
  border-radius:12px;
  background-color:var(--site-input-surface);
  box-shadow:5px 5px 13px var(--site-input-shadow-dark),-5px -5px 13px var(--site-input-shadow-light),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease
}
html body :is(.catalog-search,.order-search,.search-box,.video-title-search):focus-within{
  border-color:var(--site-input-line-focus);
  background-color:var(--site-input-surface-focus);
  box-shadow:inset 5px 5px 13px rgba(97,70,45,.18),inset -5px -5px 13px rgba(255,255,255,.8),0 0 0 3px var(--site-input-focus-ring)
}
html body :is(.catalog-search,.order-search,.search-box,.video-title-search)>input[type="search"],
html body :is(.catalog-search,.order-search,.search-box,.video-title-search)>input[type="search"]:focus{
  min-height:0;
  border:0;
  border-radius:inherit;
  background-color:transparent;
  box-shadow:none;
  outline:0
}

/* 表单已有的正确、错误校验色继续拥有最高可见优先级。 */
html body .phone-field.valid input{
  border-color:#57956d;
  box-shadow:inset 4px 4px 10px rgba(72,116,84,.1),inset -4px -4px 10px rgba(255,255,255,.78),0 0 0 3px rgba(75,155,105,.1)
}
html body .phone-field.invalid input,
html body .request-field.is-invalid input,
html body .request-field.is-invalid textarea{
  border-color:#b74b40;
  background-color:#fff8f5;
  box-shadow:inset 4px 4px 10px rgba(157,71,59,.08),inset -4px -4px 10px rgba(255,255,255,.78),0 0 0 3px rgba(157,71,59,.1)
}

/* 浏览器自动填充不使用突兀的黄色。 */
html body input:-webkit-autofill{
  -webkit-text-fill-color:var(--site-input-ink);
  transition:background-color 9999s ease-out 0s
}

@media(max-width:620px){
  html body :is(
    input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
    input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"],
    input[type="month"],input[type="week"],input[type="time"],textarea
  ):not([hidden]){
    border-radius:10px;
    box-shadow:4px 4px 10px rgba(97,70,45,.14),-4px -4px 10px rgba(255,255,255,.76),inset 0 1px 0 rgba(255,255,255,.48)
  }
  html body :is(.catalog-search,.order-search,.search-box,.video-title-search){border-radius:10px;box-shadow:4px 4px 10px rgba(97,70,45,.14),-4px -4px 10px rgba(255,255,255,.76),inset 0 1px 0 rgba(255,255,255,.48)}
}

@media(prefers-reduced-motion:reduce){
  html body :is(input,textarea),html body :is(.catalog-search,.order-search,.search-box,.video-title-search){transition:none!important}
}