/* ============================================================
   Fullscreen Sections — Frontend Styles v1.5
   ============================================================ */

.fss-wrapper {
    position: relative;
    overflow: hidden;
}

.fss-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.fss-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.fss-section-link {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: block;
    cursor: pointer;
}

/* ── Title ───────────────────────────────────────────────── */
.fss-title {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    padding: 0 30px;
}
.fss-title span {
    display: block;
    color: #000;
    font-family: 'cairo', Times, serif;
    font-size: clamp(24px, 4.5vw, 48px);
    font-weight: 700;
    line-height: 1.15;
}
.fss-title-v-top    { top: 80px; }
.fss-title-v-center { top: 50%; transform: translateY(-50%); }
.fss-title-v-bottom { bottom: 110px; top: auto; }
.fss-title-h-left   { left: 56px; right: auto; text-align: left; }
.fss-title-h-center { left: 50%; transform: translateX(-50%); text-align: center; }
.fss-title-h-right  { right: 56px; left: auto; text-align: right; }
.fss-title-v-center.fss-title-h-center { top:50%; left:50%; transform:translate(-50%,-50%); }
.fss-title-v-top.fss-title-h-center    { top:80px; left:50%; transform:translateX(-50%); }
.fss-title-v-bottom.fss-title-h-center { bottom:110px; top:auto; left:50%; transform:translateX(-50%); }
.fss-title-v-center.fss-title-h-left   { top:50%; left:56px; transform:translateY(-50%); }
.fss-title-v-center.fss-title-h-right  { top:50%; right:56px; left:auto; transform:translateY(-50%); }
.fss-title-v-top.fss-title-h-left,
.fss-title-v-top.fss-title-h-right     { top:80px; transform:none; }
.fss-title-v-bottom.fss-title-h-left,
.fss-title-v-bottom.fss-title-h-right  { bottom:110px; top:auto; transform:none; }

/* ╔══════════════════════════════════════════════════════════╗
   ║   SIDE NAVIGATION — exact match to custom-dots style     ║
   ╚══════════════════════════════════════════════════════════╝ */

.fss-side-nav {
    position: fixed !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
}

.fss-side-nav-track {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    /* remove the vertical line pseudo-element */
    background: none !important;
}

/* Remove the continuous line we had before */
.fss-side-nav-track::before {
    display: none !important;
    content: none !important;
}

/* Each button — vertical bar shape */
.fss-side-dot {
    display: block !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    -webkit-tap-highlight-color: transparent;
    background: var(--fss-nav-color, #000) !important;
    /* inactive: thin and short */
    width: 1px !important;
    height: 20px !important;
    transition: width 0.25s ease, height 0.25s ease !important;
    overflow: hidden;
    text-indent: -9999px;
    /* reset any theme interference */
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Active: taller and slightly wider */
.fss-side-dot.active {
    width: 3px !important;
    height: 60px !important;
    background: var(--fss-nav-active, #000) !important;
}

/* Hide inner spans — not needed */
.fss-side-dot-inner,
.fss-side-dot-label {
    display: none !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  BOTTOM NAVIGATION                                       ║
   ╚══════════════════════════════════════════════════════════╝ */

.fss-bottom-nav {
    position: fixed !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 9 !important;
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    pointer-events: none;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0;
}

.fss-bottom-item {
    pointer-events: all;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    padding: 5px 16px !important;
    outline: none !important;
    color: #000 !important;
    font-family: 'cairo', Times, serif;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 1;
    transition: opacity 0.25s ease, font-weight 0.1s ease, font-size 0.25s ease;
    white-space: nowrap;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.fss-bottom-item.active {
    opacity: 1;
    font-weight: 700;
    color: var(--fss-nav-active, #000);
}

.fss-bottom-item:hover:not(.active) { opacity: 0.7; }

/* Nav visibility */
.fss-side-nav,
.fss-bottom-nav {
    transition: opacity 0.4s ease;
}
.fss-nav-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .fss-side-nav { left: 10px !important; }
    .fss-bottom-nav { bottom: 16px !important; flex-wrap: wrap; }
    .fss-bottom-item { font-size: 0.7rem; padding: 4px 10px; }
    .fss-bottom-item.active { font-size: 0.76rem; }
    .fss-title { padding: 0 24px; }
    .fss-title span { font-size: 24px; }
}
@media (max-width: 480px) {
    .fss-bottom-nav { bottom: 10px !important; }
    .fss-bottom-item { font-size: 14px !important; padding: 3px 8px; }
}