.fi-topbar{
    background-color: #153c66;
    padding-inline: unset!important;
}

.fi-logo{
    height: 20vh!important;
}
.fi-topbar-start > a, .fi-topbar-ctn, .fi-topbar-start > a img{
    position: relative;
}
.fi-topbar-start > a::before{
    position: absolute;
    top:-70%;
    left:-30%;
    content: "";
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #f4d35e;
    z-index: 0;
    border-radius:50%;
}
.fi-topbar-start > a img{
    z-index: 1;
}

.fi-topbar-nav-groups span{
    color: #f4d35e;
    font-size: 1.2rem;
    font-style: italic;
}

.fi-topbar-nav-groups svg{
    display: none;
}

.fi-active a, .fi-topbar-item-btn:hover{
    background: transparent;
}

.fi-topbar-item-btn:hover span, .fi-active span{
    text-decoration: underline;
}

.fi-main{
    max-width: 100vw!important;
    width: 100vw!important;
    padding-inline: unset!important;
}

.fi-page-header-main-ctn{
    padding-block: 0!important;
}

.fi-page-content{
    row-gap: 0!important;
}

body{
    background-color: #faf0ca!important;
}

.fi-ta{
    max-width: 90%;
    margin:50px auto;
    width:100%;
}

.fi-input-wrp, .fi-input-wrp input{
    background-color: #f4d35e!important;
    border-radius: unset!important;
    border: unset!important;
}
.fi-input-wrp input{
    min-width:300px;
}

.fi-ac button{
    width: fit-content;
    margin:auto;
    padding: 10px 40px;
}

.fi-topbar-end{
    margin-inline-start: unset!important;
}

/* Single event sidebar: border-right on desktop, border-bottom on mobile */
.event-sidebar {
    border-right: 4px solid #f1583b;
}

/* ─── Mobile styles (max-width: 767px) ────────────────────────────────────── */
@media (max-width: 767px) {

    /* Navbar logo smaller on mobile */
    .fi-logo {
        height: 10vh !important;
    }

    /* Yellow circle behind logo – scale down */
    .fi-topbar-start > a::before {
        top: -30%;
        left: -10%;
        width: 60%;
    }

    /* Hide the filter illustration image */
    #filter-image {
        display: none !important;
    }

    /* Form inputs: allow them to shrink */
    .fi-input-wrp input {
        min-width: unset !important;
    }

    /* Tables: full width */
    .fi-ta {
        max-width: 100% !important;
        margin: 20px auto !important;
    }

    /* Schema/form grids: full width */
    .fi-sc.fi-sc-has-gap.fi-grid {
        max-width: 100% !important;
    }

    /* Filter flex row → column */
    .fi-sc-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Hero section titles (events/calendar) */
    #hero h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    /* Login / Register hero section title */
    section.bg-pe-blue-bg h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    /* Registration form: hide the split-layout image, stretch text */
    .fi-sc-image {
        display: none !important;
    }
    .fi-sc-text {
        width: 100% !important;
    }

    /* Calendar: allow horizontal scroll, fix day cell height */
    .ec-main {
        overflow-x: auto;
    }
    .ec-day {
        aspect-ratio: unset !important;
        min-height: 44px;
    }
}

/* ─── Single event sidebar: border direction at lg breakpoint ─────────────── */
@media (max-width: 1023px) {
    .event-sidebar {
        border-right: none !important;
        border-bottom: 4px solid #f1583b;
    }
}