#mobile-how-to-start {
    display: none;
    background: white;
    border:1px solid #e5e5e5;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Montserrat',sans-serif;
    margin-bottom: 21px;
}

body.is-dark #mobile-how-to-start {
    background: #323236;
    border-color: #404046;
}

#desktop-how-to-start {
    position:fixed;
    top:110px;
    left:0;
    background-color: white;
    border-top:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 8px 10px;
    width: 300px;
    z-index: 99;
    font-family: 'Montserrat',sans-serif;
}

body.is-dark #desktop-how-to-start {
    background-color: #323236;
    border-color: #404046;
}

@media all and (max-width: 1481px) {
    #desktop-how-to-start {
        display: none;
    }

    #mobile-how-to-start {
        display: block;
    }
}

#desktop-how-to-start .title {
    display:flex;align-items:center;flex-direction:column;text-align:center;font-weight: 600;font-size: 19px;margin-bottom: 18px;
}

#mobile-how-to-start .title {
    display:flex;align-items:center;flex-direction:column;text-align:center;font-weight: 400;font-size: 15px;margin-bottom: 14px;
}


.stepper-container {
    width:100%;display: flex;justify-content: space-between;
}

.stepper-title {
    font-size:120%;font-weight: 600;text-decoration: underline;
}

#mobile-how-to-start .stepper-title {
    font-size:100%;font-weight: 400;text-decoration: underline;
}

.stepper-description {
    margin-top:10px;
}

#mobile-how-to-start .stepper-description {
    font-weight: 300;font-size: 93%;
}

.stepper-buttons-container {
    display:flex;width:100%;justify-content: space-between;padding:14px 4px 8px 4px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stepper-item .step-name {
    color: rgb(120,120,120);
    font-size: 90%;
    text-align:center;
}

#mobile-how-to-start .step-name {
    font-weight: 300;
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 4px solid #e5e5e5;
    width: 100%;
    top: 6px;
    left: -50%;
    z-index: 2;
}

body.is-dark .stepper-item::before {
    border-bottom: 4px solid rgb(80,80,80);
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 4px solid #e5e5e5;
    width: 100%;
    top: 6px;
    left: 50%;
    z-index: 2;
}

body.is-dark .stepper-item::after {
    border-bottom: 4px solid rgb(80,80,80);
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e5e5e5;
    margin-bottom: 2px;
}

body.is-dark .stepper-item .step-counter {
    background: rgb(50,50,54);
    border: 2px solid rgb(80,80,80);
}

.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}


/** Active */
.stepper-item.active .step-counter {
    border: 2px solid #3498db;
    background-color: white;
}

body.is-dark .stepper-item.active .step-counter {
    border: 2px solid #3498db;
    background-color: rgb(50,50,54);
}

.stepper-item.active .step-name {
    color: #aaaab3;
    font-weight: 600;
}


/** Completed */
.stepper-item.completed .step-counter {
    border: 2px solid #3498db;
    background-color: #3498db;
}

body.is-dark .stepper-item.completed .step-counter {
    border: 2px solid #3498db;
    background-color: #3498db;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 4px solid #3498db;
    width: 100%;
    top: 6px;
    left: 50%;
    z-index: 3;
}

body.is-dark .stepper-item.completed::after {
    border-bottom: 4px solid #3498db;
}

.stepper-item.completed .step-name {
    color: #aaaab3;
}


/* ============================================================
   First-step chooser (redesigned How to Start panel).
   Tři volby: Follow a Tipster / Become a Tipster / Create a Filter.
   Světlý i tmavý design.
   ============================================================ */
.hts-panel .hts-question{
    text-align:center;
    font-size:13px;
    font-weight:600;
    color:#6f7689;
    margin:-4px 0 14px;
}
body.is-dark .hts-panel .hts-question{color:#9a9cb3;}
#mobile-how-to-start .hts-question{font-size:12.5px;font-weight:500;}

.hts-choices{display:flex;flex-direction:column;gap:9px;}

.hts-choice{
    --hts-c:#2f6bed; --hts-c-bg:#e9f0fe;
    display:flex;align-items:center;gap:11px;
    padding:11px 12px;
    border-radius:12px;
    border:1px solid #ecedf2;
    background:#fff;
    text-decoration:none;
    color:inherit;
    transition:transform .18s, border-color .18s, box-shadow .2s, background .2s;
}
.hts-choice:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--hts-c) 55%,transparent);
    box-shadow:0 12px 22px -14px color-mix(in srgb,var(--hts-c) 60%,transparent);
}
body.is-dark .hts-choice{background:#2b2b30;border-color:#404046;}

.hts-choice-icon{
    flex:0 0 auto;
    width:38px;height:38px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--hts-c-bg);color:var(--hts-c);
}
.hts-choice-icon svg{width:20px;height:20px;}

.hts-choice-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.hts-choice-title{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    font-size:13px;font-weight:700;color:#2b3142;line-height:1.2;
}
body.is-dark .hts-choice-title{color:#e6e6ea;}
.hts-choice-desc{font-size:11px;font-weight:500;color:#8a90a2;margin-top:2px;line-height:1.3;}
body.is-dark .hts-choice-desc{color:#9a9cb3;}

.hts-choice-badge{
    font-size:8.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    color:#fff;background:var(--hts-c);
    padding:2px 6px;border-radius:999px;line-height:1.4;
}

.hts-choice-arrow{flex:0 0 auto;color:#c2c6d2;display:flex;align-items:center;transition:transform .18s,color .18s;}
.hts-choice-arrow svg{width:16px;height:16px;}
.hts-choice:hover .hts-choice-arrow{color:var(--hts-c);transform:translateX(3px);}

.hts-theme-green{--hts-c:#1f9d57;--hts-c-bg:#e7f6ee;}
.hts-theme-purple{--hts-c:#6c4ee0;--hts-c-bg:#efeafc;}
.hts-theme-blue{--hts-c:#2f6bed;--hts-c-bg:#e9f0fe;}

body.is-dark .hts-theme-green{--hts-c:#34c977;--hts-c-bg:rgba(31,157,87,.2);}
body.is-dark .hts-theme-purple{--hts-c:#9a82f0;--hts-c-bg:rgba(108,78,224,.22);}
body.is-dark .hts-theme-blue{--hts-c:#5b8def;--hts-c-bg:rgba(47,107,237,.2);}