/********************************************
 * final_info.css
 *   - (A) final_info_container (레거시)
 *   - (B) paymentCompleteContainer (최신 수정)
 ********************************************/


/********************************************
 * (A) final_info_container (레거시)
 ********************************************/

 .final-info-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;       /* 레거시 */
    padding-bottom: 20px;   /* 레거시 */
    position: relative;
}
.final-info-left {
    width: 65%;
}
.final-info-right {
    width: 30%;
}
.final-info-section {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;          /* 레거시: 15px */
    margin-bottom: 15px;    /* 레거시: 15px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.final-info-section h3 {
    font-size: 1.1em;       /* 레거시 */
    margin-top: 5px;        /* 레거시 */
    margin-bottom: 15px;    /* 레거시 */
    color: #0a2752;
    border-bottom: 2px solid #0a2752;
    padding-bottom: 5px;    /* 레거시 */
}

/* (A-1) "입력 정보" */
#personal_info .info-row {
    margin-top: 5px;
    margin-bottom: 10px;
    line-height: 18px;
    display: flex;
    align-items: center;
}
#personal_info .info-value {
    line-height: 18px !important;
}

/* (A-2) "선택 스튜디오" */
#selected_studio_info .studio-info {
    margin: 0;
    padding: 0;
}

/* (A-3) 스튜디오/장비 카드 (레거시) */
.studio-card,
.equipment-card {
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;          /* 레거시 */
    margin-bottom: 0;       /* row-gap으로 대체 */
    display: flex;
    align-items: center;    /* 세로 가운데 정렬 */
    border: 1px solid #e0e0e0;
}
.studio-card img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    margin-right: 20px;
    border-radius: 5px;
}
.studio-info h4 {
    font-size: 1.2em;
    color: #333;
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 18px !important;
}

/* 공통 info-row */
.info-row {
    margin: 5px 0;          /* 상하 5px => 대칭 */
    display: flex;
    align-items: center;
    line-height: 18px;
}
.info-value {
    flex: 1;
    color: #333;
    font-size: 0.95em;
    font-weight: normal;
    line-height: 18px !important;
}

/* personal-info-label 폭=130px */
.personal-info-label {
    width: 130px !important;
    color: #666;
    font-size: 0.95em;
    font-weight: bold;
    margin-right: 10px;
}

/* 기타 라벨 */
.studio-info-label {
    width: 100px;
    color: #666;
    font-size: 0.95em;
    font-weight: bold;
    margin-right: 10px;
}
.equipment-info-label {
    width: 50px;
    color: #666;
    font-size: 0.95em;
    font-weight: bold;
    margin-right: 10px;
}

/* (A-4) 장비 목록 (레거시) */
.equipment-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* row-gap=10px, col-gap=10px */
}
.equipment-card {
    box-sizing: border-box;
    /* PC/태블릿 => 2개, 모바일 => 1개 */
    width: 100%;
}
@media (min-width: 768px) {
    .equipment-card {
        width: calc(50% - 10px);
    }
}
.equipment-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-right: 15px;
}
.equipment-info {
    flex: 1;
    display: flex;               /* 부모 flex */
    flex-direction: column;
    justify-content: center;     /* 수직 중앙정렬 */
    align-items: flex-start;     /* 수평은 왼쪽 */
    height: 100%;
}
.equipment-info h4 {
    margin: 5px 0;  /* 상하 5px => 대칭 */
    font-size: 1em;
    color: #333;
}
.equipment-info .info-row {
    margin: 5px 0;  /* 상하 5px => 대칭 */
}

/* (A-5) 환불정책, 결제요약, 프로모션 메시지 */
.refund-policy {
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.refund-policy h4 {
    color: #0a2752;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1.1em;
    border-bottom: 2px solid #0a2752;
    padding-bottom: 5px;
}
.refund-policy p,
.refund-policy ul {
    font-size: 0.9em;
    color: #333;
    line-height: 1.6;
}
.refund-policy ul {
    padding-left: 0;
    list-style-type: none;
}
.refund-policy li {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
.refund-policy li span:first-child {
    font-weight: bold;
}

.payment-summary {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.payment-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.payment-label {
    color: #666;
}
.payment-value {
    font-weight: bold;
    color: #333;
}
.promo-code-input {
    display: flex;
    margin-top: 10px;
}
.promo-code-input input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
}
.promo-code-input button {
    padding: 5px 10px;
    background-color: #0a2752;
    color: white;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}
.payment-method {
    margin-top: 15px;
}
.payment-method h4 {
    margin-bottom: 5px;
    color: #0a2752;
}
.payment-method label {
    display: block;
    margin-bottom: 3px;
}
.pay-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #0a2752;
    color: white;
    border: none;
    border-radius: 0 0 8px 8px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -15px;
    width: calc(100% + 30px);
}
.pay-button:hover {
    background-color: #081d3e;
}

/* final_info_container */
#final_info_container {
    display: none;
    position: relative;
    z-index: 1;
    background-color: #f4f4f9;
    padding-top: 20px;
}

/* 반응형 (레거시) */
@media (max-width: 767px) {
    .final-info-container {
        flex-direction: column;
        width: 90%;
        margin: 10px auto;
        padding-bottom: 20px;
    }
    .final-info-left,
    .final-info-right {
        width: 100%;
    }
    .studio-card {
        flex-direction: column;
    }
    .studio-card img {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .studio-info {
        width: 100%;
    }
    .final-info-left {
        display: flex;
        flex-direction: column;
    }
    .final-info-section:nth-child(1) {
        order: 1;
    }
    .final-info-section:nth-child(2) {
        order: 2;
    }
    .final-info-section:nth-child(3) {
        order: 3;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .final-info-container {
        flex-direction: column;
        width: 85%;
        margin: 10px auto;
        padding-bottom: 20px;
    }
    .final-info-left,
    .final-info-right {
        width: 100%;
    }
}
@media (min-width: 1024px) {
    .final-info-container {
        width: 1020px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        padding-bottom: 30px;
    }
    #final_info_container {
        min-height: auto;
    }
}

/* 선택 장비 없으면 숨김 */
#selected_equipment_info:empty {
    display: none;
}
#selected_equipment_info:empty + .final-info-section {
    display: none;
}

/* 프로모션 메시지 (레거시) */
.invalid-code-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    font-size: 0.9em;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    font-size: 0.9em;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.info-message {
    color: #0000ff;
    font-size: 0.9em;
}
.discounted {
    color: #008000;
    font-weight: bold;
    transition: color 0.3s ease;
}
#promoCodeResult {
    margin-top: 10px;
    padding: 5px;
    border-radius: 5px;
}
.original-price {
    text-decoration: line-through;
    color: #aaa;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 5px;
}
.verifying-message {
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    font-size: 0.9em;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

/********************************************
 * (B) paymentCompleteContainer (최신 수정)
 ********************************************/

/* (모바일) => 한 줄(100%) */
.payment-complete-box {
  flex: 1 1 100% !important;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* payment-complete-wrapper 상단=20px, 하단=10px */
.payment-complete-wrapper {
  margin: 20px auto 10px auto;
  width: 90%;
  max-width: 800px;
  box-sizing: border-box;
  padding: 0 10px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .payment-complete-wrapper {
    width: 80%;
    max-width: none;
  }
}
@media (min-width: 1024px) {
  .payment-complete-wrapper {
    width: 800px;
  }
}

/* row */
.payment-complete-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap !important;
  gap: 10px;
  margin-bottom: 10px;
}

/* (1) => 2번째 row : 예약자=44% + 스튜디오=48%, 나머지= 50%-10px */
@media (min-width: 768px) {
  .payment-complete-row:not(:nth-of-type(2)) .payment-complete-box {
    flex: 1 1 calc(50% - 10px) !important;
  }
  .payment-complete-row:nth-of-type(2) .payment-complete-box:first-child {
    flex: 1 1 46% !important;
  }
  .payment-complete-row:nth-of-type(2) .payment-complete-box:last-child {
    flex: 1 1 46% !important;
  }
}

/* 박스 h3 => 좌측정렬 */
.payment-complete-box h3 {
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #0a2752;
  border-bottom: 2px solid #0a2752;
  padding-bottom: 4px;
  text-align: left;
}

/* line1: payment-complete-result-va => 하단 10px 마진 */
.payment-complete-result-va {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: left;
  margin-bottom: 10px;
}

/* (2) result-title => 카드 vs. 가상계좌 클래스 분기
   => 기존 텍스트 제거 후, content: 로 삽입 */
.result-title {
  background: none !important;
  text-align: center !important;
  margin: 0 0 20px 0;  /* 하단 20px */
  padding: 5px 0 15px 0;
  border-bottom: 2px solid #0a2752;
}
.result-title.card::after {
  content: "감사합니다! 결제가 완료되었습니다.";
  font-size: 1.1em;
  font-weight: bold;
  color: #0a2752;
}
.result-title.va::after {
  content: "감사합니다! 가상 계좌 입금시 예약이 확정됩니다.";
  font-size: 1.1em;
  font-weight: bold;
  color: #0a2752;
}

/* 공통 label => 폭=130px, 좌측정렬 */
.result-label {
  width: 130px !important;
  text-align: left !important;
  color: #666 !important;
  font-weight: bold;
}
.result-row,
.va-row,
.info-row {
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  line-height: 18px;
}

/* paymentCompleteVA 상단마진=30px */
#paymentCompleteVA {
  margin-top: 30px !important;
}

/* pmc-result-content => 70% */
.pmc-result-content {
  width: 70%;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
.result-value {
  color: #555;
  font-weight: normal;
  text-align: left !important;
}

/* (1) paymentCompleteDue 우측 => '(12시간 후)' 작게·흐리게 */
#paymentCompleteDue {
  position: relative;
  margin-right: 5px; /* 혹시 약간 여유 */
}
#paymentCompleteDue::after {
  content: " (12시간 후)";
  font-size: 0.85em;
  color: #999;
  margin-left: 4px;
}

/* 가상계좌 */
.va-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  text-align: left;
}
.va-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #0a2752;
  margin-top: 10px;
  margin-bottom: 8px;
  border-bottom: 2px solid #0a2752;
  padding-bottom: 4px;
  text-align: left;
}
.va-row .result-label {
  width: 130px !important;
  text-align: left !important;
  color: #666 !important;
  font-weight: bold;
}
.va-row .result-value {
  text-align: left !important;
  color: #555;
}

/* va-notice => 당구장 기호(※), margin-left=130px, 0.85em, 회색 */
.va-notice {
  display: block;
  margin-left: 130px !important;
  font-size: 0.85em;
  color: #999;
}
.va-notice::before {
  content: "※ ";
  color: #999;
  font-size: 0.85em;
  margin-right: 3px;
}

/* 예약자 정보 => line-height:1.4, font-size:1em */
#paymentCompletePersonal {
  margin-top: 20px;
  line-height: 1.4;
  font-size: 1em;
}

/* paymentCompleteStudio */
#paymentCompleteStudio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#paymentCompleteStudio img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  vertical-align: middle;
  margin-top: 10px; /* 상단 마진 */
}
#paymentCompleteStudio .studio-info {
  display: flex;
  flex-direction: column;
  font-size: 1.0em;
  line-height: 1.4;
  color: #333;
}

/* paymentCompleteEquipment 컨테이너 */
#paymentCompleteEquipmentBox {
  width: 100%;
  margin-top: 0;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* paymentCompleteEquipment → flex for .paid-equipment-card */
#paymentCompleteEquipment {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px;
  justify-content: flex-start;
  font-size: 1.0em;
  line-height: 1.4;
}

/* (3) paid-equipment-card => 한 줄 2개 => calc(50% - 10px); 모바일 => 1개 */
#paymentCompleteEquipment .paid-equipment-card {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  font-size: 1.0em;
  margin-bottom: 0; /* row-gap 사용 */
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
}
@media (max-width: 767px) {
  #paymentCompleteEquipment .paid-equipment-card {
    flex: 0 0 100% !important;
  }
}
@media (min-width: 768px) {
  #paymentCompleteEquipment .paid-equipment-card {
    flex: 0 0 calc(50% - 10px) !important;
  }
}
#paymentCompleteEquipment .paid-equipment-card img {
  width: 60px;
  height: 60px;
  margin-right: 15px !important;
  object-fit: contain;
  border-radius: 3px;
}
#paymentCompleteEquipment .equipment-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 수평 왼쪽 */
  justify-content: center;  /* 수직 가운데 */
  font-size: 1.0em;
  line-height: 1.4;
}
#paymentCompleteEquipment .equipment-info h4 {
  margin: 5px 0;  /* 상하 5px => 대칭 */
  font-size: 1.0em;
  color: #333;
}
#paymentCompleteEquipment .equipment-info .info-row {
  margin: 5px 0;  /* 상하 5px => 대칭 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 18px;
}
/* label=70px */
#paymentCompleteEquipment .equipment-info-label {
  width: 70px !important;
  color: #666;
  font-size: 1.0em;
  font-weight: bold;
  margin-right: 8px;
  text-align: left;
}
#paymentCompleteEquipment .info-value {
  color: #333;
  font-size: 1.0em;
  font-weight: normal;
  text-align: left !important;
}

/* 로딩 스피너 (공용) */
@keyframes spinnerRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 0.2em solid #ccc;
    border-top: 0.2em solid #0a2752;
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
    margin-left: 6px;
}