/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ========================================
   WooCommerce 주문 완료 페이지 스타일
   ======================================== */

/* 청구/배송 주소 섹션 숨기기 */
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-columns--addresses,
.woocommerce-view-order .woocommerce-customer-details,
.woocommerce-view-order .woocommerce-columns--addresses {
    display: none !important;
}


/* 주문 완료 메시지 */
.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 20px 24px;
    border-radius: 12px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
}

/* 주문 개요 테이블 */
.woocommerce-order-received .woocommerce-order-overview {
    background: #181818;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 30px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 0;
}

.woocommerce-order-received .woocommerce-order-overview li {
    margin: 0;
    border: none;
}

.woocommerce-info.bank-transfer-notice {
    border: 1px solid #333;
    border-radius: 12px;
}

.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block;
    color: #fff;
    font-size: 16px;
    margin-top: 4px;
}

/* 주문 상세 정보 */
.woocommerce-order-received .woocommerce-order-details {
    background: #181818;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.woocommerce-order-received .woocommerce-order-details__title {
    color: #fff;
    font-size: var(--h3);
    font-weight: 800;
    margin: 0 0 20px 0;
    padding-bottom: 16px;
}

.woocommerce-order-received .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
    padding: 12px 0;
    color: #aaa;
    text-align: left;
}

.woocommerce-order-received .woocommerce-table--order-details th {
    color: #888;
    font-weight: 500;
}

.woocommerce-order-details table .product-quantity {
    background-color: rgba(255, 255, 255, 0.3);
}

.woocommerce-order-received .woocommerce-table--order-details .product-name {
    color: #fff;
}

.woocommerce-order-received .woocommerce-table--order-details .amount {
    color: #fff;
    font-weight: 600;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
    color: #fff;
    background: transparent !important;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot tr {
    background: transparent !important;
}

/* 소계, 총계, 결제 방법 행 스타일링 */
.woocommerce-order-received .order_details tfoot th,
.woocommerce-order-received .order_details tfoot td,
.woocommerce-order-received .shop_table tfoot th,
.woocommerce-order-received .shop_table tfoot td {
    background: #181818 !important;
    color: #aaa;
    padding: 12px 16px;
}

.woocommerce-order-received .shop_table tfoot tr:last-child th,
.woocommerce-order-received .shop_table tfoot tr:last-child td {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

/* 테이블 전체 배경 */
.woocommerce-order-received .shop_table,
.woocommerce-order-received .order_details {
    background: #181818 !important;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-order-received .shop_table thead,
.woocommerce-order-received .order_details thead {
    background: #222 !important;
}

.woocommerce-order-received .shop_table thead th,
.woocommerce-order-received .order_details thead th {
    background: #222 !important;
    color: #fff;
    padding: 14px 16px;
    font-weight: 600;
}

.woocommerce-order-received .shop_table tbody tr,
.woocommerce-order-received .order_details tbody tr {
    background: #181818 !important;
}

.woocommerce-order-received .shop_table tbody td,
.woocommerce-order-received .order_details tbody td {
    background: transparent !important;
    color: #aaa;
    padding: 12px 16px;
}

/* 상품 행 - 테이블 레이아웃 변경 */
.woocommerce-order-received .woocommerce-table--order-details tbody .order_item {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid #333;
}

.woocommerce-order-received .woocommerce-table--order-details tbody .order_item td {
    display: block;
    padding: 0;
    width: 100%;
    border: none;
}

/* 상품명 + 수량 헤더 스타일 */
.woocommerce-order-received .woocommerce-table--order-details .product-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.woocommerce-order-received .woocommerce-table--order-details .product-quantity {
    background: var(--primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* 상품 가격 - 숨기기 
.woocommerce-order-received .woocommerce-table--order-details .product-total,
.woocommerce-view-order .woocommerce-table--order-details .product-total {
    display: none !important;
    grid-column: 1 / -1; 
}*/

/* 상품명 열 100% 너비 차지 */
.woocommerce-order-received .woocommerce-table--order-details .product-name,
.woocommerce-view-order .woocommerce-table--order-details .product-name {
    width: 100%;
}

.woocommerce-order-received .woocommerce-table--order-details tbody {
    position: relative;
}

.woocommerce-order-details table {
    border-color: #333;
}

.woocommerce-order-details table tfoot {
    background-color: #000;
}

.woocommerce-order-details table tfoot tr {
    border-bottom: 1px solid #333;
}

/* 상품 메타 정보 (예약자, 연락처 등) - 3열 그리드 레이아웃 */
.woocommerce-order-received .wc-item-meta,
.woocommerce-view-order .wc-item-meta {
    list-style: none;
    padding: 16px;
    margin: 0;
    margin-top: var(--space-xs);
    background: #181818;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
}

.woocommerce-order-received .wc-item-meta li,
.woocommerce-view-order .wc-item-meta li {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.woocommerce-order-received .wc-item-meta li strong,
.woocommerce-view-order .wc-item-meta li strong {
    color: #666;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-order-received .wc-item-meta li p,
.woocommerce-view-order .wc-item-meta li p {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

/* 결제 상세 섹션 */
.woocommerce-order-received section.woocommerce-order-details+section {
    background: #181818;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.woocommerce-order-received section h2 {
    color: #fff;
    font-size: var(--h3);
    font-weight: 800;
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #333;
}

.woocommerce-order-received section table {
    width: 100%;
}

.woocommerce-order-received section table th,
.woocommerce-order-received section table td {
    padding: 12px 0;
    color: #aaa;
}

.woocommerce-order-received section table th {
    text-align: left;
    color: #888;
}

.woocommerce-order-received section table a {
    color: var(--body-color);
    background: none;
    padding: 0;
}

/* 취소 버튼 */
.woocommerce-order-received .woocommerce-button--cancel {
    background: transparent;
    border: 1px solid #f85149;
    color: #f85149;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.woocommerce-order-received .woocommerce-button--cancel:hover {
    background: rgba(248, 81, 73, 0.15);
}

/* 계좌이체 은행 정보 */
.woocommerce-order-received .woocommerce-bacs-bank-details {
    background: #181818;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.woocommerce-order-received .wc-bacs-bank-details-heading {
    color: #fff;
    font-size: var(--h3);
    font-weight: 800;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #333;
}

/* 각 계좌 정보 카드 */
.woocommerce-order-received .wc-bacs-bank-details-account-name {
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 12px 0;
    padding: 0;
}

.woocommerce-order-received .wc-bacs-bank-details-account-name:first-of-type {
    margin-top: 0;
}

.woocommerce-order-received .wc-bacs-bank-details {
    list-style: none;
    padding: 16px;
    margin: 0 0 16px 0;
    background: #222;
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.woocommerce-order-received .wc-bacs-bank-details li {
    margin: 0;
    padding: 8px 0;
    color: #aaa;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.woocommerce-order-received .wc-bacs-bank-details li:first-child {
    padding-top: 0;
}

.woocommerce-order-received .wc-bacs-bank-details li:last-child {
    padding-bottom: 0;
}

.woocommerce-order-received .wc-bacs-bank-details li strong {
    color: #fff;
    font-weight: 600;
}

/* 반응형 */
@media (max-width: 768px) {
    .woocommerce-order-received .woocommerce-order-overview {
        grid-template-columns: 1fr 1fr;
    }

    .woocommerce-order-received .woocommerce-order-details,
    .woocommerce-order-received section {
        padding: 16px;
    }

    /* 모바일에서 메타 정보 2열로 */
    .woocommerce-order-received .wc-item-meta,
    .woocommerce-view-order .wc-item-meta {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .woocommerce-order-received .woocommerce-table--order-details .product-total {
        position: static;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #333;
    }
}

@media (max-width: 480px) {

    /* 모바일 작은 화면에서 1열로 */
    .woocommerce-order-received .wc-item-meta,
    .woocommerce-view-order .wc-item-meta {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ===================================
   결제 내역 테이블 (다크 모드)
   =================================== */
.payment-history {
    width: 100%;
    border-collapse: collapse;
    background: var(--darkbg-18);
    border-radius: 8px;
    overflow: hidden;
}

.payment-history-header {
    background: var(--darkbg-24);
}

.payment-history-th {
    padding: 12px;
    border-bottom: 2px solid var(--darkbg-24);
    color: #fff;
    font-weight: 600;
}

.payment-history-th-left {
    text-align: left;
}

.payment-history-th-right {
    text-align: right;
}

.payment-history-th-center {
    text-align: center;
}

.payment-history-td {
    padding: 12px;
    border-bottom: 1px solid var(--darkbg-24);
    color: #ddd;
}

.payment-history-td-right {
    text-align: right;
}

.payment-history-td-center {
    text-align: center;
}

.payment-history tbody tr:hover {
    background: var(--darkbg-24);
}

/* 결제 상태 배지 */
.payment-status {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
}

.payment-status-success {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.payment-status-refunded {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.payment-status-pending {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.payment-status-default {
    background: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
}

.payment-history-empty {
    color: #888;
    padding: 20px;
    text-align: center;
}

/* 반응형 */
@media (max-width: 768px) {

    .payment-history-th,
    .payment-history-td {
        padding: 8px;
        font-size: 14px;
    }

    .payment-status {
        font-size: 11px;
        padding: 2px 6px;
    }
}




/* ===================================
   My Account 주문 상세 테이블 UI 커스터마이징
   =================================== */

/* 1. 테이블 헤더 숨김 (깔끔한 리스트 형태를 위해) */
.woocommerce-table--order-details thead {
    display: none !important;
}

/* 2. 상품 행 레이아웃 변경 */
.woocommerce-table--order-details tbody tr {
    border-bottom: 1px solid #333;
}

/* 상품명 열: 100% 폭 차지, 블록 요소로 변경 */
.woocommerce-table--order-details tbody td.product-name {
    display: block !important;
    width: 100% !important;
    padding: 20px;
    border: none !important;
}

/* 상품명 텍스트 스타일 */
.woocommerce-table--order-details tbody td.product-name>a,
.woocommerce-table--order-details tbody td.product-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

/* 수량 표시 배지 스타일 */
.woocommerce-table--order-details .product-quantity {
    display: inline-block;
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    vertical-align: middle;
    margin-left: 8px;
    font-weight: normal;
}

/* 총계 열: 숨김 (사용자 요청) */
.woocommerce-table--order-details tbody td.product-total {
    display: none !important;
}

/* 3. 아이템 메타 정보 (예약일, 회차 등) 그리드 스타일링 */
.woocommerce-table--order-details .wc-item-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3열 그리드 */
    gap: 16px;
    background: #181818;
    /* 어두운 배경 */
    border: 1px solid #333;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 0;
    list-style: none;
}

.woocommerce-table--order-details .wc-item-meta li {
    display: flex;
    flex-direction: column;
    /* 라벨 위, 값 아래 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 메타 라벨 스타일 */
.woocommerce-table--order-details .wc-item-meta strong.wc-item-meta-label,
.woocommerce-table--order-details .wc-item-meta li strong {
    color: #888;
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 6px;
    float: none !important;
    /* 기존 float 제거 */
    display: block;
}

/* 메타 값 스타일 */
.woocommerce-table--order-details .wc-item-meta p,
.woocommerce-table--order-details .wc-item-meta li p,
.woocommerce-table--order-details .wc-item-meta li span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin: 0 !important;
    line-height: 1.4;
}

/* 4. 하단 요약(Foot) 스타일링 */
.woocommerce-table--order-details tfoot {
    background: transparent !important;
    border-top: 2px solid #333;
}

.woocommerce-table--order-details tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #333;
}

.woocommerce-table--order-details tfoot th {
    width: 30%;
    text-align: left;
    color: #aaa;
    font-weight: normal;
    padding: 0;
    border: none;
    font-size: var(--body-text);
}

.woocommerce-table--order-details tfoot td {
    width: 70%;
    text-align: right;
    color: #fff;
    font-weight: 600;
    padding: 0;
    border: none;
    font-size: 18px;
}

/* 마지막 총계 행 강조 */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    color: #fff;
    font-size: var(--h5);
    font-weight: 700;
}

/* 반응형: 모바일에서 메타 정보 2열 -> 1열 */
@media (max-width: 768px) {
    .woocommerce-table--order-details .wc-item-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .woocommerce-table--order-details .wc-item-meta {
        grid-template-columns: 1fr;
    }
}

.wc-block-components-radio-control .wc-block-components-radio-control__input,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
    padding: 4px !important;
}

.product-name {
    color: white;
}

/* WooCommerce 체크아웃 상품 옵션(.variation) 스타일 개선 */
/* 기존 인라인 스타일을 강제로 Grid로 변경하여 라벨/값 정렬 */
.woocommerce-checkout-review-order-table .product-name dl.variation {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 8px;
    row-gap: 4px;
    margin: 8px 0 0 0 !important;
    align-items: baseline;
    color: var(--pre-body);
}

.woocommerce-checkout-review-order-table .product-name dl.variation dt {
    grid-column: 1;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal;
    display: block !important;
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd {
    grid-column: 2;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd p {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.order-total td {
    display: flex;
    flex-direction: column;
}