/*
 Theme Name: Astra Child
 Theme URI: https://wpastra.com/
 Description: Child theme for Astra
 Author: Your Name
 Author URI: https://yourwebsite.com/
 Template: astra
 Version: 1.0.0
*/

/* 전체 박스 */
.zillow-widget {
  width: 100%;
  text-align: center; /* 폼 전체를 가운데 배치 */
}

/* 폼 박스 */
.zillow-widget form {
  display: inline-block; /* 가운데 정렬된 박스 안에서만 쓰기 */
}

/* 입력 + 버튼 (가로 한 줄) */
.zillow-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

/* PC 입력창 */
.zillow-input {
  width: 420px;
  max-width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  box-sizing: border-box;
}

/* 버튼 */
.zillow-btn {
  padding: 16px 28px;
  cursor: pointer;
  background-color: #FB5FAB;
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  white-space: nowrap;
}

/* 안내 문구(흰색 + 왼쪽정렬 + 입력창 안쪽 텍스트와 정렬 맞춤) */
.zillow-label {
  width: 420px;
  max-width: 100%;
  margin: 4px auto 0;
  text-align: left;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 500;
  padding-left: 18px; /* 입력창 안쪽 텍스트 시작점과 맞추기 (input padding-left와 동일) */
}

/* 모바일 전용 레이아웃 수정 */
@media (max-width: 768px) {

  /* 폼 전체를 세로 한 줄 레이아웃으로 */
  .zillow-widget form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 입력 + 버튼 묶음 */
  .zillow-row {
    width: 100% !important;
    max-width: 90% !important;      /* 양쪽 살짝 여백 */
    display: flex !important;
    flex-direction: column !important;  /* 위: 인풋 / 아래: 버튼 */
    align-items: stretch !important;
    gap: 10px;
    margin: 0 auto 6px !important;
  }

  /* 입력 필드: 한 줄로 넓게 */
  .zillow-input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  /* 버튼: 입력 필드 아래, 가로 100% */
  .zillow-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  /* 안내 문구: 흰색, 왼쪽 정렬 */
  .zillow-label {
    width: 100% !important;
    max-width: 90% !important;
    margin: 4px auto 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500;
    text-align: left !important;
    padding-left: 4px;
  }
}