/* =====================================================
   Help Center Styles (view_help.css)
   ===================================================== */

/* Inherit variables from base CSS (:root should be defined elsewhere) */

html, body { overflow: auto; }

.help-center-page {
    padding-top: 1rem; /* Add some top padding */
}

.help-center-page h2.page-title { /* Style the main H2 if needed */
    margin-bottom: 0.5rem;
    color: var(--dark-color);
    font-weight: 600;
}

.help-center-page .page-description {
    color: var(--muted-color);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* --- Controls: Filters & Search --- */
.help-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.filter-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-grow: 1; /* Allow filters to take more space */
}

.filter-categories .btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
    border-radius: 20px; /* Pill shape */
    background-color: #e9ecef; /* Default background */
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.filter-categories .btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    font-weight: 500;
}
.filter-categories .btn:hover:not(.active) {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.search-help {
    min-width: 250px; /* Give search some minimum width */
}

.search-help .form-control {
    border-radius: 20px; /* Pill shape */
    font-size: 0.9rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --- Accordion Customization --- */
.help-accordion-category {
    margin-bottom: 1.5rem; /* Space between categories */
}

.help-accordion-category h4 {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-light);
    display: inline-block; /* Prevent full width border */
}

#helpAccordion .accordion-item {
    background-color: #fff; /* White background for items */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.75rem; /* Space between items */
    transition: box-shadow 0.2s ease-out;
}
#helpAccordion .accordion-item:hover {
    box-shadow: var(--shadow-md);
}

#helpAccordion .accordion-header { /* Remove default accordion borders */
   border: none;
}

#helpAccordion .accordion-button {
    font-weight: 500;
    color: var(--dark-color);
    background-color: #fff; /* Button background */
    border-radius: var(--border-radius) !important; /* Override bootstrap for full radius */
    box-shadow: none !important; /* Remove default focus shadow */
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
}

#helpAccordion .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: var(--primary-light);
    border-bottom-left-radius: 0 !important; /* Flatten bottom corners when open */
    border-bottom-right-radius: 0 !important;
    box-shadow: inset 0 -1px 0 var(--border-color); /* Add subtle separator */
}
#helpAccordion .accordion-button:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

#helpAccordion .accordion-button::after { /* Style the accordion icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232ab3af'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform .2s ease-in-out;
}
#helpAccordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232ab3af'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /* transform: rotate(-180deg); // Bootstrap handles this */
}


#helpAccordion .accordion-collapse {
    border: none; /* Remove default collapse border */
}

#helpAccordion .accordion-body {
    padding: 1rem 1.25rem; /* Adjust padding */
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff; /* Ensure body background is white */
    border-bottom-left-radius: var(--border-radius); /* Match item radius */
    border-bottom-right-radius: var(--border-radius);
    border-top: 1px solid var(--border-color); /* Add separator from header */
}
#helpAccordion .accordion-body p:last-child {
    margin-bottom: 0;
}

/* --- No Results Message --- */
.no-results-message {
    padding: 2rem;
    text-align: center;
    color: var(--muted-color);
    background-color: #fff;
    border-radius: var(--border-radius);
    border: 1px dashed var(--border-color);
}

/* =====================================================
   Help Center - iPad / Tablet Styles
   Breakpoint: <= 991.98px
   ===================================================== */
   @media (max-width: 991.98px) {

    .help-center-page {
        padding-top: 0.75rem;
    }
  
    .help-center-page h2.page-title {
        font-size: 1.6rem; /* Adjust size */
        margin-bottom: 0.4rem;
    }
  
    .help-center-page .page-description {
        font-size: 0.9rem; /* Adjust size */
        margin-bottom: 1.5rem;
    }
  
    /* --- Controls: Filters & Search --- */
    .help-controls {
        gap: 0.75rem; /* Reduce gap */
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
    }
  
    .filter-categories {
        gap: 0.4rem; /* Reduce button gap */
    }
  
    .filter-categories .btn {
        font-size: 0.8rem; /* Adjust button font size */
        padding: 0.3rem 0.7rem; /* Adjust button padding */
    }
  
    .search-help {
        min-width: 200px; /* Adjust min-width */
    }
  
    .search-help .form-control {
        font-size: 0.85rem; /* Adjust search font size */
        padding: 0.4rem 0.9rem; /* Adjust search padding */
    }
  
    /* --- Accordion Customization --- */
    .help-accordion-category {
        margin-bottom: 1.25rem; /* Adjust spacing */
    }
  
    .help-accordion-category h4 {
        font-size: 1.1rem; /* Adjust category title size */
        margin-bottom: 0.8rem;
        padding-bottom: 0.4rem;
    }
  
    #helpAccordion .accordion-item {
        margin-bottom: 0.6rem; /* Adjust item spacing */
        border-radius: calc(var(--border-radius) - 2px); /* Slightly smaller radius */
    }
  
    #helpAccordion .accordion-button {
        padding: 0.9rem 1.1rem; /* Adjust button padding */
        font-size: 0.9rem; /* Adjust button font size */
    }
     /* Ensure icon scales if using font-size based SVG */
     #helpAccordion .accordion-button::after {
         background-size: 0.9rem;
     }
     #helpAccordion .accordion-button:not(.collapsed)::after {
         background-size: 0.9rem;
     }
  
  
    #helpAccordion .accordion-body {
        padding: 0.9rem 1.1rem; /* Adjust body padding */
        font-size: 0.88rem; /* Adjust body font size */
        line-height: 1.55;
        border-bottom-left-radius: calc(var(--border-radius) - 2px);
        border-bottom-right-radius: calc(var(--border-radius) - 2px);
    }
  
    /* --- No Results Message --- */
    .no-results-message {
        padding: 1.5rem; /* Adjust padding */
        font-size: 0.9rem; /* Adjust font size */
        border-radius: calc(var(--border-radius) - 2px);
    }
  }
  
  
  /* =====================================================
     Help Center - Phone Styles
     Breakpoint: <= 767.98px
     ===================================================== */
  @media (max-width: 767.98px) {
  
    .help-center-page {
        padding-top: 0.5rem;
    }
  
    .help-center-page h2.page-title {
        font-size: 1.4rem; /* Further adjust size */
    }
  
    .help-center-page .page-description {
        font-size: 0.85rem; /* Further adjust size */
        margin-bottom: 1.25rem;
    }
  
    /* --- Controls: Filters & Search --- */
    .help-controls {
        gap: 0.75rem; /* Keep gap reasonable when stacked */
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        /* flex-wrap: wrap; is already set */
    }
  
    .filter-categories {
        gap: 0.35rem; /* Further reduce button gap */
        /* Filters will take full width due to flex-grow */
        order: 1; /* Ensure filters appear first */
    }
  
    .filter-categories .btn {
        font-size: 0.75rem; /* Further adjust button font size */
        padding: 0.3rem 0.65rem; /* Further adjust button padding */
        border-radius: 15px; /* Adjust radius */
    }
  
    .search-help {
        min-width: unset; /* Remove min-width */
        width: 100%; /* Make search full width */
        order: 2; /* Ensure search appears below filters */
    }
  
    .search-help .form-control {
        font-size: 0.8rem; /* Further adjust search font size */
        padding: 0.35rem 0.8rem; /* Further adjust search padding */
        border-radius: 15px; /* Match button radius */
    }
  
    /* --- Accordion Customization --- */
    .help-accordion-category {
        margin-bottom: 1rem; /* Adjust spacing */
    }
  
    .help-accordion-category h4 {
        font-size: 1rem; /* Further adjust category title size */
        margin-bottom: 0.6rem;
        padding-bottom: 0.3rem;
    }
  
    #helpAccordion .accordion-item {
        margin-bottom: 0.5rem; /* Adjust item spacing */
        border-radius: var(--border-radius); /* Reset radius if needed */
    }
  
    #helpAccordion .accordion-button {
        padding: 0.75rem 1rem; /* Further adjust button padding */
        font-size: 0.85rem; /* Further adjust button font size */
        line-height: 1.4; /* Adjust line height */
    }
     /* Ensure icon scales */
     #helpAccordion .accordion-button::after {
         background-size: 0.85rem;
     }
     #helpAccordion .accordion-button:not(.collapsed)::after {
         background-size: 0.85rem;
     }
  
    #helpAccordion .accordion-body {
        padding: 0.75rem 1rem; /* Further adjust body padding */
        font-size: 0.85rem; /* Further adjust body font size */
        line-height: 1.5;
    }
  
    /* --- No Results Message --- */
    .no-results-message {
        padding: 1.25rem; /* Adjust padding */
        font-size: 0.85rem; /* Adjust font size */
    }
  }