/*
Theme Name: ReePal
Theme URI: https://reepal.shop
Description: Dark/gradient Storefront child theme for ReePal. Look-only — adds a dark palette, custom page templates, and an importer for prebuilt pages. No payment or product-page customizations.
Author: ReePal
Template: storefront
Version: 2.0.0
Text Domain: reepal
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --rp-bg: #0a0518;
  --rp-bg-alt: #140b2a;
  --rp-surface: rgba(255,255,255,0.04);
  --rp-surface-2: rgba(255,255,255,0.08);
  --rp-border: rgba(255,255,255,0.10);
  --rp-text: #ffffff;
  --rp-muted: rgba(255,255,255,0.70);
  --rp-mute-2: rgba(255,255,255,0.45);
  --rp-primary: #a855f7;
  --rp-accent: #ec4899;
  --rp-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  --rp-radius: 14px;
}

/* ============================================================
   Base — dark background + text
   Kept minimal so we don't fight Storefront on product pages
   ============================================================ */
body {
  background: var(--rp-bg);
  color: var(--rp-text);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; top: -200px; left: 50%;
  width: 1200px; height: 800px;
  background: radial-gradient(ellipse, rgba(168,85,247,0.18), transparent 60%);
  transform: translateX(-50%); pointer-events: none; z-index: 0;
}
.site, .site-content { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 { color: var(--rp-text); }
a { color: var(--rp-primary); }
a:hover { color: var(--rp-accent); }
p { color: var(--rp-muted); }

/* Site header */
.site-header { background: rgba(10,5,24,0.7); backdrop-filter: blur(20px); border-bottom: 1px solid var(--rp-border); }
.site-header a, .main-navigation ul li a, .site-branding a { color: #fff !important; }

/* Footer */
.site-footer { background: #07030f; color: var(--rp-muted); border-top: 1px solid var(--rp-border); }
.site-footer a { color: var(--rp-muted); }
.site-footer a:hover { color: var(--rp-accent); }

/* Buttons — gradient pill */
.button, button, input[type=submit],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--rp-gradient);
  color: #fff;
  border: none;
  border-radius: var(--rp-radius);
  font-weight: 700;
  box-shadow: 0 6px 20px -8px rgba(236,72,153,0.6);
  transition: transform .15s ease;
}
.button:hover, button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
  color: #fff; transform: translateY(-1px);
}

/* Form fields — dark */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search],
input[type=number], textarea, select, .select2-container .select2-selection {
  background: var(--rp-bg-alt) !important;
  border: 1px solid var(--rp-border) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-size: 16px;
}
input::placeholder, textarea::placeholder { color: var(--rp-mute-2); }

/* WooCommerce cart/checkout: just color, no layout overrides */
.woocommerce table.shop_table { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 14px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { color: var(--rp-muted); border-color: var(--rp-border) !important; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #payment, .woocommerce form .form-row .input-text {
  /* leave layout alone */
}
.woocommerce-checkout #payment { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 14px; }
.woocommerce-checkout #payment ul.payment_methods { background: transparent; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--rp-surface) !important; border: 1px solid var(--rp-border) !important; color: var(--rp-muted) !important;
}

/* Shop loop — soft color treatment, keep Storefront's grid */
.woocommerce ul.products li.product {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: #fff; }
.woocommerce ul.products li.product .price { color: var(--rp-accent) !important; font-weight: 700; }

/* Product page — colors only, NO layout overrides */
.single-product .product_title { color: #fff; }
.single-product .price { color: var(--rp-accent) !important; font-weight: 700; }
.single-product .stock { color: #4ade80; }
.single-product .product_meta, .single-product .product_meta a { color: var(--rp-muted); }
.woocommerce-tabs ul.tabs li { background: var(--rp-surface) !important; border-color: var(--rp-border) !important; }
.woocommerce-tabs ul.tabs li a { color: var(--rp-muted) !important; }
.woocommerce-tabs ul.tabs li.active { background: var(--rp-gradient) !important; }
.woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.woocommerce-tabs .panel { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 12px; padding: 20px; color: var(--rp-muted); }

/* Product tabs: keep tab pills inline-sized, not full-width gradient bars */
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; padding: 0; margin: 0 0 16px; border: 0; }
.woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce-tabs ul.tabs li { display: inline-block; border-radius: 10px !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 10px 18px !important; }
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
/* Remove WooCommerce's duplicate "Description" heading inside the panel */
.woocommerce-tabs .panel > h2:first-child { display: none; }

/* Auto-generated thumbnails (rendered by helper) */
.rp-auto-thumb { width: 100%; height: auto; border-radius: 12px; display: block; aspect-ratio: 1/1; }

/* ============================================================
 * Spacing + icon-overlap pass (broad, common Storefront spots)
 * ============================================================ */

/* --- Inputs with an icon inside (search, etc): keep text clear --- */
input[type=search],
.woocommerce-product-search input.search-field,
.widget_product_search input[type=search],
.site-search input[type=search],
.storefront-handheld-footer-bar input[type=search] {
  padding-left: 42px !important;
}

/* Select dropdowns: room for the chevron on the right */
select,
.select2-container .select2-selection--single {
  padding-right: 38px !important;
}

/* --- Quantity / number inputs: balanced padding --- */
input[type=number] { padding: 12px 12px 12px 14px !important; }

/* --- Single product summary: consistent vertical rhythm --- */
.single-product div.product .summary > * { margin-bottom: 14px; }
.single-product div.product .summary .price { margin-bottom: 16px; }
.single-product div.product .summary > *:last-child { margin-bottom: 0; }

/* Remove the empty gap left where the hidden cart form sat */
.single-product form.cart { margin-bottom: 0 !important; }
.single-product form.cart::before,
.single-product form.cart::after { content: none !important; }

/* --- Product description / tabs panel: readable padding --- */
.woocommerce-tabs .panel { padding: 20px 22px !important; line-height: 1.6; }
.woocommerce-tabs .panel h2 { margin-top: 0; }
.woocommerce-Tabs-panel p { margin: 0 0 12px; }
.woocommerce-Tabs-panel p:last-child { margin-bottom: 0; }

/* Short-description under price: spacing */
.single-product .woocommerce-product-details__short-description { margin: 4px 0 16px; line-height: 1.6; }

/* --- Shop loop cards: keep inner spacing even --- */
.woocommerce ul.products li.product { padding: 16px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 8px 0 4px !important; }
.woocommerce ul.products li.product .button { margin-top: 6px; }

/* --- Header: search field vertical centering --- */
.site-header .site-search { margin: 0; }

/* --- Buttons: consistent padding so labels aren't cramped --- */
.woocommerce a.button, .woocommerce button.button, .button {
  padding: 12px 22px !important;
}

/* --- Cart/checkout: breathing room in totals box --- */
.woocommerce .cart_totals, .woocommerce-checkout #payment { padding: 4px 18px 18px !important; }