/* ==========================================================================
   Cookie Policy page — theme
   Same modern shell as Terms-Privacy-Policy.php (headernew.php, Bootstrap 5,
   the teal/orange re-skin via @import, images/about.png hero).
   ========================================================================== */
@import url("procurement-sourcing-intelligence.css");

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

/* ---------- Data request modal ----------
   css/consulting.css has a site-wide ".modal-header { color: white; }" rule
   meant for a different modal elsewhere with a dark header background —
   on this plain white modal it made the "Data Request Form" title invisible
   (white text on white), leaving only the close button visible. */
#dataRequestModal .modal-header {
    color: #17484a;
    padding: 18px 24px;
    border-bottom: 1px solid #e3e9ea;
}

#dataRequestModal .modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #17484a;
}

#dataRequestModal .modal-body {
    padding: 24px;
}

/* newdesign/assets/css/customstyles.css's site-wide .btn-close adds a
   circular border, background shape and shadow on top of Bootstrap's own
   X icon — stripped back to a plain flat X, pinned to the header's right
   edge, for this modal specifically. Also: newdesign/styles.css has a
   site-wide "button { flex: 1; ... }" rule (meant for CTA buttons)  —
   .btn-close is a <button> too, so inside .modal-header's flex row it was
   stretching to fill the remaining width instead of sitting compact at
   the right. flex:none overrides that back to its natural size. */
#dataRequestModal .btn-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;
}

/* ---------- Hero banner ---------- */
.cookie-hero .report_heading,
.cookie-hero .mob_report_heading {
    position: relative;
    background-color: #17484a;
    background-image: linear-gradient(rgba(23, 72, 74, .55), rgba(23, 72, 74, .55)), url('../images/about.png');
    background-size: cover;
    background-position: center;
    padding: 70px 30px;
}

.cookie-hero .report_heading h1,
.cookie-hero .mob_report_heading h1 {
    line-height: normal;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ---------- Policy content ---------- */
.cookie-card {
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    padding: 40px 44px;
}

.cookie-card h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #17484a;
    text-align: center;
    margin-bottom: 20px;
}

.cookie-card h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #17484a;
    margin: 28px 0 12px;
}

.cookie-card h6 {
    font-weight: 700;
    color: #17484a;
    text-decoration: underline;
    margin: 20px 0 6px;
}

.cookie-card p,
.cookie-card li {
    font-size: 16px;
    line-height: 1.8;
    color: #46545c;
}

.cookie-card li {
    margin-bottom: 8px;
}

.cookie-card a {
    color: #17484a;
    font-weight: 600;
    word-break: break-word;
}

.cookie-card .table-wrap {
    overflow-x: auto;
    margin: 16px 0 24px;
}

.cookie-card table {
    width: 100%;
}

.cookie-card th {
    background: #f8fafc;
    color: #17484a;
    text-align: center;
    white-space: nowrap;
}

.cookie-card td {
    vertical-align: top;
    font-size: 15px;
    color: #46545c;
}

.cookie-request-note {
    max-width: 960px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 14px;
    color: #757575;
}

.cookie-request-note a {
    color: #17484a;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 767px) {
    .cookie-card {
        padding: 28px 22px;
    }
}