/* CCB Secondary Timeline — Vertical Sticky Sidebar*/

#sidebar-col {
  position: static;
  align-self: start;
}
@media (min-width: 992px) {
  #sidebar-col {
    position: sticky;
    top: 1.5rem;
  }
}


/* ── Outer card ───────────────────────────────────────────── */
.secondary-timeline-card {
  background-color: #eef1f8;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;            
}


/* ── Control row (X / expand button) ────────────────────────
   Sits in the top-right corner, above the heading  */
.tl-control-row {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 1;
}

/* X dismiss button — visible when expanded */
.tl-dismiss-btn {
  background: none;
  border: none;
  color: #666f77;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 3px;
  transition: color .15s, background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.tl-dismiss-btn:hover { color: #002347; background: rgba(0,0,0,.07); }
.tl-dismiss-btn:focus-visible { outline: 4px solid #0076AD; outline-offset: 2px; }

/* Expand (resize) button — visible only when collapsed */
.tl-expand-btn {
  background: none;
  border: none;
  color: #666f77;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 3px;
  display: none;
  align-items: center;
  transition: color .15s, background .15s;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.tl-expand-btn:hover { color: #002347; background: rgba(0,0,0,.07); }
.tl-expand-btn:focus-visible { outline: 4px solid #0076AD; outline-offset: 2px; }


/* ── Collapsed state modifier ─────────────────────────────── */

.secondary-timeline-card.tl-collapsed .tl-body        { display: none; }
.secondary-timeline-card.tl-collapsed .tl-dismiss-btn { display: none; }
.secondary-timeline-card.tl-collapsed .tl-expand-btn  { display: inline-flex; }
.secondary-timeline-card.tl-collapsed                 { padding-bottom: .875rem; }


.secondary-timeline-header {
  text-align: center;
  padding: 2rem 1.25rem 0 1.25rem;
}

.secondary-timeline-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2f67b2;               
  margin: 0;
  line-height: 1.3;
}

.secondary-timeline-rule {
  width: 85px;
  height: 3px;
  background: #a5b5c2;           
  border: 0;
  display: block;
  margin: .65rem auto .25rem auto !important;
}

.tl-body { padding: .25rem 0 1rem 0; }

.tl-step-item { text-align: center; }

.tl-step-link {
  display: block;
  padding: .6rem 1rem;
  text-decoration: none !important;
  transition: background .15s;
  cursor: pointer;
}

.tl-step-link:hover,
.tl-step-link:focus {
  background: #162e51;
  text-decoration: none !important;
}
.tl-step-link:hover .tl-step-label,
.tl-step-link:focus .tl-step-label { color: #ffffff; }

.tl-step-link:focus-visible {
  outline: 4px solid #0076AD;
  outline-offset: -2px;
}

.tl-step-label {
  font-size: 1rem;               
  font-weight: 700;              
  line-height: 1.25;
  color: #212529;               
  transition: color .15s;
  display: block;
}

.tl-step-link.tl-active                { background: #162e51; }
.tl-step-link.tl-active .tl-step-label { color: #ffffff; }

.tl-chevron {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  padding: 0;
}
.tl-chevron img {
  width: 25px;
  height: auto;
  display: block;
  transform: rotate(90deg);
  margin-top: -20px;
  margin-bottom: -20px;
}
.step-rule {
    width: 100% !important; 
    height: 4px;
    background: #a5b5c2;
    border: 0;
    margin: 1.25rem 0;
}
/* ============================================
   BASE ACCORDION STRUCTURE
   ============================================ */

.accordion > .card > .card-header {
    text-align: left;
    font-weight: bold;
}
.accordion > .card > .card-header:hover {
    color: inherit !important;
}
.accordion > .card:not(:last-of-type) {
    border-bottom: 1px solid #ddd;
}
.accordion .card {
    border: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 5px;
}

/* Default grey accordion: black border + divider (mirrors blue/yellow) */
.accordion:not(.accordion-blue):not(.accordion-yellow):not(.accordion-dark-blue) .card {
    border: 1px solid #000000 !important;
}
.accordion:not(.accordion-blue):not(.accordion-yellow):not(.accordion-dark-blue) .card-header {
    border: none;
}
.accordion:not(.accordion-blue):not(.accordion-yellow):not(.accordion-dark-blue) .accordion-button {
    border-bottom: 1px solid #000000;
}

/* Header wrapper */
.accordion .card-header {
    background-color: #eaebec;
    padding: 0;
}

/* Heading element inside the header */
.accordion .accordion-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Toggle button */
.accordion-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
/* Removes Bootstrap 4's default dotted focus outline.
   the visible focus indicator is provided by the
   custom 3px black ring on .accordion-button:focus-visible::after below. */

.accordion .card-header:focus,
.accordion .card-header:focus-within,
.accordion .card-header a:focus,
.accordion .card-header button:focus,
.accordion .accordion-button:focus,
.accordion .accordion-button:active,
.accordion [data-toggle="collapse"]:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Firefox: remove the dotted inner focus border on button elements */
.accordion .card-header button::-moz-focus-inner,
.accordion .accordion-button::-moz-focus-inner {
    border: 0 !important;
}
 


/* Text section */
.accordion .header-text {
    flex: 1;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #000;
}

/* Icon slot in front of the card heading */
.accordion .header-heading-icon {
    display: flex;
    align-self: center;
    padding: 10px 0 10px 20px;
}
.accordion .header-heading-icon + .header-text {
    padding-left: 0px;
}

/* Toggle icon section */
.accordion .header-icon {
    background-color: #bbbdc0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    color: white;
}

/* Remove default caret */
.accordion .card-header::after {
    display: none;
}

/* Create toggle icon using ::before */
.accordion .header-icon::before {
    content: "+";
    font-size: 28px;
    line-height: 1;
    font-weight: bolder;
    position: relative;
    top: -2px;
}

/* Toggle minus icon when expanded */
.accordion-button[aria-expanded="true"] .header-icon::before {
    content: "−";
}

/* Body */
.accordion .card-body {
    background-color: #fff;
    padding: 20px;
    font-size: 15px;
    line-height: 1.6;
}

/* Links */
.accordion a {
    color: #2A6BBF;
}


/* Focus, hover, and click ring for accordion toggles */
.accordion .accordion-button:focus-visible::after,
.accordion .accordion-button:hover::after,
.accordion .accordion-button:active::after {
    content: "";
    position: absolute;
    inset: 0;
    outline: 3px solid #000000;
    outline-offset: -3px;
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   BLUE VERSION
   ============================================ */

.accordion.accordion-blue .card {
    border: 1px solid #4a5fa5 !important;
}
.accordion.accordion-blue .card-header {
    background-color: #e7eaf5;
    border: none;
}
.accordion.accordion-blue .accordion-button {
    border-bottom: 1px solid #4a5fa5;
}
.accordion.accordion-blue .header-heading-icon {
    width: 55px;
    height: 30px;
    background-image: url("/claimant/infringement/images/CCBdotGov_2025Refresh_ClaimantPages_IconChecklist.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.accordion.accordion-blue ul.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.accordion.accordion-blue ul.check-list > li {
    position: relative;
    padding: 5px 0 5px 20px;
    border-bottom: 1px dotted #2A6BBF;
}
.accordion.accordion-blue ul.check-list > li::before {
    content: '✓';
    font-weight: 1000;
    position: absolute;
    left: 0;
    top: 5px;
    color: #2A6BBF;
}

/* ============================================
   YELLOW VERSION
   ============================================ */

.accordion.accordion-yellow .card {
    border: 1px solid #8a8154 !important;
}
.accordion.accordion-yellow .card-header {
    background-color: #f1efe3;
    border: none;
}
.accordion.accordion-yellow .accordion-button {
    border-bottom: 1px solid #8a8154;
}
.accordion.accordion-yellow .header-heading-icon {
    width: 55px;
    height: 30px;
    background-image: url("/claimant/infringement/images/CCBdotGov_2025Refresh_ClaimantPages_IconTips.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.accordion.accordion-yellow ul.tips-list {
    margin: 0;
    padding-left: 15px;
    list-style: disc !important;
}
.accordion.accordion-yellow ul.tips-list > li {
    position: relative;
    padding: 4px 0 4px 5px;
    line-height: 1.6;
}

/* ============================================
   DARK BLUE VERSION
   ============================================ */

.accordion.accordion-dark-blue .card {
    border: 1px solid #2f67b2 !important;
}
.accordion.accordion-dark-blue .card-header {
    background-color: #2f67b2;
    position: relative;
    border: none;
}
.accordion.accordion-dark-blue .header-text {
    color: #fff;
}
.accordion.accordion-dark-blue .header-icon {
    background-color: #7c9fd3;
}


.claimant-page-overview {
  font-size: 1.1rem;
  padding-left: 1.2em;   
  margin-left: 0;
}
.claimant-page-overview ul,
.claimant-page-overview ol {
  padding-left: 3rem;  
}

.card-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #386ab5;
}
.info-alert .text-pane a {
  color: #276bba;
  font-weight: 600;
  text-decoration: underline !important;
}
.info-alert .text-pane a:hover {
  color: #1A4480 !important;
  text-decoration: none !important;
}
a.btn.questionnaire-btn:not(.popover-link):focus,
a.btn.questionnaire-btn:not(.popover-link):focus-visible {
  outline: 4px solid #fff !important;
  outline-offset: 2px;
  box-shadow: none !important;
}