body {
    background-color: #222529;
    color: white;
    font-family: 'Nunito', sans-serif;
}
p {
    font-size: 1.1rem;
}
h2 {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: #F7931A;
}
.text-body-secondary {
    color: #aaa !important;
    font-weight: lighter;
}
.form-label {
    margin-top: 1rem;
}
.section {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #333;
}
@media (min-width: 768px) {
    .section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}
.section-how-it-works, .section-pricing {
    background-color: #1C1F22 !important;
}
.section-wrapper {
    border-bottom: 0 !important;
}
.qr-preview {
    background-color: white;
    padding: 1rem;
    border-radius: .5rem;
}
.qr-preview.qr-intro {
    width: 20rem;
}
.section-intro {
    margin-top: 3rem;
}
@media (min-width: 768px) {
    .section-intro {
        margin-top: 5rem;
    }
}
.btc-budge {
    display: inline-block;
    background-color: #F7931A;
    border-radius: .5rem;
    padding: .3rem .8rem;
}
.btn-orange {
    background-color: #F7931A;
}
.step-number {
    margin-top: .1rem;
    color: #666;
    font-size: 1.8rem;
    vertical-align: middle;
    width: 3rem;
    height: 3rem;
    text-align: center;
    display: block;
    border-radius: 50%;
    border: 3px solid #666;
    font-family: Arial;
}
@media (max-width: 767.98px) {
    .step-number {
        width: 2rem;
        height: 2rem;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    .step-container {
        display: flex;
        justify-content: center;
    }
}


/* 1) Vypni dark-mode pri tlači a prepni na svetlú tému */
@media print {
    /* Prepneme color-scheme na light, aby bootstrap použil svetlé farby */
    html[data-bs-theme] {
        color-scheme: light !important;
    }
    /* Prepíšme základné premenné bootstrap pre print */
    :root {
        --bs-body-bg: #fff !important;
        --bs-body-color: #000 !important;
        --bs-table-bg: transparent !important;
        --bs-table-striped-bg: rgba(0, 0, 0, .05) !important;
        --bs-link-color: #000 !important;
    }

    /* 2) Odstrániť nepotrebné prvky */
    .navbar,
    .btn-download {
        display: none !important;
    }

    /* 3) Vynútiť bielu stránku a čierny text */
    body, .container, table, th, td {
        background-color: transparent !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;  /* tlač farieb presne */
        print-color-adjust: exact;
    }

    /* 4) Rušíme všetky tmavé pozadia */
    [class*="bg-"] {
        background-color: transparent !important;
    }

    /* 5) Zamedzíme zalamovaniu hlavičiek tabuľky */
    table {
        page-break-inside: avoid;
    }
}

/* Overrides to force light mode & readable colors */
.print-mode {
    color-scheme: light !important;
}
.print-mode,
.print-mode body,
.print-mode .container,
.print-mode table,
.print-mode th,
.print-mode td {
    background-color: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
/* remove dark backgrounds */
.print-mode [class*="bg-"] {
    background-color: transparent !important;
}

canvas.pdf-page { display: block; margin-bottom: 16px; border: 1px solid #ccc; }
/* Allow selector to receive pointer events */
canvas.selector { position: absolute; top: 0; left: 0; pointer-events: auto; }

.pwa-mode {
    margin-top: 3rem !important;
    overflow: hidden !important;
}
.pwa-mode .settings {
    top: 3.4rem !important;
}
.container-pos {
    touch-action: none;
    overflow: hidden !important;
    z-index: 1;
    padding: 2rem;
    max-width: 500px;
    text-align: center;

    .settings {
        position: absolute;
        right: 0;
        top: .4rem;
        height: 1rem;
        img {
            height: 1.5rem;
            width: 1.5rem;
        }
    }
    h1 {
        visibility: hidden;
        font-size: 1.5rem;
        text-align: center;
        small {
            color: #666 !important;
            display: none;
        }
    }
    .currency {
        color: #999;
        font-size: 1rem;
        height: 1rem;
    }
    .total-amount {
        font-size: 4rem;
        height: 5.5rem;
        color: white;
        font-weight: bold;
    }
    .summary {
        color: #999;
        height: 1rem;
    }
    button:active {
        color: #0D6EFD !important;
    }
    button {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    button:disabled {
        background: rgba(255,255,255,.1) !important;
    }
    .keyboard .col-4 {
        text-align: center;
        padding: 1rem 0;
        font-size: 2rem;
    }
    .btn-charge {
        padding: 1rem 0;
    }
}

.container-modal {
    touch-action: none;
    overflow: hidden !important;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw);
    height: calc(100vh);
    display: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* pre Safari */
    background-color: rgba(34, 37, 41, 0.3); /* mierne priehľadné pozadie */
    padding: 4rem 2rem;
    border-radius: 1rem;

    .qr-preview {
        padding: 0 !important;
    }
}