/* ══════════════════════════════════════════════════════════
   RedPep Labs — Dark Theme + WooCommerce Overrides
   ══════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
	--rp-bg:           #000000;
	--rp-card:         #121212;
	--rp-muted:        #9a9a9a;
	--rp-text:         #f2f2f2;
	--rp-accent:       #e10600;
	--rp-accent-glow:  rgba(225, 6, 0, 0.35);
	--rp-accent-dim:   rgba(225, 6, 0, 0.10);
	--rp-border:       rgba(255, 255, 255, 0.08);
	--rp-border-hover: rgba(255, 255, 255, 0.18);
	--rp-shadow:       0 10px 30px rgba(0, 0, 0, 0.6);
	--rp-radius:       16px;
	--rp-max:          1100px;
}

/* ── Base ── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 20% 20%, rgba(225, 6, 0, 0.12), transparent 40%),
		radial-gradient(circle at 80% 80%, rgba(225, 6, 0, 0.07), transparent 40%),
		var(--rp-bg) !important;
	color: var(--rp-text) !important;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

a {
	color: var(--rp-text);
}
a:hover {
	color: var(--rp-accent);
}

/* ── Hide Storefront default elements on shop page ── */
.storefront-sorting,
.woocommerce-result-count,
.woocommerce-breadcrumb,
.site-header-cart,
.storefront-handheld-footer-bar {
	display: none !important;
}

/* ── Storefront Header override ── */
.site-header {
	background: rgba(0, 0, 0, 0.95) !important;
	border-bottom: 1px solid var(--rp-border) !important;
	padding: 0 !important;
}
.site-branding {
	display: none !important; /* we use our own header inside the template */
}
.main-navigation {
	display: none !important; /* hidden — add a custom nav later if needed */
}

/* ── Storefront Footer ── */
.site-footer {
	background: var(--rp-bg) !important;
	color: var(--rp-muted) !important;
	border-top: 1px solid var(--rp-border) !important;
}
.site-footer a {
	color: var(--rp-muted);
}
.site-info {
	display: none; /* we render our own footer */
}

/* ── WooCommerce global price color ── */
.woocommerce .price,
.woocommerce-Price-amount,
ins .woocommerce-Price-amount {
	color: var(--rp-accent) !important;
	font-weight: 800;
}
del .woocommerce-Price-amount {
	color: var(--rp-muted) !important;
	font-weight: 400;
}

/* ── WooCommerce buttons ── */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: linear-gradient(135deg, #e10600, #8a0000) !important;
	color: #fff !important;
	border: 1px solid rgba(225, 6, 0, 0.5) !important;
	border-radius: 12px !important;
	font-weight: 700 !important;
	box-shadow: 0 0 16px var(--rp-accent-glow) !important;
	transition: box-shadow 0.15s, transform 0.15s !important;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	box-shadow: 0 0 24px var(--rp-accent-glow) !important;
	transform: translateY(-1px) !important;
}
.woocommerce button.button.alt {
	background: linear-gradient(135deg, #e10600, #8a0000) !important;
}

/* ── WooCommerce form inputs ── */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--rp-border) !important;
	border-radius: 10px !important;
	color: var(--rp-text) !important;
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	border-color: rgba(225, 6, 0, 0.5) !important;
	outline: none !important;
	box-shadow: none !important;
}
.woocommerce select option {
	background: #1a1a1a;
}

/* ── WooCommerce notices ── */
.woocommerce-message,
.woocommerce-info {
	background: rgba(225, 6, 0, 0.08) !important;
	border-top-color: var(--rp-accent) !important;
	color: var(--rp-text) !important;
}
.woocommerce-error {
	background: rgba(225, 6, 0, 0.12) !important;
	border-top-color: #ff4444 !important;
	color: var(--rp-text) !important;
}

/* ── WooCommerce Cart page ── */
.woocommerce-cart table.cart {
	background: var(--rp-card) !important;
	border: 1px solid var(--rp-border) !important;
	border-radius: var(--rp-radius) !important;
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
	border-color: var(--rp-border) !important;
	color: var(--rp-text) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--rp-card) !important;
	border: 1px solid var(--rp-border) !important;
	border-radius: var(--rp-radius) !important;
	padding: 20px !important;
}

/* ── WooCommerce Checkout page ── */
.woocommerce-checkout #payment {
	background: var(--rp-card) !important;
	border: 1px solid var(--rp-border) !important;
	border-radius: var(--rp-radius) !important;
}
.woocommerce-checkout #payment .payment_methods li {
	border-color: var(--rp-border) !important;
}
.woocommerce-checkout .order-review-table {
	background: var(--rp-card) !important;
}
#order_review_heading,
h3#order_review {
	color: var(--rp-accent) !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	color: var(--rp-text) !important;
	border-color: var(--rp-border) !important;
}

/* ── WooCommerce form fields labels ── */
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-account-fields label {
	color: var(--rp-muted) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

/* ── Section headings ── */
h1, h2, h3 {
	color: var(--rp-text);
}

/* ── Checkout iframe mode ── */
/* When the checkout page is opened inside the drawer iframe (?rp-drawer=1),
   hide the site header/footer so only the WooCommerce form is visible. */
body.rp-drawer-mode .site-header,
body.rp-drawer-mode .site-footer,
body.rp-drawer-mode .storefront-handheld-footer-bar,
body.rp-drawer-mode .site-info {
	display: none !important;
}
body.rp-drawer-mode {
	background: var(--rp-bg) !important;
}
body.rp-drawer-mode .site-content,
body.rp-drawer-mode .content-area,
body.rp-drawer-mode .site-main {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
body.rp-drawer-mode .woocommerce {
	padding: 24px 20px 48px;
	max-width: 100%;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: var(--rp-bg);
}
::-webkit-scrollbar-thumb {
	background: rgba(225, 6, 0, 0.4);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(225, 6, 0, 0.7);
}