/* =========================================================
   RA-UK Learning Hub
   Custom classes use camelCase. Bootstrap classes are unchanged.
   ========================================================= */

:root {
    --raukBlue: #0a87cf;
    --raukBlueDark: #0773b1;
    --raukNavy: #255f95;
    --raukInk: #1e4a76;
    --raukPanel: #f2f5f8;
    --raukPanelDark: #e4eaf0;
    --raukText: #222b36;
    --raukMuted: #6b7785;
    --raukFaded: #c5ced8;
    --raukShadow: 0 3px 10px rgba(30, 74, 118, 0.14);
    --sideNavWidth: 240px;
    --headerInnerHeight: 80px;
    --brandStripeHeight: 15px;
    --headerHeight: calc(var(--headerInnerHeight) + var(--brandStripeHeight));
    --bs-primary: var(--raukBlue);
    --bs-primary-rgb: 10, 135, 207;
    --bs-link-color: var(--raukBlue);
    --bs-link-color-rgb: 10, 135, 207;
    --bs-link-hover-color: var(--raukNavy);
    --bs-link-hover-color-rgb: 37, 95, 149;
}

html, body {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    color: var(--raukText);
    background: #fff;
}

a {
    color: var(--raukBlue);
}

h1:focus {
    outline: none;
}

/* ---------- Bootstrap overrides ---------- */

.btn {
    border-radius: 0;
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--raukBlue);
    --bs-btn-border-color: var(--raukBlue);
    --bs-btn-hover-bg: var(--raukBlueDark);
    --bs-btn-hover-border-color: var(--raukBlueDark);
    --bs-btn-active-bg: var(--raukNavy);
    --bs-btn-active-border-color: var(--raukNavy);
    --bs-btn-disabled-bg: var(--raukBlue);
    --bs-btn-disabled-border-color: var(--raukBlue);
}

.btn-outline-primary {
    --bs-btn-color: var(--raukBlue);
    --bs-btn-border-color: var(--raukBlue);
    --bs-btn-hover-bg: var(--raukBlue);
    --bs-btn-hover-border-color: var(--raukBlue);
    --bs-btn-active-bg: var(--raukNavy);
    --bs-btn-disabled-color: var(--raukFaded);
    --bs-btn-disabled-border-color: var(--raukFaded);
}

.form-control, .form-select {
    border-radius: 0;
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(10, 135, 207, 0.6);
}

/* ---------- Header ---------- */

.siteHeader {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
}

.siteHeaderInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--headerInnerHeight);
    padding: 0 1.25rem;
}

.siteHeaderActions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menuToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: var(--raukPanel);
    color: var(--raukNavy);
    font-size: 1.6rem;
}

.menuToggle:hover {
    background: var(--raukPanelDark);
}

.menuToggle .menuIconClose,
.menuToggle[aria-expanded="true"] .menuIconOpen {
    display: none;
}

.menuToggle[aria-expanded="true"] .menuIconClose {
    display: inline;
}

.siteLogo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--raukNavy);
}

.siteLogoMark {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.siteLogoAccent {
    color: var(--raukBlue);
}

.siteLogoText {
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--raukBlue);
}

.brandStripe {
    height: var(--brandStripeHeight);
    background:
        linear-gradient(105deg, transparent 0 52%, rgba(255, 255, 255, 0.12) 52% 54%, transparent 54%),
        linear-gradient(90deg, var(--raukNavy) 0%, #2a6aa3 50%, var(--raukBlue) 55%, var(--raukBlue) 100%);
}

.accountMenu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.accountLink {
    color: var(--raukNavy);
    font-weight: 600;
    text-decoration: none;
    padding: 0;
}

.accountLink:hover {
    color: var(--raukBlue);
}

/* ---------- Layout ---------- */

.siteBody {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
}

.siteContent {
    flex: 1;
    min-width: 0;
    max-width: 1180px;
    padding: 1rem 1.25rem 3rem;
}

/* Mobile: the side nav drops down under the header as an overlay. */
@media (max-width: 991.98px) {
    .sideNavWrapper {
        position: fixed;
        top: var(--headerHeight);
        left: 0;
        right: 0;
        z-index: 1020;
        max-height: calc(100vh - var(--headerHeight));
        overflow-y: auto;
        box-shadow: 0 8px 16px rgba(30, 74, 118, 0.2);
    }
}

/* Desktop: the side nav stays in view under the sticky header. */
@media (min-width: 992px) {
    .siteBody {
        flex-direction: row;
        align-items: flex-start;
    }

    .sideNavWrapper {
        position: sticky;
        top: calc(var(--headerHeight) + 0.4rem);
        flex: 0 0 var(--sideNavWidth);
        width: var(--sideNavWidth);
        max-height: calc(100vh - var(--headerHeight) - 0.8rem);
        margin-top: 0.4rem;
        overflow-y: auto;
    }
}

.sideNav {
    display: flex;
    flex-direction: column;
    background: var(--raukPanel);
}

.sideNavLink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: var(--raukNavy);
    font-weight: 500;
    font-size: 1.05rem;
    text-decoration: none;
}

.sideNavLink:hover {
    background: var(--raukPanelDark);
    color: var(--raukNavy);
}

.sideNavLink.isActive {
    background: var(--raukBlue);
    color: #fff;
}

.siteFooter {
    border-top: 1px solid var(--raukPanelDark);
    color: var(--raukMuted);
    font-size: 0.9rem;
}

.siteFooterInner {
    padding: 1rem 1.25rem;
}

/* ---------- Page header ---------- */

.breadcrumbTrail {
    font-size: 0.8rem;
    color: var(--raukMuted);
    margin-bottom: 1rem;
}

.breadcrumbTrail a {
    color: var(--raukBlue);
    text-decoration: none;
}

.breadcrumbSeparator {
    margin: 0 0.3rem;
}

.pageHeader {
    margin-bottom: 2rem;
}

.pageTitle {
    font-weight: 900;
    font-size: 2rem;
    color: var(--raukBlue);
    margin-bottom: 0.25rem;
}

.pageLead {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--raukBlue);
    margin-bottom: 0.75rem;
}

.pageIntro {
    font-size: 1rem;
}

.sectionTitle {
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--raukBlue);
    margin-bottom: 0.9rem;
}

.sectionTitle a {
    color: inherit;
    text-decoration: none;
}

.sectionTitle a:hover {
    text-decoration: underline;
}

.sectionTitle.small {
    font-size: 1rem;
}

.sectionCount {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0 0.4rem;
    margin-left: 0.25rem;
    background: var(--raukPanel);
    color: var(--raukNavy);
    font-size: 0.9rem;
    text-align: center;
    vertical-align: middle;
}

/* ---------- Search panel ---------- */

.searchPanel {
    background: var(--raukPanel);
    padding: 1.75rem 2.5rem 1.25rem;
    margin-bottom: 2rem;
}

.searchSelect {
    border: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--raukNavy);
}

.searchButton {
    min-width: 7.5rem;
    width: 100%;
    padding: 0.55rem 1.25rem;
}

.advancedToggle {
    border: 0;
    background: none;
    padding: 0;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--raukNavy);
    text-decoration: underline;
}

.advancedOptions {
    border-top: 1px solid var(--raukPanelDark);
    margin-top: 1rem;
    padding-top: 1rem;
}

.advancedLabel {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--raukNavy);
    margin-bottom: 0.35rem;
}

.topicChips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.topicChip {
    border: 1px solid var(--raukFaded);
    background: #fff;
    color: var(--raukNavy);
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
}

.topicChip.isSelected {
    background: var(--raukBlue);
    border-color: var(--raukBlue);
    color: #fff;
}

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

.tagSearch {
    position: relative;
}

.tagSearchBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    min-height: 2.6rem;
    padding: 0.35rem 1rem;
}

.tagSearchBox:focus-within {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(10, 135, 207, 0.6);
}

.tagSearchField {
    flex: 1;
    min-width: 10rem;
    border: 0;
    outline: 0;
    padding: 0.2rem 0;
    font-size: 1.05rem;
}

.tagChip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--raukBlue);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
}

.tagChip.isLink {
    background: var(--raukPanel);
    color: var(--raukNavy);
    font-weight: 500;
}

.tagChip.isLink:hover {
    background: var(--raukBlue);
    color: #fff;
}

.tagChipRemove {
    border: 0;
    background: none;
    color: inherit;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
}

.tagSuggestions {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    box-shadow: var(--raukShadow);
}

.tagSuggestion {
    padding: 0.45rem 1rem;
    font-size: 1rem;
    color: var(--raukNavy);
    cursor: pointer;
}

.tagSuggestion.isHighlighted, .tagSuggestion:hover {
    background: var(--raukPanel);
}

.tagList {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---------- Resource cards ---------- */

.resourceStrip {
    flex: 0 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: #fff;
    background: var(--raukBlue);
    font-size: 0.95rem;
}

.isDocument > .resourceStrip {
    background: var(--raukNavy);
}

.resourceCompact, .resourceCard, .curatedCard {
    position: relative;
    display: flex;
    background: #fff;
    box-shadow: var(--raukShadow);
}

.resourceStack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.resourceCompact {
    min-height: 82px;
}

.resourceCompactBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 2.25rem 0.9rem 0.8rem;
    text-decoration: none;
}

.resourceDate {
    font-size: 0.8rem;
    color: var(--raukInk);
}

.resourceCompactTitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--raukInk);
    line-height: 1.3;
}

.resourceCompactBody:hover .resourceCompactTitle {
    color: var(--raukBlue);
}

.resourceLockBadge {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px 6px 0 0;
    background: var(--raukBlue);
    color: #fff;
    border-bottom-left-radius: 100%;
    font-size: 0.9rem;
}

.isDocument .resourceLockBadge {
    background: var(--raukNavy);
}

.resourceIndicator {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    color: var(--raukNavy);
    font-size: 0.9rem;
}

.resourceGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 0.6rem 1rem;
}

.resourceCard {
    min-height: 96px;
}

.resourceCardBody {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 0.6rem 0.75rem 0.9rem;
}

.resourceTitle {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--raukInk);
    text-decoration: none;
    line-height: 1.3;
}

a.resourceTitle:hover {
    color: var(--raukBlue);
}

.resourceSummary {
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0.35rem 0 0.25rem;
}

.resourceCategory {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--raukInk);
    text-decoration: underline;
}

.resourceCpd {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.resourceCpd strong {
    font-size: 0.8rem;
}

.resourceActions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.55rem;
}

.resourceAction {
    border: 0;
    background: none;
    padding: 0;
    color: var(--raukFaded);
    font-size: 0.95rem;
    line-height: 1;
}

button.resourceAction:hover {
    color: var(--raukBlue);
}

.resourceAction.isActive {
    color: var(--raukNavy);
}

.resourceBadges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

.resourceBadge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.35rem;
    color: #fff;
    background: var(--raukBlue);
}

.resourceBadge.isPopular {
    background: #d9480f;
}

.resourceBadge.isMembersOnly {
    background: var(--raukPanel);
    color: var(--raukNavy);
}

/* ---------- Learning Hub ---------- */

.hubSection {
    margin-bottom: 2rem;
}

.hubColumns .sectionTitle {
    margin-bottom: 0.6rem;
}

.dashboardStrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.dashboardTile {
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1rem;
    background: var(--raukNavy);
    color: #fff;
    text-decoration: none;
}

a.dashboardTile:hover {
    background: var(--raukBlue);
    color: #fff;
}

.dashboardValue {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.dashboardLabel {
    font-size: 0.85rem;
    font-weight: 500;
}

.emptyState {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--raukPanel);
    color: var(--raukNavy);
    font-size: 0.95rem;
}

.emptyState > .bi {
    font-size: 1.4rem;
    line-height: 1;
}

.loadingIndicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--raukMuted);
    padding: 1rem 0;
}

/* ---------- Search results ---------- */

.resultsToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sortControl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--raukPanel);
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    color: var(--raukNavy);
    white-space: nowrap;
}

.sortControl .form-select {
    border: 0;
    background-color: transparent;
    font-size: 0.8rem;
    min-width: 8.5rem;
}

.resultsCount {
    font-size: 0.85rem;
    color: var(--raukMuted);
}

.resultsPager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    font-size: 0.95rem;
}

/* ---------- Resource details ---------- */

.mediaPanel {
    background: var(--raukPanel);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.mediaVideo {
    width: 100%;
    height: 100%;
    background: #000;
}

.mediaPlaceholder, .mediaLocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--raukNavy);
}

.playButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 52px;
    border-radius: 10px;
    background: var(--raukNavy);
    color: #fff;
    font-size: 2rem;
}

.documentIcon, .mediaLocked > .bi {
    font-size: 3rem;
}

.mediaLocked h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
}

.mediaFileName {
    font-size: 0.85rem;
    font-weight: 600;
    word-break: break-all;
}

.mediaNote {
    font-size: 0.85rem;
    color: var(--raukMuted);
}

.resourceAbout {
    font-size: 1rem;
}

.resourceAbout .sectionTitle {
    font-weight: 900;
}

.resourceFacts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}

.resourceFacts dt {
    font-weight: 600;
    color: var(--raukNavy);
}

.resourceFacts dd {
    margin: 0;
}

.actionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.actionButton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: var(--raukPanel);
    color: var(--raukNavy);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.75rem 0.85rem;
    text-align: left;
}

.actionButton:hover:not(:disabled) {
    background: var(--raukPanelDark);
}

.actionButton.isActive {
    background: var(--raukBlue);
    color: #fff;
}

.actionButton:disabled {
    opacity: 0.6;
}

.actionCount {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
}

.cpdBar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    background: var(--raukNavy);
    color: #fff;
    font-size: 0.9rem;
}

.cpdBar > .bi {
    font-size: 1.1rem;
}

.cpdValue {
    font-size: 1.3rem;
    font-weight: 600;
}

.cpdEarned {
    margin-left: auto;
    font-weight: 700;
}

.reflectionForm textarea {
    border: 1px solid var(--raukNavy);
    font-size: 0.95rem;
}

.reflectionList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reflectionList li {
    background: var(--raukPanel);
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
}

.reflectionList p {
    margin: 0.2rem 0 0;
    white-space: pre-line;
}

.reflectionDate {
    font-size: 0.8rem;
    color: var(--raukMuted);
}

.signInPrompt {
    background: var(--raukPanel);
    padding: 1rem;
    font-size: 0.95rem;
}

/* ---------- Curated lists ---------- */

.curatedCard {
    text-decoration: none;
    color: var(--raukText);
    height: calc(100% - 2.5rem);
}

.curatedCard:hover .resourceTitle {
    color: var(--raukBlue);
}

.curatedCardBody {
    flex: 1;
    padding: 1rem 1.25rem 1rem 1rem;
}

.curatedPoints {
    font-size: 0.8rem;
    margin: 0.5rem 0;
    padding-left: 1.1rem;
}

.curatedCount {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--raukBlue);
}

/* ---------- CPD ---------- */

.cpdFilters {
    padding: 1.25rem 1.5rem;
}

.cpdTable {
    font-size: 0.95rem;
}

.cpdTable thead th {
    color: var(--raukNavy);
    font-weight: 700;
    border-bottom-color: var(--raukNavy);
}

.cpdMeta {
    font-size: 0.85rem;
    color: var(--raukMuted);
}

.certificate {
    border: 6px double var(--raukNavy);
    padding: 2rem 2.5rem;
    background: #fff;
}

.certificateHeader {
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 3px solid var(--raukBlue);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.certificateTitle h2 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--raukNavy);
    margin: 0;
}

.certificateTitle p {
    margin: 0;
    color: var(--raukBlue);
    font-weight: 600;
}

.certificateIntro {
    text-align: center;
    margin-bottom: 0.5rem;
}

.certificateName {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--raukBlue);
    margin-bottom: 0.5rem;
}

.certificateTable {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.certificateReflection {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--raukMuted);
}

.certificateFooter {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--raukMuted);
}

@media print {
    .siteHeader, .menuToggle, .sideNavWrapper, .siteFooter, .noPrint, #blazor-error-ui, #components-reconnect-modal {
        display: none !important;
    }

    .siteContent {
        max-width: none;
        padding: 0;
    }

    .certificate {
        border-width: 4px;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
    :root {
        --headerInnerHeight: 64px;
    }

    .searchPanel {
        padding: 1.25rem;
    }

    .pageTitle {
        font-size: 1.6rem;
    }

    .siteLogoMark {
        font-size: 2.2rem;
    }

    .certificate {
        padding: 1.25rem;
    }

    .certificateHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ---------- Framework (from the Blazor template) ---------- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.9rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}