@charset "UTF-8";
/* Volunteer Search Results Styles */
/* Uses Bootstrap 5 utility classes as much as possible */
/* St. Jude Sans Web Font */
@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'St Jude Sans'; src: url("/ama/fonts/StJudeSansWeb-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* Font Family - St Jude Sans with Open Sans fallback */
/* Apply font to body for this page */
body { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; }

/* =========================================== DESIGN TOKENS =========================================== */
/* =========================================== LAYOUT SYSTEM =========================================== */
.page__inner { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; width: 100%; }

@media (min-width: 992px) { .page__inner { padding-left: 1.5rem; padding-right: 1.5rem; } }

.page__inner .page__inner { padding-left: 0; padding-right: 0; max-width: none; }

.bleed { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }

.bleed--border-top { border-top: 1px solid #ccc; }

.bleed--border-bottom { border-bottom: 1px solid #ccc; }

.bleed--border-subtle-top { border-top: 1px solid #dee2e6; }

.bleed--border-subtle-bottom { border-bottom: 1px solid #dee2e6; }

.bleed--bg-white { background-color: #fff; }

.bleed--bg-surface { background-color: #f2f2f2; }

.bleed--bg-dark { background-color: #1a1a1a; }

/* =========================================== END LAYOUT SYSTEM =========================================== */
/* =========================================== HEADER & FOOTER - Shell Pattern =========================================== */
.site-header { background-color: #fff; }

.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 56px; padding: 0 0.5rem; }

.header-inner .header-logo { height: 56px; width: auto; }

.header-auth-links { gap: 0; }

.header-auth-link { color: #135cb0; font-size: 16px; font-weight: 500; text-decoration: underline; padding: 12px 16px; min-height: 48px; display: flex; align-items: center; justify-content: center; }

.header-auth-link:hover { color: #0e4482; }

.header-mobile-menu-btn { background: none; border: none; padding: 8px 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }

.header-mobile-menu-btn i { font-size: 32px; color: #1a1a1a; }

.header-mobile-menu-label { font-size: 10px; font-weight: 500; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.5px; }

.header-mobile-menu { background: #fff; padding: 8px 4px; display: flex; flex-direction: column; gap: 4px; }

.header-mobile-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; border-radius: 4px; color: #1a1a1a; font-size: 16px; font-weight: 500; text-decoration: none; }

.header-mobile-menu-item:hover { background: #f2f2f2; color: #1a1a1a; }

.header-mobile-menu-item i { font-size: 18px; color: #1a1a1a; }

#alsac-header .header-tools { display: flex; align-items: center; }

#alsac-header .user-tools { display: flex; align-items: center; position: relative; }

#alsac-header .user-tools .org-name { display: none; }

#alsac-header .user-tools .current-hierarchy { color: #135cb0; font-style: italic; font-size: 0.857em; text-align: right; font-weight: 500; text-decoration: underline; padding: 12px 16px; display: flex; align-items: center; gap: 0.25rem; }

#alsac-header .user-tools .current-hierarchy:hover { color: #0e4482; text-decoration: underline; }

#alsac-header .user-tools .current-hierarchy .caret { border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; margin-left: 0.5rem; }

#alsac-header .user-tools .current-hierarchy.dropdown-toggle::after { display: none; }

#alsac-header .user-tools .user-dropdown { position: absolute; top: 100%; right: 0; min-width: 280px; padding: 1rem; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid #dee2e6; z-index: 1000; }

#alsac-header .user-tools .profile-section { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

#alsac-header .user-tools .profile-img { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }

#alsac-header .user-tools .profile-img img { width: 100%; height: 100%; object-fit: cover; }

#alsac-header .user-tools .profile-img .no-photo { width: 100%; height: 100%; background: #C8102E; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 20px; letter-spacing: 0.05em; }

#alsac-header .user-tools .profile-info { display: flex; flex-direction: column; justify-content: center; }

#alsac-header .user-tools .profile-info h4 { margin: 0 0 0.25rem; font-size: 18px; font-weight: 400; color: #1a1a1a; }

#alsac-header .user-tools .profile-info p { margin: 0; font-size: 14px; }

#alsac-header .user-tools .profile-info a { color: #C8102E; text-decoration: none; }

#alsac-header .user-tools .profile-info a:hover { text-decoration: underline; }

#alsac-header .user-tools .profile-info .divider { color: #999; padding: 0 0.35rem; }

#alsac-header .user-tools .site-change { margin-bottom: 0.75rem; }

#alsac-header .user-tools .site-change select { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }

#alsac-header .user-tools .member-link-wrap { display: flex; justify-content: flex-end; gap: 1.25rem; }

#alsac-header .user-tools .member-links { color: #C8102E; font-size: 24px; }

#alsac-header .user-tools .member-links:hover { color: #990c23; }

#alsac-header .user-tools .feedback { display: none; }

#alsac-header .bookmark-tools { display: none; }

/* =========================================== END HEADER & FOOTER =========================================== */
/* Text Grey Utility */
.text-grey { color: #666 !important; }

/* Min-width utility for flex children */
.min-w-0 { min-width: 0; }

/* =========================================== SECTION COMPONENTS (Location, Contact, etc.) Consolidates repeated utility class patterns =========================================== */
.section-heading-mobile { display: block; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; width: 100vw; margin-left: calc(-50vw + 50%); padding: 1rem; }

@media (min-width: 992px) { .section-heading-mobile { display: none; } }

.section-heading-mobile h5 { font-weight: 600; margin-bottom: 0; }

.section-heading-desktop { display: none; font-weight: 600; padding: 1rem 1.5rem 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid #dee2e6; }

@media (min-width: 992px) { .section-heading-desktop { display: block; } }

.section-content { width: 100vw; margin-left: calc(-50vw + 50%); padding: 1rem; }

@media (min-width: 992px) { .section-content { width: auto; margin-left: 0; padding: 1rem 1.5rem; } }

@media (max-width: 991.98px) { .details-layout { padding-left: 0; padding-right: 0; } .details-layout > .row { margin-left: 0; margin-right: 0; } .details-layout > .row > [class*="col"] { padding-left: 0; padding-right: 0; } }

.map-container { height: 200px; overflow: hidden; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; margin-bottom: 1.5rem; }

@media (max-width: 991.98px) { .map-container { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; } }

@media (min-width: 992px) { .map-container { border: none; border-radius: 0.75rem; margin-left: 1.5rem; margin-right: 1.5rem; } }

/* Mobile Search & Filter Header - full viewport width on mobile */
.search-filter-mobile-header { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-left: calc(50vw - 50% + $gutter) !important; padding-right: calc(50vw - 50% + $gutter) !important; font-weight: 600; }

.search-filter-mobile-btn i { font-size: 1rem; color: #1a1a1a; }

/* Category Badge - Figma: neutral grey pill, no icon */
.event-category-badge { display: inline-block; max-width: 100%; background-color: #e6e6e6; color: #1a1a1a; border-radius: 0.5rem; /* 8px */ padding: 0.25rem 0.5rem; /* 4px 8px */ font-size: 0.875rem; /* 14px */ font-weight: 500; line-height: 1.3125rem; /* 21px */ /* Truncate a super-long category with an ellipsis instead of wrapping to a second line */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Background Check Required Badge - Figma design (legacy) */
.badge-bgc { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #e7eff7 !important; color: #135cb0 !important; border: none !important; border-radius: 0.5rem; padding: 0.125rem 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.3125rem; }

.badge-bgc i { color: #135cb0; font-size: 1.25rem; }

/* Dynamic Credential Badges - Base style */
.badge-credential { display: inline-flex; align-items: center; gap: 0.5rem; /* 8px per Figma */ border: none !important; border-radius: 0.5rem; /* 8px per Figma */ padding: 0.125rem 0.5rem !important; /* 2px 8px per Figma - !important to override Bootstrap .badge */ font-size: 0.875rem; font-weight: 500; line-height: 1.3125rem; /* Background Check style - blue */ /* Liquor License - amber/orange */ /* Age - purple */ /* Certification - green (fallback) */ }

.badge-credential i { font-size: 1rem; /* 16px per Figma */ }

.badge-credential.badge-bgc, .badge-credential.badge-background-check { background-color: #e7eff7 !important; color: #135cb0 !important; }

.badge-credential.badge-bgc i, .badge-credential.badge-background-check i { color: #135cb0; }

.badge-credential.badge-liquor, .badge-credential.badge-liquor-license { background-color: #fff3e0 !important; color: #e65100 !important; }

.badge-credential.badge-liquor i, .badge-credential.badge-liquor-license i { color: #e65100; }

.badge-credential.badge-age { background-color: #f3e5f5 !important; color: #7b1fa2 !important; }

.badge-credential.badge-age i { color: #7b1fa2; }

.badge-credential.badge-certification { background-color: #e8f5e9 !important; color: #2e7d32 !important; }

.badge-credential.badge-certification i { color: #2e7d32; }

/* Credential Alert Styles (for header sections) - match badge colors */
.alert-credential { border: none; font-weight: 500; /* Background Check - blue */ /* Liquor License - amber/orange */ /* Age - purple */ /* Certification - green (fallback) */ }

.alert-credential.alert-bgc, .alert-credential.alert-background-check { background-color: #e7eff7; color: #135cb0; }

.alert-credential.alert-bgc i, .alert-credential.alert-background-check i { color: #135cb0; }

.alert-credential.alert-liquor, .alert-credential.alert-liquor-license { background-color: #fff3e0; color: #e65100; }

.alert-credential.alert-liquor i, .alert-credential.alert-liquor-license i { color: #e65100; }

.alert-credential.alert-age { background-color: #f3e5f5; color: #7b1fa2; }

.alert-credential.alert-age i { color: #7b1fa2; }

.alert-credential.alert-certification { background-color: #e8f5e9; color: #2e7d32; }

.alert-credential.alert-certification i { color: #2e7d32; }

/* Other Requirements Section - for non-primary credentials */
.other-requirements-section .other-requirements-label { font-weight: 500; color: #666; }

/* Other Requirement Pill - individual requirement badges */
/* Matches Background Check alert styling (blue bg, same border-radius) */
.other-requirement-pill { font-weight: 500; color: #135cb0 !important; background-color: #e7eff7 !important; border: none !important; border-radius: 0.5rem !important; /* Same as badge-credential */ white-space: nowrap; }

.other-requirement-pill i { font-size: 1rem; color: #135cb0; }

/* Desktop credential badges container - stack vertically, align right */
.shift-credential-badges-desktop { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }

.shift-credential-badges-desktop .badge-credential { margin: 0 !important; }

/* Available Shifts Badge - icon + text, no background pill (Figma) */
.badge-shifts { display: inline-flex; align-items: center; gap: 0.5rem; color: #1a1a1a; font-weight: 500; font-size: 0.875rem; line-height: 1.3125rem; }

.badge-shifts i { font-size: 1.25rem; }

/* Available Position Badge - Grey */
.badge-availability { background-color: #e6e6e6; color: #1a1a1a; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 0.5rem; font-size: 0.875rem; }

/* Accent Link - Blue */
.link-accent { color: #135cb0 !important; }

.link-accent:hover { color: #0e4482 !important; }

/* Outline Primary Button - ensure link styling doesn't override */
a.btn-outline-primary { color: #C8102E; text-decoration: none; }

a.btn-outline-primary:hover, a.btn-outline-primary:focus { color: #990c23; text-decoration: none; }

/* Header Section - full width background via .bleed wrapper */
.volunteer-header { background: linear-gradient(246.54deg, #E11E48 -0.41%, #86003D 99.59%); padding-top: 3rem; padding-bottom: 3rem; }

@media (max-width: 991.98px) { .volunteer-header { padding-top: 1rem; padding-bottom: 1rem; } }

@media (min-width: 992px) { .volunteer-header .page__inner { padding-left: 5rem; padding-right: 5rem; } }

.volunteer-header h1 { font-size: 2.5rem; }

@media (max-width: 991.98px) { .volunteer-header h1 { font-size: 2rem; } }

.volunteer-header .lead { font-size: 1.125rem; }

@media (max-width: 991.98px) { .volunteer-header .lead { font-size: 1rem; } }

.volunteer-header .volunteer-header-content { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }

@media (max-width: 991.98px) { .volunteer-header .volunteer-header-content { flex-direction: column; align-items: flex-start; } }

.volunteer-header .volunteer-header-text { flex: 1; min-width: 0; }

@media (max-width: 991.98px) { .volunteer-header .volunteer-header-text { width: 100%; } }

.volunteer-header .volunteer-header-text #eventName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.volunteer-header .volunteer-header-actions { flex-shrink: 0; }

/* Breadcrumbs - Uses BS5 breadcrumb with custom separator */
.breadcrumb-section .page__inner, .breadcrumb-row .page__inner { padding-left: 0.5rem; padding-right: 0.5rem; }

@media (min-width: 992px) { .breadcrumb-section .page__inner, .breadcrumb-row .page__inner { padding-left: 5rem; padding-right: 5rem; } }

.breadcrumb-section .breadcrumb, .breadcrumb-row .breadcrumb { font-size: 0.875rem; }

.breadcrumb-section .breadcrumb .breadcrumb-item a, .breadcrumb-row .breadcrumb .breadcrumb-item a { color: #0056B3; text-decoration: underline; }

.breadcrumb-section .breadcrumb .breadcrumb-item a:hover, .breadcrumb-row .breadcrumb .breadcrumb-item a:hover { color: #003d80; }

.breadcrumb-section .breadcrumb .breadcrumb-item.active, .breadcrumb-row .breadcrumb .breadcrumb-item.active { font-style: italic; font-weight: 600; }

@media (max-width: 991.98px) { .breadcrumb-section .breadcrumb .breadcrumb-item, .breadcrumb-row .breadcrumb .breadcrumb-item { display: none; } .breadcrumb-section .breadcrumb .breadcrumb-item:nth-last-child(2), .breadcrumb-row .breadcrumb .breadcrumb-item:nth-last-child(2) { display: inline; } .breadcrumb-section .breadcrumb .breadcrumb-item.active, .breadcrumb-row .breadcrumb .breadcrumb-item.active { display: inline; } }

.breadcrumb-section .breadcrumb .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-row .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: ">"; }

@media (max-width: 991.98px) { .breadcrumb-section .breadcrumb .breadcrumb-item:nth-last-child(2)::before, .breadcrumb-row .breadcrumb .breadcrumb-item:nth-last-child(2)::before { display: none; } }

/* Filter Tags - Base Style */
.filter-tag { font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 0.25rem; display: inline-flex; align-items: center; gap: 0.5rem; background-color: #e6e6e6; border: 1px solid #ccc; color: #1a1a1a; }

.filter-tag .filter-label { font-weight: 600; }

.filter-tag .filter-tag-close { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin-left: 0.25rem; cursor: pointer; opacity: 0.8; color: inherit; }

.filter-tag .filter-tag-close i { font-size: 0.875rem; font-weight: 700; }

.filter-tag .filter-tag-close:hover { opacity: 1; }

/* Filter Tag with truncation (for longer values like Interests) */
.filter-tag-truncate { max-width: 320px; }

.filter-tag-truncate .filter-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keyword Search - Figma design */
.keyword-search { display: flex; align-items: center; gap: 0.25rem; background: #fff; border: 1px solid #666; border-radius: 0.25rem; padding: 0.5rem; }

.keyword-search i { color: #666; font-size: 1.25rem; flex-shrink: 0; }

.keyword-search input { flex: 1; border: none; background: none; font-size: 1rem; line-height: 1.5; outline: none; }

.keyword-search input::placeholder { color: #999; }

.keyword-search:focus-within { border-color: #C8102E; box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25); }

/* Search Filter Panel - Mostly uses BS5 form classes */
.search-filter-panel { /* Match border color with keyword search */ }

.search-filter-panel.sticky-top { top: 20px; }

.search-filter-panel h5 { font-size: 1.25rem; }

.search-filter-panel h6 { font-size: 1rem; margin-top: 1.5rem; }

.search-filter-panel .form-label { font-size: 0.875rem; }

.search-filter-panel .form-control, .search-filter-panel .form-select { border-color: #666; }

.search-filter-panel .form-control:focus, .search-filter-panel .form-select:focus { border-color: #C8102E; box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25); }

.search-filter-panel .form-check-label { font-size: 0.9375rem; }

.search-filter-panel .form-check-input:checked { background-color: #C8102E; border-color: #C8102E; }

.search-filter-panel .form-switch .form-check-input:checked { background-color: #C8102E; border-color: #C8102E; }

/* Position Cards - Uses BS5 card (no hover lift per Figma) */
.position-card { /* Event line truncates to a single line with an ellipsis (per Figma) */ }

.position-card .card-title { font-size: 1.5rem; /* 24px - match the role/shift card titles */ line-height: 1.875rem; /* 30px */ }

.position-card .position-card-event { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.position-card .card-info { font-size: 0.875rem; }

.position-card .card-info li { margin-bottom: 0.375rem; }

.position-card .card-info li i { width: 1.25rem; font-size: 1.25rem; /* match the role/shift card info icons */ }

.position-card .badge-container .badge { font-size: 0.875rem; /* 14px credential text */ font-weight: 500; padding: 0.375rem 0.625rem; }

.position-card .badge-container .badge i { font-size: 0.875rem; /* 14px - match the credential text */ }

.position-card .btn-outline-primary { color: #C8102E; border-color: #C8102E; }

.position-card .btn-outline-primary:hover { background-color: #C8102E; border-color: #C8102E; color: #fff; }

/* Position cards: hidden state + "See more positions" toggle (Figma 4369-28289) */
.position-card-hidden { display: none; }

.position-see-more { display: inline-flex; align-items: center; gap: 4px; color: #135cb0; font-size: 0.875rem; /* 14px */ font-weight: 500; line-height: 1.3125rem; /* 21px */ text-decoration: none; cursor: pointer; }

.position-see-more:hover { color: #0e4482; text-decoration: underline; }

.position-see-more i { font-size: 0.75rem; /* 12px chevron per Figma */ }

/* Results loading spinner - shown while positions + roles load, so they reveal together */
.results-loading .spinner-border { color: #C8102E; width: 3rem; height: 3rem; }

/* Shift Cards - Figma design match */
.shift-card { transition: box-shadow 0.2s ease; border-color: #ccc !important; /* Allow flex-child columns to shrink so that text-overflow: ellipsis on descendants (e.g. .shift-detail-event-name) actually engages instead of letting long content force a column wider than its declared width. Bootstrap col-* defaults to min-width: auto. */ /* Title: 24px bold */ /* Subtitle: 14px medium */ /* Info text: 14px with 20px icons per Figma */ /* Button: 48px min height, 8px radius per Figma */ /* Mobile (<992px): keep the credential badge inline-flex (so its position and alignment at the top of the card body don't change), but cap its width at the parent so a long label like "Background check required" can't hang outside the card on very small viewports, and ellipsize the inner text label when it has to shrink. The desktop credential badge wrapper is .d-none.d-lg-block so it isn't rendered at this breakpoint and isn't affected by this rule. */ /* Right column with badge/button - fixed width for consistency */ }

.shift-card .col, .shift-card [class*="col-"] { min-width: 0; }

.shift-card .shift-card-title { font-size: 1.5rem; line-height: 1.875rem; color: #1a1a1a; }

.shift-card .shift-card-subtitle { font-size: 0.875rem; line-height: 1.3125rem; color: #666; }

.shift-card .shift-card-info { font-size: 0.875rem; line-height: 1.3125rem; color: #1a1a1a; }

.shift-card .shift-card-info i { font-size: 1.25rem; }

.shift-card .btn-shift-card { min-height: 3rem; width: 100%; border-radius: 0.5rem; font-size: 1rem; padding: 0.75rem 1rem; }

@media (max-width: 991.98px) { .shift-card .badge-credential { max-width: 100%; min-width: 0; } .shift-card .badge-credential > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

.shift-card .shift-card-actions { /* Medium-desktop range (lg through xl, 992-1399px): narrow the right column so the title/event/location side gets more breathing room and the button doesn't look oversized / cause the column to wrap below. xxl+ (>=1400) is wide enough for the original 240px to look balanced again. */ }

@media (min-width: 992px) { .shift-card .shift-card-actions { width: 240px; flex-shrink: 0; } }

@media (min-width: 992px) and (max-width: 1399.98px) { .shift-card .shift-card-actions { width: 180px; } }

.shift-card .shift-card-actions .badge-credential { text-align: left; max-width: 100%; /* In the same medium-desktop range, force the credential badge to a block-level flex with an ellipsizing text label so a long value like "Background check required" fits cleanly inside the narrower column. At xxl+ the badge keeps its original inline-flex sizing so the full label displays without truncation. */ }

@media (min-width: 992px) and (max-width: 1399.98px) { .shift-card .shift-card-actions .badge-credential { display: flex; min-width: 0; } .shift-card .shift-card-actions .badge-credential > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } }

.shift-card .btn-outline-primary { color: #C8102E; border-color: #C8102E; }

.shift-card .btn-outline-primary:hover { background-color: #C8102E; border-color: #C8102E; color: #fff; }

.shift-card a { color: #0056B3; }

.shift-card a:hover { color: #003d80; }

/* See More Link */
.text-decoration-none { color: #C8102E; }

.text-decoration-none:hover { color: #990c23; text-decoration: underline !important; }

.text-decoration-none i { font-size: 0.75rem; }

/* Mobile Specific */
@media (max-width: 991.98px) { .positions-section h4, .shifts-section h4 { font-size: 1.25rem; } .shift-card .card-title { font-size: 1rem; } /* Shift Card mobile - larger date text per Figma mobile design */ .shift-card { /* Date info uses Headline/Regular style on mobile */ } .shift-card .shift-card-info-date { font-size: 1.25rem; /* 20px */ font-weight: 600; line-height: 1.875rem; /* 30px */ } /* Mobile Filter Panel */ #mobileFilters .card { border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } }

/* Active filters - Figma: flex-wrap, gap-8px, p-16px */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; /* Space between active filters and filter panel */ /* Remove margin when empty (no visible filter tags) */ }

.active-filters .filter-tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.active-filters:empty { margin-bottom: 0; }

/* Filter Panel - spacing from active filters per Figma */
#filterPanel { margin-top: 8px; /* Additional spacing from Search and Filter header */ }

/* Mobile: Active filters section */
@media (max-width: 991.98px) { /* Remove top padding gap between header and main content */ .volunteer-header + main { padding-top: 0 !important; } }

/* Form Controls - brand focus color */
.form-control:focus, .form-select:focus { border-color: #C8102E; box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25); }

/* ========================================== ROLE DETAILS PAGE STYLES ========================================== */
/* Alert Info Custom */
.alert-info-custom { background-color: #e7eff7; border: none; color: #135cb0; border-radius: 0.5rem; padding: 1rem; }

.alert-info-custom i { color: #135cb0; }

/* Location Section - Bordered Card */
.location-section { background-color: #fff; }

.location-section .map-container { overflow: hidden; }

.location-section .map-container img { width: 100%; height: 100%; object-fit: cover; }

.location-section address { font-style: normal; }

.location-section a { color: #0056B3; }

.location-section a:hover { color: #003d80; }

/* Contact Section - Bordered Card */
.contact-section { background-color: #fff; }

.contact-section a { color: #0056B3; }

.contact-section a:hover { color: #003d80; }

/* About the Role Section */
.about-role-section .role-detail h6, .about-role-card .role-detail h6 { margin-bottom: 0.75rem; font-size: 1.125rem; }

.about-role-section .role-detail p, .about-role-section .role-detail ul, .about-role-card .role-detail p, .about-role-card .role-detail ul { font-size: 1rem; }

.about-role-section .role-detail ul, .about-role-card .role-detail ul { padding-left: 1.25rem; }

.about-role-section .role-detail ul li, .about-role-card .role-detail ul li { margin-bottom: 0.5rem; }

/* About the Role Card - Bordered container */
.about-role-card { background-color: #fff; }

.about-role-card h4 { font-size: 1.5rem; }

/* Shift Selector Panel (for date context) */
.shift-selector-panel { /* Shift Date Card */ /* Calendar Date Box - matches Figma design */ /* Shift Times List */ }

.shift-selector-panel .shift-date-card a:not(.btn) { color: #135cb0; }

.shift-selector-panel .shift-date-card a:not(.btn):hover { color: #0e4482; }

.shift-selector-panel .date-calendar-box { width: 80px; flex-shrink: 0; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; background-color: #f2f2f2; }

.shift-selector-panel .date-calendar-box .month-header { background-color: #1a1a1a; color: #fff; font-weight: 700; font-size: 1rem; padding: 4px 0; }

.shift-selector-panel .date-calendar-box .day-number { font-size: 1.75rem; font-weight: 700; line-height: 1.2; padding: 4px 0; color: #1a1a1a; }

.shift-selector-panel .date-calendar-box .day-name { font-size: 0.75rem; color: #666; border-top: 1px dashed #666; padding: 5px 0; }

.shift-selector-panel .shift-times-list { overflow: hidden; min-width: 0; /* Make all buttons same width */ }

.shift-selector-panel .shift-times-list hr { border-color: #999; }

.shift-selector-panel .shift-times-list .btn { min-width: 130px; }

.shift-selector-panel .shift-times-list .btn-primary { background-color: #C8102E; border-color: #C8102E; }

.shift-selector-panel .shift-times-list .btn-primary:hover { background-color: #990c23; border-color: #990c23; color: white; }

.shift-selector-panel .shift-times-list .btn-outline-primary { color: #C8102E; border-color: #C8102E; }

.shift-selector-panel .shift-times-list .btn-outline-primary:hover { background-color: #C8102E; color: #fff; }

/* Shift Detail Cards - Role Details Page */
.shift-detail-card { /* "Shifts" label - different styles on mobile vs desktop */ /* Map pin icon */ /* Location text - override .small */ }

.shift-detail-card .shift-detail-shifts-label { font-size: 14px; /* Mobile: 14px */ font-weight: 500; /* Mobile: medium */ line-height: 21px; color: #666; }

@media (min-width: 992px) { .shift-detail-card .shift-detail-shifts-label { font-size: 16px; /* Desktop: 16px */ font-weight: 700; /* Desktop: bold */ line-height: 24px; } }

.shift-detail-card .date-box { min-width: 82px; /* Figma: 82px */ /* Calendar icon + day name row */ /* Date (e.g., "Apr 11") */ }

.shift-detail-card .date-box > .d-flex.align-items-center i.ph-calendar-dots { font-size: 1rem; /* 16px - proportional to 20px day number */ }

.shift-detail-card .date-box > .d-flex.align-items-center span { font-size: 20px !important; /* Figma: 20px */ line-height: 20px; color: #666; }

.shift-detail-card .date-box > .fs-5 { font-size: 24px !important; /* Figma: 24px */ line-height: 30px; color: #1a1a1a; }

.shift-detail-card i.ph-map-pin { font-size: 20px !important; /* Figma: 20px */ vertical-align: middle; }

.shift-detail-card p.small:last-of-type { font-size: 14px !important; /* Figma: 14px */ color: #666; }

.shift-detail-card .shift-time-text { font-size: 0.875rem; /* 14px - Figma correct */ line-height: 21px; margin-bottom: 4px; /* Figma: 4px gap to spots row */ }

.shift-detail-card .shift-time-slot { /* Spots/availability row */ /* Sign up / Join waitlist links */ /* Divider between shifts */ }

.shift-detail-card .shift-time-slot .d-flex.align-items-center.justify-content-between { gap: 4px; /* Figma: 4px gap between elements */ }

.shift-detail-card .shift-time-slot .text-muted { font-size: 1rem; /* 16px - Figma correct */ line-height: 24px; color: #666; }

.shift-detail-card .shift-time-slot a.text-danger { font-size: 1rem; /* 16px */ font-weight: 500; /* medium */ line-height: 24px; color: #e11e48; /* Figma brand color */ text-decoration: underline; }

.shift-detail-card .shift-time-slot a.text-danger:hover { color: #b4183a; }

.shift-detail-card .shift-time-slot hr { margin: 8px 0; /* Figma: 8px vertical padding */ border-color: #999; }

.shift-detail-card .shift-slot .btn-link { color: #C8102E; text-decoration: none; font-weight: 500; padding: 0; }

.shift-detail-card .shift-slot .btn-link:hover { text-decoration: underline; }

.shift-detail-card a { color: #0056B3; text-decoration: none; }

.shift-detail-card a:hover { color: #003d80; }

/* Shift Time Row - Role Details Page */
.shift-time-row { width: 100%; min-width: 0; /* Allow shrinking in flex containers */ overflow: hidden; }

/* Event Name Link - Truncate with ellipsis whenever the card column is narrow. Always-on (no media query): it's a no-op when the text already fits, but kicks in on mobile AND on the lg/xl "in-between" range (~992-1399px) where the filter sidebar is still visible and the role card columns are tight. */
.shift-detail-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shift Description - Expandable Grey Section */
.shift-description-box { background-color: #f2f2f2; overflow: hidden; width: 100%; /* Constrain to parent width */ min-width: 0; /* Allow shrinking in flex containers */ /* When expanded */ /* TODO: Add dynamic show/hide logic later */ }

.shift-description-box .shift-description-content { padding: 4px; overflow: hidden; min-width: 0; /* Allow shrinking in flex containers */ }

.shift-description-box .shift-description-text { font-size: 0.875rem; /* 14px */ font-weight: 500; color: #666; /* text/secondary */ line-height: 21px; margin: 0; /* Truncate to one line by default */ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; box-sizing: border-box; /* Force nested HTML elements (div, p, etc.) to be inline for ellipsis to work */ }

.shift-description-box .shift-description-text * { display: inline; white-space: inherit; }

.shift-description-box .shift-description-toggle { display: flex; /* Always show for now */ width: 100%; background: none; border: none; padding: 4px 16px; font-size: 0.875rem; /* 14px */ font-weight: 500; color: #1a1a1a; /* text/primary */ cursor: pointer; justify-content: flex-end; align-items: center; gap: 4px; }

.shift-description-box .shift-description-toggle:hover { color: #333; }

.shift-description-box .shift-description-toggle i { font-size: 1.5rem; /* 24px - Figma */ transition: transform 0.2s ease; }

.shift-description-box .shift-description-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.shift-description-box.expanded .shift-description-text { white-space: normal; overflow: visible; }

.shift-description-box.expanded .shift-description-text * { display: block; white-space: normal; }

/* Event Detail Cards - Event Details Page */
.event-detail-card .date-inline { min-width: 80px; }

.event-detail-card hr { border-color: #999; }

.event-detail-card .btn-outline-primary { color: #C8102E; border-color: #C8102E; }

.event-detail-card .btn-outline-primary:hover { background-color: #C8102E; color: #fff; }

.event-detail-card a { color: #0056B3; }

.event-detail-card a:hover { color: #003d80; }

/* Event Role Cards - Event Details Page (Figma Design) */
.event-role-card { border-color: #ccc !important; /* Allow flex children to shrink for ellipsis to work */ /* Date Box - Left side */ /* Day Name - Figma: 20px, Regular, #666 */ /* Date Display - Figma: 24px Bold, line-height 30px */ /* Role Title - 24px bold per Figma title-3 */ /* Shifts List Divider */ /* View Role Details Button - Figma specs: 48px height, 8px radius */ }

.event-role-card .col { min-width: 0; }

.event-role-card .event-role-date-box { min-width: 82px; }

.event-role-card .event-role-day-name { font-size: 1.25rem; /* 20px */ line-height: 1.25rem; /* 20px */ font-weight: 400; /* Regular */ /* Calendar icon - sized to match day name text visually */ }

.event-role-card .event-role-day-name .ph-calendar-dots { font-size: 1rem; /* 16px - proportional to 20px text */ }

.event-role-card .event-role-date-box > .fs-4 { line-height: 1.875rem; /* 30px */ }

.event-role-card .event-role-title { font-size: 1.25rem; /* 20px */ line-height: 1.5rem; /* 24px */ color: #1a1a1a; }

.event-role-card .event-role-shifts-list { border-bottom: 1px solid #999; }

.event-role-card .event-role-shifts-list:last-child { border-bottom: none; }

.event-role-card .event-role-btn { min-height: 48px; border-radius: 8px; font-size: 1rem; padding: 12px 16px; color: #C8102E; border-color: #C8102E; }

.event-role-card .event-role-btn:hover { background-color: #C8102E; border-color: #C8102E; color: #fff; }

/* Event Role Card - Individual Shift Rows */
.event-role-card { /* Shifts Header - Desktop: 16px bold */ /* Shift row styling - Desktop: 8px padding */ /* Divider between shifts */ /* Shifts list container - remove bottom border from last-child */ }

.event-role-card .event-shifts-header { font-size: 1rem; /* 16px */ font-weight: 700; /* bold */ line-height: 1.5rem; /* 24px */ }

.event-role-card .event-shift-row { padding: 8px 0; }

.event-role-card .event-shift-divider { border-color: #999; opacity: 0.5; }

.event-role-card .event-role-shifts-list { border-bottom: none; }

/* Event Role Card Mobile Styles */
@media (max-width: 991.98px) { .event-role-card { /* Role title slightly smaller on mobile */ /* Date box - keep same sizing, just remove min-width */ /* Shifts Header - Mobile: 14px medium (caption-1 per Figma) */ /* Shift row - Mobile: 16px vertical padding per Figma */ /* Shift description - attach directly to shift row on mobile */ /* Credential badge - ellipsize text so it stays within the card on small viewports */ } .event-role-card .event-role-title { font-size: 1.25rem; /* 20px on mobile */ line-height: 1.5rem; } .event-role-card .event-role-date-box { min-width: auto; } .event-role-card .event-shifts-header { font-size: 0.875rem; /* 14px */ font-weight: 500; /* medium */ line-height: 1.3125rem; /* 21px */ } .event-role-card .event-shift-row { padding: 16px 0; } .event-role-card .shift-description-box { margin-top: 0 !important; } .event-role-card .badge-credential { display: flex; max-width: 100%; min-width: 0; } .event-role-card .badge-credential > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } }

/* Share Button */
#shareBtn { display: flex; min-height: 32px; padding: 8px; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; background-color: #fff; color: #1a1a1a; border: none; }

#shareBtn:hover { background-color: #e6e6e6; color: #1a1a1a; }

/* No Results Alert - Only custom colors Bootstrap doesn't provide */
.alert-no-results { background-color: #fffcf4; }

.alert-no-results .alert-icon-wrapper { width: 40px; height: 40px; background-color: #fff9ea; }

.alert-no-results .alert-icon-wrapper i { color: #b54708; }

/* ========================================== ROLE DETAILS PAGE - MOBILE STYLES Note: Container/row/column padding removal is handled by .details-layout ========================================== */
@media (max-width: 991.98px) { /* Role header event name truncation */ .role-header-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* Responsive border/rounded utilities for desktop */
@media (min-width: 992px) { .border-lg { border: 1px solid #dee2e6 !important; } .rounded-lg { border-radius: 0.375rem !important; } .location-section .map-container { border-radius: 0.375rem; } }

/* Border-top on mobile only - for section headings */
.border-top-mobile { border-top: 1px solid #dee2e6; }

@media (min-width: 992px) { .border-top-mobile { border-top: none; } }

/* Full-width elements on mobile for role details */
/* Note: .map-container bleed is now handled by the generic .map-container class */
@media (max-width: 991.98px) { /* Sections with border-top-mobile - pull full width for border */ .role-details-content .border-top-mobile { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); } }

/* ========================================== MOBILE FILTER MODAL - Figma Design ========================================== */
/* Modal slides up from bottom on mobile */
.filter-modal-content { border-radius: 12px 12px 0 0; display: flex; flex-direction: column; height: 100%; }

/* Modal Header - X left, title centered per Figma */
.filter-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background-color: #fff; border-bottom: 1px solid #ccc !important; /* Figma: border/primary #ccc */ }

.filter-modal-header .modal-title { flex: 1; text-align: center; font-size: 1.5rem; /* 24px per Figma */ line-height: 1.875rem; /* 30px */ }

.filter-modal-header .btn-close { margin: 0; padding: 0; }

/* Modal Body - Scrollable */
.filter-modal-body { flex: 1; overflow-y: auto; padding: 16px; background-color: #fff; /* Match border color with keyword search - #666 per Figma */ /* Remove bottom margins from last items to avoid extra space */ }

.filter-modal-body .form-control, .filter-modal-body .form-select { border-color: #666; }

.filter-modal-body .form-control:focus, .filter-modal-body .form-select:focus { border-color: #C8102E; box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25); }

.filter-modal-body > div:last-child { margin-bottom: 0 !important; }

/* Modal Active Filters - Same styling as main page active filters */
.modal-active-filters { display: flex; flex-wrap: wrap; gap: 8px; /* Hide when empty */ }

.modal-active-filters .filter-tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.modal-active-filters:empty { display: none; }

/* Modal Footer - Fixed at bottom */
.filter-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px; background-color: #fff; border-top: 1px solid #999 !important; }

.filter-modal-footer .filter-reset-btn { color: #C8102E; font-size: 1rem; padding: 8px 16px; }

.filter-modal-footer .filter-reset-btn:hover { color: #990c23; }

.filter-modal-footer .filter-apply-btn { background-color: #d11947; border-color: #d11947; border-radius: 4px; padding: 8px 16px; min-width: 100px; font-weight: 500; box-shadow: 0px 2px 0px 0px #bc1640, 0px 2px 2px 0px rgba(0, 0, 0, 0.14); }

.filter-modal-footer .filter-apply-btn:hover { background-color: #ba163f; border-color: #ba163f; }

/* ========================================== VOLUNTEER REGISTRATION PAGE - Figma Design ========================================== */
/* Remove site-main top padding when these pages are present, keep bottom */
.site-main:has(:is(.volunteer-registration-page, .volunteer-search-results-container, .role-details-content, .event-details-content)) { padding-top: 0; }

.volunteer-registration-page { min-height: 100vh; display: flex; flex-direction: column; }

/* Header with Logo - now uses .site-header class with .bleed wrapper pattern */
/* See HEADER & FOOTER section above */
/* Inner content wrapper - max 1096px (matches form columns: 540 + 540 + 16 gap) */
.volunteer-reg-inner { max-width: 1096px; }

/* Success Banner - Figma: #f2f9f4 bg, 24px padding, 8px radius */
.success-banner { display: flex; align-items: center; gap: 16px; background-color: #f2f9f4; border: 1px solid #d9d9d9; border-radius: 8px; padding: 24px; max-width: 1096px; }

.success-banner .success-icon-wrapper { display: flex; align-items: center; justify-content: center; background-color: #e5f3e8; border-radius: 9999px; padding: 8px; flex-shrink: 0; }

.success-banner .ph-check { color: #008A1C; }

.success-banner .success-banner-text { flex: 1; font-size: 14px; line-height: 21px; color: #414651; }

.success-banner .success-banner-text .success-title { font-weight: 700; color: #414651; }

.success-banner .success-banner-text .success-subtitle { font-weight: 500; color: #535862; }

.success-banner .success-close { color: #535862; font-size: 20px; cursor: pointer; flex-shrink: 0; }

/* Page Title */
.volunteer-reg-title { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 500; font-size: 24.8px; line-height: 32.64px; color: #333; }

/* Page Description */
.volunteer-reg-description { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 14px; line-height: 21px; color: #333; }

/* Form Section - remove BS margins when using gap */
.form-section .form-group, .form-section .row { margin-bottom: 0 !important; }

/* Form Section Heading */
.form-section-heading { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 500; font-size: 15.4px; line-height: 19.2px; text-transform: uppercase; color: #333; padding-bottom: 4px; margin-bottom: 0; /* Gap handles spacing */ border-bottom: 1px solid #333; }

/* Phone number helper text - Figma: 13.7px, #6c757d */
.phone-helper-text { font-size: 13.7px; line-height: 21px; color: #6c757d; }

/* Form Label */
.form-label-custom { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 12px; line-height: 18px; text-transform: uppercase; color: #444; margin-bottom: 0.25rem; margin-top: 1rem; display: block; }

/* Required Asterisk */
.required-asterisk { color: #dc3545; font-size: 18px; line-height: 18px; margin-left: 2px; }

/* Form Input/Select - Custom styling to match Figma */
.form-control-custom, .form-select-custom { background-color: #f5f5f5; border: 1px solid #f5f5f5; border-radius: 4px; height: 32px; padding: 4px 16px; font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 13.8px; line-height: 17px; color: #495057; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.08); }

.form-control-custom::placeholder, .form-select-custom::placeholder { color: #495057; }

.form-control-custom:focus, .form-select-custom:focus { background-color: #fff; border-color: #C8102E; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.08), 0 0 0 0.2rem rgba(200, 16, 46, 0.25); }

/* Info Box - Red left border */
.info-box { background-color: #f5f5f5; border: 1px solid #d0d0d0; border-left: 4px solid #c8102e; border-radius: 4px; padding: 8px 8px 8px 16px; }

.info-box p { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 26px; color: #364153; }

.info-box strong { font-weight: 700; }

/* Terms Checkbox */
.form-check-input { width: 16px; height: 16px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; background-color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); }

.form-check-input:checked { background-color: #C8102E; border-color: #C8102E; }

.form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.25); }

.form-check-label { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #364153; }

/* Terms Link */
.terms-link { color: #0056B3; text-decoration: underline; font-weight: 500; }

.terms-link:hover { color: #003d80; }

/* Register Button */
.btn-register { background-color: #a22; border: 1px solid #a22; border-radius: 4px; padding: 7px 13px; font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 13.3px; line-height: 21px; color: #fff; box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.15), 0px 1px 1px rgba(0, 0, 0, 0.08); }

.btn-register:hover { background-color: #801a1a; border-color: #801a1a; color: #fff; }

.btn-register:focus { box-shadow: 0 0 0 0.2rem rgba(170, 34, 34, 0.25); }

/* Submit section border - Figma: #ddd */
.volunteer-reg-inner .border-top { border-color: #ddd !important; }

/* APT/STE column - fixed width */
.apt-col { width: 128px; }

/* Mobile Responsive Adjustments */
@media (max-width: 991.98px) { .volunteer-reg-title { font-size: 20px; line-height: 28px; } .form-section-heading { font-size: 14px; } /* Success banner - vertical layout on mobile */ .success-banner { gap: 1rem; align-items: flex-start; } }

/* ========================================== REGISTRATION STATUS BANNER (Generic) Used for: success, already registered, waitlist, errors ========================================== */
.registration-status-banner { display: flex; align-items: center; gap: 16px; background-color: #f2f9f4; border: 1px solid #d9d9d9; border-radius: 8px; padding: 24px; /* Success variant (default) */ /* Info variant (already registered, waitlist) */ /* Warning variant */ }

.registration-status-banner--success { background-color: #f2f9f4; }

.registration-status-banner--info { background-color: #e7eff7; }

.registration-status-banner--warning { background-color: #fffcf4; }

.status-icon-wrapper { display: flex; align-items: center; justify-content: center; background-color: #e5f3e8; border-radius: 9999px; padding: 8px; flex-shrink: 0; /* Success variant (default) */ /* Info variant */ /* Warning variant */ }

.status-icon-wrapper i { font-size: 1.5rem; color: #008A1C; }

.status-icon-wrapper--success { background-color: #e5f3e8; }

.status-icon-wrapper--success i { color: #008A1C; }

.status-icon-wrapper--info { background-color: #d4e2f1; }

.status-icon-wrapper--info i { color: #135cb0; }

.status-icon-wrapper--warning { background-color: #fff9ea; }

.status-icon-wrapper--warning i { color: #b54708; }

.status-banner-content { flex: 1; min-width: 0; }

.status-title { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 14px; line-height: 21px; color: #414651; }

.status-subtitle { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; color: #535862; }

.status-close-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; }

.status-close-btn i { font-size: 20px; color: #535862; }

.status-close-btn:hover i { color: #414651; }

/* Mobile responsive */
@media (max-width: 991.98px) { .registration-status-banner { padding: 16px; gap: 12px; } }

/* ========================================== BACKGROUND CHECK REQUIRED PAGE STYLES ========================================== */
.bgc-page-title { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-size: 30px; line-height: 32.64px; color: #1a1a1a; padding: 32px 40px; }

.bgc-icon-circle { width: 108px; height: 108px; border-radius: 50%; background-color: #e7eff7; display: flex; align-items: center; justify-content: center; }

.bgc-icon-circle i { font-size: 3rem; color: #135cb0; }

.bgc-title { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 28px; line-height: 35px; letter-spacing: 0.5px; color: #135cb0; }

.bgc-subtitle { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 14px; line-height: 21px; color: #1a1a1a; }

.bgc-description { font-family: "St Jude Sans", "Open Sans", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 32px; color: #1a1a1a; max-width: 100%; }

.bgc-description p { margin-bottom: 24px; }

.bgc-description p:last-child { margin-bottom: 0; }

.bgc-link { color: #1a1a1a; text-decoration: underline; }

.bgc-link:hover { color: #135cb0; }

/* Brand button styles for BGC page */
.btn-outline-brand { border: 1px solid #e11e48; color: #e11e48; background: transparent; border-radius: 8px; font-weight: 500; min-height: 56px; }

.btn-outline-brand:hover { background: #fef2f4; border-color: #e11e48; color: #e11e48; }

.btn-brand { background: #d11947; color: white; border: none; border-radius: 8px; font-weight: 500; min-height: 56px; }

.btn-brand:hover { background: #b8163e; color: white; }

.btn-brand:disabled { opacity: 0.7; cursor: not-allowed; }

/* ========================================== SIGNED UP BADGE - Green checkmark badge ========================================== */
.badge-signed-up { display: inline-flex; align-items: flex-start; gap: 6px; background-color: transparent; color: #008A1C; border: none; border-radius: 0.5rem; padding: 0.25rem 0; font-size: 0.875rem; font-weight: 500; line-height: 1.3125rem; margin-left: auto; flex-shrink: 0; max-width: 145px; text-align: left; align-self: flex-start; }

.badge-signed-up i { font-size: 1rem; color: #008A1C; }

/* Waitlisted Badge - Purple */
.badge-waitlisted { display: inline-flex; align-items: center; gap: 6px; background-color: transparent; color: #7b1fa2; border: none; border-radius: 0.5rem; padding: 0.25rem 0; font-size: 0.875rem; font-weight: 500; line-height: 1.3125rem; }

.badge-waitlisted i { font-size: 1rem; color: #7b1fa2; }

/* Remove Me Link - styled same as Sign Up link (red/danger) */
.remove-me-link { font-size: 1rem; font-weight: 500; line-height: 24px; color: #e11e48; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }

.remove-me-link:hover { color: #b4183a; }

/* ========================================== BGC IN REVIEW PAGE STYLES ========================================== */
#bgc-in-review-container { min-height: 57vh; }

.bgc-in-review-content { padding: 0 40px; }

.bgc-in-review-alert { color: #45704D; }

/* ========================================== POSITION SIGN-UP (position details page) ========================================== */
/* Shared text/button styling for both the grey bar and the white card */
.position-signup-title { margin: 0; font-size: 20px; line-height: 30px; font-weight: 600; color: #1a1a1a; word-break: break-word; }

.position-signup-location { margin: 0; font-size: 16px; line-height: 24px; color: #666; }

.position-signup-openings { font-size: 16px; line-height: 24px; font-weight: 500; color: #1a1a1a; white-space: nowrap; }

.position-signup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 16px; border-radius: 8px; background-color: #d11947; color: #fff; font-size: 16px; line-height: 24px; text-decoration: none; white-space: nowrap; }

.position-signup-btn:hover, .position-signup-btn:focus { background-color: #b3143c; color: #fff; }

/* Applied state: "Pending" pill (disabled look) + "Remove application" link under it */
.position-signup-pending { background-color: #e6e6e6; color: #666; cursor: default; pointer-events: none; }

.position-signup-pending:hover, .position-signup-pending:focus { background-color: #e6e6e6; color: #666; }

/* Pending state: the button stays exactly where the "Sign up" button was; "Remove Me" is taken out of flow and pinned just beneath it (centered under the button), so it never pushes the button. Visual styling comes from .remove-me-link (matching the shift "Remove Me" link). */
.position-pending-group { position: relative; display: inline-flex; flex-direction: column; }

.position-pending-group .position-remove-btn { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; white-space: nowrap; text-align: center; }

/* Desktop card: the button fills the remaining row width, so the group fills with it */
@media (min-width: 992px) { .position-signup-card .position-pending-group { display: flex; flex: 1 1 auto; align-items: stretch; } }

/* Because the Remove link is out of flow, reserve room beneath the action when it's present so the link never sits on top of the card border / next section */
.position-signup-card .position-signup-card-action:has(.position-remove-btn), .position-signup-bar .position-signup-action:has(.position-remove-btn) { padding-bottom: 32px; }

/* Grey horizontal bar - Figma 8441-21201 (below "About the Role") */
.position-signup-bar { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; background-color: #f2f2f2; border-radius: 8px; padding: 24px; /* In-between / mobile: widen the bar beyond the narrow column to roughly match the full-width "About the Role" content, but keep a 16px margin around it (and its rounded corners) so it never touches the screen edges */ }

.position-signup-bar .position-signup-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.position-signup-bar .position-signup-action { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

@media (max-width: 991.98px) { .position-signup-bar { width: calc(100vw - 32px); margin-left: calc(-50vw + 50% + 16px); } }

@media (max-width: 575.98px) { .position-signup-bar .position-signup-action { width: 100%; justify-content: space-between; } }

/* Vertical white card - Figma 8334-100230 (above the Location box) */
.position-signup-card { display: flex; flex-direction: column; gap: 16px; /* Mobile (Figma 8334-100109): no box — content sits flush on the page background */ /* Mobile: button is its natural content width */ /* Desktop (Figma 8334-100230): white bordered box, button fills the remaining row width */ }

.position-signup-card .position-signup-card-info { display: flex; flex-direction: column; gap: 8px; }

.position-signup-card .position-signup-card-action { display: flex; align-items: center; gap: 8px; width: 100%; /* Mobile: openings on the left, button hugs the right */ justify-content: space-between; }

.position-signup-card .position-signup-card-action .position-signup-openings { flex: 0 1 auto; }

.position-signup-card .position-signup-btn-fill { flex: 0 0 auto; }

@media (min-width: 992px) { .position-signup-card { padding: 24px; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 8px; /* Button fills the remaining width but never shrinks below its label (no min-width:0, so "Sign up" can't get clipped in a narrow column) */ } .position-signup-card .position-signup-card-action { justify-content: flex-start; /* In a narrow left column the button drops to its own full-width row instead of overflowing the card's right padding */ flex-wrap: wrap; /* Openings box targets Figma's 185px (8334-100235) but is allowed to shrink so the button never gets squeezed in a narrow left column */ } .position-signup-card .position-signup-card-action .position-signup-openings { flex: 0 1 185px; } .position-signup-card .position-signup-btn-fill { flex: 1 1 auto; } }

/*# sourceMappingURL=volunteer_search_results_comp.css.map */