:root {
    --p1-primary: #00C2A8;
    --p1-primary-hover: #00A7B5;
    --p1-primary-dark: #004D54;
    --p1-teal-100: #B0E9EE;
    --p1-teal-50: #E6F8F9;
    --p1-teal-20: #F3FBFC;
    --p1-title: #111827;
    --p1-subtitle: #6B7280;
    --p1-placeholder: #ADB2BD;
    --p1-outline: #E5E7EB;
    --p1-bg: #F8FAFC;
    --p1-white: #FFFFFF;
    --p1-silver: #C8CCD2;
    --p1-danger: #EF4444;

    --p1-radius: 12px;
    --p1-radius-sm: 10px;
    --p1-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);


    --p1-appbar-h: 70px;
    --p1-side-w: 239px;
}


.p1-field {
    margin-bottom: 24px;
}

.p1-field:last-of-type {
    margin-bottom: 0;
}

.p1-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
    display: flex;
    margin-bottom: 8px;
    gap: 4px;
}

.p1-label span {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #ADB2BD;
}

.p1-field .p1-input,
.p1-field .p1-select {
    padding: 0 16px;
    width: 100%;
    height: 48px;
    border: 1px solid #E5E7EB !important;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
    border-radius: 12px;
    box-shadow: unset !important;
    transition: border-color .2s ease, box-shadow .2s ease;
    font-family: "SF Pro";
    outline: none !important;
    outline-color: inherit !important;
}

.p1-input::placeholder {
    color: var(--p1-placeholder);
}

.p1-input:focus,
.p1-select:focus {
    outline: none;
    border: 1px solid #E5E7EB;
}

.p1-input[readonly],
.p1-input:disabled {
    background: var(--p1-bg);
    color: var(--p1-subtitle);
    cursor: not-allowed;
}

.p1-select {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.p1-input-icon {
    position: relative;
}

.p1-input-icon .p1-input {
    padding-left: 42px;
}

.p1-input-icon__glyph {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--p1-placeholder);
    pointer-events: none;
}

.p1-input-icon--end .p1-input {
    padding-left: 14px;
    padding-right: 42px;
}

.p1-input-icon--end .p1-input-icon__glyph {
    left: auto;
    right: 14px;
}

.p1-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.p1-error {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--p1-danger);
}

.p1-field.has-error .p1-input,
.p1-field.has-error .p1-select {
    border: 1px solid var(--p1-danger);
}

.p1-field.has-error .p1-error,
.p1-error.is-visible {
    display: block;
}


.p1-field--otp.has-error .p1-otp input {
    border-color: var(--p1-danger);
}

.p1-error--center {
    text-align: center;
}


.p1-btn {
    font-weight: 590;
    font-size: 16px;
    line-height: 24px;
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.24);
    padding: 11px 24px;
    background: #00C2A8;
    border: 1px solid #00B098;
    box-shadow: inset 0px -4px 4px rgba(0, 0, 0, 0.24);
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.p1-btn--primary {
    background: var(--p1-primary);
    color: var(--p1-white);
}

.p1-btn--primary:hover,
.p1-btn--primary:focus {
    background: var(--p1-primary-hover);
    color: var(--p1-white);
}

.p1-btn--outline {
    background: var(--p1-white);
    border-color: var(--p1-outline);
    color: var(--p1-title);
}

.p1-btn--outline:hover,
.p1-btn--outline:focus {
    border-color: var(--p1-primary);
    color: var(--p1-title);
}

.p1-btn--block {
    width: 100%;
}

.p1-btn[disabled],
.p1-btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

.p1-link {
    color: var(--p1-primary);
    font-weight: 510;
    text-decoration: none;
}

.p1-link:hover,
.p1-link:focus {
    color: var(--p1-primary-hover);
    text-decoration: underline;
}


body.p1-auth-body {
    margin: 0;
    background: var(--p1-white);
    font-family: "SF Pro";
    color: var(--p1-title);
}

.p1-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.p1-auth__card {
    width: 100%;
    padding: 23px;
    max-width: 358px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    text-align: center;
}


.p1-auth__logo {
    display: block;
    height: auto;
    width: 50px;
    margin: 0 auto 24px;
}

.p1-auth__title {
    margin: 0 0 8px;
    font-weight: 510;
    font-size: 24px;
    line-height: 32px;
    color: #111827;
}

.p1-auth__sub {
    margin: 0 0 24px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.p1-auth__form {
    text-align: left;
}

.p1-auth__submit {
    margin-top: 32px;
}

.p1-auth__foot {
    margin: 16px 0 0;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    color: #6B7280;
    opacity: 0.8;
}

.p1-auth__foot--muted {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.p1-auth__email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 20px;
    font-weight: 510;
    font-size: 13px;
    line-height: 20px;
    color: var(--p1-title);
}

.p1-auth__email-edit {
    display: inline-flex;
    color: var(--p1-primary);
}

.p1-otp {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.p1-otp input {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    width: 45px;
    height: 44px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.p1-otp input:focus {
    outline: none;
    border-color: var(--p1-primary);
    box-shadow: 0 0 0 3px rgba(0, 194, 168, .15);
}

.p1-otp input.is-filled {
    border-color: var(--p1-teal-100);
    background: var(--p1-teal-20);
}

.p1-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.p1-upload__preview {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    overflow: hidden;
}

.p1-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p1-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.p1-upload__btn {
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-decoration-line: underline;
    color: #00C2A8;
    cursor: pointer;
}

.p1-upload__btn:hover {
    color: var(--p1-primary-hover);
}


.p1-plans {
    max-width: 855px;
    margin: 0 auto;
    padding: 84px 0 80px;
}

.p1-plans__head {
    max-width: 680px;
    margin: 0 auto 54px;
    text-align: center;
}

.p1-plans__title {
    margin: 0 0 7px;
    text-align: center;
    font-weight: 510;
    font-size: 32px;
    line-height: 40px;
    background: linear-gradient(90deg, #111827 0%, #6B7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.p1-plans__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--p1-subtitle);
}

.p1-plans__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.p1-plan {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

.p1-plan__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 15px 16px;
    background: #E6F9F6;
    font-weight: 590;
    font-size: 20px;
    line-height: 24px;
    color: #111827;
}

.p1-plan--premium .p1-plan__head {
    background: #005147;
    color: #fff;
}

.p1-plan__body {
    padding: 16px 15px;
}

.p1-plan__desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #6B7280;
    margin-bottom: 16px;
}

.p1-plan__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 32px;
}

.p1-plan__amount {
    font-weight: 590;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    color: #141111;
}

.p1-plan__body .p1-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

.p1-plan__period {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #6B7280;
}

.p1-plan__divider {
    height: 1px;
    margin: 32px 0 24px;
    background: var(--p1-outline);
}

.p1-plan__included {
    margin: 0 0 15px;
    font-weight: 510;
    font-size: 16px;
    line-height: 24px;
    color: #6B7280;
}

.plan__included_main {
    padding: 0 16px;
}

.p1-plan__features {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.p1-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #111827;
}

.p1-plan__features svg {
    flex: none;
}

.p1-plan__features li.is-off {
    color: #ADB2BD;
}


.p1-checkout {
    padding: 84px 0 80px;
    width: 100%;
}

.p1-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-weight: 590;
    font-size: 16px;
    line-height: 24px;
    text-transform: capitalize;
    color: #111827;
    text-decoration: none;
}

.p1-back:hover,
.p1-back:focus {
    color: var(--p1-primary);
}

.p1-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 28px;
    align-items: start;
}

.p1-card {
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
}

.p1-card:first-child {
    max-width: 480px;
}

.p1-card:last-child {
    max-width: 640px;
    margin-left: auto;
    width: 100%;
}

.p1-card__title {
    margin: 0 0 7px;
    font-weight: 510;
    font-size: 24px;
    line-height: 32px;
    background: linear-gradient(90deg, #111827 0%, #6B7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.p1-card__sub {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
    margin-bottom: 40px;
}

.p1-summary__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 31px;
}

.p1-summary__name {
    font-weight: 590;
    font-size: 18px;
    line-height: 28px;
    color: #111827;
    margin-bottom: 4px;
    display: flex;
}

.p1-summary__meta {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
    margin-bottom: 0;
}

.p1-summary__price {
    flex: none;
    font-weight: 590;
    font-size: 18px;
    line-height: 28px;
    color: #111827;
}

.p1-summary__divider {
    height: 1px;
    margin: 23px 0 25px;
    background: var(--p1-outline);
}

.p1-summary__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.p1-summary__line span:last-child {
    color: #111827;
}

.p1-summary__line--total {
    border-top: 1px solid #E5E7EB;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #111827;
    margin-top: -1px;
    padding-top: 12px;
    margin-bottom: 38px;
}

.p1-summary__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 15px;
}

.p1-summary__foot span {
    font-weight: 510;
    font-size: 16px;
    line-height: 19px;
    color: #ADB2BD;
    display: flex;
    align-items: center;
    gap: 16px;
}

.p1-summary__foot a {
    font-weight: 510;
    font-size: 16px;
    line-height: 19px;
    color: #ADB2BD;
    text-decoration: none;
}

.p1-summary__foot a:hover {
    text-decoration: underline;
}

.p1-summary__links {
    display: flex;
    gap: 14px;
}

.p1-pay__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.p1-pay__label h3 {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #111827;
}

.p1-pay__brands {
    display: flex;
    gap: 6px;
}

.p1-pay__brands span {
    width: 26px;
    height: 17px;
    background: var(--p1-bg);
    border: 1px solid var(--p1-outline);
    border-radius: 3px;
}

.p1-pay__secure {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 30px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #6B7280;
}

.p1-stripe-mount {
    padding: 12px 14px;
    border: 1px solid var(--p1-outline);
    border-radius: var(--p1-radius-sm);
    min-height: 48px;
    display: flex;
    align-items: center;
}

.p1-stripe-mount div {
    width: 100%;
}

.p1-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .5);
}

.p1-modal.is-open {
    display: flex;
}

.p1-modal__box {
    position: relative;
    width: 100%;
    max-width: 822px;
    background: #FFFFFF;
    border-radius: 24px;
}

.p1-modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--p1-title);
    border: 0;
    border-radius: 50%;
    color: var(--p1-white);
    cursor: pointer;
}

.p1-modal__body {
    padding: 80px 15px 44px;
}

.p1-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    background: var(--p1-primary);
    border-radius: 50%;
    color: var(--p1-white);
}

.p1-modal__txn {
    background: rgba(0, 194, 168, 0.1);
    border-radius: 8px;
    font-weight: 510;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #111827;
    padding: 0 8px;
    display: inline-flex;
}

.p1-modal__title {
    font-weight: 510;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
    background: linear-gradient(90deg, #111827 0%, #6B7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 4px;
}

.p1-modal__text {
    width: 100%;
    max-width: 588px;
    margin: auto;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #6B7280;
}

.p1-modal__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #E8E7E7;
    padding: 12px;
}

.p1-modal__txn_main {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}


body.p1-app-body {
    margin: 0;
    background: var(--p1-bg);
    font-family: "SF Pro";
    color: var(--p1-title);
}


body.p1-side-locked {
    overflow: hidden;
}

.p1-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #F3F3F3;
    font-family: "SF Pro";
    color: var(--p1-title);
}

.p1-appbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    flex: none;
    height: var(--p1-appbar-h);
    background: var(--p1-white);
}

.p1-appbar__brand {
    flex: none;
    display: flex;
    align-items: center;
    width: var(--p1-side-w);
    padding: 2px 21px 0;
    background: #000A09;
}

.p1-appbar__logo {
    display: block;
    line-height: 0;
}

.p1-appbar__logo img {
    display: block;
    width: 157px;
    max-width: 100%;
}

.p1-appbar__bar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--p1-outline);
}

.p1-appbar__title {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    font-weight: 590;
    font-size: 24px;
    line-height: 30px;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p1-appbar__right {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
}

.p1-appbar__burger,
.p1-side__close {
    display: none;
}

.p1-appbar__brand.admin-mobile {
    display: none;
}

.p1-app__row {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    min-height: 0;
}

.p1-side {
    flex: none;
    display: flex;
    flex-direction: column;
    width: var(--p1-side-w);
    padding: 24px 16px;
    background: #000A09;
    position: sticky;
    top: var(--p1-appbar-h);
    height: calc(100vh - var(--p1-appbar-h));
    overflow-y: auto;
}

.p1-side__nav ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-side__nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    padding: 12px;
    border-radius: 12px;
    color: #ADB2BD;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
    position: relative;
}

.p1-side__nav .current_page_item a::before {
    content: "";
    position: absolute;
    width: 4px;
    left: 0px;
    top: 12px;
    bottom: 12px;
    background: #FFFFFF;
    border-radius: 0px 4px 4px 0px;
}

.p1-side__nav a img,
.p1-side__nav a svg {
    flex: none;
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
}

.p1-side__nav a:hover,
.p1-side__nav a:focus {
    background: rgba(255, 255, 255, .08);
    color: var(--p1-white);
}

.p1-side__nav .current-menu-item>a,
.p1-side__nav .current_page_item>a,
.p1-side__nav .current-menu-ancestor>a {
    background: #008A77;
    color: #fff;
    box-shadow: 0px 10px 24px rgba(0, 194, 168, 0.2);
    border-radius: 12px;
}

.p1-side__nav .current-menu-item>a svg,
.p1-side__nav .current_page_item>a svg,
.p1-side__nav .current-menu-ancestor>a svg {
    opacity: 1;
}

.p1-side__nav .sub-menu {
    margin: 4px 0 4px 14px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.p1-side__nav .sub-menu a {
    padding: 8px 10px;
    font-size: 12px;
}

.p1-side__foot {
    margin-top: auto;
    padding-top: 24px;
}

.p1-side__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #FF3B30;
    text-decoration: none;
}

.p1-side__logout:hover,
.p1-side__logout:focus {
    background: rgba(255, 107, 107, .12);
    color: #FF6B6B;
}

.p1-side-backdrop {
    display: none;
    position: fixed;
    inset: var(--p1-appbar-h) 0 0 0;
    z-index: 54;
    background: rgba(17, 24, 39, .45);
}

.p1-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 25px;
}

.user-profile-dropdown-menu {
    position: relative;
}

.user-profile-menu,
.user-profile-menu .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-profile-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-profile-menu>li {
    position: relative;
}

/* The account chip: photo, then the name with the email under it. Its contents
   are built by p1_avatar_in_user_menu() in inc/p1-avatar.php, because a menu
   label is one static string and this needs the signed-in user. */


.user-profile-menu>li>a img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* min-width:0 so a long address ellipsises instead of stretching the bar */
.p1-chip__text {
    display: flex;
    flex-direction: column;
}


.user-profile-menu>li.menu-item-has-children>a::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 6px;
    border-right: 2px solid #141111;
    border-bottom: 2px solid #141111;
    border-radius: 0 0 2px 0;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
}

.user-profile-menu>li.menu-item-has-children:hover>a::after,
.user-profile-menu>li.menu-item-has-children:focus-within>a::after {
    transform: translateY(2px) rotate(-135deg);
}

.user-profile-menu>li.menu-item-has-children:hover::after,
.user-profile-menu>li.menu-item-has-children:focus-within::after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    height: 12px;
}

.user-profile-menu .sub-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    min-width: 200px;
    padding: 6px;
    background: var(--p1-white);
    border: 1px solid var(--p1-outline);
    border-radius: var(--p1-radius-sm);
    box-shadow: var(--p1-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.user-profile-menu>li:hover>.sub-menu,
.user-profile-menu>li:focus-within>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.user-profile-menu .sub-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 510;
    font-size: 13px;
    line-height: 20px;
    color: var(--p1-title);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.user-profile-menu .sub-menu a img,
.user-profile-menu .sub-menu a svg {
    flex: none;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.user-profile-menu .sub-menu a:hover,
.user-profile-menu .sub-menu a:focus {
    background: var(--p1-bg);
}


.p1-section-title {
    font-weight: 590;
    font-size: 20px;
    line-height: 28px;
    color: #111827;
    margin-bottom: 24px;
}

.p1-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
}

.p1-section-head .p1-section-title {
    margin: 0;
}

.p1-section-link {
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #00C2A8;
    text-decoration: underline;
}

.p1-section-link:hover,
.p1-section-link:focus {
    color: var(--p1-primary-hover);
}

.p1-plan-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.p1-plan-card__head {
    padding: 23px 23px 24px;
    background: linear-gradient(270deg, #00B199 0%, #005147 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.p1-plan-card__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    background: #008A77;
    border-radius: 16px;
}

.p1-plan-card__intro {
    flex: 1 1 auto;
    min-width: 0;
}

.p1-plan-card__name {
    font-weight: 590;
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.p1-plan-card__desc {
    margin: 0;
    font-weight: 510;
    font-size: 14px;
    line-height: 24px;
    color: #E5E7EB;
}

.p1-plan-card__action {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 16px;
    background: #000A09;
    border-radius: 12px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    transition: opacity .2s ease;
}

.p1-plan-card__action:hover,
.p1-plan-card__action:focus {
    opacity: .88;
    color: var(--p1-white);
}

.p1-plan-card__note {
    flex: none;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .18);
    border-radius: 8px;
    font-weight: 510;
    font-size: 13px;
    line-height: 20px;
    color: var(--p1-white);
}

.p1-plan-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    padding: 24px 23px 22px;
    border-bottom: 1px dashed var(--p1-outline);
}

.p1-plan-meta__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.p1-plan-meta__label {
    display: block;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.p1-plan-meta__value {
    display: block;
    font-weight: 590;
    font-size: 18px;
    line-height: 22px;
    color: #111827;
}

.p1-plan-includes {
    padding: 23px 23px;
}

.p1-plan-includes__title {
    font-weight: 510;
    font-size: 18px;
    line-height: 22px;
    color: #111827;
    margin-bottom: 16px;
}

.p1-plan-includes__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-plan-includes__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #111827;
}

.p1-plan-includes__list svg {
    flex: none;
    color: var(--p1-primary);
}

.p1-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    white-space: nowrap;
}

.p1-pill--good {
    background: #28CD41;
    color: #fff;
}

.p1-pill--bad {
    background: #B91C1C;
    color: #fff;
}

.p1-pill--warn {
    background: #B45309;
    color: #fff;
}

.p1-pill--muted {
    background: var(--p1-outline);
    color: var(--p1-subtitle);
}

.p1-table td .p1-pill {
    border-radius: 50px;
    padding: 3px 12px;
    line-height: 18px;
}

.p1-table td .p1-pill--good {
    background: #E5F9E8;
    color: #28CD41;
}

.p1-table td .p1-pill--bad {
    background: #FFE7E6;
    color: #FF3B30;
}


.p1-table-wrap {
    margin-top: 24px;

    overflow-x: auto;
}

.page-id-1755 .p1-table-wrap {
    margin-top: 0;
}

.p1-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    margin: 0;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E7EB !important;
    border-radius: 20px;
}

.p1-table thead tr {
    background: linear-gradient(270deg, #00B199 0%, #005147 100%);
}

.p1-table th {
    padding: 14px 15px 15px;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    text-align: left;
    white-space: nowrap;
    border: 0;
}

.p1-table td {
    padding: 12px 15px 11px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #E8E7E7;
}

.p1-table tbody tr:last-child td {
    border-bottom: 0;
}


.p1-table__empty {
    padding: 32px 20px;
    color: var(--p1-subtitle);
    text-align: center;
}

.p1-table-wrap.is-loading .p1-table tbody {
    opacity: .45;
    pointer-events: none;
}

.p1-table__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}

.p1-table__summary {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #111827;
    mix-blend-mode: normal;
    opacity: 0.6;
}

.p1-pager {
    display: flex;
    align-items: center;
    padding: 4px;
    width: 64px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    justify-content: space-between;
}

.p1-pager__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--p1-white);
    border: 1px solid var(--p1-outline);
    border-radius: 4px;
    color: var(--p1-title);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
    box-shadow: unset;
    border: 0;
}

.p1-pager__btn:hover:not([disabled]) {
    border-color: var(--p1-primary);
    color: var(--p1-primary);
}

.p1-pager__btn[disabled] {
    opacity: .4;
    cursor: default;
}

.p1-modal__icon--warn {
    background: #FEF3C7;
    color: #B45309;
}

.p1-btn--danger {
    background: var(--p1-danger);
    color: var(--p1-white);
}

.p1-btn--danger:hover,
.p1-btn--danger:focus {
    background: #DC2626;
    color: var(--p1-white);
}


.p1-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--p1-white);
    border: 1px solid var(--p1-outline);
    border-radius: 999px;
}

.p1-tab {
    padding: 8px 18px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 510;
    font-size: 13px;
    line-height: 20px;
    color: var(--p1-subtitle);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.p1-tab.is-active {
    background: var(--p1-title);
    color: var(--p1-white);
}

.p1-panel {
    display: none;
    background: #F3FCFB;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 16px 24px 24px;
}

.p1-panel.is-active {
    display: block;
}

.p1-avatar-edit {
    position: relative;
    width: 156px;
    height: 156px;
    border: 8px solid #FFFFFF;
    border-radius: 100px;
    margin-bottom: 16px;
    margin-left: -8px;
}

.p1-avatar-edit img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--p1-bg);
}

.p1-avatar-edit__btn {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #111827;
    border: 2px solid #FFFFFF;
    border-radius: 1000px;
    border-radius: 50%;
    color: var(--p1-white);
    cursor: pointer;
}

.p1-avatar-edit input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.p1-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.p1-form-grid .p1-field--full {
    grid-column: 1 / -1;
}

.p1-form-actions {
    border-top: 1px solid #E5E7EB;
    margin: 0 -24px;
    padding: 23px 24px 0;
}

.p1-form-actions .p1-btn {
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 12px;
}

.p1-notice {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--p1-radius-sm);
    font-size: 13px;
    line-height: 20px;
}

.p1-notice--ok {
    background: var(--p1-teal-20);
    border: 1px solid var(--p1-teal-100);
    color: var(--p1-primary-dark);
}

.p1-notice--error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.p1-auth [hidden] {
    display: none;
}

button.p1-auth__email-edit {
    padding: 0;
    background: none;
    border: 0;
    line-height: 1;
    cursor: pointer;
}

.p1-linkbtn {
    padding: 0;
    background: none !important;
    border: 0;
    box-shadow: unset;
    border-radius: 0;
    cursor: pointer;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #00C2A8;
    text-decoration: underline;
}

.p1-auth__form .p1-auth__foot {
    text-align: center;
}

/* ---------------- Dashboard ---------------- */
.p1-pb-welcome {
    font-weight: 590;
    font-size: 32px;
    line-height: 38px;
    color: #111827;
    margin-bottom: 24px;
}

.p1-pb-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.p1-pb-stat {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

.p1-pb-stat__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    width: 72px;
    height: 72px;
    background: #E6F9F6;
    border-radius: 16px;
}

span.p1-pb-stat__body {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
}

.p1-pb-stat__number {
    font-weight: 590;
    font-size: 32px;
    line-height: 42px;
    color: #141111;
}

.p1-pb-stat__label {
    font-weight: 510;
    font-size: 18px;
    line-height: 24px;
    color: #626060;
}

.p1-pb-panel {
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
}

.p1-pb-panel:not(:last-child) {
    margin-bottom: 20px;
}

.p1-pb-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.p1-pb-panel__title {
    margin: 0;
    font-weight: 590;
    font-size: 20px;
    line-height: 26px;
    color: #111827;
}

.p1-pb-panel__link {
    font-weight: 590;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #00C2A8;
}

.p1-pb-panel__link:hover,
.p1-pb-panel__link:focus {
    color: var(--p1-primary-hover);
    text-decoration: underline;
}


/* ---------------- The card ---------------- */
.p1-pb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.p1-pb-card {
    padding: 4px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    overflow: hidden;
}

.p1-pb-card__media {
    position: relative;
    padding: 31.7%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.all-playbooks .p1-pb-card__media {
    padding: 30.34%;
}

.p1-pb-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.p1-pb-card:hover .p1-pb-card__media img {
    transform: scale(1.04);
}

.p1-pb-card__body {
    padding: 16px 12px 0;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.p1-pb-card__cat {
    display: inline-block;
    margin-bottom: 16px;
    padding: 3px 7px;
    background: #E6F9F6;
    border: 0.8px solid #00B199;
    backdrop-filter: blur(25px);
    border-radius: 8px;
    font-weight: 510;
    font-size: 12px;
    line-height: 14px;
    color: #008A77;
}

.p1-pb-card__lessons {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}

.p1-pb-card__lessons svg {
    flex: none;
}

.p1-pb-card__title {
    margin: 0 0 3px;
    font-weight: 590;
    font-size: 15px;
    line-height: 22px;
}

.p1-pb-card__title a {
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

.p1-pb-card__title a:hover,
.p1-pb-card__title a:focus {
    color: var(--p1-primary);
}

/* Two lines then an ellipsis, so cards in a row stay the same height */
.p1-pb-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.p1-pb-card__foot {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 11px 0 12px;
    border-top: 1px dashed #E5E7EB;
    margin: 12px 12px 0;
}

.p1-pb-card__progress {
    flex: 1 1 auto;
    min-width: 0;
}

.p1-pb-card__percent {
    display: block;
    margin-bottom: 4px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}

.p1-pb-bar {
    display: block;
    height: 8px;
    background: var(--p1-outline);
    border-radius: 999px;
    overflow: hidden;
    flex: 1 1 auto;
}

.p1-pb-bar__fill {
    display: block;
    height: 100%;
    background: var(--p1-primary);
    border-radius: 999px;
}

.p1-pb-card__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 24px;
    background: #00C2A8;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    text-decoration: none;
    transition: filter .2s ease;
}

.p1-pb-card__btn:hover,
.p1-pb-card__btn:focus {
    filter: brightness(.94);
    color: var(--p1-white);
}

/* Nothing to show alongside it, so the enrol button takes the whole row */
.p1-pb-card__btn--enrol {
    flex: 1 1 auto;
    background: #005248;
}

/* Same reason: a finished playbook has no bar to sit beside */
.p1-pb-card__btn--cert {
    flex: 1 1 auto;
}


/* ---------------- Explore Playbooks ---------------- */
.p1-pb-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.p1-pb-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.p1-pb-search svg {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #111827;
    pointer-events: none;
}

.p1-pb-search input {
    width: 100%;
    box-shadow: unset;
    padding: 0 16px 0 44px;
    padding: 8px 16px 8px 44px;
    font-family: "SF Pro";
    max-width: 761px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #000;
}

.p1-pb-search input:focus {
    outline: none;
    border-color: var(--p1-primary);
}

.p1-pb-category {
    flex: none;
    width: 180px;
    height: 48px;
    padding: 0 38px 0 16px;
    background-color: var(--p1-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--p1-outline);
    border-radius: var(--p1-radius);
    appearance: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--p1-title);
    cursor: pointer;
}

.p1-pb-explore__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}


.page-template-my-playbooks .p1-pb-explore__head {
    margin-bottom: 30px;
}
.page-template-my-playbooks .p1-pb-card__foot {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 0 12px;
    border-top: 1px dashed #E5E7EB;
    margin: 11px 12px 0;
}

.page-template-my-playbooks .p1-pb-card__btn{
    min-width: 204px;
}

.page-template-my-playbooks .p1-pb-card__media {
    position: relative;
    padding: 30.4%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.p1-pb-explore__title {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #111827;
}

.p1-pb-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.p1-pb-switch button {
    border-radius: 0;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: unset;
    padding: 4px 12px;
    border: 0;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.p1-pb-switch button.is-active {
    background: var(--p1-title);
    color: var(--p1-white);
}

/* Dimmed while a filter is in flight, rather than blanked */
.p1-pb-explore.is-loading .p1-pb-grid {
    opacity: .45;
    pointer-events: none;
}

.p1-pb-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px 20px;
    background: var(--p1-white);
    border: 1px solid var(--p1-outline);
    border-radius: var(--p1-radius);
    font-size: 14px;
    color: var(--p1-subtitle);
    text-align: center;
}


/* ---------------- Course, signed in ---------------- */
.p1-pb-hero {
    position: relative;
    min-height: 340px;
    margin-bottom: -64px;
    background: var(--p1-title) center right / cover no-repeat;
    border-radius: 16px;
    overflow: hidden;
}

/* Keeps the copy readable over whatever the featured image is */
.p1-pb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.5) 46.75%, rgba(0, 0, 0, 0) 57.23%), url(image.png);
}

.p1-pb-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 340px;
    padding: 24px;
}

.p1-pb-hero__cat {
    display: inline-flex;
    padding: 3px 7px;
    background: rgba(230, 249, 246, 0.1);
    border: 1px solid rgba(0, 177, 153, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    font-weight: 510;
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.p1-pb-hero__title {
    font-weight: 510;
    font-size: 32px;
    line-height: 42px;
    color: #FFFFFF;
    margin-bottom: 9px;
}

.p1-pb-hero__sub {
    max-width: 520px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #E5E7EB;
    margin-bottom: 23px;
}

.p1-pb-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: var(--p1-primary);
    border-radius: 10px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: var(--p1-white);
    text-decoration: none;
    transition: filter .2s ease;
    margin-bottom: 24px;
}

.p1-pb-hero__cta:hover,
.p1-pb-hero__cta:focus {
    filter: brightness(.94);
    color: var(--p1-white);
}

/* --- Hero progress, shown once they are in the course --- */
.p1-pb-hero__progress {
    display: flex;
    align-items: center;
    padding: 7px 15px;
    gap: 24px;
    width: 100%;
    max-width: 557px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(229, 231, 235, 0.1);
    border-radius: 12px;
}

.p1-pb-hero__percent {
    font-weight: 590;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

/* The bar itself is .p1-pb-bar, shared with the cards; on the dark hero the
   empty part needs to be lighter than the card version's grey. */
.p1-pb-hero__progress .p1-pb-bar {
    background: rgba(255, 255, 255, .25);
}

/* --- Download Certificate --- */
.p1-pb-details__cert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 18px;
    background: var(--p1-primary);
    border-radius: 10px;
    font-weight: 590;
    font-size: 13px;
    line-height: 20px;
    color: var(--p1-white);
    text-decoration: none;
    transition: filter .2s ease;
}

.p1-pb-details__cert:hover,
.p1-pb-details__cert:focus {
    filter: brightness(.94);
    color: var(--p1-white);
}

.p1-pb-tabs {
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 0 25px;
    margin: 0 -25px 30px;
    height: 127px;
    background: #F8FAFC;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.05);
}

.p1-pb-tabs a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 590;
    font-size: 16px;
    line-height: 19px;
    color: #141111;
    text-decoration: none;
    padding: 0 21px 12px;
    position: relative;
}

.p1-pb-tabs a.is-active {
    color: #00C2A8;
}

.p1-pb-tabs a.is-active::after {
    content: "";
    background-color: #00C2A8;
    height: 4px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
}

/* Overview and modules stack down the left, details sits alongside */
.p1-pb-course__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 319px;
    gap: 24px 20px;
    align-items: start;
}

.p1-pb-panel-card {
    grid-column: 1;
    padding: 24px 23px 22px;
    background: #F3FCFB;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
}

.p1-pb-card-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #111827;
    margin-bottom: 23px;
}

.p1-pb-content h4 {
    font-weight: 590;
    font-size: 20px;
    line-height: 26px;
    color: #111827;
    margin-bottom: 17px;
}

.p1-pb-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #464A53;
    margin-bottom: 12px;
}

.p1-pb-content ul {
    padding: 0;
    margin: 0 0 29px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.p1-pb-content ul.tags li {
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
    background: #f3f3f3 !important;
}

.p1-pb-content ul li {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #D2F4F0;
    border-radius: 12px;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}
.single-sfwd-courses .p1-pb-content p{
    color: #6B7280;
}
.single-sfwd-courses .p1-pb-content ul li {
    /* color: #111827; */
    color: #6B7280;
    border: 1px solid #E5E7EB;
    background: #E5E7EB;
}

.p1-pb-content h2,
.p1-pb-content h3 {
    margin: 24px 0 10px;
    font-weight: 590;
    font-size: 16px;
    line-height: 24px;
    color: var(--p1-title);
}

.p1-pb-content img,
.p1-pb-content iframe {
    max-width: 100%;
    border-radius: 12px;
}

.p1-pb-learn__title {
    font-weight: 590;
    font-size: 20px;
    line-height: 26px;
    color: #111827;
    margin: 29px 0 17px;
}

.p1-pb-learn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-pb-learn li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #464A53;
}
.single-sfwd-courses .p1-pb-learn li{
    color: #6B7280;
}
.p1-pb-learn svg {
    flex: none;
    width: 24px;
    height: 24px;
    color: #00C2A8;
}

/* --- Course details --- */
.p1-pb-details {
    grid-column: 2;
    grid-row: 1;
    padding: 20px;
    background: #000A09;
    border-radius: 16px;
}

.p1-pb-details__row_main {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.p1-pb-details__title {
    margin: 0 0 16px;
    font-weight: 590;
    font-size: 20px;
    line-height: 26px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.p1-pb-details__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, .78);
}

.p1-pb-details__row span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #ADB2BD;
}

.p1-pb-details__row svg {
    flex: none;
    color: var(--p1-primary);
}

.p1-pb-details__row strong {
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #FFFFFF;
}

/* --- Modules --- */
.p1-pb-modules__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 23px;
}

.p1-pb-modules__head .p1-pb-card-title {
    margin: 0;
}

.p1-pb-expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    background: var(--p1-white);
    border: 1px solid var(--p1-outline);
    border-radius: 10px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
    cursor: pointer;
    white-space: nowrap;
}

.p1-pb-expand svg {
    transition: transform .2s ease;
}

.p1-pb-expand.is-open svg {
    transform: rotate(180deg);
}

.p1-pb-modules {
    border: 1px solid var(--p1-outline);
    border-radius: var(--p1-radius);
    overflow: hidden;
}

.p1-pb-module+.p1-pb-module {
    border-top: 1px solid var(--p1-outline);
}

.p1-pb-module__head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 16px 16px 14px;
    background: transparent;
    border: 0;
    font-weight: 590;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
}

button.p1-pb-module__head:hover,
button.p1-pb-module__head:focus {
    background-color: #F8FAFC;
    color: #111827;
}

.p1-pb-module__lock {
    flex: none;
    color: var(--p1-subtitle);
}

.p1-pb-module__name {
    flex: 1 1 auto;
    min-width: 0;
}

.p1-pb-module__count {
    flex: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #6B7280;
}

.p1-pb-module__head[aria-expanded="true"] {
    border-bottom: 1px solid #E5E7EB;
    background-color: #F8FAFC;

}

.p1-pb-module__chev {
    flex: none;
    color: var(--p1-subtitle);
    transition: transform .2s ease;
}

.p1-pb-module.is-open .p1-pb-module__chev {
    transform: rotate(180deg);
}

.p1-pb-module__steps {
    display: none;
    margin: 0;
    padding: 16px 16px 15px;
    list-style: none;
    background: var(--p1-white);
}

.p1-pb-module.is-open .p1-pb-module__steps {
    display: block;
}

.p1-pb-module__steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 510;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.p1-pb-module__steps li:not(:last-child) {
    margin-bottom: 12px;
}

.p1-pb-module__steps svg {
    flex: none;
    color: var(--p1-silver);
    width: 20px;
    height: 20px;
}

/* Clickable once they are in the course */
.p1-pb-module__steps a {
    color: inherit;
    text-decoration: none;
}

.p1-pb-module__steps li:hover a {
    color: var(--p1-primary);
    text-decoration: underline;
}

/* How far through a module they are, in the same slot the padlock uses for a
   visitor: a ring that fills as the lessons are finished, and a solid disc
   with a white tick once they all are. The tick is drawn white in the markup
   rather than inherited, so it stays readable on the filled disc. */
.p1-pb-module__state {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--p1-primary);
}

/* The unfinished part of the ring. A plain grey circle sitting under the arc,
   so a module with nothing done still reads as a ring rather than nothing. */
.p1-pb-module__track {
    fill: none;
    stroke: var(--p1-outline);
}

/* The finished part. Stroke is set here rather than on the element so it wins
   over the presentation attribute, and the transition means the ring grows
   instead of jumping if the value is ever changed on the fly. */
.p1-pb-module__arc {
    fill: none;
    stroke: var(--p1-primary);
    transition: stroke-dashoffset .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .p1-pb-module__arc {
        transition: none;
    }
}

.p1-pb-module__steps li.is-done svg {
    color: var(--p1-primary);
}

.p1-pb-module__steps li.is-done a {
    color: var(--p1-title);
}

.single-sfwd-lessons {}

/* --- The foot of an infinite-scrolling grid ---
   template-parts/playbook-more.php, used by Explore Playbooks and My
   Playbooks. It is both the sentinel the script watches and the spinner shown
   while the next page is on its way, which is why the two are one element. It
   carries `hidden` when the list is finished, so nothing is drawn once there
   is nothing left to load. */
.p1-pb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0 4px;
    font-size: 13px;
    line-height: 20px;
    color: var(--p1-subtitle);
}

/* The `display:flex` above is an author rule and so beats the browser's own
   [hidden] { display: none }, which left "Loading more playbooks…" sitting
   under every finished list. This puts it back. */
.p1-pb-more[hidden] {
    display: none;
}

.p1-pb-spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--p1-outline);
    border-top-color: var(--p1-primary);
    border-radius: 50%;
    animation: p1-pb-spin .7s linear infinite;
}


.page-template-my-playbooks .p1-chip .p1-chip__mail {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}



@keyframes p1-pb-spin {
    to {
        transform: rotate(360deg);
    }
}




@media (prefers-reduced-motion: reduce) {
    .p1-pb-spinner {
        animation-duration: 2.5s;
    }
}


/* =========================================================================
   Notification
   -------------------------------------------------------------------------
   One card per group, rows divided by hairlines rather than gaps, so a run of
   notifications reads as a single list. Markup in templates/notification.php,
   feed in inc/p1-notifications.php.
   ========================================================================= */
.p1-notif__head {
    display: flex;
    justify-content: flex-end;
    /* margin-bottom: 18px; */
}

.p1-notif__read-all {
    font-size: 14px;
    line-height: 20px;
    padding: 7px 18px;
    border-radius: 12px;
}

.p1-notif__group {
    margin: 0 0 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--p1-subtitle);
}

/* Not the last group's margin — the page's own padding closes the page off. */
.p1-notif__list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    background: var(--p1-white);
    border: 1px solid #EAE8E9;
    border-radius: var(--p1-radius);
    overflow: hidden;
        border-radius: 20px;
}

.p1-notif__list:last-child {
    margin-bottom: 0;
}

.p1-notif__item+.p1-notif__item {
    border-top: 1px solid var(--p1-outline);
}

/* The tint is what marks a row unread at a glance; the dot is for confirming
   which one, and for anybody who cannot see the tint. */
.p1-notif__item.is-unread {
    background: #E6F9F6;
}

.p1-notif__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 12px;
    text-decoration: none;
    color: inherit;
}

a.p1-notif__row:hover,
a.p1-notif__row:focus {
    background: rgba(17, 24, 39, .02);
    color: inherit;
}

a.p1-notif__row:hover .p1-notif__title,
a.p1-notif__row:focus .p1-notif__title {
    color: var(--p1-primary);
}

/* Always in the layout, visible only when unread, so the text of every row
   starts on the same line whether it carries a dot or not. */
.p1-notif__dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: transparent;
}

.p1-notif__item.is-unread .p1-notif__dot {
    background: var(--p1-primary);
}

.p1-notif__item--warn.is-unread .p1-notif__dot {
    background: #B45309;
}

.p1-notif__item--bad.is-unread .p1-notif__dot {
    background: var(--p1-danger);
}

.p1-notif__body {
    display: block;
    min-width: 0;
}

.p1-notif__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 590;
    font-size: 16px;
    line-height: 22px;
    color: var(--p1-title);
    transition: color .2s ease;
}

.p1-notif__text {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
    font-weight: 400;
}
.p1-notif__time {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
    font-weight: 400;
}
.p1-notif__empty {
    padding: 56px 24px;
    background: var(--p1-white);
    border: 1px solid var(--p1-outline);
    border-radius: var(--p1-radius);
    text-align: center;
}

.p1-notif__empty-title {
    margin: 0 0 8px;
    font-weight: 590;
    font-size: 18px;
    line-height: 26px;
    color: var(--p1-title);
}

.p1-notif__empty-text {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 20px;
    color: var(--p1-subtitle);
}


.p1-appbar__back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--p1-bg);
    border: 1px solid var(--p1-outline);
    border-radius: 8px;
    color: var(--p1-title);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.p1-appbar__back:hover,
.p1-appbar__back:focus {
    border-color: var(--p1-primary);
    color: var(--p1-primary);
}

@media (max-width: 640px) {
    .p1-notif__row {
        padding: 16px;
    }

    .p1-notif__read-all {
        width: 100%;
    }
}


/* =========================================================================
   Playbook screens — responsive
   -------------------------------------------------------------------------
   These live here rather than in p1-playbooks.css because that file is the
   one the server does not have and the one that has since been emptied, while
   every .p1-pb-* rule actually in play is in this file. The breakpoints match
   assets/css/p1-app-responsive.css, so the shell and the content it holds
   turn over at the same width.
   ========================================================================= */
@media (max-width: 1200px) {
    .p1-pb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Between these two the sidebar is still beside the content and the details
   column still takes its 319px, which leaves the overview card too narrow for
   two columns of learn items — they wrapped to three or four words a line. */
@media (min-width: 992px) and (max-width: 1200px) {
    .p1-pb-learn {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991px) {
    .p1-pb-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Details drops under the overview once there is no room beside it */
    .p1-pb-course__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .p1-pb-panel-card,
    .p1-pb-details {
        grid-column: 1;
    }

    .p1-pb-details {
        grid-row: auto;
    }

    .p1-pb-hero__title {
        font-size: 26px;
    }

    .p1-pb-filters {
        flex-wrap: wrap;
    }

    .p1-pb-category {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .p1-pb-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .p1-pb-explore__head {
        flex-wrap: wrap;
    }

    .p1-pb-switch {
        width: 100%;
        justify-content: space-between;
    }

    .p1-pb-learn {
        grid-template-columns: minmax(0, 1fr);
    }

    .p1-pb-card__foot {
        flex-wrap: wrap;
    }

    .p1-pb-hero::before {
        background: linear-gradient(180deg, rgba(17, 24, 39, .8) 0%, rgba(17, 24, 39, .96) 100%);
    }
}

/* ===================================================================
   Resources
   -------------------------------------------------------------------
   The library grid. It borrows the screen furniture from the playbook
   screens — .p1-pb-filters, .p1-pb-explore__head, .p1-pb-empty and the
   loading spinner are all shared — so only the card itself is new.

   Its breakpoints match .p1-pb-grid on purpose: three columns, two at
   1200px, one at 640px. The two grids sit under the same sidebar and
   should break at the same widths.
   =================================================================== */
.p1-res-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.p1-res-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    background: var(--p1-white);
    border-radius: var(--p1-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

.p1-res-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 12px;
    margin-bottom: 18px;
    background: #E6F9F6;
    border-radius: 16px;
    color: var(--p1-primary);

}

.p1-res-card__title {
    margin: 0 0 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

.p1-res-card__meta {
    padding: 0 0 16px;
    border-bottom: 1px dashed #E5E7EB;
    margin-bottom: 16px;
}

/* Label left, value right, and the value wins the space — a module name
   runs long more often than the word beside it. */
.p1-res-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.p1-res-card__row:last-child {
    margin-bottom: 0;
}

.p1-res-card__row dt {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #6B7280;
}
.p1-res-card__row dt svg {
    color: var(--p1-primary);
}

.p1-res-card__row dd {
    margin: 0;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #111827;
    text-align: right;
}

/* margin-top:auto is what keeps the buttons on one line across a row of
   cards whose titles and modules wrap to different heights. */
.p1-res-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 12px 20px;
    background: var(--p1-primary);
    border-radius: var(--p1-radius-sm);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--p1-white);
    text-decoration: none;
    transition: filter .2s ease;
}

.p1-res-card__btn:hover,
.p1-res-card__btn:focus {
    filter: brightness(.94);
    color: var(--p1-white);
}

/* A resource whose file has not been attached yet. Shown rather than
   hidden so the gap is obvious to whoever has to fill it. */
.p1-res-card__btn--empty {
    background: var(--p1-outline);
    color: var(--p1-subtitle);
    cursor: not-allowed;
}

.p1-res-card__btn--empty:hover {
    filter: none;
    color: var(--p1-subtitle);
}

.p1-pb-explore.is-loading .p1-res-grid {
    opacity: .45;
    pointer-events: none;
}


@media (max-width: 1200px) {
    .p1-res-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .p1-res-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the label/value split reads as two ragged columns */
    .p1-res-card__row {
        flex-direction: column;
        gap: 2px;
    }

    .p1-res-card__row dd {
        text-align: left;
    }
    .p1-notif__head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}
}


/* ===================================================================
   SSO — Open Management App
   -------------------------------------------------------------------
   Sits in the app bar beside the account chip, and is also available
   anywhere via [p1_sso_button]. Markup in inc/p1-sso.php.
   =================================================================== */
.p1-sso-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 9px 18px;
    background: var(--p1-primary);
    border-radius: 10px;
    font-weight: 590;
    font-size: 14px;
    line-height: 20px;
    color: var(--p1-white);
    text-decoration: none;
    white-space: nowrap;
    transition: filter .2s ease;
}

.p1-sso-btn:hover,
.p1-sso-btn:focus {
    filter: brightness(.94);
    color: var(--p1-white);
}

.p1-sso-btn svg {
    flex: none;
}

/* The app bar is tight once the title and the account chip are in it, so
   below this the button keeps its icon and loses its words rather than
   pushing the chip off the row. */
@media (max-width: 991px) {
    .p1-sso-btn {
        padding: 9px 12px;
    }

    .p1-sso-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}