@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    font-family: "Ubuntu", system-ui;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 24px;
}

body>nav,
#pictures_config>nav,
#terms_config>nav {
    height: 100vh;
    overflow-y: scroll;
    padding: 4px 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: #33505B;
    display: flex;
    flex-direction: column;
    width: 232px;
}

body>nav::-webkit-scrollbar {
    display: none;
}

body {
    display: flex;
}

button {
    display: flex;
    background-color: #3C5D6A;
    color: #FFFFFF;
    border: none;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px;
    font-size: 24px;
    width: 200px;
    margin: 4px;
    font-weight: bold;
    cursor: pointer;
}

body>nav .selected {
    background-color: #2DBCF8;
}

main {
    float: left;
    width: calc(100% - 232px);
    position: relative;
}

main>nav {
    width: 100%;
    display: flex;
    padding: 4px 12px;
    background-color: #2DBCF8;
    color: #FFFFFF;
    height: 68px;
}

main>nav button {
    width: 52px;
    background-color: #FFFFFF;
    color: #2C2B2E;
}

main>nav .selected {
    background-color: #F37C2D;
    color: #FFFFFF;
}

section {
    padding: 12px;
    height: calc(100vh - 136px);
}

select {
    width: 400px;
    height: 56px;
    padding: 12px;
    outline: none;
    border: none;
    background-color: #F5F5F5;
    border-radius: 12px;
    font-weight: bold;
    color: #2C2B2E;
}

section>select {
    margin-bottom: 8px;
}

main section nav {
    width: 100%;
    display: flex;
    padding: 4px 12px;
    background-color: #2DBCF8;
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 232px;
    width: calc(100% - 232px);
    background-color: #F37C2D;
    height: 68px;
}

main section nav>button {
    background-color: #FFFFFF;
    color: #2C2B2E;
    width: 52px;
}

main section nav>.selected {
    background-color: #2DBCF8;
    color: #FFFFFF;
    width: 52px;
}

section {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

section::-webkit-scrollbar {
    display: none;
}

form>input,
form>select,
#task_tab>select,
form>div>input,
#terms_config input {
    padding: 12px;
    outline: none;
    border: none;
    background-color: #F5F5F5;
    margin-top: 8px;
    border-radius: 12px;
}

textarea {
    width: 400px;
    border-radius: 12px;
    padding: 12px;
    outline: none;
    border: none;
    background-color: #F5F5F5;
    margin-top: 8px;
}

form div>div {
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

form div>div>label {
    font-weight: bold;
}

form div>div>label {
    font-weight: bold;
}

form div>div>input {
    width: 376px;
    border-radius: 12px;
    padding: 12px;
    outline: none;
    border: none;
    background-color: #F5F5F5;
}

section>select {
    margin-bottom: 0px;
}

form>button {
    width: 400px;
    background-color: #F37C2D;
    color: #FFFFFF;
}

form {
    display: flex;
    flex-direction: column;
}

form>button {
    margin: 0;
    margin-top: 8px;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

form>label {
    margin-top: 8px;
}

section>button {
    position: fixed;
    right: 12px;
    bottom: 80px;
    background-color: #2DBCF8;
    margin: 0;
}

section>button:last-child {
    bottom: 144px;
    background-color: #F37C2D;
}

section>button:first-child {
    top: 80px;
    bottom: auto;
    background-color: #F37C2D;
}

section>button:nth-child(2) {
    top: 144px;
    bottom: auto;
    background-color: #2DBCF8;
}

#login_page,
#pictures_page {
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#login_page input {
    width: 400px;
    margin: 8px;
    padding: 12px;
    outline: none;
    border: none;
    border-radius: 12px;
    background-color: #F5F5F5;
}

#login_page input[type="submit"] {
    background-color: #2DBCF8;
    color: #FFFFFF;
    font-weight: bold;
    cursor: pointer;
}

#pictures_page {
    display: none;
    background-color: #FFFFFF;
}

.div_photo {
    width: 400px;
    display: flex;
    justify-content: space-between;
}

input[type="file"] {
    height: fit-content;
    width: 400px;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    background-color: #2DBCF8;
    border: none;
    outline: none;
    color: #FFFFFF;
    border-radius: 8px;
}

form>button {
    float: left;
}

.photo_container {
    display: flex;
    width: 600px;
    align-items: bottom;
    justify-content: start;
    display: flex;
}

.photo_container input[type="button"] {
    height: auto;
    width: auto;
    margin: 0px;
    margin-top: 8px;
    margin-left: 8px;
    background-color: #F37C2D;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
}

#pictures_config {
    z-index: 1000;
}

#terms_config {
    z-index: 900;
}
#pictures_config,
#terms_config {
    padding: 0;
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;
    display: flex;
    display: none;
}

#pictures_config>div,
#terms_config>div {
    width: calc(100vw - 232px);
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

#pictures_config>div::-webkit-scrollbar {
    display: none;
}

#pictures_config img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    background-color: #FFFFFF;
    border-radius: 8px;
}

.picture_container {
    height: fit-content;
    width: 300px;
    padding: 12px;
    margin: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F5F5F5;
    border-radius: 16px;
}

.picture_container>div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.picture_container div input[type="button"] {
    width: calc(50% - 4px);
    border-radius: 8px;
    outline: none;
    margin-top: 8px;
    border: none;
    background-color: #F37C2D;
    color: #FFFFFF;
    font-size: 24px;
    padding: 12px;
    cursor: pointer;
}

.picture_container div input[type="button"]:nth-child(1) {
    background-color: #2DBCF8;
}

#pictures_config input[type="file"] {
    height: fit-content;
    width: 100%;
    cursor: pointer;
}

#pictures_config button:nth-child(3) {
    background-color: #2DBCF8;
}

#pictures_config button {
    width: 100%;
}

.picture_container p {
    margin-top: 8px;
    font-weight: bold;
}

.photo_container input:nth-child(1) {
    width: 400px;
    background-color: #2DBCF8;
    margin-left: 0px;
}

#terms_config>div {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#terms_config>div>div {
    width: 100%;
    display: flex;
    height: fit-content;
}

#terms_config div>input:nth-child(1) {
    width: calc(35% - 49px);
    margin-top: 0;
    margin-bottom: 8px;
    margin-right: 8px;
}

#terms_config div>input:nth-child(2) {
    width: calc(65% - 49px);
    margin-top: 0;
    margin-bottom: 8px;
    margin-right: 8px;
}

#terms_close_button {
    color: #FFFFFF;
    font-weight: bold;
    background-color: #F37C2D !important;
    cursor: pointer;
}

#terms_add_button {
    color: #FFFFFF;
    font-weight: bold;
    background-color: #2DBCF8 !important;
    cursor: pointer;
}

#terms_config>div>div>button {
    background-color: #F37C2D;
    width: 82px;
    margin: 0;
    margin-bottom: 8px;
}

.add_button {
    color: #FFFFFF;
    background-color: #33505B !important;
}

.picture_container input {
    font-weight: bold;
}

#loading_bar {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff88;
    display: none;
    align-items: center;
    justify-content: center;
}

#loading_bar div {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    font-weight: bold;
    font-size: 24px;
    -webkit-box-shadow: 0px 8px 48px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 8px 48px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 8px 48px 1px rgba(0, 0, 0, 0.25);
}

#order_bar {
    position: fixed;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
}

#order_con{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#order_con button{
    width: fit-content;
    background-color: #F37C2D;
    width: 52px;
}

#order_bar input{
    position: absolute;
    bottom: 24px;
    display: flex;
    background-color: #2DBCF8;
    color: #FFFFFF;
    border: none;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px;
    font-size: 24px;
    width: 200px;
    margin: 4px;
    font-weight: bold;
    cursor: pointer;
}

#order_save{
    left: 24px;
}

#order_cancel{
    right: 24px;
}

#preview div {
    display: none;
}

#preview{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: none;
    pointer-events: none;
}

#preview .pActive{
    display: flex;
    padding: 24px;
    border-radius: 24px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(-0%, -50%);
    flex-direction: column;
}

#preview div{
    background-color: #FFFFFF;
}

#preview #previewCloud{
    background-color: #2DBCF8;
    color: #FFFFFF;
}

#advices_pack_tab > form > div {
    display: flex;
}

#advices_pack_tab form p {
    border: 2px solid #888888;
    color: #888888;
    border-radius: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    cursor: pointer;
}



/* ========== SEKCJA MOBILNA  ========== */

@media (max-width: 768px) {
    
    body {
        flex-direction: column;
    }

    body > nav {
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }

    main {
        width: 100%;
        float: none;
        padding-bottom: 80px;
    }

    main > nav {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
    
main section nav {
    display: flex;
    flex-direction: row;
    position: fixed; 
    bottom: 0; 
    left: 0;
    right: 0; 
    z-index: 100;
    width: 100%;
    background-color: #F37C2D;
    height: auto;
    padding: 8px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

    main section nav > button {
        flex-grow: 1; 
        background-color: #2DBCF8;
        border: 2px solid black;
        border-radius: 8px;
        color: white;
        min-width: 45px;
        max-width: 45px; 
    }

    main section nav > .selected {
        background-color: #0d8cc0 !important; 
    }
     
    section {
        padding: 8px;
        height: auto;
        min-height: calc(100vh - 120px); 
    }


    form {
        gap: 16px; 
    }
    
    
    select,
    textarea,
    input[type="text"],
    .photo_container {
        width: 100% !important;
    }

    #advices_pack_tab form {
        padding: 8px;
    }
    

    .mobile-label {
        font-weight: bold;
        font-size: 20px;
        margin-top: 8px;
        margin-bottom: -8px; 
    }

    #advices_pack_tab textarea {
        min-height: 120px;
        border: 1px solid #ccc;
    }


    .mobile-group {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
    }
.mobile-col {
    display: flex;
    flex-direction: column;
    width: calc(50% - 8px);
    gap: 8px;
}
    .mobile-col .photo_container .pick_photo_button {
        width: 100%;
        background-color: #2DBCF8;
        padding: 16px 8px;
        margin: 0;
        white-space: normal;
    }
    .mobile-col .photo_container .remove_photo_button,
    .mobile-col .photo_container p {
        display: none; 
    }
    .mobile-col textarea {
        width: 100% !important;
        margin: 0;
        border: 1px solid #ccc;
    }

    /* ----- Grupa audio ----- */
    #advices_pack_tab #background_select {
        border: 1px solid #ccc;
    }


    
    .audio-player-wrapper {
        display: block;
        margin-top: 16px;
    }

    .audio-player-wrapper select {
        width: 100%;
        margin-bottom: 8px;
    }
    .audio-player-wrapper audio {
        width: 100%;
        height: 40px;
    }
    

    .mobile-options-group {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .mobile-options-group > div {
        margin: 0 !important;
        align-items: center;
    }
    
    .mobile-options-group select {
        width: 100% !important;
    }


    .mobile-checkbox-item {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 12px;
    }
    .mobile-checkbox-item input[type="checkbox"] {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
     .mobile-checkbox-item label {
        font-weight: normal;
        margin: 0;
    }
    

     #pictures_config > div,
    #terms_config > div {
        width: 100vw;
    }
    #preview {
        display: none !important;
    }

#advices_pack_tab, 
#questions_pack_tab, 
#video_tab, 
#task_tab {
    flex-direction: column !important;
}




    section > button {
        position: static !important; 
        display: block; 
        width: 100%;
        margin: 10px 0 0 0; 
        padding: 15px;
        font-size: 18px;
        border-radius: 8px;
    }


    #terms_button {
        display: none !important;
    }


    section > button[onclick="SaveJSON()"] {
        background-color: #2DBCF8;
        color: white;
    }

    section > button[onclick*="Remove"] { 
        background-color: #F37C2D; 
        color: white;
    }

    [id$="_tt"] {
        display: none !important;
    }
    

.mobile-audio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.audio-controls-top {
    display: flex;
    flex-direction: row;
    gap: 10px;
}


.audio-controls-top > #generate_audio_btn,
.audio-controls-top > #audio_option_select {
    flex: 1; 
    width: 50%;
    margin: 0;
    height: 56px;
    font-size: 16px;
    min-width: 0; 
}

.audio-controls-top > #generate_audio_btn {
    background-color: #388E3C;
}

.audio-player-wrapper audio {
    width: 100%;
}
}