/* RETTRE 예약 폼 스타일 - 모바일 최적화 */

* {
  box-sizing: border-box;
}

 /* ✅ [추가] 결제하기 버튼 로딩 스타일 */
.btn-submit.btn-loading {
  position: relative;
  color: transparent !important; /* 원래 글씨를 투명하게 만듦 */
  cursor: wait;
}

.btn-submit.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px; /* 스피너 크기 */
  height: 24px; /* 스피너 크기 */
  margin-top: -12px; /* 스피너를 중앙으로 */
  margin-left: -12px; /* 스피너를 중앙으로 */
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: btn-spinner 0.8s linear infinite;
}
.btn-people.disabled {
  background-color: #f8f9fa !important;
  border-color: #e9ecef !important;
  color: #ced4da !important;
  cursor: not-allowed;
  text-decoration: line-through;
}
.no-slots {
  grid-column: 1 / -1; /* 그리드의 첫 번째 열부터 마지막 열까지 모두 차지 */
  text-align: center;  /* 차지한 공간 내에서 텍스트를 가운데 정렬 */
  padding: 20px 0;     /* 보기 좋게 상하 여백 추가 (선택 사항) */
}
@keyframes btn-spinner {
  to {
      transform: rotate(360deg);
  }
}
.rettre-reservation-form {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  padding: 0;
}

.rettre-reservation-form h1 {
  background: #fff;
  margin: 0;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 로그인 안내 */
.login-notice {
  margin: 20px;
  padding: 20px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 12px;
}

.login-notice h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #856404;
}

.login-notice p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #856404;
  line-height: 1.5;
}

.btn-login, .btn-register {
  display: inline-block;
  padding: 12px 20px;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.btn-register {
  background: #666;
  margin-left: 8px;
}

/* Step 구조 */
.rettre-step {
  padding: 24px 20px; font-size: 15px;
  border-bottom: 8px solid #f8f9fa;
}

.rettre-step h2 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 인원 선택 */
.btn-people-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.btn-people {
  padding:10px 18px;
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 12px;
  font-size: 14px!important;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-people:hover,
.btn-people.active {
  border-color: #333;
  background: #333;
  color: #fff;
}

/* 달력 스타일 (완전 재설계) */
#rettre-datepicker-wrap {
  margin-bottom: 20px;
}

.flatpickr-calendar {
  width: 100% !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Flatpickr 기본 네비게이션 완전 숨김 */
.flatpickr-months .flatpickr-prev-month:not(.rettre-custom),
.flatpickr-months .flatpickr-next-month:not(.rettre-custom),
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  display: none !important;
  visibility: hidden !important;
}

.flatpickr-months {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 60px !important;
  height: 60px !important;
}

.flatpickr-current-month {
  position: static !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #333 !important;
  flex: 1 !important;
  line-height: 1 !important;
}

/* 커스텀 화살표 버튼 스타일 */
.rettre-custom {
  z-index: 30 !important;
}

.rettre-prev-btn,
.rettre-next-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  background: transparent !important;
  font-size: 20px !important;
  font-weight: bold !important;
  color: #333 !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 30 !important;
  user-select: none !important;
  transition: background-color 0.2s ease !important;
}

.rettre-prev-btn {
  left: 20px !important;
}

.rettre-next-btn {
  right: 20px !important;
}

.rettre-prev-btn:hover,
.rettre-next-btn:hover {
  background: #f1f3f4 !important;
}

.flatpickr-weekdays {
  background: #f8f9fa !important;
  padding: 12px 0 !important;
}

.flatpickr-weekday {
  font-weight: 600 !important;
  color: #666 !important;
  font-size: 14px !important;
  text-align: center !important;
}

.flatpickr-days {
  width: 100% !important;
}

.flatpickr-day {
  width: calc(100% / 7) !important;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 12px !important;
  margin: 2px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: #333 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.flatpickr-day:hover {
  background: #f1f3f4 !important;
  border-color: #f1f3f4 !important;
}

.flatpickr-day.selected {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}

.flatpickr-day.today {
  background: #e9ecef !important;
  color: #333 !important;
  font-weight: 600 !important;
}

.flatpickr-day.disabled {
  color: #ccc !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

.flatpickr-day.disabled:hover {
  background: transparent !important;
}

/* 주간 행 정렬 */
.flatpickr-weeks {
  width: 100% !important;
}

.flatpickr-week {
  display: flex !important;
  width: 100% !important;
}

/* 시간 선택 */
#rettre-time-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.btn-time {
  padding: 16px 8px;
  border: 1px solid #E5E7EB;
  background: #fff;
  border-radius: 12px;
  font-size: 14px!important;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-time:hover,
.btn-time.active {
  border-color: #333;
  background: #333;
  color: #fff;
}

.time-unit-notice {
  text-align: center;
  color: #666;
  font-size: 12px;
  margin-top: 12px;
}

/* 클래스 선택 */
.class-section {
  margin-bottom: 32px;
  border-bottom: 1px solid #DFDFDF;
  overflow: hidden;
}

.class-section h3 {
  margin: 0;
   
  
  font-size: 16px!important;
  font-weight: 600!important;
  color: #333;
   
}

.class-section p {
  margin: 0;
 
  font-size: 14px;
  color: #666;
  line-height: 1.5;
   
}




.product-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  
}

.product-line:last-child {
  border-bottom: none;
}

.product-line span {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

/* 수량 조절 */
.qty-control {
  display: flex;
  align-items: center;
  gap: 12px; max-width: 110px; border: 1px solid #E5E7EB; border-radius:7px;
}
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=search], input[type=date], input[type=number], textarea, .woocommerce input#coupon_code {
  padding-top: 10px!important;
  padding-bottom: 10px!important;
  padding-right: 0px!important;
  padding-left: 10px!important;
  line-height: 1em;
  text-align: center!important;}

  .container-wrap input[type=number] {border-width: 0px!important;}
.qty-minus,
.qty-plus {
  width: 36px;
  height: 36px;
  border: 0px solid #e9ecef;
  background: #fff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.qty-minus:hover,
.qty-plus:hover {
 
}

.qty-input {
  width: 50px;
  height: 36px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #fff;
}

/* 총 금액 */
.total-price {
  background: #fff;
  padding: 20px;
  margin: 20px;
  border-radius: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

#total-price {
  color: #e74c3c;
  font-size: 24px;
}

/* 이미지 업로드 */
.image-upload-section {
  margin: 32px 0;
  
 
  border-radius: 16px;
  
}

.image-upload-section h3 {
  font-size: 16px!important;
  font-weight: 600!important;
  margin: 0 0 8px 0;
  color: #333;
}

.image-upload-section p {
  font-size: 14px;
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.upload-drop-zone {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

.upload-drop-zone:hover,
.upload-drop-zone.dragover {
  border-color: #333;
  background: #f8f9fa;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.upload-drop-zone p {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
}

.upload-drop-zone small {
  font-size: 12px;
  color: #999;
}

/* 이미지 미리보기 */
#image-preview {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

.image-preview-item {
  position: relative;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.image-preview-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}

.remove-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-name {
  display: block;
  padding: 4px;
  font-size: 8px;
  color: #666;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 동의사항 */
.notices {
  padding: 0px;
 
  margin: 0px 0px 40px 0px;
  border-radius: 16px;
  
}

.notices p {
  margin: 14px 0 16px 0; 
  font-size: 12px;
  color: #666;
}

.notices label {  border-bottom:1px dashed #EFEFEF; padding-bottom:15px; padding-top:10px; font-weight: 600 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 15px!important;
  color: #333;
  line-height: 1.5;
  cursor: pointer;
}

.notices input[type="checkbox"] {
  margin: 0;
  transform: scale(1.2);
}

/* 결제 버튼 */
.btn-submit {
  width: calc(100% - 40px);
  margin: 0 20px 40px 20px;
  padding: 20px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-submit:hover {
  background: #555;
}

.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 반응형 */
@media (max-width: 480px) {
  .rettre-reservation-form {
    max-width: 100%;
  }
  
  .btn-people-wrap {
    grid-template-columns: repeat(5, 1fr);
  }
  
  #rettre-time-slots {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .flatpickr-day {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 14px !important;
  }
  .btn-people {
    padding: 10px!important;
    border: 1px solid #e9ecef!important;
    background: #fff;
    border-radius: 5px!important;
    font-size: 14px!important;
  
}
.btn-time {
  padding: 10px 4px!important;
  border:1px solid #e9ecef!important;
 
  border-radius: 5px!important;
  font-size: 15px!important;

 
}

}



/* 커스텀 달력 스타일 */
.custom-calendar {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ececec;
  overflow: hidden;
}

/* 달력 헤더 */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}

.month-year {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex: 1;
  text-align: center;
}

.nav-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.nav-btn:hover {
  background: #e9ecef;
}

.nav-btn:active {
  background: #dee2e6;
}

/* 요일 헤더 */
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}

.weekday {
  padding: 12px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #666;
}

.weekday:first-child {
  color: #e74c3c; /* 일요일 빨간색 */
}

.weekday:last-child {
  color: #3498db; /* 토요일 파란색 */
}

/* 날짜 그리드 */
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fff;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

/* 날짜 상태별 스타일 */
.calendar-day:hover:not(.disabled) {
  background: #f1f3f4;
}

.calendar-day.today {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: 600;
}

.calendar-day.selected {
  background: #333;
  color: #fff;
}

.calendar-day.disabled {
  color: #ccc;
  cursor: not-allowed;
  background: #fff;
}

.calendar-day.other-month {
  color: #bbb;
}

.calendar-day.other-month.disabled {
  color: #e9ecef;
}

/* 일요일/토요일 색상 */
.calendar-day:nth-child(7n+1):not(.disabled):not(.selected) {
  color: #e74c3c; /* 일요일 */
}

.calendar-day:nth-child(7n):not(.disabled):not(.selected) {
  color: #3498db; /* 토요일 */
}

/* 선택된 날짜 우선순위 */
.calendar-day.selected {
  background: #333 !important;
  color: #fff !important;
}

/* 반응형 */
@media (max-width: 480px) {
  .custom-calendar {
    max-width: 100%;
  }
  
  .calendar-header {
    padding: 15px;
  }
  
  .month-year {
    font-size: 16px;
  }
  
  .nav-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .calendar-day {
    font-size: 14px;
    min-height: 40px;
  }
  
  .weekday {
    padding: 10px 4px;
    font-size: 12px;
  }
}

/* 기존 Flatpickr 스타일 덮어쓰기 */
.flatpickr-calendar {
  display: none !important;
}

#rettre-datepicker {
  display: none !important;
}

/* 달력 컨테이너 */
#rettre-datepicker-wrap {
  margin-bottom: 20px;
}

/* 로딩 상태 */
.calendar-loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

/* 오류 상태 */
.calendar-error {
  text-align: center;
  padding: 40px;
  color: #e74c3c;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  margin: 20px 0;
}

/* 애니메이션 */
.calendar-day {
  transition: all 0.15s ease-in-out;
}

.calendar-day:active:not(.disabled) {
  transform: scale(0.95);
}

/* 접근성 개선 */
.calendar-day:focus {
  outline: 2px solid #333;
  outline-offset: -2px;
}

.nav-btn:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}


/* 이미지 업로드 스타일 (booking-style.css에 추가) */

/* 이미지 업로드 섹션 */
.image-upload-section {
  margin: 24px 0;
}

.image-upload-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333;
}

.image-upload-section p {
  font-size: 14px;
  color: #666;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

/* 업로드 영역 */
.image-upload-area {
  position: relative;
}

/* 드롭존 */
.upload-drop-zone {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
  position: relative;
}

.upload-drop-zone:hover {
  border-color: #333;
  background: #f5f5f5;
}

.upload-drop-zone.dragover {
  border-color: #333;
  background: #e9ecef;
  transform: scale(1.02);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.upload-drop-zone p {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
}

.upload-drop-zone small {
  font-size: 12px;
  color: #999;
}

/* 이미지 미리보기 컨테이너 */
#image-preview-container {
  margin-top: 24px;
  animation: fadeIn 0.3s ease;
}

#image-preview-container h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

/* 이미지 그리드 */
#image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

/* 이미지 아이템 */
.image-preview-item {
  position: relative;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: all 0.2s ease;
  animation: slideIn 0.3s ease;
}

.image-preview-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.image-preview-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* 이미지 정보 */
.image-info {
  padding: 8px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.image-name {
  display: block;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.image-size {
  display: block;
  font-size: 11px;
  color: #999;
}

/* 삭제 버튼 */
.remove-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}

.image-preview-item:hover .remove-image {
  opacity: 1;
}

.remove-image:hover {
  background: rgba(231, 76, 60, 0.9);
  transform: scale(1.1);
}

/* 애니메이션 */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes slideIn {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* 반응형 */
@media (max-width: 480px) {
  #image-preview-grid {
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 8px;
  }
  
  .image-preview-item img {
      height: 80px;
  }
  
  .upload-drop-zone {
      padding: 30px 15px;
  }
  
  .upload-icon {
      font-size: 36px;
  }
  
  .image-info {
      padding: 6px;
  }
  
  .image-name {
      font-size: 11px;
  }
  
  .image-size {
      font-size: 10px;
  }
}