/* /public/css/mall/ver_20251201/cartItemList.css */

/* =========================================
   1. 초기화 및 공통 스타일 (라이브러리 대체)
   ========================================= */
   * {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
    line-height: 1.5;
}

/* 숫자 입력 화살표 제거 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; margin: 0; 
}

/* 버튼 공통 스타일 리셋 */
button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* 레이아웃 랩퍼 */
.cart-page-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px 140px 16px; /* 하단 바 가림 방지 여백 */
}

/* 타이틀 */
.cart-page-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 10px;
}

.cart-page-sub {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

/* =========================================
   2. 공급자(Vendor) 박스 스타일
   ========================================= */
.vendor-box {
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #fff;
    margin-bottom: 24px;
    overflow: hidden; /* 자식 요소 둥글게 처리 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 공급자 헤더 */
.vendor-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.vendor-header .vendor-check {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

.vendor-name {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

/* 품질인증 뱃지 */
.badge-chip {
    display: inline-block;
    background-color: #f0f7ff;
    color: #007bff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    border: 1px solid #cce5ff;
}

/* =========================================
   3. 상품 리스트 및 옵션
   ========================================= */
.cart-item {
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
}
.cart-item:last-child {
    border-bottom: none;
}

/* 상품 헤더 (이미지 + 이름) */
.product-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.product-header img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
    margin-right: 16px;
}

.product-name {
    font-size: 16px;
    font-weight: 500;
}

/* 옵션 행 (회색 박스) */
.cart-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #f9f9f9;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #eee;
}

.item-check {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.option-name {
    flex: 1; /* 남은 공간 차지 */
    font-size: 14px;
    color: #444;
    min-width: 200px; /* 좁아져도 글자 확보 */
    margin-right: 10px;
}

/* 가격 및 수량 영역 */
.option-price {
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
    text-align: right;
}

.line-through {
    text-decoration: line-through;
    color: #999;
    font-weight: normal;
    margin-right: 6px;
    font-size: 12px;
}

/* 수량 조절 버튼 그룹 */
.qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
}

.qty-control button {
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    color: #555;
}
.qty-control button:hover {
    background-color: #f0f0f0;
}

.qty-control input {
    width: 40px;
    height: 28px;
    text-align: center;
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 14px;
    color: #333;
}

/* 삭제 버튼 */
.deleteButton {
    color: #ff4d4f;
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #ffe5e5;
    background-color: #fff1f0;
    border-radius: 4px;
}

/* 상품별 소계 */
.product-summary {
    text-align: right;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}
.product-summary span {
    color: #111;
    font-weight: bold;
}

/* =========================================
   4. 공급자별 요약 (하단 회색 박스)
   ========================================= */
.vendor-summary {
    background-color: #f8f9fa;
    padding: 20px;
    border-top: 1px solid #eee;
}

.stats {
    display: flex;
    justify-content: space-around; /* 간격 균등 배치 */
    margin-bottom: 20px;
    text-align: center;
    flex-wrap: wrap;
    gap: 10px;
}

.stat-title {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.stat-value.text-success {
    color: #00b300; /* 할인 금액 초록색 */
}

/* 벤더 버튼 그룹 */
.vendor-summary .text-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 벤더별 버튼 스타일 (클래스 직접 지정) */
.vendor-delete-selected-btn, 
.vendor-delete-all-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #555;
    background-color: #fff;
}
.vendor-delete-all-btn {
    color: #e03131;
    border-color: #ffc9c9;
}

.vendor-order-btn {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
}
.vendor-order-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 전체 삭제 버튼 (하단) */
#deleteAllButton {
    display: block;
    margin-left: auto;
    border: 1px solid #ccc;
    padding: 8px 16px;
    background-color: #fff;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}


/* =========================================
   5. 모바일 하단 고정 바 (Sticky Footer)
   ========================================= */
.mobile-summary-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    z-index: 999;
    border-top: 1px solid #ddd;
    display: none; /* JS 제어 또는 미디어 쿼리로 보임 */
    flex-direction: column;
}

/* 토글 헤더 */
.summary-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: #fff;
}

.toggle-text {
    font-size: 14px;
    color: #555;
}
.toggle-total {
    font-size: 18px;
    font-weight: bold;
    color: #d63031; /* 강조색 레드 */
    margin-left: auto;
    margin-right: 10px;
}
.toggle-icon {
    font-size: 12px;
    color: #999;
    transition: transform 0.3s;
    transform: rotate(180deg);
}

/* 상세 내용 (펼쳐짐) */
.summary-content {
    background-color: #fafafa;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}
.mobile-summary-bar.expanded .summary-content {
    max-height: 500px; /* 충분히 크게 */
    border-bottom: 1px solid #eee;
}
.mobile-summary-bar.expanded .toggle-icon {
    transform: rotate(180deg);
}

.summary-content .line {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
}
.summary-content .line.order-big {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    border-top: 1px dashed #ccc;
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: 20px;
}
.summary-content .line.order-big strong {
    color: #d63031;
}

/* =========================================
   6. PC 하단 바 (Floating Pill + 분리 주문버튼)
   ========================================= */
.pc-summary-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
}
.pc-summary-bar.active {
    display: block;
}

/* 토글 + 주문버튼 가로 배치 (간격 분리) */
.pc-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-summary-toggle {
    background-color: #2d3436;
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    transition: all 0.2s;
}
.pc-summary-toggle:hover {
    background-color: #3d4446;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

/* PC 전체주문 버튼 - 별도 pill */
.pc-order-btn {
    background: #5a6acf;
    color: #fff;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(90,106,207,0.35);
    transition: all 0.2s;
}
.pc-order-btn:hover {
    background: #4a59b5;
    box-shadow: 0 8px 28px rgba(90,106,207,0.45);
    transform: translateY(-1px);
}

.pc-toggle-text strong {
    font-size: 20px;
    color: #fab1a0;
    margin-left: 10px;
}
.pc-toggle-icon {
    margin-left: 15px;
    font-size: 12px;
}

/* PC 팝업 */
.pc-summary-popup {
    position: absolute;
    bottom: 70px; /* 버튼 위 */
    left:-20px;
    width: 320px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}
.pc-summary-bar.expanded .pc-summary-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.pc-popup-header {
    padding: 12px 16px;
    background: #f1f2f6;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.pc-popup-content {
    padding: 16px;
}
.pc-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}
.pc-line.order-big {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ccc;
    font-weight: bold;
    font-size: 18px;
    color: #d63031;
}

/* HTML 코드상의 .content-btn (기본 주문버튼) 숨기기 */
/* 하단 바를 사용할 것이므로 숨김 처리 */
.content-btn {
    display: none;
}


/* =========================================
   7. 반응형 미디어 쿼리
   ========================================= */
@media (max-width: 600px) {
    /* 모바일 */
    .mobile-summary-bar { display: flex; }
    .pc-summary-bar { display: none !important; }

    .cart-page-wrap { padding: 0 10px 100px 10px; }
    .cart-option-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .option-name {
        margin-bottom: 8px;
        width: 100%;
    }
    .option-price {
        margin-left: 0;
        margin-bottom: 8px;
    }
    .qty-control {
        margin-bottom: 8px;
    }
    .deleteButton {
        align-self: flex-end; /* 우측 정렬 */
    }
    
    .stats {
        flex-direction: column; /* 세로 정렬 */
    }
    .stat {
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px dashed #eee;
        padding-bottom: 5px;
    }
}

@media (min-width: 601px) {
    /* PC */
    .mobile-summary-bar { display: none !important; }
}

/* =========================================
   [수정] 전체 주문하기 버튼 스타일 (기존 display: none 삭제함)
   ========================================= */
   .content-btn {
    display: none !important; /* PC/모바일 하단바에 주문버튼 통합했으므로 숨김 */
}

/* 모바일 하단바 주문 버튼 */
.mobile-order-btn {
    display: block;
    width: 100%;
    padding: 18px 0;
    background: #5a6acf;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    letter-spacing: -0.3px;
}
.mobile-order-btn:active {
    background: #4a59b5;
}

#orderButton {
    display: inline-block;
    width: 100%;
    max-width: 400px; /* 너무 길어지지 않게 제한 */
    padding: 18px 0;
    background-color: #111; /* 진한 검정색 */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#orderButton:hover {
    background-color: #333; /* 호버 시 약간 연하게 */
    transform: translateY(-2px); /* 살짝 위로 떠오르는 효과 */
}

/* 모바일에서는 content-btn 숨김 */
@media (max-width: 600px) {
    .content-btn {
        display: none !important;
    }
}


/* =========================================
   8. 장바구니 비었을 때
   ========================================= */
   .empty-cart-view {
    text-align: center;
    padding: 100px 20px;
    background-color: #fff;
    border-radius: 12px;
    /* border: 1px dashed #eee; (원하면 테두리 추가) */
}

.empty-icon-area {
    margin-bottom: 24px;
}

.empty-icon-area svg {
    /* 아이콘 색상 및 크기 */
    stroke: #d1d5db; /* 연한 회색 */
    width: 80px;
    height: 80px;
}



.empty-cart-view h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.empty-cart-view p {
    font-size: 14px;
    color: #888;
    margin-bottom: 40px;
}

.btn-go-home {
    display: inline-block;
    padding: 14px 40px;
    background-color: #333; /* 검정 버튼 */
    color: #fff;
    text-decoration: none; /* a태그 밑줄 제거 */
    border-radius: 50px; /* 둥근 알약 모양 */
    font-weight: bold;
    font-size: 15px;
    transition: background-color 0.3s;
}

.btn-go-home:hover {
    background-color: #555;
}