/* =====================================================
   InfoShop — Components
   ===================================================== */

/* ---- NAVBAR ---- */
.navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       height: 64px;
       z-index: var(--z-nav);
       display: flex;
       align-items: center;
       padding: 0 var(--space-8);
       background: rgba(8, 12, 24, 0.85);
       backdrop-filter: blur(20px);
       border-bottom: 1px solid var(--color-border);
       gap: var(--space-4);
}

.navbar-brand {
       font-size: var(--font-size-xl);
       font-weight: 800;
       letter-spacing: -0.04em;
       white-space: nowrap;
}

.navbar-nav {
       display: flex;
       gap: var(--space-2);
       align-items: center;
       flex: 1;
       margin-left: var(--space-8);
}

.navbar-nav a {
       padding: var(--space-2) var(--space-4);
       border-radius: var(--radius-md);
       color: var(--color-text-secondary);
       font-size: var(--font-size-sm);
       font-weight: 500;
       transition: all var(--transition-fast);
}

.navbar-nav a:hover,
.navbar-nav a.active {
       color: var(--color-text-primary);
       background: var(--color-bg-elevated);
}

/* Dropdown Menu */
.nav-dropdown {
       position: relative;
       display: flex;
       align-items: center;
       margin-left: var(--space-2);
}

.nav-dropdown-content {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       min-width: 160px;
       background: rgba(8, 12, 24, 0.95);
       backdrop-filter: blur(20px);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-lg);
       z-index: var(--z-dropdown);
       padding: var(--space-2);
       /* Use a pseudo-element bridge to prevent hover loss */
       margin-top: var(--space-1);
}

.nav-dropdown-content::before {
       content: '';
       position: absolute;
       top: calc(var(--space-1) * -1 - 2px);
       left: 0;
       right: 0;
       height: calc(var(--space-1) + 4px);
       background: transparent;
}

.nav-dropdown:hover .nav-dropdown-content {
       display: block;
       animation: slideInUp 0.2s ease;
}

.nav-dropdown-content a {
       display: block;
       width: 100%;
       margin-left: 0 !important;
       text-align: left;
}

.nav-dropdown>a {
       margin-left: 0 !important;
}

.navbar-actions {
       display: flex;
       gap: var(--space-3);
       align-items: center;
       margin-left: auto;
}

.balance-badge {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       padding: var(--space-2) var(--space-4);
       border-radius: var(--radius-full);
       background: var(--color-accent-glow);
       border: 1px solid rgba(245, 166, 35, 0.3);
       font-size: var(--font-size-sm);
       font-weight: 600;
       color: var(--color-accent);
}

/* ---- BUTTONS ---- */
.btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: var(--space-2);
       padding: var(--space-3) var(--space-6);
       border-radius: var(--radius-md);
       font-size: var(--font-size-sm);
       font-weight: 600;
       cursor: pointer;
       transition: all var(--transition-base);
       white-space: nowrap;
       text-decoration: none;
       border: 1px solid transparent;
       user-select: none;
}

.btn:disabled {
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
}

.btn-primary {
       background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
       color: #fff;
       box-shadow: 0 4px 16px var(--color-primary-glow);
}

.btn-primary:hover {
       transform: translateY(-1px);
       box-shadow: 0 6px 24px var(--color-primary-glow);
       filter: brightness(1.1);
}

.btn-secondary {
       background: var(--color-bg-elevated);
       color: var(--color-text-primary);
       border-color: var(--color-border);
}

.btn-secondary:hover {
       background: var(--color-bg-hover);
       border-color: var(--color-border-bright);
}

.btn-accent {
       background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
       color: #000;
       font-weight: 700;
}

.btn-accent:hover {
       transform: translateY(-1px);
       filter: brightness(1.1);
}

.btn-danger {
       background: var(--color-danger-subtle);
       color: var(--color-danger);
       border-color: rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
       background: var(--color-danger);
       color: #fff;
}

.btn-ghost {
       background: transparent;
       color: var(--color-text-secondary);
}

.btn-ghost:hover {
       color: var(--color-text-primary);
       background: var(--color-bg-elevated);
}

.btn-sm {
       padding: var(--space-1) var(--space-3);
       font-size: var(--font-size-xs);
       border-radius: var(--radius-sm);
}

.btn-lg {
       padding: var(--space-4) var(--space-8);
       font-size: var(--font-size-lg);
       border-radius: var(--radius-lg);
}

.btn-block {
       width: 100%;
}

.btn-loading {
       position: relative;
       color: transparent !important;
}

.btn-loading::after {
       content: '';
       position: absolute;
       inset: 0;
       margin: auto;
       width: 16px;
       height: 16px;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-top-color: #fff;
       border-radius: 50%;
       animation: spin 0.7s linear infinite;
}

/* ---- CARDS ---- */
.card {
       background: var(--color-bg-card);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       padding: var(--space-6);
       box-shadow: var(--shadow-card);
       transition: all var(--transition-base);
}

.card:hover {
       border-color: var(--color-border-bright);
       box-shadow: var(--shadow-lg);
}

.card-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: var(--space-4);
       padding-bottom: var(--space-4);
       border-bottom: 1px solid var(--color-border);
}

.card-title {
       font-size: var(--font-size-lg);
       font-weight: 700;
}

/* ---- PRODUCT CARD ---- */
.product-card {
       background: var(--color-bg-card);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       overflow: hidden;
       transition: all var(--transition-base);
       cursor: pointer;
       display: flex;
       flex-direction: column;
}

.product-card:hover {
       border-color: var(--color-primary);
       transform: translateY(-3px);
       box-shadow: 0 12px 40px rgba(79, 126, 255, 0.15);
}

.product-card-header {
       padding: var(--space-4) var(--space-5);
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid var(--color-border);
}

.product-card-body {
       padding: var(--space-5);
       flex: 1;
}

.product-card-footer {
       padding: var(--space-4) var(--space-5);
       border-top: 1px solid var(--color-border);
       display: flex;
       align-items: center;
       justify-content: space-between;
}

.product-preview {
       font-family: var(--font-mono);
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       line-clamp: 3;
       -webkit-box-orient: vertical;
}

.product-preview.blurred {
       filter: blur(4px);
       pointer-events: none;
}

.product-price {
       font-size: var(--font-size-xl);
       font-weight: 800;
       color: var(--color-accent);
}

.product-title {
       font-size: var(--font-size-sm);
       font-weight: 600;
       color: var(--color-text-primary);
       margin-bottom: var(--space-2);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
}

/* ---- BADGE ---- */
.badge {
       display: inline-flex;
       align-items: center;
       gap: var(--space-1);
       padding: 0.2em 0.6em;
       border-radius: var(--radius-full);
       font-size: var(--font-size-xs);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.05em;
}

.badge-primary {
       background: var(--color-primary-subtle);
       color: var(--color-primary-light);
       border: 1px solid rgba(79, 126, 255, 0.3);
}

.badge-success,
.badge-completed {
       background: var(--color-success-subtle);
       color: var(--color-success);
       border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-warning,
.badge-pending {
       background: var(--color-warning-subtle);
       color: var(--color-warning);
       border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger,
.badge-expired,
.badge-cancelled {
       background: var(--color-danger-subtle);
       color: var(--color-danger);
       border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-btc {
       background: rgba(247, 147, 26, 0.12);
       color: var(--color-btc);
       border: 1px solid rgba(247, 147, 26, 0.3);
}

.badge-ltc {
       background: rgba(191, 187, 187, 0.12);
       color: var(--color-ltc);
       border: 1px solid rgba(191, 187, 187, 0.3);
}

.badge-bnb {
       background: rgba(243, 186, 47, 0.12);
       color: var(--color-bnb);
       border: 1px solid rgba(243, 186, 47, 0.3);
}

.badge-usdt {
       background: rgba(38, 161, 123, 0.12);
       color: var(--color-usdt);
       border: 1px solid rgba(38, 161, 123, 0.3);
}

/* ---- FORM CONTROLS ---- */
.form-group {
       display: flex;
       flex-direction: column;
       gap: var(--space-2);
       margin-bottom: var(--space-5);
}

.form-label {
       font-size: var(--font-size-sm);
       font-weight: 600;
       color: var(--color-text-secondary);
}

.form-control {
       width: 100%;
       padding: var(--space-3) var(--space-4);
       border-radius: var(--radius-md);
       background: var(--color-bg-elevated);
       border: 1px solid var(--color-border);
       color: var(--color-text-primary);
       font-size: var(--font-size-base);
       transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:hover {
       border-color: var(--color-border-bright);
}

.form-control:focus {
       border-color: var(--color-primary);
       box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.form-control::placeholder {
       color: var(--color-text-muted);
}

.form-text {
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
}

.form-error {
       font-size: var(--font-size-xs);
       color: var(--color-danger);
}

.form-control.is-invalid {
       border-color: var(--color-danger);
}

/* ---- TABLE ---- */
.table-wrap {
       overflow-x: auto;
       border-radius: var(--radius-lg);
       border: 1px solid var(--color-border);
}

table {
       width: 100%;
       border-collapse: collapse;
}

thead tr {
       background: var(--color-bg-elevated);
}

th,
td {
       padding: var(--space-3) var(--space-4);
       text-align: left;
       border-bottom: 1px solid var(--color-border);
}

th {
       font-size: var(--font-size-xs);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--color-text-muted);
       font-weight: 600;
}

td {
       font-size: var(--font-size-sm);
       color: var(--color-text-secondary);
}

tbody tr {
       transition: background var(--transition-fast);
}

tbody tr:hover {
       background: var(--color-bg-elevated);
}

tbody tr:last-child td {
       border-bottom: none;
}

td.mono {
       font-family: var(--font-mono);
       font-size: var(--font-size-xs);
       color: var(--color-primary-light);
}

/* ---- MODAL ---- */
.modal-overlay {
       position: fixed;
       inset: 0;
       z-index: var(--z-modal);
       background: rgba(4, 6, 16, 0.85);
       backdrop-filter: blur(8px);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--space-4);
       opacity: 0;
       transition: opacity var(--transition-base);
       pointer-events: none;
}

.modal-overlay.open {
       opacity: 1;
       pointer-events: all;
}

.modal {
       background: var(--color-bg-card);
       border: 1px solid var(--color-border-bright);
       border-radius: var(--radius-xl);
       padding: var(--space-8);
       width: 100%;
       max-width: 480px;
       box-shadow: var(--shadow-lg);
       transform: scale(0.95);
       transition: transform var(--transition-base);
}

.modal-overlay.open .modal {
       transform: scale(1);
}

.modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: var(--space-6);
}

.modal-close {
       background: var(--color-bg-elevated);
       border: 1px solid var(--color-border);
       width: 32px;
       height: 32px;
       border-radius: var(--radius-md);
       cursor: pointer;
       color: var(--color-text-muted);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all var(--transition-fast);
       font-size: 18px;
}

.modal-close:hover {
       color: var(--color-text-primary);
       background: var(--color-bg-hover);
}

/* ---- TOASTS ---- */
.toast-container {
       position: fixed;
       bottom: var(--space-6);
       right: var(--space-6);
       z-index: var(--z-toast);
       display: flex;
       flex-direction: column;
       gap: var(--space-3);
}

.toast {
       padding: var(--space-4) var(--space-5);
       border-radius: var(--radius-md);
       font-size: var(--font-size-sm);
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: var(--space-3);
       min-width: 280px;
       max-width: 400px;
       box-shadow: var(--shadow-lg);
       border: 1px solid var(--color-border);
       animation: slideInRight 0.3s ease;
}

.toast-success {
       background: var(--color-bg-card);
       border-left: 3px solid var(--color-success);
}

.toast-error {
       background: var(--color-bg-card);
       border-left: 3px solid var(--color-danger);
}

.toast-info {
       background: var(--color-bg-card);
       border-left: 3px solid var(--color-primary);
}

/* ---- SPINNER ---- */
.spinner {
       width: 40px;
       height: 40px;
       border: 3px solid var(--color-border);
       border-top-color: var(--color-primary);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
}

.spinner-sm {
       width: 20px;
       height: 20px;
       border-width: 2px;
}

/* ---- QR CODE box ---- */
.qr-box {
       display: flex;
       flex-direction: column;
       align-items: center;
       background: #fff;
       border-radius: var(--radius-lg);
       padding: var(--space-6);
       gap: var(--space-4);
}

.qr-box canvas,
.qr-box img {
       border-radius: var(--radius-sm);
}

/* ---- Address copy box ---- */
.address-box {
       display: flex;
       align-items: center;
       gap: var(--space-3);
       background: var(--color-bg-elevated);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
       padding: var(--space-3) var(--space-4);
       overflow: hidden;
}

.address-box code {
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       background: none;
       border: none;
       padding: 0;
       font-size: var(--font-size-sm);
}

/* ---- COIN SELECTOR ---- */
.coin-selector {
       display: flex;
       gap: var(--space-3);
       flex-wrap: wrap;
}

.coin-btn {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       padding: var(--space-3) var(--space-5);
       border-radius: var(--radius-md);
       background: var(--color-bg-elevated);
       border: 2px solid var(--color-border);
       font-weight: 600;
       cursor: pointer;
       transition: all var(--transition-fast);
       color: var(--color-text-secondary);
}

.coin-btn:hover {
       border-color: var(--color-border-bright);
       color: var(--color-text-primary);
}

.coin-btn.active[data-coin="BTC"] {
       border-color: var(--color-btc);
       background: rgba(247, 147, 26, 0.08);
       color: var(--color-btc);
}

.coin-btn.active[data-coin="LTC"] {
       border-color: var(--color-ltc);
       background: rgba(191, 187, 187, 0.08);
       color: var(--color-ltc);
}

.coin-btn.active[data-coin="BNB"] {
       border-color: var(--color-bnb);
       background: rgba(243, 186, 47, 0.08);
       color: var(--color-bnb);
}

.coin-btn.active[data-coin="USDT"] {
       border-color: var(--color-usdt);
       background: rgba(38, 161, 123, 0.08);
       color: var(--color-usdt);
}

/* ---- PAGINATION ---- */
.pagination {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       justify-content: center;
}

.page-btn {
       padding: var(--space-2) var(--space-4);
       border-radius: var(--radius-md);
       background: var(--color-bg-elevated);
       border: 1px solid var(--color-border);
       color: var(--color-text-secondary);
       cursor: pointer;
       font-size: var(--font-size-sm);
       transition: all var(--transition-fast);
}

.page-btn:hover:not(:disabled) {
       border-color: var(--color-primary);
       color: var(--color-primary);
}

.page-btn:disabled {
       opacity: 0.4;
       cursor: not-allowed;
}

/* ---- STAT CARD ---- */
.stat-card {
       background: var(--color-bg-card);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       padding: var(--space-6);
       display: flex;
       flex-direction: column;
       gap: var(--space-2);
}

.stat-label {
       font-size: var(--font-size-xs);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--color-text-muted);
}

.stat-value {
       font-size: var(--font-size-3xl);
       font-weight: 800;
       color: var(--color-text-primary);
}

.stat-change {
       font-size: var(--font-size-xs);
       color: var(--color-success);
}

/* ---- LANG SWITCHER ---- */
.lang-switcher {
       position: relative;
}

.lang-switcher-btn {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       padding: var(--space-2) var(--space-3);
       border-radius: var(--radius-md);
       background: var(--color-bg-elevated);
       border: 1px solid var(--color-border);
       color: var(--color-text-secondary);
       cursor: pointer;
       font-size: var(--font-size-sm);
       transition: all var(--transition-fast);
}

.lang-switcher-btn:hover {
       border-color: var(--color-border-bright);
       color: var(--color-text-primary);
}

.lang-dropdown {
       position: absolute;
       top: calc(100% + 8px);
       right: 0;
       min-width: 160px;
       background: var(--color-bg-card);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-lg);
       z-index: var(--z-dropdown);
       padding: var(--space-2);
       display: none;
}

.lang-dropdown.open {
       display: block;
}

.lang-option {
       display: flex;
       align-items: center;
       gap: var(--space-3);
       padding: var(--space-2) var(--space-3);
       border-radius: var(--radius-sm);
       cursor: pointer;
       font-size: var(--font-size-sm);
       color: var(--color-text-secondary);
}

.lang-option:hover {
       background: var(--color-bg-elevated);
       color: var(--color-text-primary);
}

.lang-option.active {
       color: var(--color-primary);
       font-weight: 600;
}