/*
 * Modern Campus Design System - CCA Brand Overrides
 * Entry point - imports all modules
 */

/* Base */

/*
 * Modern Campus Design System - CCA Brand Overrides
 * Based on CCA.edu visual design system
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Primary Colors */
  --cca-navy: #005776;
  --cca-navy-dark: #003d52;
  --cca-teal: #00bfb3;

  /* Hover Color */
  --cca-purple: #563D82;

  /* Accent Colors */
  --cca-lime: #C4D82E;
  --cca-pink: #E91E8C;

  /* Neutrals */
  --cca-sand: #F7F3E9;
  --cca-white: #FFFFFF;
  --cca-dark: #222222;
  --cca-gray: #6B6B6B;
  --cca-gray-light: #E5E5E5;

  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-primary);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-out;
}

/* ==========================================================================
   Global Base Styles
   ========================================================================== */

body {
  font-family: var(--font-primary);
  color: var(--cca-dark);
  line-height: 1.6;
}

/* Main content spacing */

#mainContentWrapper {
  padding-top: var(--space-lg);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--cca-dark);
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

h2 {
  font-size: 20px;
  margin-bottom: var(--space-sm);
  color: var(--cca-navy);
}

@media (min-width: 768px) {

h2 {
    font-size: 24px;
}
  }

h3 {
  font-size: 1.5rem;
}

/* Links */

a {
  color: var(--cca-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
    color: var(--cca-purple);
  }

/* Remove underline from nav and button links */

.nav-link,
.btn,
.navbar-brand {
  text-decoration: none !important;
}

/* Layout */

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* Top header bar - hidden by default */

#header0Wrapper {
  display: none;
}

/* Main header with logo, nav, and login */

#header1Wrapper {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--cca-gray-light);
}

#header1Wrapper,
  #header1Wrapper #header1Container,
  #header1Wrapper #header1,
  #header1Wrapper #header1ContentWrapper {
    background-color: var(--cca-white) !important;
  }

/* Make header full-width */

#header1Wrapper #header1Container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

/* Force nav link colors */

#header1Wrapper .navbar-nav .nav-link {
    color: var(--cca-dark) !important;
    font-weight: 500;
    padding: var(--space-sm) var(--space-md) !important;
    position: relative;
    transition: color var(--transition-fast);
    text-decoration: none !important;
    display: block;
  }

#header1Wrapper .navbar-nav .nav-link:hover {
      color: var(--cca-purple) !important;
    }

/* Login dropdown styling */

#header1Wrapper .headerStudentLoginDropdownLink,
  #header1Wrapper #loginDropdownMenuLink {
    color: var(--cca-navy) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color var(--transition-fast);
  }

:is(#header1Wrapper .headerStudentLoginDropdownLink,#header1Wrapper #loginDropdownMenuLink):hover {
      color: var(--cca-purple) !important;
    }

/* Header layout - flex container */

#header1ContentWrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

#schoolHeaderLogoWrapper {
  flex: 0 0 auto;
}

#mainNavWrapper {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

#loginWrapper {
  flex: 0 0 auto;
}

#searchWrapper {
  flex: 0 0 auto;
}

/* Nav list styling (replacing Bootstrap) */

#mainNavList,
#globalNavigationBar .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-xs);
}

#mainNavList .nav-item,
#globalNavigationBar .nav-item {
  list-style: none;
}

/* Force nav link colors - override both navbar-dark and navbar-light */

#mainNavList .nav-link,
#globalNavigationBar .nav-link,
#globalNavigationBar.navbar-light .nav-link,
.navbar-dark #globalNavigationBar .nav-link {
  color: var(--cca-dark) !important;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md) !important;
  position: relative;
  transition: color var(--transition-fast);
  text-decoration: none !important;
  display: block;
}

:is(#mainNavList .nav-link,#globalNavigationBar .nav-link,#globalNavigationBar.navbar-light .nav-link,.navbar-dark #globalNavigationBar .nav-link):hover {
    color: var(--cca-purple) !important;
  }

/* Nav link underline effect */

:is(body #header1Wrapper #globalNavigationBar #mainNavList .nav-link,body #header1Wrapper #globalNavigationBar .navbar-nav .nav-link)::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: var(--space-md) !important;
    right: var(--space-md) !important;
    height: 2px !important;
    background-color: var(--cca-teal) !important;
    transform: scaleX(0);
    transition: transform var(--transition-normal);
  }

:is(body #header1Wrapper #globalNavigationBar #mainNavList .nav-link,body #header1Wrapper #globalNavigationBar .navbar-nav .nav-link):hover::after {
    transform: scaleX(1) !important;
  }

/* Login dropdown styling - navy text, purple on hover */

#loginInfo .headerStudentLoginDropdownLink,
.headerStudentLoginContainer > a,
a.headerStudentLoginDropdownLink {
  color: var(--cca-navy) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color var(--transition-fast);
}

:is(#loginInfo .headerStudentLoginDropdownLink,.headerStudentLoginContainer > a,a.headerStudentLoginDropdownLink):hover {
    color: var(--cca-purple) !important;
  }

/* Logged-in state header elements */

#logoutLinkWrapper,
.headerProfileLink,
#loginNameWrapper,
.headerStudentLoginLogoutLink {
  color: var(--cca-navy) !important;
  font-size: 15px;
  font-weight: 500;
}

:is(#logoutLinkWrapper,.headerProfileLink,.headerStudentLoginLogoutLink):hover {
    color: var(--cca-purple) !important;
  }

#collapseLoginMenuOptions {
  background-color: var(--cca-white);
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#collapseLoginMenuOptions .dropdown-item {
    color: var(--cca-dark);
    padding: var(--space-sm) var(--space-md);
    transition: background-color var(--transition-fast);
  }

#collapseLoginMenuOptions .dropdown-item:hover {
      background-color: var(--cca-sand);
      color: var(--cca-navy);
    }

/* Hide old navigation wrapper */

#header3Wrapper {
  display: none;
}

/* Mobile nav toggle */

.navbar-toggler {
  border-color: var(--cca-navy) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23005776' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Shopping cart - hidden in new layout */

#cartInfo {
  display: none;
}

/* Mobile: stack header elements */

@media (max-width: 767px) {
  #header1ContentWrapper {
    flex-direction: column;
    align-items: stretch;
  }

  #schoolHeaderLogoWrapper {
    text-align: center;
    margin-bottom: var(--space-sm);
  }

  #mainNavWrapper {
    order: 4; /* Move nav below other items on mobile */
    width: 100%;
  }

  #loginWrapper,
  #searchWrapper {
    text-align: center;
  }

  /* Collapsed nav on mobile */
  #mainNavBarCollapsable {
    width: 100%;
  }

    #mainNavBarCollapsable:not(.show) {
      display: none;
    }

    #mainNavBarCollapsable.show {
      display: block;
    }

  #mainNavList {
    flex-direction: column;
    align-items: center;
  }
}

/* Force navbar-collapse visible on desktop (override Bootstrap collapse) */

@media (min-width: 768px) {
  #mainNavBarCollapsable,
  #globalNavigationBar .collapse,
  #globalNavigationBar .navbar-collapse,
  #header1Wrapper .collapse.navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    visibility: visible !important;
  }

  #globalNavigationBar .navbar-toggler {
    display: none !important;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
  background-color: var(--cca-dark);
  color: var(--cca-white);
  margin-top: var(--space-xl);
  position: relative;
}

#footer::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 67%;
    height: 20px;
    background-color: var(--cca-dark);
  }

#footer1Wrapper {
  background-color: var(--cca-dark);
  padding: var(--space-xl) 0;
}

#footer-info {
  line-height: 1.5;
}

#footerNav a {
    color: var(--cca-white) !important;
    text-decoration: underline;
    text-decoration-color: var(--cca-teal);
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  }

#footerNav a:hover {
      color: var(--cca-teal) !important;
      text-decoration-color: var(--cca-teal);
    }

#footerNav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

#footerNav li {
    margin-bottom: var(--space-xs);
  }

/* Social icons */

.social-icons a {
  color: var(--cca-white) !important;
  font-size: 1.5rem;
  margin-right: var(--space-sm);
  transition: color var(--transition-fast);
}

.social-icons a:hover {
    color: var(--cca-teal) !important;
  }

/* Footer bottom bar */

#footer2Wrapper {
  background-color: #111;
  padding: var(--space-md) 0;
}

/* Hide empty footer rows */

#footer2Sub1,
#footer2Sub2 {
  display: none;
}

.poweredByDestinyOne {
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.poweredByDestinyOne:hover {
    opacity: 1;
  }

/* ==========================================================================
   Sidebar
   ========================================================================== */

#sidebar1Module1 {
  color: var(--cca-dark);
}

#sidebar1Wrapper {
  background-color: var(--cca-white);
}

.nav-pills {
  color: var(--cca-dark);
}

.nav-pills .nav-link {
    color: var(--cca-navy);
  }

.nav-pills .nav-link:hover {
      color: var(--cca-purple);
    }

.nav-pills .nav-link.active {
      background-color: var(--cca-navy);
      color: var(--cca-white);
    }

/* Components */

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Primary button */

.btn-primary {
  background-color: var(--cca-navy) !important;
  border-color: var(--cca-navy) !important;
  color: var(--cca-white) !important;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  border-radius: 0;
  transition: all var(--transition-fast);
}

.btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--cca-purple) !important;
    border-color: var(--cca-purple) !important;
    transform: translateY(-1px);
  }

/* Secondary button */

.btn-secondary {
  background-color: transparent !important;
  border: 2px solid var(--cca-navy) !important;
  color: var(--cca-navy) !important;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  border-radius: 0;
  transition: all var(--transition-fast);
}

.btn-secondary:hover,
  .btn-secondary:focus {
    background-color: var(--cca-purple) !important;
    border-color: var(--cca-purple) !important;
    color: var(--cca-white) !important;
  }

/* Warning/CTA buttons */

.btn-warning {
  background-color: var(--cca-teal) !important;
  border-color: var(--cca-teal) !important;
  color: var(--cca-dark) !important;
  font-weight: 600;
  border-radius: 0;
}

.btn-warning:hover {
    background-color: var(--cca-purple) !important;
    border-color: var(--cca-purple) !important;
    color: var(--cca-white) !important;
  }

/* ==========================================================================
   Cards & Panels
   ========================================================================== */

.card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--cca-white);
}

.card-header {
  background-color: var(--cca-navy) !important;
  color: var(--cca-white) !important;
  border-radius: 0 !important;
  border: none;
  padding: var(--space-md);
}

.card-header h2,
  .card-header h3,
  .card-header h4 {
    color: var(--cca-white) !important;
    margin: 0;
    font-size: 1.25rem;
  }

.card-body {
  padding: var(--space-md);
}

.panel-default {
  border: 1px solid var(--cca-gray-light);
}

/* Collapsible Panel Toggle */

.panelHeadingToggle {
  padding: 0 !important;
}

.panelHeadingToggle button {
    background: transparent;
    border: none;
    color: var(--cca-white);
    font-weight: 600;
    padding: var(--space-md);
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

.panelHeadingToggle button:hover {
      background-color: var(--cca-navy-dark);
    }

.panelHeadingToggle button:focus {
      outline: 2px solid var(--cca-teal);
      outline-offset: -2px;
    }

/* Collapse Animation */

.panel-collapse {
  transition: height var(--transition-normal);
}

/* Table styling */

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--cca-sand);
}

.table td {
  padding: var(--space-sm) var(--space-md);
  border-color: var(--cca-gray-light);
}

.table th {
  background-color: var(--cca-navy);
  color: var(--cca-white);
  font-weight: 600;
  padding: var(--space-sm) var(--space-md);
  border: none;
}

/* Student Inquiry Selection Items
   Used on request information pages
   ========================================================================== */

.studentInquirySelection {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--cca-gray-light);
}

.studentInquirySelection:last-child {
    border-bottom: none;
  }

.studentInquirySelection h5 {
    margin: 0 0 var(--space-xs) 0;
    font-size: 1.0625rem;
  }

.studentInquirySelection h5 a {
      color: var(--cca-navy);
      font-weight: 600;
      text-decoration: none;
      transition: color var(--transition-fast);
    }

.studentInquirySelection h5 a:hover {
        color: var(--cca-purple);
        text-decoration: underline;
      }

.studentInquirySelection p {
    margin: 0;
    color: var(--cca-gray);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert-warning {
  background-color: var(--cca-sand);
  border: none;
  border-left: 4px solid var(--cca-lime);
  color: var(--cca-dark);
  border-radius: 0;
}

.alert-danger {
  background-color: #FFF0F3;
  border: none;
  border-left: 4px solid var(--cca-pink);
  color: var(--cca-dark);
  border-radius: 0;
}

.alert-info {
  background-color: #E6F7F7;
  border: none;
  border-left: 4px solid var(--cca-teal);
  color: var(--cca-dark);
  border-radius: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Base Form Control */

.form-control {
  border-radius: 0;
  border: 1px solid var(--cca-gray-light);
  padding: 0.75rem var(--space-sm);
  font-size: 0.9375rem;
  color: var(--cca-dark);
  background-color: var(--cca-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--cca-navy);
    box-shadow: 0 0 0 3px rgba(0, 87, 118, 0.12);
    outline: none;
  }

.form-control:hover:not(:focus) {
    border-color: var(--cca-gray);
  }

.form-control::-moz-placeholder {
    color: var(--cca-gray);
    opacity: 0.7;
  }

.form-control::placeholder {
    color: var(--cca-gray);
    opacity: 0.7;
  }

/* Labels */

label,
.labelSpanStyle {
  color: var(--cca-dark);
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: var(--space-xs);
  display: block;
}

/* Form Groups */

.form-group {
  margin-bottom: var(--space-md);
}

/* Select Dropdowns */

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--cca-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23005776' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
  color: var(--cca-dark);
  line-height: 1.5;
}

select.form-control option {
    color: var(--cca-dark);
    background-color: var(--cca-white);
  }

/* Textarea */

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Input with icon */

.input-group .input-group-text {
    background-color: var(--cca-sand);
    border: 1px solid var(--cca-gray-light);
    border-radius: 0;
    color: var(--cca-navy);
  }

.input-group .form-control {
    border-left: none;
  }

.input-group .form-control:focus {
      border-left: 1px solid var(--cca-navy);
    }

/* Validation States */

.form-control.is-invalid {
  border-color: var(--cca-pink);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.12);
  }

.form-control.is-valid {
  border-color: var(--cca-teal);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(0, 191, 179, 0.12);
  }

.invalid-feedback {
  color: var(--cca-pink);
  font-size: 0.875rem;
  margin-top: var(--space-xs);
}

/* Required Field Indicator */

.requiredFieldLabel::after {
  content: '*';
  color: var(--cca-pink);
  margin-left: 2px;
}

/* Pages */

/* ==========================================================================
   Homepage Specific
   ========================================================================== */

/* Carousel */

.carousel-indicators li {
  background-color: var(--cca-teal);
  opacity: 0.5;
}

.carousel-indicators li.active {
    opacity: 1;
  }

.carousel-control-prev,
.carousel-control-next {
  opacity: 0.8;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
  }

/* Why CCA section */

.flex-container h1 {
  color: var(--cca-navy);
}

/* ==========================================================================
   Product Page Specific
   ========================================================================== */

#pageHeader h1 {
  color: var(--cca-dark);
  border-bottom: none;
  padding-bottom: 0;
}

.courseCode {
  color: var(--cca-navy);
  font-weight: 600;
}

#courseProfileOfficialCourseDescription,
#courseProfileNotes,
.courseProfileRequiredPrerequisites {
  margin-bottom: var(--space-lg);
}

/* Breadcrumb */

#searchBreadcrumb {
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-md);
}

#searchBreadcrumb a {
    color: var(--cca-navy);
  }

/* ==========================================================================
   Category Page Specific
   ========================================================================== */

.catalog .course a,
  .catalog .programStream a {
    color: var(--cca-dark);
    text-decoration: none;
    display: block;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
  }

.catalog .course a:hover, .catalog .programStream a:hover {
      color: var(--cca-navy);
    }

.catalog .course .courseCode {
    color: var(--cca-navy);
  }

/* ==========================================================================
   Search Pages - Course & Certificate Search
   Shared styles for #pageCourseSearch and #pageCertificateSearch
   ========================================================================== */

/* Page Container
   ========================================================================== */

/* Ensure main content has breathing room */

#pageCourseSearch #mainContentWrapper, #pageCertificateSearch #mainContentWrapper {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

/* Page Header
   ========================================================================== */

#pageCourseSearch #pageHeader,
#pageCertificateSearch #pageHeader {
  margin-bottom: var(--space-lg);
}

/* Help Text
   ========================================================================== */

#pageCourseSearch .pageHelpText,
#pageCertificateSearch .pageHelpText {
  color: var(--cca-gray);
  font-size: 1rem;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* Keyword Search Section
   ========================================================================== */

#courseSearchKeyword,
#certificateSearchKeyword {
  margin-bottom: var(--space-lg);
}

#courseSearchKeyword .form-group, #certificateSearchKeyword .form-group {
    margin-bottom: 0;
  }

#courseSearchKeyword label, #certificateSearchKeyword label {
    color: var(--cca-dark);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: var(--space-xs);
    display: block;
  }

#courseSearchKeyword .form-control, #certificateSearchKeyword .form-control {
    font-size: 1rem;
    padding: 0.875rem var(--space-sm);
    border: 2px solid var(--cca-gray-light);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

#courseSearchKeyword .form-control::-moz-placeholder, #certificateSearchKeyword .form-control::-moz-placeholder {
      color: var(--cca-gray);
      opacity: 0.7;
    }

#courseSearchKeyword .form-control::placeholder, #certificateSearchKeyword .form-control::placeholder {
      color: var(--cca-gray);
      opacity: 0.7;
    }

#courseSearchKeyword .form-control:focus, #certificateSearchKeyword .form-control:focus {
      border-color: var(--cca-navy);
      box-shadow: 0 0 0 3px rgba(0, 87, 118, 0.12);
      outline: none;
    }

/* Advanced Search Panel - Collapsible Card
   ========================================================================== */

#pageCourseSearch .card.panel-default,
#pageCertificateSearch .card.panel-default {
  border: 1px solid var(--cca-gray-light);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

/* Panel Header (Toggle Button) */

#pageCourseSearch .card-header.panelHeadingToggle,
#pageCertificateSearch .card-header.panelHeadingToggle {
  background-color: var(--cca-navy) !important;
  padding: 0 !important;
  border: none;
}

#pageCourseSearch .card-header.panelHeadingToggle .card-title, #pageCertificateSearch .card-header.panelHeadingToggle .card-title {
    margin: 0;
  }

#pageCourseSearch .card-header.panelHeadingToggle .courseSearchCriteriaHeader, #pageCertificateSearch .card-header.panelHeadingToggle .courseSearchCriteriaHeader {
    margin: 0;
  }

/* The toggle button */

#pageCourseSearch .card-header.panelHeadingToggle button, #pageCertificateSearch .card-header.panelHeadingToggle button {
    background: none;
    border: none;
    color: var(--cca-white);
    font-weight: 600;
    font-size: 1rem;
    padding: var(--space-md);
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
  }

#pageCourseSearch .card-header.panelHeadingToggle button:hover, #pageCertificateSearch .card-header.panelHeadingToggle button:hover {
      background-color: var(--cca-navy-dark);
    }

#pageCourseSearch .card-header.panelHeadingToggle button:focus, #pageCertificateSearch .card-header.panelHeadingToggle button:focus {
      outline: 2px solid var(--cca-teal);
      outline-offset: -2px;
    }

#pageCourseSearch .card-header.panelHeadingToggle button > span, #pageCertificateSearch .card-header.panelHeadingToggle button > span {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

/* Panel Icon (Plus/Minus indicator) */

.searchCriteriaPanelIconContainer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.875rem;
  transition: transform var(--transition-normal);
}

.searchCriteriaPanelIconContainer::before {
    content: '+' !important;
    font-family: inherit !important;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }

/* When expanded, rotate the icon */

.panelHeadingToggle button:not(.collapsed) .searchCriteriaPanelIconContainer::before {
  content: '−' !important;
}

/* Panel Body */

#courseSearchCriteriaBody {
  background-color: var(--cca-sand);
}

#courseSearchCriteriaBody > .card-body {
    padding: var(--space-lg);
  }

/* Panel collapse animation */

#pageCourseSearch #courseSearchCriteriaBody,
#pageCertificateSearch #courseSearchCriteriaBody {
  /* Smooth collapse transition */
  transition: height var(--transition-normal);
}

/* Form Layout within Panel
   ========================================================================== */

#courseSearchCriteriaBody .row {
  margin-bottom: var(--space-md);
}

#courseSearchCriteriaBody .row:last-child {
    margin-bottom: 0;
  }

/* Form Labels
   ========================================================================== */

#pageCourseSearch label,
#pageCertificateSearch label,
#pageCourseSearch .labelSpanStyle,
#pageCertificateSearch .labelSpanStyle {
  color: var(--cca-navy);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: var(--space-xs);
  display: block;
  letter-spacing: 0.01em;
}

/* Form Controls - Inputs & Selects
   ========================================================================== */

#pageCourseSearch .form-control,
#pageCertificateSearch .form-control {
  border-radius: 0;
  border: 1px solid var(--cca-gray-light);
  padding: 0.75rem var(--space-sm);
  font-size: 0.9375rem;
  color: var(--cca-dark);
  background-color: var(--cca-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#pageCourseSearch .form-control:focus, #pageCertificateSearch .form-control:focus {
    border-color: var(--cca-navy);
    box-shadow: 0 0 0 3px rgba(0, 87, 118, 0.12);
    outline: none;
  }

#pageCourseSearch .form-control:hover:not(:focus), #pageCertificateSearch .form-control:hover:not(:focus) {
    border-color: var(--cca-gray);
  }

/* Select Dropdowns - Custom Arrow */

#pageCourseSearch select.form-control,
#pageCertificateSearch select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--cca-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23005776' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
  color: var(--cca-dark);
  line-height: 1.4;
}

#pageCourseSearch select.form-control:focus, #pageCertificateSearch select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23563D82' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  }

#pageCourseSearch select.form-control option, #pageCertificateSearch select.form-control option {
    color: var(--cca-dark);
    background-color: var(--cca-white);
    padding: 8px;
  }

/* Multi-select dropdown */

#pageCourseSearch select[multiple].form-control,
#pageCertificateSearch select[multiple].form-control {
  background-image: none;
  padding-right: var(--space-sm);
  min-height: 100px;
}

#pageCourseSearch select.form-control[multiple] option, #pageCertificateSearch select.form-control[multiple] option {
    padding: var(--space-xs);
  }

#pageCourseSearch select.form-control[multiple] option:checked, #pageCertificateSearch select.form-control[multiple] option:checked {
      background-color: var(--cca-navy);
      color: var(--cca-white);
    }

/* Form Inline (Program Code + Course Number) */

#pageCourseSearch .form-inline,
#pageCertificateSearch .form-inline {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

#pageCourseSearch .form-inline .form-control, #pageCertificateSearch .form-inline .form-control {
    flex: 1;
    min-width: 120px;
  }

#pageCourseSearch .form-inline select.form-control, #pageCertificateSearch .form-inline select.form-control {
    flex: 0 0 auto;
    width: auto;
    min-width: 160px;
  }

/* Radio Buttons - Course Availability Filter
   ========================================================================== */

#pageCourseSearch fieldset.accessibility,
#pageCertificateSearch fieldset.accessibility {
  border: none;
  padding: 0;
  margin: 0;
}

#pageCourseSearch fieldset.accessibility legend, #pageCertificateSearch fieldset.accessibility legend {
    color: var(--cca-navy);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-sm);
    padding: 0;
    float: none;
    width: auto;
  }

#pageCourseSearch .form-check,
#pageCertificateSearch .form-check {
  margin-bottom: var(--space-xs);
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

#pageCourseSearch .form-check-input,
#pageCertificateSearch .form-check-input {
  position: relative;
  margin: 0;
  width: 18px;
  height: 18px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 2px solid var(--cca-gray);
  border-radius: 50%;
  background-color: var(--cca-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  flex-shrink: 0;
}

#pageCourseSearch .form-check-input:hover, #pageCertificateSearch .form-check-input:hover {
    border-color: var(--cca-navy);
  }

#pageCourseSearch .form-check-input:focus, #pageCertificateSearch .form-check-input:focus {
    outline: 2px solid var(--cca-teal);
    outline-offset: 2px;
  }

#pageCourseSearch .form-check-input:checked, #pageCertificateSearch .form-check-input:checked {
    border-color: var(--cca-navy);
    background-color: var(--cca-navy);
  }

#pageCourseSearch .form-check-input:checked::after, #pageCertificateSearch .form-check-input:checked::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background-color: var(--cca-white);
      border-radius: 50%;
    }

#pageCourseSearch .form-check-label,
#pageCertificateSearch .form-check-label {
  color: var(--cca-dark);
  font-weight: 400;
  font-size: 0.9375rem;
  cursor: pointer;
  margin: 0;
  line-height: 1.4;
}

/* Dynatree - Program/Stream Tree
   ========================================================================== */

#programStream {
  background-color: var(--cca-white);
  border: 1px solid var(--cca-gray-light);
  border-radius: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-sm);
}

#programStreamTree {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Override Dynatree default styles */

.ui-dynatree-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Tree node styling */

.dynatree-node {
  padding: 4px 0;
}

.dynatree-title {
  color: var(--cca-dark);
  font-size: 0.9375rem;
  margin-left: var(--space-xs);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.dynatree-title:hover {
    color: var(--cca-navy);
  }

/* Selected node */

.dynatree-selected .dynatree-title {
  color: var(--cca-navy);
  font-weight: 600;
}

/* Checkbox styling */

.dynatree-checkbox {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

/* Expander icon */

.dynatree-expander {
  cursor: pointer;
  margin-right: 4px;
}

/* Folder icons - hide default */

.dynatree-icon {
  display: none;
}

/* Connector lines */

.dynatree-connector {
  background-color: var(--cca-gray-light);
}

/* Action Buttons
   ========================================================================== */

#pageCourseSearch .buttons,
#pageCertificateSearch .buttons {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cca-gray-light);
}

/* Reset Button - Secondary style */

#pageCourseSearch #buttonReset,
#pageCertificateSearch #buttonReset {
  background-color: transparent;
  border: 2px solid var(--cca-navy);
  color: var(--cca-navy);
  padding: 0.75rem var(--space-lg);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#pageCourseSearch #buttonReset:hover, #pageCertificateSearch #buttonReset:hover {
    background-color: var(--cca-navy);
    color: var(--cca-white);
  }

#pageCourseSearch #buttonReset:focus, #pageCertificateSearch #buttonReset:focus {
    outline: 2px solid var(--cca-teal);
    outline-offset: 2px;
  }

/* Search Button - Primary CTA */

#pageCourseSearch #buttonSearch,
#pageCertificateSearch #buttonSearch {
  background-color: var(--cca-navy) !important;
  border: 2px solid var(--cca-navy) !important;
  color: var(--cca-white) !important;
  padding: 0.75rem var(--space-xl);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#pageCourseSearch #buttonSearch:hover, #pageCertificateSearch #buttonSearch:hover {
    background-color: var(--cca-purple) !important;
    border-color: var(--cca-purple) !important;
  }

#pageCourseSearch #buttonSearch:focus, #pageCertificateSearch #buttonSearch:focus {
    outline: 2px solid var(--cca-teal);
    outline-offset: 2px;
  }

/* Error Panel
   ========================================================================== */

#pageCourseSearch #errorPanel,
#pageCertificateSearch #errorPanel {
  /* Hidden by default - only shows when it has actual child elements */
  display: none;

  /* Show when it has real content (not just whitespace) */
}

#pageCourseSearch #errorPanel:has(*), #pageCertificateSearch #errorPanel:has(*) {
    display: block;
    background-color: #fef2f2;
    border-left: 4px solid var(--cca-pink);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    color: var(--cca-dark);
  }

#pageCourseSearch #errorPanel a, #pageCertificateSearch #errorPanel a {
    color: var(--cca-pink);
  }

/* Form Group Spacing
   ========================================================================== */

#pageCourseSearch .form-group,
#pageCertificateSearch .form-group {
  margin-bottom: var(--space-md);
}

/* Responsive Adjustments
   ========================================================================== */

@media (max-width: 767.98px) {
  #courseSearchCriteriaBody > .card-body {
    padding: var(--space-md);
  }

  #pageCourseSearch .buttons,
  #pageCertificateSearch .buttons {
    flex-direction: column;
  }

    #pageCourseSearch .buttons button, #pageCertificateSearch .buttons button {
      width: 100%;
    }

  #pageCourseSearch .form-inline,
  #pageCertificateSearch .form-inline {
    flex-direction: column;
  }

    #pageCourseSearch .form-inline .form-control,
    #pageCertificateSearch .form-inline .form-control,
    #pageCourseSearch .form-inline select.form-control,
    #pageCertificateSearch .form-inline select.form-control {
      width: 100%;
      min-width: 100%;
    }
}

/* ==========================================================================
   Programs Page - Program Areas List
   Styles for #pageProgramAreasList
   ========================================================================== */

/* Page Container
   ========================================================================== */

#pageProgramAreasList #mainContentWrapper {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

/* Help Text
   ========================================================================== */

#pageProgramAreasList .pageHelpText {
  color: var(--cca-gray);
  font-size: 1rem;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* Advanced Search Button
   ========================================================================== */

#pageProgramAreasList .buttons {
  margin-bottom: var(--space-lg);
}

#pageProgramAreasList #buttonAdvancedCourseSearch {
  background-color: transparent;
  border: 2px solid var(--cca-navy);
  color: var(--cca-navy);
  padding: 0.625rem var(--space-lg);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0;
  transition: all var(--transition-fast);
}

#pageProgramAreasList #buttonAdvancedCourseSearch:hover {
    background-color: var(--cca-navy);
    color: var(--cca-white);
    text-decoration: none;
  }

#pageProgramAreasList #buttonAdvancedCourseSearch:focus {
    outline: 2px solid var(--cca-teal);
    outline-offset: 2px;
  }

/* Programs Catalog Container
   ========================================================================== */

#pageProgramAreasList .catalog.programs {
  /* Container for the programs list */
}

/* Accordion Panel Group
   ========================================================================== */

#pageProgramAreasList #programAreasAccordion {
  border: 1px solid var(--cca-gray-light);
  border-radius: 0;

  /* Remove gaps between cards */
}

#pageProgramAreasList #programAreasAccordion .card.panel-default {
    border: none;
    border-bottom: 1px solid var(--cca-gray-light);
    border-radius: 0;
    margin: 0;
  }

#pageProgramAreasList #programAreasAccordion .card.panel-default:last-child {
      border-bottom: none;
    }

/* Program Area Card Headers
   ========================================================================== */

#pageProgramAreasList .card-header.panelHeadingToggle {
  background-color: var(--cca-white) !important;
  padding: 0 !important;
  border: none;
}

#pageProgramAreasList .card-header.panelHeadingToggle .card-title {
    margin: 0;
  }

#pageProgramAreasList .card-header.panelHeadingToggle .row {
    margin: 0;
    align-items: center;
  }

/* Program area column */

#pageProgramAreasList .card-header.panelHeadingToggle .col-10,
  #pageProgramAreasList .card-header.panelHeadingToggle .col-sm-10 {
    padding: var(--space-md);
  }

/* Expand icon column */

#pageProgramAreasList .card-header.panelHeadingToggle .col-2,
  #pageProgramAreasList .card-header.panelHeadingToggle .col-sm-2 {
    padding: var(--space-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

#pageProgramAreasList .card-header.panelHeadingToggle .col-2:hover, #pageProgramAreasList .card-header.panelHeadingToggle .col-sm-2:hover {
      background-color: var(--cca-sand);
    }

/* Program Area Links
   ========================================================================== */

#pageProgramAreasList .programArea {
  display: block;
}

#pageProgramAreasList .programArea a {
    color: var(--cca-navy);
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

#pageProgramAreasList .programArea a:hover {
      color: var(--cca-purple);
      text-decoration: underline;
    }

#pageProgramAreasList .programArea a:focus {
      outline: 2px solid var(--cca-teal);
      outline-offset: 2px;
    }

/* Expand/Collapse Icon
   ========================================================================== */

#pageProgramAreasList .panelHeaderIcon {
  color: var(--cca-navy);
  font-size: 1rem;
  transition: transform var(--transition-normal);
}

#pageProgramAreasList .panelHeaderIcon::before {
    content: '+' !important;
    font-family: inherit !important;
    font-size: 1.25rem;
    font-weight: 400;
  }

/* Icon rotation when expanded */

#pageProgramAreasList .card-header:not(.collapsed) .panelHeaderIcon::before {
  content: '−' !important;
}

/* Collapsed Panel Body (Program Streams)
   ========================================================================== */

#pageProgramAreasList .panel-collapse {
  background-color: var(--cca-sand);
  transition: height var(--transition-normal);
}

/* Program Streams Table
   ========================================================================== */

#pageProgramAreasList .panel-collapse .table {
  margin: 0;
  background-color: transparent;
}

#pageProgramAreasList .panel-collapse .table tr {
    background-color: transparent !important;
  }

#pageProgramAreasList .panel-collapse .table tr:hover {
      background-color: rgba(0, 87, 118, 0.05) !important;
    }

#pageProgramAreasList .panel-collapse .table td {
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

#pageProgramAreasList .panel-collapse .table tr:last-child td {
    border-bottom: none;
  }

/* Program Stream Links
   ========================================================================== */

#pageProgramAreasList .programStream a {
    color: var(--cca-dark);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
    display: inline-block;
    padding-left: var(--space-sm);
  }

#pageProgramAreasList .programStream a::before {
      content: '→';
      margin-right: var(--space-xs);
      color: var(--cca-teal);
      font-weight: 400;
    }

#pageProgramAreasList .programStream a:hover {
      color: var(--cca-navy);
      text-decoration: underline;
    }

#pageProgramAreasList .programStream a:focus {
      outline: 2px solid var(--cca-teal);
      outline-offset: 2px;
    }

/* Indentation classes */

#pageProgramAreasList .programStream a.indent,
  #pageProgramAreasList .programStream a.indent0 {
    padding-left: var(--space-sm);
  }

#pageProgramAreasList .programStream a.indent1 {
    padding-left: var(--space-lg);
  }

#pageProgramAreasList .programStream a.indent2 {
    padding-left: var(--space-xl);
  }

/* Hover State - Only on expand icon area (since only that triggers collapse)
   ========================================================================== */

/* Don't highlight entire row - it's misleading since only icon is clickable */

#pageProgramAreasList .card-header.panelHeadingToggle {
  /* No row-level hover */
}

/* Responsive Adjustments
   ========================================================================== */

@media (max-width: 767.98px) {
  #pageProgramAreasList .programArea a {
    font-size: 1rem;
  }
    #pageProgramAreasList .card-header.panelHeadingToggle .col-10,
    #pageProgramAreasList .card-header.panelHeadingToggle .col-sm-10,
    #pageProgramAreasList .card-header.panelHeadingToggle .col-2,
    #pageProgramAreasList .card-header.panelHeadingToggle .col-sm-2 {
      padding: var(--space-sm);
    }

  #pageProgramAreasList .panel-collapse .table td {
    padding: var(--space-sm);
  }
}

/* ==========================================================================
   Student Login Page
   Page ID: #pageStudentLogin
   ========================================================================== */

/* Page Background & Container
   -------------------------------------------------------------------------- */

#pageStudentLogin {
  background-color: var(--cca-sand);
}

#pageStudentLogin #mainContentWrapper {
    padding: var(--space-xl) 0;
    min-height: calc(100vh - 300px);
  }

/* Login Options Container
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer {
  margin-top: var(--space-md);
}

/* User Form Panels (Both Columns)
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer .userForm {
  margin-bottom: var(--space-lg);
}

#existingStudentDiv,
#newStudentDiv {
  background-color: var(--cca-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition-normal);
}

#existingStudentDiv:hover, #newStudentDiv:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

/* Section Headers (Card Headers)
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer .sectionHeader {
  background-color: var(--cca-navy) !important;
  border-radius: 0 !important;
  padding: var(--space-md) var(--space-lg) !important;
  position: relative;
  overflow: hidden;

  /* Teal accent bar on left edge */
}

#studentLoginOptionsContainer .sectionHeader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--cca-teal);
  }

#studentLoginOptionsContainer .sectionHeader h2 {
    color: var(--cca-white) !important;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
  }

/* Form Content Areas
   -------------------------------------------------------------------------- */

#existingStudentDiv > .row,
#newStudentDiv > .col-md-12 {
  padding: var(--space-lg);
}

#existingStudentDiv #portalNativeLoginPanel {
  padding: var(--space-lg);
}

/* Intro Text */

#studentLoginOptionsContainer .variable-content-item {
  color: var(--cca-gray);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* Floating Label Inputs
   Override the default floating label styles for more polish
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer .has-float-label {
  position: relative;
  margin-bottom: var(--space-sm);
}

#studentLoginOptionsContainer .has-float-label .form-control {
    height: 56px;
    padding: 1.5rem var(--space-sm) 0.5rem;
    font-size: 1rem;
    border: 2px solid var(--cca-gray-light);
    background-color: var(--cca-white);
  }

#studentLoginOptionsContainer .has-float-label .form-control:focus {
      border-color: var(--cca-navy);
      box-shadow: none;
    }

/* When input has value or is focused, label moves up */

:is(#studentLoginOptionsContainer .has-float-label .form-control):not(:-moz-placeholder) + label {
      top: 8px;
      font-size: 0.75rem;
      color: var(--cca-navy);
      font-weight: 600;
    }

:is(#studentLoginOptionsContainer .has-float-label .form-control):focus + label,
    :is(#studentLoginOptionsContainer .has-float-label .form-control):not(:placeholder-shown) + label {
      top: 8px;
      font-size: 0.75rem;
      color: var(--cca-navy);
      font-weight: 600;
    }

#studentLoginOptionsContainer .has-float-label label {
    position: absolute;
    top: 50%;
    left: var(--space-sm);
    transform: translateY(-50%);
    font-size: 0.9375rem;
    color: var(--cca-gray);
    font-weight: 400;
    pointer-events: none;
    transition: all var(--transition-fast);
    background-color: transparent;
    margin: 0;
  }

/* Password Input - needs extra right padding for any visibility toggle */

#studentLoginOptionsContainer input[type="password"] {
  padding-right: var(--space-lg);
}

/* Forgot Credential Links
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer .forgot-credential-container {
  margin-bottom: var(--space-xs);
  margin-top: calc(-1 * var(--space-xs));
  text-align: right;
}

#studentLoginOptionsContainer .forgot-credential-container a {
    color: var(--cca-navy);
    font-size: 0.8125rem;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
  }

#studentLoginOptionsContainer .forgot-credential-container a:hover {
      color: var(--cca-purple);
      text-decoration: underline;
    }

/* Position forgot links after their related input fields visually */

#existingStudentDiv .forgot-credential-container {
  order: 1;
}

/* Radio Buttons (Age Selection)
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer fieldset.accessibility {
  margin: var(--space-md) 0;
  padding: 0;
  border: none;
}

#studentLoginOptionsContainer fieldset.accessibility legend {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cca-dark);
    margin-bottom: var(--space-sm);
    padding: 0;
  }

#studentLoginOptionsContainer .form-check {
  padding-left: 0;
  margin-bottom: var(--space-xs);
}

#studentLoginOptionsContainer .form-check .form-check-input {
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: var(--space-xs);
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--cca-navy);
  }

#studentLoginOptionsContainer .form-check .form-check-label {
    font-size: 0.9375rem;
    color: var(--cca-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

/* Date of Birth Field (shows when under 18 selected) */

#studentDateOfBirth {
  margin-top: var(--space-sm);
}

#studentDateOfBirth .input-group {
    border: 2px solid var(--cca-gray-light);
  }

#studentDateOfBirth .input-group .form-control {
      border: none;
      height: 52px;
    }

#studentDateOfBirth .input-group .input-group-append {
      background-color: var(--cca-sand);
    }

#studentDateOfBirth .input-group .input-group-append .input-group-text {
        border: none;
        background-color: transparent;
      }

/* Submit Buttons
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer .buttons {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cca-gray-light);
}

#studentLoginOptionsContainer .buttons .btn-primary {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }

#studentLoginOptionsContainer .buttons .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(86, 61, 130, 0.3);
    }

#studentLoginOptionsContainer .buttons .btn-primary:active {
      transform: translateY(0);
    }

/* Visual Distinction Between Panels
   Create subtle differentiation between "Existing" and "New" user paths
   -------------------------------------------------------------------------- */

/* Existing Student - slightly emphasized as primary action */

#existingStudentDiv .sectionHeader::after {
  content: '';
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f2f6'; /* sign-in icon */
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.5rem;
}

/* New Student - welcoming for new users */

#newStudentDiv .sectionHeader::after {
  content: '';
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f234'; /* user-plus icon */
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.5rem;
}

/* Responsive Adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #studentLoginOptionsContainer .userForm {
    margin-bottom: var(--space-md);
  }

  #existingStudentDiv #portalNativeLoginPanel,
  #newStudentDiv > .col-md-12 {
    padding: var(--space-md);
  }

  #studentLoginOptionsContainer .sectionHeader {
    padding: var(--space-sm) var(--space-md) !important;
  }
}

/* Focus States for Accessibility
   -------------------------------------------------------------------------- */

#studentLoginOptionsContainer a:focus,
  #studentLoginOptionsContainer button:focus,
  #studentLoginOptionsContainer input:focus {
    outline: 2px solid var(--cca-teal);
    outline-offset: 2px;
  }

#studentLoginOptionsContainer .form-control:focus {
    outline: none; /* handled by border-color change */
  }

/* Utilities */

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.bg-cca-navy {
  background-color: var(--cca-navy) !important;
}

.bg-cca-teal {
  background-color: var(--cca-teal) !important;
}

.bg-cca-purple {
  background-color: var(--cca-purple) !important;
}

.bg-cca-sand {
  background-color: var(--cca-sand) !important;
}

.text-cca-navy {
  color: var(--cca-navy) !important;
}

.text-cca-teal {
  color: var(--cca-teal) !important;
}

.text-cca-purple {
  color: var(--cca-purple) !important;
}