/* vip.css - Unikátne prémiové prvky pre VIP sekciu */

/* --- Terminál herného servera (Mockup) --- */
.vip-terminal-wrapper {
    background: rgba(9, 9, 11, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(16, 185, 129, 0.1);
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.terminal-header {
    background: #18181b;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-dots i {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #3f3f46;
}

.terminal-dots i:nth-child(1) { background: #ef4444; }
.terminal-dots i:nth-child(2) { background: #f59e0b; }
.terminal-dots i:nth-child(3) { background: #10b981; }

.terminal-title {
    color: #a1a1aa;
    font-size: 12px;
    margin-left: 10px;
    font-family: 'Inter', sans-serif;
}

.terminal-body {
    padding: 20px;
    color: #d4d4d8;
    line-height: 1.7;
    position: relative;
    min-height: 200px; /* Zabezpečí, že po vypísaní JS neposkočí stránka */
}

/* Triedy pre riadky vypisované cez vip.js */
.t-line { transition: opacity 0.2s ease, transform 0.2s ease; }
.t-line.hidden { opacity: 0; transform: translateY(5px); }
.t-time { color: #71717a; margin-right: 10px; }
.t-info { color: #3b82f6; }
.t-success { color: #10b981; font-weight: bold; }
.t-warn { color: #f59e0b; }

/* --- Špeciálna finančná karta --- */
.finance-highlight-card {
    background: linear-gradient(145deg, rgba(249, 115, 22, 0.1) 0%, rgba(24, 24, 27, 0.8) 100%);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 24px;
    padding: 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.finance-highlight-card::before {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.finance-highlight-card > * {
    position: relative;
    z-index: 1;
}

.bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
    text-align: left;
}

@media (max-width: 768px) { 
    .bank-grid { grid-template-columns: 1fr; } 
    .finance-highlight-card { padding: 30px; } 
}

.bank-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bank-item:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 115, 22, 0.3);
}

.bank-item h4 {
    color: #f97316;
    font-size: 20px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bank-item p {
    color: #a1a1aa;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* --- WIDGET SHOWCASE (Ukážky bannerov) --- */
.showcase-layout { margin-top: 50px; display: flex; flex-direction: column; gap: 50px; }
.showcase-title { font-size: 14px; color: #71717a; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 15px 0; font-weight: 800; text-align: center; }
.showcase-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; justify-content: center; }
@media (max-width: 900px) { .showcase-split { grid-template-columns: 1fr; } }

/* Základné triedy widgetov */
.vw-container { background: #121214; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); color: #fff; font-family: 'Inter', sans-serif; text-align: left; }
.vw-header { background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, transparent 100%); padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center; }

/* Fix pre grafické logá vo widgetoch */
.vw-real-logo {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.vw-logo-full {
    height: 22px;
    width: auto;
}

.vw-logo-icon {
    height: 32px;
    width: auto;
}

.vw-secure { font-size: 11px; color: #10b981; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.vw-secure::before { content: '🔒'; }

.vw-body { padding: 20px; }
.vw-group { margin-bottom: 15px; }
.vw-group label { display: block; font-size: 11px; color: #71717a; text-transform: uppercase; font-weight: 800; margin-bottom: 8px; }
.vw-input, .vw-select { width: 100%; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 10px 15px; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; box-sizing: border-box; }
.vw-input:focus, .vw-select:focus { outline: none; border-color: #f97316; }
.vw-select { appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="%2371717a" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-position: right 10px center; }

.vw-warn { display: none; font-size: 11px; color: #f59e0b; margin-bottom: 15px; text-align: center; }
.vw-price-box { display: flex; justify-content: space-between; align-items: center; background: rgba(249, 115, 22, 0.05); border: 1px dashed rgba(249, 115, 22, 0.3); padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.vw-price-box span { font-size: 12px; color: #a1a1aa; text-transform: uppercase; }
.vw-total { font-size: 22px; font-weight: 800; color: #fff; }

.vw-btn { width: 100%; background: #f97316; color: #000; border: none; padding: 14px; font-size: 14px; font-weight: 800; text-transform: uppercase; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.vw-btn:hover { background: #ea580c; color: #fff; box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); }

/* Horizontálny Layout */
.vw-horizontal { max-width: 900px; margin: 0 auto; }
.vw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }
.vw-horizontal .vw-group { margin-bottom: 0; }
.vw-footer-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 15px; }
.vw-horizontal .vw-warn { margin: 0; text-align: left; }
.vw-checkout { display: flex; align-items: center; gap: 20px; }
.vw-price { font-size: 14px; color: #a1a1aa; display: flex; align-items: center; gap: 10px; }
.vw-horizontal .vw-btn { width: auto; padding: 12px 30px; }
@media (max-width: 768px) { .vw-grid-4 { grid-template-columns: 1fr 1fr; } .vw-footer-row { flex-direction: column; gap: 15px; align-items: flex-start; } }

/* Univerzálny Layout */
.vw-universal { max-width: 380px; margin: 0 auto; }

/* Vertikálny Layout */
.vw-vertical { max-width: 260px; margin: 0 auto; }
.vw-vertical .vw-body { padding: 15px; }
.vw-vertical .vw-input, .vw-vertical .vw-select { padding: 8px 10px; font-size: 12px; }
.vw-vertical .vw-price-box { padding: 10px; }
.vw-vertical .vw-btn { padding: 12px; font-size: 12px; }

/* --- RESPONZIVITA PRE MOBILNÉ ZARIADENIA --- */
@media (max-width: 768px) {
    /* 1. Oprava hlavného nadpisu Hero sekcie (zabráni pretekaniu slova PROGRAMOVANIA) */
    .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        hyphens: auto; /* Dovolí prehliadaču rozdeliť slovo, ak je to nutné */
    }

    /* 2. Oprava nadpisov v sekcii "Ako to funguje" (prekryje inline štýl 32px) */
    .hw-split-cards h3 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    /* 3. Oprava veľkosti textu a zalamovania v hernom termináli */
    .vip-terminal-wrapper {
        font-size: 11px !important;
    }
    .terminal-body {
        padding: 15px !important;
        word-break: break-word; /* Zabezpečí, že dlhé logy nepretečú */
    }

    /* 4. Úprava tlačidiel na mobile (naukladajú sa pekne pod seba na celú šírku) */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .hero-buttons .btn-hw {
        width: 100%;
        text-align: center;
        margin-left: 0 !important; /* Zruší medzeru z desktopu */
    }
}