/*
Theme Name: Flatsome Child - TCG Cards Market
Theme URI: https://tcgcardsmarket.com
Description: Pokemon TCG Cards Market - Japan's Finest Pokemon Trading Card Game Store. Yellow & Black Edition.
Author: TCG Cards Market
Author URI: https://tcgcardsmarket.com
Template: flatsome
Version: 1.0
Text Domain: flatsome-child
License: GPL v2 or later
*/

/* ============================================
   POKEMON TCG DESIGN SYSTEM
   YELLOW & BLACK EDITION
   Inspired by Pokemon Trading Card Game
   Japan TCG Cards Market
   ============================================ */

/* === FONTS === */
@font-face {
	font-family: "PT Sans";
	font-style: normal;
	font-weight: 400;
	src: url("../tcgcardsmarket/assets/fonts/pt-sans/pt-sans-v18-latin-regular.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "PT Sans";
	font-style: normal;
	font-weight: 700;
	src: url("../tcgcardsmarket/assets/fonts/pt-sans/pt-sans-v18-latin-700.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Kanit";
	font-style: normal;
	font-weight: 700;
	src: url("../tcgcardsmarket/assets/fonts/kanit/kanit-v17-latin-700.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Kanit";
	font-style: italic;
	font-weight: 700;
	src: url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcr4uGiWgVQ.woff2) format("woff2");
	font-display: swap;
}

/* === CUSTOM PROPERTIES — YELLOW & BLACK === */
:root {
	--tcg-black: #000000;
	--tcg-yellow: #FFD700;
	--tcg-yellow-light: #FFF3B0;
	--tcg-yellow-dark: #B8960F;
	--tcg-yellow-btn: #FFC107;
	--tcg-white: #FFFFFF;
	--tcg-gray: #1A1A1A;
	--tcg-light-gray: #2A2A2A;
	--tcg-dark-gray: #999999;
	--tcg-font-body: "PT Sans", sans-serif;
	--tcg-font-heading: "Kanit", sans-serif;
	--tcg-border-radius: 4px;
	--tcg-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* === BODY === */
body {
	font-family: var(--tcg-font-body) !important;
	background: var(--tcg-black) !important;
	color: #e0e0e0 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6,
.heading-font, .alt-font,
.page-title,
.product-title,
.woocommerce-loop-product__title {
	font-family: var(--tcg-font-heading) !important;
	font-style: italic !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.03125em !important;
	text-transform: uppercase;
	color: var(--tcg-yellow) !important;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem) !important; }
h2 { font-size: clamp(2rem, 4vw, 3rem) !important; }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important; }

/* === HEADER === */
.header-wrapper {
	background: var(--tcg-black) !important;
	border-bottom: 2px solid var(--tcg-yellow) !important;
}

.header-wrapper .nav > li > a,
.header-wrapper .header-title,
.header-wrapper .nav > li > a > i {
	color: var(--tcg-white) !important;
	font-weight: 700 !important;
}

.header-wrapper .nav > li > a:hover,
.header-wrapper .nav > li.active > a {
	color: var(--tcg-yellow) !important;
}

.header-wrapper .header-button a {
	background: var(--tcg-yellow) !important;
	color: var(--tcg-black) !important;
	border-radius: var(--tcg-border-radius) !important;
	font-weight: 700 !important;
}

.header-wrapper .header-button a:hover {
	background: var(--tcg-yellow-dark) !important;
}

/* Top bar */
.top-bar {
	background: var(--tcg-gray) !important;
	color: var(--tcg-yellow) !important;
	font-size: 0.85rem;
	border-bottom: 1px solid #333;
}

.top-bar a {
	color: var(--tcg-yellow) !important;
}

/* === BUTTONS === */
.button, input[type='submit'], .wp-block-button__link,
.add_to_cart_button, .single_add_to_cart_button {
	font-family: var(--tcg-font-body) !important;
	font-weight: 700 !important;
	font-style: italic !important;
	border-radius: var(--tcg-border-radius) !important;
	box-shadow: var(--tcg-shadow) !important;
	transition: all 0.2s ease-in-out !important;
	letter-spacing: 0.03em !important;
}

.button.primary,
.add_to_cart_button,
.single_add_to_cart_button,
.wp-block-button__link:not(.is-style-outline) {
	background: var(--tcg-yellow) !important;
	color: var(--tcg-black) !important;
	border: 2px solid var(--tcg-yellow) !important;
}

.button.primary:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.wp-block-button__link:not(.is-style-outline):hover {
	background: var(--tcg-black) !important;
	color: var(--tcg-yellow) !important;
	border-color: var(--tcg-yellow) !important;
}

.button.secondary {
	background: var(--tcg-black) !important;
	color: var(--tcg-yellow) !important;
	border: 2px solid var(--tcg-yellow) !important;
}

.button.secondary:hover {
	background: var(--tcg-yellow) !important;
	color: var(--tcg-black) !important;
}

.button.white {
	background: var(--tcg-white) !important;
	color: var(--tcg-black) !important;
}

/* === LINKS === */
a {
	color: var(--tcg-yellow);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--tcg-yellow-light);
	text-decoration: underline;
}

/* === FOOTER === */
.footer-wrapper {
	background: var(--tcg-black) !important;
	color: #aaa !important;
	border-top: 3px solid var(--tcg-yellow) !important;
}

.footer-wrapper a {
	color: var(--tcg-yellow) !important;
}

.footer-wrapper a:hover {
	color: var(--tcg-yellow-light) !important;
}

.footer-wrapper .widget-title {
	color: var(--tcg-yellow) !important;
	font-family: var(--tcg-font-heading) !important;
}

/* === WOOCOMMERCE === */

/* Shop page background */
.woocommerce-page .page-wrapper {
	background: var(--tcg-black) !important;
}

/* Product box */
.product-box {
	background: var(--tcg-gray) !important;
	border-radius: var(--tcg-border-radius) !important;
	overflow: hidden !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
	transition: all 0.3s ease !important;
	border: 1px solid #333 !important;
}

.product-box:hover {
	box-shadow: 0 5px 25px rgba(255,215,0,0.2) !important;
	transform: translateY(-4px);
	border-color: var(--tcg-yellow) !important;
}

.product-box .box-text {
	background: var(--tcg-gray) !important;
}

.product-box .box-text .product-title a {
	color: var(--tcg-yellow) !important;
}

.product-box .box-text .product-title a:hover {
	color: var(--tcg-yellow-light) !important;
}

/* Product price */
.price, .woocommerce-Price-amount {
	color: var(--tcg-yellow) !important;
	font-weight: 700 !important;
	font-size: 1.2rem !important;
}

.price del, .woocommerce-Price-amount del {
	color: var(--tcg-dark-gray) !important;
}

/* Product image */
.product-image {
	border-radius: var(--tcg-border-radius) var(--tcg-border-radius) 0 0 !important;
}

/* Star rating */
.star-rating span, .woocommerce .star-rating {
	color: var(--tcg-yellow) !important;
}

/* Breadcrumbs */
.woocommerce-breadcrumb a,
.woocommerce-breadcrumb {
	color: var(--tcg-dark-gray) !important;
}

.woocommerce-breadcrumb a:hover {
	color: var(--tcg-yellow) !important;
}

/* Notices */
.woocommerce-message, .woocommerce-info {
	border-top-color: var(--tcg-yellow) !important;
	background: var(--tcg-gray) !important;
	color: var(--tcg-white) !important;
}

.woocommerce-message::before, .woocommerce-info::before {
	color: var(--tcg-yellow) !important;
}

/* Single product page */
.woocommerce div.product .product_title {
	color: var(--tcg-yellow) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--tcg-yellow) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--tcg-gray) !important;
}

/* Cart */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3 {
	color: var(--tcg-yellow) !important;
}

.woocommerce table.shop_table {
	background: var(--tcg-gray) !important;
	color: var(--tcg-white) !important;
	border: 1px solid #333 !important;
}

.woocommerce table.shop_table th {
	color: var(--tcg-yellow) !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: var(--tcg-yellow) !important;
	background: var(--tcg-gray) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--tcg-yellow) !important;
	color: var(--tcg-black) !important;
}

/* === JAPAN THEME ACCENTS === */
.japan-badge {
	display: inline-block;
	background: var(--tcg-yellow);
	border: none;
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 0.7rem;
	font-weight: 800;
	color: var(--tcg-black);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.japan-badge::before {
	content: "🇯🇵 ";
}

.japan-shipping {
	background: #1a1a00;
	border: 1px solid var(--tcg-yellow);
	border-radius: var(--tcg-border-radius);
	padding: 12px 16px;
	margin: 10px 0;
	font-size: 0.9rem;
	color: var(--tcg-yellow);
}

/* === POKEMON TCG UTILITY CLASSES === */
.tcg-yellow {
	color: var(--tcg-yellow) !important;
}

.tcg-yellow-bg {
	background: var(--tcg-yellow) !important;
	color: var(--tcg-black) !important;
}

.tcg-dark-bg {
	background: var(--tcg-black) !important;
	color: var(--tcg-white) !important;
}

.tcg-gray-bg {
	background: var(--tcg-gray) !important;
}

/* === HERO SECTION === */
.tcg-hero {
	position: relative;
	background: linear-gradient(135deg, #000000 0%, #1a1a00 40%, #000000 100%);
	padding: 100px 0;
	text-align: center;
	overflow: hidden;
	border-bottom: 3px solid var(--tcg-yellow);
}

.tcg-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at 30% 50%, rgba(255,215,0,0.1) 0%, transparent 50%),
				 radial-gradient(circle at 70% 50%, rgba(255,215,0,0.05) 0%, transparent 50%);
	animation: tcgGlow 8s ease-in-out infinite alternate;
}

@keyframes tcgGlow {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-2%, -2%); }
}

.tcg-hero h1, .tcg-hero h2 {
	color: var(--tcg-yellow) !important;
	font-family: var(--tcg-font-heading) !important;
	text-shadow: 0 2px 20px rgba(255,215,0,0.3);
}

.tcg-hero p {
	color: #ccc !important;
	font-size: 1.2rem;
}

.tcg-hero .button {
	margin-top: 20px;
}

/* === FEATURED SECTION === */
.tcg-featured-section {
	background: var(--tcg-black);
	padding: 60px 0;
	border-bottom: 1px solid #333;
}

.tcg-featured-section .section-title {
	color: var(--tcg-yellow) !important;
	text-align: center;
	margin-bottom: 40px;
}

/* === CATEGORY BOXES === */
.tcg-category-box {
	background: var(--tcg-gray);
	border: 1px solid #333;
	border-radius: var(--tcg-border-radius);
	padding: 30px 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.tcg-category-box:hover {
	border-color: var(--tcg-yellow);
	box-shadow: 0 0 20px rgba(255,215,0,0.15);
	transform: translateY(-3px);
}

.tcg-category-box h3 {
	color: var(--tcg-yellow) !important;
	margin: 10px 0;
}

.tcg-category-box p {
	color: #aaa;
	font-size: 0.9rem;
}

/* === DIVIDER === */
.tcg-divider {
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--tcg-yellow), transparent);
	margin: 10px 0;
	border: none;
	width: 80px;
	margin-left: auto;
	margin-right: auto;
}

/* === BLOG / POSTS === */
.article-inner {
	background: var(--tcg-gray) !important;
	border: 1px solid #333 !important;
	border-radius: var(--tcg-border-radius) !important;
}

.article-inner .entry-title a {
	color: var(--tcg-yellow) !important;
}

/* === INPUTS === */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea,
select {
	background: var(--tcg-gray) !important;
	border: 1px solid #444 !important;
	color: var(--tcg-white) !important;
	border-radius: var(--tcg-border-radius) !important;
}

input[type='text']:focus,
input[type='email']:focus,
textarea:focus {
	border-color: var(--tcg-yellow) !important;
}

/* === BADGES === */
.badge-inner {
	background: var(--tcg-yellow) !important;
	color: var(--tcg-black) !important;
	font-weight: 800 !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
	.tcg-hero {
		padding: 60px 0;
	}
	
	h1 { font-size: 2rem !important; }
	h2 { font-size: 1.5rem !important; }
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--tcg-black);
}
::-webkit-scrollbar-thumb {
	background: var(--tcg-yellow);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--tcg-yellow-dark);
}