/*
 * Telegram Mini App (TWA) — Liquid Glass Design.
 * Активується тільки коли є клас "twa-mode".
 * В звичайному браузері ні на що не впливає.
 *
 * Стиль: Telegram Liquid Glass (glassmorphism)
 * — напівпрозорі карточки з backdrop-filter: blur
 * — м'які тіні та inner highlight borders
 * — iOS-style інпути
 */

/* ==========================================================
   GLASS MIXINS (reusable patterns via shared properties)
   ========================================================== */

/* Shared glass card values — applied per-component below */

/* ==========================================================
   GLOBAL — hide desktop-only elements, reset layout
   ========================================================== */

.twa-mode .header,
.twa-mode .footer,
.twa-mode .aurora-container,
.twa-mode .aurora-blob,
.twa-mode .login-wrapper,
.twa-mode .login-btn,
.twa-mode .login-dropdown,
.twa-mode #telegramLoginModal,
.twa-mode .auth-buttons,
.twa-mode .mobile-nav,
.twa-mode .sidebar,
.twa-mode .sidebar-overlay {
    display: none !important;
}

body.twa-mode {
    background: linear-gradient(180deg, #E8EEF7 0%, #DCE4F0 50%, #D0D9EC 100%) !important;
    background-attachment: fixed !important;
    background-image: none !important;
    font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-top: env(safe-area-inset-top, 0px);
}

/* ==========================================================
   LAYOUT
   ========================================================== */

body.twa-mode .cabinet-wrapper {
    margin-left: 0 !important;
    min-height: calc(100vh - 64px);
}

body.twa-mode .cabinet-main {
    padding: 12px 12px 24px !important;
    max-width: 100% !important;
}

body.twa-mode .main-content,
body.twa-mode main,
body.twa-mode .container {
    padding: 12px !important;
    max-width: 100% !important;
    min-height: auto;
}

/* ==========================================================
   INDEX — Upload Page
   ========================================================== */

body.twa-mode .upload-page {
    padding: 0 !important;
}

body.twa-mode .upload-page h1,
body.twa-mode .content-header h1 {
    font-size: 18px !important;
    font-weight: 700;
    margin-bottom: 4px !important;
}

body.twa-mode .upload-page p,
body.twa-mode .content-header p {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 12px;
}

/* Mode tabs — glass pill switcher */
body.twa-mode .check-mode-tabs {
    display: flex;
    background: rgba(120, 120, 128, 0.08);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 16px;
    gap: 0;
}

body.twa-mode .check-mode-tab {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    background: transparent;
    color: #9CA3AF;
}

body.twa-mode .check-mode-tab.active {
    background: #3146FF !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(49, 70, 255, 0.35);
}

/* ── Glass card ── */
body.twa-mode .glass-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 20px !important;
    box-shadow:
        0 2px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    padding: 16px !important;
}

/* ── Drop zone ── */
body.twa-mode .drop-zone {
    border: 2px dashed rgba(0, 0, 0, 0.12) !important;
    border-radius: 16px !important;
    padding: 32px 16px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.twa-mode .drop-zone-text {
    font-size: 14px !important;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    color: #1F2937;
}

body.twa-mode .drop-zone-hint {
    font-size: 11px !important;
    color: #9CA3AF;
    margin-top: 6px;
}

/* ==========================================================
   INDEX — Result Page
   ========================================================== */

body.twa-mode .result-page {
    padding: 0 !important;
}

body.twa-mode .result-header {
    text-align: center;
    margin-bottom: 12px;
}

body.twa-mode .result-status {
    font-size: 20px !important;
    font-weight: 700;
    gap: 6px !important;
}

body.twa-mode .result-subtitle {
    font-size: 13px !important;
}

body.twa-mode .amount-block {
    text-align: center;
    margin: 12px 0;
}

body.twa-mode .amount {
    font-size: 28px !important;
    font-weight: 800;
}

body.twa-mode .transaction-info {
    font-size: 13px !important;
}

body.twa-mode .data-source-badge {
    font-size: 10px !important;
}

body.twa-mode .data-source-badge span {
    font-size: 10px !important;
}

body.twa-mode .cards-container {
    display: flex;
    flex-direction: column !important;
    gap: 12px !important;
}

/* ── Party cards (sender/receiver) ── */
body.twa-mode .party-card {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

body.twa-mode .party-field {
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

body.twa-mode .party-field:last-child {
    border-bottom: none;
}

body.twa-mode .party-field-label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9CA3AF;
}

body.twa-mode .party-field-value {
    font-size: 14px !important;
    font-weight: 500;
    color: #1F2937;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* IBAN / card number — prevent mono font overflow */
body.twa-mode .party-field-value.card-number {
    font-family: -apple-system, 'SF Pro Text', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    font-weight: 500;
    word-break: break-all;
}

/* ==========================================================
   CABINET — Content Header
   ========================================================== */

body.twa-mode .content-header {
    margin-bottom: 16px !important;
    padding: 0 !important;
}

body.twa-mode .content-header h1 {
    font-size: 24px !important;
}

/* ==========================================================
   CABINET — Mobile Tab Selector (glass pill)
   ========================================================== */

body.twa-mode .sidebar-nav {
    display: none !important;
}

body.twa-mode .cabinet-tabs-mobile {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding: 4px;
    margin-bottom: 16px;
    background: rgba(120, 120, 128, 0.08);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.twa-mode .cabinet-tabs-mobile::-webkit-scrollbar {
    display: none;
}

body.twa-mode .cabinet-tab-mobile {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #9CA3AF;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    border: none;
    background: transparent;
    cursor: pointer;
}

body.twa-mode .cabinet-tab-mobile.active {
    background: #3146FF;
    color: #fff;
    box-shadow: 0 2px 8px rgba(49, 70, 255, 0.3);
}

/* ==========================================================
   CABINET — Filters (iOS-style inputs)
   ========================================================== */

body.twa-mode .filters-row,
body.twa-mode .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px !important;
    margin-bottom: 12px;
}

body.twa-mode .filters-row select,
body.twa-mode .filter-row select,
body.twa-mode .filters-row input,
body.twa-mode .filter-row input,
body.twa-mode .search-input,
body.twa-mode input[type="search"],
body.twa-mode input[type="text"] {
    background: rgba(120, 120, 128, 0.08) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1F2937 !important;
    -webkit-appearance: none;
    width: 100%;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body.twa-mode select {
    background: rgba(120, 120, 128, 0.08) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1F2937 !important;
}

/* ── Export button — glass ── */
body.twa-mode .export-btn,
body.twa-mode [onclick*="export"],
body.twa-mode button[class*="export"] {
    width: 100%;
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.45) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #3146FF !important;
    border: 0.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 12px;
}

/* ==========================================================
   CABINET — Data Table → Glass Mobile Cards
   ========================================================== */

body.twa-mode .table-header {
    display: none !important;
}

body.twa-mode .table-row {
    display: grid !important;
    grid-template-columns: 32px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 2px 10px !important;
    align-items: center;
    padding: 14px !important;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    color: #1F2937 !important;
    box-shadow:
        0 1px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: transform 0.1s;
}

body.twa-mode .table-row:active {
    transform: scale(0.98);
}

body.twa-mode .table-row > div:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 1;
}

body.twa-mode .table-row .cell-bank:nth-of-type(1) {
    grid-row: 1;
    grid-column: 2;
    font-size: 14px !important;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.twa-mode .table-row .cell-bank:nth-of-type(2) {
    grid-row: 2;
    grid-column: 2;
    font-size: 12px !important;
    color: #9CA3AF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.twa-mode .table-row .cell-amount {
    grid-row: 1;
    grid-column: 3;
    font-size: 14px !important;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    color: #1F2937;
}

body.twa-mode .table-row > div:nth-child(4) {
    grid-row: 2;
    grid-column: 3;
    text-align: right;
}

body.twa-mode .table-row .cell-card,
body.twa-mode .table-row .cell-date {
    display: none !important;
}

/* Status icons */
body.twa-mode .status-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.twa-mode .status-icon.low {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}

body.twa-mode .status-icon.high,
body.twa-mode .status-icon.critical {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
}

body.twa-mode .status-icon.medium {
    background: rgba(234, 179, 8, 0.12);
    color: #EAB308;
}

/* Type badges */
body.twa-mode .type-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 6px;
    font-weight: 600;
}

body.twa-mode .type-badge.pdf {
    background: rgba(49, 70, 255, 0.1);
    color: #3146FF;
}

body.twa-mode .type-badge.screenshot {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

/* Empty / Pagination */
body.twa-mode .table-empty,
body.twa-mode .empty-state,
body.twa-mode #empty-state {
    text-align: center;
    padding: 40px 20px !important;
    color: #9CA3AF;
}

body.twa-mode .pagination-info {
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
    padding: 12px 0;
}

/* ==========================================================
   CABINET — Section Cards (glass)
   ========================================================== */

body.twa-mode .section-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-shadow:
        0 2px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    margin-bottom: 12px !important;
}

/* ==========================================================
   CABINET — Settings tab: fix scroll
   ========================================================== */

body.twa-mode .tab-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
}

body.twa-mode #tab-settings {
    padding-bottom: 80px !important;
}

/* ==========================================================
   PRICING (glass cards)
   ========================================================== */

body.twa-mode .plans-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.twa-mode .plan-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    box-shadow:
        0 2px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
}

body.twa-mode .plan-card.popular {
    border: 1.5px solid rgba(49, 70, 255, 0.5) !important;
    box-shadow:
        0 4px 24px rgba(49, 70, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

body.twa-mode .plan-name {
    font-size: 16px !important;
    font-weight: 700;
}

body.twa-mode .plan-price {
    font-size: 24px !important;
    font-weight: 800;
}

body.twa-mode .plan-features {
    font-size: 13px;
    line-height: 1.7;
}

body.twa-mode .plan-btn,
body.twa-mode .plan-btn-primary,
body.twa-mode .plan-btn-outline {
    width: 100%;
    padding: 14px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700;
    text-align: center;
    border: none !important;
    cursor: pointer;
}

body.twa-mode .plan-btn-primary {
    background: #3146FF !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(49, 70, 255, 0.3);
}

body.twa-mode .page-title {
    text-align: center;
    margin-bottom: 20px;
}

body.twa-mode .page-title h1 {
    font-size: 24px !important;
    font-weight: 800;
}

body.twa-mode .page-title p {
    font-size: 14px;
    color: #6B7280;
}

/* ==========================================================
   BIN CHECKER (glass)
   ========================================================== */

body.twa-mode .card-input,
body.twa-mode .bin-input {
    width: 100%;
    padding: 12px 14px !important;
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 1px;
    border: none !important;
    border-radius: 14px !important;
    background: rgba(120, 120, 128, 0.08) !important;
    color: #1F2937 !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body.twa-mode .result-card,
body.twa-mode .bin-result {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

body.twa-mode .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

body.twa-mode .info-item {
    padding: 8px 0;
}

body.twa-mode .info-label {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9CA3AF;
    margin-bottom: 2px;
}

body.twa-mode .info-value {
    font-size: 14px !important;
    font-weight: 600;
    color: #1F2937;
}

body.twa-mode .bank-header {
    padding: 12px 0 !important;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

body.twa-mode .stats-badge {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 12px;
    margin-top: 16px;
    background: rgba(120, 120, 128, 0.08);
    border-radius: 14px;
}

body.twa-mode .stat-number {
    font-size: 20px !important;
    font-weight: 800;
    color: #1F2937;
}

body.twa-mode .stat-label {
    font-size: 11px;
    color: #9CA3AF;
}

/* ==========================================================
   FAQ / HOW IT WORKS (glass)
   ========================================================== */

body.twa-mode .faq-section,
body.twa-mode .how-section,
body.twa-mode .step-card,
body.twa-mode .feature-card {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    margin-bottom: 12px;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

body.twa-mode .btn-primary,
body.twa-mode button[type="submit"],
body.twa-mode .submit-btn {
    background: #3146FF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(49, 70, 255, 0.25);
}

body.twa-mode .btn-primary:active,
body.twa-mode button[type="submit"]:active {
    opacity: 0.85;
    transform: scale(0.98);
}

body.twa-mode a {
    color: #3146FF;
}

body.twa-mode .text-secondary,
body.twa-mode .hint,
body.twa-mode .subtitle {
    color: #6B7280 !important;
}

/* ==========================================================
   MODALS (heavy glass)
   ========================================================== */

body.twa-mode .modal-overlay {
    padding: 16px !important;
    background: rgba(0, 0, 0, 0.25) !important;
}

body.twa-mode .modal-content {
    border-radius: 24px !important;
    padding: 20px !important;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    backdrop-filter: blur(40px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ==========================================================
   LOADER
   ========================================================== */

body.twa-mode .loader {
    text-align: center;
    padding: 40px 20px;
}

body.twa-mode .spinner {
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-top-color: #3146FF !important;
}

body.twa-mode .loader-text {
    color: #6B7280;
    font-size: 14px;
    margin-top: 12px;
}

/* ==========================================================
   BOTTOM TAB BAR — Floating Liquid Glass Capsule
   (Telegram Wallet / iOS 26 style)
   ========================================================== */

.twa-tab-bar {
    position: fixed;
    bottom: calc(var(--twa-safe-bottom, 4px) + 4px);
    left: 8px;
    right: 8px;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: 62px;
    border-radius: 24px;
    /*
     * Liquid Glass: translucent dark glass with strong blur.
     * Background content bleeds through — that's the "glass" effect.
     * Тelegram Wallet uses ~0.55 opacity dark with saturate+blur.
     */
    background: rgba(22, 22, 26, 0.55);
    -webkit-backdrop-filter: saturate(190%) blur(60px);
    backdrop-filter: saturate(190%) blur(60px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
        0 4px 30px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.12);
}

.twa-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    height: 100%;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.twa-tab--active {
    color: #fff !important;
}

/* Active icon: rounded square with tinted glass fill */
.twa-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.twa-tab--active .twa-tab-icon {
    background: rgba(60, 120, 255, 0.4);
}

.twa-tab-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
}

.twa-tab--active .twa-tab-icon svg {
    stroke-width: 2.2;
}

.twa-tab-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
}

.twa-tab--active .twa-tab-label {
    font-weight: 600;
}

.twa-tab:active {
    opacity: 0.6;
    transition: opacity 0.05s;
}

/* ==========================================================
   SCROLLBAR / MISC
   ========================================================== */

body.twa-mode::-webkit-scrollbar,
body.twa-mode *::-webkit-scrollbar {
    display: none;
}

body.twa-mode {
    scrollbar-width: none;
}

body.twa-mode .fullscreen-drop-overlay {
    border-radius: 0 !important;
}

body.twa-mode .success-banner {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px;
}

body.twa-mode .plan-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Ensure body scroll works everywhere */
body.twa-mode {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
}