/* =========================
   STICKY UI ELEMENTS
========================= */

.control-bar {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: #fff;
}

.pagination-bar {
  position: sticky;
  top: 0;
  z-index: 1060;
}

/* =========================
   FILTERS / UI COMPONENTS
========================= */

.filters-panel {
  overflow: hidden;
  transition: height 0.3s ease;
}

@media (min-width: 768px) {
  .filters-panel {
    height: auto !important;
  }
}

.capability-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-check {
  min-width: 160px;
}

.form-check-input,
.form-check-label {
  cursor: pointer;
}

.form-check-label {
  user-select: none;
}

/* See more links */
.see-more {
  cursor: pointer;
  color: #0d6efd;
  font-size: 0.875rem;
}

/* Info expand/collapse */
.info-text {
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.info-collapsed {
  max-height: 6.5em;
  opacity: 0.95;
}

.info-expanded {
  max-height: none;
  opacity: 1;
}

.see-more-btn {
  cursor: pointer;
  font-size: 0.875rem;
  color: red;
  text-decoration: none;
}

.see-more-btn:hover {
  color: black;
  text-decoration: none;
}


p.no-indent {
    text-indent: 0 !important;
    white-space: pre-line;
}



/* =========================
   HUBSPOT / IFRAME SAFETY
========================= */

body.modal-open iframe[src*="hsforms"],
body.modal-open iframe[src*="hubspot"] {
    visibility:hidden;
}
/* =====================================================
   DISCLAIMER MODAL
   Bootstrap 5.3.3
====================================================== */


/* =====================================================
   MODAL SIZE
====================================================== */

/*
   Bootstrap default:
   500px

   Custom:
   900px desktop
*/

#disclaimerModal .modal-dialog {
    max-width: 900px;
}


/* Mobile sizing */
@media (max-width: 576px) {

    #disclaimerModal .modal-dialog {
        width: calc(100% - 1rem);
        margin: .5rem auto;
    }

}


/* =====================================================
   MODAL CONTENT
====================================================== */

#disclaimerModal .modal-content {

    border-radius: .75rem;

    box-shadow:
        0 1rem 3rem rgba(0,0,0,.25);

    max-height: 90vh;

}


/* =====================================================
   HEADER
====================================================== */

#disclaimerModal .modal-header {

    border-bottom: 0;

    padding:
        1.5rem
        1.5rem
        .75rem;

}


.disclaimer-title {

    position: relative;

    font-weight: 700;

    padding-bottom: .75rem;

}


/*
   Red underline
*/

.disclaimer-title::after {

    content:"";

    display:block;

    width:55px;

    height:4px;

    margin-top:.5rem;

    background:#c62828;

    border-radius:2px;

}


/* =====================================================
   PROGRESS BAR
====================================================== */

.disclaimer-progress {

    width:100%;

    height:6px;

    background:#e9ecef;

    overflow:hidden;

}


.disclaimer-progress-bar {

    width:0%;

    height:100%;

    background:#c62828;

    transition:
        width .2s ease;

}



/* =====================================================
   MODAL BODY
====================================================== */

/*
   IMPORTANT:
   This is the ONLY overflow rule.
   Do not add another .modal-body rule.
*/
#disclaimerModal .modal-body {

    overflow-y:auto;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;

    padding:1.5rem;

}


#disclaimerBody {

 

    padding:
        1.5rem;

    line-height:1.65;

    font-size:1rem;

    color:#333;


    /*
       Better touch scrolling
    */

    -webkit-overflow-scrolling:touch;


    /*
       Prevent scroll chaining
    */

    overscroll-behavior:contain;

}


/* =====================================================
   KEYBOARD FOCUS
====================================================== */


/*
   Remove browser default black outline
*/

#disclaimerBody:focus {

    outline:none;

}


/*
   Restore visible focus for keyboard users
*/

#disclaimerBody:focus-visible {

    outline:
        3px solid #005fcc;

    outline-offset:
        -3px;

}


/* =====================================================
   FOOTER
====================================================== */

#disclaimerModal .modal-footer {

    border-top:1px solid #dee2e6;

    padding:1rem 1.5rem;

    flex-shrink: 0;

}


#agreeBtn {

    min-width:140px;

    font-weight:600;

}



/*
   Disabled state
*/

#agreeBtn:disabled {

    cursor:not-allowed;

    opacity:.55;

}


/*
   Enabled animation
*/

#agreeBtn:not(:disabled){

    animation:
        enableButton .25s ease;

}


@keyframes enableButton {

    from {

        transform:scale(.95);

    }

    to {

        transform:scale(1);

    }

}



/* =====================================================
   TEXT
====================================================== */


#requirementsText,
#gateHint {

    font-size:.875rem;

}


/* =====================================================
   ACCESSIBILITY
====================================================== */


/*
   Screen reader utility
   Bootstrap already includes visually-hidden,
   but keeping this fallback is safe.
*/

.sr-only {

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



/* =====================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after {

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}

/* =========================
   LEGACY / CLEANED OUT
   (intentionally removed)
========================= */
/*
REMOVED:
- duplicate --bs-modal-width declarations
- modal display overrides (breaks Bootstrap)
- modal z-index overrides (Bootstrap already correct)
- modal-backdrop overrides (causes stacking bugs)
- duplicate modal-body rules
- custom modal-overlay system (conflicts with Bootstrap)
*/

.directory-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    margin:2rem 0;
}

.page-link-btn{
    background:none;
    border:none;
    padding:.25rem;
    color:#E61E26;
    font-weight:500;
    cursor:pointer;
    text-decoration:none;
}

.page-link-btn:hover:not(:disabled){
    text-decoration:underline;
}

.page-link-btn:disabled{
    color:#999;
    cursor:default;
    text-decoration:none;
    opacity:.6;
}

.pagination-list{
    display:flex;
    gap:.35rem;
    list-style:none;
    margin:0;
    padding:0;
}

.pagination-list button{
    border:none;
    background:none;
    color:var(--bs-link-color);
    padding:.25rem .55rem;
    border-radius:.25rem;
}

.pagination-list button:hover{
    background:#f4f4f4;
}

.pagination-list .active button{
    font-weight:700;
    text-decoration:underline;
}

@media (max-width:768px){

    .directory-pagination{
        gap:.5rem;
    }

    .pagination-list{
        order:3;
        width:100%;
        justify-content:center;
    }

}