/*
Theme Name: Poke Cards
Theme URI: https://pokecardscollect.com
Author: Wad
Description: Pixel-perfect conversion of Poke Cards TCG for WooCommerce.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
*/

/* 
 * This theme relies on Tailwind CSS via CDN for visual fidelity as requested.
 * Custom styles should be added in the Tailwind config in header.php 
 */

/* 1. Stripe Elements Container */
.wc-stripe-elements-field, 
.wc-stripe-elements-field iframe {
    background-color: #151515 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    padding: 12px !important; /* Add internal spacing */
    margin-bottom: 1em;
}

/* 2. "Drop" Button #place_order */
#place_order {
    position: relative;
    background: #151515 !important; /* Dark Charcoal */
    color: #ffffff !important;
    font-family: 'Orbitron', 'Inter', sans-serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 24px 40px !important;
    border: none !important;
    border-radius: 8px; /* Inner radius */
    z-index: 1;
    overflow: visible;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Animated Gradient Border using Pseudo-element */
#place_order::before {
    content: '';
    position: absolute;
    inset: -2px; /* Thickness of the border */
    z-index: -1;
    border-radius: 10px; /* Slightly larger radius */
    background: linear-gradient(45deg, #3b054f, #0b5e63, #3b054f);
    background-size: 200% 200%;
    animation: borderGlow 3s ease infinite;
}

/* Hover Effect: Text Glow */
#place_order:hover {
    color: #2dd4bf !important;
    text-shadow: 0 0 10px rgba(45, 212, 191, 0.6);
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}