/* Main stylesheet for Azino777 Casino */
/* This file is loaded from the template */

/* Basic reset and setup handled in inline styles */

/* Additional responsive styles */
@media (max-width: 575px) {
    .container-fluid { padding-left: 15px; padding-right: 15px; }
    .section7block { padding: 40px 0; }
}

/* Animation utilities */
.fade-in { animation: fadeIn 0.5s ease-in; }
.slide-up { animation: slideUp 0.5s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Print styles */
@media print {
    .gz7header, .footer9kx2, .widget2sticky { display: none; }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body { background: #000; color: #fff; }
    a { text-decoration: underline; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* =========================
   APP BLOCK (.container.app)
   ========================= */
.container.app{
    max-width: 980px;
    margin: 22px auto 60px;
    padding: 28px 20px 42px;

    background: rgba(9, 1, 17, 0.58);
    border: 1px solid rgba(168, 201, 78, 0.18);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);

    color: rgba(232,232,232,0.92);
    font-size: 16px;
    line-height: 1.9;

    /* щоб довгі слова/URL не рвали блок */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Лід (перший абзац) */
.container.app > p:first-of-type{
    background: rgba(9,1,17,.52);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 16px 16px;
    margin: 0 0 18px;
}

/* Заголовки */
.container.app h1,
.container.app h2,
.container.app h3{
    color: #a8c94e;
    line-height: 1.25;
    letter-spacing: .2px;
}

.container.app h2{
    font-size: 26px;
    margin: 28px 0 14px;
    padding-left: 14px;
    border-left: 4px solid rgba(168,201,78,.85);
}

.container.app h3{
    font-size: 20px;
    margin: 18px 0 10px;
    color: rgba(232,232,232,.96);
}

.container.app p{
    margin: 0 0 14px;
}

/* Посилання */
.container.app a{
    color: #0b80dc;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}
.container.app a:hover{
    color: #a8c94e;
}

/* Списки */
.container.app ul,
.container.app ol{
    margin: 12px 0 18px;
    padding-left: 22px;
}

.container.app li{
    margin: 8px 0;
}

/* UL як чекліст */
.container.app ul{
    list-style: none;
    padding-left: 0;
}
.container.app ul li{
    position: relative;
    padding-left: 28px;
}
.container.app ul li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #a8c94e;
    font-weight: 900;
}

/* OL з “бейджами” */
.container.app ol{
    list-style: none;
    padding-left: 0;
    counter-reset: step;
}
.container.app ol li{
    counter-increment: step;
    position: relative;
    padding-left: 42px;
    margin: 10px 0;
}
.container.app ol li::before{
    content: counter(step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(11,128,220,.18);
    border: 1px solid rgba(11,128,220,.45);
    color: #0b80dc;
    font-weight: 900;
}

/* Візуальна вставка для важливих абзаців (⚠️ і т.д.)
   (працює без класів: по емодзі не зачепиш CSS, тому даю class на майбутнє) */
.container.app .note{
    background: rgba(11,128,220,.10);
    border: 1px solid rgba(11,128,220,.35);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 16px 0;
}

/* Таблиці (якщо з'являться в контенті) */
.container.app table{
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
    overflow: hidden;
}
.container.app td,
.container.app th{
    padding: 12px 14px;
    border: 1px solid rgba(168,201,78,0.22);
    text-align: left;
}
.container.app th{
    background: rgba(11,128,220,0.25);
    color: rgba(232,232,232,.98);
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 768px){
    .container.app{
        margin: 14px auto 44px;
        padding: 18px 14px 28px;
        font-size: 15px;
        line-height: 1.85;
        border-radius: 16px;
    }

    .container.app h2{
        font-size: 20px;
        margin: 20px 0 12px;
        padding-left: 12px;
    }

    .container.app h3{
        font-size: 17px;
    }

    .container.app ol li{
        padding-left: 40px;
    }

    .container.app > p:first-of-type{
        padding: 14px 14px;
        border-radius: 14px;
    }
}

@media (max-width: 420px){
    .container.app{
        font-size: 14.5px;
    }
}