/* ==========================================================================
   PIXIMPLANET CANONICAL CYBERPUNK BUTTON SYSTEM (UNIVERSAL SPECIFICATION)
   Source of Truth: Wallet Terminal Control Architecture
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700;800&display=swap');

:root {
   /* --- Canonical Button Tokens --- */
   --pp-btn-font: 'Rajdhani', sans-serif;
   --pp-btn-radius: 6px;
   --pp-btn-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   --pp-btn-cyan: #00f0ff;
   --pp-btn-cyan-dim: rgba(0, 240, 255, 0.12);
   --pp-btn-cyan-border: rgba(0, 240, 255, 0.35);
   --pp-btn-dark-bg: rgba(8, 14, 22, 0.85);
   --pp-btn-dark-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   1. PRIMARY ACTION / CTA BUTTON (.pp-btn-primary)
   Matches: .btn-submit, #place_order, .g2g-btn-checkout, single_add_to_cart_button, .vault-btn-download
   ========================================================================== */
.pp-btn-primary,
.btn-submit,
.pixim-wallet-module .btn-submit,
.vault-btn-download,
.vault-action-toolbar .vault-btn-download,
.g2g-btn-checkout,
.checkout-button,
.single_add_to_cart_button,
.woocommerce-button.button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-ResetPassword-submit,
.woocommerce-EditAccountForm-submit,
.btn-save-profile,
#payment button#place_order,
button#place_order,
.g2g-empty-orders-state a.button,
.g2g-empty-orders-state a.pp-btn-primary,
.woocommerce-MyAccount-content .g2g-empty-orders-state a.button {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 10px !important;
   height: 48px !important;
   padding: 0 24px !important;
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(8, 16, 26, 0.95) 100%) !important;
   border: 1px solid #00f0ff !important;
   color: #00f0ff !important;
   font-family: 'Rajdhani', sans-serif !important;
   font-size: 14px !important;
   font-weight: 800 !important;
   letter-spacing: 1.5px !important;
   text-transform: uppercase !important;
   border-radius: 6px !important;
   box-shadow: 0 0 14px rgba(0, 240, 255, 0.15) !important;
   cursor: pointer !important;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
   position: relative !important;
   overflow: hidden !important;
   text-decoration: none !important;
   box-sizing: border-box !important;
   outline: none !important;
   user-select: none !important;
}

.pp-btn-primary:hover,
.btn-submit:hover,
.pixim-wallet-module .btn-submit:hover,
.vault-btn-download:hover,
.vault-action-toolbar .vault-btn-download:hover,
.g2g-btn-checkout:hover,
.checkout-button:hover,
.single_add_to_cart_button:hover,
.woocommerce-button.button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-ResetPassword-submit:hover,
.woocommerce-EditAccountForm-submit:hover,
.btn-save-profile:hover,
#payment button#place_order:hover,
button#place_order:hover {
   background: #00f0ff !important;
   border-color: #00f0ff !important;
   color: #050a12 !important;
   box-shadow: 0 0 24px rgba(0, 240, 255, 0.55), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
   transform: translateY(-1px) !important;
}

.pp-btn-primary:hover i,
.pp-btn-primary:hover svg,
.btn-submit:hover i,
.btn-submit:hover svg,
.vault-btn-download:hover svg,
.vault-btn-download:hover i,
.vault-action-toolbar .vault-btn-download:hover svg {
   transform: translateX(4px) !important;
   color: #050a12 !important;
   stroke: #050a12 !important;
}

.pp-btn-primary i,
.pp-btn-primary svg,
.btn-submit i,
.btn-submit svg,
.vault-btn-download svg,
.vault-btn-download i,
.vault-action-toolbar .vault-btn-download svg {
   transition: transform 0.2s ease, color 0.2s ease, stroke 0.2s ease !important;
}

.pp-btn-primary:focus-visible,
.btn-submit:focus-visible,
.vault-btn-download:focus-visible,
.g2g-btn-checkout:focus-visible,
.checkout-button:focus-visible,
.single_add_to_cart_button:focus-visible,
.woocommerce-button.button:focus-visible,
.woocommerce-form-login__submit:focus-visible,
.woocommerce-form-register__submit:focus-visible,
.woocommerce-ResetPassword-submit:focus-visible,
.woocommerce-EditAccountForm-submit:focus-visible,
#payment button#place_order:focus-visible {
   outline: 2px solid #00f0ff !important;
   outline-offset: 2px !important;
}

.pp-btn-primary:active,
.btn-submit:active,
.vault-btn-download:active,
.g2g-btn-checkout:active,
.checkout-button:active,
.single_add_to_cart_button:active,
.woocommerce-button.button:active,
.woocommerce-form-login__submit:active,
.woocommerce-form-register__submit:active,
.woocommerce-ResetPassword-submit:active,
.woocommerce-EditAccountForm-submit:active,
#payment button#place_order:active {
   transform: scale(0.98) translateY(0) !important;
}

.pp-btn-primary:disabled,
.btn-submit:disabled,
.vault-btn-download:disabled,
.g2g-btn-checkout:disabled,
.checkout-button:disabled,
.single_add_to_cart_button:disabled,
.woocommerce-button.button:disabled,
.woocommerce-form-login__submit:disabled,
.woocommerce-form-register__submit:disabled,
.woocommerce-ResetPassword-submit:disabled,
.woocommerce-EditAccountForm-submit:disabled,
#payment button#place_order:disabled,
button#place_order[disabled] {
   opacity: 0.45 !important;
   cursor: not-allowed !important;
   border-color: rgba(255, 255, 255, 0.15) !important;
   color: #64748b !important;
   background: rgba(255, 255, 255, 0.02) !important;
   box-shadow: none !important;
   transform: none !important;
}

/* ==========================================================================
   2. SECONDARY ACTION BUTTON (.pp-btn-secondary)
   Matches: .vault-btn-order, .vault-btn-invoice, .g2g-btn-invoice, .g2g-po-btn, .btn-sub-view, .btn-return-account
   ========================================================================== */
.pp-btn-secondary,
.vault-btn-order,
.vault-btn-invoice,
.g2g-btn-invoice,
.g2g-po-btn.g2g-btn-default,
.pixim-subscriptions-module .g2g-po-btn,
.view-order-btn,
.vault-btn-reset {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 6px !important;
   background: rgba(8, 14, 22, 0.85) !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
   color: #cbd5e1 !important;
   font-family: 'Rajdhani', sans-serif !important;
   font-size: 12px !important;
   font-weight: 700 !important;
   letter-spacing: 0.8px !important;
   text-transform: uppercase !important;
   border-radius: 6px !important;
   padding: 8px 14px !important;
   cursor: pointer !important;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
   text-decoration: none !important;
   outline: none !important;
   box-sizing: border-box !important;
}

.pp-btn-secondary:hover,
.vault-btn-order:hover,
.vault-btn-invoice:hover,
.g2g-btn-invoice:hover,
.g2g-po-btn.g2g-btn-default:hover,
.pixim-subscriptions-module .g2g-po-btn:hover,
.view-order-btn:hover,
.vault-btn-reset:hover {
   background: rgba(0, 240, 255, 0.08) !important;
   border-color: rgba(0, 240, 255, 0.45) !important;
   color: #00f0ff !important;
   box-shadow: 0 0 14px rgba(0, 240, 255, 0.2) !important;
   transform: translateY(-1px) !important;
}

.pp-btn-secondary:focus-visible,
.vault-btn-order:focus-visible,
.vault-btn-invoice:focus-visible,
.g2g-btn-invoice:focus-visible {
   outline: 2px solid #00f0ff !important;
   outline-offset: 2px !important;
}

.pp-btn-secondary:active,
.vault-btn-order:active,
.vault-btn-invoice:active,
.g2g-btn-invoice:active {
   transform: scale(0.98) translateY(0) !important;
}

/* ==========================================================================
   3. NAVIGATION ACTION ITEM (.pp-btn-nav)
   Matches: .wallet-tab-card, .dashboard-nav-grid .nav-module-box
   ========================================================================== */
.pp-btn-nav,
.wallet-tab-card,
.pixim-wallet-module .wallet-tab-card,
.dashboard-nav-grid .nav-module-box {
   background: linear-gradient(135deg, rgba(8, 14, 22, 0.85) 0%, rgba(4, 8, 14, 0.95) 100%) !important;
   border: 1px solid rgba(255, 255, 255, 0.08) !important;
   border-radius: 6px !important;
   color: #94a3b8 !important;
   font-family: 'Rajdhani', sans-serif !important;
   cursor: pointer !important;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
   position: relative !important;
   outline: none !important;
   box-sizing: border-box !important;
}

.pp-btn-nav:hover,
.wallet-tab-card:hover,
.pixim-wallet-module .wallet-tab-card:hover,
.dashboard-nav-grid .nav-module-box:hover {
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(8, 16, 26, 0.95) 100%) !important;
   border-color: rgba(0, 240, 255, 0.35) !important;
   color: #ffffff !important;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 240, 255, 0.1) !important;
}

.pp-btn-nav:focus-visible,
.wallet-tab-card:focus-visible,
.dashboard-nav-grid .nav-module-box:focus-visible {
   outline: 2px solid #00f0ff !important;
   outline-offset: 2px !important;
}

.pp-btn-nav:active,
.wallet-tab-card:active,
.dashboard-nav-grid .nav-module-box:active {
   transform: scale(0.98) !important;
}

.pp-btn-nav.is-active,
.pp-btn-nav.active,
.wallet-tab-card.is-active,
.pixim-wallet-module .wallet-tab-card.is-active,
.dashboard-nav-grid .nav-module-box.active {
   background: linear-gradient(90deg, rgba(0, 240, 255, 0.14) 0%, rgba(8, 16, 26, 0.95) 100%) !important;
   border-color: rgba(0, 240, 255, 0.5) !important;
   color: #ffffff !important;
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.12), inset 0 0 12px rgba(0, 240, 255, 0.04) !important;
}

.pp-btn-nav.is-active::before,
.pp-btn-nav.active::before,
.wallet-tab-card.is-active::before,
.pixim-wallet-module .wallet-tab-card.is-active::before,
.dashboard-nav-grid .nav-module-box.active::before {
   content: '' !important;
   position: absolute !important;
   left: -1px !important;
   top: -1px !important;
   bottom: -1px !important;
   width: 3px !important;
   background: #00f0ff !important;
   box-shadow: 0 0 12px #00f0ff, 0 0 20px rgba(0, 240, 255, 0.8) !important;
   border-radius: 6px 0 0 6px !important;
}

/* ==========================================================================
   4. PRESET QUICK-SELECT PILL (.pp-btn-preset)
   Matches: .preset-btn ($10, $50, $100), .dest-toggle-btn, .stat-box-pod
   ========================================================================== */
.pp-btn-preset,
.preset-btn,
.pixim-wallet-module .preset-btn,
.dest-toggle-btn,
.pixim-wallet-module .dest-toggle-btn,
.stat-box-pod {
   height: 42px !important;
   position: relative !important;
   background: linear-gradient(135deg, rgba(10, 18, 28, 0.85) 0%, rgba(6, 12, 20, 0.95) 100%) !important;
   border: 1px solid rgba(0, 240, 255, 0.18) !important;
   color: #cbd5e1 !important;
   padding: 0 14px !important;
   border-radius: 6px !important;
   font-family: 'Rajdhani', sans-serif !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   letter-spacing: 1px !important;
   cursor: pointer !important;
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   box-sizing: border-box !important;
   outline: none !important;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
   overflow: hidden !important;
}

.pp-btn-preset:hover,
.preset-btn:hover,
.pixim-wallet-module .preset-btn:hover,
.dest-toggle-btn:hover,
.pixim-wallet-module .dest-toggle-btn:hover,
.stat-box-pod:hover {
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(10, 20, 32, 0.9) 100%) !important;
   border-color: rgba(0, 240, 255, 0.45) !important;
   color: #00f0ff !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.2) !important;
}

.pp-btn-preset:focus-visible,
.preset-btn:focus-visible,
.dest-toggle-btn:focus-visible,
.stat-box-pod:focus-visible {
   outline: 2px solid #00f0ff !important;
   outline-offset: 2px !important;
}

.pp-btn-preset:active,
.preset-btn:active,
.dest-toggle-btn:active,
.stat-box-pod:active {
   transform: scale(0.97) translateY(0) !important;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.pp-btn-preset.is-active,
.preset-btn.is-active,
.pixim-wallet-module .preset-btn.is-active,
.dest-toggle-btn.is-active,
.pixim-wallet-module .dest-toggle-btn.is-active {
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.22) 0%, rgba(0, 140, 255, 0.1) 100%) !important;
   border-color: #00f0ff !important;
   color: #ffffff !important;
   box-shadow: 0 0 16px rgba(0, 240, 255, 0.25), inset 0 0 8px rgba(0, 240, 255, 0.1) !important;
   font-weight: 800 !important;
}

.pp-btn-preset.is-active::after,
.preset-btn.is-active::after,
.pixim-wallet-module .preset-btn.is-active::after,
.dest-toggle-btn.is-active::after,
.pixim-wallet-module .dest-toggle-btn.is-active::after {
   content: "" !important;
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 2px !important;
   background: linear-gradient(90deg, transparent, #00f0ff, transparent) !important;
   box-shadow: 0 0 10px #00f0ff !important;
   opacity: 0.9 !important;
}

/* 5. FILTER TAB CONTROLS (.pp-btn-filter) */
.pp-btn-filter,
.vault-tab-btn,
.orders-filter-btn,
.g2g-order-subtabs li a {
   height: 34px !important;
   padding: 0 14px !important;
   border-radius: 6px !important;
   background: transparent !important;
   border: 1px solid transparent !important;
   color: #94a3b8 !important;
   font-family: 'Rajdhani', sans-serif !important;
   font-size: 12px !important;
   font-weight: 700 !important;
   letter-spacing: 0.8px !important;
   text-transform: uppercase !important;
   cursor: pointer !important;
   display: inline-flex !important;
   align-items: center !important;
   gap: 8px !important;
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
   outline: none !important;
   white-space: nowrap !important;
}

.pp-btn-filter:hover,
.vault-tab-btn:hover,
.orders-filter-btn:hover,
.g2g-order-subtabs li a:hover {
   color: #00f0ff !important;
   background: rgba(0, 240, 255, 0.08) !important;
   border-color: rgba(0, 240, 255, 0.25) !important;
}

.pp-btn-filter:focus-visible,
.vault-tab-btn:focus-visible,
.orders-filter-btn:focus-visible,
.g2g-order-subtabs li a:focus-visible {
   outline: 2px solid #00f0ff !important;
   outline-offset: 2px !important;
}

.pp-btn-filter.active,
.pp-btn-filter.is-active,
.vault-tab-btn.active,
.orders-filter-btn.active,
.g2g-order-subtabs li.active a {
   background: #00f0ff !important;
   border-color: #00f0ff !important;
   color: #050a12 !important;
   font-weight: 800 !important;
   box-shadow: 0 0 16px rgba(0, 240, 255, 0.5) !important;
}

.pp-btn-filter.active .tab-badge,
.vault-tab-btn.active .tab-badge,
.orders-filter-btn.active .tab-badge {
   background: #050a12 !important;
   color: #00f0ff !important;
}

/* Subtabs Segmented Capsule Shell */
.g2g-order-subtabs {
   list-style: none !important;
   padding: 4px !important;
   margin: 0 0 20px 0 !important;
   display: inline-flex !important;
   gap: 4px !important;
   background: linear-gradient(135deg, rgba(10, 18, 28, 0.85) 0%, rgba(6, 12, 20, 0.95) 100%) !important;
   border: 1px solid rgba(0, 240, 255, 0.18) !important;
   border-radius: 8px !important;
   overflow-x: auto !important;
   white-space: nowrap !important;
   scrollbar-width: none !important;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.g2g-order-subtabs li {
   padding: 0 !important;
   margin: 0 !important;
   display: inline-flex !important;
}

.g2g-order-subtabs li::after {
   display: none !important;
}

/* Empty Orders Action CTA */
.g2g-empty-orders-state a.button {
   height: 44px !important;
   padding: 0 24px !important;
   margin-top: 14px !important;
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(8, 16, 26, 0.95) 100%) !important;
   border: 1px solid #00f0ff !important;
   color: #00f0ff !important;
   font-family: 'Rajdhani', sans-serif !important;
   font-size: 13.5px !important;
   font-weight: 800 !important;
   letter-spacing: 1.5px !important;
   text-transform: uppercase !important;
   border-radius: 6px !important;
   box-shadow: 0 0 14px rgba(0, 240, 255, 0.15) !important;
   cursor: pointer !important;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 8px !important;
   text-decoration: none !important;
   outline: none !important;
}

.g2g-empty-orders-state a.button:hover {
   background: #00f0ff !important;
   border-color: #00f0ff !important;
   color: #050a12 !important;
   box-shadow: 0 0 24px rgba(0, 240, 255, 0.55), 0 4px 15px rgba(0, 0, 0, 0.4) !important;
   transform: translateY(-1px) !important;
}

.g2g-empty-orders-state a.button:hover svg {
   transform: translateX(4px) !important;
   color: #050a12 !important;
   stroke: #050a12 !important;
}

.g2g-empty-orders-state a.button svg {
   transition: transform 0.2s ease, color 0.2s ease, stroke 0.2s ease !important;
}

.g2g-empty-orders-state a.button:active {
   transform: scale(0.98) translateY(0) !important;
}