/* css/checkout-cart-sidebar.css */


/* PCレイアウト */
@media screen and (min-width: 768px) {
    /* サイドバー全体 */
    .l-sidebar {
        position: sticky;
        top: 20px;
        height: fit-content;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-radius: 8px;
    }
    
    /* 中身のコンテナ */
    .cart-sidebar-container {
        height: fit-content;
    }
}


/* スマホレイアウト */
@media screen and (max-width: 767px) {
    .l-sidebar {
        order: -1;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-radius: 8px;
    }
    
    /* 親要素にflexboxを適用 */
    .checkout-container {
        display: flex;
        flex-direction: column;
    }
}


.cart-sidebar-container {
    padding: 1.5rem;
    background: #fff;
}

.section-header {
    margin-bottom: 1.5rem;
}

.section-header .title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.cart-line-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

.cart-line-item .thumb {
    width: 80px;
    flex-shrink: 0;
}

.cart-line-item .thumb img {
    width: 100%;
    height: auto;
}

.line-item-info {
    flex-grow: 1;
}

.content-description .name {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.content-price {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.content-count {
    font-size: 0.9rem;
    color: #666;
}

.cart-subtotal-container {
    margin-top: 1.5rem;
}

.lines-subtotal > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.total-section {
    margin-top: 1.5rem;
}

.total-section hr {
    margin: 1rem 0;
    border: none;
    border-top: 1px solid #ddd;
}

.total {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-weight: bold;
    font-size: 1.1rem;
}

.shipping-fee-free {
    margin-top: 1.5rem;
}

.shipping-fee-button {
    width: 100%;
    padding: 0.8rem;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.shipping-fee-button:hover {
    background: #eee;
}

.shipping-fee-button .text {
    font-size: 0.9rem;
    color: #666;
}

.video-option-info {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.price-breakdown {
    font-size: 0.85em;
    color: #666;
    margin-top: 3px;
}

.cart-line-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

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


.woocommerce-order-received .cart-sidebar-container {
    display: none !important;
}