/*
 Theme Name:   VapeVex Child
 Theme URI:    https://vapevex.com
 Description:  VapeVex Custom Theme for Astra - 深海军蓝专业科技风格
 Author:       VapeVex
 Author URI:   https://vapevex.com
 Template:     astra
 Version: 3.0.1
 License:      GNU General Public License v2 or later
 Text Domain:  vapevex-child
*/

/* 深海军蓝配色变量 */
:root {
    --vv-primary: #0a192f;
    --vv-accent: #64ffda;
    --vv-bg-dark: #020c1b;
    --vv-bg-card: #112240;
    --vv-text-primary: #ccd6f6;
    --vv-text-secondary: #8892b0;
    --vv-border: #1d3461;
    --vv-sale: #ef4444;
    --vv-success: #64ffda;
    --vv-warning: #f0b429;
    --vv-radius: 8px;
}

/* =========================================
   GLOBAL STYLES
   ========================================= */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--vv-text-primary);
    line-height: 1.6;
}

/* =========================================
   HEADER - Dark Theme
   ========================================= */
.site-header,
.ast-primary-header-wrap,
.main-header-bar,
.ast-header-break-point .main-header-bar,
.ast-header-before {
    background: var(--vv-primary) !important;
    border-color: var(--vv-primary) !important;
}

.site-header a,
.main-header-bar a,
.ast-primary-header-wrap a,
.ast-header-break-point .main-header-bar a {
    color: var(--vv-text-primary) !important;
}

.site-header a:hover,
.main-header-bar a:hover {
    color: var(--vv-accent) !important;
}

.ast-site-identity {
    padding: 10px 0;
}

.ast-header-break-point .ast-above-header-wrap {
    background: var(--vv-bg-dark);
}

.ast-header-break-point .main-header-menu {
    background: var(--vv-bg-dark);
}

.ast-header-break-point .main-header-menu .menu-item a {
    color: var(--vv-text-primary) !important;
    border-bottom: 1px solid var(--vv-border);
}

.ast-header-break-point .main-header-menu .menu-item a:hover {
    background: rgba(100,255,218,0.1);
    color: var(--vv-accent) !important;
}

/* =========================================
   ANNOUNCEMENT BAR
   ========================================= */
.woocommerce-demo-store .woocommerce-store-notice {
    background: var(--vv-primary) !important;
    color: var(--vv-text-primary) !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--vv-border);
}

/* =========================================
   BREADCRUMBS
   ========================================= */
.ast-breadcrumbs {
    background: transparent;
    padding: 10px 0;
}

.ast-breadcrumbs .trail-browse,
.ast-breadcrumbs .trail-item a,
.ast-breadcrumbs .trail-item span {
    color: var(--vv-text-secondary) !important;
    font-size: 13px;
}

.ast-breadcrumbs .trail-item a:hover {
    color: var(--vv-accent) !important;
}

/* =========================================
   FOOTER - Dark Theme
   ========================================= */
.site-footer,
.footer-adv {
    background: var(--vv-bg-dark) !important;
    color: var(--vv-text-primary);
    border-top: 1px solid var(--vv-border);
}

.site-footer a,
.footer-adv a {
    color: var(--vv-accent);
}

.site-footer a:hover,
.footer-adv a:hover {
    color: var(--vv-text-primary);
}

.footer-adv .widget-title,
.site-footer .widget-title {
    color: var(--vv-text-primary) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--vv-accent);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* =========================================
   BUTTONS - Global
   ========================================= */
button,
input[type="button"],
input[type="submit"],
.ast-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: linear-gradient(135deg, var(--vv-accent), var(--vv-primary)) !important;
    color: var(--vv-bg-dark) !important;
    border-radius: var(--vv-radius) !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.ast-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(100,255,218,0.3) !important;
}

.vv-btn-primary {
    background: linear-gradient(135deg, var(--vv-accent), var(--vv-primary)) !important;
}

.vv-btn-success {
    background: linear-gradient(135deg, var(--vv-success), #0a192f) !important;
}

.vv-btn-sale {
    background: linear-gradient(135deg, var(--vv-sale), #dc2626) !important;
}

/* =========================================
   LINKS
   ========================================= */
a {
    color: var(--vv-accent);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--vv-text-primary);
}

/* =========================================
   FORMS
   ========================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
    border: 1px solid var(--vv-border) !important;
    border-radius: var(--vv-radius) !important;
    padding: 12px 15px !important;
    background: var(--vv-bg-card) !important;
    color: var(--vv-text-primary) !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--vv-accent) !important;
    box-shadow: 0 0 0 3px rgba(100,255,218,0.1) !important;
    outline: none !important;
}

/* =========================================
   SECTION TITLES
   ========================================= */
.entry-title,
.page-title,
.woocommerce-products-header__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--vv-text-primary);
    margin-bottom: 20px;
}

/* =========================================
   SIDEBAR
   ========================================= */
.widget-area {
    background: var(--vv-bg-card);
    border-radius: var(--vv-radius);
    padding: 20px;
    border: 1px solid var(--vv-border);
}

.widget-area .widget-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--vv-text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vv-accent);
}

/* =========================================
   TABS
   ========================================= */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-weight: 600;
    color: var(--vv-text-secondary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--vv-accent);
}

/* =========================================
   STAR RATINGS
   ========================================= */
.woocommerce .star-rating {
    color: var(--vv-warning);
}

/* =========================================
   BADGES
   ========================================= */
.onsale {
    background: var(--vv-sale) !important;
    border-radius: var(--vv-radius) !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* =========================================
   LOADING
   ========================================= */
.woocommerce-loading {
    opacity: 0.7;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .entry-title,
    .page-title,
    .woocommerce-products-header__title {
        font-size: 22px;
    }
    
    .site-footer,
    .footer-adv {
        padding: 30px 20px !important;
    }
}

/* =========================================
   AGE VERIFICATION - 深色居中
   ========================================= */
.pum-overlay {
    background: rgba(0,0,0,0.92) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pum-container {
    background: linear-gradient(135deg, var(--vv-primary) 0%, var(--vv-bg-card) 50%, var(--vv-bg-dark) 100%) !important;
    border-radius: var(--vv-radius) !important;
    padding: 40px !important;
    max-width: 500px !important;
    width: 90% !important;
    margin: auto !important;
    position: relative !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5) !important;
    border: 1px solid var(--vv-border);
}

.pum-title {
    color: var(--vv-text-primary) !important;
    font-size: 28px !important;
    margin-bottom: 16px !important;
}

.pum-content {
    color: var(--vv-text-secondary) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

@media (max-width: 600px) {
    .pum-container {
        padding: 30px 20px !important;
        border-radius: var(--vv-radius) !important;
    }
    .pum-title {
        font-size: 24px !important;
    }
}

/* =========================================
   CUSTOM SCROLLBAR
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--vv-bg-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--vv-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vv-accent);
}

/* =========================================
   SELECTION
   ========================================= */
::selection {
    background: var(--vv-accent);
    color: var(--vv-bg-dark);
}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    .site-header,
    .site-footer,
    .widget-area,
    .ast-breadcrumbs {
        display: none !important;
    }
}