/* @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --pahadi-green: #2F5D50;
    --pahadi-green-dark: #1e3d34;
    --pahadi-light: #F0F4F3;
    --off-white: #F7F6F3;
    --dark-slate: #1F2A2E;
    --muted-gray: #5F6F73;
    --border-light: rgba(122, 92, 62, 0.08);
    --culture-bg: #FDF9F3;
}

body {
    font-family: 'Figtree', sans-serif;
    background-color: var(--off-white);
    color: var(--muted-gray);
    line-height: 1.6;
}

a,
button,
[role="button"],
.cursor-pointer {
    cursor: pointer;
}

.hero-gradient { background: linear-gradient(135deg, #2F5D50 0%, #1F2A2E 100%); }

.card-standard {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 1rem;
}

.card-culture {
    background: var(--culture-bg);
    border: 1px solid rgba(122, 92, 62, 0.15);
    border-radius: 1.25rem;
}

.btn-primary-action {
    background-color: white;
    color: var(--pahadi-green);
    font-weight: 700;
    font-size: 0.75rem;
    transition: all 0.2s ease;
}

.btn-primary-action:hover {
    background-color: var(--pahadi-green);
    color: white;
}

.btn-primary-action.active {
    background-color: #2F5D50;
    color: white;
}

.nav-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted-gray);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.nav-tab.active {
    color: white;
    background: var(--pahadi-green);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    border-bottom: 2px solid;

}

.badge-region {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Custom scrollbar for horizontal tabs */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.btn-primary {
    background-color: #1F4D3A;
    color: #fff;
    transition: all .2s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #1e3d34;
    transform: translateY(-1px);
}

.hidden-state {
    display: none;
}

.card-qa {
    background: white;
    border: 1px solid rgba(122, 92, 62, 0.08);
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.card-qa:hover {
    border-color: rgba(47, 93, 80, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.unanswered-highlight {
    border-left: 4px solid #EAB308;
    /* background: linear-gradient(to right, #FEFCE8, white); */
}

.filter-pill {
    background: white;
    border: 1px solid rgba(122, 92, 62, 0.08);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1F2A2E;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill.active {
    background-color: #2F5D50;
    color: white;
    border-color: #2F5D50;
}

.context-line {
    font-style: italic;
    color: #5F6F73;
    font-size: 0.75rem;
    border-top: 1px solid rgba(122, 92, 62, 0.08);
    padding-top: 0.75rem;
}

.sidebar-block {
    background: white;
    border: 1px solid rgba(122, 92, 62, 0.08);
    border-radius: 1rem;
    padding: 1.5rem;
}

.category-badge {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cat-career {
    background: #EEF2FF;
    color: #4F46E5;
}

.cat-business {
    background: #FEF2F2;
    color: #DC2626;
}

.cat-education {
    background: #F0FDF4;
    color: #16A34A;
}

.ask-input:focus {
    outline: none;
    border-color: #2F5D50;
}

/* Modal & Step Flow Styles */
.modal-overlay {
    background: rgba(31, 42, 46, 0.8);
    backdrop-filter: blur(4px);
}

.step-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E2E8F0;
}

.step-indicator.active {
    background: #2F5D50;
    width: 24px;
    border-radius: 4px;
}

.category-card {
    border: 1px solid rgba(122, 92, 62, 0.08);
    transition: all 0.2s;
    cursor: pointer;
}

.category-card:hover {
    border-color: #2F5D50;
    background: #F0F4F3;
}

.category-card.selected {
    border-color: #2F5D50;
    background: #F0FDF4;
    box-shadow: 0 0 0 1px #2F5D50;
}


.hidden-step {
    display: none;
}

.card-job {
    background: white;
    border: 1px solid rgba(122, 92, 62, 0.08);
    border-radius: 1rem;
}

.badge-type {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.badge-referral {
    background: #EEF2FF;
    color: #4F46E5;
}

.badge-direct {
    background: #F0FDF4;
    color: #16A34A;
}

.content-section h2 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1F2A2E;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.side-panel {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-card {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.mini-card:hover {
    border-color: #2F5D50;
    background: white;
}

@media (min-width: 1024px) {
    .sticky-sidebar {
        position: sticky;
        top: 5.5rem;
    }
}

.breadcrumb-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.breadcrumb-scroll::-webkit-scrollbar {
    display: none;
}

/* // Custom styles for the jobs */

.card-job {
    background: white;
    border: 1px solid rgba(122, 92, 62, 0.08);
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-job:hover {
    border-color: rgba(47, 93, 80, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.badge-type {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.badge-referral {
    background: #EEF2FF;
    color: #4F46E5;
}

.badge-direct {
    background: #F0FDF4;
    color: #16A34A;
}

.badge-intern {
    background: #FFF7ED;
    color: #C2410C;
}

.filter-pill {
    background: white;
    border: 1px solid rgba(122, 92, 62, 0.08);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1F2A2E;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.context-strip {
    font-style: italic;
    color: #5F6F73;
    font-size: 0.75rem;
    border-top: 1px solid rgba(122, 92, 62, 0.08);
    padding-top: 0.75rem;
}

.sticky-filters {
    position: sticky;
    top: 5rem;
    z-index: 40;
    background: #F7F6F3;
    padding: 1rem 0;
}

/* Modal & Overlay Styles */
.modal-overlay {
    background-color: rgba(31, 42, 46, 0.4);
    backdrop-filter: blur(4px);
}

.selectable-card {
    border: 1px solid rgba(122, 92, 62, 0.08);
    transition: all 0.2s;
    cursor: pointer;
}

.selectable-card:hover {
    border-color: #2F5D50;
    background: #F0F4F3;
}

.selectable-card.selected {
    border-color: #2F5D50;
    background: #F0FDF4;
    box-shadow: 0 0 0 1px #2F5D50;
}


.step-indicator {
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    flex: 1;
}

.step-indicator.active {
    background: #2F5D50;
}

.pill-checkbox input:checked+span {
    background-color: #2F5D50;
    color: white;
    border-color: #2F5D50;
}

.step-content {
    transition: opacity 0.3s ease;
}

.step-content.hidden {
    opacity: 0;
}

.google-btn-wrapper {
    display: flex;
    justify-content: center;
}