/*
 * Brand colours for the public site, loaded after styles.css: the template's pink and red
 * accents are replaced with the TPOS blues (--clr-primary #00ace8, --clr-secondary #0071bc).
 * Colours typed in the admin (feature tiles, social icons) are toned to match here, so the
 * site stays consistent whatever is uploaded.
 */
:root {
    --brand-tint: #eef8fd;       /* light blue for section backgrounds */
    --brand-tint-strong: #dff1fb;
    --brand-muted: #98a2b3;      /* neutral grey for "not included" marks */
}

/* Sections that used a pink gradient */
.bg-pos {
    background: linear-gradient(180deg, var(--brand-tint) 0%, #f5fbfe 71%, rgba(245, 251, 254, 0.1) 95%);
}

/* Feature tiles: one calm blue tint instead of the colours set per tile in the admin */
.service-card {
    background: var(--brand-tint) !important;
    border: 1px solid var(--brand-tint-strong);
    transition: transform .15s, box-shadow .15s;
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 113, 188, .12);
}

/* Pricing cards */
.pricing-plan-section .card-header {
    background: var(--brand-tint) !important;
}
.pricing-plan-section .fa-times-circle.text-danger {
    color: var(--brand-muted) !important;
}

/* Header dropdown hover was pink */
.header-section .accordion-body li:hover {
    background: var(--brand-tint) !important;
}

/* Headline gradient ended in orange */
.title-gradient {
    background: linear-gradient(to right, #89ceff, var(--clr-primary), var(--clr-secondary));
    -webkit-background-clip: text;
}

/* Footer social icons: white glyphs on a soft circle, brand blue on hover */
.social-link li a {
    background: rgba(255, 255, 255, .12);
    transition: background .15s;
}
.social-link li a:hover {
    background: var(--clr-primary);
}
.social-link li a img {
    filter: brightness(0) invert(1);
    width: 20px;
}

/* Plan cards: old price, saving and monthly price */
.pricing-plan-section .plan-saving { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.pricing-plan-section .plan-saving del { color: var(--brand-muted); font-size: 15px; }
.pricing-plan-section .plan-saving .badge { background: var(--clr-secondary); font-weight: 600; }
.pricing-plan-section .plan-per-month { color: var(--clr-light); font-size: 14px; margin-top: 4px; }