/* ============================================================
   轻量商城 — Tech 科技主题（全站）
   body.theme-tech 启用
   ============================================================ */

body.theme-tech {
    --brand-primary: #0F2D6B;
    --brand-primary-dark: #0A1F4D;
    --brand-primary-light: #1E40AF;
    --brand-primary-lighter: #3B6FD4;
    --brand-primary-rgb: 15, 45, 107;
    --brand-gradient: linear-gradient(135deg, #0F2D6B 0%, #1E40AF 55%, #3B6FD4 100%);

    --shop-black: #111111;
    --shop-text: #1a1a1a;
    --shop-text-secondary: #525252;
    --shop-muted: #737373;
    --shop-text-muted: #737373;
    --shop-border: #e5e5e5;
    --shop-border-light: #eeeeee;
    --shop-bg: #f6f6f6;
    --shop-surface: #ffffff;
    --shop-hover: #eeeeee;

    --shop-radius: 4px;
    --shop-radius-lg: 8px;
    --shop-radius-xl: 12px;

    --shop-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shop-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --shop-shadow-md: 0 4px 16px rgba(15, 45, 107, 0.08);
    --shop-shadow-lg: 0 8px 28px rgba(15, 45, 107, 0.1);

    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-blur: blur(16px);

    --tx-accent: #0F2D6B;
    --tx-accent-2: #1E40AF;
    --tx-accent-3: #3B6FD4;
    --tx-glow: rgba(15, 45, 107, 0.25);

    background: #f6f6f6;
    color: var(--shop-text);
}

body.theme-tech::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(6, 182, 212, 0.04), transparent 50%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(99, 102, 241, 0.04), transparent 45%),
        #f6f6f6;
}

/* ---------- Header ---------- */
body.theme-tech .modern-header {
    background: linear-gradient(180deg, #0F2D6B 0%, #0A1F4D 100%) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

body.theme-tech .modern-header.scrolled {
    background: rgba(10, 31, 77, 0.97) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}

body.theme-tech .header-notice-bar {
    background: linear-gradient(90deg, #0A1F4D, #0F2D6B);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}

body.theme-tech .shop-brand-mark {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF);
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
    border-radius: 6px;
}

body.theme-tech .brand-text {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

body.theme-tech .shop-brand-modern {
    color: #fff !important;
}

body.theme-tech .shop-search-modern input,
body.theme-tech .shop-search-wrap input {
    background: #fff;
    border: 1px solid #e5e5e5;
    color: var(--shop-text);
    border-radius: 4px;
}

body.theme-tech .shop-search-modern input:focus,
body.theme-tech .shop-search-wrap input:focus {
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12);
    background: #fff;
}

body.theme-tech .shop-header .nav-link,
body.theme-tech .nav-link-modern {
    color: rgba(255, 255, 255, 0.78) !important;
}

body.theme-tech .shop-header .nav-link:hover,
body.theme-tech .shop-header .nav-link.active,
body.theme-tech .nav-link-modern:hover,
body.theme-tech .nav-link-modern.active {
    color: #93C5FD !important;
}

body.theme-tech .shop-subnav-modern {
    background: #081833;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.theme-tech .category-dropdown-modern {
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

body.theme-tech .category-dropdown-modern .dropdown-item {
    color: var(--shop-text-secondary);
}

body.theme-tech .category-dropdown-modern .dropdown-item:hover,
body.theme-tech .category-dropdown-modern .dropdown-item.active {
    background: rgba(6, 182, 212, 0.08);
    color: var(--tx-accent);
}

body.theme-tech .header-action-btn {
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.18);
}

body.theme-tech .header-action-btn:hover {
    color: #fff;
    border-color: rgba(147, 197, 253, 0.45);
    background: rgba(255, 255, 255, 0.1);
}

body.theme-tech .btn-cart,
body.theme-tech .shop-header .btn-primary {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
}

body.theme-tech .shop-header .btn-outline-primary,
body.theme-tech .shop-header .btn-outline-secondary {
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: var(--tx-accent) !important;
    border-radius: 4px;
}

body.theme-tech .mobile-menu-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

body.theme-tech .skip-link:focus {
    background: var(--tx-accent);
    color: #fff;
}

/* ---------- Layout ---------- */
body.theme-tech .shop-page:has(.tx-home) {
    padding: 0;
}

body.theme-tech .shop-main {
    background: transparent;
}

/* ---------- Cards & surfaces ---------- */
body.theme-tech .card,
body.theme-tech .shop-card,
body.theme-tech .product-card,
body.theme-tech .order-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    color: var(--shop-text);
    box-shadow: var(--shop-shadow-sm);
}

body.theme-tech .card-header,
body.theme-tech .card-footer {
    background: #fafafa;
    border-color: var(--shop-border);
}

/* ---------- Buttons ---------- */
body.theme-tech .btn-primary {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
}

body.theme-tech .btn-primary:hover {
    background: linear-gradient(135deg, #22d3ee, #818cf8);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25);
    color: #fff;
}

body.theme-tech .btn-outline-primary {
    border-color: rgba(6, 182, 212, 0.45);
    color: var(--tx-accent);
    border-radius: 4px;
}

body.theme-tech .btn-outline-primary:hover {
    background: rgba(6, 182, 212, 0.08);
    border-color: var(--tx-accent);
    color: var(--tx-accent);
}

body.theme-tech .btn-dark,
body.theme-tech .btn-outline-dark {
    border-radius: 4px;
}

/* ---------- Forms ---------- */
body.theme-tech .form-control,
body.theme-tech .form-select {
    background: #fff;
    border-color: #e5e5e5;
    color: var(--shop-text);
    border-radius: 4px;
}

body.theme-tech .form-control:focus,
body.theme-tech .form-select:focus {
    background: #fff;
    border-color: var(--tx-accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
    color: var(--shop-text);
}

body.theme-tech .form-control::placeholder {
    color: var(--shop-muted);
}

body.theme-tech .input-group-text {
    background: #fafafa;
    border-color: #e5e5e5;
    color: var(--shop-muted);
}

/* ---------- Product list pages ---------- */
body.theme-tech .products-toolbar,
body.theme-tech .filter-panel,
body.theme-tech .product-list-sidebar {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
}

body.theme-tech .product-grid-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

body.theme-tech .product-grid-card:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.1);
    transform: translateY(-2px);
}

body.theme-tech .pagination .page-link {
    background: #fff;
    border-color: #e5e5e5;
    color: var(--shop-text-secondary);
}

body.theme-tech .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF);
    border-color: transparent;
    color: #fff;
}

/* ---------- Marketing cards ---------- */
body.theme-tech .mkt-group-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

body.theme-tech .mkt-group-card:hover {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.1);
}

body.theme-tech .mkt-group-body h3 {
    color: var(--shop-text);
}

body.theme-tech .mkt-price-now {
    color: var(--tx-accent);
}

body.theme-tech .mkt-group-cta {
    background: rgba(6, 182, 212, 0.08);
    color: var(--tx-accent);
}

/* ---------- Footer pre sections ---------- */
body.theme-tech .footer-pre {
    background: #f6f6f6;
    border-color: var(--shop-border);
}

body.theme-tech .footer-pre-title,
body.theme-tech .footer-pre-news-card h4 {
    color: var(--shop-text);
}

body.theme-tech .footer-pre-news-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
}

body.theme-tech .footer-pre-news-card:hover {
    border-color: rgba(6, 182, 212, 0.35);
}

/* ---------- Footer ---------- */
body.theme-tech .shop-footer-grand {
    background: #ececec;
    border-top: 1px solid #e0e0e0;
}

body.theme-tech .footer-grand-bg {
    background: transparent;
}

body.theme-tech .footer-grand-glow {
    background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.06), transparent 60%);
}

body.theme-tech .footer-brand-name,
body.theme-tech .footer-col-title {
    color: var(--shop-text);
}

body.theme-tech .footer-brand-desc,
body.theme-tech .footer-col-links a {
    color: var(--shop-text-secondary);
}

body.theme-tech .footer-col-links a:hover {
    color: var(--tx-accent);
}

body.theme-tech .footer-service-tag {
    background: #fff;
    border: 1px solid #e5e5e5;
    color: var(--shop-text-secondary);
}

body.theme-tech .footer-social-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    color: var(--shop-text-secondary);
}

body.theme-tech .footer-social-item:hover {
    border-color: var(--tx-accent);
    color: var(--tx-accent);
}

body.theme-tech .footer-grand-bar {
    background: #e5e5e5;
    border-top: 1px solid #dcdcdc;
    color: var(--shop-muted);
}

body.theme-tech .footer-grand-bar a {
    color: var(--shop-text-secondary);
}

body.theme-tech .footer-grand-bar a:hover {
    color: var(--tx-accent);
}

/* ---------- Mobile nav ---------- */
body.theme-tech .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    border-top: 1px solid #e5e5e5;
}

body.theme-tech .mobile-bottom-nav a {
    color: var(--shop-muted);
}

body.theme-tech .mobile-bottom-nav a.active,
body.theme-tech .mobile-bottom-nav a:hover {
    color: var(--tx-accent);
}

/* ---------- Back to top ---------- */
body.theme-tech .back-to-top {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF);
    border: none;
    color: #fff;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
}

body.theme-tech .back-to-top:hover {
    box-shadow: 0 0 32px rgba(0, 212, 255, 0.5);
}

/* ---------- Alerts & badges ---------- */
body.theme-tech .alert {
    border-radius: 4px;
}

body.theme-tech .alert-info {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.25);
    color: var(--tx-accent);
}

body.theme-tech .badge.bg-primary {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF) !important;
    color: #fff !important;
}

/* ---------- Breadcrumb / page headers ---------- */
body.theme-tech .shop-page-header,
body.theme-tech .page-hero-bar {
    background: #fff;
    border-bottom: 1px solid var(--shop-border);
}

body.theme-tech .breadcrumb-item,
body.theme-tech .breadcrumb-item a {
    color: var(--shop-muted);
}

body.theme-tech .breadcrumb-item.active {
    color: var(--shop-text);
}

/* ---------- Tables ---------- */
body.theme-tech .table {
    color: var(--shop-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--shop-border);
}

body.theme-tech .table-hover tbody tr:hover {
    background: rgba(6, 182, 212, 0.04);
}

/* ---------- Modals ---------- */
body.theme-tech .modal-content {
    background: #fff;
    border: 1px solid var(--shop-border);
    color: var(--shop-text);
}

body.theme-tech .modal-header,
body.theme-tech .modal-footer {
    border-color: var(--shop-border);
}

body.theme-tech .btn-close {
    filter: none;
}

/* ---------- Dropdowns ---------- */
body.theme-tech .dropdown-menu {
    background: #fff;
    border: 1px solid var(--shop-border);
}

body.theme-tech .dropdown-item {
    color: var(--shop-text-secondary);
}

body.theme-tech .dropdown-item:hover {
    background: rgba(6, 182, 212, 0.08);
    color: var(--tx-accent);
}

/* ---------- Category sublevels (mobile) ---------- */
body.theme-tech .category-sublevel-bar,
body.theme-tech .h5-sublevel-text-scroll {
    background: #fff;
    border-color: var(--shop-border);
}

body.theme-tech .category-sublevel-bar a,
body.theme-tech .h5-sublevel-text-scroll a {
    color: var(--shop-text-secondary);
    border-color: #e5e5e5;
}

body.theme-tech .category-sublevel-bar a:hover,
body.theme-tech .category-sublevel-bar a.active {
    color: var(--tx-accent);
    border-color: rgba(6, 182, 212, 0.35);
}

/* ---------- Auth pages (when not using auth layout) ---------- */
body.theme-tech .auth-panel {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
}

/* ---------- Customer service widget ---------- */
body.theme-tech .cs-float-btn {
    background: linear-gradient(135deg, #0F2D6B, #1E40AF);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
}

body.theme-tech .cs-panel {
    background: #fff;
    border: 1px solid var(--shop-border);
}
