/* assets/css/reserve.css */

/* 전체 컨테이너 여백 및 폰트 설정 */
body {
   font-family: 'Noto Sans KR', sans-serif;
   background-color: #f9f9f9;
}
.container-fluid {
   padding: 0px 40px;
}

/* 예약 폼 카드 스타일 */
.reserve-card {
   background-color: #ffffff;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 30px;
   margin-bottom: 20px;
}
.reserve-card h3 {
   font-size: 1.5rem;
   margin-bottom: 20px;
   color: #333333;
}

/* 탭 스타일 커스터마이징 */
.nav-tabs .nav-link {
   color: #555555;
   font-weight: 500;
   border: none;
   border-bottom: 2px solid transparent;
   transition: all 0.2s ease-in-out;
   padding: 10px 15px;
}
.nav-tabs .nav-link.active {
   color: #007aff;
   border-bottom: 2px solid #007aff;
   background-color: transparent;
}
.nav-tabs .nav-link:hover {
   color: #007aff;
}

/* 폼 레이블 스타일 */
.form-label {
   font-weight: 500;
   color: #444444;
   margin-bottom: 6px;
}

/* 아코디언 버튼 스타일 (Bootstrap 기본 활용) */
.accordion-button {
   font-weight: 500;
   color: #333333;
}
.accordion-button:not(.collapsed) {
   color: #007aff;
   background-color: #f1f5f9;
}

/* 인원/수화물 카운터 스타일 */
.counter-group {
   display: flex;
   align-items: center;
   background-color: #f1f5f9;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   padding: 8px 12px;
   margin-bottom: 12px;
}
.counter-group span.label-text {
   flex: 1;
   font-weight: 500;
   color: #333333;
}
.counter-buttons {
   display: flex;
   align-items: center;
}
.btn-counter {
   width: 32px;
   height: 32px;
   border: 1px solid #cccccc;
   border-radius: 4px;
   background-color: #ffffff;
   color: #555555;
   font-size: 1.2rem;
   line-height: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: background-color 0.1s, border-color 0.1s;
}
.btn-counter:hover {
   background-color: #e6f0ff;
   border-color: #007aff;
   color: #007aff;
}
.count-display {
   width: 28px;
   text-align: center;
   font-weight: 500;
   color: #333333;
   margin: 0 8px;
}

/* 즐겨찾기 셀렉트 박스 스타일 */
.form-select {
   border: 1px solid #cccccc;
   border-radius: 4px;
   padding: 6px 12px;
   background-color: #ffffff;
   color: #333333;
   transition: border-color 0.2s;
}
.form-select:focus {
   border-color: #007aff;
   box-shadow: 0 0 0 0.1rem rgba(0, 122, 255, 0.25);
}

/* 일반 입력 필드 스타일 */
.form-control {
   border: 1px solid #cccccc;
   border-radius: 4px;
   padding: 6px 12px;
   transition: border-color 0.2s;
}
.form-control:focus {
   border-color: #007aff;
   box-shadow: 0 0 0 0.1rem rgba(0, 122, 255, 0.25);
}

/* 날짜 입력 필드 높이 고정 */
input[type='date'] {
   height: 38px;
}

/* 예약하기 버튼 스타일 */
.btn-reserve {
   background-color: #007aff;
   border: none;
   border-radius: 4px;
   font-size: 1rem;
   padding: 12px 0;
   font-weight: 600;
   transition: background-color 0.2s;
}
.btn-reserve:hover {
   background-color: #005bb5;
}

/* 지도 컨테이너 스타일 */
#map {
   width: 100%;
   height: 700px;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #dddddd;
}

/* 경로 정보 텍스트 스타일 */
#routeInfo {
   font-size: 0.9rem;
   color: #555555;
   margin-top: 8px;
}

/* 게스트 입력 영역 스타일 */
.guest-info input {
   margin-top: 8px;
   margin-bottom: 12px;
}

/* 1. 부모 컨테이너 flex로 설정해 좌우 영역 높이 따로 움직이도록 함 */
.row.align-top {
   display: flex;
   align-items: flex-start;
}

/* 2. 왼쪽 폼 영역 스크롤 처리 */
.left-form-wrapper {
   max-height: calc(100vh - 100px);
   overflow-y: auto;
}

/* 3. 오른쪽 지도 고정 높이 */
#map {
   width: 100%;
   height: calc(100vh - 100px);
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #dddddd;
}

/* 4. 주소 검색 레이어 기본 스타일 */
.postcode-layer {
   display: none;
   position: absolute;
   z-index: 1000;
   width: 100%;
   height: 300px;
   border: 1px solid #ddd;
   background-color: #fff;
}

/* 5. 입력 필드 래퍼: position-relative 지정해야 레이어가 입력창 밑에 위치함 */
.addr-wrapper {
   position: relative;
}

/* 6. 주소 입력 필드 스타일 (readonly 표시) */
.address-input {
   background-color: #f8f9fa;
   cursor: pointer;
}

/* 7. 반응형: 작은 화면에서 높이 조정 */
@media (max-width: 767px) {
   .left-form-wrapper {
      max-height: calc(100vh - 80px);
   }
   #map {
      height: calc(100vh - 80px);
   }
}