/*
 * Custom Fiverr Style Breadcrumb CSS - FINAL UI/UX
 * Version: 2.2
 * Author: Custom Gemini Plugin
 */

/* 1. Google Font 'Open Sans' को लोड करें */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* --- Main Breadcrumb Container --- */
#fiverr-style-breadcrumb.mobile-responsive-cb {
    display: block; 
    white-space: normal; 
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 15px 0; /* ऊपर और नीचे की पैडिंग */
    box-sizing: border-box; 
    background-color: #ffffff; 
    color: #404145; 
}

/* --- Breadcrumb Line (Home icon and trail) --- */
.cb-line-one {
    display: flex; 
    align-items: center; 
    font-size: 13px; /* Fiverr Breadcrumb Font Size */
    margin-bottom: 8px; 
    white-space: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 2px;
}

/* --- Common Text Styles for Breadcrumb Items --- */
.cb-item a, .cb-item {
    color: #62646a; /* हल्का ग्रे टेक्स्ट */
    text-decoration: none;
    font-weight: 400; 
    transition: color 0.2s ease-in-out; 
    padding: 2px 0; 
}

.cb-item a:hover {
    color: #1dbf73; /* Fiverr Green Hover */
}

/* --- Separator (e.g., /) --- */
.cb-separator {
    color: #dadbdd; 
    padding: 0 7px; 
    font-weight: 300; 
}

/* --- Home Icon (SVG) Styles --- */
.home-item a {
    line-height: 1; 
    transition: color 0.2s ease-in-out;
    display: flex; 
    align-items: center;
}

.cb-home-svg {
    width: 17px; 
    height: 17px; 
    color: #222325; 
    display: block;
    transition: color 0.2s ease-in-out;
}

.home-item a:hover .cb-home-svg {
    color: #1dbf73; 
}

/* --- Current Category / Search Term (अंतिम भाग) --- */
.current-category-item, .search-item strong {
    font-weight: 600; /* थोड़ा बोल्ड */
    color: #404145; 
}

/* --- Category Page Styles (Large Heading) --- */
.category-heading {
    /* "Podcast Production" जैसा साइज़ */
    font-size: 28px; 
    font-weight: 700; 
    color: #222325; 
    margin: 10px 0 25px 0; /* नीचे स्पेसिंग */
    line-height: 1.2; 
    padding: 0;
    letter-spacing: -0.5px;
}

/* --- Search Page Styles (Results for + Sub-Sentence) --- */

/* "Results for business" हेडिंग */
.cb-sub-sentence + .category-heading, /* Category Heading on Search Page (if used) */
#fiverr-style-breadcrumb.mobile-responsive-cb h1:not(.category-heading) {
    /* We assume the search heading will be handled by the theme, but if we need to style it: */
    /* If you are using h1 for search results: */
    font-size: 34px; 
    font-weight: 700;
    color: #222325;
    margin: 10px 0 10px 0; /* Sub-sentence के लिए ऊपर जगह दें */
}

/* "Choose a related category to narrow your search results" सब-सेंटेंस */
.cb-sub-sentence {
    font-size: 18px; /* Fiverr Sub-Sentence Font Size */
    color: #62646a; 
    font-weight: 400; 
    margin-top: 5px; 
    margin-bottom: 25px; 
    padding: 0; 
    line-height: 1.5; 
}

/* --- Mobile Responsiveness (परफेक्ट साइज़िंग) --- */

/* टैबलेट और छोटे लैपटॉप (769px से 992px) */
@media (max-width: 992px) {
    .category-heading {
        font-size: 30px; 
    }
}

/* मोबाइल डिवाइस के लिए (768px और नीचे) */
@media (max-width: 768px) { 
    #fiverr-style-breadcrumb.mobile-responsive-cb {
        padding: 10px 15px; 
    }

    .cb-line-one {
        font-size: 14px; /* मोबाइल पर ब्रेडक्रम्ब और छोटा */
    }
    
    .cb-home-svg {
        width: 15px; /* मोबाइल पर SVG साइज़ छोटा */
        height: 15px; 
    }

    .category-heading {
        font-size: 26px; /* मोबाइल पर हेडिंग परफेक्ट साइज़ */
        margin: 8px 0 18px 0;
    }
    
    .cb-sub-sentence {
        font-size: 16px; /* मोबाइल पर सब-सेंटेंस साइज़ */
        margin-bottom: 18px;
    }
}

/* बहुत छोटे मोबाइल डिवाइस के लिए (480px और नीचे) */
@media (max-width: 480px) {
    .category-heading {
        font-size: 20px;
    }
    .cb-sub-sentence {
        font-size: 16px;
    }
}