/* ============================================================
   MOBILE ADAPTIVE — matches screenshot design exactly
   ============================================================ */

html, body {
    overflow-x: hidden;
}

/* ============================================================
   DESKTOP STYLES (base)
   ============================================================ */

/* --- Shared digit box --- */
.digit-box, .digit-box-v2 {
    background-color: black;
    color: white;
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.digit-box    { width: 35px; height: 45px; font-size: 32px; }
.digit-box-v2 { background-color: white !important; color: black !important;
                width: 30px; height: 55px; font-size: 29px; font-weight: 800; border-radius: 6px; }

/* --- Timer containers --- */
.timer-container,
.timer-container-v2 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
}

.timer-item, .timer-item-v2 { display: flex; flex-direction: column; align-items: center; }

.timer__days, .timer__hours, .timer__minutes, .timer__seconds { display: flex; gap: 4px; margin: 0 !important; }
.digits-wrapper-v2 { display: flex; gap: 4px; }

.timer-separator    { font-size: 32px; font-weight: bold; color: black;  line-height: 55px; }
.timer-separator-v2 { font-size: 32px; font-weight: bold; color: white;  line-height: 50px; }

.time-label    { margin-top: 8px; font-size: 14px; font-weight: bold; color: black; }
.time-label-v2 { margin-top: 8px; font-size: 16px; font-weight: 600;  color: white; }

/* --- Buttons --- */
.btn-flip {
    background-color: black !important; color: white !important;
    font-weight: bold; padding: 15px 30px; border-radius: 15px;
    text-transform: uppercase; border: 2px solid black;
    font-size: 1.1rem; text-decoration: none; display: inline-block;
    transition: all 0.3s ease; white-space: nowrap;
}
.btn-flip:hover { background-color: white !important; color: black !important; transform: translateY(-2px); }

.btn-flip-white {
    background-color: white !important; color: black !important;
    font-weight: 800; padding: 12px 25px !important; border-radius: 12px;
    font-size: 16px; border: 2px solid white; transition: 0.3s;
    text-decoration: none; display: inline-block; white-space: nowrap;
}
.btn-flip-white:hover { background-color: transparent !important; color: white !important; }

/* --- Links --- */
.custom-link-detail {
    color: black !important; font-weight: bold; text-transform: uppercase;
    text-decoration: none; font-size: 1.1rem; position: relative;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.custom-link-detail::after {
    content: ''; position: absolute; width: 100%; height: 2px;
    background: black; bottom: -2px; left: 0;
}
.custom-link-detail-white {
    color: white !important; font-weight: bold;
    text-decoration: underline; font-size: 16px; white-space: nowrap;
}

/* --- Banner wrappers --- */
.time__block  { border: 3px solid black; overflow: hidden; }
.time__block2 { border-radius: 15px; overflow: hidden; padding-bottom: 25px; }

/* --- Backgrounds --- */
.bg-desktop {
  background-size: cover;
  background-position: center;
   height: 100%;
}
/*.bg-desktop1 {*/
/*    background-image: url('/assets/img/bozjira.JPG');*/
/*    background-size: cover;*/
/*    background-position: center top;*/
/*    background-repeat: no-repeat;*/
/*    min-height: 420px;*/
/*}*/
.bg-desktop1 {
  background-image: url('/assets/img/bozjira.png');
  background-size: 100%;
  /*background-position: center;*/
  background-repeat: no-repeat;
  min-height: 100%;
}

/* ============================================================
   MOBILE  ≤ 768px  — matches screenshot layout exactly