/* BlissConnect brand palette
   ─────────────────────────────────────────────────────────────────────────
   One stylesheet, loaded last on every page, so the whole journey — home
   page, booking, self-service, legal — uses one set of colours.

   The two brand colours are sampled from images/logo_BlissConnect.png: the
   wordmark is #662c91 and the mark beside it is #03c0c1. Nothing here is a
   design choice; it is the logo, written down.

   Before this file there were three colours for the same action: purple on
   the home page (the theme redefines .btn-danger), yellow on the contact
   page (it redefines .btn-primary), and Bootstrap's default blue through
   the whole booking flow, which loads Bootstrap from the CDN and no theme
   at all. A customer crossing from the home page to /app saw the primary
   action change colour at the exact moment they were deciding to trust us
   with money.

   Two stylesheets have to be satisfied here, and they disagree about what
   "primary" means:
     • the marketing pages load css/style.css (a Bootstrap 4 theme)
     • /app, /mybookings, /admin and the legal pages load Bootstrap 5.0.1
   So the overrides below are written to hold under both. Bootstrap 5.0
   predates CSS variables for button colours — setting --bs-primary alone
   changes nothing on a button — so the .btn-primary rules are spelled out
   rather than driven from the custom properties. */

:root {
    --bc-purple: #662c91;
    --bc-purple-dark: #52246f;   /* hover/active: the same hue, 20% darker */
    --bc-purple-rgb: 102, 44, 145;
    --bc-teal: #03c0c1;
    --bc-teal-dark: #029a9b;
    --bc-teal-rgb: 3, 192, 193;
    --bc-focus-ring: rgba(102, 44, 145, .25);

    /* Bootstrap 5 reads these for .text-primary, .bg-primary, .border-primary
       and the link colour, all of which are variable-driven even in 5.0. */
    --bs-primary: #662c91;
    --bs-primary-rgb: 102, 44, 145;
}

/* ── The primary action ───────────────────────────────────────────────── */

.btn-primary {
    color: #fff;
    background-color: var(--bc-purple);
    border-color: var(--bc-purple);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--bc-purple-dark);
    border-color: var(--bc-purple-dark);
}

/* Bootstrap 5 uses .btn-check for radio-style toggles; the booking flow's
   time picker is built from them, so they need the same treatment or the
   selected time stays blue. */
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: var(--bc-purple-dark);
    border-color: var(--bc-purple-dark);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-check:focus + .btn-primary {
    box-shadow: 0 0 0 .25rem var(--bc-focus-ring);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: var(--bc-purple);
    border-color: var(--bc-purple);
    opacity: .65;
}

.btn-outline-primary {
    color: var(--bc-purple);
    border-color: var(--bc-purple);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: #fff;
    background-color: var(--bc-purple);
    border-color: var(--bc-purple);
}

.btn-outline-primary:focus,
.btn-check:focus + .btn-outline-primary {
    box-shadow: 0 0 0 .25rem var(--bc-focus-ring);
}

/* ── Links and text ───────────────────────────────────────────────────── */

a {
    color: var(--bc-purple);
}

a:hover,
a:focus {
    color: var(--bc-purple-dark);
}

.btn-link {
    color: var(--bc-purple);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--bc-purple-dark);
}

.text-primary {
    color: var(--bc-purple) !important;
}

.bg-primary {
    background-color: var(--bc-purple) !important;
}

/* ── Form controls ────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bc-purple-rgb), .5);
    box-shadow: 0 0 0 .25rem var(--bc-focus-ring);
}

.form-check-input:checked {
    background-color: var(--bc-purple);
    border-color: var(--bc-purple);
}

.form-check-input:focus {
    border-color: rgba(var(--bc-purple-rgb), .5);
    box-shadow: 0 0 0 .25rem var(--bc-focus-ring);
}

/* ── Page header, shared by /app, /mybookings and the legal pages ─────────
   /mybookings and the legal pages carried no logo at all: a customer who
   followed a link from a text message landed on an unbranded page asking
   for their mobile number, which is the shape of a phishing page. */

.bc-header {
    border-bottom: 1px solid #e9e9ee;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
}

.bc-header .bc-wordmark {
    width: 175px;
    height: 40px;
}

.bc-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.bc-header nav a {
    color: #55555f;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}

.bc-header nav a:hover,
.bc-header nav a:focus {
    color: var(--bc-purple);
    text-decoration: underline;
}

/* ── Mobile navigation on the themed marketing pages ──────────────────────
   The theme hides the wordmark outright below 480px, and above it pins the
   wordmark to the centre of a near-black bar. So on a phone the header was
   two unlabelled icons and no brand at either width.

   The bar is lightened rather than the wordmark. Our wordmark is purple and
   teal — #662c91 on #191919 is about 1.9:1, well under legible — and the
   only way to keep it on a dark bar is a mono version, which throws away
   half the mark. The near-black came from the template, not from us, so it
   is the thing that gives way. The menu icon turns purple to match. */

.rd-navbar-floated.rd-navbar-fixed .rd-navbar-panel,
.rd-navbar-top-panel.rd-navbar-fixed .rd-navbar-panel,
.rd-navbar-floated.rd-navbar-dark.rd-navbar-fixed .rd-navbar-panel,
.rd-navbar-top-panel.rd-navbar-dark.rd-navbar-fixed .rd-navbar-panel {
    align-items: center;
    background: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .18);
    display: flex;
}

.rd-navbar-floated.rd-navbar-fixed .rd-navbar-brand,
.rd-navbar-top-panel.rd-navbar-fixed .rd-navbar-brand {
    display: block;
    left: auto;
    margin: 0 0 0 4px;
    position: static;
    top: auto;
    transform: none;
    width: auto;
}

.rd-navbar-floated.rd-navbar-fixed .rd-navbar-brand img,
.rd-navbar-top-panel.rd-navbar-fixed .rd-navbar-brand img {
    display: block;
    height: auto;
    width: 150px;
}

/* The three bars of the menu icon are a span and its two pseudo-elements,
   all white so they would read on the old dark bar. */
.rd-navbar-floated.rd-navbar-fixed .rd-navbar-toggle span,
.rd-navbar-floated.rd-navbar-fixed .rd-navbar-toggle span:before,
.rd-navbar-floated.rd-navbar-fixed .rd-navbar-toggle span:after,
.rd-navbar-top-panel.rd-navbar-fixed .rd-navbar-toggle span,
.rd-navbar-top-panel.rd-navbar-fixed .rd-navbar-toggle span:before,
.rd-navbar-top-panel.rd-navbar-fixed .rd-navbar-toggle span:after {
    background-color: var(--bc-purple);
}

/* The slide-out menu behind that bar is the same near-black, with the same
   purple wordmark sitting on it. Lightening only the bar would have left the
   two next to each other and visibly disagreeing, so the drawer follows. */

.rd-navbar-floated.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav-wrap,
.rd-navbar-top-panel.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav-wrap {
    background: #fff;
    color: #262627;
}

.rd-navbar-floated.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav li a,
.rd-navbar-top-panel.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav li a {
    color: #262627;
}

.rd-navbar-floated.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav li:hover > a,
.rd-navbar-top-panel.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav li:hover > a,
.rd-navbar-floated.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav li.active > a,
.rd-navbar-top-panel.rd-navbar-dark.rd-navbar-fixed .rd-navbar-nav li.active > a {
    background: #f3eef7;
    color: var(--bc-purple);
}

/* ── The offer, above the fold ────────────────────────────────────────────
   The hero rotates five slides, so whichever one a visitor happens to land
   on has to say what is being sold. This line sits above the button on all
   five. */

.bc-offer {
    background: rgba(255, 255, 255, .88);
    border-radius: 2rem;
    color: #262627;
    display: inline-block;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 34rem;
    padding: .55rem 1.25rem;
}

/* The five hero photographs run from near-white to mid-tone, so the offer
   carries its own ground rather than betting on any one of them. */
.bc-offer .bc-price {
    color: var(--bc-purple);
    font-weight: 700;
}

/* ── The animated theme buttons ───────────────────────────────────────────
   The hero button on the home page is .btn-danger.btn-anis-effect, and the
   theme gives that combination its own colours: #674ea7, which is a purple
   but not the logo's, sliding to #45818e on hover, which is a slate-teal
   but not the logo's either. So the single most-clicked button on the site
   was a fourth colour, near enough to the brand to look like a mistake
   rather than a choice. These selectors carry two classes, so the plain
   .btn-primary rules above cannot reach them. */

.btn-anis-effect.btn-danger,
.btn-anis-effect.btn-primary {
    background-color: var(--bc-purple);
    color: #fff;
}

.btn-anis-effect.btn-danger:before,
.btn-anis-effect.btn-danger:after,
.btn-anis-effect.btn-primary:before,
.btn-anis-effect.btn-primary:after {
    background: var(--bc-teal);
}

.btn-anis-effect.btn-danger:hover,
.btn-anis-effect.btn-primary:hover {
    background: var(--bc-teal);
    border-color: var(--bc-teal);
    color: #16333a;
}