#radix-app {
    margin-bottom: 100px;
}

html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
}

* {
    box-sizing: border-box;
}

#radix-app {
    font: 16px Arial;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

#radix11 {
    text-align: center;
    width: 100%;
    justify-content: center;
    display: flex;
}

#radix21 {
    display: flex;
    background: white;
    color: rgb(140, 108, 155);
    text-align: center;
    width: 100%;
    justify-content: center;
    border-radius: 8px;
    padding: 10px;
}

#dynamicContent {
    width: 100%;
    float: left;
    border-radius: 8px;
    margin-bottom: 200px;
    display: block !important;
}

#dynamicContent .info-text-radix {
    width: 100%;
    border: 2px solid rgb(140, 108, 155);
    font-weight: 700;
    color: rgb(140, 108, 155);
    font-size: 20px;
    border-radius: 8px;
    padding: 5px;
    margin-top: 20px;
}

/* KONTAINER - hogy pozícionálni tudjuk a nyilat */
.select-wrapper {
    position: relative;
    width: 50%;
    float: left;
    display: block !important;
}

/* ALAP NYÍL (LEFELÉ) */
.select-wrapper::after {
    content: "▼";
    font-size: 12px;
    color: #555;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* NYITOTT ÁLLAPOT (FELFELÉ MUTATÓ NYÍL) */
.select-wrapper.open::after {
    content: "▲";
}

#dropdownSub {
    margin-left: 1%;
}


#myTabMain,
.tab-content.radix {
    display: none;
}

xinput {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

xinput[type=text] {
    background-color: #f1f1f1;
    width: 100%;
}

xinput[type=submit] {
    background-color: DodgerBlue;
    color: #fff;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.member-area {
    background-color: rgb(108, 124, 105);
    padding: 10px;
    border-radius: 8px;
    border: 0;
    color: white;
    width: 300px;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

#downloadsModal .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.tranzit-birth .fields-birth,
.tranzit-birth-time .fields-birth-time {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tranzit-birth-time .fields-birth-time label,
.tranzit-birth .fields-birth label,
.tranzit-birth .fields-birth .autocomplete {
    width: 100%;
}



.tranzit-birth .fields-birth .year-birth,
.tranzit-birth .fields-birth .month-birth,
.tranzit-birth .fields-birth .day-birth,
.tranzit-birth-time .fields-birth-time .hour-birth,
.tranzit-birth-time .fields-birth-time .minute-birth {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin-right: 10px;
}

.order-area {
    background-color: rgb(140, 108, 155);
    padding: 10px;
    border-radius: 8px;
    border: 0;
    color: white;
    width: 300px;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.order-area a {
    color: white;
    text-decoration: none;
}

.order-area i,
.member-area i {
    margin-right: 10px;
}

.bi-question-circle-fill {
    color: rgb(140, 108, 155);
}

.accordion-button:not(.collapsed) .bi-question-circle-fill {
    color: white;
}

.nav-tabs .nav-link {
    color: rgb(140, 108, 155);
}

.memberhip.container.row {
    background-color: rgb(140, 108, 155);
    border-radius: 8px;
    color: white;
    padding: 10px;
    margin: 0 auto;
    max-width: 90%;
}

.accordion {
    position: relative;
}

.memberhip.container.row.bottom {
    background-color: rgb(140, 108, 155);
    border-radius: 8px;
    color: white;
    margin: 0 auto;
    max-width: 90%;
    padding: 0px;
    left: 0;
    right: 0;
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    z-index: 950000;
}

.button.disabled {
    background-color: lightgrey !important;
}


.fixed-footer,
#infotext {
    display: flex;
    z-index: 950000;
    padding: 0;

}


#infotext .bottom-button2 {
    background-color: rgb(108, 124, 105);
    border-radius: 8px;
    color: white;
    text-align: center;
    padding: 10px;
    align-content: center;
    align-items: center;
}

#infotext .bottom-button3 {
    background-color: rgb(170, 118, 165);
    border-radius: 8px;
    color: white;
    text-align: center;
    padding: 10px;
    align-content: center;
    align-items: center;
}

#infotext .col-md-6 {
    padding: 5px;
}

#infotext a,
#infotext2 a,
#infotext2 * a,
#infotext2 a:link,
#infotext2 a:visited,
#infotext2 a:hover,
#infotext2 a:active,
.bottom a,
.bottom * a,
.bottom a:link,
.bottom a:visited,
.bottom a:hover,
.bottom a:active {
    color: white !important;
    text-decoration: none !important;
}


#infotext .bottom-button {
    background-color: rgb(140, 108, 155);
    border-radius: 8px;
    color: white;
    text-align: center;
    padding: 10px;
    align-content: center;
    align-items: center;
}

.fixed-footer .bottom-button {
    display: flex;
    width: 25%;
    align-items: center;
    cursor: pointer;
    padding: 5px;
}

.fixed-footer .bottom-button:hover {
    background-color: rgb(108, 124, 105);
    border-radius: 8px;
    padding: 5px;
}

.fixed-footer .bottom-button .text {
    font-size: clamp(14px, 1.5vw, 24px);
    padding-left: clamp(5px, 1vw, 10px);
}

.fixed-footer .bottom-button .text small {
    font-size: clamp(10px, 1vw, 14px);
}

.fixed-footer .bottom-button .fa-4x {
    font-size: clamp(28px, 3.5vw, 64px);
}

.help-floating-btn {
    position: fixed;
    bottom: 10px;
    right: 5px;
    width: 56px;
    height: 56px;
    z-index: 999999 !important;
    /* magasabb, mint az offcanvas */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(140, 108, 155);
    border: 0;
}

#settingsFloatingBtn,
#stepperFloatingBtn {
    position: fixed;
    right: 5px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
    cursor: pointer;
    border: 0;
}

#settingsFloatingBtn {
    bottom: 80px;
    background-color: rgb(108, 124, 105) !important;
}

#stepperFloatingBtn {
    bottom: 150px;
    background-color: #ff4500 !important;
}

.btn.btn-info {
    display: none;
}

.member-personal .accordion-header {
    width: 100%;
    padding: 10px;
    background-color: rgb(170, 118, 165);
    border-radius: 8px;
}

.member-personal .accordion-header .bi-question-circle-fill {
    color: white;
}

.member-personal .accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: white;
    box-shadow: none !important;
}

.member-personal .accordion-button {
    background-color: transparent !important;
    color: white;
    box-shadow: none !important;
    white-space: normal !important;
}

.member-personal .accordion-button:hover,
.member-personal .accordion-button:focus {
    background-color: transparent !important;
    color: white !important;
    box-shadow: none !important;
}

.nav.nav-tabs li.nav-item {
    margin-right: 2px;
}

.nav-tabs .nav-item .nav-link {
    background-color: white !important;
    color: black !important;
    border: 1px solid #dee2e6;
    width: 100%;
    display: flex;
}

.nav-tabs .nav-item .nav-link.active {
    background-color: rgb(140, 108, 155) !important;
    color: white !important;
}

.nav-tabs .nav-item .nav-link.active .bi-question-circle-fill {
    color: white;
}

.modal {
    z-index: 999990 !important;
}

.modal-backdrop {
    z-index: 999989 !important;
}

/* Centering result charts specifically */
.radix-image,
#dekadradixid svg,
#tranzitid svg,
#solarid svg,
#parkapcsolatid svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.radix-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative; /* Base for zoom slider overlay */
}

#dekadradixid,
#tranzitid,
#solarid,
#parkapcsolatid {
    width: 100%;
    overflow: visible;
}


.modal-content {
    color: black;
}

#data0,
#data,
#infotext,
.infotext-box {
    margin-top: 10px;
    background: white;
    color: black;
}

.member-main-menu .col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-main-menu .fa {
    margin-right: 10px;
}

.member-main-menu a {
    text-decoration: none !important;
}

.member-main-menu .button {
    color: white;
    text-decoration: none;
    padding: 10px;
    background-color: rgb(170, 118, 165);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.member-main-menu .button:hover {
    background-color: rgb(108, 124, 105);
}

#kepletlepteto,
#kepletleptetotrspecific,
#kepletleptetosolar {
    bottom: 90px;
    background-color: rgb(108, 124, 105);
    border-radius: 8px;
    color: white;
    margin: 0 auto;
    max-width: 90%;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    width: 100%;
    z-index: 950000;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 5px;
}



@media only screen and (max-width: 600px) {
    .member-main-menu .button .text {
        display: none;
    }

    .member-main-menu .fa {
        margin-right: 0;
    }

    .member-main-menu .col {
        padding: 2px;
    }

    .member-main-menu .button {
        padding: 5px;
        font-size: 16px;
    }

    .help-floating-btn {
        left: 20px;
        right: auto;
        bottom: 80px;
    }

    #settingsFloatingBtn {
        left: 20px;
        right: auto;
        bottom: 150px;
    }

    #stepperFloatingBtn {
        left: 20px;
        right: auto;
        bottom: 220px;
    }

    .fixed-footer .bottom-button {
        display: block;
    }

    .fixed-footer .bottom-button .text,
    .fixed-footer .bottom-button .text small {
        font-size: 8px;
        text-align: center;
        padding-left: 0px;
    }

    .nav.nav-tabs {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
    }

    .nav-tabs .nav-item .nav-link {
        height: 55px;
    }

    .fixed-footer .bottom-button .icon {
        width: 100%;
        text-align: center;
    }

    .fixed-footer .bottom-button .fa-4x {
        font-size: 2em;
    }

    #kepletlepteto,
    #kepletleptetotrspecific,
    #kepletleptetosolar {
        bottom: 80px;
    }

    #kepletlepteto #dateid,
    #kepletleptetotrspecific #dateid,
    #kepletleptetosolar #dateid {
        width: 100%;
        display: flex;
        text-align: center;
        justify-content: center;
    }


    #kepletlepteto .desk,
    #kepletleptetotrspecific .desk,
    #kepletleptetosolar .desk {
        display: none;
    }

    #kepletlepteto #i1 button,
    #kepletleptetotrspecific #i1 button,
    #kepletleptetosolar #i1 button {
        padding: 2px;
        font-size: 10px;
    }
}

.is-hidden {
    display: none !important;
}

/* Fix vertical alignment for dynamically loaded city inputs mapped to mt-1 */
#cities .form-control,
#city2,
#city3,
#city4 {
    margin-top: 0.25rem !important;
    /* matches Bootstrap .mt-1 */
}

#dynamicContent .info-text-radix,
.tab-content.radix .info-text-radix {
    width: 100%;
    border: 2px solid rgb(140, 108, 155);
    font-weight: 700;
    color: rgb(140, 108, 155);
    font-size: 20px;
    padding: 5px;
    margin-top: 20px;
}

figure.image {
    margin: 0;
}

#radix-app .image-style-align-left {
    float: left !important;
    margin-right: 25px !important;
    margin-bottom: 15px !important;
}

#radix-app .image-style-align-right {
    float: right !important;
    margin-left: 25px !important;
    margin-bottom: 15px !important;
}

#radix-app figure.image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.t1radixfenyszog,
.s1radixfenyszog {
    border-radius: 25px;
    background: #eeeeee;
    padding: 20px;
}

/* Force Bootstrap 5 styling on form controls inside the app in case the WP theme strips them */
#radix-app .form-control, 
#radix-app .form-select {
    display: block !important;
    width: 100%;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: .25rem !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    box-shadow: none !important;
}

#radix-app .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
}

#radix-app .form-control:focus, 
#radix-app .form-select:focus {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}

/* Fix the specific Nem tudom checkbox alignment if needed */
#radix-app .form-check-input {
    width: 1em !important;
    height: 1em !important;
    margin-top: .25em !important;
    vertical-align: top !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 1px solid rgba(0, 0, 0, .25) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: .25em !important;
}

#radix-app .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/* Strip unwanted WordPress theme backgrounds from plain layout tables */
#radix-app table:not(.table),
#radix-app table:not(.table) td,
#radix-app table:not(.table) th,
#radix-app table:not(.table) tr {
    background-color: transparent !important;
}

/* Strip unwanted WordPress theme borders from all Radix tables globally */
#radix-app table,
#radix-app table td,
#radix-app table th,
#radix-app table tr,
.modal table,
.modal table td,
.modal table th,
.modal table tr,
.offcanvas table,
.offcanvas table td,
.offcanvas table th,
.offcanvas table tr {
    border: none !important;
}

/* Force standard Bootstrap blue for primary buttons even on hover/active */
#radix-app .btn-primary:hover,
#radix-app .btn-primary:active,
#radix-app .btn-primary:focus,
.modal .btn-primary:hover,
.modal .btn-primary:active,
.modal .btn-primary:focus {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: white !important;
}

/* Force collapsed inner radix text accordions to stay white when normal, hovered, clicked, or active */
#radix-app #gr .accordion-button,
#radix-app #gr .accordion-button:hover,
#radix-app #gr .accordion-button:focus,
#radix-app #gr .accordion-button:active,
#radix-app #gr .accordion-button.collapsed:hover,
#radix-app #gr .accordion-button.collapsed:focus,
#radix-app #gr .accordion-button.collapsed:active {
    background-color: #fff !important;
    color: #212529 !important;
    box-shadow: none !important;
    outline: none !important;
    white-space: normal !important;
}

/* Force OPEN (not collapsed) inner radix text accordions to be olive-green to match the original design */
#radix-app #gr .accordion-button:not(.collapsed),
#radix-app #gr .accordion-button:not(.collapsed):hover,
#radix-app #gr .accordion-button:not(.collapsed):focus,
#radix-app #gr .accordion-button:not(.collapsed):active {
    background-color: rgb(108, 124, 105) !important;
    color: #fff !important; 
    box-shadow: none !important;
    outline: none !important;
    white-space: normal !important;
}
#radix-app #gr .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1) !important; /* Make the arrow icon white to match the text */
}