/*
   GlassTime - Breadcrumb Dark Glass Theme
   - Dark glass strip under floating navbar
   - Horizontal layout for both LTR and RTL
*/

/* ====================================
   Page Top Container
   ==================================== */
.gt-page-top {
    position: relative;
}

/* Spacer for floating navbar + extra 20px */
.gt-page-top__spacer {
    height: 120px;
}

@media (max-width: 991px) {
    .gt-page-top__spacer { height: 105px; }
}

@media (max-width: 575px) {
    .gt-page-top__spacer { height: 95px; }
}

/* ====================================
   Breadcrumb Wrapper - Dark Glass Strip
   ==================================== */
.gt-breadcrumb-wrap {
    background: linear-gradient(
        135deg,
        rgba(15, 15, 20, 0.95) 0%,
        rgba(25, 25, 35, 0.92) 50%,
        rgba(15, 15, 20, 0.95) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 18px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
}

/* Glass effect overlay */
.gt-breadcrumb-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    pointer-events: none;
}

/* Glass Strip at bottom */
.gt-glass-strip {
    height: 3px;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0.15), 
        rgba(255, 255, 255, 0.05), 
        rgba(255, 255, 255, 0.15)
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ====================================
   Content After Breadcrumb
   ==================================== */
.gt-page-top + section,
.gt-page-top + .gt-page-content {
    padding-top: 40px;
}

@media (max-width: 991px) {
    .gt-page-top + section,
    .gt-page-top + .gt-page-content { padding-top: 30px; }
}

@media (max-width: 575px) {
    .gt-page-top + section,
    .gt-page-top + .gt-page-content { padding-top: 24px; }
}

/* ====================================
   BREADCRUMB - Simple Styles
   ==================================== */

/* IMPORTANT: RTL/LTR Handling
   - Use flex-start for both languages
   - The dir="rtl" attribute handles alignment automatically
   - In RTL: flex-start = right side
   - In LTR: flex-start = left side
*/

ol.breadcrumb.gt-breadcrumb,
.gt-breadcrumb.breadcrumb,
.breadcrumb.gt-breadcrumb {
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 14px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Remove Bootstrap ::before */
.gt-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: none !important;
    content: none !important;
}

/* Breadcrumb Items */
.gt-breadcrumb .breadcrumb-item {
    color: rgba(255, 255, 255, 0.75);
    padding: 0 !important;
}

/* Links */
.gt-breadcrumb .breadcrumb-item a {
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease;
}

.gt-breadcrumb .breadcrumb-item a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Active Item */
.gt-breadcrumb .breadcrumb-item.active {
    color: #fff !important;
    font-weight: 500;
}

/* ====================================
   Responsive
   ==================================== */
@media (max-width: 991px) {
    ol.breadcrumb.gt-breadcrumb {
        font-size: 13px;
    }
    .gt-breadcrumb-wrap {
        padding: 16px 0;
    }
}

@media (max-width: 575px) {
    ol.breadcrumb.gt-breadcrumb {
        font-size: 12px;
    }
    .gt-breadcrumb-wrap {
        padding: 14px 0;
    }
}

/* ====================================
   Animation
   ==================================== */
@keyframes breadcrumbFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gt-breadcrumb-wrap {
    animation: breadcrumbFadeIn 0.4s ease-out;
}


/* ====================================
   Server-side Breadcrumb Markup
   ==================================== */
.gt-breadcrumb-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Works for both LTR and RTL with dir attribute */
    gap: 10px;
    flex-wrap: wrap; /* prevent overflow on small screens */
}

.gt-breadcrumb-item {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
}

.gt-breadcrumb-link:hover {
    color: #fff;
    text-decoration: underline;
}

.gt-breadcrumb-current {
    color: #fff;
    font-weight: 500;
}

.gt-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    padding: 0 2px;
}

@media (max-width: 575px) {
    .gt-breadcrumb-item {
        font-size: 12px;
    }
}