/* ============================================
 * nfts.css - NFTs Page専用スタイル
 * ============================================ */

/* ウォレットアイコンのスタイリング */
.nfts-wallet-icon {
	width: 50px;
}

/* NFTギャラリーのスタイリング */
.nfts-gallery-wrapper {
	width: 100%;
}

.nfts-gallery-wrapper .row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.nfts-gallery-wrapper .nft {
	cursor: pointer;
	transition: transform 0.2s ease;
}

.nfts-gallery-wrapper .nft:hover {
	transform: scale(1.05);
}

.nfts-gallery-wrapper .nft img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.nfts-gallery-wrapper .nft:hover img {
	border-color: #4a3afd;
}

/* NFT詳細表示のスタイリング */
#nfts-detail-nft-image,
#nfts-send-nft-image {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* テーブルのスタイリング */
.nfts-table-wrapper table {
	width: 100%;
	border-collapse: collapse;
}

.nfts-table-wrapper th,
.nfts-table-wrapper td {
	padding: 12px 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.nfts-table-wrapper th {
	background-color: #2c3e50;
	color: white;
	font-weight: bold;
}

.nfts-table-wrapper td:first-child {
	font-weight: bold;
	color: #666;
	width: 40%;
}

/* QRリーダーのスタイリング */
.nfts-qrreader {
	width: 100%;
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 100%;
}

.nfts-qrreader-video {
	background-color: #000;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scaleX(-1); /* 左右反転（ミラー表示） */
}

.nfts-wrap-canvas {
	display: none;
}

.nfts-qrpadding {
	padding: 8px;
	background-color: #fff;
}

/* Selected NFT Display */
#nfts-selected-nft-display {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

#nfts-selected-nft-display img {
	max-width: 80px;
	max-height: 80px;
	border-radius: 8px;
}

/* NFT一覧のグリッドレイアウト */
#nfts-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.5rem;
	padding: 0;
	margin: 0;
}

#nfts-list .nft {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	padding: 0;
	margin: 0;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f5;
}

#nfts-list .nft-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	padding: 0;
	margin: 0;
}

/* BVFN (BitVoy Founder NFT) の強調表示スタイル */
.nft-bvfn {
	border: 2px solid #4a3afd;
	box-shadow: 0 0 10px rgba(74, 58, 253, 0.3);
}

.nft-bvfn:hover {
	transform: scale(1.02);
	box-shadow: 0 0 15px rgba(74, 58, 253, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#nfts-list .nft:hover {
	transform: scale(1.02);
	transition: transform 0.2s ease;
}

/* Import NFTボタンのスタイリング */
#nfts-viewNFT .actions {
	margin-top: 20px;
}

#nfts-viewNFT .actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: normal;
	text-align: center;
}

/* レスポンシブ対応 */
@media screen and (max-width: 736px) {
	#nfts-list {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 0.5rem;
	}
	
	.nfts-wallet-icon {
		width: 40px;
	}
}