/* ============================================================
   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; }



    #firstEtap {
        display: block !important;
    }

    #secondEtap {
        display: none !important;
    }
    #therdEtap{
                    display: none !important;   
                    
                }
                
.form-reg {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
    font-size:24px;
}

.form-reg input {
    display: block;
    margin-top: 5px;
    padding: 10px 12px;
    width: 420px;
    height:40px;
    border: 1px solid #ccc;
    border-radius: 10px; /* закругленные края */
    outline: none;
    transition: 0.3s;
    font-size: 14px;
}

/* эффект при фокусе */
.form-reg input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* placeholder стиль */
.form-reg input::placeholder {
    color: #aaa;
}

.form-select {
    display: block;
    margin-top: 5px;
    padding: 10px 12px;
    width: 420px !important;
    height:40px;
    border: 1px solid #ccc;
    border-radius: 10px; /* закругление */
    outline: none;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    transition: 0.3s;

    /* убираем стандартный стиль стрелки */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* кастомная стрелка */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23999' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* эффект при фокусе */
.form-select:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* при наведении */
.form-select:hover {
    border-color: #888;
}





.race-wrapper {
    background: #F95900;
    padding: 40px 20px;
}

.race-title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.race-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.race-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.race-btn {
    background: #F95900;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
}


select {
    width: 100%;
    max-width: 350px;
    padding: 12px 15px;
    border-radius: 12px; /* скругление */
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 16px;
    outline: none;
    cursor: pointer;


    /* убираем стандартный стиль */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* кастомная стрелка */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: 0.2s;
}

select:hover {
    border-color: #F95900;
}

select:focus {
    border-color: #F95900;
    box-shadow: 0 0 0 2px rgba(249, 89, 0, 0.2);
}


.field-hint {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  margin-top: 5px;
  margin-bottom:10px;
  line-height: 1.4;
}

.tshirt-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tshirt-label-text {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
}
.tshirt-price {
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}


.notice-box {
  background: rgba(255,255,255,0.15);
  border-left: 3px solid #fff;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.notice-icon {
  width: 20px; height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}
.notice-box p { color: #fff; font-size: 13px; line-height: 1.5; }

.notice-box.danger { border-left-color: #fff3; background: rgba(255,255,255,0.1); }

.notice-container{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.notice-box{
    width:600px;
}

.btn-sub-note {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  margin-top: 8px;
}


/* адаптив */
@media (max-width: 768px) {
    .race-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {

    .container,
    .row,
    .col-md-6,
    .col-md-12 {
        width: 100%;
    }

    .form-reg {
        font-size: 18px;
    }

    .form-reg input,
    .form-select,
    select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 10.5px !important;
    }

    .field-wrap,
    .select-wrap {
        width: 100%;
    }

    /* Телефон */
    #telephone,
    #extr_contact {
        width: 100% !important;
    }

    /* Блок +7 и инпут */
    .col-md-12 > div[style*="display:flex"] {
        width: 100%;
    }

    .col-md-12 > div[style*="display:flex"] input {
        flex: 1;
        min-width: 0;
    }

    /* Футболка */
    .tshirt-row {
        flex-wrap: wrap;
        gap: 5px;
    }

    .tshirt-label-text {
        font-size: 18px;
    }

    .tshirt-price {
        font-size: 14px;
    }

    /* Кнопки */
    .btn,
    .white__button,
    button[type="submit"] {
        /*width: 100% !important;*/
        max-width: 100%;
    }

    .btn-sub-note {
        text-align: center;
        width: 100%;
    }

    /* Предупреждения */
    .notice-box {
        width: 100% !important;
    }

    .notice-container {
        width: 100%;
    }

    .notice-box p {
        font-size: 12px;
    }

    /* Отступы */
    br {
        display: none;
    }
    
}
@media (max-width: 968px) {
      .btn-back h4 {
        font-size: 12px;
        margin: 0;
    }
    .btn-back {
        padding: 6px 12px !important;
    }
    .pay-button {
        width: 100% !important;
        height: 40px !important;
        font-size: 12px !important;
        margin-top: 6px !important;
    }
}