/* ==========================================================================
   Market Material (industry report listing) page — theme
   Same modern shell as About-Us.php / conference.php (headernew.php,
   Bootstrap 5, the teal/orange re-skin via @import).

   This page keeps ALL of its original business logic unchanged — the
   industry lookup, the IP-based anti-scraping right-click/selection guard,
   the report search/query/pagination SQL — only the visual shell and the
   two enquiry forms (sidebar + "Order A New Study" modal) changed, and both
   forms now render from newdesign/includes/report-enquiry-form.php instead
   of being hand-duplicated per instance.

   Also dropped as confirmed-dead: a ~300-line jssor slider config for a
   slider element (#jssor_1) that doesn't exist anywhere in this page's
   markup, an unused highlightKeywords() PHP function (defined, never
   called), and a mail_submit() JS function wired to field ids
   (#custom_email etc.) that don't exist on this page either — all
   confirmed against the live markup, not guessed.
   ========================================================================== */
@import url("procurement-sourcing-intelligence.css");

.rep_content {
    padding: 30px 0 60px;
}

/* ---------- Hero banner ---------- */
.market-material-hero .report_heading,
.market-material-hero .mob_report_heading {
    background-color: #17484a;
}

/* consulting.css only sets white text on ".mob_report_heading p" — this
   page's mobile heading is an <h1> (matching the desktop one), so on
   mobile it was falling through to the default dark heading color on
   this dark-teal background, unreadable. */
.market-material-hero .report_heading h1,
.market-material-hero .mob_report_heading h1 {
    color: #fff;
}

/* ---------- Sidebar: industries menu ---------- */
.industries-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 22px 20px;
    margin-bottom: 20px;
}

.industries-card h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #17484a;
    letter-spacing: .3px;
    margin-bottom: 14px;
}

.industries-card .side-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.industries-card .side-menu .side-menu {
    padding-left: 14px;
    margin-top: 4px;
}

.industries-card .vertical-side-menu-li {
    border-bottom: 1px solid #f0f2f3;
    padding: 8px 0;
}

.industries-card .vertical-side-menu-li.active > .bb-line-vmenu .drop_down_txt-vmenu {
    color: #ec4b3b;
    font-weight: 700;
}

.industries-card .bb-line-vmenu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.industries-card .c-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.industries-card .drop_down_txt-vmenu {
    color: #17484a;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.industries-card .drop_down_txt-vmenu:hover {
    color: #ec4b3b;
}

.industries-card .menu-item {
    display: block;
    color: #46545c;
    text-decoration: none;
    font-size: 13px;
    padding: 4px 0;
}

.industries-card .menu-item:hover {
    color: #ec4b3b;
}

.count-sub {
    color: #757575;
    font-size: 12px;
}

/* ---------- "Looking for a Customized Report?" trigger + form ---------- */
.enquiry-toggle-btn {
    display: block;
    width: 100%;
    background: #17484a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background .2s ease;
}

.enquiry-toggle-btn:hover {
    background: #123638;
}

.report-enquiry-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 22px 20px;
}

.report-enquiry-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #17484a;
    text-align: center;
    margin-bottom: 4px;
}

.report-enquiry-subheading {
    text-align: center;
    font-size: 12px;
    color: #757575;
    margin-bottom: 18px;
}

/* The same form component also renders inside the "Order A New Study"
   modal, where the muted sidebar background would look wrong — flatten it
   back to plain white there. */
.modal-body .report-enquiry-card {
    background: none;
    padding: 0;
}

/* ---------- Bullet points ("Why choose us" style list) ---------- */
.industry-usp {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 20px;
    margin-top: 20px;
}

.industry-usp li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f3;
    font-size: 14px;
    color: #46545c;
}

.industry-usp li:last-child {
    border-bottom: none;
}

/* ---------- Industry description (see more/less) ---------- */
.industry-desc {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 20px 26px;
    margin-bottom: 20px;
    color: #46545c;
    line-height: 1.7;
}

/* $indDesc/$shortDesc come from the DB as raw HTML (often wrapped in its
   own <p>), and the "See more/less" toggle is wrapped in a <p> too — with
   no reset here, each carried its own browser-default ~1em top+bottom
   margin, stacking into a large gap especially above the very first line. */
.industry-desc > *:first-child {
    margin-top: 0;
}
.industry-desc > *:last-child {
    margin-bottom: 0;
}
.industry-desc p {
    margin: 0 0 10px;
}

.industry-desc .see-toggle {
    color: #17484a;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- Search box ---------- */
.report-search .input-group {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    border-radius: 10px;
    overflow: hidden;
}

.report-search .form-control {
    /* Bootstrap's .form-control inside .input-group defaults to
       flex:1 1 auto (grow to fill) — overridden here so width:80% actually
       sticks instead of being stretched to fill the remaining space. */
    flex: 0 0 80%;
    width: 80%;
    border: 1px solid #e3e9ea;
    border-right: none;
    height: 52px;
}

.report-search .btn-search {
    background: #17484a;
    color: #fff;
    border: none;
    padding: 0 22px;
}

.report-search .btn-search:hover {
    background: #123638;
}

/* ---------- Report cards ---------- */
.report-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e9ea;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 18px 20px;
    margin-bottom: 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.report-card:hover {
    border-color: #cfe3e3;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.report-card .report-title {
    color: #17484a;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
}

.report-card .report-title:hover {
    color: #ec4b3b;
}

.report-card hr {
    border-top: 1px solid #f0f2f3;
    margin: 10px 0;
}

.report-card .report-meta {
    font-size: 13px;
    color: #757575;
}

.report-card .report-meta select {
    font-size: 12px;
    padding: 3px 4px;
    border-radius: 6px;
    border: 1px solid #e3e9ea;
}

.report-card .report-price {
    font-weight: 700;
    color: #17484a;
}

/* "Order a new study" / "Didn't find what you're looking for" cards.
   height:100% only stretches this to match a taller sibling *in the same
   flex row* — when it lands alone on its own row (or next to a short
   sibling) it would otherwise collapse to its own short content height,
   looking visibly smaller than a real .report-card. min-height pins it to
   a real card's typical size either way. */
.report-card-cta {
    height: 100%;
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f8fafc;
    border: 2px dashed #cfe3e3;
    border-radius: 12px;
    padding: 30px 20px;
    margin-bottom: 20px;
}

.report-card-cta .btn-circle {
    /* newdesign/styles.css has a site-wide "button { flex: 1; ... }" rule —
       .report-card-cta is display:flex; flex-direction:column, so this
       <button> was stretching to fill the column's main axis (vertically),
       turning the circle into a tall oval. flex:none overrides that back
       to its own fixed 60x60 size. */
    flex: none !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #17484a;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.report-card-cta a,
.report-card-cta button {
    color: #17484a;
    font-weight: 600;
    background: none;
    border: none;
}

/* ---------- Pagination ----------
   Plain Bootstrap 5 .pagination/.page-item/.page-link markup, same pattern
   as infographics.php / Press-Releases.php — already themed in
   newdesign/assets/css/customstyles.css, so nothing needed here at all.
   (This page used to call function.php's displayPaginationBelow(), whose
   ul.setPaginate output needed !important-fights to restyle every time —
   see conference.css/careers.css for that saga. Switched away from it
   entirely instead, matching what those two already-optimized pages do.) */

/* ---------- "Order A New Study" modal ----------
   Same fixes as Cookie-Policy.php's request modal: css/consulting.css's
   site-wide .modal-header{color:white} makes the title invisible on this
   plain white modal, and newdesign/styles.css's site-wide "button{flex:1}"
   plus customstyles.css's circular .btn-close both need overriding. */
#exampleModalCenter .modal-header {
    color: #17484a;
    padding: 18px 24px;
    border-bottom: 1px solid #e3e9ea;
}
#exampleModalCenter .modal-header p {
    color: #17484a !important;
}
#exampleModalCenter .modal-body {
    padding: 24px;
}
#exampleModalCenter .btn-close,
#exampleModalCenter .close {
    flex: none !important;
    width: .6em;
    height: .6em;
    padding: 4px;
    margin-left: auto;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 1.4rem;
    line-height: 1;
    opacity: .7;
}

@media (max-width: 991px) {
    .industries-card,
    .report-enquiry-card,
    .industry-usp {
        margin-bottom: 20px;
    }
}