/* ============================================================
   Custom app styles (kept out of the theme's vendor CSS files).
   ============================================================ */

#box_wrapper {
    max-width: none;
}

/* Mobile-only auth bar (login/register). Desktop uses .header-includ, which the theme hides < 1200px. */
.mobile-auth-bar { display: block; background: #f7f7f7; border-bottom: 1px solid #e8e8e8; }
@media (min-width: 1201px) { .mobile-auth-bar { display: none; } }

.mobile-auth-inner { display: flex; justify-content: center; align-items: center; gap: 30px; padding: 9px 15px; }

.mobile-auth-bar a,
.mobile-auth-bar button {
    display: inline-flex; align-items: center;
    background: none; border: 0; padding: 0;
    color: #333; font-size: 14px; line-height: 1; cursor: pointer;
}

.mobile-auth-bar i { margin-right: 6px; font-size: 15px; }

.top-nav .sf-menu > li.active > a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
}

@media (min-width: 1200px) {
    .top-nav .sf-menu > li > a {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    /* The theme shrinks the header once the page is scrolled. Kept proportional to the new
       height, so it still visibly gives way rather than sitting a pixel shorter. */
    .affix .top-nav .sf-menu > li > a {
        padding-top: 22px;
        padding-bottom: 22px;
    }
}

/* ============================================================
   The categories on the home page.

   Their names were written as h5 on a page whose biggest heading was an h3 and which had no
   h1 at all. They are now h2 under the page's own h1, which is what they were always saying:
   each names one of the things this practice does.

   The theme draws an h2 at 50px, so the size and the line they were read at are written back
   here. Nothing else is: the margins come from the theme's own h2, which sets the same pair
   its h5 did, and the first-child rule that flattens the top margin names every heading level
   alike — so both still land where they did.
   ============================================================ */

.hello .hello-content h2 {
    font-size: 24px;
    line-height: 30px;
}

/* The step the theme takes every heading down at this width. */
@media (max-width: 575px) {
    .hello .hello-content h2 { font-size: 1.4rem; }
}


/* ============================================================
   The weight everything on these pages is written at.

   The theme sets the whole document to 300, and every piece of wording that does not ask for
   a weight of its own inherits it — so the reading text on these pages came out in Poppins
   Light, where the design draws it Regular. Asked for once here, at the page, rather than
   line by line in every rule below: anything that does want to stand out — a heading, a
   label, a button — says so for itself and is left alone.
   ============================================================ */

.programs-page,
.subscriptions,
.course-preview,
.course-listen {
    font-weight: 400;
}

/* The theme adds a caret (::after) to every [data-toggle="collapse"]; hide it so it
   doesn't overlap the link text in the mobile auth bar. */
.mobile-auth-bar [data-toggle="collapse"]::after { content: none !important; display: none !important; }

.mobile-auth-panel { padding: 14px 18px 18px; background: #fff; border-bottom: 1px solid #e8e8e8; }
/* No slide animation — open/close instantly, even when the accordion swaps one panel for the other. */
.mobile-auth-panel.collapsing { transition: none !important; }
.mobile-auth-panel .dropdown-top { margin-bottom: 10px; font-weight: 600; }
.mobile-auth-panel .form-group { margin-bottom: 10px; }
.mobile-auth-panel .btn { margin-top: 4px; }


/* ============================================================
   Programs listing (/programe).

   Written apart from the theme's shop.css: that file styles .products / .product,
   which this page no longer uses, so nothing here can be reached by it.
   ============================================================ */

.programs-page {
    background: #fdfbfd;
    padding: 55px 0 90px;
}

/* Bootstrap's own padding utilities stop at px-5 (48px), and these two pages want to sit
   further in from the edge than that once there is room for it. */
@media (min-width: 992px) {
    .programs-page > .container,
    .course-preview > .container {
        padding-left: 90px;
        padding-right: 90px;
    }
}


.programs-page h1.programs-page__title {
    margin: 0 0 22px;
    font-family: "Vidaloka", serif;
    font-size: 57px;
    line-height: 1.05;
    color: #151515;
    text-transform: capitalize;
    text-align: left;
}

/* --- listing tabs ------------------------------------------ */

.programs__tabs {
    display: inline-flex;
    gap: 13px;
    margin-bottom: 22px;
    padding: 4px;
    background: #f3ebf4;
    border-radius: 20px;
    max-width: 100%;
}

.programs .programs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 8px 16px;
    background: none;
    border: 0;
    border-radius: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #757575;
    cursor: pointer;
}

.programs .programs__tab:hover { color: #511791; }

.programs .programs__tab--on,
.programs .programs__tab--on:hover {
    background: rgba(168, 127, 209, .25);
    font-weight: 500;
    color: #511791;
}

/* --- search ------------------------------------------------ */

/* Laid out with Bootstrap's flex utilities; only the widths are ours. */
.programs__toolbar { gap: 16px; }

/* Takes the whole row off a listing that is not narrowed by hand. !important and named twice
   because the row carries Bootstrap's own d-flex, which is display:flex !important — an
   important declaration is only answered by another one, and then by the more specific of the
   two. */
.programs .programs__toolbar--off { display: none !important; }

/* Takes the whole of whatever the filters leave, so the row reaches both edges of the page
   whatever it is read on. A fixed width here would add up to more than the container holds
   and drop the filters onto a second row. */
.programs__search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.programs__search .fa {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #757575;
    pointer-events: none;
}

.programs .programs__search-input {
    display: block;
    width: 100%;
    height: 43px;
    margin: 0;
    padding: 0 20px 0 46px;
    background: #fff;
    border: 1px solid #dbdfe9;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .03);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    /* The theme spaces every input's letters 4px apart, which reads as a heading rather than
       as something typed into. The placeholder takes it from the field, so both go together. */
    letter-spacing: normal;
    color: #323232;
}

.programs .programs__search-input::placeholder { color: #757575; opacity: 1; }

.programs .programs__search-input:focus {
    outline: none;
    border-color: #a87fd1;
    box-shadow: 0 4px 10px rgba(108, 50, 173, .12);
}

/* --- filters ----------------------------------------------- */

.programs__filters {
    flex: 0 0 auto;
    gap: 16px;
}

/* The theme puts 36px to the right of every .dropdown on the site, for the menus in its own
   header. Here that stands between the two filters on top of the row's own gap, and pushes the
   second one in from the right edge — the spacing between these boxes is the row's to give. */
.programs__filter {
    width: 181px;
    margin-right: 0;
}

/* The button that opens the list, drawn as the box the design asks for. */
.programs .programs__filter-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 43px;
    padding: 0 18px 0 21px;
    background: #fff;
    border: 1px solid #dbdfe9;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .03);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: normal;
    text-align: left;
    color: #757575;
    cursor: pointer;
}

.programs .programs__filter-input:hover { border-color: #c9b2e0; }

.programs .programs__filter-input:focus,
.programs .programs__filter-input[aria-expanded="true"] {
    outline: none;
    border-color: #a87fd1;
    box-shadow: 0 4px 10px rgba(108, 50, 173, .12);
}

.programs .programs__filter-arrow {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    transition: transform .2s ease;
}

.programs .programs__filter-input[aria-expanded="true"] .programs__filter-arrow {
    transform: rotate(180deg);
}

/* The list itself, which is the whole reason the native select was given up: an operating
   system draws its own, and no stylesheet can round the corners of that one. */
.programs .programs__filter-menu {
    /* The theme pins every dropdown on the site, with !important, for the wide menu in its own
       header: 52px right and 24px down on a broad screen, and centred on itself by a transform
       under 1200px. The button above is therefore told not to let Popper place this one, and
       the whole position is written out here — hung under the button, aligned with its left
       edge, with no transform left to be overridden. */
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid #dbdfe9;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(108, 50, 173, .12);
}

.programs .programs__filter-option {
    padding: 9px 15px;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: normal;
    color: #323232;
    cursor: pointer;
}

.programs .programs__filter-option:hover,
.programs .programs__filter-option:focus {
    outline: none;
    background: rgba(168, 127, 209, .18);
    color: #511791;
}

.programs .programs__filter-option--on {
    background: rgba(168, 127, 209, .25);
    color: #511791;
    font-weight: 500;
}

/* --- grid -------------------------------------------------- */

/* Bootstrap's row and columns do the laying out. Every cell leaves the same room at the top
   for the badge that hangs over the subscription card, so all the cards in a row start and
   finish level with each other whether or not they carry one. */
.programs__cell { padding-top: 11px; }

.programs__cell > * { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .programs .course-card { transition: none; }
}

/* --- course card ------------------------------------------- */

.programs .course-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #edecee;
    border-radius: 16px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.programs .course-card:hover,
.programs .course-card:focus {
    text-decoration: none;
    border-color: #dcd0e8;
    box-shadow: 0 8px 20px rgba(108, 50, 173, .13);
    transform: translateY(-2px);
}

.course-card__image {
    display: block;
    flex: 0 0 auto;
    height: 230px;
    overflow: hidden;
}

.course-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card__body {
    display: block;
    flex: 1 1 auto;
    padding: 14px 20px 18px;
}

/* --- the kind of thing a course is (listing card and preview page alike) --- */

.course-type {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Whatever the type is called, when it is not one of the two named below. */
    color: #6c32ad;
}

.course-type--meditation { color: #f1416c; }
.course-type--program { color: #1b7d0c; }

.course-type__spark { font-weight: 400; }

.course-card__type {
    margin-bottom: 12px;
    font-size: 12px;
}

.programs .course-card__name {
    margin: 0 0 6px;
    font-family: "Vidaloka", serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    color: #000;
    text-transform: none;
}

.course-card__summary {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #545454;
}

.course-card__foot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding: 14px 20px 16px;
}

/* The rule above the price, faded out at both ends the way the design draws it. */
.course-card__foot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(168, 127, 209, 0),
        rgba(168, 127, 209, .6),
        rgba(168, 127, 209, 0));
}

.course-card__sessions {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #545454;
}

.course-card__price {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #000;
}

/* Stands where the price would be on a course that costs nothing. */
.course-card__free {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #1b7d0c;
}

/* Stands where the price would be on a course the person already holds. */
.course-card__owned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #6f42c1;
}

.course-card__owned .bi { font-size: 13px; line-height: 1; }

/* --- subscription card ------------------------------------- */

.subscription-card {
    position: relative;
    display: flex;
}

/* Hangs above the card, in the room the cell leaves for it. */
.subscription-card__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    min-width: 110px;
    height: 22px;
    padding: 0 14px;
    background: #6934a2;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(105, 52, 162, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

/* Running, the badge says so itself rather than a second mark being hung under it — and says
   it in the same colours it wears while the subscription is still being offered. Only the
   wording and the tick change, so the badge stays one thing that reads two ways rather than
   two badges that happen to sit in the same place.

   All this adds is room for the tick beside the wording. */
.subscription-card__badge--on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.subscription-card__badge--on .bi {
    font-size: 13px;
    line-height: 1;
}

/* Laid out like a course card rather than on its own terms, so that the two line up beside
   each other: the picture flush to the top edge, the wording under it, the offer at the foot.
   Nothing is spaced apart — spreading the parts would move the wording by however tall the
   tallest card in the row happened to be, and the tags would stop lining up. */
.subscription-card__inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    background: rgba(243, 235, 244, .2);
    border: 1px solid #a87fd1;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(108, 50, 173, .25);
}

/* The same height the course cards give their photograph, so everything below starts level. */
.subscription-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
    height: 230px;
}

/* The logo is a line drawing, so it is fitted whole rather than cropped to the box. */
.subscription-card__image img {
    max-width: 178px;
    max-height: 178px;
    object-fit: contain;
}

/* Padded the same way a course card pads its body, so the tag on this card starts on the very
   line the tags on those do. Grows, so that the offer below is held at the foot. */
.subscription-card__words {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px 8px;
}

.subscription-card__kinds {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #6934a2;
}

/* The theme asks every heading for 500, and Vidaloka is only drawn at 400 — asking for a
   weight it has not got leaves the browser to thicken the letters itself, which is not the
   same shape. Asked for what it has, it is drawn rather than faked. */
.programs .subscription-card__name {
    margin: 0;
    font-family: "Vidaloka", serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.3;
    color: #000;
    text-align: left;
    text-transform: none;
}

/* A sentence under the heading, saying what the subscription gives. */
.subscription-card__subtitle {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #545454;
}

.subscription-card__offer {
    flex: 0 0 auto;
    padding: 8px 20px 20px;
}

/* Stands where the price would be, for somebody the subscription already covers. Worded the
   same way the subscriptions page words it, so the two pages say one thing and not two. */
.subscription-card__state { margin-bottom: 12px; }

.subscription-card__renews {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #545454;
}

/* The note and the price share a line, the price pushed to the far end. */
.subscription-card__terms {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 11px;
    margin-bottom: 12px;
}

.subscription-card__note {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #545454;
}

.subscription-card__price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.subscription-card__amount {
    font-family: "Vidaloka", serif;
    font-size: 20px;
    color: #000;
}

.subscription-card__period {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    color: #545454;
}

.programs .subscription-card__button {
    display: block;
    width: 100%;
    height: 40px;
    background: #6c32ad;
    border: 1px solid #6c32ad;
    border-radius: 20px;
    box-shadow: 0 4px 2px rgba(168, 127, 209, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: background .2s ease, border-color .2s ease;
}

.programs .subscription-card__button:hover,
.programs .subscription-card__button:focus {
    background: #59298f;
    border-color: #59298f;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Course preview (/previzualizare_curs/{course}).
   ============================================================ */

.course-preview {
    background: #fdfbfd;
    padding: 55px 0 90px;
}

/* Bootstrap's row and columns lay this out. The column is left to stretch to the full height
   of the row, which is what gives the card beside it room to stick. */
.course-preview__main { min-width: 0; }

/* --- the heading side -------------------------------------- */

.course-preview__type {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 18px;
}

.course-preview h1.course-preview__title {
    margin: 0 0 16px;
    font-family: "Vidaloka", serif;
    font-size: 40px;
    line-height: 1.15;
    color: #000;
    text-align: left;
    text-transform: none;
}

.course-preview__stars {
    display: flex;
    gap: 7px;
    margin-bottom: 40px;
    font-size: 16px;
    color: #6c32ad;
}

/* The radio buttons that decide which panel shows. Off the screen but still reachable by
   keyboard, so the headings work as a pair of tabs without any script. */
.course-preview__switch {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.course-preview__sections {
    display: flex;
    gap: 27px;
    align-items: center;
}

.course-preview__section {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #757575;
    cursor: pointer;
}

/* The heading whose panel is showing: darker, and carrying the short purple stretch. The
   underline rides on the heading itself, so it is always exactly as wide as the word. */
#course-preview-descriere:checked ~ .course-preview__sections label[for="course-preview-descriere"],
#course-preview-structura:checked ~ .course-preview__sections label[for="course-preview-structura"],
#course-preview-reviews:checked ~ .course-preview__sections label[for="course-preview-reviews"] {
    border-bottom-color: #6c32ad;
    color: #000;
}

/* Where there is only the one heading and no switch behind it, the page says outright which
   is showing instead of leaving it to a checked radio to say. */
.course-preview__section--on {
    border-bottom-color: #a87fd1;
    color: #000;
}

/* Keyboard focus has to be visible on the heading, since the control itself is off screen. */
.course-preview__switch:focus-visible ~ .course-preview__sections label[for="course-preview-descriere"],
.course-preview__switch:focus-visible ~ .course-preview__sections label[for="course-preview-reviews"] {
    outline: 2px solid #a87fd1;
    outline-offset: 4px;
}

/* The rule under those headings, with the mark at its far end. */
.course-preview__rule {
    position: relative;
    height: 24px;
    margin-bottom: 8px;
}

.course-preview__rule::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #edecee;
}

.course-preview__panel { display: none; }

#course-preview-descriere:checked ~ .course-preview__panel--descriere,
#course-preview-structura:checked ~ .course-preview__panel--structura,
#course-preview-reviews:checked ~ .course-preview__panel--reviews { display: block; }

/* --- what a course is made of ------------------------------ */

.course-structure__count {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: #545454;
}

.course-structure {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The length is pushed to the far end by the margin on it, so the name may run as long as it
   likes and the two never meet. */
.course-structure__part {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 2px solid #edecee;
    border-radius: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #545454;
}

.course-structure__spark {
    flex: 0 0 auto;
    color: #6934a2;
}

.course-structure__name { min-width: 0; }

.course-structure__length {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 400;
    color: #757575;
    white-space: nowrap;
}

.course-structure__lock {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    color: #757575;
}

/* --- a part that can be opened ----------------------------- */

.course-structure__part--open { transition: border-color .2s ease, background .2s ease; }

.course-structure__part--open:hover,
.course-structure__part--open:focus-within {
    background: rgba(168, 127, 209, .08);
    border-color: #dcd0e8;
}

.course-structure__part--open:hover .course-structure__lock,
.course-structure__part--open:focus-within .course-structure__lock { color: #6934a2; }

/* Covers the whole row, so the row itself is the way in and nothing inside it has to be
   wrapped in a link. */
.course-structure__way-in {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 14px;
}

.course-structure__way-in:focus-visible {
    outline: 2px solid #a87fd1;
    outline-offset: 2px;
}

.course-preview__spark {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    background: #fdfbfd;
    padding-left: 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: #edecee;
}

/* --- the description, which arrives as stored HTML --------- */

.course-preview__body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #545454;
}

.course-preview__body p { margin: 0 0 16px; }
.course-preview__body p:last-child { margin-bottom: 0; }

.course-preview__body h1,
.course-preview__body h2,
.course-preview__body h3,
.course-preview__body h4 {
    margin: 32px 0 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #545454;
    text-transform: none;
}

.course-preview__body ol,
.course-preview__body ul { margin: 0 0 16px; padding-left: 24px; }

.course-preview__body li { margin-bottom: 8px; }

.course-preview__body img { max-width: 100%; height: auto; }

.course-preview__body a { color: #6c32ad; }

/* --- what people said about it ----------------------------- */

.course-preview__panel--reviews > * + * { margin-top: 24px; }

.review-card {
    padding: 20px 24px;
    border: 1px solid #d9c7e9;
    border-radius: 16px;
}

.review-card__stars {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 10px;
    color: #6c32ad;
}

.review-card__words {
    margin: 0 0 12px;
    font-family: "Vidaloka", serif;
    font-size: 20px;
    line-height: 1.4;
    color: #000;
}

.review-card__who {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #757575;
}

.course-preview__no-reviews {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #757575;
}

/* --- the card beside it ------------------------------------ */

/* --- the card beside a course (preview page and listening page) --- */

.course-side-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #78829d;
    border-radius: 16px;
    box-shadow: 0 4px 6px #edecee;
    overflow: hidden;
}

/* On a course somebody already holds, the outline is the brand purple rather than grey. */
.course-side-card--held { border-color: #6c32ad; }

.course-side-card__image { height: 230px; overflow: hidden; }

.course-side-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-side-card__body { padding: 16px 20px 12px; }

h2.course-side-card__name {
    margin: 0 0 4px;
    font-family: "Vidaloka", serif;
    font-size: 20px;
    line-height: 1.3;
    color: #000;
    text-align: left;
    text-transform: none;
}

.course-side-card__meta {
    gap: 11px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #545454;
}

/* What the card holds, at the left of that line. Set a step above the rest of the line and a
   little heavier, so it carries as the first thing read about the course. */
.course-side-card__sessions {
    font-size: 14px;
    font-weight: 500;
}

/* Kept at the size the line was drawn at, so it stays the quieter of the two things on it. */
.course-side-card__annotation { font-size: 12px; }

/* The line the value drops to when a note has taken the right of the one above. It keeps the
   same edge as that note, under it. Its own line-height is held low so that the value written
   on it, which is the taller of the two, is what decides how much room the line takes. */
.course-side-card__figure-line {
    margin-top: 10px;
    line-height: 1.1;
    text-align: right;
}

.course-side-card__until {
    margin: 8px 0 0;
    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-size: 12px;
    color: #757575;
}

/* The theme clips every section it lays out, and an ancestor that clips is enough to stop a
   sticky element from ever sticking. Written through the wrapper's id so it outweighs the
   theme's own rule without needing !important. */
#box_wrapper > section.course-preview { overflow: visible; }

@media (min-width: 992px) {
    /* Clear of the header, which the theme fixes to the top of the window once the page is
       scrolled. Below that height it must sit under the header, not over it — Bootstrap's
       .sticky-top would otherwise put it above at z-index 1020. */
    .course-preview__card.sticky-top {
        top: 100px;
        z-index: 1;
    }
}

/* Above that width the card is beside the description; below it, it is stacked on top and
   there is nothing for it to stick to. */
@media (max-width: 991.98px) {
    .course-preview__card.sticky-top { position: static; }
}

/* On the preview page that value is the price. The line box is held close to the glyph, so the
   line it has to itself is no taller than the price written on it. */
.course-preview__card .course-side-card__figure {
    font-family: "Vidaloka", serif;
    font-size: 24px;
    line-height: 1.1;
    color: #000;
    white-space: nowrap;
}

.course-preview__action { padding: 12px 20px 20px; }

/* The subscription card wears this same button, and the theme styles bare links, so the pill
   has to be named from either page for it to keep its shape on both. */
.course-preview .course-preview__button,
.subscriptions .course-preview__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    background: #6c32ad;
    border: 1px solid #6c32ad;
    border-radius: 20px;
    box-shadow: 0 4px 4px rgba(168, 127, 209, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

.course-preview .course-preview__button:hover,
.course-preview .course-preview__button:focus,
.subscriptions .course-preview__button:hover,
.subscriptions .course-preview__button:focus {
    background: #59298f;
    border-color: #59298f;
    color: #fff;
    text-decoration: none;
}

/* --- the payment details, opened from that button ---------- */

/* Open, the pill and the details under it are one enclosed piece rather than two stacked
   shapes: the box is drawn here, on what holds them both, and the pill becomes its lid.

   The edge is a spread shadow and not a border because a border would take up room — it would
   push the pill in by its own width the moment the panel opened, and the pill would flinch.

   :has() is what reads the open state; where it is not supported the pill and the details
   simply stay two separate shapes, which is plainer but not broken. */
.course-preview__pay:has(.collapse.show),
.course-preview__pay:has(.collapsing) {
    background: #f3ebf4;
    border-radius: 20px;
    box-shadow: 0 0 0 1px #6c32ad;
}

/* The pill keeps both of its rounded ends, so the box shows through the two corners it curves
   away — those two slivers of colour are what tie the pill to the panel below it. */
.course-preview__pay .course-preview__button { position: relative; }

/* The theme hangs an arrow of its own on anything carrying data-toggle, and takes the room for
   it out of the right side. The pill brings its own arrow and centres its wording across its
   whole width, so both the arrow and the room set aside for it have to go. */
.course-preview__pay [data-toggle="collapse"] { padding-right: 0; }

.course-preview__pay [data-toggle="collapse"]:after { content: none; }

/* Sat against the far end of the pill, with the wording left centred on the whole button. It
   is taken out of the flex line to get there, so the pill's own centring still holds. */
.course-preview__pay .course-preview__chevron {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 39px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    transition: transform .2s ease;
}

/* Bootstrap keeps aria-expanded on the trigger in step with the panel, so the arrow can
   follow it without anything else being told about the change. */
.course-preview__pay [aria-expanded="true"] .course-preview__chevron {
    transform: rotate(180deg);
}

/* Nothing of its own to draw — it lies on the box above, and the hair's breadth the design
   leaves between it and the pill is that same colour from either side. The top padding
   carries that gap as well as its own. */
.course-preview__pay-panel {
    padding: 20px 10px 10px;
}

.purchase-info__intro {
    margin: 0 0 10px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #151515;
}

/* Left to run on and wrap rather than broken in two on purpose: a short number stays beside
   the name of the way in, and an address too long for what is left drops to its own line
   whole, instead of breaking in the middle of itself. */
.purchase-info__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0 0 6px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #151515;
}

.purchase-info__line:last-child { margin-bottom: 0; }


/* line-height 1 holds the box to the glyph itself, so the row's own centring has something
   the size of the mark to centre rather than a taller line box around it. */
/* The mark and the name of the way in, which stay together whatever happens to what follows. */
.purchase-info__channel {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Sized off the line it sits on rather than in pixels of its own, so it stays in proportion
   to the wording beside it — this panel is set smaller inside the subscription card than it is
   on a course page, and a fixed mark would have looked oversized in one of the two. */
.purchase-info__line .bi {
    flex: 0 0 auto;
    font-size: 1em;
    line-height: 1;
    color: #59298f;
}

.purchase-info__label {
    font-weight: 500;
    color: #59298f;
}

.purchase-info__line a { color: #151515; }

/* The three pages built as writing beside a card share one measure.

   The writing is drawn narrower than the eight columns of twelve Bootstrap hands it, and the
   row is told to push its two columns apart, so what the writing gives up falls between them
   rather than off the right-hand end of the row. The card keeps its four columns: it is drawn
   to a size, and taking room from it would change the card rather than the space beside it.

   Written through each row so that it outweighs Bootstrap's own .col-lg-8 whichever order the
   two stylesheets happen to be loaded in. */
@media (min-width: 992px) {
    .course-preview__layout,
    .course-listen__layout,
    .subscriptions__head { justify-content: space-between; }

    .course-preview__layout > .course-preview__main,
    .course-listen__layout > .course-listen__main,
    .subscriptions__head > .subscriptions__words {
        flex: 0 0 auto;
        width: 60%;
        max-width: 60%;
    }
}

/* Read on a narrow screen, the card belongs under the heading rather than above it: what the
   page is about should be the first thing on it, and the card is what to do about it.

   The card and the writing are separate columns, so the card can only be put before or after
   the whole of the writing — not into the middle of it. `display: contents` drops the column's
   own box and lets its children stand as though they were the row's, which is what makes a
   place in the middle of them reachable at all.

   With that box gone its padding goes too, so the row gives up its negative margins and the
   card its own padding, and everything lines up with the page again. */
@media (max-width: 991px) {
    .course-preview__layout,
    .course-listen__layout {
        display: flex;
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }

    .course-preview__main,
    .course-listen__main { display: contents; }

    .course-preview__aside,
    .course-listen__aside {
        order: 2;
        padding-left: 0;
        padding-right: 0;
    }

    /* Everything the writing column holds comes after the card unless it is named below. */
    .course-preview__main > *,
    .course-listen__main > * { order: 3; }

    .course-preview__main > .course-preview__type,
    .course-preview__main > .course-preview__title,
    .course-preview__main > .course-preview__stars,
    .course-listen__main > .course-listen__eyebrow,
    .course-listen__main > .course-listen__title,
    .course-listen__main > .course-listen__meta { order: 1; }
}

@media (max-width: 767px) {
    .course-preview { padding: 35px 0 60px; }
    .course-preview h1.course-preview__title { font-size: 30px; }
}


/* ============================================================
   Listening to a course (/curs/{course}[/{content}]).
   ============================================================ */

.course-listen {
    background: #fdfbfd;
    padding: 55px 0 90px;
}

/* Same reason as the preview page: the theme clips its sections, and a clipping ancestor
   stops the card beside this one from ever sticking. */
#box_wrapper > section.course-listen { overflow: visible; }

@media (min-width: 992px) {
    .course-listen > .container { padding-left: 90px; padding-right: 90px; }

    /* Clear of the header the theme fixes to the top on scroll, and under it rather than
       over it — Bootstrap's .sticky-top would otherwise sit at z-index 1020. */
    .course-listen__card.sticky-top { top: 100px; z-index: 1; }
}

@media (max-width: 991.98px) {
    .course-listen__card.sticky-top { position: static; }
}

.course-listen__main { min-width: 0; }

/* --- the heading side -------------------------------------- */

.course-listen__eyebrow {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 18px;
}

/* The course a session belongs to, said after its kind and in a quieter colour, and the way
   back to it. The margin rather than a space in the markup, which Blade collapses away
   between the two. */
.course-listen .course-listen__of {
    margin-left: .35em;
    font-weight: 400;
    color: #757575;
    text-decoration: none;
}

.course-listen .course-listen__of:hover,
.course-listen .course-listen__of:focus {
    color: #6934a2;
    text-decoration: underline;
}

.course-listen h1.course-listen__title {
    margin: 0 0 16px;
    font-family: "Vidaloka", serif;
    font-size: 40px;
    line-height: 1.15;
    color: #000;
    text-align: left;
    text-transform: none;
}

.course-listen__meta {
    gap: 12px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #545454;
}

.course-listen__by { gap: 32px; }

.course-listen__author { gap: 8px; }

.course-listen__author .flaticon-profile { font-size: 12px; }

.course-listen__rule {
    position: relative;
    height: 24px;
    margin: 24px 0 8px;
}

.course-listen__rule::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #edecee;
}

.course-listen__spark {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    background: #fdfbfd;
    padding-left: 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: #edecee;
}

/* --- the session itself, as stored HTML -------------------- */

.course-listen__body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #545454;
}

.course-listen__body p { margin: 0 0 16px; }
.course-listen__body p:last-child { margin-bottom: 0; }

.course-listen__body h1,
.course-listen__body h2,
.course-listen__body h3,
.course-listen__body h4 {
    margin: 32px 0 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #545454;
    text-transform: none;
}

.course-listen__body ol,
.course-listen__body ul { margin: 0 0 16px; padding-left: 24px; }

.course-listen__body li { margin-bottom: 8px; }

.course-listen__body img { max-width: 100%; height: auto; }

.course-listen__body a { color: #6c32ad; }

/* --- moving from one session to the next ------------------- */

.course-listen__walk {
    gap: 16px;
    margin-top: 40px;
}

.course-listen .course-listen__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    background: #f3ebf4;
    border-radius: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #6c32ad;
}

.course-listen .course-listen__step--on {
    background: #6c32ad;
    box-shadow: 0 4px 2px rgba(168, 127, 209, .25);
    color: #fff;
}

.course-listen .course-listen__step:hover,
.course-listen .course-listen__step:focus { text-decoration: none; }

.course-listen .course-listen__step--back:hover { background: #e8dcee; color: #59298f; }
.course-listen .course-listen__step--on:hover { background: #59298f; color: #fff; }

/* On the listening page that right-hand value is how long access runs. */
.course-listen__card .course-side-card__figure {
    font-weight: 600;
    white-space: nowrap;
}

/* --- the list of sessions in that card --------------------- */

.course-listen__sessions-list {
    margin: 0;
    padding: 0 12px 12px;
    list-style: none;
    counter-reset: none;
}

.course-listen__sessions-list li + li { margin-top: 8px; }

.course-listen .course-listen__session {
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #edecee;
    border-radius: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    color: #545454;
}

.course-listen .course-listen__session:hover,
.course-listen .course-listen__session:focus {
    border-color: #d9c7e9;
    text-decoration: none;
    color: #59298f;
}

/* The one being listened to. */
.course-listen .course-listen__session--on {
    border-color: #6c32ad;
    box-shadow: 0 2px 6px rgba(108, 50, 173, .15);
    font-weight: 600;
    color: #000;
}

/* The mark standing where a number used to, drawn as lightly as the one on the type line. */
.course-listen__session-no {
    flex: 0 0 auto;
    font-weight: 400;
    color: #757575;
}

.course-listen__session--on .course-listen__session-no { color: #6c32ad; }

.course-listen__session-name { flex: 1 1 auto; min-width: 0; }

.course-listen__session-play {
    flex: 0 0 auto;
    font-size: 10px;
    color: #757575;
}

.course-listen__session--on .course-listen__session-play { color: #6c32ad; }

@media (max-width: 767px) {
    .course-listen { padding: 35px 0 60px; }
    .course-listen h1.course-listen__title { font-size: 30px; }
    .course-listen__by { gap: 16px; }

    /* On a narrow screen the two of them are down to the arrow alone. The wording is taken out
       of sight rather than out of the page, so a screen reader still says which way each one
       goes — an arrow on its own would be read as nothing at all. */
    .course-listen__step-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Round again once there is nothing in it but the arrow: the width the wording asked for
       is gone, and the side padding drawn for it would leave the mark off-centre. */
    .course-listen .course-listen__step {
        justify-content: center;
        gap: 0;
        width: 40px;
        padding: 0;
    }

    .course-listen .course-listen__step .fa { font-size: 20px; }
}


/* ============================================================
   The subscriptions page (/abonamente).
   ============================================================ */

.subscriptions {
    background: #fdfbfd;
    padding: 55px 0 90px;
}

@media (min-width: 992px) {
    .subscriptions > .container { padding-left: 90px; padding-right: 90px; }
}

.subscriptions__head { margin-bottom: 40px; }

.subscriptions__words { min-width: 0; }

.subscriptions__kinds {
    margin: 0 0 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6934a2;
}

.subscriptions h1.subscriptions__tagline {
    margin: 0 0 30px;
    font-family: "Vidaloka", serif;
    font-size: 40px;
    line-height: 1.2;
    color: #000;
    text-align: left;
    text-transform: none;
}

/* Sits close under the heading rather than at the full remove the heading keeps from the
   paragraphs, since it is the second half of the same thought. */
.subscriptions h1.subscriptions__tagline:has(+ .subscriptions__subtitle) {
    margin-bottom: 12px;
}

.subscriptions__subtitle {
    margin: 0 0 24px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #151515;
}

.subscriptions__intro {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #545454;
}

.subscriptions__intro:last-child { margin-bottom: 0; }

/* What the subscription holds, closing the column — written out as one paragraph rather than
   set as a list, so the column reads as prose all the way down. */
.subscriptions__includes {
    margin: 0 0 12px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #545454;
}

.subscriptions__includes:last-child { margin-bottom: 0; }

/* --- the card at the top right ----------------------------- */

/* This card is the design's own, and is not standing in a row of course cards it has to line
   up with: the mark sits inset with everything else and the box carries the padding, rather
   than the picture running to the edges and each part padding itself. */
.subscriptions .subscription-card__inner {
    justify-content: flex-start;
    gap: 16px;
    padding: 20px;
}

/* Held to one height so that opening the payment details cannot move it. Capping the panel
   alone is not enough: while the panel is growing from nothing the mark is already gone, so
   the card would drop to the height of what is left and climb back — a flinch on every click.
   With the height written down it cannot move at either end or anywhere in between.

   The number is the shut card added up: 20 padding + 135 mark + 16 gap + 24 rule padding
   + 1 rule + 41 the price line + 40 the button + 20 padding. Opened, the mark and the rule
   give up 176 of that, 16 goes above the price line and the panel below is held to the 160
   left. All of it is set in this stylesheet, so it stays true as long as those do.

   Only where there is a panel to open: the card of somebody who already holds a subscription
   has no button and nothing to swap, so a fixed height would leave it standing half empty. */
.subscriptions .subscription-card:has(.course-preview__pay) .subscription-card__inner {
    height: 297px;
}

/* Shorter than the mark gets on a listing card: this one stands beside a column of writing
   rather than in a row of cards, so it has nothing to match heights with, and every pixel it
   gives back is one the reader does not have to scroll past.

   Opening the details hides the mark, and they move up into the room it was using — so the
   mark is not as short as it could be: it has to give up enough room for the panel to fit
   without being cut off, and for the space the price line is given above it once it is the
   first thing in the card. That is what stops this card getting any shorter. */
.subscriptions .subscription-card__image { height: 135px; }

.subscriptions .subscription-card__image img {
    max-width: 120px;
    max-height: 120px;
}

/* That room is the mark, the space under it, and the rule above the offer that goes with them
   — 135 + 16 + 24 + 1, less the 16 the price line is given above it — so the panel is held to
   exactly what is left. The card then keeps the height it had, whichever way the details are.

   Every one of those four numbers is set a few lines above rather than measured off rendered
   text, so this stays true as long as they do: change the mark's height and this must follow.

   Nothing scrolls here, so whatever the wording below comes to has to fit inside this: what
   would not fit is cut off, and the phone number is the last thing in it. */
/* Everything about how this panel is drawn is written once, where the panel itself is, so the
   two pages that show it cannot drift apart. Held to a height only here, because only here
   does it have to swap places with something else without moving the card. */
.subscriptions .course-preview__pay-panel {
    height: 160px;
    overflow: hidden;
}

/* A rule above whatever the card says about the subscription, as the design draws it. */
.subscriptions__offer {
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid #dbdfe9;
}

/* Opened, the payment details take the place of the mark rather than pushing the card taller,
   and the rule goes with it — with nothing above it, it would sit against the card's own edge.

   :has() is what reads the open state from the panel below; where it is not supported the
   mark simply stays put, which costs height but breaks nothing. */
.subscription-card:has(.collapse.show) .subscription-card__image,
.subscription-card:has(.collapsing) .subscription-card__image {
    display: none;
}

.subscription-card:has(.collapse.show) .subscriptions__offer,
.subscription-card:has(.collapsing) .subscriptions__offer {
    padding-top: 0;
    border-top: 0;
}

/* Opened, the price line is the first thing in the card rather than something under the mark,
   and would otherwise start hard against the top edge. The room it takes is given back by the
   mark, which is that much taller than it would otherwise need to be — taking it out of the
   panel instead would have cut the wording inside it. */
.subscription-card:has(.collapse.show) .subscriptions__price-row,
.subscription-card:has(.collapsing) .subscriptions__price-row {
    margin-top: 16px;
}

.subscriptions__state {
    margin: 0;
    font-family: "Vidaloka", serif;
    font-size: 24px;
    line-height: 1.2;
    color: #000;
}

.subscriptions__price-row {
    gap: 11px;
    margin-bottom: 12px;
}

/* --- the two headings and what hangs under each ------------ */

.subscriptions__panel { display: none; }

#subscriptions-programe:checked ~ .subscriptions__panel--programe,
#subscriptions-intrebari:checked ~ .subscriptions__panel--intrebari {
    display: block;
}

#subscriptions-programe:checked ~ .subscriptions__sections label[for="subscriptions-programe"],
#subscriptions-intrebari:checked ~ .subscriptions__sections label[for="subscriptions-intrebari"] {
    border-bottom-color: #a87fd1;
    color: #000;
}

/* Keyboard focus has to be visible on the heading, since the control itself is off screen. */
.course-preview__switch:focus-visible ~ .subscriptions__sections label[for="subscriptions-programe"],
.course-preview__switch:focus-visible ~ .subscriptions__sections label[for="subscriptions-intrebari"] {
    outline: 2px solid #a87fd1;
    outline-offset: 4px;
}

/* --- the questions ----------------------------------------- */

.questions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.questions__item {
    padding: 20px;
    border: 1px solid #6c32ad;
    border-radius: 20px;
}

/* list-style clears the marker browsers put on a summary; the -webkit- rule is for the older
   Safari that draws its own instead of honouring that. */
.questions__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    color: #6c32ad;
    cursor: pointer;
}

.questions__head::-webkit-details-marker { display: none; }

.questions__chevron {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 20px;
    transition: transform .2s ease;
}

.questions__item[open] .questions__chevron { transform: rotate(180deg); }

/* Nothing down the left: the heading above starts there, and the points set their own indent.
   The top padding carries the hair's breadth the design leaves under the heading as well. */
.questions__body { padding: 13px 12px 12px 0; }

.questions__intro {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #151515;
}

.questions__points {
    margin: 8px 0 0;
    padding-left: 24px;
}

.questions__intro:last-child,
.questions__points { margin-bottom: 0; }

.questions__points li {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #151515;
}

/* --- the listing ------------------------------------------- */

.subscriptions__sections {
    display: flex;
    gap: 27px;
    align-items: center;
}

.subscriptions__until {
    margin: 8px 0 0;
    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-size: 13px;
    color: #757575;
}

/* The way in, in place of a price on a course the reader already holds. */
.subscriptions__open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(168, 127, 209, .25);
    border-radius: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #59298f;
}

/* The mark stands taller than the wording beside it, so it is what sets the pill's height. */
.subscriptions__open .bi {
    font-size: 16px;
    line-height: 1;
}

.course-card:hover .subscriptions__open { background: rgba(168, 127, 209, .4); }

/* --- a card for a course that cannot be opened yet ---------- */

.course-card-shut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 290px;
    padding: 24px;
    background: linear-gradient(160deg, #f7f5f8 0%, #f1eef4 100%);
    border: 2px solid #edecee;
    border-radius: 16px;
    text-align: center;
}

.course-card-shut__lock { color: #c9b2e0; }

.course-card-shut__words {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #8a8a8a;
}

@media (max-width: 767px) {
    .subscriptions { padding: 35px 0 60px; }
    .subscriptions h1.subscriptions__tagline { font-size: 30px; }
}

@media (max-width: 991px) {
    /* The row cannot hold the search box and both filters side by side, so the filters drop
       under it and share the width between them — and go on sharing it however narrow the
       screen gets, rather than ever stacking one above the other.

       min-width lets them shrink past the width of their own wording, which a flex item will
       not do on its own; what will not fit is trimmed with an ellipsis rather than pushing
       the second filter off the row. */
    .programs__toolbar { flex-wrap: wrap; }
    .programs__search { flex: 1 1 100%; }
    .programs__filters { flex: 1 1 100%; }

    .programs__filter {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .programs .programs__filter-chosen {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .programs-page { padding: 35px 0 60px; }
    .programs-page h1.programs-page__title { font-size: 38px; }
    .programs__toolbar { gap: 16px; }
    .programs__filters { gap: 16px; }
}



/* ============================================================
   The popup that says how something went.

   SweetAlert draws every one of these — logging in, the contact form, the newsletter — and
   comes dressed in its own blue and green, which belong to no other part of this site. What
   follows puts it in the same clothes as the pages around it: Vidaloka for the heading and
   Poppins for the rest, the purple used on every other way in, the same pill and the same
   soft lilac shadow.

   This file is read by the public layout alone, so the admin screens keep the popup their
   own bundle draws. Nothing here is asked for at the call: a Swal.fire written tomorrow is
   dressed like the rest without being told to be.
   ============================================================ */

.swal2-container {
    font-family: "Poppins", sans-serif;
}

.swal2-popup {
    width: 32em;
    max-width: calc(100vw - 32px);
    padding: 32px 28px 28px;
    border-radius: 24px;
    background: #fdfbfd;
    box-shadow: 0 12px 40px rgba(108, 50, 173, .18);
}

.swal2-popup .swal2-title {
    margin: 0 0 4px;
    padding: 0;
    font-family: "Vidaloka", serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    text-transform: none;
}

.swal2-popup .swal2-html-container {
    margin: 12px 0 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #545454;
}

/* The mark the rest of the redesigned pages are ruled with, standing between the heading and
   the wording rather than a plain line. */
.swal2-popup .swal2-title::after {
    content: "✦";
    display: block;
    margin: 12px auto 0;
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: #a87fd1;
}

/* --- the ring above the heading ----------------------------- */

/* Made smaller by its font size and by nothing else. Every piece of the tick — the two
   strokes, the ring, and the two masks that hide the ends of the strokes where they run past
   the circle — is placed in em, all of them measured from this one size. Setting the box in
   pixels instead moves the walls without moving what is drawn inside them: the masks stay
   where they were, stop covering the end of the long stroke, and it comes out through the
   tick as a second line crossing it. */
.swal2-popup .swal2-icon {
    font-size: 14px;
    margin: 0 auto 20px;
}

.swal2-popup .swal2-icon.swal2-success {
    border-color: rgba(168, 127, 209, .45);
    color: #6c32ad;
}

.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #6c32ad;
}

.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(168, 127, 209, .45);
}

/* Kept plainly a warning — the wording it stands over is usually something that did not
   happen — but softened to a rose that sits beside the purple rather than against it. */
.swal2-popup .swal2-icon.swal2-error {
    border-color: rgba(214, 77, 106, .4);
    color: #d64d6a;
}

.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #d64d6a;
}

/* --- the way out ------------------------------------------- */

/* The Bootstrap classes the call asks for are the theme's, and they bring a blue button with
   square corners. These come after them in the file, which is what puts this pill in front. */
.swal2-popup .swal2-actions .swal2-confirm,
.swal2-popup .swal2-actions .swal2-confirm.btn,
.swal2-popup .swal2-actions .swal2-confirm.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 40px;
    margin: 0;
    padding: 0 24px;
    background: #6c32ad;
    border: 1px solid #6c32ad;
    border-radius: 20px;
    box-shadow: 0 4px 4px rgba(168, 127, 209, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: background .2s ease;
}

.swal2-popup .swal2-actions .swal2-confirm:hover,
.swal2-popup .swal2-actions .swal2-confirm:focus {
    background: #5a2891;
    border-color: #5a2891;
    box-shadow: 0 4px 4px rgba(168, 127, 209, .35);
    color: #fff;
}

.swal2-popup .swal2-actions { margin-top: 28px; }

.swal2-popup .swal2-close {
    width: 36px;
    height: 36px;
    font-size: 32px;
    color: #a87fd1;
    box-shadow: none;
}

.swal2-popup .swal2-close:hover { color: #6c32ad; background: transparent; }

@media (max-width: 575px) {
    .swal2-popup { padding: 28px 20px 24px; border-radius: 20px; }
    .swal2-popup .swal2-title { font-size: 26px; }
    .swal2-popup .swal2-html-container { font-size: 15px; }
    .swal2-popup .swal2-actions .swal2-confirm { width: 100%; }
}


/* ============================================================
   Signing in and signing up.

   The two forms the header opens: a dropdown on a screen, a panel under the bar on a phone.
   Both carry .auth-pop, which is what everything below is written against — the nav menus are
   .dropdown-menu too, and a rule for one of those would land on all of them.

   The theme drew these with square corners, a grey shadow and eighty-pixel fields set in
   Vidaloka, which is a heading face doing a job it was never cut for. What follows dresses
   them in the violet the rest of the site is signed with, and in the shapes its other pages
   use: the rounded card, the soft shadow, the pill, and Poppins where somebody is reading
   rather than being addressed.
   ============================================================ */

.auth-pop {
    --auth-violet: #6c32ad;
    --auth-violet-dark: #59298f;
    padding: 8px 28px 32px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(168, 127, 209, .22);
}

/* --- the heading -------------------------------------------- */

.auth-pop .dropdown-top {
    display: block;
    text-align: center;
}

.auth-pop .dropdown-top a {
    display: block;
    margin: 0;
    padding: 24px 0 22px;
    font-family: "Vidaloka", serif;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #000;
    text-transform: none;
}

/* The mark the rest of the site is ruled with, read as part of the heading rather than as a
   rule under it — the same way a course names its kind. Written in Poppins because Vidaloka,
   which the heading is set in, has no glyph for it and the browser would substitute one. */
.auth-pop .dropdown-top a::before {
    content: "✦";
    /* A margin rather than a space in the content, which the browser is free to collapse. */
    margin-right: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--auth-violet);
}

/* --- what is typed into ------------------------------------- */

.auth-pop .form-group {
    margin-bottom: 14px;
}

/* Written out the long way, and once per shape, to outweigh two rules of the theme's that
   reach these fields and nothing else: `.dropdown-menu form input.form-control`, which stands
   them eighty pixels tall, and `.dropdown.show .dropdown-menu input`, which greys their
   border. A plainer `.auth-pop .form-control` loses to both, and losing only inside the
   dropdown is worse than losing everywhere — the panel on a phone would then be dressed one
   way and the dropdown on a screen another. */
.auth-pop.dropdown-menu form input.form-control,
.auth-pop.mobile-auth-panel form input.form-control {
    height: 48px;
    padding: 0 16px 0 44px;
    border: 1px solid #e8dcee;
    border-radius: 14px;
    background: #fdfbfd;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    /* The theme spaces every field on the site 4px apart, which is a display setting on a
       heading face doing duty here as reading text — an address typed into it came out with
       gaps wide enough to read as separate words. */
    letter-spacing: 0;
    color: #323232;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-pop form input.form-control::placeholder {
    color: #a9a3a5;
    text-transform: none;
    letter-spacing: 0;
}

.auth-pop.dropdown-menu form input.form-control:focus,
.auth-pop.mobile-auth-panel form input.form-control:focus {
    border-color: var(--auth-violet);
    background: #fff;
    /* A ring rather than a heavier border, so nothing shifts by a pixel when it appears. */
    box-shadow: 0 0 0 3px rgba(168, 127, 209, .18);
}

/* The icon lies over the field, which the padding above leaves room for. Centred on the field
   rather than measured from its top, so the two shapes the card comes in — the tall dropdown
   and the panel under the bar — both sit it in the middle.

   `top` is written !important because the theme pins every icon in a dropdown form at 27px
   with an !important of its own, measured for the eighty-pixel fields it drew. Against the
   48px ones here that leaves it three pixels low, and only inside the dropdown — so the same
   card would be aligned one way on a phone and another on a screen. */
.auth-pop .has-placeholder > i {
    top: 50% !important;
    left: 16px;
    transform: translateY(-50%);
    margin: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--auth-violet);
}

/* --- the way in --------------------------------------------- */

.auth-pop .btn,
.auth-pop .btn-outline-maincolor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    height: 46px;
    margin-top: 6px;
    padding: 0 24px;
    border: 1px solid var(--auth-violet);
    border-radius: 23px;
    background: var(--auth-violet);
    box-shadow: 0 4px 4px rgba(168, 127, 209, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease;
}

.auth-pop .btn:hover,
.auth-pop .btn:focus,
.auth-pop .btn-outline-maincolor:hover,
.auth-pop .btn-outline-maincolor:focus {
    background: var(--auth-violet-dark);
    border-color: var(--auth-violet-dark);
    color: #fff;
}

/* --- the small print ---------------------------------------- */

.auth-pop .checkbox {
    margin: 4px 0 14px;
    text-align: right;
}

.auth-pop .checkbox a {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: var(--auth-violet);
    text-decoration: none;
}

.auth-pop .checkbox a:hover,
.auth-pop .checkbox a:focus { text-decoration: underline; }

/* --- the two shapes it comes in ----------------------------- */

@media (min-width: 1200px) {
    .auth-pop.dropdown-menu {
        width: 380px;
        /* The theme holds every dropdown open to 30.6rem — nearly 490px — and a floor set that
           high answers a width asked for below it. Both have to be said, or the card comes out
           a third wider than it was drawn to be. */
        min-width: 380px;
        margin-top: 12px;
    }
}

/* Under the bar rather than out of it: the card is the panel itself, so it keeps the corners
   but gives up the shadow, which would only draw a line across the page. */
.auth-pop.mobile-auth-panel {
    padding: 4px 18px 20px;
    border-bottom: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 24px rgba(168, 127, 209, .16);
}

.auth-pop.mobile-auth-panel .dropdown-top a {
    padding-top: 16px;
    font-size: 21px;
}


/* ============================================================
   The two pages a forgotten password is put right on.

   /account/forget_password asks for the address; /account/reset_password/{token} takes the new
   password. Both are the same card as the sign-in dropdown, standing on its own in the middle
   of a page instead of hanging off the header — so somebody who lands here from an email is
   looking at something they recognise from the site they were on.

   The violet is the one the rest of the site is signed with. Written against .auth-page, which
   only these two carry.
   ============================================================ */

.auth-page {
    --auth-violet: #6c32ad;
    --auth-violet-dark: #59298f;
    padding: 70px 0 100px;
    background: #fdfbfd;
}

.auth-page__card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 44px 36px 36px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(168, 127, 209, .18);
    text-align: center;
}

.auth-page h1.auth-page__title {
    /* The room under the heading was held open by the mark when it stood on its own line
       below it. Asked for here now that it reads on the same line. */
    margin: 0 0 24px;
    font-family: "Vidaloka", serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    color: #000;
    text-align: center;
    text-transform: none;
}

/* The mark the rest of the site is ruled with, read as part of the heading rather than as a
   rule under it. Written in Poppins because Vidaloka, which the heading is set in, has no
   glyph for it and the browser would substitute one. */
.auth-page__spark {
    margin-right: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--auth-violet);
}

.auth-page__words {
    margin: 0 auto 28px;
    max-width: 34ch;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #545454;
}

/* --- what is typed into ------------------------------------- */

.auth-page__field {
    position: relative;
    margin-bottom: 14px;
    text-align: left;
}

.auth-page__field > i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: var(--auth-violet);
}

/* Written the long way for the same reason the dropdown's fields are: the theme reaches every
   input on the site with `input[type="text"], input[type="email"], …` and stands them eighty
   pixels tall. */
.auth-page__field input.form-control {
    height: 48px;
    padding: 0 16px 0 44px;
    border: 1px solid #e8dcee;
    border-radius: 14px;
    background: #fdfbfd;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    /* The theme spaces every field on the site 4px apart, which is a display setting on a
       heading face doing duty here as reading text — an address typed into it came out with
       gaps wide enough to read as separate words. */
    letter-spacing: 0;
    color: #323232;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-page__field input.form-control::placeholder {
    color: #a9a3a5;
    text-transform: none;
    letter-spacing: 0;
}

.auth-page__field input.form-control:focus {
    border-color: var(--auth-violet);
    background: #fff;
    /* A ring rather than a heavier border, so nothing shifts by a pixel when it appears. */
    box-shadow: 0 0 0 3px rgba(168, 127, 209, .18);
}

/* --- the way on --------------------------------------------- */

.auth-page__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin-top: 8px;
    padding: 0 24px;
    border: 1px solid var(--auth-violet);
    border-radius: 23px;
    background: var(--auth-violet);
    box-shadow: 0 4px 4px rgba(168, 127, 209, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease;
}

.auth-page__button:hover,
.auth-page__button:focus {
    background: var(--auth-violet-dark);
    border-color: var(--auth-violet-dark);
    color: #fff;
}

.auth-page__back {
    margin: 24px 0 0;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

.auth-page .auth-page__back a {
    color: var(--auth-violet);
    text-decoration: none;
}

.auth-page .auth-page__back a:hover,
.auth-page .auth-page__back a:focus { text-decoration: underline; }

@media (max-width: 575px) {
    .auth-page { padding: 40px 0 70px; }
    .auth-page__card { padding: 34px 22px 28px; border-radius: 20px; }
    .auth-page h1.auth-page__title { font-size: 27px; }
}


/* ============================================================
   Signing up to the newsletter, in the footer.
   ============================================================ */

.page_footer .widget_mailchimp form,
.page_footer .widget_mailchimp input.form-control {
    height: 56px;
}

/* Room on the left for the mark, and on the right for the button that sits inside the field. */
.page_footer .widget_mailchimp input.form-control {
    padding: 0 64px 0 44px;
    border: 1px solid #e8dcee;
    border-radius: 14px;
    background: #fdfbfd;
    box-shadow: none;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    color: #323232;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* The theme sets its placeholders in Vidaloka, uppercase and tracked 5px, which reads as a
   label rather than as an example of what to type. */
.page_footer .widget_mailchimp input.form-control::placeholder {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: #a9a3a5;
}

.page_footer .widget_mailchimp input.form-control:focus {
    border-color: #6c32ad;
    background: #fff;
    /* A ring rather than a heavier border, so nothing shifts by a pixel when it appears. */
    box-shadow: 0 0 0 3px rgba(168, 127, 209, .18);
}

/* Named as a child of the form, which the envelope is and the button's own icon is not — the
   theme's rule for this reaches both and then has to undo itself for the second one. */
.page_footer .widget_mailchimp form > i {
    left: 16px;
    font-size: 15px;
    line-height: 1;
    color: #6c32ad;
}

/* --- the way in --------------------------------------------- */

/* Inside the field rather than butted against it: 6px of clearance all round, which is what
   turns the theme's full-height block into something sitting in the rounded shape. */
.page_footer .widget_mailchimp button {
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    background-color: #6c32ad;
    transition: background-color .2s ease;
}

.page_footer .widget_mailchimp button:hover,
.page_footer .widget_mailchimp button:focus {
    background-color: #59298f;
}

@media (max-width: 575px) {
    .page_footer .widget_mailchimp form,
    .page_footer .widget_mailchimp input.form-control { height: 52px; }

    .page_footer .widget_mailchimp button { width: 40px; height: 40px; }
}


/* ============================================================
   Writing a message, on /contact.
   ============================================================ */

.contact-form .form-control {
    height: 56px;
    padding: 0 20px 0 48px;
    border: 1px solid #e8dcee;
    border-radius: 14px;
    background: #fdfbfd;
    box-shadow: none;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    /* The theme spaces every field on the site 4px apart, which is a display setting on a
       heading face doing duty here as reading text — an address typed into it came out with
       gaps wide enough to read as separate words. */
    letter-spacing: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Free to grow with what is written, where the others are one line and stay it. */
.contact-form textarea.form-control {
    height: auto;
    min-height: 160px;
    padding: 18px 20px 18px 48px;
    resize: vertical;
}

/* The theme sets its placeholders in Vidaloka, uppercase and tracked 5px, which reads as a
   label rather than as an example of what to type. */
.contact-form .form-control::placeholder {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: #a9a3a5;
}

.contact-form .form-control:focus {
    border-color: #6c32ad;
    background: #fff;
    /* A ring rather than a heavier border, so nothing shifts by a pixel when it appears. */
    box-shadow: 0 0 0 3px rgba(168, 127, 209, .18);
}

.contact-form .form-group > i {
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: #6c32ad;
}

/* Level with the first line of what is being written, not with the middle of a box whose
   height the writer decides. */
.contact-form .contact-form__message > i {
    top: 19px;
    transform: none;
}

/* --- the way out -------------------------------------------- */

/* The theme draws this one as a 270px-wide outline standing 88px tall, in the same tracked
   Vidaloka the fields were in. Named with .btn as well so it outweighs `.ls
   .btn-outline-maincolor`, which is the theme's own and carries the same weight without it. */
.contact-form .btn.btn-outline-maincolor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    max-width: none;
    height: 46px;
    padding: 0 32px;
    border: 1px solid #6c32ad;
    border-radius: 23px;
    background: #6c32ad;
    box-shadow: 0 4px 4px rgba(168, 127, 209, .25);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    transition: background .2s ease, border-color .2s ease;
}

.contact-form .btn.btn-outline-maincolor:hover,
.contact-form .btn.btn-outline-maincolor:focus {
    background: #59298f;
    border-color: #59298f;
    color: #fff;
}